Maximilian JavaScript - The Complete Guide

2025

What Does Dynamicly Weakly Typed mean?

Şimdi bu ne anlama geliyor?

Birincisi, öğrendiğiniz gibi dinamik yorumlanmış kısmı önceden derlenmediği anlamına gelir, C++
gibi diğer diller geliştirme sırasında veya sonrasında derlenir, C++ geliştirme sırasında veya
sonrasında derlenir, bu nedenle bunları son kullanıcılarla paylaşmadan önce derlenir. Javascript
anında derlenir ve bu, kodun çalışma zamanında değerlendirildiği ve yürütüldüğü anlamına
gelir, ayrıca kodun çalışma zamanında değişebileceği anlamına gelir.
Elbette yazdığınız kod sihirli bir şekilde değişmeyecek, elbette yazdığınız kod çalıştırılacak, ancak
bu kodda, diğer programlama dillerinde yapmanıza izin verilmeyen bazı şeyleri yapabilirsiniz.
Örneğin bir değişkenle çalışıyorsanız, şimdilik bir değişkenin bir veri kabı olduğunu aklınızda
tutabilirsiniz, diyelim ki orada bazı metinler saklayabilirsiniz, betiğinizde örneğin kullanıcıya
çıktısını vermek için ihtiyacınız olan metni saklayabilirsiniz değişkende. Bir metin saklayarak
başlayabilir ve daha sonra aniden aynı değişkende bunun yerine bir Javascript'te veri türünü
dinamik olarak değiştirmenize izin verilir. Aynı değişken içerisinde bir sayı saklayabilirsiniz.
Javascript'teki dinamik şeyin çalışma zamanında ayrıştırıldığı, yorumlandığı ve derlendiği
anlamına geldiği ve bu nedenle belirli şeyleri yapabildiği, örneğin diğer programlama dillerinin
yapmasına izin verilmeyen bir değişkenin verilerini değiştirebildiğidir.
Örneğin, diğer programlama dillerinin yapmasına izin verilmeyen bir değişkenin verilerini
değiştirmek.
Şimdi, veri türünü dinamik olarak veya beklenmedik bir şekilde değiştirmek mutlaka iyi değildir,
ancak bunu yapabilirsiniz, ancak ana çıkarım anında derleme ve yorumlamadır. Ancak asıl
önemli olan, anlık derleme ve yorumlamadır.
Peki buradaki zayıf yazılmış kısım ne olacak?
Bu, Javascript'te verilerle çalıştığımızda, örneğin metin verileri veya sayılar, Javascript'e şimdi bir
metinle çalışacağınızı veya şimdi bir sayıyla çalışacağınızı söylemek zorunda olmadığınız
anlamına gelir, bunun yerine veri türleri varsayılır, otomatik olarak çıkarılır, deyim yerindeyse,
bu aynı zamanda veri türlerinin bir satırdan diğerine değişebileceği bu dinamik doğayla da
ilgilidir. Veri türlerinin de bir satırdan diğerine değişebildiği doğa.
Bu size garip gelebilir ancak diğer programlama dillerinde bir değişkenin tutacağı veri
türünü önceden tanımlamanız gerekir. Javascript'te durum böyle değildir, Javascript'e bu
değişkenin, bu veri kabının bir sayı tutacağını söylemek zorunda değilsiniz, bunun yerine orada
bir veri depolarsınız ve bu bir sayı olursa, öyledir. Diğer programlama dillerinde, dile bir sayı
olacağınızı söylemeniz gerekir, bu yüzden öyle olur. Diğer programlama dillerinde, dile orada bir
sayı saklayacağınızı söylemeniz gerekir ve başka bir şey saklarsanız hata alırsınız. Javascript'te
durum böyle değildir, dinamik olduğu için orada affedicidir ve ayrıca önceden güçlü tip
tanımlarını önemsemez, bunun yerine sadece verileri orada depolar ve tutan her veri türüyle
gidersiniz. Yani veri türleri, sadece verileri orada depolamak ve tutan her veri türüyle gitmek
yerine değildir. Dolayısıyla veri türleri sabit değildir, değişebilir.

JS runs on a Host environment

Bir önceki tanım slaydında gördüğümüz son şey Javascript'in bir ana bilgisayar ortamında çalıştığıdır,

Yani bir Javascript motoru farklı ortamların bir parçası olabilir veya bu ortamlarda çalıştırılabilir. En iyi
bilinen ortam tarayıcıdır, modern tarayıcılarda yerleşik Javascript motorları vardır ve bu nedenle
Javascript kodunu çalıştırabilirler, ancak Javascript'i başka ortamlarda da çalıştırabilirsiniz, örneğin
sunucu tarafında, yani arada bir tarayıcı olmadan doğrudan bir bilgisayarda, yani bir tarayıcının içinde
değil, sadece makinenizde bunun gibi bir kod çalıştırabilirsiniz. Şimdi Javascript tarayıcıda çalışmak, web
sitelerini daha dinamik hale getirmek, yeni bir sayfa yüklemeden bir web sitesindeki şeyleri
değiştirebilmek için icat edildi diyebilirsiniz. Çünkü Javascript yüklenen HTML koduyla, CSS ile birlikte
yakından çalışabilir, Ayrıca arka planda HTTP istekleri göndermek için Javascript'i kullanabilirsiniz,
böylece bazı sahne arkası istekleri göndermek ve sayfayı yeniden yüklemeden veri almak ve çok daha
fazlasını yapmak için. Javascript'in tarayıcı ortamında çalışırken yapamayacağı bazı şeyler de vardır,
örneğin güvenlik nedeniyle yerel dosya sisteminize erişemez çünkü aksi takdirde ziyaret ettiğiniz her web
sayfası dosya sisteminizi okuyabilir, belki bilgisayarınızdaki dosyaları silebilir ve bu da elbette korkunç
olurdu ve genel olarak bir sanal alanda çalışır. İşletim sisteminizle etkileşime giremez vb. diyebilirsiniz,
tarayıcı size bu ortamda yapabileceğiniz belirli şeyler verir ve diğer şeylere izin vermez. Dediğim gibi,
tarayıcı sadece bir ortamdır, Javascript'in icat edildiği ortamdır, ancak şu anda kısıtlı olduğumuz tek
ortam değildir, bunun yerine Google'ın geliştirdiği Javascript motoru, v8 motorun adıdır, bazı insanlar
tarafından Javascript'i her yerde çalıştırmak için çıkarılmıştır. Çünkü fikir, tarayıcıda motorumuz varsa,
neden onu tarayıcıdan çıkarmıyoruz ve daha sonra Javascript'i doğrudan makinenizde başka herhangi bir
yerde çalıştırmak için kullanabileceğiniz bağımsız bir araç olarak kullanılabilir hale getirmiyoruz ve bu
araç sonunda [Link] olarak adlandırıldı. Node. js herhangi bir makinede çalıştırılabilir ve bu nedenle
genellikle web arka uçları oluşturmak, web sunucuları oluşturmak için de kullanılır, sunucu tarafı
Javascript de bunun için bir açıklama olarak sık sık duyduğunuz bir şeydir. Şimdi PHP gibi sunucu tarafı
dilleri veya Java ve diğer dilleri de biliyor olabilirsiniz, Node ile Javascript bir web sayfasının arka ucunda,
yani kullanıcılarınızın tarayıcısındaki istemcide değil sunucuda çalıştırmak için de kullanılabilir. Şimdi
Node. js'nin de yapabileceği ve yapamayacağı belirli şeyler vardır, çünkü doğrudan bir makinede çalışıtğı
için, Node ile yerel dosya sistemine erişebilir, böylece dosya yazabilir ve benzeri işlemleri yapabilirsiniz
çünkü tarayıcı tarafı Javascript'in aksine Node. js kodunun sizin tarafınızdan aktif olarak çalıştırılması
gerekir, bir web sayfasını ziyaret etmeniz ve ardından bunun gerçekleşmeye başlaması gibi değildir,
bunun yerine yalnızca çalıştırıldığı makinedeki dosya sistemine erişebilir, örneğin çalıştığı sunucu, sizin
makineniz değil ve ayrıca işletim sistemi ile etkileşime girebilir vb.

Ancak diğer yandan, yüklenen web sayfasına doğrudan erişimi olmadığından, HTML veya CSS'yi tarayıcı
tarafında olduğu gibi manipüle edemez. Javascript'in yapabildikleri, yani temelde burada ters erişim
yeteneklerimiz bile var ve bunlar Javascript'in çalışabildiği farklı ortamlar.
Şimdi değişkenler ve sabitler nedir? Değişken, bir veri kabı ya da veri deposu da diyebilirsiniz.
Yazacağınız çoğu programda, kullanıcı tarafından girilen ve daha sonra kullanıcının oturumunu açmak
için kullandığınız bir kullanıcı adı veya hesap makinemizin bir örneği olarak, elimizdeki son, en son
sonucumuz ve kullanıcının az önce girdiği ve eklemek istediğimiz sayı gibi bazı verilerle çalışacaksınız.

Bu, saklamak istediğimiz veriler olacaktır çünkü programımızın doğru çalışması için bu verilere ihtiyacı
vardır, örneğin hesap makinesinde eski sonuca ve kullanıcının yeni girdiği sayıya ihtiyacımız vardır, bu
nedenle yeni sonucu elde etmek için bu iki veriye ihtiyacımız vardır. Dolayısıyla, yeni üçüncü
değişkenimiz olan mevcut sonucu elde etmek için bu iki değişkene ihtiyacımız var.

Yani değişken, bazı verileri tutan bir veri kabıdır ve Javascript'te, let anahtar sözcüğünü kullanarak bir
değişken oluştururuz, ardından daha sonra inceleyeceğim bazı adlandırma kurallarını göz önünde
bulundurarak seçtiğiniz bir ad, ardından bir eşittir işareti ve ardından değişkende saklamak istediğiniz
değeri kullanırız. Şimdi oluşturulan bir değişkenle, onu her zaman yeniden atayabilir ve orada yeni bir
değer saklayabilirsiniz, bu yüzden burada mevcut kullanıcı adı değişkenini kullanıyorum ve ona yeni bir
değer atıyorum.

Şimdi sadece Javascript'in anladığı let anahtar sözcüğüne ihtiyacım var, eğer bir değişkeni ilk kez
tanıtıyorsanı[Link] sonra ona yeni bir değer atarsanız, bu anahtar sözcüğü tekrarlamazsınız, bu nedenle
let anahtar sözcüğüne yalnızca Javascript'e hey işte programımın ihtiyaç duyacağı yepyeni bir değişken
olduğunu bildirmek için ihtiyacınız vardır, daha sonra bu değişkeni kullanırsanız, bunu let olmadan
yaparsınız. Yani bir değişken, değerin değişebileceği bir veri kabıdır, değişmek zorunda değildir ancak
genellikle değişir. Şimdi bu değişkenin özel bir formuna da sahipsiniz, sabitleriniz var, örneğin diyelim ki
uygulamanızda bir tür sabit olan toplam kullanıcı sayınız var. Şimdi bu hala bir veri kabıdır, ancak let
anahtar sözcüğü yerine, Javascript'te yerleşik olan ve Javascript'in tanıdığı ve anladığı başka bir anahtar
sözcük olan const anahtar sözcüğü ile oluşturursunuz.
Şimdi, const anahtar sözcüğü ile oluşturulan sabitlerle ilgili özel bir şey var, orada değeri
değiştiremezsiniz, bunu yapmaya çalışırsanız bir hata alırsınız. Dolayısıyla, değerler değişmemelidir.
Şimdi, gerçekten değişken değilse, gerçekten değişemiyorsa, neden bir değişkende saklanan bir değere
sahip olduğunuzu merak edebilirsiniz ve cevap bazen kodunuzda, asla değişmeyen değerlere sahip
olursunuz, ancak yine de böyle bir veri kabında saklamak istersiniz. Böylece bunları merkezi bir yerde,
diyelim ki dosyanızın başında başlatabilir ve ardından programınız boyunca kullanabilirsiniz, belki aynı
sabiti farklı yerlerde birden fazla kez kullanabilirsiniz, böylece her zaman aynı tek sabite referans
verirsiniz ve kodunuzu yazarken kodda bu değeri değiştirirseniz. On farklı yer yerine tek bir yerde
değiştirirsiniz, ancak birazdan yapacağımız bazı kodlar yazmaya başladığımızda bu daha açık hale
gelecektir.

Şimdilik, değişken oluşturmanın bu iki farklı yolunun farkında olun, let ve const. Let ile değişkenler
değiştirilebilirken const ile değiştirilemezler, genel sözdizimi anahtar kelime adıdır ve ardından hemen
bir değer depolamak istiyorsanız, değerde eşittir işareti ve ayrıca hemen küçük bir ipucu, genellikle
sabitleri olabildiğince sık kullanmak istersiniz, bu ilk başta garip gelebilir çünkü onlarla yapabilecekleriniz
kısıtlıdır, değil mi?

Onları değiştiremezsiniz ama tam da bu yüzden onları mümkün olduğunca sık kullanmak istersiniz,
niyetinizi çok açık hale getirir. Eğer programınızın ya da kodunuzun onu kullandığınız bölümünün yaşam
döngüsü boyunca hiç değişmeyen bir değere sahipseniz, o zaman bunu açıkça belirtmek istersiniz,
böylece kodunuzu okuyan başka bir geliştirici bu veri parçasının asla değişmeyeceğini hemen anlar, bu
da kodunuzu başkaları için daha kolay anlaşılır hale getirir. Şimdi bu çok yeni ve çok teorik bir bilgiydi,
kullandığımızda daha anlamlı olacak, o yüzden kullanalım.

Local-global scope
Yani değişkenler ve sabitler için sıra önemlidir, Fonksiyonlar için önemli değildir. Buradaki kodumuzda
ilginç bir şey daha var ve o da fonksiyonun içinde bir sabitimiz ve fonksiyonun dışında bir değişkenimiz ve
bir sabitimiz olması.

Şimdi neyi ne zaman kullanmalısınız ve aradaki fark nedir? Bir fark var mı? Arada bir fark vardır ve genel
olarak, bazı verileri yalnızca fonksiyonda kullanıyorsanız, örneğin fonksiyonda kullandığım bu sonucu
burada döndürüyorum, o zaman bunu fonksiyonda tanımlamak istersiniz.

Bu kod teknik olarak işe yarayacaktır çünkü burada yaptığım şey, bu sonuç değişkenini global olarak
tanımlamak, yani kodumda, daha sonra bir fonksiyonda ona yeni bir değer atıyorum çünkü
fonksiyonlarınızda ve aklınızda tutmanız gereken önemli bir şey, fonksiyon dışında tanımlanan herhangi
bir değişkene veya sabite erişebilirsiniz, böylece global olarak tanımlanan değişkenleri veya sabitleri
okuyabilirsiniz, Böylece bu result değişkeniyle etkileşime geçebiliriz ve ona yeni bir değer atıyorum ve bu
nedenle daha sonra fonksiyonu çağırdığımda, aslında geri dönüş değerini umursamıyorum, bunun
boşluğa gitmesine izin veriyorum, ancak fonksiyonun içinde result'a yeni bir değer atadığım için, bu
global değişkeni kullanabilir ve başka bir global değişkende saklayabilir veya başka bir yerde
kullanabilirim, ne yapmak sterseniz. Ancak bu çok iyi bir kod olmayacaktır çünkü global bir değişkeni
manipüle eden bir fonksiyonumuz var, bu bazen yapmak isteyeceğiniz bir şeydir ancak genellikle
fonksiyonlarınızı anlamayı ve ne yapacaklarını tahmin etmeyi zorlaştırır ve ayrıca bu değeri burada
döndürmemiz tamamen gereksizdir, bu yüzden yazabileceğimiz en iyi kod değildir.

Bunun yerine, daha önce sahip olduğumuz kurulumla devam edersek çok daha iyi olur; burada
içerdiğimiz sabitimiz var, bunu döndürdük ve bu nedenle işlev bağımsız olarak çalışıyor. Sihirli bir şekilde
global değişkenlerimizi değiştirmez, bunun yerine fonksiyonu çağırdığımızda, bu fonksiyonun hiçbir şeyi
değiştirmeyeceğini, global hiçbir şeyi değiştirmeyeceğini, bunun yerine sadece kendi dahili verileriyle
çalışacağını ve sonra bize geri döneceğini biliriz. Buna saf fonksiyon denir, bir girdi alır, bir çıktı döndürür,
aynı girdi için her zaman aynı çıktıyı döndürür ve küresel hiçbir şeyi manipüle etmez, ancak
fonksiyonların küresel değişkenlere erişebileceğini, tanımlamış olabileceğiniz diğer fonksiyonlara da
erişebileceğini belirtmek gerekir. Böylece bir fonksiyonu bir fonksiyonun içinden çağırabilirsiniz ve bu
Javascript'te yerleşiktir ve zaman zaman kullanacağımız iyi bir şeydir.

Şimdi diğer yol işe yaramayacaktır, eğer bir fonksiyonun içinde bir sabit veya değişken tanımlarsanız, o
zaman bu yerel veya blok kapsamı olarak adlandırılan bir kapsama sahiptir, yani bu bloğun içinde
kullanılabilir, blok bu küme parantezleriyle çevrelenir veya işaretlenir ve bu bloğun herhangi bir yerinde
kullanabiliriz, ancak bunun dışında kullanamayız. Dolayısıyla, işlevi tanımladıktan sonra burada result'ta
depolanan değerin çıktısını almak istediğim bir uyarı vermeye çalışırsam, bunu yeniden yüklediğimde
hiçbir şey olmadığını göreceksiniz. Gördüğünüz gibi bir hata alıyoruz ve gerçekten de geliştirici
araçlarında konsolumu tekrar açarsam, sonucun tanımlanmadığına dair bir referans hatası alıyorum.
Çünkü burada 9. satırda bir değişken kullanmaya çalışıyorum, yani buradaki bu satırda tanımlanmamış
çünkü az önce açıkladığım gibi, Global değişkenleri, sabitleri ve fonksiyonları fonksiyonların içinde
kullanabilirsiniz, ancak yerel değişkenleri, sabitleri veya fonksiyonları kullanamazsınız, bu nedenle
fonksiyonların içinde tanımlanan değişkenler, sabitler veya fonksiyonlar ve evet fonksiyonların içinde
fonksiyonlar tanımlayabilirsiniz. Bunları fonksiyonun dışından kullanabilirsiniz. Dolayısıyla, result'u
fonksiyonun dışında kullanmak işe yaramayacaktır çünkü bu fonksiyonun içinde tanımlanmış bir sabittir
ve fonksiyonu çağırdıktan sonra burada ya da burada kullansak da işe yaramayacaktır çünkü burada
sadece bir fonksiyon çağırdığımızı düşünebilirsiniz, bu yüzden bundan sonra result tanımlanmalıdır ve
şimdi kullanılabilir olmalıdır. Aslında, şimdi yeniden yüklerseniz, burada hala aynı hatayı alırsınız, şimdi 9.
satır yerine 11. satırda, çünkü bu kodu taşıdım, ancak yine de, sonuç olarak işlevin dışında mevcut değil
ve bu Javascript ile anlamanız gereken önemli bir şey. Fonksiyonlar çevrelerindeki bağlama, yani
üzerlerinde veya dışlarında tanımlanan tüm değişkenlere ve benzerlerine tam erişime sahiptir, ancak bir
fonksiyonun içinde tanımladığınız şey yalnızca orada kullanılabilir, onu dışarı çıkarmanın tek yolu onu
geri döndürmektir.

Şimdi bu noktada şunu da merak edebilirsiniz: Bir değişken global olarak tanımlandıktan sonra onu bir
fonksiyon içinde yerel olarak oluşturmaya çalışırsak ne olur?
 Yani global olarak let veya const ile bildirdik ve daha sonra fonksiyonda let veya const ile aynı şeyi
yapmak istiyoruz, yani mevcut olanın üzerine yazmak değil, yeni bir tane oluşturmak istiyoruz, bu
mümkün mü?

Cevabım evet, bu gölgeleme adı verilen bir süreç .

Bu koda sahipseniz ne olur?

1. let userName = 'Max';

2. function greetUser(name) {
3. let userName = name;
4. alert(userName);
5. }
6. userName = 'Manu';
7. greetUser('Max');

Bu aslında 'Max' ('Manu' DEĞİL) yazan bir uyarı gösterecektir.

userName'i birden fazla kez kullandığımız ve bildirdiğimiz için bir hata

oluşmasını bekleyebilirdiniz - ve öğrendiğiniz gibi buna izin verilmez.

Gerçekten de aynı seviyede/aynı kapsamda buna izin verilmez.

Yani bu başarısız olacaktır:.

1. let userName = 'Max';

2. let userName = 'Manu';

Peki neden ilk kod parçacığında çalışıyor?

Çünkü önce global bir userName değişkeni oluşturuyoruz

let userName = 'Max';

Ancak daha sonra bunu global düzeyde yeniden beyan etmeyiz (buna izin
verilmez).
 Sadece fonksiyonun içinde başka bir değişken bildiririz. Ancak
fonksiyonlardaki değişkenler kendi kapsamlarına sahip olduklarından,
JavaScript “gölgeleme” adı verilen bir şey yapar.
Farklı bir kapsamda yeni bir değişken yaratır - bu arada bu değişkenler global
değişkenin üzerine yazmaz ya da onu kaldırmaz - ikisi birlikte var olur.
greetUser fonksiyonu içinde userName atıfta bulunurken artık her zaman
yerel, gölgelenmiş değişkene atıfta bulunuyoruz. Yalnızca böyle bir yerel
değişken yoksa, JavaScript genel değişkene geri döner.

Dolaylı” ve ‘Doğrudan’ Fonksiyon Yürütme

Bir fonksiyonu çalıştırmanın iki yolu varmış gibi göründüğünü görmek kafa
karıştırıcı olabilir:

1. function add() {
2. something = someNum + someOtherNum;
3. }

add() vs add

Neden bu “iki yola” sahip olduğumuzu anlamak önemlidir!

Genel olarak, tanımladığınız bir fonksiyonu adını kullanarak (örneğin add() )

ve parantezler ekleyerek (fonksiyonun ihtiyaç duyabileceği parametrelerle -
veya yukarıdaki örnekte olduğu gibi parametre gerekmiyorsa boş
parantezlerle) çağırırsınız.

=> add()

Kodunuzdan bir fonksiyonu bu şekilde çalıştırırsınız. JavaScript bu ifadeyle

karşılaştığında, devam eder ve işlevdeki kodu çalıştırır. Nokta!

Ancak bazen, fonksiyonu hemen çalıştırmak istemezsiniz. Bunun yerine

JavaScript'e belirli bir işlevi gelecekte bir noktada (örneğin bir olay
gerçekleştiğinde) çalıştırması gerektiğini “söylemek” istersiniz.

Bu durumda fonksiyonu doğrudan çağırmazsınız, bunun yerine JavaScript'e

sadece fonksiyonun adını verirsiniz.

=> [Link]('click', add);

 Bu kod parçacığı JavaScript'e şunu söyler: “Hey, düğmeye tıklandığında,
devam et ve add'i çalıştır.”.

[Link]('click', add()); would be wrong.

Neden mi? Çünkü JavaScript kodunuzu ayrıştırdığında/çalıştırdığında bu

satırla karşılaşır ve olay dinleyicisini kaydeder VE hemen add'i çalıştırır -
çünkü parantez eklediniz => Bu şu anlama gelir (yukarıya bakın): “Lütfen bu
fonksiyonu çalıştırın!”.

Bu arada, kodunuzun herhangi bir yerine sadece add yazmanız hiçbir işe
yaramayacaktır:

let someVar = 5;

1. add
2. alert('Do something else...');

Why?

Neden mi?
Çünkü oraya sadece fonksiyonun adını yazıyorsunuz ama JavaScript'e başka
hiçbir bilgi vermiyorsunuz. Temelde bu isimle ne yapacağını bilmiyor ("Bunu
bir tıklama gerçekleştiğinde mi çalıştırmalıyım? Belirli bir süre sonra mı? I
don't know...") ve dolayısıyla JavaScript bu ifadeyi görmezden gelir.
Nesneler - Yaygın Sözdizimi Hataları
Son derste bir nesne oluşturmak için doğru sözdizimini öğrendiniz:

1. const user = {
2. name: 'Max',
3. age: 30
4. };

Birkaç önemli şey:

1. “Verileri gruplamak” için {} kullanırsınız - kapanış }'sinden sonra

noktalı virgül (;) kullanılır. Fonksiyonlarda bunu yapmadık. Genel bir kural
olarak, {} eşittir işaretinin sağ tarafındaysa {}'den sonra noktalı virgül
kullanıldığını aklınızda tutabilirsiniz!

2. Anahtar-değer çiftleri noktalı virgül ile DEĞİL virgül (,) ile ayrılır. Bir
nesnenin içinde (yani {} arasında) noktalı virgül kullanmak bir sözdizimi
hatası olacaktır!
 3. Değerler anahtarlara/özelliklere iki nokta üst üste (:) ile atanır, eşittir
işareti (=) ile DEĞİL. Bir nesnenin içinde (yani {} arasında) eşittir işareti
kullanmak bir sözdizimi hatası olacaktır!

Yani bu YANLIŞ olacaktır ve hata verecektir:

const worstPossibleUser = {

1. name = 'Max';
2. age = 30;
3. };

1 Fonksiyon Çağrımı Üzerine Önemli Bilgiler

✅ Bir fonksiyon, doğrudan çağrılmadan sadece adıyla referans olarak verilir.

Örneğin:

js
KopyalaDüzenle
[Link]('click', add);

➡️Bu kullanım doğru! Butona tıklanınca add fonksiyonu çalıştırılır.

❌ Yanlış Kullanım:

js
KopyalaDüzenle
[Link]('click', add());

➡️Bu hatalı! Çünkü add() parantez içinde yazıldığı için fonksiyon hemen çalıştırılır.
➡️Olay dinleyicisine bir fonksiyon değil, fonksiyonun dönüş değeri atanmış olur.

✅ Fonksiyon adını tek başına yazmak bir işlem yapmaz!

Örneğin:

js
KopyalaDüzenle
let someVar = 5;
add;
alert('Do something else...');

➡️add sadece bir kelime olarak yazılmıştır ama JavaScript onunla ne yapması gerektiğini
bilmediği için yok sayar.
2 Nesne Tanımlarken Yaygın Hatalar ve Doğru Kullanım

✅ JavaScript'te nesne şu şekilde tanımlanır:

js
KopyalaDüzenle
const user = {
name: 'Max',
age: 30
};
⚠️Önemli Noktalar:

✔ Nesne {} içinde tanımlanır ve kapatma } sonrasında ; eklenir.

✔ Anahtar-değer (key-value) çiftleri , ile ayrılır (; değil!).
✔ Değerler : ile atanır (= yerine!).

❌ Yanlış Kullanım (Hata Alırsınız!):

js
KopyalaDüzenle
const worstPossibleUser = {
name = 'Max'; // ❌ "=" yerine ":" kullanılmalı
age = 30; // ❌ "=" yerine ":" kullanılmalı
};

3 DOM Seçim Yöntemleri (Node Query Methods)

✅ Belirli Bölümleri Seçme:

 [Link] → <body> öğesini seçer.

 [Link] → <head> öğesini seçer.
 [Link] → <html> öğesini seçer.

4 Sorgulama Yöntemleri (Query Methods)

Yöntem Açıklama

CSS seçicisi alır ve ilk eşleşen öğeyi döndürür.

[Link](<CSS selector>)
(Bulamazsa null döndürür.)

Belirtilen ID'ye sahip öğeyi döndürür. (Bulamazsa

[Link](<ID>)
null döndürür.)

CSS seçicisi alır ve tüm eşleşen öğeleri içeren bir

[Link](<CSS
selector>) NodeList döndürür. (Bulamazsa boş NodeList
döner.)
 Yöntem Açıklama

CSS sınıfı (örneğin 'some-class') alır ve canlı bir

[Link](<CSS
CLASS>) HTMLCollection döndürür. (Bulamazsa boş
HTMLCollection döner.)

Belirtilen HTML etiketine sahip tüm öğeleri içeren

[Link](<HTML
TAG>) canlı bir HTMLCollection döndürür. (Bulamazsa boş
HTMLCollection döner.)

⚠️getElementsByName() yöntemi genellikle yaygın olarak kullanılmaz.

Daha fazla bilgi için: MDN Belgesi

4o

---

DOM'daki öğeleri sorgu seçici ile, get element by ID ile vb. nasıl seçebileceğinize bir göz attık, ayrıca bu

öğeleri manipüle etmek veya sadece onlardan veri okumak için nasıl kullanabileceğinize de bir göz attık.
Şimdi, tipik olarak DOM'da gezinme olarak bilinen öğelerin seçilmesiyle bağlantılı başka bir kavram daha
var ve DOM'da gezinmek ne anlama geliyor? Bu, bir öğeyi, bir düğümü seçtikten sonra, örneğin bir
listedeki tüm liste öğelerini eklemek için tüm alt düğümlerine dalmak isteyebileceğiniz anlamına gelir, bu
nedenle sorgu seçici veya benzeri bir şeyle ilgilenebileceğiniz her öğeyi manuel olarak seçmek yerine,
zaten seçtiğiniz bir öğeyi alabilir ve daha sonra bu öğeye dayalı olarak çocuklarına veya kardeşlerine vb.
geçebilirsiniz, DOM'da gezinmenin anlamı budur. Şimdi bunun için öncelikle kullanacağım birkaç terimi
açıklığa kavuşturmak istiyorum - çocuklar, torunlar, ebeveynler ve atalar çünkü bunların ne anlama
geldiğini anlamak önemlidir.

Şimdi çocuk veya çocukların ne anlama geldiğine, torun veya torunların ne anlama geldiğine, ebeveyn
veya ebeveynlerin ne anlama

geldiğine ve ata veya ataların ne anlama geldiğine bir göz atalım.

Şimdi çocuk dediğimde, öğrendiğiniz bu DOM çaprazlama yöntemlerinden bahsederken bir çocuk
öğeden bahsediyorsam,

bu her zaman doğrudan bir çocuk düğüm veya bir öğe, yani bir öğe düğümü anlamına gelir ve bununla
burada,
bu küçük örnekte, paragrafın div'in bir çocuğu olduğunu, çünkü doğrudan bir çocuk öğe olduğunu
kastediyorum,

doğrudan div'in altındadır, bir katman altındadır, yani em etiketi,

vurgulanan etiket değildir, çünkü em etiketi hala div etiketinin içinde yuvalanmış olsa da, doğrudan bir
çocuk değildir, paragraf,

p etiketi arasındadır, bu nedenle p etiketi

bir çocuktur, em etiketi bu durumda div'in

bir çocuğu değildir. Öte yandan, alt öğe doğrudan ya da dolaylı

bir alt düğüm ya da öğedir; dolayısıyla, alt

öğeden bahsettiğimizde, aynı örnekte hem paragraf hem de em etiketi div öğesinin

alt öğesi olacaktır.

Yani p, paragraf etiketi bir alt ve üst etikettir, em

etiketi ise bu örnekte div'in bir alt değil üst etiketidir.

Şimdi

bir üst öğe ve ata bir nevi zıttır - bir üst düğüm ya da öğe başka bir öğenin doğrudan üst düğümü

ya da öğesidir, dolayısıyla bu örnekte div paragrafın üst öğesidir ancak em'nin div'in çocuğu olmamasıyla
aynı
nedenden dolayı em'nin üst öğesi değildir ve diğer yandan bir ata öğe

ya da düğümden bahsedecek olursam, ata öğe paragrafın üst öğesidir, o zaman bu doğrudan veya dolaylı
bir ebeveyn

ilişkisidir, bu nedenle örneğin aynı örnekte, hem paragrafın hem de em etiketinin atası olarak div'e
sahibiz, bu nedenle bu önemlidir,

bu önemli bir ayrımdır, DOM traversal ve orada neler yapabileceğiniz

hakkında konuşurken akılda tutulması önemli olacaktır.

Dediğim gibi, DOM traversal, seçili bir öğeye, seçili bir düğüme sahip

olduğunuz anlamına gelir, diyelim ki bu div öğesi düğümü burada ve şimdi çevredeki veya iç içe geçmiş
öğelerin veya iç içe geçmiş

düğümlerin bazılarına dalmak istiyorsunuz ve orada, gidebileceğiniz birkaç yönünüz var.

Her DOM nesnesinin sahip olacağı bu belirli özelliklerle her zaman yukarı çıkabilir, yani bir üst öğe veya

üst düğüm veya üst öğe içeren bir düğüm bulabilirsiniz, bu nedenle div

veya paragraf ya da her ne olursa olsun seçebileceğiniz her öğe nesnesi bu üst düğüm

ve üst öğe özelliğine sahip olacaktır, aradaki

fark, üst düğüm herhangi bir üst düğümü seçerken, üst öğe yalnızca aynı zamanda bir öğe olan bir üst
düğümü seçer, yani yalnızca üst HTML

öğelerini seçer.

Ayrıca, yalnızca doğrudan bir üst öğeyi almak için değil, belirli bir CSS sorgusuyla eşleşen herhangi bir
atayı almak için kullanabileceğiniz

en yakın yöntem de vardır ve bunların hepsinin

nasıl çalıştığını elbette sonraki derslerde göstereceğim.

Elbette, ters yöne de gidebilir ve bir üst ya da ata öğeye ulaşmak

yerine, bir alt ya da torun öğeye de ulaşabilirsiniz.

Burada alt düğümler ve alt öğeler, metin düğümleri de dahil olmak üzere tüm alt

düğümleri seçmek için alt düğümler, yalnızca alt öğe düğümlerini, yani yalnızca HTML öğe nesnelerini
seçmek için alt

öğeler ve elbette size

daha önce de gösterdiğim gibi, sorgu seçiciyi kullanabilir, öğeleri bir sınıf adına göre alabilir ve seçilen

herhangi bir öğe düğümünde de kullanabilirsiniz, bu nedenle bunlar

aynı zamanda seçilen herhangi bir öğe nesnesinde her zaman kullanılabilen yöntemlerdir

ve bu nedenle, DOM ağacının o bölümünde bulabileceğiniz tüm torunlara daha derinlemesine dalmak
için bunları her zaman kullanabilirsiniz.

Şimdi, belirli bir öğenin ilk öğe çocuk düğümünü seçmek için ilk çocuk düğümünü ve ilk öğe

çocuğunu seçmek için ilk çocuk düğümünü almak için kullanabileceğiniz özel özellikler de

vardır ve aynı şey, belirli bir öğe için seçebileceğiniz son çocuk, son çocuk düğümü

ve son öğe çocuk düğümü için de kullanılabilir. Bu, DOM ağacında yukarı çıkmak veya DOM ağacının
derinliklerine, yani iç içe geçmiş öğelere

gitmek içindir, şimdi belki de aynı seviyede

kalmak ve kardeş öğeleri seçmek istiyorsunuz. Bunun için, herhangi bir DOM nesnesi üzerinde

bir öğenin doğrudan kardeşini almanızı sağlayan önceki kardeş ve önceki öğe kardeş özelliklerine

sahipsiniz ve bu elbette o anda seçili öğeden önceki veya sonraki kardeşi almak için her iki yönde de
çalışır

ve önceki kardeş ve sonraki kardeş size bir sonraki kardeş düğümü verir, önceki öğeler kardeş ve sonraki

öğe kardeş size seçilen düğümün kardeşi olan bir sonraki öğe düğümünü verir.

Teori

bu kadar, şimdi de pratikte neler olduğuna bir göz atalım.