Javascript Programlama 2024-2025 Final Soruları

JavaScript’in Temel Söz Dizimi ve Kontrol Yapıları

JavaScript, web geliştirmede kullanılan temel bir programlama dilidir. Değişken ve sabit tanımlamada temel kurallar bulunur. Değişkenlere (`let`, `var`) değer atamak zorunlu değilken ve değer atanmayan değişkenler `undefined` olarak değerlendirilirken, sabitlere (`const`) tanımlanırken değer atamak zorunludur. Değişkenlere atanan değerin veri tipi daha sonra değiştirilebilir.

Program akışını kontrol etmek için döngüler ve koşul yapıları kullanılır:

• Döngüler: Döngünün istenen bazı sayaç değerlerinde çalışmayıp bir sonraki adıma geçmesi için continue komutu kullanılır. 1’den 20’ye kadar olan sayıları toplayan doğru bir for döngüsü şu şekildedir:

  let toplam = 0;
  for (i = 1; i <= 20; i++) {
    toplam = toplam + i;
  }
  document.write(toplam);

• Koşul Yapıları: switch deyimindeki ifade hiçbir case değeriyle eşleşmezse kod hata vermez; eğer varsa default bloğundaki kod çalıştırılır. if-else yapısı, ternary operatörü ile daha kısa yazılabilir. Örneğin:

  var age = 20;
  var message = (age >= 18) ? "Yetişkin" : "Çocuk";
  console.log(message);

JavaScript’te mantıksal operatörler de önemli bir yer tutar. Örneğin, `a = -1` ve `b = 1` iken `(a !== -b || -2 * a > b)` ifadesi `true` sonucunu verir.

Fonksiyonlar, Sınıflar ve Kalıtım

JavaScript, modern programlama paradigmalarını destekler.

• Fonksiyonlar: Bir fonksiyonun bir değişkenin değeri olarak tanımlanmasına “fonksiyon ifadesi” (function expression) denir. Örneğin, let topla = function (a, b) { return a + b; }; bir fonksiyon ifadesidir. İsmi olmayan anonim fonksiyonlar, değişkenlere değer olarak atanabilir veya başka bir fonksiyona parametre olarak verilebilir; ancak başka bir fonksiyonun içinde tanımlanmak zorunda değildirler.
• Sınıflar ve Kalıtım: Kalıtım (inheritance) yapısında, çocuk sınıfın içinden ebeveyn sınıfın bir metodunu veya kurucusunu çağırmak için super anahtar kelimesi kullanılır.

Diziler ve Dizi Metotları

Diziler, birden fazla değeri tek bir değişkende tutmak için kullanılır.

• Eleman İşlemleri: Dizinin başına eleman eklemek için unshift() metodu kullanılır. Bir dizideki elemanı silmek için delete operatörü kullanıldığında, o elemanın yeri boş (`empty`) kalır ve dizinin uzunluğu değişmez. Örneğin:

  let dizi = [3, 12, 8, "deneme", -4, "JS"];
  delete dizi[2];
  console.log(dizi);
  // Çıktı: [3, 12, empty, 'deneme', -4, 'JS']

• Elemanlara Erişim: Dizilerde olmayan bir indekse erişilmeye çalışıldığında (örneğin 6 elemanlı bir dizide 6. indekse), kod hata vermez, undefined değeri döndürülür. Dizide belirtilen indisteki elemanı döndüren metotlardan biri de dizi.at(indis) metodudur. Dizi elemanları içinde belirli bir değerin olup olmadığını kontrol eden ve `true` veya `false` dönen metot ise includes() metodudur.

DOM (Belge Nesne Modeli) ve Olay Yönetimi

DOM (Document Object Model), HTML ve XML belgeleri için bir programlama arayüzüdür. Kısaltmanın doğru açılımı “Document Object Model”dir, “Document Oriented Model” değildir.

• DOM Manipülasyonu: JavaScript DOM aracılığıyla HTML elemanlarını seçebilir ve değiştirebilir. “fiyat” isimli sınıfa sahip elemanları seçmek için document.getElementsByClassName("fiyat"); kullanılır. Bir HTML öğesinden belirtilen bir özelliği kaldırmak için element.removeAttribute(ozellik) metodu kullanılır. Bir HTML elemanının hemen öncesine yeni bir eleman eklemek için ise element.before() metodu kullanılır. Örneğin:

  const paragraf = document.createElement("p");
  paragraf.innerHTML = "İÜ AUZEF";
  const divim = document.getElementById("myDIV");
  divim.before(paragraf);

• Olay Yönetimi (Event Handling): Olay işleyiciler, kullanıcı etkileşimlerine yanıt vermek için kullanılır. “hedef” nesnesinin değerinin değişmesi (`change`) ve seçilmesi (`select`) olaylarını işlemek için hedef.addEventListener('change', 'select', function () {... }); kullanılır. Bir elemanın sürüklenebilir olmasını sağlamak için ise draggable özelliğinin `true` olarak ayarlanması gerekir. onmouseover (fare üzerine gelince) ve onmouseout (fare üzerinden ayrılınca) olayları, fare hareketlerine bağlı olarak elemanların stilini değiştirmek için kullanılabilir.

Web Protokolleri ve Tarayıcı Etkileşimleri

Web sayfaları, HTTP (Hypertext Transfer Protocol) aracılığıyla sunucu ve istemci arasında transfer edilir. Tarayıcıda (istemci) bir HTTP isteği gönderilir ve bu isteğe karşılık sunucudan bir HTTP cevabı alınır. JavaScript ile tarayıcı penceresinin kaydırma konumunu değiştirmek mümkündür. Sayfayı tam olarak 150 piksel yatay ve 50 piksel dikey konumuna kaydırmak için window.scrollTo(150, 50); kodu kullanılır.

1- Aşağıdaki seçeneklerin hangisinde olay işleyici kullanılarak “hedef” nesnesinin değerinin değişmesi ve seçilmesi olayları işlenmiştir?

A) hedef.addEventListener(‘change’, ‘select’, function () {… });
B) hedef.addEventListener(‘input’, ‘click’, function () {… });
C) hedef.addEventListener(‘input’, ‘select’, function () {… });
D) hedef.addEventListener(‘change’, ‘focus’, function () {… });
E) hedef.addEventListener(‘change’, ‘input’, function () {… });

Cevap : A) hedef.addEventListener(‘change’, ‘select’, function () {… });

Açıklama :

<div id="hedef" style="padding:16px;backg round-color:lightgray">
<h3>Web Tasarım ve Kodlama</h3>
</div>

2- Yukarıdaki HTML kodunda, “hedef” id’sine sahip elementin hemen öncesine yeni bir element eklemek için aşağıda verilen metodlardan hangisi kullanılır?

A) hedef.insertAfter(element);
B) hedef.after(element);
C) hedef.append(element);
D) hedef.before(element);
E) hedef.appendChild(element);

Cevap : D) hedef.before(element);

Açıklama : JavaScript’te, referans olarak alınan bir HTML elemanının hemen öncesine yeni bir eleman eklemek için `.before()` metodu kullanılır.

3

let dizi = [3, 12, 8, "deneme", -4, "JS"]
;delete dizi[2]; console.log(dizi);

Yukarıda verilen JavaScript kodunun çıktısı aşağıdaki seçeneklerden hangisinde doğru verilmiştir?

A) [3, 12, ‘deneme’, -4, ‘JS’]
B) [8, ‘deneme’, -4, ‘JS’]
C) [3, 12, 8, ‘deneme’, ‘JS’]
D) [3, ‘deneme’, -4, ‘JS’]
E) [3, 12, empty, ‘deneme’, -4, ‘JS’]

Cevap : E) [3, 12, empty, ‘deneme’, -4, ‘JS’]

Açıklama : `delete` operatörü, bir dizideki elemanı sildiğinde o elemanın yerine `undefined` bir değer koyar ve dizinin uzunluğunu değiştirmez. Bu yüzden `dizi[2]` (değeri 8 olan) silindiğinde, o pozisyonda bir boşluk (empty slot) oluşur.

4- DOM ile “fiyat” isimli sınıfa sahip form elemanlarını seçmek için aşağıdaki JavaScript kodlarından hangisi kullanılmalıdır?

A) document.getElementsByTagName(“fiyat”) ;
B) document.getElementById(“fiyat”);
C) document.getElementsByName(“fiyat”);
D) document.querySelector(“#fiyat”);
E) document.getElementsByClassName(“fiyat “);

Cevap : E) document.getElementsByClassName(“fiyat”);

Açıklama : HTML elemanlarını `class` (sınıf) isimlerine göre seçmek için `document.getElementsByClassName()` metodu kullanılır. Bu metod, belirtilen sınıfa sahip tüm elemanları içeren bir koleksiyon döndürür.

5- Aşağıdaki JavaScript kodlarından hangisi bir “fonksiyon ifadesi” olabilir?

A) function topla(a, b) { return a + b; }
B) (function(a, b) { return a + b; })();
C) let topla = (a, b) => { return a + b; };
D) function degerAl(a, b) { function topla(a, b) { return a + b; } }
E) let topla = function (a, b) { return a + b; };

Cevap : E) let topla = function (a, b) { return a + b; };

Açıklama : Fonksiyon ifadesi (function expression), bir fonksiyonun bir değişkenin değeri olarak tanımlanmasıdır. E seçeneğinde, isimsiz bir fonksiyon oluşturulup `topla` isimli bir değişkene atanmıştır, bu klasik bir fonksiyon ifadesi örneğidir.

6- JavaScript dilinde değişken ve sabitlerle ilgili aşağıdaki şıklardan hangisi yanlıştır?

A) Değişkenlere atanan değerin veri tipi daha sonra değiştirilebilir.
B) Sabitleri tanımlarken değer atamak zorunlu değildir.
C) Değer atanmayan değişkenler undefined olarak değerlendirilir.
D) Değişkenlerin veri tipini belirtmek zorunlu değildir.
E) Değişkenleri tanımlarken değer atamak zorunlu değildir.

Cevap : B) Sabitleri tanımlarken değer atamak zorunlu değildir.

Açıklama : JavaScript’te `const` anahtar kelimesi ile tanımlanan sabitlere, tanımlandıkları anda bir başlangıç değeri atanması zorunludur. Aksi takdirde kod hata verir. Bu nedenle B şıkkı yanlıştır.

7- Aşağıda verilen seçeneklerin hangisinde JavaScript dilinde 1’den 20’ye kadar (1 ve 20 dahil) olan sayıların toplamını ekrana yazdıran programın kodu yer almaktadır?

A)

let toplam = 0;
for (i = 1; i >= 20; i -= 1) { }i = i + toplam;
} document.write(toplam);

B)

let toplam = 0;
for (i = 1; i < 20; i++) { }toplam = toplam + i; 
} document.write(toplam);

C)

let toplam = 0; 
for (i = 20; i > 1; i -= 1) { }toplam = toplam + i;
} document.write(toplam);

D)

let toplam = 0;
for (i = 1; i >= 20; i -= 1) { }toplam = toplam + i;
} document.write(toplam);

E)

let toplam = 0;
for (i = 1; i <= 20; i++) { }toplam = toplam + i;
} document.write(toplam);

Cevap : E) let toplam = 0;
for (i = 1; i <= 20; i++) { toplam = toplam + i;
} document.write(toplam);

Açıklama : Doğru kod, toplam değişkenini 0’dan başlatmalı, döngüyü 1’den başlatıp 20’ye kadar (20 dahil) devam ettirmeli (`i <= 20`) ve her adımda sayacı bir artırmalıdır (`i++`). E seçeneği bu koşulları doğru bir şekilde sağlamaktadır.

8-

var age = 20; var message;
if (age >= 18) {
message = "Yetişkin";
} else {
message = "Çocuk"; }
console.log(message);

Yukarıdaki if-else koşul yapısının ternary operatörü eşleniği seçeneklerin hangisinde doğru biçimde verilmiştir?

A)

 var age = 20;
var message = (age >= 18) : "Yetişkin"
? "Çocuk"; console.log(message);

B)

 var age = 20;
var message = (age < 18) ? "Yetişkin" < "Çocuk";
console.log(message);

C)

 var age = 20;
var message = (age >= 18) ? "Yetişkin"
: "Çocuk"; console.log(message);

D)

 var age = 20;
var message = (age < 18) ? "Yetişkin" : "Çocuk";
console.log(message);

E)

 var age = 20;
var message = (age >= 18) ? "Çocuk" : "Yetişkin";
console.log(message);

Cevap : C)


var age = 20;
var message = (age >= 18) ? "Yetişkin"
: "Çocuk"; console.log(message);


Açıklama : Ternary operatör `(koşul) ? doğru_ise_değer : yanlış_ise_değer` yapısıyla çalışır. Orijinal kodda `age >= 18` koşulu doğru ise “Yetişkin”, yanlış ise “Çocuk” değeri atanır. Bu yapı C seçeneğinde doğru olarak verilmiştir.

9- JavaScript’te koşul yapıları ile ilgili aşağıdaki ifadelerden hangisi doğrudur?

A) Koşul yapılarında yalnızca nümerik değerler karşılaştırılabilir.
B) switch deyimindeki ifade hiçbir case değeriyle eşleşmezse kod hata vermez, varsa default bloğundaki kod çalıştırılır.
C) if-else if koşul yapısında hiçbir koşul sağlanmazsa kod hata verir.
D) if-else if koşul yapısında, eğer bir koşul sağlanırsa yalnızca o koşula ait kod bloğu çalıştırılır, fakat sonraki koşullar da kontrol edilir.
E) İkiden fazla durumun kontrol edilmesi gerektiğinde, her duruma ilişkin kodlar if-else koşul yapısıyla tanımlanabilir.

Cevap : B) switch deyimindeki ifade hiçbir case değeriyle eşleşmezse kod hata vermez, varsa default bloğundaki kod çalıştırılır.

Açıklama : `switch` yapısının çalışma prensibi, eğer kontrol edilen ifade hiçbir `case` bloğuyla eşleşmezse bir hata oluşmaması ve eğer tanımlanmışsa `default` bloğunun çalıştırılmasıdır. Bu ifade doğrudur.

10- JavaScript dilinde çocuk sınıfın içinden ebeveyn sınıfın bir metodunu veya kurucusunu çağırmak için kullanılan anahtar kelime aşağıdakilerden hangisidir?

A) extends
B) constructor
C) super
D) this
E) class

Cevap : C) super

Açıklama : Kalıtım (inheritance) yapısında, alt sınıf (çocuk sınıf) içerisinden üst sınıfın (ebeveyn sınıf) kurucusunu (`constructor`) çağırmak için `super()`, metotlarını çağırmak için ise `super.metotAdi()` kullanılır. Bu nedenle doğru anahtar kelime `super`’dir.

11- Döngünün istenen bazı sayaç değerlerinde çalışmayıp bir sonraki sayaç değeriyle çalışmasına devam etmesi için aşağıdaki komutlardan hangisi kullanılır?

A) return
B) while
C) continue
D) break
E) foreach

Cevap : C) continue

Açıklama : `continue` komutu, bir döngü içerisinde kullanıldığında, o anki döngü adımının geri kalanını atlayarak bir sonraki adıma geçilmesini sağlar.

12- Aşağıdaki seçeneklerden hangisinde kısaltması verilen terimin açık adı yanlıştır?

A) IDE – Integrated Development Environment
B) HTML – Hyper Text Markup Language
C) DOM – Document Oriented Model
D) FTP – File Transfer Protocol
E) CSS – Cascading Style Sheets

Cevap : C) DOM – Document Oriented Model

Açıklama : DOM kısaltmasının doğru açılımı “Document Object Model” (Belge Nesne Modeli)’dir. “Document Oriented Model” ifadesi yanlıştır.

13- Web sayfaları aşağıdaki protokollerin hangisi aracılığıyla sunucu – istemci arasında transfer edilir?

A) DNS
B) HTML
C) FTP
D) HTTP
E) IMAP

Cevap : D) HTTP

Açıklama : Web sayfalarının ve diğer web kaynaklarının sunuculardan istemcilere (tarayıcılara) aktarılması için kullanılan standart protokol HTTP’dir (Hypertext Transfer Protocol).

14- JavaScript ile sayfayı tam olarak 150 piksel yatay ve 50 piksel dikey konumuna kaydırmak için aşağıdaki kod satırlarından hangisi kullanılmalıdır?

A) document.scrollTo(“150px”, “50px”);
B) window.scrollTo(150, 50);
C) window.moveTo(150, 50);
D) window.scrollBy(150, 50);
E) window.scroll(150px, 50px);

Cevap : B) window.scrollTo(150, 50);

Açıklama : `window.scrollTo(x, y)` metodu, sayfayı belirtilen mutlak koordinatlara kaydırır. Parametreler piksel cinsinden sayısal değerler olarak verilir, string olarak “px” eklenmez.

15-

let a = -1;
let b = 1;
console.log(a !== -b || -2 * a > b);

Yukarıda verilen JavaScript kodu çalıştırıldığında konsol çıktısı aşağıdakilerden hangisi olacaktır?

A) Boş çıktı verir.
B) true
C) false
D) null
E) undefined

Cevap : B) true

Açıklama : İfade `(a !== -b)` veya `(-2*a > b)` olarak değerlendirilir. `a=-1`, `b=1`, `-b=-1`’dir. `(a !== -b)` kısmı `(-1 !== -1)` olur ki bu `false`’tur. `(-2*a > b)` kısmı `(-2*-1 > 1)` yani `(2 > 1)` olur ki bu `true`’dur. `false || true` ifadesinin sonucu `true`’dur.

16-

let sayilar = [3, 8, 7, -6, 9]; 
sayilar.unshift(3); 
console.log(sayilar[6]);

Yukarıda verilen JavaScript kodu çalıştırıldığında konsol çıktısı aşağıdakilerden hangisi olacaktır?

A) undefined
B) null
C) Kod hata verir
D) 3
E) 9

Cevap : A) undefined

Açıklama : `unshift(3)` metodu, dizinin başına bir eleman ekler. Dizi `[3, 3, 8, 7, -6, 9]` haline gelir ve uzunluğu 6 olur. Dizilerin indeksleri 0’dan başlar, dolayısıyla bu dizinin son indeksi 5’tir. Olmayan bir indeks (`sayilar[6]`) sorgulandığında JavaScript hata vermez, `undefined` değerini döndürür.

17

function calc(a, b = 5) {
} return a * a - 2 * b + 1;
let a = 3; 
console.log(calc(a));

Yukarıda verilen JavaScript kodunun çıktısı aşağıdaki seçeneklerden hangisinde doğru verilmiştir?

A) 0
B) 1
C) -6
D) -8
E) -10

Cevap : A) 0

Açıklama :

<script>
var sayi1 = document.getElementsByName(“sayi1”);
sayi1.onmouseover = function (event) {

this.style.backgroundColor = “red”; }

sayi1.onmouseout = function (event) {
} this.style.backgroundColor = “brown”;

</script>

18- Yukarıda verilen JavaScript kodunun işlevi aşağıdaki seçeneklerin hangisinde verilmiştir?

A) Fare ile sayil isimli form elemanının üzerine gelindiğinde arka plan rengini kırmızı, fare üzerinden ayrıldığında ise kahverengi yapar.
B) Fare, sayil isimli form elemanının üzerinden ayrıldığında arka plan rengini kırmızı, fare ile üzerine gelindiğinde ise kahverengi yapar.
C) sayil isimli form elemanına çift tıklandığında arka planı kırmızı yapar, tek tıklandığında ise arka plan rengini kahverengi yapar.
D) Fare ile sayil isimli form elemanının üzerine basılı tutulduğunda kenarlık rengini kırmızı, bırakıldığında ise kahverengi yapar.
E) Fare ile sayil isimli form elemanının üzerine tıklandığında metin rengini kırmızı, bırakıldığında ise kahverengi yapar.

Cevap : A) Fare ile sayil isimli form elemanının üzerine gelindiğinde arka plan rengini kırmızı, fare üzerinden ayrıldığında ise kahverengi yapar.

Açıklama : Kod, `onmouseover` (fare üzerine gelince) olayında elemanın arkaplan rengini kırmızıya, `onmouseout` (fare üzerinden ayrılınca) olayında ise kahverengiye çevirir. Bu işlev A seçeneğinde doğru olarak tanımlanmıştır.

<div id="myDIV" style="background-color:l ightgray">
<h3>Web Tasarım ve Kodlama</h3>
</div>

19- Yukarıdaki div elemanından önce “İÜ AUZEF” içerikli bir paragraf ekleyen JavaScript kodu aşağıdakilerden hangisidir?

A)

 const paragraf = document.createElemen t("p");
paragraf.innerHTML = "İÜ AUZEF";
const divim = document.getElementById( "myDIV"); divim.insertBefore(paragraf);

B)

 const divim = document.getElementById( "myDIV");
const paragraf = document.createElemen t("p");
paragraf.innerHTML = "İÜ AUZEF"; divim.appendChild(paragraf);

C)

 const divim = document.getElementById( "myDIV");
const paragraf = document.createElemen t("p");
paragraf.innerHTML = "İÜ AUZEF"; divim.append(paragraf);

D)

 const paragraf = document.createElemen t("p");
paragraf.innerHTML = "İÜ AUZEF";
const divim = document.getElementById( "myDIV");
divim.before(paragraf);

E)

 const paragraf = document.createElemen t("p");
paragraf.innerHTML = "İÜ AUZEF";
const divim = document.getElementById( "myDIV");
divim.after(paragraf);

Cevap: D)

 const paragraf = document.createElemen t("p");
paragraf.innerHTML = "İÜ AUZEF";
const divim = document.getElementById( "myDIV");
divim.before(paragraf);

Açıklama : Önce `document.getElementById(“myDIV”)` ile `div` elemanı seçilir. Sonra `document.createElement(“p”)` ile paragraf oluşturulur ve `innerHTML` ile içeriği atanır. Son olarak, `divim.before(paragraf)` metodu ile yeni oluşturulan paragraf, `div` elemanının hemen öncesine eklenir.

20- JavaScript dilinde dizide belirtilen indisteki elemanı döndüren metod aşağıdakilerden hangisidir?

A) dizi.of(indis)
B) dizi.find(indis)
C) dizi.indexOf(deger)
D) dizi.at(deger)
E) dizi.with(indis, değer)

Cevap : D) dizi.at(deger)

Açıklama : `dizi[indis]` kullanımına ek olarak, `dizi.at(indis)` metodu da bir dizide belirtilen indeksteki elemanı döndürmek için kullanılır. Bu metodun avantajı, negatif indisleri de destekleyerek dizinin sonundan eleman seçmeye olanak tanımasıdır.