Bilgisayar Mühendisliği JavaScript Ders Notları
JavaScript Temel Kod Yapıları-1
Temel Sözdizimi, Veri Yapıları ve Sayfa Etkileşimi
1. İlk JavaScript Kodları
JavaScript’te ekrana çıktı vermek için en sık kullanılan yapı [Link]() ifadesidir.
Bu ifade, verilen değeri tarayıcı konsoluna veya uygun çalışma ortamında çıktı ekranına
yazar.
1 console . log (" Merhaba JavaScript ") ;
2 console . log (2 + 3) ;
3 console . log (" Bugun ilk JavaScript kodlari yaziliyor ") ;
Listing 1: İlk JavaScript kodları
Tarayıcı ortamında kullanıcıya kısa bir mesaj kutusu göstermek için alert() kullanılabi-
lir.
1 alert (" Sayfa acildi ") ;
Listing 2: Uyarı penceresi
2. Değişkenler
Programlamada veriler değişkenlerde saklanır. JavaScript’te değişken tanımlamak için let
ve const kullanılır.
2.1. let ile Değişken Tanımlama
1 let isim = " Ahmet ";
2 console . log ( isim ) ;
3
4 let sayi = 10;
5 console . log ( sayi ) ;
Listing 3: let ile değişken tanımlama
let ile tanımlanan değişkenin değeri daha sonra değiştirilebilir.
1 let puan = 50;
2 console . log ( puan ) ;
3
4 puan = 75;
1
Bilgisayar Mühendisliği JavaScript Ders Notları
5 console . log ( puan ) ;
Listing 4: Değişken değerini değiştirme
2.2. const ile Sabit Tanımlama
1 const okul = " Inonu Universitesi ";
2 console . log ( okul ) ;
Listing 5: const ile sabit tanımlama
const ile tanımlanan değer daha sonra değiştirilemez.
3. Veri Tipleri
JavaScript’te farklı veri tipleri bulunur. Temel veri tipleri string, number, boolean, unde-
fined ve null’dır.
• String: Metin verisi
• Number: Sayısal veri
• Boolean: Doğru veya yanlış değeri
• Undefined: Değer atanmamış değişken
• Null: Bilinçli olarak boş bırakılmış değer
1 let ad = " Zeynep ";
2 let yas = 21;
3 let ogrenciMi = true ;
4 let veri = null ;
5 let durum ;
6
7 console . log ( typeof ad ) ;
8 console . log ( typeof yas ) ;
9 console . log ( typeof ogrenciMi ) ;
10 console . log ( typeof durum ) ;
Listing 6: Veri tipleri
4. Operatörler
JavaScript’te veriler üzerinde işlem yapmak için operatörler kullanılır.
2
Bilgisayar Mühendisliği JavaScript Ders Notları
4.1. Aritmetik Operatörler
1 let a = 10;
2 let b = 3;
3
4 console . log ( a + b);
5 console . log ( a - b);
6 console . log ( a * b);
7 console . log ( a / b);
8 console . log ( a % b);
Listing 7: Aritmetik operatörler
4.2. Karşılaştırma Operatörleri
1 let x = 5;
2 let y = 8;
3
4 console . log ( x > y);
5 console . log ( x < y);
6 console . log ( x == y ) ;
7 console . log ( x === y ) ;
Listing 8: Karşılaştırma operatörleri
== operatörü yalnızca değeri karşılaştırır. === operatörü ise hem değeri hem veri tipini
karşılaştırır.
4.3. Mantıksal Operatörler
1 console . log ( true && false ) ;
2 console . log ( true || false ) ;
3 console . log (! true ) ;
Listing 9: Mantıksal operatörler
5. Kullanıcıdan Veri Alma
Tarayıcı ortamında kullanıcıdan veri almak için prompt() kullanılabilir.
1 let isim = prompt (" Adinizi giriniz :") ;
2 console . log (" Merhaba " + isim ) ;
Listing 10: Kullanıcıdan isim alma
3
Bilgisayar Mühendisliği JavaScript Ders Notları
prompt() ile alınan veri metin türündedir. Sayısal işlem yapılacaksa dönüşüm gerekir.
1 let sayi1 = Number ( prompt (" Birinci sayiyi giriniz :") ) ;
2 let sayi2 = Number ( prompt (" Ikinci sayiyi giriniz :") ) ;
3
4 console . log (" Toplam :" , sayi1 + sayi2 ) ;
Listing 11: Sayı alıp toplama işlemi
6. Koşul Yapıları
Koşul yapıları, programın farklı durumlara göre farklı davranmasını sağlar.
6.1. if ve else
1 let yas = 20;
2
3 if ( yas >= 18) {
4 console . log (" Resitsiniz .") ;
5 } else {
6 console . log (" Resit degilsiniz .") ;
7 }
Listing 12: Yaş kontrolü
6.2. else if
1 let notDegeri = 75;
2
3 if ( notDegeri >= 85) {
4 console . log (" Pekiyi ") ;
5 } else if ( notDegeri >= 70) {
6 console . log (" Iyi ") ;
7 } else if ( notDegeri >= 50) {
8 console . log (" Gecti ") ;
9 } else {
10 console . log (" Kaldi ") ;
11 }
Listing 13: Not değerlendirme
4
Bilgisayar Mühendisliği JavaScript Ders Notları
7. switch-case Yapısı
Aynı değişkene bağlı çok sayıda olasılık olduğunda switch-case yapısı kullanılabilir.
1 let gun = 3;
2
3 switch ( gun ) {
4 case 1:
5 console . log (" Pazartesi ") ;
6 break ;
7 case 2:
8 console . log (" Sali ") ;
9 break ;
10 case 3:
11 console . log (" Carsamba ") ;
12 break ;
13 default :
14 console . log (" Gecersiz gun ") ;
15 }
Listing 14: switch-case örneği
8. Döngüler
Bir işlemin tekrar tekrar yapılması gerektiğinde döngüler kullanılır.
8.1. for Döngüsü
1 for ( let i = 1; i <= 5; i ++) {
2 console . log ( i ) ;
3 }
Listing 15: for döngüsü
8.2. while Döngüsü
1 let i = 1;
2
3 while ( i <= 5) {
4 console . log ( i ) ;
5 i ++;
6 }
5
Bilgisayar Mühendisliği JavaScript Ders Notları
Listing 16: while döngüsü
8.3. do while Döngüsü
1 let j = 1;
2
3 do {
4 console . log ( j ) ;
5 j ++;
6 } while ( j <= 5) ;
Listing 17: do while döngüsü
9. Fonksiyonlar
Fonksiyonlar, belirli bir işi yapan ve tekrar kullanılabilen kod bloklarıdır.
9.1. Parametresiz Fonksiyon
1 function selamVer () {
2 console . log (" Merhaba ") ;
3 }
4
5 selamVer () ;
Listing 18: Parametresiz fonksiyon
9.2. Parametreli Fonksiyon
1 function topla (a , b ) {
2 console . log ( a + b ) ;
3 }
4
5 topla (3 , 5) ;
Listing 19: Parametreli fonksiyon
6
Bilgisayar Mühendisliği JavaScript Ders Notları
9.3. Değer Döndüren Fonksiyon
1 function kareAl ( sayi ) {
2 return sayi * sayi ;
3 }
4
5 let sonuc = kareAl (4) ;
6 console . log ( sonuc ) ;
Listing 20: return kullanan fonksiyon
10. Arrow Function
Modern JavaScript’te fonksiyonlar kısa biçimde de tanımlanabilir.
1 const topla = (a , b ) = > {
2 return a + b ;
3 };
4
5 console . log ( topla (4 , 6) ) ;
Listing 21: Arrow function
1 const kare = x = > x * x ;
2 console . log ( kare (5) ) ;
Listing 22: Kısa arrow function kullanımı
11. Diziler
Birden fazla veriyi tek bir yapıda tutmak için diziler kullanılır.
1 let meyveler = [" Elma " , " Armut " , " Muz "];
2
3 console . log ( meyveler ) ;
4 console . log ( meyveler [0]) ;
5 console . log ( meyveler . length ) ;
Listing 23: Dizi oluşturma ve elemanlara erişme
1 let meyveler = [" Elma " , " Armut " , " Muz "];
2 meyveler . push (" Cilek ") ;
3
4 console . log ( meyveler ) ;
7
Bilgisayar Mühendisliği JavaScript Ders Notları
Listing 24: Diziye eleman ekleme
• push(): sona eleman ekler
• pop(): son elemanı çıkarır
• shift(): ilk elemanı çıkarır
• unshift(): başa eleman ekler
12. Dizilerde Döngü Kullanımı
Dizi elemanları döngüler yardımıyla tek tek işlenebilir.
1 let sayilar = [10 , 20 , 30 , 40];
2
3 for ( let i = 0; i < sayilar . length ; i ++) {
4 console . log ( sayilar [ i ]) ;
5 }
Listing 25: for ile dizi elemanlarını yazdırma
1 let sayilar = [10 , 20 , 30 , 40];
2
3 for ( let sayi of sayilar ) {
4 console . log ( sayi ) ;
5 }
Listing 26: for...of kullanımı
13. Nesneler
Gerçek hayattaki varlıklar ve onların özellikleri nesneler ile gösterilir.
1 let ogrenci = {
2 ad : " Ayse " ,
3 yas : 21 ,
4 bolum : " Bilgisayar Muhendisligi "
5 };
6
7 console . log ( ogrenci . ad ) ;
8 console . log ( ogrenci . yas ) ;
Listing 27: Nesne örneği
8
Bilgisayar Mühendisliği JavaScript Ders Notları
1 let ogrenci = {
2 ad : " Ayse " ,
3 yas : 21
4 };
5
6 ogrenci . not = 90;
7 console . log ( ogrenci ) ;
Listing 28: Nesneye yeni özellik ekleme
14. Metin İşlemleri
Metinler üzerinde uzunluk bulma, büyük harfe çevirme, küçük harfe çevirme ve içerik
arama gibi işlemler yapılabilir.
1 let metin = " JavaScript ";
2
3 console . log ( metin . length ) ;
4 console . log ( metin . toUpperCase () ) ;
5 console . log ( metin . toLowerCase () ) ;
6 console . log ( metin . includes (" Script ") ) ;
Listing 29: String işlemleri
15. Matematik İşlemleri
JavaScript’te Math nesnesi matematiksel işlemler için kullanılır.
1 console . log ( Math . round (4.7) ) ;
2 console . log ( Math . floor (4.7) ) ;
3 console . log ( Math . ceil (4.2) ) ;
4 console . log ( Math . random () ) ;
Listing 30: Math nesnesi
1 let rastgele = Math . floor ( Math . random () * 10) + 1;
2 console . log ( rastgele ) ;
Listing 31: 1 ile 10 arasında rastgele sayı
9
Bilgisayar Mühendisliği JavaScript Ders Notları
16. DOM’a Giriş
DOM, web sayfasındaki HTML elemanlarının programlama yoluyla temsil edilmesini sağ-
lar. JavaScript, DOM üzerinden sayfadaki elemanlara erişebilir ve bu elemanların içeriğini
değiştirebilir.
1 < h1 id = " baslik " > Merhaba </ h1 >
Listing 32: HTML örneği
1 const baslik = document . getElementById (" baslik ") ;
2 baslik . textContent = " JavaScript ile degisti ";
Listing 33: DOM ile içerik değiştirme
17. Olaylar
Kullanıcının bir butona tıklaması, klavyeden yazı yazması veya fareyi hareket ettirmesi
gibi işlemler olay olarak adlandırılır.
1 < button id = " btn " > Tikla </ button >
2 <p id = " mesaj " > Bekleniyor ... </ p >
Listing 34: Buton ve mesaj alanı
1 const btn = document . getElementById (" btn ") ;
2 const mesaj = document . getElementById (" mesaj ") ;
3
4 btn . addEventListener (" click " , function () {
5 mesaj . textContent = " Butona basildi ";
6 }) ;
Listing 35: click olayı
18. Form İşlemleri
Web sayfalarında kullanıcıdan veri almak için form elemanları kullanılır.
1 < input type = " text " id = " ad " placeholder = " Adinizi yazin " >
2 < button id = " gonder " > Gonder </ button >
3 <p id = " sonuc " > </ p >
Listing 36: Basit form örneği
10
Bilgisayar Mühendisliği JavaScript Ders Notları
1 const gonder = document . getElementById (" gonder ") ;
2 const ad = document . getElementById (" ad ") ;
3 const sonuc = document . getElementById (" sonuc ") ;
4
5 gonder . addEventListener (" click " , function () {
6 sonuc . textContent = " Merhaba " + ad . value ;
7 }) ;
Listing 37: Formdan veri alma
19. Fonksiyonlarla DOM Kullanımı
Fonksiyonlar ile sayfa etkileşimi birlikte kullanılabilir.
1 function selamla ( isim ) {
2 return " Merhaba " + isim ;
3 }
4
5 const gonder = document . getElementById (" gonder ") ;
6 const ad = document . getElementById (" ad ") ;
7 const sonuc = document . getElementById (" sonuc ") ;
8
9 gonder . addEventListener (" click " , function () {
10 sonuc . textContent = selamla ( ad . value ) ;
11 }) ;
Listing 38: Fonksiyon ve DOM kullanımı
20. Zamanlayıcılar
Belirli bir süre sonra veya belirli aralıklarla çalışan işlemler için zamanlayıcılar kullanılır.
20.1. setTimeout
1 setTimeout ( function () {
2 console . log ("3 saniye sonra calisti ") ;
3 } , 3000) ;
Listing 39: setTimeout örneği
11
Bilgisayar Mühendisliği JavaScript Ders Notları
20.2. setInterval
1 let sayac = 0;
2
3 setInterval ( function () {
4 sayac ++;
5 console . log ( sayac ) ;
6 } , 1000) ;
Listing 40: setInterval örneği
21. Hata Ayıklama
Kod çalışırken oluşan hataları anlamak için konsol çıktıları ve hata mesajları kullanılır.
1 let ad = " Ahmet ";
2 console . log ( isimm ) ;
Listing 41: Tanımlanmamış değişken hatası
Bu örnekte isimm adlı değişken tanımlanmamıştır. JavaScript hata verir ve hatanın bu-
lunduğu satır bilgisi konsolda görüntülenir.
22. Asenkron Yapıya Giriş
Bazı işlemler hemen tamamlanmaz. Özellikle internetten veri alma işlemleri belirli bir
süre gerektirir. Bu tür işlemler asenkron yapı ile ilgilidir.
1 fetch (" https :// jsonplaceholder . typicode . com / users /1")
2 . then ( response = > response . json () )
3 . then ( data = > console . log ( data ) ) ;
Listing 42: fetch ile veri alma örneği
Bu örnekte internet üzerinden veri alınmakta, gelen veri JSON biçiminden dönüştürül-
mekte ve sonuç ekrana yazdırılmaktadır.
23. Özet
JavaScript’te temel kod yapıları; değişkenler, veri tipleri, operatörler, koşullar, döngüler,
fonksiyonlar, diziler, nesneler, metin işlemleri ve matematiksel yapılar etrafında şekillenir.
Bu yapılara ek olarak DOM, olaylar ve form işlemleri sayesinde JavaScript web sayfaları
12
Bilgisayar Mühendisliği JavaScript Ders Notları
ile etkileşim kurar. Zamanlayıcılar ve asenkron yapılar ise daha ileri düzey uygulamaların
temelini oluşturur.
Bu yapıların birlikte kullanılmasıyla etkileşimli, dinamik ve işlevsel web uygulamaları
geliştirilebilir.
13