JavaScript De\u011fi\u015fkenleri ve HTML’deki DOM: Ba\u015flang\u0131\u00e7 Rehberi<\/p>\n
Merhaba! Bug\u00fcn sizlerle JavaScript’in temel yap\u0131ta\u015flar\u0131ndan biri olan de\u011fi\u015fkenleri ve HTML’deki Document Object Model (DOM) ile nas\u0131l etkile\u015fim kurdu\u011funu ke\u015ffedece\u011fiz. Bu rehber, web geli\u015ftirmeye yeni ba\u015flayanlar i\u00e7in olduk\u00e7a faydal\u0131 olacakt\u0131r. \u00d6ncelikle, JavaScript de\u011fi\u015fkenlerini anlamakla ba\u015flayal\u0131m.<\/p>\n
JavaScript’te de\u011fi\u015fkenler, verileri (say\u0131lar, metinler, vb.) saklamak i\u00e7in kullan\u0131lan kaplard\u0131r. Bir de\u011fi\u015fkeni tan\u0131mlamak i\u00e7in let, const veya var anahtar kelimelerini kullan\u0131r\u0131z. let ile tan\u0131mlanan de\u011fi\u015fkenlerin de\u011feri daha sonra de\u011fi\u015ftirilebilirken, const ile tan\u0131mlanan de\u011fi\u015fkenlerin de\u011feri sabittir. var ise eski bir y\u00f6ntemdir ve g\u00fcn\u00fcm\u00fczde genellikle let veya const tercih edilir.<\/p>\n
\nlet isim = \"Fatih Soysal\"; \/\/ String (metin) tipi de\u011fi\u015fken\nlet yas = 30; \/\/ Number (say\u0131) tipi de\u011fi\u015fken\nconst PI = 3.14159; \/\/ Sabit bir de\u011fer\n<\/code><\/pre>\nDe\u011fi\u015fken isimleri anlaml\u0131 olmal\u0131 ve JavaScript de\u011fi\u015fken adland\u0131rma kurallar\u0131na uygun olmal\u0131d\u0131r. \u00d6rne\u011fin, bo\u015fluk i\u00e7ermemeli, say\u0131yla ba\u015flamamal\u0131 ve \u00f6zel karakterler (baz\u0131 istisnalar hari\u00e7) i\u00e7ermemelidir. Kod yazarken dikkat etmeniz gereken noktalardan biridir. Unutmay\u0131n, iyi kod yazman\u0131n en \u00f6nemli \u00f6zelli\u011fi okunabilir olmas\u0131d\u0131r. <\/p>\n
DOM (Document Object Model)<\/h2>\n
DOM, HTML belgenizin a\u011fa\u00e7 yap\u0131s\u0131n\u0131 temsil eden bir nesne modelidir. JavaScript, DOM arac\u0131l\u0131\u011f\u0131yla HTML \u00f6\u011felerini se\u00e7ebilir, \u00f6zelliklerini de\u011fi\u015ftirebilir ve hatta yeni \u00f6\u011feler ekleyebilir. Bu sayede, web sayfalar\u0131n\u0131z\u0131 dinamik hale getirebilir ve kullan\u0131c\u0131lara etkile\u015fimli bir deneyim sunabilirsiniz. \u00d6rne\u011fin, bir butona t\u0131kland\u0131\u011f\u0131nda sayfada bir metnin rengini de\u011fi\u015ftirmek gibi i\u015flemler DOM sayesinde ger\u00e7ekle\u015fir.<\/p>\n
DOM’a eri\u015fmek i\u00e7in genellikle document.getElementById(), document.querySelector() ve document.querySelectorAll() gibi y\u00f6ntemleri kullan\u0131r\u0131z. Bu y\u00f6ntemler, HTML \u00f6\u011felerini se\u00e7menizi sa\u011flar. Se\u00e7ti\u011finiz \u00f6\u011feleri de\u011fi\u015ftirmek i\u00e7in ise innerHTML, style, textContent gibi \u00f6zellikleri kullan\u0131rs\u0131n\u0131z. A\u015fa\u011f\u0131daki \u00f6rnekte, bir butona t\u0131kland\u0131\u011f\u0131nda paragraf\u0131n rengi de\u011fi\u015ftirilir.<\/p>\n
\n<button onclick=\"degistir()\">Renk De\u011fi\u015ftir<\/button>\n<p id=\"paragraf\">Bu bir paragraft\u0131r.<\/p>\n\n<script>\nfunction degistir() {\n document.getElementById(\"paragraf\").style.color = \"red\";\n}\n<\/script>\n<\/code><\/pre>\n