var, let, const:<\/p>\n\n\n\n
var<\/code>: De\u011fi\u015fken tan\u0131mlamak i\u00e7in kullan\u0131l\u0131r.<\/li>\n\n\n\nlet<\/code>: Modern de\u011fi\u015fken tan\u0131mlama, kapsaml\u0131 ve g\u00fcvenli.<\/li>\n\n\n\nconst<\/code>: De\u011fi\u015fmez bir de\u011feri temsil eder.<\/li>\n<\/ul>\n\n\n\n\/\/ "var" \u00f6rne\u011fi\nvar x = 10;\nconsole.log(x); \/\/ \u00c7\u0131kt\u0131: 10\n\n\/\/ "let" \u00f6rne\u011fi\nlet y = 5;\nconsole.log(y); \/\/ \u00c7\u0131kt\u0131: 5\n\n\/\/ "const" \u00f6rne\u011fi\nconst z = 3.14;\nconsole.log(z); \/\/ \u00c7\u0131kt\u0131: 3.14\n<\/pre><\/div>\n\n\nconsole.log()<\/h4>\n\n\n\n
console.log() bir JavaScript y\u00f6ntemidir ve taray\u0131c\u0131 veya Node.js<\/p>\n\n\n\n
ortam\u0131nda kullan\u0131lan bir yazd\u0131rma fonksiyonudur. Bu y\u00f6ntem, geli\u015ftiricilere uygulama ak\u0131\u015f\u0131n\u0131<\/p>\n\n\n\n
ve de\u011ferleri izlemeleri, hata ay\u0131klama yapmalar\u0131 ve bilgiyi g\u00f6r\u00fcnt\u00fclemeleri i\u00e7in bir ara\u00e7 sa\u011flar.<\/p>\n\n\n\n
Taray\u0131c\u0131 konsolu veya komut sat\u0131r\u0131 gibi \u00e7e\u015fitli \u00e7\u0131kt\u0131 kanallar\u0131nda kullan\u0131labilir.<\/p>\n\n\n\n
alert()<\/strong><\/h4>\n\n\n\nalert() fonksiyonu, taray\u0131c\u0131 i\u00e7inde \u00e7al\u0131\u015fan JavaScript kodunda kullan\u0131lan bir y\u00f6ntemdir.<\/p>\n\n\n\n
Bu fonksiyon, taray\u0131c\u0131 penceresinde kullan\u0131c\u0131ya an\u0131nda bir bildirim kutusu (alert kutusu) g\u00f6stermeye yarar.<\/p>\n\n\n\n
confirm()<\/strong><\/h4>\n\n\n\nconfirm() fonksiyonu da taray\u0131c\u0131 i\u00e7inde \u00e7al\u0131\u015fan JavaScript kodunda kullan\u0131lan bir y\u00f6ntemdir.<\/p>\n\n\n\n
Bu fonksiyon, taray\u0131c\u0131 penceresinde kullan\u0131c\u0131ya bir onay kutusu (confirm kutusu) g\u00f6stermeye yarar.<\/p>\n\n\n\n
Kullan\u0131c\u0131ya \u201cEvet\u201d veya \u201cHay\u0131r\u201d gibi iki se\u00e7enek sunar ve kullan\u0131c\u0131n\u0131n se\u00e7imine g\u00f6re bir de\u011fer d\u00f6nd\u00fcr\u00fcr.<\/p>\n\n\n\n
prompt()<\/strong><\/h4>\n\n\n\nprompt() fonksiyonu, taray\u0131c\u0131 i\u00e7inde \u00e7al\u0131\u015fan JavaScript kodunda kullan\u0131lan bir y\u00f6ntemdir.<\/p>\n\n\n\n
Bu fonksiyon, taray\u0131c\u0131 penceresinde kullan\u0131c\u0131ya bir girdi kutusu (input kutusu) g\u00f6stermeye yarar.<\/p>\n\n\n\n
Kullan\u0131c\u0131dan metin veya veri girmesini istemek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n
\nvar ad = prompt("Ad\u0131n\u0131z\u0131 giriniz:");\nif (ad !== null) {\nconsole.log("Merhaba, " + ad + "!");\n} else {\nconsole.log("Giri\u015f yap\u0131lmad\u0131.");\n}\n<\/pre><\/div>\n\n\nVeri T\u00fcrleri<\/strong><\/h4>\n\n\n\nJavaScript, \u00e7e\u015fitli veri t\u00fcrlerini destekleyen bir programlama dilidir. \u0130\u015fte JavaScript\u2019te bulunan temel veri t\u00fcrleri:<\/p>\n\n\n\n
1. **Say\u0131lar (Numbers):** Tamsay\u0131lar ve ondal\u0131k say\u0131lar gibi say\u0131sal de\u011ferleri temsil eder. \u00d6rnek: `42`, `3.14`.<\/p>\n\n\n\n
2. **Metin (Strings):** Metin veya karakter dizilerini temsil eder. \u00d6rnek: `\u201dMerhaba, d\u00fcnya!\u201d`, `\u2019JavaScript\u2019`.<\/p>\n\n\n\n
3. **Boolean:** Sadece iki de\u011feri olan `true` (do\u011fru) veya `false` (yanl\u0131\u015f) de\u011ferlerini temsil eder.<\/p>\n\n\n\n
4. **Dizi (Array):** Birden fazla de\u011feri i\u00e7eren bir liste yap\u0131s\u0131n\u0131 temsil eder. \u00d6rnek: `[1, 2, 3]`, `[\u2018elma\u2019, \u2018armut\u2019, \u2018\u00e7ilek\u2019]`.<\/p>\n\n\n\n
5. **Nesne (Object):** Anahtar-de\u011fer \u00e7iftleriyle ili\u015fkilendirilmi\u015f veri yap\u0131lar\u0131n\u0131 temsil eder. \u00d6rnek:<\/p>\n\n\n
\nvar kullanici = {\n ad: "John",\n soyad: "Doe",\n yas: 30\n};\n<\/pre><\/div>\n\n\n6. **Fonksiyon (Function):** Bir dizi talimat\u0131 i\u00e7eren ve bir i\u015flemi ger\u00e7ekle\u015ftirmek i\u00e7in \u00e7a\u011fr\u0131lan kod bloklar\u0131n\u0131 temsil eder.<\/p>\n\n\n\n
7. **Null:** Bir de\u011ferin yoklu\u011funu veya bo\u015f oldu\u011funu temsil eder.<\/p>\n\n\n\n
8. **Undefined:** Bir de\u011fi\u015fkenin de\u011feri atanmad\u0131\u011f\u0131nda veya bir fonksiyon bir de\u011fer d\u00f6nd\u00fcrmedi\u011finde kullan\u0131lan de\u011ferdir.<\/p>\n\n\n\n
9. **Semboller (Symbols):** Benzersiz ve de\u011fi\u015ftirilemez bir de\u011feri temsil eden nesnelerdir.<\/p>\n\n\n\n
Bu temel veri t\u00fcrlerinin yan\u0131 s\u0131ra, JavaScript\u2019te daha spesifik veri t\u00fcrleri ve nesneleri de kullanabilirsiniz, \u00f6rne\u011fin: `Date` (tarih ve saat), `RegExp` (d\u00fczenli ifadeler), `Map` (haritalar), `Set` (k\u00fcmeler) gibi.<\/p>\n\n\n\n
JavaScript dinamik bir tip sistemi kullan\u0131r, bu nedenle bir de\u011fi\u015fken farkl\u0131 veri t\u00fcrlerini farkl\u0131 zamanlarda alabilir. Veri t\u00fcrleri otomatik olarak \u00e7evrilebilir ve d\u00f6n\u00fc\u015ft\u00fcr\u00fclebilir, ancak bu \u00f6zellik bazen beklenmedik sonu\u00e7lara yol a\u00e7abilir, bu nedenle d\u00f6n\u00fc\u015f\u00fcm i\u015flemleri dikkatli bir \u015fekilde yap\u0131lmal\u0131d\u0131r.<\/p>\n\n\n\n
if,else if,else<\/strong><\/h4>\n\n\n\n`if`, `else if` ve `else` ifadeleri, ko\u015fullu (\u015fartl\u0131) durumlar\u0131 y\u00f6netmek i\u00e7in JavaScript\u2019te kullan\u0131lan yap\u0131lar\u0131 ifade eder. Bu yap\u0131lar, belirli ko\u015fullara ba\u011fl\u0131 olarak farkl\u0131 kod bloklar\u0131n\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. \u0130\u015fte bu yap\u0131lar\u0131 k\u0131saca a\u00e7\u0131klamak i\u00e7in kullan\u0131labilecek temel bilgiler:<\/p>\n\n\n\n
1. **if:** Belirli bir ko\u015fulun do\u011fru oldu\u011funda belirtilen kod blo\u011funu \u00e7al\u0131\u015ft\u0131r\u0131r. Yani, e\u011fer ko\u015ful do\u011fru ise, ifadeler i\u00e7eren kod blo\u011fu \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n
\nif (ko\u015ful) {\n \/\/ Ko\u015ful do\u011fruysa buras\u0131 \u00e7al\u0131\u015f\u0131r.\n}\n<\/pre><\/div>\n\n\n2. **else if:** \u0130lk `if` ifadesinin ko\u015fulu yanl\u0131\u015fsa, bir sonraki `else if` ifadesinin ko\u015fulunu kontrol eder. Birden fazla alternatif ko\u015fulu de\u011ferlendirmenizi sa\u011flar.<\/p>\n\n\n
\nif (ko\u015ful1) {\n \/\/ Ko\u015ful1 do\u011fruysa buras\u0131 \u00e7al\u0131\u015f\u0131r.\n} else if (ko\u015ful2) {\n \/\/ Ko\u015ful1 yanl\u0131\u015f, ama ko\u015ful2 do\u011fruysa buras\u0131 \u00e7al\u0131\u015f\u0131r.\n}\n<\/pre><\/div>\n\n\n3. **else:** \u00d6nceki `if` veya `else if` ifadelerinin ko\u015fullar\u0131 yanl\u0131\u015fsa, `else` ifadesinin i\u00e7eri\u011fi \u00e7al\u0131\u015f\u0131r. Yani, ba\u015fka hi\u00e7bir ko\u015ful sa\u011flanmad\u0131\u011f\u0131nda bu blok \u00e7al\u0131\u015f\u0131r.<\/p>\n\n\n
\nif (ko\u015ful1) {\n \/\/ Ko\u015ful1 do\u011fruysa buras\u0131 \u00e7al\u0131\u015f\u0131r.\n} else if (ko\u015ful2) {\n \/\/ Ko\u015ful1 yanl\u0131\u015f, ama ko\u015ful2 do\u011fruysa buras\u0131 \u00e7al\u0131\u015f\u0131r.\n} else {\n \/\/ Hi\u00e7bir ko\u015ful sa\u011flanm\u0131yorsa buras\u0131 \u00e7al\u0131\u015f\u0131r.\n}\n<\/pre><\/div>\n\n\nBu yap\u0131lar\u0131 kullanarak program\u0131n\u0131zda belirli ko\u015fullara g\u00f6re farkl\u0131 i\u015flemler ger\u00e7ekle\u015ftirebilirsiniz. \u00d6rne\u011fin, belirli bir say\u0131n\u0131n pozitif, negatif veya s\u0131f\u0131r oldu\u011funu kontrol etmek veya farkl\u0131 kullan\u0131c\u0131 t\u00fcrlerine g\u00f6re \u00f6zelle\u015ftirilmi\u015f mesajlar g\u00f6stermek gibi durumlar\u0131 y\u00f6netebilirsiniz.<\/p>\n\n\n\n
document.getElementById(),document.querySelector(),<\/h4>\n\n\n\ndocument.querySelectorAll()<\/h4>\n\n\n\n
Bu \u00fc\u00e7 kod, HTML belgesindeki belirli elemanlar\u0131 se\u00e7mek ve i\u015flemek i\u00e7in kullan\u0131lan JavaScript y\u00f6ntemleridir:<\/p>\n\n\n\n
1. `document.getElementById()`: Belirli bir HTML eleman\u0131n\u0131 ID\u2019sine g\u00f6re se\u00e7er.<\/p>\n\n\n
\nvar eleman = document.getElementById("idAdi");\n<\/pre><\/div>\n\n\n2. `document.querySelector()`: CSS se\u00e7icileri kullanarak belirli bir HTML eleman\u0131n\u0131 se\u00e7er.<\/p>\n\n\n
\nvar eleman = document.querySelector(".sinifAdi");\n<\/pre><\/div>\n\n\n3. `document.querySelectorAll()`: CSS se\u00e7icileri kullanarak belirli t\u00fcm HTML elemanlar\u0131n\u0131 se\u00e7er.<\/p>\n\n\n
\nvar elemanlar = document.querySelectorAll("etiketAdi");\n<\/pre><\/div>\n\n\nBu y\u00f6ntemler, JavaScript ile HTML belgesindeki elemanlar\u0131 bulmak ve \u00fczerinde i\u015flem yapmak i\u00e7in yayg\u0131n olarak kullan\u0131l\u0131r.<\/p>\n\n\n\n
onclick,onkeypress,onchange<\/strong><\/h4>\n\n\n\nBu \u00fc\u00e7 kod, JavaScript\u2019te belirli olaylar\u0131 (event) yakalamak ve bu olaylara tepki olarak \u00e7al\u0131\u015facak i\u015flevleri (fonksiyonlar\u0131) tan\u0131mlamak i\u00e7in kullan\u0131lan y\u00f6ntemlerdir:<\/p>\n\n\n\n
1. `.onclick`:
Bu, bir HTML eleman\u0131na t\u0131klama olay\u0131n\u0131 yakalar. Belirli bir elemana t\u0131kland\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131lacak i\u015flevi tan\u0131mlar.<\/p>\n\n\n
\neleman.onclick = function() {\n \/\/ T\u0131klama olay\u0131na tepki olarak \u00e7al\u0131\u015fan kod\n};\n<\/pre><\/div>\n\n\n2. `.onkeypress`:
Bu, bir klavye tu\u015funa basma olay\u0131n\u0131 yakalar. Bir tu\u015fa bas\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015ft\u0131r\u0131lacak i\u015flevi tan\u0131mlar.<\/p>\n\n\n
\ndocument.onkeypress = function(event) {\n \/\/ Bir tu\u015fa basma olay\u0131na tepki olarak \u00e7al\u0131\u015fan kod\n};\n<\/pre><\/div>\n\n\n3. `.onchange`:
Bu, bir HTML eleman\u0131n\u0131n de\u011feri de\u011fi\u015fti\u011finde yakalanan bir olayd\u0131r. De\u011fer de\u011fi\u015ftik\u00e7e \u00e7al\u0131\u015ft\u0131r\u0131lacak i\u015flevi tan\u0131mlar.<\/p>\n\n\n
\ninputElemani.onchange = function() {\n \/\/ De\u011fer de\u011fi\u015fti\u011finde \u00e7al\u0131\u015fan kod\n};\n<\/pre><\/div>\n\n\nBu y\u00f6ntemler, kullan\u0131c\u0131 etkile\u015fimi ve de\u011fi\u015fikliklerle ilgili i\u015flemler yapmak i\u00e7in olduk\u00e7a yayg\u0131n olarak kullan\u0131l\u0131r. \u00d6rne\u011fin, bir d\u00fc\u011fmeye t\u0131kland\u0131\u011f\u0131nda bir formu g\u00f6ndermek, bir klavye tu\u015funa bas\u0131ld\u0131\u011f\u0131nda belirli bir tepki vermek veya bir giri\u015f alan\u0131n\u0131n de\u011feri de\u011fi\u015fti\u011finde i\u015flem yapmak gibi senaryolarda kullan\u0131labilirler.<\/p>\n\n\n\n
for ve forEach<\/strong><\/h4>\n\n\n\nTabii, i\u015fte k\u0131sa a\u00e7\u0131klamalar:<\/p>\n\n\n\n
1. **for D\u00f6ng\u00fcs\u00fc:** Belirli bir aral\u0131kta veya ko\u015ful sa\u011fland\u0131\u011f\u0131nda tekrarlanan bir d\u00f6ng\u00fcd\u00fcr.<\/p>\n\n\n
\nfor (ba\u015flang\u0131\u00e7; ko\u015ful; art\u0131\u015f) {\n \/\/ D\u00f6ng\u00fc i\u00e7eri\u011fi\n}\n<\/pre><\/div>\n\n\n2. **forEach D\u00f6ng\u00fcs\u00fc:** Bir dizideki her bir \u00f6\u011fe i\u00e7in bir i\u015flemi tekrarlamak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n
\ndizi.forEach(function(\u00f6\u011fe) {\n \/\/ Her bir \u00f6\u011fe i\u00e7in i\u015flem yap\n});\n<\/pre><\/div>\n\n\n`for` d\u00f6ng\u00fcs\u00fc daha esnek ve belirli durumlar i\u00e7in uygundurken, `forEach` dizilerde her \u00f6\u011fe i\u00e7in kullan\u0131m\u0131 daha kolay ve a\u00e7\u0131klay\u0131c\u0131 hale getirir.<\/p>\n\n\n\n
function<\/strong><\/h4>\n\n\n\nJavaScript\u2019te `function`, belirli bir i\u015flemi veya hesaplamay\u0131 ger\u00e7ekle\u015ftiren ve adland\u0131r\u0131lm\u0131\u015f bir kod blo\u011funu temsil eden bir yap\u0131d\u0131r.<\/p>\n\n\n
\nfunction fonksiyonAdi(parametre1, parametre2) {\n \/\/ \u0130\u015flem veya hesaplama\n return sonuc;\n}\n<\/pre><\/div>\n\n\n– `fonksiyonAdi`: Fonksiyonun ad\u0131.<\/p>\n\n\n\n
– `parametre1`, `parametre2`: \u0130\u015flemin veya hesaplaman\u0131n kullanaca\u011f\u0131 girdiler (iste\u011fe ba\u011fl\u0131).<\/p>\n\n\n\n
– `return`: \u0130\u015flem sonucunu d\u00f6nd\u00fcrmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n\n
\u00d6rnek:<\/p>\n\n\n
\nfunction topla(a, b) {\nreturn a + b;\n}\n<\/pre><\/div>\n\n\ntry,catch<\/strong><\/h4>\n\n\n\n`try` ve `catch`, JavaScript\u2019te hata yakalama mekanizmas\u0131n\u0131 sa\u011flayan yap\u0131lar\u0131 ifade eder.<\/p>\n\n\n\n
– `try`: Hata olas\u0131l\u0131\u011f\u0131 bulunan bir kod blo\u011funu tan\u0131mlar.
– `catch`: `try` blo\u011funda bir hata meydana geldi\u011finde \u00e7al\u0131\u015facak kod blo\u011funu tan\u0131mlar.<\/p>\n\n\n\n
Bu yap\u0131, hatalar\u0131n program\u0131n \u00e7al\u0131\u015fmas\u0131n\u0131 kesintiye u\u011fratmas\u0131n\u0131 \u00f6nler ve daha iyi hata y\u00f6netimi sa\u011flar.<\/p>\n\n\n\n
\u00d6rnek:<\/p>\n\n\n
\ntry {\n \/\/ Hata olas\u0131l\u0131\u011f\u0131 bulunan kod blo\u011fu\n throw new Error("Bir hata olu\u015ftu!");\n} catch (hata) {\n \/\/ Hata yakalama ve i\u015fleme\n console.error(hata.message);\n}\n<\/pre><\/div>\n\n\nBu \u00f6rnekte, `try` blo\u011funda hata olu\u015fturan bir kod blo\u011fu bulunuyor. `catch` blo\u011fu, hatalar\u0131 yakalar ve hata mesaj\u0131n\u0131 konsola yazd\u0131r\u0131r.<\/p>\n\n\n\n
.innerHTML .textContent<\/strong><\/h4>\n\n\n\nBu iki \u00f6zellik, JavaScript\u2019te HTML elemanlar\u0131n\u0131n i\u00e7eri\u011fi ile \u00e7al\u0131\u015f\u0131rken kullan\u0131lan y\u00f6ntemlerdir:<\/p>\n\n\n\n
1. `.innerHTML`:
Bu, bir HTML eleman\u0131n\u0131n i\u00e7eri\u011fini de\u011fi\u015ftirmek veya i\u00e7eri\u011fine HTML kodu eklemek i\u00e7in kullan\u0131l\u0131r. Bu \u00f6zellik, metin ve HTML i\u00e7eri\u011fi eklemek i\u00e7in kullan\u0131labilir. Ancak, g\u00fcvenlik riskleri ta\u015f\u0131d\u0131\u011f\u0131ndan, g\u00fcvenilir kaynaklardan gelen i\u00e7erik d\u0131\u015f\u0131nda `.innerHTML` kullan\u0131rken dikkatli olunmal\u0131d\u0131r.<\/p>\n\n\n
\neleman.innerHTML = "<p>Yeni i\u00e7erik<\/p>"; \/\/ HTML i\u00e7eri\u011fini de\u011fi\u015ftirir veya ekler.\n<\/pre><\/div>\n\n\n2. `.textContent`:
Bu, bir HTML eleman\u0131n\u0131n metin i\u00e7eri\u011fini de\u011fi\u015ftirmek veya almak i\u00e7in kullan\u0131l\u0131r. HTML kodunu yorumlamadan sadece metni al\u0131r veya atar.<\/p>\n\n\n
\neleman.textContent = "Yeni metin"; \/\/ Metin i\u00e7eri\u011fini de\u011fi\u015ftirir.\nvar metin = eleman.textContent; \/\/ Metin i\u00e7eri\u011fini al\u0131r.\n<\/pre><\/div>\n\n\n`.textContent` \u00f6zelli\u011fi, genellikle metin i\u00e7eri\u011fi de\u011fi\u015ftirilirken veya metin i\u00e7eri\u011finin HTML olarak de\u011fil, d\u00fcz metin olarak kullan\u0131lmas\u0131 gereken durumlarda tercih edilir.<\/p>\n\n\n\n
Her iki \u00f6zellik de HTML elemanlar\u0131n\u0131n i\u00e7eri\u011fiyle etkile\u015fimde kullan\u0131l\u0131rken ama\u00e7lar\u0131 ve kullan\u0131m durumlar\u0131 a\u00e7\u0131s\u0131ndan farkl\u0131l\u0131k g\u00f6sterir.<\/p>\n\n\n\n
element.classList.add(\u201cclassName\u201d), element.classList.remove(\u201cclassName\u201d), element.classList.contains(className)<\/h4>\n\n\n\n
Bu \u00fc\u00e7 kod, HTML elemanlar\u0131n\u0131n s\u0131n\u0131f (class) listesini d\u00fczenlemek i\u00e7in kullan\u0131lan y\u00f6ntemlerdir:<\/p>\n\n\n\n
1. `element.classList.add(\u201cclassName\u201d)`:
Bu, bir HTML eleman\u0131n\u0131n s\u0131n\u0131f listesine belirli bir s\u0131n\u0131f ad\u0131n\u0131 ekler. Bu, eleman\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 de\u011fi\u015ftirmek i\u00e7in CSS s\u0131n\u0131flar\u0131n\u0131 dinamik olarak y\u00f6netmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n
\neleman.classList.add("aktif"); \/\/ Elemana "aktif" s\u0131n\u0131f\u0131n\u0131 ekler.\n<\/pre><\/div>\n\n\n2. `element.classList.remove(\u201cclassName\u201d)`:
Bu, bir HTML eleman\u0131n\u0131n s\u0131n\u0131f listesinden belirli bir s\u0131n\u0131f ad\u0131n\u0131 kald\u0131r\u0131r.<\/p>\n\n\n
\neleman.classList.remove("pasif"); \/\/ Elemandan "pasif" s\u0131n\u0131f\u0131n\u0131 kald\u0131r\u0131r.\n<\/pre><\/div>\n\n\n3. `element.classList.contains(\u201cclassName\u201d)`:
Bu, bir HTML eleman\u0131n\u0131n s\u0131n\u0131f listesinin belirli bir s\u0131n\u0131f\u0131 i\u00e7erip i\u00e7ermedi\u011fini kontrol eder. Bir s\u0131n\u0131f\u0131n eleman\u0131n s\u0131n\u0131f listesinde olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\n\n
\nvar durum = eleman.classList.contains("aktif"); \/\/ "aktif" s\u0131n\u0131f\u0131n\u0131 i\u00e7erip i\u00e7ermedi\u011fini kontrol eder.\n<\/pre><\/div>\n\n\nBu y\u00f6ntemler, dinamik olarak HTML elemanlar\u0131n\u0131n s\u0131n\u0131flar\u0131n\u0131 de\u011fi\u015ftirirken kullan\u0131l\u0131r. \u00d6zellikle CSS ile g\u00f6r\u00fcn\u00fcm\u00fc kontrol etmek ve JavaScript ile etkile\u015fimi y\u00f6netmek amac\u0131yla s\u0131n\u0131flar\u0131 eklemek veya kald\u0131rmak i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\n\n\n
window.onload<\/strong><\/h4>\n\n\n\n`window.onload` bir HTML belgesi tamamen y\u00fcklendikten sonra \u00e7al\u0131\u015ft\u0131r\u0131lacak bir i\u015flevi tan\u0131mlar.<\/p>\n\n\n
\nwindow.onload = function() {\n \/\/ Y\u00fckleme tamamland\u0131\u011f\u0131nda \u00e7al\u0131\u015facak kod\n};\n<\/pre><\/div>\n\n\nBu yap\u0131, sayfan\u0131n tamam\u0131n\u0131n y\u00fcklenmesini bekleyerek i\u00e7indeki kodun \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Sayfan\u0131n t\u00fcm \u00f6\u011feleri ve kaynaklar\u0131 y\u00fcklendikten sonra, belirtilen i\u015flevi \u00e7al\u0131\u015ft\u0131r\u0131r. Bu, sayfa i\u00e7eri\u011fine veya etkile\u015fimli \u00f6\u011felere eri\u015fmeden \u00f6nce bekleme gerekti\u011fi durumlarda kullan\u0131l\u0131r.<\/p>\n\n\n\n
.replace() ,.replaceAll(), .length ,.slice(1,13)<\/h4>\n\n\n\nvar ilkHarf = metin[0]; var sonHarf = metin[metin.length \u2014 1];\n\n\n\n
– `.replace()`: Bir metin i\u00e7inde belirli bir alt dizesini arayarak bulur ve istenen yeni bir alt dize ile de\u011fi\u015ftirir.
– `.replaceAll()`: Metin i\u00e7inde belirli bir alt dizesini t\u00fcm \u00f6rneklerini bulur ve yeni bir alt dize ile de\u011fi\u015ftirir (modern taray\u0131c\u0131lar i\u00e7in).<\/p>\n\n\n\n
– `.length`: Bir metin dizisinin karakter say\u0131s\u0131n\u0131 d\u00f6nd\u00fcr\u00fcr.<\/p>\n\n\n\n
– `.slice(1, 13)`: Metin dizisinin belirli bir aral\u0131\u011f\u0131n\u0131 keserek al\u0131r.<\/p>\n\n\n\n
– `metin[0]`: Metin dizisinin ilk karakterini al\u0131r.<\/p>\n\n\n\n
– `metin[metin.length \u2014 1]`: Metin dizisinin son karakterini al\u0131r.<\/p>\n\n\n\n
\u00d6zetle, bu kod par\u00e7alar\u0131 metin i\u015flemleri i\u00e7in kullan\u0131lan \u00e7e\u015fitli y\u00f6ntemleri ve \u00f6zellikleri temsil eder. Metin i\u00e7eri\u011fini de\u011fi\u015ftirmek, uzunlu\u011funu hesaplamak, kesmek veya belirli karakterlere eri\u015fmek gibi i\u015flemlerde kullan\u0131l\u0131rlar.<\/p>\n\n\n\n
split() ve join()<\/h4>\n\n\n\n
1. `split()`: Bu metod, bir metni belirli bir ayra\u00e7 karakterine g\u00f6re b\u00f6ler ve bu b\u00f6lmeleri bir dizi olarak d\u00f6nd\u00fcr\u00fcr.<\/p>\n\n\n\n
\u00d6rnek:<\/p>\n\n\n
\nvar metin = "Merhaba! Nas\u0131ls\u0131n\u0131z? \u0130yi misiniz?";\nvar kelimeler = metin.split(" "); \/\/ Metni bo\u015fluklara g\u00f6re b\u00f6ler.\nconsole.log(kelimeler); \/\/ ["Merhaba!", "Nas\u0131ls\u0131n\u0131z?", "\u0130yi", "misiniz?"]\n<\/pre><\/div>\n\n\n2. `join()`: Bu metod, bir diziyi belirli bir ayra\u00e7 karakteri ile birle\u015ftirerek tek bir metin haline getirir.<\/p>\n\n\n\n
\u00d6rnek:<\/p>\n\n\n
\nvar kelimeler = ["Merhaba!", "Nas\u0131ls\u0131n\u0131z?", "\u0130yi", "misiniz?"];\nvar metin = kelimeler.join(" "); \/\/ Diziyi bo\u015flukla birle\u015ftirir.\nconsole.log(metin); \/\/ "Merhaba! Nas\u0131ls\u0131n\u0131z? \u0130yi misiniz?"\n<\/pre><\/div>\n\n\n`split()` ve `join()` metodlar\u0131, metinleri diziye \u00e7evirme ve dizileri metin haline getirme i\u015flemlerinde s\u0131kl\u0131kla kullan\u0131l\u0131r.<\/p>\n\n\n\n
Number,toString(),Math.random(),Math.floor(),Math.ceil()<\/h4>\n\n\n\n\nNumber<\/code>: De\u011feri say\u0131ya d\u00f6n\u00fc\u015ft\u00fcr\u00fcr.<\/li>\n\n\n\ntoString()<\/code>: De\u011feri metin olarak temsil eder.<\/li>\n\n\n\nMath.random()<\/code>: 0 ile 1 aras\u0131nda rasgele bir say\u0131 \u00fcretir.<\/li>\n\n\n\nMath.floor()<\/code>: Say\u0131y\u0131 a\u015fa\u011f\u0131 yuvarlar.<\/li>\n\n\n\nMath.ceil()<\/code>: Say\u0131y\u0131 yukar\u0131 yuvarlar.<\/li>\n<\/ul>\n\n\n\n\/\/ Number\nvar metin = "42";\nvar sayi = Number(metin);\n\n\/\/ toString()\nvar sayi = 42;\nvar metin = sayi.toString();\n\n\/\/ Math.random()\nvar rasgeleSayi = Math.random();\n\n\/\/ Math.floor()\nvar sayi = 3.9;\nvar yuvarlanmisSayi = Math.floor(sayi);\n\n\/\/ Math.ceil()\nvar sayi = 3.1;\nvar yuvarlanmisSayi = Math.ceil(sayi);\n<\/pre><\/div>\n\n\nsetTimeout(), setInterval()<\/strong><\/h4>\n\n\n\nBu iki kod par\u00e7as\u0131, belirli bir zaman aral\u0131\u011f\u0131nda veya gecikme s\u00fcresiyle tekrarlanan i\u015flevleri (fonksiyonlar\u0131) planlamak i\u00e7in kullan\u0131lan y\u00f6ntemlerdir:<\/p>\n\n\n\n
1. `setTimeout(function() {}, 1000)`:
Bu, belirli bir i\u015flemin belirtilen bir gecikme s\u00fcresi sonunda bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n\n\n
\nsetTimeout(function() {\n \/\/ Belirli bir gecikme sonras\u0131nda bir kere \u00e7al\u0131\u015facak kod\n}, 1000); \/\/ 1000 milisaniye (1 saniye) sonra \u00e7al\u0131\u015f\u0131r.\n<\/pre><\/div>\n\n\n2. `setInterval(function() {}, 1000)`:
Bu, belirli bir i\u015flemin belirtilen zaman aral\u0131klar\u0131yla tekrarl\u0131 olarak \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar.<\/p>\n\n\n
\nsetInterval(function() {\n \/\/ Belirli bir zaman aral\u0131\u011f\u0131nda tekrarl\u0131 olarak \u00e7al\u0131\u015facak kod\n}, 1000); \/\/ Her 1000 milisaniyede (1 saniye) tekrar eder.\n<\/pre><\/div>\n\n\nBu y\u00f6ntemler, zaman tabanl\u0131 i\u015flemleri planlamak veya d\u00fczenli aral\u0131klarla tekrarlanan i\u015flevleri ger\u00e7ekle\u015ftirmek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir animasyon olu\u015fturmak veya belirli periyotlarla veri g\u00fcncellemesi yapmak gibi senaryolarda kullan\u0131labilirler.<\/p>\n\n\n\n
addEventListener<\/strong><\/h4>\n\n\n\n`addEventListener`, belirli bir HTML eleman\u0131na belirli bir olay (event) dinleyici eklemek i\u00e7in kullan\u0131lan y\u00f6ntemdir.<\/p>\n\n\n
\neleman.addEventListener("olayAdi", fonksiyon);\n<\/pre><\/div>\n\n\n– `eleman`: Olay dinleyicisi eklemek istedi\u011finiz HTML eleman\u0131.
– `\u201dolayAdi\u201d`: Beklenen olay\u0131n ad\u0131 (\u00f6rne\u011fin, \u201cclick\u201d veya \u201cmouseover\u201d).
– `fonksiyon`: Olay ger\u00e7ekle\u015fti\u011finde \u00e7a\u011fr\u0131lacak i\u015flev.<\/p>\n\n\n\n
\u00d6rnek:<\/p>\n\n\n
\ndocument.getElementById("dugme").addEventListener("click", function() {\n \/\/ D\u00fc\u011fmeye t\u0131klan\u0131ld\u0131\u011f\u0131nda \u00e7al\u0131\u015facak kod\n});\n<\/pre><\/div>\n\n\nBu yap\u0131, belirli bir olay\u0131n ger\u00e7ekle\u015fti\u011finde \u00e7al\u0131\u015facak i\u015flevi tan\u0131mlaman\u0131z\u0131 sa\u011flar. \u00d6rne\u011fin, bir d\u00fc\u011fmeye t\u0131klama, bir metin kutusuna yazma veya fareyi bir \u00f6\u011fenin \u00fczerine getirme gibi olaylar\u0131 dinlemek ve tepki g\u00f6stermek i\u00e7in kullan\u0131l\u0131r.<\/p>\n","protected":false},"excerpt":{"rendered":"