Bilgisayar Mühendisliği JavaScript Ders Notları

JavaScript Ders Notları

Giriş, Tarihçe, Kullanım Alanları ve Uygulamaya Geçiş

1. JavaScript Nedir?

JavaScript, başlangıçta web sayfalarına etkileşim kazandırmak amacıyla geliştirilmiş, gü-

nümüzde ise çok farklı alanlarda kullanılabilen genel amaçlı bir programlama dilidir. Web
geliştirme alanında HTML içerik yapısını, CSS görsel düzeni, JavaScript ise davranışı
ve etkileşimi yönetir. Bu nedenle JavaScript, web teknolojilerinin temel bileşenlerinden
biridir.
Bir web sayfasında butona tıklanması, form verilerinin denetlenmesi, ekrandaki içeriğin
değiştirilmesi, sunucudan veri alınması, animasyon oluşturulması ve kullanıcıyla etkileşim
kurulması gibi görevler JavaScript ile gerçekleştirilir. Ancak JavaScript yalnızca tarayıcı
içinde kullanılan bir dil değildir. Günümüzde sunucu tarafında, mobil uygulamalarda,
masaüstü uygulamalarda, test otomasyonunda, komut satırı araçlarında ve tam yığın
projelerde de kullanılmaktadır.

2. JavaScript’in Ortaya Çıkışı ve Tarihçesi

JavaScript, 1995 yılında web sayfalarına dinamik davranış kazandırmak amacıyla gelişti-
rildi. O dönemde web sayfaları büyük ölçüde statik yapıdaydı; yani kullanıcı ile etkileşimi
sınırlıydı. Sayfada bir düğmeye basıldığında anında tepki verilmesi, form verilerinin kont-
rol edilmesi ve sayfa içeriğinin değiştirilebilmesi için tarayıcı içinde çalışan bir dile ihtiyaç
vardı. JavaScript bu ihtiyaca cevap olarak doğdu.
İlk yıllarda JavaScript daha çok küçük etkileşimler için kullanılıyordu. Zamanla tarayı-
cıların gelişmesi, internet altyapısının güçlenmesi ve web uygulamalarının büyümesiyle
birlikte dilin kullanım alanı büyük ölçüde genişledi. Özellikle 2000’li yılların sonlarından
sonra JavaScript, sadece basit bir sayfa betik dili olmaktan çıkarak büyük ölçekli uygu-
lamaların temeli hâline geldi.

2.1. JavaScript ve Java Aynı Şey midir?

Hayır. JavaScript ile Java farklı programlama dilleridir. İsim benzerliği, bu iki dilin teknik
olarak aynı olduğu anlamına gelmez. Sözdizimi açısından bazı benzerlikler bulunsa da
tasarım amaçları, çalışma ortamları ve kullanım biçimleri farklıdır.

1
Bilgisayar Mühendisliği JavaScript Ders Notları

Özellik JavaScript Java

Temel kullanım alanı Web, sunucu, etkileşimli Kurumsal yazılım,
uygulamalar masaüstü, Android, büyük
sistemler
Çalışma ortamı Tarayıcılar, [Link] vb. JVM üzerinde
Yapısı Dinamik ve esnek Daha katı ve tip denetimli
Başlangıç amacı Web sayfası etkileşimi Genel amaçlı yazılım
geliştirme

3. ECMAScript Nedir?

JavaScript’in resmi standardına ECMAScript adı verilir. JavaScript dilinin hangi kural-
lara göre çalıştığı, hangi sözdizimine sahip olduğu ve hangi özellikleri içerdiği ECMAScript
standardı ile belirlenir.
Başka bir ifadeyle:

• JavaScript, programlama dilinin yaygın adıdır.

• ECMAScript ise bu dilin standartlaştırılmış teknik tanımıdır.

Bu nedenle JavaScript ile ECMAScript aynı şey değildir; fakat çok yakından ilişkilidir.
Uygulamada geliştiriciler genellikle “JavaScript” adını kullanır. Standart tartışılırken ise
“ECMAScript” kavramı öne çıkar.

3.1. Önemli Sürümler

JavaScript tarihinde bazı sürümler özellikle önemlidir:

• ES5: Dilin daha tutarlı ve güvenli kullanılmasına katkı sağlamıştır.

• ES6 / ES2015: Modern JavaScript döneminin başlangıcı olarak kabul edilir.

• ES2016 ve sonrası: Yıllık güncellemelerle dil gelişmeye devam etmiştir.

ES6 ile birlikte gelen bazı önemli yenilikler şunlardır:

• let ve const

• Ok fonksiyonları (=>)

2
Bilgisayar Mühendisliği JavaScript Ders Notları

• Sınıf yapısı (class)

• Modül sistemi

• Şablon dizgileri

• Yıkıcı atama

4. JavaScript’in Çalışma Mantığı

JavaScript’i doğru anlayabilmek için üç kavram birbirinden ayrılmalıdır:

4.1. Dil

JavaScript bir programlama dilidir. Değişken tanımlama, koşul yazma, döngü kurma,
fonksiyon oluşturma gibi kuralları vardır.

4.2. Motor

JavaScript kodunu çalıştıran yapıya motor denir. Motor, yazılan kodu yorumlar ve yü-
rütür. Farklı ortamlarda farklı JavaScript motorları kullanılabilir.

4.3. Çalışma Ortamı

JavaScript kodunun çalıştığı ortama çalışma ortamı denir. En yaygın çalışma ortamları
şunlardır:

• Web tarayıcıları

• [Link]

Tarayıcı ortamında JavaScript; HTML, CSS, DOM ve kullanıcı etkileşimleriyle birlikte

çalışır. [Link] ortamında ise dosya sistemi, ağ işlemleri, sunucu programlama ve komut
satırı araçları ön plandadır.

5. JavaScript Nerelerde Kullanılır?

JavaScript günümüzde çok geniş bir kullanım alanına sahiptir.

3
Bilgisayar Mühendisliği JavaScript Ders Notları

5.1. Ön Yüz (Frontend)

Web sayfasının kullanıcı tarafından görülen ve etkileşim kurulan bölümü ön yüz olarak
adlandırılır. Sayfadaki metinlerin değişmesi, menülerin açılması, butonlara tıklanınca iş-
lemlerin gerçekleşmesi gibi işler JavaScript ile yapılır.

5.2. Arka Yüz (Backend)

[Link] sayesinde JavaScript artık sunucu tarafında da kullanılabilmektedir. Bu sayede

veri işleme, API geliştirme, kullanıcı yönetimi, dosya işlemleri ve veritabanı bağlantıları
gibi görevler JavaScript ile gerçekleştirilebilir.

5.3. Tam Yığın (Full-Stack) Geliştirme

Aynı dilin hem istemci hem sunucu tarafında kullanılabilmesi, JavaScript’i tam yığın
geliştirme için güçlü bir araç hâline getirmiştir.

5.4. Mobil Uygulamalar

React Native gibi yapılar aracılığıyla JavaScript kullanılarak mobil uygulamalar geliştiri-
lebilir.

5.5. Masaüstü Uygulamalar

Electron gibi araçlar sayesinde JavaScript, masaüstü uygulamaların geliştirilmesinde de

kullanılabilmektedir.

5.6. Oyun Geliştirme

Basit ve orta ölçekli oyunlar tarayıcı üzerinde JavaScript ile geliştirilebilir. Özellikle eğitim
amaçlı projelerde ve etkileşimli görsellerde JavaScript oldukça sık kullanılır.

5.7. Otomasyon ve Araç Geliştirme

Komut satırı araçları, otomatikleştirme betikleri, test sistemleri ve geliştirme araçları da

JavaScript ile yazılabilir.

4
Bilgisayar Mühendisliği JavaScript Ders Notları

6. Modern JavaScript Ekosistemi

JavaScript’in gücü yalnızca dilin kendisinden değil, etrafında oluşmuş büyük ekosistemden
de gelir. Bu ekosistemde çok sayıda araç, kütüphane ve çerçeve bulunmaktadır.

6.1. Kütüphane ve Framework

Kütüphane, belirli problemleri çözmek için geliştirilen hazır kod topluluğudur. Geliştirici
ihtiyaç duyduğu zaman bu kodları çağırır.
Framework ise uygulamanın genel yapısını belirleyen, daha kapsayıcı bir geliştirme ça-
tısıdır. Framework, geliştiriciye yalnızca araç sunmaz; aynı zamanda uygulamanın nasıl
organize edileceğini de büyük ölçüde belirler.

6.2. Yaygın Yapılar

• React: Arayüz geliştirmede yaygın kullanılan bir kütüphane

• Vue: Kullanımı görece sade olan bir arayüz framework’ü

• Angular: Daha kapsamlı ve kurumsal projelerde sık görülen bir framework

• [Link]: Sunucu tarafında JavaScript çalıştırmaya yarayan çalışma ortamı

• [Link]: Özellikle modern web uygulamaları için kullanılan yapılar bütünüdür

• Vite: Hızlı geliştirme ve derleme aracı

• npm: Paket yönetim sistemi

• TypeScript: JavaScript üzerine tip desteği ekleyen yapı

7. JavaScript’in Güçlü Yönleri

JavaScript’in yaygın şekilde kullanılmasının başlıca nedenleri şunlardır:

• Web’in doğal dili olması

• Tarayıcı desteğinin yaygın olması

• Hem istemci hem sunucu tarafında kullanılabilmesi

• Büyük ve güçlü bir topluluğa sahip olması

• Çok sayıda kütüphane ve framework ile desteklenmesi

• Başlangıç seviyesinde hızlı sonuç üretilebilmesi

5
Bilgisayar Mühendisliği JavaScript Ders Notları

8. JavaScript’in Sınırlılıkları ve Dikkat Edilmesi Gereken Nokta-

lar

JavaScript güçlü bir dil olsa da bazı zorluklar içerir. Dil tarihsel olarak çok hızlı büyü-
düğü için esnekliği bazen karmaşıklık doğurabilir. Tarayıcı uyumluluğu, büyük projelerde
kod disiplini, paket bağımlılıklarının yönetimi ve hızlı değişen ekosistem bu dilin dikkat
gerektiren yönleri arasındadır.
Özellikle büyük uygulamalarda düzenli dosya yapısı, modüler kodlama, hata ayıklama
becerisi ve iyi bir proje organizasyonu önem kazanır.

9. JavaScript’in Günümüzdeki Yeri ve Geleceği

JavaScript bugün web geliştirme dünyasının merkezindedir. Modern internet uygulamala-

rının büyük bölümü JavaScript ile doğrudan ya da dolaylı biçimde ilişkilidir. Dilin yalnızca
web sayfası etkileşimi için kullanılan dar bir araç olmadığı, tam tersine farklı çalışma or-
tamlarında yer bulan genel amaçlı bir dil olduğu açıktır.
Gelecekte JavaScript’in önemini koruması beklenmektedir. Özellikle şu alanlarda etkisini
sürdürmektedir:

• Etkileşimli web uygulamaları

• Tam yığın yazılım geliştirme

• Gerçek zamanlı uygulamalar

• Yapay zekâ destekli web sistemleri

• TypeScript ile daha güvenli büyük ölçekli geliştirme

• Modern araç zincirleri ve otomasyon süreçleri

10. Uygulamaya Geçiş: JavaScript Nerede Yazılır?

JavaScript farklı ortamlarda yazılabilir ve çalıştırılabilir. Uygulama geliştirme sürecini

anlamak için bu ortamların bilinmesi gerekir.

10.1. Tarayıcı Konsolu

Tarayıcıların geliştirici araçlarında bulunan Console bölümü, JavaScript komutlarını doğ-

rudan çalıştırmaya yarar. Küçük denemeler, hesaplamalar ve hata ayıklama için oldukça
kullanışlıdır.

6
 Bilgisayar Mühendisliği JavaScript Ders Notları

Örnek:
1 2 + 3

Listing 1: Tarayıcı konsolunda basit örnek

Çıktı:
1 5

Bir başka örnek:

1 let ad = " Ahmet ";
2 console . log (" Merhaba " + ad ) ;

Listing 2: Değişken tanımlama ve ekrana yazdırma

10.2. HTML Dosyası İçinde

JavaScript, HTML dosyasının içine <script> etiketiyle doğrudan yazılabilir. Bu yöntem

küçük örnekler ve ilk uygulamalar için anlaşılır bir başlangıç sağlar.
1 <! DOCTYPE html >
2 < html lang = " tr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Ilk Ornek </ title >
6 </ head >
7 < body >
8 < h1 > JavaScript Ornegi </ h1 >
9

10 < script >

11 console . log ( " JavaScript calisti " ) ;
12 alert ( " Sayfa acildi " ) ;
13 </ script >
14 </ body >
15 </ html >

Listing 3: HTML dosyası içinde JavaScript kullanımı

Bu örnekte:

• [Link]() ifadesi çıktıyı tarayıcı konsoluna yazar.

• alert() ifadesi ekranda uyarı penceresi açar.

7
 Bilgisayar Mühendisliği JavaScript Ders Notları

10.3. Harici JavaScript Dosyası İçinde

Gerçek projelerde daha yaygın olan yöntem, JavaScript kodunu ayrı bir .js dosyasında
tutmaktır. Bu yaklaşım kodun düzenli ve sürdürülebilir olmasını sağlar.
1 <! DOCTYPE html >
2 < html lang = " tr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Harici JavaScript </ title >
6 </ head >
7 < body >
8 < h1 > Harici Dosya Kullanimi </ h1 >
9

10 < script src = " app . js " > </ script >
11 </ body >
12 </ html >

Listing 4: HTML dosyasından harici JavaScript dosyasını çağırma

1 console . log (" app . js dosyasi calisti ") ;

2 let ders = " JavaScript ";
3 console . log (" Bugunku ders : " + ders ) ;

Listing 5: [Link] dosyası

10.4. [Link] Ortamında

JavaScript, tarayıcı dışında [Link] ile de çalıştırılabilir. Bu durumda kod bir terminal
üzerinden çalıştırılır ve çıktı terminal ekranında görülür.
1 console . log (" Merhaba , ben Node . js uzerinde calisan JavaScript
koduyum .") ;
2

3 let sayi1 = 7;
4 let sayi2 = 8;
5

6 console . log (" Toplam :" , sayi1 + sayi2 ) ;

Listing 6: [Link] dosyası

Terminal komutu:
1 node hello . js

Listing 7: Terminalden çalıştırma

8
 Bilgisayar Mühendisliği JavaScript Ders Notları

10.5. [Link] REPL

[Link], etkileşimli bir komut çalışma ortamı da sunar. Bu ortamda tek tek satırlar yazı-
larak sonuçlar hemen görülebilir.
1 > 10 + 20
2 30
3 > let isim = " Zeynep "
4 undefined
5 > isim . toUpperCase ()
6 ’ ZEYNEP ’

Listing 8: [Link] REPL örneği

11. JavaScript Hangi Programlarda Yazılır?

JavaScript kodları herhangi bir metin düzenleyicide yazılabilir. Ancak geliştirme sürecinde
kod tamamlama, hata vurgulama, dosya yönetimi ve hata ayıklama gibi özellikler sunduğu
için gelişmiş editörler tercih edilir.
Yaygın kullanılan editörlerden biri Visual Studio Code ortamıdır. Bu editör, JavaScript
için güçlü destek sağlar ve özellikle eğitim amaçlı kullanımda oldukça uygundur.
Basit bir proje klasörü aşağıdaki gibi olabilir:
1 javascript - ders /
2 |
3 | - - index . html
4 | - - app . js

Listing 9: Temel proje klasör yapısı

12. JavaScript Nasıl Çalıştırılır?

JavaScript’in nasıl çalıştırıldığı, hangi ortamda bulunduğuna bağlıdır.

12.1. Tarayıcı Üzerinden Çalıştırma

Tarayıcı ortamında JavaScript genellikle bir HTML dosyası üzerinden çalışır. HTML dos-
yası tarayıcıda açıldığında, içindeki <script> etiketi veya bağlı .js dosyası yürütülür.

9
 Bilgisayar Mühendisliği JavaScript Ders Notları

12.2. Terminal Üzerinden Çalıştırma

[Link] kurulmuş bir sistemde JavaScript dosyaları terminalden aşağıdaki komutla çalış-
tırılır:
1 node dosyaAdi . js

13. Script Etiketinin Konumu ve defer Kullanımı

JavaScript kodu HTML içinde yanlış konumlandırıldığında bazı sorunlar oluşabilir. Örne-
ğin, sayfadaki bir eleman henüz oluşturulmadan JavaScript bu elemana erişmeye çalışırsa
hata alınabilir.
Bunu önlemek için iki yaygın yaklaşım vardır:

• <script> etiketini </body> kapanışından hemen önce yazmak

• Harici dosya kullanırken defer özelliğini eklemek

1 <! DOCTYPE html >
2 < html lang = " tr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Defer Ornegi </ title >
6 < script src = " app . js " defer > </ script >
7 </ head >
8 < body >
9 < h1 id = " baslik " > Merhaba </ h1 >
10 </ body >
11 </ html >

Listing 10: defer kullanımı

1 const baslik = document . getElementById (" baslik ") ;

2 console . log ( baslik . textContent ) ;

Listing 11: [Link] dosyası

Burada defer, JavaScript dosyasının HTML içeriği uygun şekilde hazırlandıktan sonra
çalışmasına yardımcı olur.

14. Sayfa Elemanlarına Erişim ve DOM

Bir web sayfasındaki HTML elemanlarına JavaScript ile erişmek için DOM kavramı kulla-
nılır. DOM, sayfanın programatik olarak temsil edilmesini sağlar. Başlık, paragraf, buton,

10
 Bilgisayar Mühendisliği JavaScript Ders Notları

metin kutusu gibi elemanlar JavaScript tarafından seçilebilir ve değiştirilebilir.

Örneğin bir başlık elemanına erişmek:
1 const baslik = document . getElementById (" baslik ") ;
2 console . log ( baslik ) ;

Listing 12: Bir HTML elemanını seçme

Burada document nesnesi tarayıcı ortamına aittir. Bu nesne sayesinde HTML içindeki
elemanlara erişilebilir.

15. Olaylar (Events)

Kullanıcının sayfa üzerinde yaptığı işlemler olay olarak adlandırılır. Butona tıklamak,
klavyeden tuşa basmak, fareyi hareket ettirmek veya bir formu göndermek olay örnekle-
ridir.
Bir olaya tepki vermek için olay dinleyicileri kullanılır.
1 <! DOCTYPE html >
2 < html lang = " tr " >
3 < head >
4 < meta charset = " UTF -8 " >
5 < title > Buton Ornegi </ title >
6 < script src = " app . js " defer > </ script >
7 </ head >
8 < body >
9 < h1 id = " mesaj " > Henuz butona basilamadi </ h1 >
10 < button id = " btn " > Tikla </ button >
11 </ body >
12 </ html >

Listing 13: Buton örneği

1 const mesaj = document . getElementById (" mesaj ") ;

2 const btn = document . getElementById (" btn ") ;
3

4 btn . addEventListener (" click " , function () {

5 mesaj . textContent = " Butona basildi , JavaScript calisti ";
6 }) ;

Listing 14: Buton tıklama olayı

Bu örnekte:

• [Link]() ile elemanlar seçilmiştir.

11
 Bilgisayar Mühendisliği JavaScript Ders Notları

• addEventListener() ile butona tıklama olayı dinlenmiştir.

• Tıklama gerçekleşince başlık metni değiştirilmiştir.

16. Tarayıcı JavaScript’i ve [Link] JavaScript’i Arasındaki Fark

Aynı dil kullanılsa da tarayıcı ile [Link] ortamları aynı değildir. Bu nedenle bazı kodlar
tarayıcıda çalışırken [Link] ortamında çalışmaz.

Özellik Tarayıcı Ortamı [Link] Ortamı

Amaç Web sayfası etkileşimi Sunucu ve komut satırı
işlemleri
DOM erişimi Vardır Doğrudan yoktur
document nesnesi Vardır Yoktur
Çıktı Tarayıcı konsolu / sayfa Terminal
Kullanım örneği Buton, form, arayüz API, dosya, sunucu

Örneğin aşağıdaki kod tarayıcıda çalışabilir:

1 document . getElementById (" mesaj ") ;

Ancak aynı ifade [Link] ortamında doğrudan çalışmaz. Çünkü document nesnesi tarayıcı
ortamına aittir.

17. Basit Bir Uygulama Akışı

Bir JavaScript uygulaması geliştirilirken aşağıdaki temel adımlar izlenebilir:

1. Proje klasörü oluşturulur.

2. [Link] dosyası hazırlanır.

3. Gerekirse [Link] adlı JavaScript dosyası oluşturulur.

4. HTML ile JavaScript dosyası birbirine bağlanır.

5. Tarayıcıda çalıştırılır.

6. Konsol çıktıları kontrol edilir.

7. Hatalar düzeltilir ve davranış test edilir.

Örnek dosya yapısı:

12
 Bilgisayar Mühendisliği JavaScript Ders Notları

1 proje /
2 |
3 | - - index . html
4 | - - app . js

18. JavaScript Öğreniminde Temel Kavramlara Geçiş

JavaScript’in tarihini, çalışma ortamlarını ve kullanım alanlarını anlamak, kodlama süre-

cine geçiş için bir temel oluşturur. Bundan sonraki aşamada genellikle şu kavramlar ele
alınır:

• Değişkenler

• Veri tipleri

• Operatörler

• Koşul yapıları

• Döngüler

• Fonksiyonlar

• Diziler

• Nesneler

• DOM işlemleri

• Olaylar

Bu kavramlar öğrenildikçe JavaScript ile sadece küçük denemeler değil, gerçek uygulama-
lar da geliştirilebilir.

19. Özet

JavaScript, web’in temel programlama dillerinden biridir ve başlangıçta web sayfalarına

etkileşim kazandırmak için geliştirilmiştir. Zamanla büyük bir gelişim göstermiş, EC-
MAScript standardı ile resmileşmiş ve modern yazılım dünyasında hem istemci hem su-
nucu tarafında kullanılan çok yönlü bir dil hâline gelmiştir.
Bu dil;

13
Bilgisayar Mühendisliği JavaScript Ders Notları

• web sayfalarında etkileşim sağlar,

• sunucu tarafında çalışabilir,

• modern web uygulamalarının temelini oluşturur,

• çok sayıda araç, framework ve kütüphane ile desteklenir,

• farklı çalışma ortamlarında farklı amaçlarla kullanılabilir.

JavaScript uygulamaları tarayıcı konsolunda, HTML dosyaları içinde, harici .js dosya-
larında veya [Link] ortamında geliştirilebilir. Tarayıcı ile [Link] arasındaki farkların
bilinmesi, JavaScript’in doğru anlaşılması açısından önemlidir. Uygulama geliştirme süre-
cinde dosya yapısı, DOM erişimi, olay yönetimi ve çalışma ortamı bilgisi temel yer tutar.

14