İstanbul Üniversitesi

Açık ve Uzaktan Eğitim Fakültesi

JAVASCRIPT PROGRAMLAMA
Doç. Dr. ZEKİ ÖZEN,

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 1 / 170
i
:
i
i
i
 İÇİNDEKİLER

1. Javascript Diline Giriş

2. Javascript Dilinin Temelleri

3. Koşul Yapıları

4. Döngü Yapıları

5. Diziler

6. Fonksiyonlar ve Sınıf Yapısı

7. Doküman Nesne Modeli

8. Javascrıpt Dilinde Olay

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 2 / 170
i
:
i
i
i
 1. Javascript Diline Giriş

Özlü Söz
“Öğrenebileceğiniz en felaket şey ilk programlama dilinizdir.”

– Alan Kay

Kazanımlar
1. Web sayfasının bileşenlerini bilir.

2. Web sayfasının çalışma prensiplerini bilir.

3. JavaScript dilinin genel özelliklerini bilir.

4. Web sayfasına JavaScript kodları entegre edebilir.

5. Visual Studio Code editöründe JavaScript kodu çalıştırabilir.

Birlikte Düşünelim
1. Web sayfaları nasıl çalışır?

2. İstemci-sunucu mimarisi nedir?

3. Web sayfası nelerden oluşur?

4. JavaScript dili web sayfaları için neden önemlidir?

5. JavaScript dili ile neler yapılabilir?

6. JavaScript dilinin kullanım alanları nelerdir?

7. JavaScript kodu nasıl çalıştırılır?

Başlamadan Önce
Bu kitabın başlangıç bölümü, Web teknolojisinin temel kavramlarına odaklanmıştır. İlk olarak internet ve Web teknolojileri hakkında bilgi verilmiştir.
Ardından bir Web sayfasının temel bileşenleri ve Web sayfalarının çalışma prensibi ele alınmıştır. Devamında JavaScript dilinin genel özellikleri ve
Web sayfalarında JavaScript kodunun yerleşimi ve JavaScript kodlarının çalıştırılması açıklanmıştır. Son olarak Visual Studio Code editörünün
kurulumu ve JavaScript kodlarken işe yarar uzantılar hakkında bilgi verilmektedir. Bu adımların tamamlanmasıyla okuyucular JavaScript diline giriş
yapmaya hazır olacaktır.

1.1. Web Teknolojisi

İnternet’in sağladığı hız, imkân ve avantajlar insanlar tarafından çok kısa sürede benimsendi ve buna bağlı olarak İnternet’in kullanımı ilk geliştirildiği
yıllardan itibaren hızla yaygınlaştı. Günümüzde İnternet’in günlük yaşamın ayrılmaz bir parçası haline geldiği rahatlıkla söylenebilir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 3 / 170
i
:
i
i
i
 İnternet TCP/IP protokolü kullanan, her birinin farklı IP adresine sahip bilgisayarların birbirleriyle iletişim kurmalarına imkân veren çok geniş bir
ağdır. İnterneti Web sayfalarıyla tanımış olsak da İnternet sadece Web sayfalarından ibaret değildir. Web (World Wide Web veya www), ağdaki
bilgisayarların HTTP (Hyper Text Transfer Protocol) protokolü üzerinden birbirleriyle etkileşimde olduğu İnternet kullanım alanlarından biridir.
Ağdaki kaynaklar (metin, video, ses, resim-görüntü, vb.) Web üzerinden erişime açılmaktadır. Böylece Web aracılığıyla bilgisayarlar arasında kaynak
paylaşımı ve bilgi alışverişi yapılabilmektedir (anon, 2024).

İnternet, Web teknolojisine (Hyper Text Transfer Protocol - HTTP) ilave olarak mail alma ve gönderme (Internet Message Access Protocol – IMAP,
Post Office Protocol – POP, Simple Mail Transfer Protocol - SMTP), dosya transferi (File Transfer Protocol - FTP), alan adı sistemi (Domain Name
System - DNS), güvenli giriş katmanı (Secure Sockets Layer – SSL) gibi çeşitli protokolleri barındırır (anon, 2024).

Web teknolojisinde sunucu (server) dediğimiz bilgisayarlarda önceden hazırlanmış statik HTML sayfaları istemci bilgisayarlara (client) HTTP
protokolü ile sunulmaktadır (MDN, 2024). Web sayfalarına erişmek için kullanılan özel programlara tarayıcı (browser) denmektedir. İstemci
bilgisayarlar tarayıcı aracılığıyla bir web sayfasına ziyaret isteği gönderirler. Web sunucusu bu isteğe cevap olarak istemciye istenilen sayfanın HTML
kodlarını veya istenilen kaynakları (her türlü formatta dosya) iletirler. İstemcideki tarayıcılar sunucunun gönderdiği HTML kodlarını alışık olduğumuz
web sayfası görünümüne dönüştürürler. Böylece istemci ve sunucu arasında bilgi alışverişi yapılmış olur (MDN, 2024) (Şekil 1).

Şekil 1: İstemci-sunucu mimarisi

HTML dosyaları statik (önceden hazırlanmış ve değişmeyen) yapıdadırlar. Bununla birlikte PHP, ASP, Python gibi diller ve veri tabanı bağlantılarıyla
dinamik Web sayfaları geliştirilmektedir. Bu kullanımda sunucu tarafında bu dillerin derleyici/yorumlayıcısı ve veri tabanı sunucusuyla üretilen
HTML kodu istemciye iletilmektedir.

1.2. Web Sayfası

Web sayfaları temelde üç bileşenden oluşur: İçerik, biçim/tasarım ve davranış/olay (Şekil 2). Bu bileşenler sırasıyla HTML, CSS ve JavaScript
dilleriyle sağlanır.

HTML (Hyper Text Markup Language - Hiper Metin İşaretleme Dili), web sayfasının yapı ve içeriğinin oluşturulduğu etiket/işaret dilidir.

CSS (Cascading Style Sheets), web sayfasını oluşturan yapı ve içeriğin görünüş, biçim, renk, büyüklük, hizalama gibi görünümlerinin ayarlandığı
dildir.

JavaScript ile kullanıcının web sayfasındaki her türlü yapı ve içerikle neler yapacağı ve nasıl etkileşime gireceği tanımlanır.

Özetle HTML dili sayfanın yapı ve içeriği ile, CSS bunların nasıl görüneceği ile ilgilenir. JavaScript diliyle kullanıcı ve web sayfası arasındaki
etkileşim tanımlanır.

Şekil 2: Web sayfasının bileşenleri

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 4 / 170
i
:
i
i
i
 Bir programlama dilinde yazılan kaynak kodlar, doğrudan çalıştırılamazlar. Bilgisayar sadece 0-1 rakamlarından anladığı için kaynak kodların
bilgisayarın (makinenin) anlayacağı dile çevrilmesi gerekir. Bu süreç ise temel olarak iki şekilde gerçekleşir: Derleme ve yorumlama (Özen, 2016).

Derleme, kaynak kodların tek seferde ve bir bütün halinde bilgisayarın anlayacağı dile çevrilmesi işlemidir. Kaynak kodu makine diline çeviren ve bu
iş için özel olarak tasarlanmış programlara derleyici (compiler) denir. C, C++ gibi diller derlenen dilleridir. Kaynak kod derlendikten sonra
çalıştırılabilir bir dosya üretilir.

Yorumlama ise kaynak kodların çalışabilmesi için yorumlayıcı (interpreter) adı verilen özel bir program tarafından yorumlanması işlemidir.
JavaScript, R, Perl, Ruby gibi diller yorumlanan programlama dillerine örnek olarak verilebilir. Kaynak kod yorumlandığında çalıştırılabilir dosya
üretilmez, bunun yerine çıktı üretilir. Yorumlanan dillerin bir diğer özelliği de kaynak kodlar tek seferde değil satır satır veya bir satırın herhangi bir
kısmı tek başına yorumlanabilir ve çıktısı edinilebilir.

Kimi programlama dillerindeki kaynak kodun makine koduna dönüşümünde hem derleyici hem de yorumlayıcı kullanılır. Bunlara örnek olarak C#,
Java, Python, PHP dilleri verilebilir. Bu dillerin kodları önce kendi derleyicileri tarafından bir ara forma dönüştürülür, daha sonra yorumlayıcı ara
forma dönüştürülen program bileşenlerini yorumlar ve böylece kodun çalışması sağlanır.

1.3. JavaScript Dilinin Genel Özellikleri

JavaScript, Web sayfalarını dinamik hale getirmek için kullanılan betik (script) dilidir. JavaScript 1995 yılında Netscape mühendisi Brendan Eich
tarafından geliştirilmiştir (W3Schools, 2024). İlk geliştirildiği yıllarda öncelikle Netscape tarayıcısı JavaScript dilini kullanmıştır. Zamanla JavaScript
dili ek özellikler ve yapılar kazanarak Web sayfalarının vazgeçilmez bileşeni olmuştur. Süreç içerisinde tarayıcı üreticileri JavaScript kodlarını hızlı
çalıştırabilmek için farklı yorumlamaları neticesinde tarayıcılar arasında uyumsuzluk sorunu baş göstermiştir. Bunun önüne geçmek için JavaScript
dilinin geliştirilmesi ve standartlarını belirleme işi ECMAScript (ES) vakfına devredilmiştir (Svekis, Putten ve Percival, 2021). ECMAScript en son
2023 yılında ES13 sürümü yayımlamıştır ve modern tarayıcılar son sürümdeki JavaScript kodlarını çalıştırmaktadır (Ecma International, 2023).

Programlama dillerinin popülerliğini çeşitli parametrelere göre ayda bir yayınladıkları ölçümlerle listeleyen TIOBE indeksine göre JavaScript dünyada
en çok kullanılan 6. programlama dilidir (TIOBE, 2024). Listeye bakıldığında ilk sıralardaki diller farklı platform ve amaçlar için kullanılmaktadır.
Buradan hareketle JavaScript, çok sayıda programlama dillerinin kullanıldığı Web teknolojisinin en popüler dilidir denilebilir.

JavaScript dilinin Java diliyle bir ilgisi yoktur. Java dili, masaüstü ve kurumsal yazılımlar geliştirmek için tasarlanmıştır. Fakat her iki dil C ailesinden
gelmektedir. Bu sebeple Java ve JavaScript dillerinin grameri (sözdizimi) birbirine benzemektedir.

JavaScript dili yorumlanan bir dildir (Crockford, 2008). JavaScript kodlarının çalışması için herhangi bir tarayıcı yeterlidir. Bunun dışında bir derleyici
gerektirmez. Kimi tarayıcılar JavaScript kodlarını daha hızlı çalıştırmak için kendi geliştirdikleri motorları kullanırlar. Örneğin Firefox tarayıcısı
SpiderMonkey isimli motoru; Chrome, Opera ve Edge tarayıcıları V8 motorunu; Safari tarayıcısı JavaScriptCore motorunu kullanmaktadır.

Tarayıcıların kurulu olduğu her sistemde ve platformda (cross-platform) JavaScript kodları çalışabilir. Bu sebeple JavaScript dili platform bağımsızdır.

JavaScript dili, web sayfalarının görünen yüzündeki/ön yüzdeki/ön uçtaki (front-end) bileşenlerle kullanıcının etkileşmesi için tasarlanmıştır
(Ackermann, 2022). HTML, CSS ve JavaScript kodlarından oluşan Web sayfaları kullanıcının (istemcinin) tarayıcısında çalıştırılır ve yorumlanır. Bu
sebeple JavaScript daha önce açıklandığı üzere istemci taraflı (client-side) çalışan bir dildir (Ackermann, 2022). Fakat son yıllarda geliştirilen ve
kullanımı giderek yaygınlaşan [Link] ile JavaScript dili arka uç (back-end) ve sunucu taraflı (server-side) programlama amacıyla da kullanılmaktadır
([Link], 2024). JavaScript dili aynı zamanda mobil uygulama geliştirmek için de kullanılır. Mobil uygulamalar her platform için (Android, Apple,
Windows vb.) o platformun yerel (native) mimarisine/diline göre ayrı ayrı geliştirilmektedir. Bu ise bir uygulama için çok fazla dil bilmeyi, personel
çalıştırmayı gerektirmektedir. Bu durumu değiştirmek amacıyla uygulamanın bir kere yazılıp her platformda çalışması için çeşitli yöntemler, yazılım
çerçeveleri (framework) ve diller geliştirilmiştir. JavaScript tabanlı React Native, [Link], Vue Native gibi frameworkler ile bir kere yazılan ve her
platformda çalışabilen mobil uygulamalar geliştirilebilir (Şekil 3).

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 5 / 170
i
:
i
i
i
 Şekil 3: JavaScript dili kullanım alanları

Web sayfasındaki elemanlara Doküman Nesne Modeli (Document Object Model – DOM) isimli arayüz ile erişim sağlanmakta ve içerik
manipülasyonu yapılmaktadır (Scott, MacDonald ve Powers, 2021). JavaScript dilinin gelişmiş DOM fonksiyonlarıyla sayfadaki herhangi bir içerik
kolayca manipüle edilebilir. Yani sayfada var olan bir bileşenin değeri değiştirilebilir, yeni bileşen eklenebilir veya silinebilir.

JavaScript dili fonksiyonel dildir. Fakat aynı zamanda sınıf (class), miras alma (Inhartitance), kapsülleme (Encapsulation), çok biçimlilik
(Polymorphism) gibi Nesneye Yönelik Programlama (Object Oriented Programming – OOP) prensiplerini destekler (Ackermann, 2022). Böylece
JavaScript kodları tekrar kullanılabilir.

JavaScript, tip kontrolü zayıf bir dildir. Değişken tanımlarken veri tipi belirtmek zorunlu değildir. JavaScript dili, değişkenin değerine göre veri tipini
belirler (Svekis ve diğerleri, 2021).

JavaScript, büyük-küçük harfe duyarlıdır. Yani aynı harf sıralamasıyla fakat birinde küçük birinde büyük tanımlanan değişken, fonksiyon vb.
birbirinden farklıdır. Aşağıda örneklenen numara ve NUMARA değişkenleri birbirinden farklı değişkenlerdir.

Zorunluluk olmasa da her komutun bitiminde noktalı virgül operatörü ; kullanılır. Böylece JavaScript motoru komutları birbirinden ayırır ve sırayla
çalıştırır. Ayrıca her bir satır JavaScript tarafından deyim ayıracı olan noktalı virgül gibi değerlendirilir.

JavaScript, basit bir sözdizime sahip ve öğrenmesi kolay bir dildir. Web ve mobil uygulama geliştirme amaçlarıyla kullanılması sayesinde internette
JavaScript ile ilgili çok zengin öğrenme kaynakları bulunmaktadır.

İlk JavaScript Programı [Link]("Hello World!");

Girdi – çıktı komutları

[Link]

[Link]

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 6 / 170
i
:
i
i
i
 Alert

1.4. JavaScript Kodlarını Çalıştırma

JavaScript kaynak kod dosyaları.js uzantılıdır. Tarayıcılar JavaScript kodunu doğrudan çalıştıramaz, bu sebeple JavaScript kodları HTML etiketleri
içerisinde verilmelidir veya tarayıcının konsolunda JavaScript kodları çalıştırılabilir.

HTML kodunda içe aktarılan [Link] isimli JavaScript kaynak kod dosyasının içeriği ise aşağıda verilmiştir. Dikkat edilirse [Link] dosyasında
<script> etiketleri yoktur, dosyada doğrudan JavaScript kodu verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 7 / 170
i
:
i
i
i
 Üçüncü yöntem olarak HTML etiketleri arasında javascript: başlangıç deyimiyle JavaScript kodlarını çalıştırmak da mümkündür. Aşağıda verilen
örnekte uyari_ver isimli butonun click olayında web sayfası bir mesaj penceresinde “JavaScript Programlama” mesajını görüntüleyecektir.

Son olarak web tarayıcılarının konsollarında JavaScript kodları çalıştırılabilir. Chrome, Firefox ve Edge tarayıcılarında F12 tuşuna basıldığında
aşağıdaki ekranda verilen Geliştirici Araçları (Developer Tools) paneli açılacaktır. Bu panelin Konsol (Console) sekmesinde JavaScript kodları
yazılıp Enter tuşuna basıldığında tarayıcı JavaScript kodunu çalıştıracaktır.

Eğer konsolda bu örnekteki gibi tek satırlı değil birden fazla satırdan oluşan JavaScript kodları çalıştırılacaksa her bir kod satırından sonra Shift +

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 8 / 170
i
:
i
i
i
 Enter tuşlarına basılmalı ve sonraki satıra geçilmelidir. En son satır yazıldıktan sonra Enter tuşuna basarak tüm satırların çalıştırılması sağlanır.
Aşağıda bununla ilgili örnek verilmiştir. Konsola aşağıdaki üç satırlık JavaScript kodları yazılmış ve akabinde Enter tuşuna basılmıştır.

Bu kodların çıktısı aşağıda verilmiştir.

Konsol ekranını açmanın ikinci yöntemi Ayarlar butonuna

basarak Diğer araçlar -> Geliştirici araçları menüsünü tıklamaktır (Chrome için).

Üçüncü yöntem ise tarayıcı açıkken bir sayfada sağ tıklayıp çıkan menüde İncele (Inspect) menüsüne tıklamaktır.

1.5. Visual Studio Code Editörünü Kurma

JavaScript kodlamak için bir kodlama editörü ve program çıktılarının gözlemlenebilmesi için bir tarayıcı gereklidir. Basit bir metin editörüyle de
herhangi bir programlama dili kodlanabilir. Fakat Bütünleşik Geliştirme Ortamları (Integrated Development Environment – IDE) adı verilen özel
kodlama editörleri kod yazarken öneride bulunabilir, kodu otomatik tamamlayabilir, yanlış yazılan kodları eşzamanlı olarak anında gösterebilir,
kaynak kodu makine diline dönüştüren derleyici ve/veya yorumlayıcı barındırırlar. Editörlerin sağladığı bunlar ve benzeri çok sayıda özellikler
programcıya hız, verimlilik, esneklik ve kolaylık sağlamaktadır.

En çok tercih edilen JavaScript kodlama editörleri olarak Visual Studio Code, Atom, WebStorm, Sublime Text, NetBeans ve Eclipse sayılabilir. Bu
kitap kapsamında Visual Studio Code (VS Code) editörü kullanılmıştır. [Link] adresinden işletim sistemine uygun
indirilen dosyaya çift tıklandıktan sonra olarak Lisans Sözleşmesinin kabul onayının istendiği ekran çıkacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 9 / 170
i
:
i
i
i
 Onayın ardından Visual Studio Code editörünün kurulacağı klasör sorulacaktır.

Çıkan ekranda program kısayolunun Başlat Menüsüne ekleneceği yol seçilmektedir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 10 / 170
i
:
i
i
i
 Gelen ekranda son iki seçenek kullanım kolaylığı sağlayacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 11 / 170
i
:
i
i
i
 Son ekranda kuruluma başlamak için Install (Yükle) butonuna tıklamak gerekmektedir.

Kurulumun bitmesinin ardından Visual Studio Code editörü kullanıma hazırdır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 12 / 170
i
:
i
i
i
 Kurulum bitiminde program açıldığında editörün görünüm temasının seçilmesi istenmektedir.

Arzuya göre koyu veya açık tonda tema seçenekleri bulunmaktadır. Göz sağlığı açısından arka planı koyu temaların tercih edilmesi tavsiye
edilmektedir.

Kurulum tamamlandıktan sonra Visual Studio Code editöründe JavaScript kodu çalıştırabilmek için öncelikle bir HTML sayfası oluşturulmalıdır.
Visual Studio Code editörü açıldığında “Hoş Geldiniz” ekranında iken aşağıdaki adımlar sırayla yapılmalıdır.

1.

Klasör Açma butonuna tıklanır. Dosyaların kaydedileceği klasör seçilir.

2.

Yeni Dosya butonuna tıklanır. Oluşturulacak HTML sayfasına isim verilir.

3. Yeni bir HTML şablonunu hızlıca oluşturmak için SHIFT + 1+ Enter tuşlarına basılır.

Bu işlemden sonra Visual Studio code editörü aşağıdaki HTML şablonunu oluşturacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 13 / 170
i
:
i
i
i
 JavaScript diliyle kodlama yaparken hız ve üretkenlik kazandıran birkaç uzantının (eklentinin) Visual Studio Code editörüne kurulması tavsiye edilir.
Visual Studio Code açıkken sol alt tarafta yer alan dişli butonuna ve ardından Uzantılar menüsüne tıklandığında Visual Studio Code
Marketplace uzantı arama ve kurma ekranı gelecektir. Bu ekranda arzu edilen uzantılar arandıktan sonra listelenenler arasında istenen uzantı seçilir ve
açılan ekranda Yükle butonuna basılarak kurulur.

ESLint

ESLint uzantısı, önceden yapılandırılmış kurallara dayalı olarak JavaScript kodunu tarayarak analiz eder ve geliştiriciye kodla ilgili iyileştirme
uyarılarında bulunur.

JavaScript (ES6) code snippets

Dilde yerleşik kodlama yapılarının hızlıca yazılmasına imkân verir. Örneğin JavaScript dilindeki for..in döngüsünün sözdizimi aşağıda verilmiştir.

Programcı for..in döngüsünü kullanmak için bu kodları değişkenlere istediği isimleri vererek yazmak zorundadır. JavaScript (ES6) code
snippets eklentisi sayesinde programcı editörde fin yazıp Entera bastığında yukarıda verilen kod otomatik olarak üretilecektir. Programcı bu örnekte
sadece değişkenleri ihtiyacına göre değiştirdiğinde kodu kullanabilecektir. Bu ve benzeri kodlama kısayollarına uzantının dokümantasyonundan
bakılabilir.

Live Server

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 14 / 170
i
:
i
i
i
 Editörde yazılan HTML kodlarını görüntülemek ve sayfadaki JavaScript kodlarını çalıştırmak için tarayıcıda HTML sayfasının kaydedildiği klasörde
HTML uzantılı dosya çift tıklanmalı veya dosya tarayıcıya sürüklenip bırakılmalıdır. Böylece web sayfası tarayıcıya görüntülenecektir. Fakat kodda
yapılan her değişiklik sonrası sürekli tarayıcıya dönüp web sayfasının son haline bakmak hem meşakkatli hem de bezdirici olabilmektedir. Live Server
eklentisi lokal bir sunucu üzerinden Web sayfasını tarayıcıda görüntüler. Böylece programcı kodda her yaptığı değişiklik sonrası tarayıcıda sayfayı
açmak ve yenilemek zorunda kalmaz. Eklentinin kullanımı da oldukça basittir. Programcı HTML sayfasının kodlandığı editör ekranında sağ tıklayıp
Open with Live Server menüsüne tıkladığında veya Alt + L ve ardından Alt + O tuşlarına bastığında Live Server eklentisi tarayıcıda sayfanın
görüntülendiği yeni bir sekme açar ve web sayfasında/JavaScript kodunda yapılan değişiklik anında tarayıcıda açılan bu sekmeye yansıtılır.

Bölüm Özeti
Web sayfaları içerik, biçim ve eylem katmanlarından oluşur. İçerik ve yapı HTML ile oluşturulurken CSS ile içeriğin görünümü belirlenir, JavaScript
diliyle de kullanıcının Web sayfasıyla etkileşimi kodlanır. JavaScript dili, Web teknolojilerinde en çok kullanılan ve en popüler programlama dilidir.

JavaScript dilinin söz dizimi basit, öğrenmesi ve kodlaması kolaydır. Büyük-küçük harfe duyarlı, fonksiyonel fakat aynı zamanda çeşitli Nesne
Yönelik Programlama prensiplerini de desteklemektedir. JavaScript tip-güvenli değildir. Değişken ve sabitler tip bildirilmeden tanımlanabilir.

JavaScript ön-uç etkileşimi için tasarlanmışken son yıllarda [Link] ile arka-uç programlama amacıyla da kullanılmaktadır. Ayrıca JavaScript diliyle
geliştirilen React Native, Vue Native gibi frameworkler ile mobil uygulamalar da geliştirilmektedir.

JavaScript dilinin çok amaçlı kullanımı dilin popülerliğini de artırmaktadır. Bu sebeple çok sayıda editör JavaScript diliyle kodlama yapabilme
yeteneğini edinmiştir. Kitap kapsamında basit, hızlı ve kolay kullanım sebebiyle Visual Studio Code editörü tercih edilmiştir.

Kaynakça
Ackermann, P. (2022). JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming (First Edition.). Bonn ; Boston:
Rheinwerk Computing.

anon. (2024). Internet Technologies—Quick Reference Guide. [Link]

adresinden erişildi.

Crockford, D. (2008). JavaScript: The Good Parts: The Good Parts (First Edition.). Beijing Köln: O’Reilly Media.

Ecma International. (2023). ECMA-262. Ecma International. [Link]

adresinden erişildi.

MDN. (2024). Introduction to the server side—Learn web development | MDN. [Link]
side/First_steps/Introduction adresinden erişildi.

[Link]. (2024). [Link]—About [Link]®. 13 Mart 2024 tarihinde [Link] adresinden erişildi.

Özen, Z. (2016). Kimlik Doğrulaması için Tuş Vuruş Dinamiklerine Dayalı Bir Güvenlik Sisteminin Yapay Sinir Ağları ile Geliştirilmesi. (Doktora
Tezi).

Scott, A., MacDonald, M. ve Powers, S. (2021). JavaScript Cookbook: Programming the Web (3rd edition.). Beijing Boston Farnham Sebastopol
Tokyo: O’Reilly Media.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 15 / 170
i
:
i
i
i
 Svekis, L. L., Putten, M. van ve Percival, C. B. R. (2021). JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun,
interactive, and dynamic web apps, games, and pages. Erscheinungsort nicht ermittelbar: Packt Publishing.

TIOBE. (2024). TIOBE Index. TIOBE. 12 Mart 2024 tarihinde [Link] adresinden erişildi.

W3Schools. (2024). JavaScript History. [Link] adresinden erişildi.

Ünite Soruları

Soru-1 :

Aşağıdaki seçeneklerden hangisinde HTTP’nin açılımı doğru bir şekilde verilmiştir?

(Çoktan Seçmeli)

(A) Hyper Transfer Text Protocol

(B) Hyper Text Transmission Protocol

(C) Hyper Text Transfer Protocol

(D) Hyper Text Text Protocol

Hyper Transfer Transmission Protocol

Cevap-1 :

Hyper Text Transfer Protocol

Soru-2 :

Aşağıdaki protokollerden hangisi dosya transferi için kullanılır?

(Çoktan Seçmeli)

(A) UDP

(B) FTP

(C) TCP

(D) SMTP

HTTP

Cevap-2 :

FTP

Soru-3 :

Aşağıdaki seçeneklerden hangisi yanlıştır?

(Çoktan Seçmeli)

(A) Sunucu (server) statik HTML sayfalarını barındırır.

(B) Bir HTML sayfası, istemci bilgisayarlara (client) HTTP protokolü ile sunulur.

(C) Tarayıcı (browser), bir web sayfasına erişmek için kullanılan özel programdır.

(D) İstemci bilgisayarlar tarayıcı ile bir web sayfasına ziyaret isteği gönderir.

(E) Sunucu, istemciden gelen isteğe yalnızca .html uzantısına sahip dosyaları döndürür.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 16 / 170
i
:
i
i
i
 Cevap-3 :

Sunucu, istemciden gelen isteğe yalnızca .html uzantısına sahip dosyaları döndürür.

Soru-4 :

Bir web sayfasının yapı ve içeriğinin görünüş ve biçimi aşağıdakilerden hangisi aracılığı ile sistematik biçimde düzenlenebilir?

(Çoktan Seçmeli)

(A) CSS

(B) HTML

(C) URL

(D) HTTP

FTP

Cevap-4 :

CSS

Soru-5 :

Aşağıdakilerden hangisi JavaScript dilinin temel özelliklerinden biri değildir?

(Çoktan Seçmeli)

(A) JavaScript sadece Windows platformunda çalışır.

(B) Tarayıcıda çalışabilir ve istemci tarafı betik dili olarak kullanılabilir.

(C) Netscape mühendisi Brendan Eich tarafından geliştirilmiştir.

(D) Nesneye yönelik programlama prensiplerini destekler.

JavaScript dili CSS ve HTML ile birlikte web geliştirme sürecinde kullanılan bir dildir.

Cevap-5 :

JavaScript sadece Windows platformunda çalışır.

Soru-6 :

Aşağıdakilerden hangisi JavaScript tabanlı bir yazılım çerçevesi değildir?

(Çoktan Seçmeli)

(A) React Native

(B) jQuery

(C) Vue Native

(D) RStudio

Angular

Cevap-6 :

RStudio

Soru-7 :

Bir HTML sayfasına JavaScript kodları aşağıdaki etiketlerden hangisi ile eklenebilir?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 17 / 170
i
:
i
i
i
 (A) <javascript></javascript>

(B) <jquery></jquery>

(C) <js></js>

(D) <query></query>

(E) <script></script>

Cevap-7 :

<script></script>

Soru-8 :

[Link] adlı JavaScript dosyası aşağıdaki seçeneklerden hangisi ile web sayfasında kullanılabilir?

(Çoktan Seçmeli)

(A) <javascript file="[Link]"></javascript>

(B) <javascript src="[Link]"></javascript>

(C) <script src="[Link]"></script>

(D) <script file="[Link]"></script>

<script sourcefile="[Link]"></script>

Cevap-8 :

<script src="[Link]"></script>

Soru-9 :

Aşağıdakilerden hangisi bir JavaScript IDE’si (kodlama editörü) değildir?

(Çoktan Seçmeli)

(A) Visual Studio Code

(B) Atom

(C) WebStorm

(D) JupyterNotebook

Sublime Text

Cevap-9 :

JupyterNotebook

Soru-10 :

“Visual Studio Code editöründe JavaScript kodu çalıştırabilmek için öncelikle .js uzantılı … dosyası oluşturulmalıdır.” ifadesinde … ile gösterilen
yere gelebilecek uygun seçenek aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) JavaScript

(B) HTML

(C) CSS

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 18 / 170
i
:
i
i
i
 (D) FTP

HTTP

Cevap-10 :

JavaScript

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 19 / 170
i
:
i
i
i
 2. Javascript Dilinin Temelleri

Özlü Söz
“Kariyer hedefleriniz ne olursa olsun kodlamayı öğrenmek faydalıdır.”

– Arianna Huffington

Kazanımlar
1. JavaScript’in temel kavramlarını öğrenir.

2. JavaScript’te kullanılan anahtar kelimeleri tanır.

3. Kodun okunabilirliğini artırmak için yorum satırları ekleyebilir.

4. Değişkenlerin tanımlanması, kapsamı ve kullanımı hakkında bilgi sahibi olur.

5. Nümerik, dizge ve boolean gibi farklı veri değerlerini bilir.

6. JavaScript’te kullanılan farklı operatörleri tanır ve kullanır.

7. Operatörlerin önceliği ve nasıl kullanıldığı hakkında bilgi sahibi olur.

8. JavaScript’te kullanılan temel veri tiplerini (sayılar, dizgeler, boolean) tanır ve kullanır.

Birlikte Düşünelim
1. Anahtar kelimelerin görevi nedir?

2. Yorum satırları neden kullanılır ve programcıya ne gibi avantajlar sağlar?

3. Tanıtıcılar nedir ve JavaScript’te nasıl kullanılırlar?

4. Nümerik değerlerin kullanım alanları nelerdir?

5. Dizge değerler nasıl tanımlanır ve kullanılır?

6. Boolean değerlerin kullanımı hakkında bir örnek verin.

7. Değişkenler ve sabitler arasındaki fark nedir? Hangi durumlarda hangisini kullanmak gerekir?

8. Değişkenlerin kapsamı nedir? Bir değişkenin kapsamı ve görünürlüğü ne demektir?

9. Atama operatörü nedir ve nasıl kullanılır?

10. İşaret operatörleri ve aritmetik operatörler arasındaki farkları açıklayın.

11. Önden ve sondan artırma operatörlerinin kullanım alanları nelerdir?

12. Karşılaştırma operatörleri hangi durumlarda kullanılır? Birkaç örnek veriniz.

13. Mantıksal operatörler nelerdir ve nasıl kullanılır?

14. Operatör önceliği ne anlama gelir? Nasıl kullanılır?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 20 / 170
i
:
i
i
i
 15. JavaScript dilinde hangi veri tipleri bulunur? Her birinin kullanım alanlarını açıklayınız.

Başlamadan Önce
Bu bölümde öncelikle JavaScript dili ve kod mimarisine dair kısa bir giriş yapılmıştır. Ardından dilin anahtar kelimeleri hakkında bilgi verilmiştir.
Kodun okunabilirliğini artırmak için yorum satırlarının kullanımı ele alınmıştır. Tanıtıcı kavramı açıklanmış, değerler başlığında farklı veri türlerinin
(nümerik, dizge, boolean) kullanımı örneklenmiştir. Değişkenlerin kapsamı ve nasıl kullanıldığına dair örnekler verilmiştir. Operatörler konusunda
atama, aritmetik, karşılaştırma ve mantıksal ve diğer operatörler açıklanmış ve operatör önceliği ele alınmıştır. Son olarak JavaScript’te kullanılan
temel veri tipleri (sayılar, dizgeler, boolean) ve bunların nasıl kullanıldığı örneklenmiştir.

2.1. Giriş
Yazım dilinin harf, kelime ve cümlelerden oluşması gibi kaynak kodlar da kendi içinde anlamı olan sembol, kelime ve yapıların belirli bir kural
dahilinde yazılmasıyla oluşur. Yazıdaki satırların vazifesini programlama dillerinde kod satırları görür. Benzer şekilde çok satırdan oluşan
paragrafların programlama dillerindeki muadili kod bloklarıdır denebilir. Kod bloklarını birbirinden ayırmak için paragraftaki girinti yerine süslü
parantezler {} kullanılır. Fakat paragraf içinde paragraf olamazken kod blokları iç içe kullanılabilir.

Aşağıda verilen JavaScript kodunda süslü parantezler içinde if ve else kod bloklarının olduğu görülebilir. Kaynak koddaki girinti ve çıkıntılar, kod
satırları arasında hiçbir kod içermeyen boş satırlar, kod ifadeleri arasındaki boşluklar JavaScript yorumlayıcısı için önemli değildir. Fakat
programcının kodu kolayca okuması için yani kodun okunurluğunu artırmak için girinti ve boşluklar kullanılmalıdır. Visual Studio Code editörü, bir
kod dosyası açıkken Shift + Alt + F tuşlarına basıldığında kaynak kodun okunurluğunu artırmak için biçimlendirir.

Programlama dillerinde bir değeri olan veya çalıştırıldığında bir değer döndüren en kısa kod parçacıklarına ifade (expression) denir. Örneğin aşağıdaki
kodda a = 2, b = 8, a + b ve c > 0 ayrı ayrı birer ifadedir.

Tek başına çalıştırıldığında bir iş yapan kod kısımlarına ise deyim (statement) denir. Aşağıdaki kodda değişken bildirimi ve değer atamasının yapıldığı
let a = 2; let b = 8; iki değişkenin değerinin toplanıp c isminde başka bir değişkene atandığı let c = a + b; birer deyimdir. Ayrıca if koşulu, else
deyimi, konsol ekranına bir değeri çıktılamayı sağlayan [Link](c); metodu birer deyimdir.

Yine yazım dilinde kelimelerin isim, sıfat, fiil gibi işlevlerine göre sınıflandırılmasına benzer şekilde programlama dillerinde de kaynak kodu oluşturan
bileşenler (sembol, sembol çiftleri, kelime ve kelime grupları) işlevlerine göre sınıflandırılmaktadır. JavaScript dilini oluşturan bileşenler işlevlerine
göre aşağıda ayrı başlıklar halinde ele alınmıştır.

2.2. Anahtar Kelimeler

Anahtar kelimeler, programlama dilinde tanımlı ve kendine ait işlevi olan özel kelimelerdir. Bu sebeple anahtar kelimeler tanıtıcı olarak kullanılamaz
yani bir değişkene, sabite, fonksiyona veya sınıf gibi yapılara isim olarak verilemez.

JavaScript dilinde tanımlı ECMAScript 5 ve 6 uyumlu anahtar kelimeler Tablo 1’de verilmiştir(ECMAScript, 2023).

Tablo 1: JavaScript anahtar kelimeleri

await break case catch class

const continue debugger default delete
do else enum export extends
false finally for function if
implements import in instanceof interface

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 21 / 170
i
:
i
i
i
 let new null package private
protected public return super switch
static this throw try true
typeof var void while with
yield

2.3. Yorum Satırları

Derleyiciler veya yorumlayıcılar kaynak kodları satır satır değerlendirirler ve makine koduna çevirirler veya çıktı olarak sunarlar. Fakat kimi zaman
kaynak kod içerisinde bazı kod satırlarının ne yaptığını açıklamak gerekebilir. Haliyle bu satırların derleyici veya yorumlayıcı tarafından
değerlendirilmemesi gerekmektedir. Yorum satırları tam olarak bu işi yerine getirirler; kaynak kod içerisinde kodun işleyişi ve çalışmasıyla ilgili
programcının yazdığı açıklamaları derleyicinin veya yorumlayıcının çalıştırmamasını sağlarlar (Flanagan, 2020). Derleyici yorum satırıyla
karşılaştığında o kısmı atlar ve hiç değerlendirmeye almaz.

JavaScript dilinde tek satırlı ve çok satırlı yorum olmak üzere iki şekilde yorum satırı yapılabilmektedir.

Tek satırlı yorum yan yana iki ters bölü ile // ile yapılmaktadır. Bundan itibaren satır sonuna kadar yazılanları JavaScript yorumlayıcısı dikkate
almayacaktır. Bir editör ile kodlama yapılıyorsa tek satırlı yorum ile yazılanların rengi normal kod satırlarındaki renkten farklı olacaktır. Örneğin
Visual Studio Code editörü seçilen renk temasına bağlı olarak aşağıda yorum satırını yeşil renkle vermiştir.

Yorumlar tek satıra sığmıyorsa çok satırlı yorum kullanılabilir. Çok satırlı yorum /* ve */ arasında yazılmaktadır. Çok satırlı yorum olarak yazılanların
hiçbiri JavaScript yorumlayıcısı tarafından çalıştırılmaz (Ackermann, 2022).

2.4. Tanıtıcılar
Anahtar kelimelerin haricinde değişken, fonksiyon, sınıf gibi bazı programlama yapılarına programcının isim vermesi gerekir. Bir diğer ifadeyle bazı
dil bileşenleri daha sonra kullanılmak üzere çağrılması icap ettiğinde bunlara bir isim vermek gerekmektedir. İşte programcı tarafından verilen bu
isimlere tanıtıcı/tanımlayıcı (identifier) denir (Horstmann, 2020).

Tanıtıcı isimlendirmesi çeşitli kurallar dahilinde yapılmaktadır. İsimlendirme kuralları da denilen bu tanıtıcı kuralları aşağıda örneklerle açıklanmıştır
(Ackermann, 2022; Flanagan, 2020; Horstmann, 2020; Scott, MacDonald ve Powers, 2021; Svekis, Putten ve Percival, 2021).

• Tanıtıcılar harf, rakam ve $ ve _ karakterlerini içerebilir.

• Tanıtıcılar büyük-küçük harfe duyarlıdır. Yani aşağıda tanımlanan değişkenlerin hepsi birbirinden farklıdır.

• Aynı kod bloğu kapsamında aynı isimde birden fazla tanıtıcı kullanılamaz. Aşağıdaki kod satırlarında editör x değişkenlerinin altını kırmızı ile
çizerek aynı isimde değişken tanımlanamayacağını belirten “Blok kapsamlı değişken 'x', yeniden bildirilemiyor.” hatası verecektir.

• Tanıtıcılar rakamla başlayamaz, harfle başlamalıdır. Aşağıdaki kod satırı hata verecektir.

• Anahtar kelimeler tanıtıcı olarak kullanılamaz. Örneğin aşağıdaki sabit bildirimi hatalıdır çünkü break JavaScript dilinde anahtar kelimelerden
biridir.

• Tanıtıcılar boşluk, TAB, yeni satır, satır başı gibi karakterleri içeremez. Örneğin aşağıdaki değişken tanımlamaları hatalıdır.

• Tanıtıcılar Türkçe karakter veya Unicode karakter içerebilir.

• Tanıtıcılar özel karakter (#, %, & vb.) içermemelidir.

2.5. Değerler

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 22 / 170
i
:
i
i
i
 Bir değişkene, sabite, fonksiyon parametrelerine veya yerleşik bir fonksiyona verilen her türlü değer literal olarak tanımlanır. JavaScript dilinde
değerler veri türlerine göre sınıflandırılır.

2.5.1. Nümerik Değerler

Sayı değeri girmek için (varsayılan onluk taban) 0-9 arası rakamlar kullanılır. Ondalıklı sayılar için ondalık ayıracı olarak virgül değil nokta .
kullanılır.

Çok basamaklı sayıları bilimsel notasyonda yazmak için e veya E harfleri kullanılır.

Sekiz tabanında (oktal) sayı girilecekse sayı sıfırdan sonra O veya o karakteriyle (0O veya 0o) başlamalıdır. Bu durumda girilen sayı on tabanında
değil sekiz tabanında değerlendirilecektir. Sekiz tabanında sayı girerken yalnızca 0-7 arası rakamlar kullanılabilir. Aksi halde kod satırı hata verecektir.

On altı tabanında (heksadesimal veya hex) sayı girilecekse sayı sıfırdan sonra X veya x karakteriyle (0X veya 0x) başlamalıdır. Bu durumda girilen
sayı on tabanında değil on altı tabanında değerlendirilecektir. On altı tabanında sayı girerken 0-9 arası rakamlar ve A-F veya a-f arası harfler
kullanılabilir. Aksi halde kod satırı hata verecektir.

Sayıların işaretini pozitif ve negatif olarak belirtmek için + ve – işaret operatörleri kullanılır.

2.5.2. Dizge Değerler

Karakter, metin, harf ve/veya sayı içeren (alfanümerik) değerler string (dizge) olarak isimlendirilir. JavaScript dilinde dizgeler tek tırnak ' veya çift
tırnak " karakterleri içerisinde yazılır.

JavaScript yorumlayıcısı tırnak içerisinde yazılanları yani bir tırnaktan diğerine kadar olan karakterleri dizge olarak değerlendirecektir. Dizge bittikten
sonra da deyim sonlandırıcı noktalı virgül veya başka bir JavaScript kodu arayacaktır, bulamazsa hata verecektir. Fakat kimi zaman dizgenin içinde
tırnak karakteri olabilir. Örneğin aşağıdaki kod satırında İstanbul'u dizgesinde tek tırnak karakteri yer almaktadır. Bu sebeple kod satırı hata
verecektir.

Bu gibi durumda derleyicinin hata vermemesi için dizgenin içindeki tek tırnaktan önce bölü \ karakteri eklenir. Buna kaçış karakteri denir. Böylece
yorumlayıcı hata vermeyecektir.

Yukarıda örneklenen İstanbul'u dizgesindeki tırnak hatasının giderilmesi için tek tırnaktan önce \ kaçış karakteri eklenmelidir İstanbul\'u. Böylece
kod satırı hata vermeyecektir.

JavaScript dilinde tırnak kaçış karakteri haricinde kullanılan diğer kaçış karakterleri Tablo 2’de verilmiştir (geeksforgeeks, 2023a).

Tablo 2: JavaScript Kaçış Karakterleri

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 23 / 170
i
:
i
i
i
 Kaçış Karakteri Açıklama
\\ Ters bölü
\' Tek tırnak
\" Çift tırnak
\n Yeni satır
\r Satır başı
\t Yatay tablolayıcı (TAB boşluğu)
\v Dikey tablolayıcı
\b Geri tuşu
\f Form besleme

Dizge birden fazla satırdan oluşuyorsa satır sonunda \n verilmelidir. Örneğin aşağıdaki dizge hatalıdır.

Buradaki hata ilk satırın sonuna \n kaçış karakteri eklenerek düzeltilir.

ECMAScript 6 ile birlikte JavaScript diline şablon dizge (template string) özelliği gelmiştir. Bu sayede dizgenin içinde tek veya çift tırnak veya yeni
satır olması durumunda kaçış karakteri kullanmadan da dizge olduğu gibi kullanılabilir. Şablon dizgesi eğik tırnak ` ` karakterleri içinde yazılmaktadır
(Svekis ve diğerleri, 2021).

Şablon dizgelerin sağladığı bir diğer kullanım kolaylığı ise değişken ve ifadeleri ${değisken} veya ${ifade} sözdizimiyle doğrudan dizgenin içinde
yazdırabilmesidir (Ackermann, 2022; Horstmann, 2020). Aşağıda bu kullanım örneklenmiştir.

2.5.3. Boolean Değerler

JavaScript dilinde mantıksal bir durumu ifade etmek için true ve false olarak iki tane Boolean değer kullanılır.

2.6. Değişken ve Sabitler

Programın çalışması sırasında ihtiyaç duyduğu veri bellekte saklanır. Belleğin bir bölgesinde saklanan veriyi kullanmak için bellek adresini akılda
tutmak zor olacağından o bellek alanına bir isim verilir. Buna değişken denir ve o bellek alanındaki veriyi kullanmak için değişken çağrılır (Flanagan,
2020). Değişkenlere sakladığı veriyle alakalı ve hatırlaması kolay bir isim verilir. Değişkenlere isim verilirken “tanıtıcı isimlendirme kuralları”na
uyulmalıdır. JavaScript dilinde var ve let ile değişken tanımlaması yapılır.

Aşağıdaki örnekte x isimli değişkene 5 değeri, ders isimli değişkene JavaScript değeri atanmıştır. z isimli değişken tanımlanmış fakat bir değer
ataması yapılmamıştır. Tanımlanmış fakat değer atanmamış bir değişken undefined değerdedir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 24 / 170
i
:
i
i
i
 Değişkenlere atanan değerler adı üzerinde daha sonra değiştirilebilir. Tanımlandığında 5 değeri atanan x değişkenine aşağıdaki satırda 25 değeri
atanmıştır.

JavaScript dilinde bir değişkene önce nümerik daha sonra String veri tipinde değer atanabilir. Bu açıdan JavaScript sıkı veri tipi kontrolü uygulamaz.
Aşağıdaki satırda önce 5 ve sonra 25 değeri atanan nümerik değerdeki x değişkenine String veri tipinde değer atanmıştır.

Kimi zaman programın ihtiyaç duyduğu verinin daha sonradan değişmemesi istenebilir. Bu gibi durumlarda saklanacak veri değişken ile değil sabit
(constant) ile tanımlanır (Flanagan, 2020). Sabit tanımlama const ile yapılır. Sabit tanımlanırken mutlaka değer ataması da yapılmalıdır aksi halde kod
satırı hata verecektir. Sabitin değeri daha sonra değiştirilmek istendiğinde de kod satırı hata verir.

2.6.1. Değişkenlerin Kapsamı

JavaScript dilinde değişkenler var ve let ile tanımlanırlar. Tanımlanan bir değişken kaynak kodun her yerinde görünür yani kullanılabilir değildir.
Değişkenlerin kullanım alanı yani kapsamı çeşitli kurallara tabidir (javatpoint, 2024; Svekis ve diğerleri, 2021):

Global Değişkenler

Kodun her yerinden erişilebilen değişkenlere global değişkenler denir. var veya window nesnesi ile tanımlanır. Kaynak kodun en üstünde,
fonksiyondan önce ve kod bloğunun üzerinde tanımlanan değişkenler global değişkenlerdir.

Aşağıda verilen örnekte let, var ve window ile kodun en başında üç adet global değişken tanımlanmıştır (globalDegisken1, globalDegisken2,
globalDegisken3). Bu değişkenler tanımlandıktan sonra, bir fonksiyonun içinde ve fonksiyonun dışında görünürdürler yani kullanılabilirler.

Bu kodun konsol çıktısı aşağıda verilmiştir. Çıktıdan görüldüğü üzere global değişkenler her yerde görünürdürler.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 25 / 170
i
:
i
i
i
 Yerel Değişkenler

Bir fonksiyon içinde tanımlı değişkenler yerel değişkendir (local variable). Yerel değişkenler yalnızca tanımlandığı fonksiyon içinde görünür ve
kullanılır, tanımlandığı fonksiyon dışında yerel değişkenler tanımsızdır dolayısıyla bunlara erişilemez.

Aşağıda verilen örnekte ciktila fonksiyonu içinde let ve var ile iki adet lokal değişken tanımlanmıştır (lokalDegisken, lokalDegisken2). Fonksiyon
daha sonra ciktila(); ile çağrılmıştır. Akabinde fonksiyonun dışında lokal değişkenler çağrılmıştır. Kodun devamında ciktila2 isminde başka bir
fonksiyon tanımlanmış ve bu fonksiyonun içinde de lokal değişkenler çağrılmıştır. Bu JavaScript kodunda lokal değişkenler kendi fonksiyonu içinde
tanımlı ve kendi fonksiyonu dışında tanımsız olduğundan sonraki iki çağırmada hata verecektir. Kodun hata vermemesi için satır sonunda // hata verir
olarak yorumlanan satırlar silinmeli veya satır başına yorum eklenmelidir.

Blok Değişkenleri

Bir blok içinde tanımlı değişkenlerin kapsamı tanımlandığı blokla sınırlıdır. Tanımlandığı blok dışından bu değişkenlere erişilemez.

Aşağıda verilen örnekte süslü parantezlerle verilen blok içinde var ve let ile iki adet değişken tanımlanmış (blokDegisken, blokDegisken2) ve yine
aynı blok içinde değişkenler konsola çıktılanmıştır. Daha sonra blok dışında her iki değişken ayrı ayrı konsola çıktılanmıştır. Kodun devamında farklı
bir blok açılmış ve bu blokta değişkenler yine ayrı ayrı çıktılanmıştır.

var ile tanımlanan değişkenler global kapsamda olduğundan kodun her yerinden bu değişkenlere erişilebilir. Fakat let ile tanımlanan değişkenler blok
kapsamlı değişkenlerdir dolayısıyla tanımlandığı bloğun dışından bu değişkenlere erişilemez. Dolayısıyla bu kod çalıştırıldığında hata verecektir.
Çünkü ilk kod bloğunda blokDegisken2 isimli değişken let ile tanımlanmıştır ve yalnızca kendi bloğu içinden bu değişkene erişilebilir, blok dışından
erişilemez. Kodun hata vermemesi için satır sonunda // hata verir olarak yorumlanan satırlar silinmeli veya satır başına yorum eklenmelidir.

2.7. Operatörler
Operatör (işleyen) özel bir işlevi olan sembol veya sembollerdir. Operatörlerin işlediği, üzerinde bir işlem yaptığı değer veya ifadeye işlenen
(operand) denir. Örneğin 12 / 4 işleminde bölme operatörü kullanılmıştır. Bölme operatörünün sağındaki (4) ve solundaki (12) değerleri bölme
operatörünün işlenenleridir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 26 / 170
i
:
i
i
i
 Operatörler eğer tek bir işlenen alırsa tekli (unary) operatör, iki tane işlenen alırsa ikili (binary) operatör, üç tane işlenen alırsa üçlü (ternary) operatör
olarak isimlendirilir. Örneğin az önce örneklenen bölme işlemi ve diğer aritmetik operatörler, her iki tarafına işlenen aldığı için ikili operatörlerdir.

JavaScript dilinde operatörler yaptığı işlem kategorisine göre aşağıda örneklerle açıklanmıştır.

2.7.1. Atama Operatörü

Atama operatörü olan eşittir sembolü = kendisinin sağındaki değeri kendisinin sol tarafındaki değişken veya sabite atar (aktarır).

Atama işleminde önce sağ tarafta hesaplanması gereken ifade varsa hesaplanır ve daha sonra hesaplanan değer sol taraftaki değişkene aktarılır.
Aşağıdaki örnekte önce atama operatörünün sağındaki aritmetik işlemin hesabı yapılır ve daha sonra hesaplanan değer sonuc değişkenine atanır.

JavaScript dilinde tek satırda birden fazla değişkene değer atanabilir. Yukarıda verilen kodda sayi1 ve sayi2 değişkenlerine iki ayrı satırda yapılan
atama işi aşağıdaki gibi tek satırda da yapılabilir.

JavaScript dilinde dizi elemanlarının değerleri aynı anda birden fazla değişkene aşağıdaki kullanımdaki gibi atanabilir.

Bütünleşik Atama Operatörleri

Önceki alt başlıkta ele alındığı üzere değişken, bir değeri saklamak için bellekte ayrılan alanların adresini kolayca hatırlamak için onlara verilen
isimlerdi. Değişkenlerde saklanan değerler adı üzerinde sonradan değiştirilebilir. Örneğin aşağıda a değişkenine önce 10 değeri atanmış, sonraki
satırda ise a değişkenin değeri 2024 olarak değiştirilmiştir.

Kimi zaman bir değişkenin değeri yukarıda verilen örnekteki gibi doğrudan değiştirilmeyebilir. Örneğin sayi isminde bir değişken tanımlansın ve
değişkene 5 değeri atansın.

Daha sonra sayi değişkenine 2 eklensin ve yeni değer yine sayi değişkeninin üzerine yazılsın. Bu iş aşağıdaki kod satırıyla yapılır.

Matematikte geçersiz olan bu denklem programlama dillerinde son derece basit bir atama işleminden ibarettir. Daha önce de ifade edildiği üzere atama
işleminde öncelikle = atama operatörünün sağ tarafındaki işlemler hesaplanır ve daha sonra hesaplanan değer = atama operatörünün sol tarafındaki
değişkene atanır. Bir diğer ifadeyle atama operatörü sağdan sola doğru çalışır. Atama işleminin bu çalışma prensibine göre öncelikle atama
operatörünün sağ tarafındaki işlem yapılır yani 5 değerinde olan sayi değişkenine 2 eklenir ve 7 değeri elde edilir. Daha sonra elde edilen 7 değeri
operatörün sol tarafındaki sayi değişkenine atanır. sayi = sayi + 2; kod satırı çalıştırıldığında JavaScript yorumlayıcısı herhangi bir hata vermeyecektir.

sayi = sayi + 2; kod satırı aşağıdaki gibi daha kısa bir şekilde yazılabilir. Burada kullanılan += bütünleşik atama operatörüdür.

Bir değişkenin değerini değiştirip nihaî değeri yine aynı değişkene atamak için kullanılan bütünleşik atama operatörleri Tablo 3’te verilmiştir.
Bütünleşik atama operatörünün kullanımında önce değişken, sonra ise değişim miktarı verilir. Sözdizimi aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 27 / 170
i
:
i
i
i
 Tablo 3: JavaScript Bütünleşik Atama Operatörleri

Operatör Örnek Eşleniği Açıklama

+= sayi += 2; sayi = sayi + 2; sayi değişkeninin değerine 2 ekler ve nihaî değeri sayi değişkenine
atar.
-= sayi -= 2; sayi = sayi – 2; sayi değişkeninin değerinden 2 çıkarır ve nihaî değeri sayi
değişkenine atar.
*= sayi *= 2; sayi = sayi * 2; sayi değişkeninin değerini 2 ile çarpar ve nihaî değeri sayi
değişkenine atar.
/= sayi /= 2; sayi = sayi / 2; sayi değişkeninin değerini 2’ye böler ve nihaî değeri sayi değişkenine
atar.
%= sayi %= 2; sayi = sayi % 2; sayi değişkeninin değerinin 2’ye bölümünden kalanı bulur ve nihaî
değeri sayi değişkenine atar.
**= sayi **= 2; sayi = sayi ** 2; sayi değişkeninin değerini taban, 2 sayısı üs olmak üzere üs alma
işlemi yapar ( sayi2 ) Sonra işlemin sonucunu sayi değişkenine atar.

Aşağıda bütünleşik atama operatörü kullanım örneği ve konsol çıktısı verilmiştir.

Bütünleşik atama operatörleri yalnızca değişkenlerle çalışır, bütünleşik atama operatöründen önce sayı kullanılamaz, mutlaka değişken kullanılmalıdır.
Örneğin aşağıdaki satır hata verecek ve çalışmayacaktır.,

2.7.2. İşaret Operatörleri ve Aritmetik Operatörler

Bir sayının pozitif veya negatif değerde olduğunu belirtmek için sırasıyla + ve – işaret operatörleri kullanılır. İşaret operatörleri sadece kendisinin sağ
tarafına tek bir değer aldıklarından tekli (unary) operatördürler. Günlük kullanımda olduğu üzere eğer sayının önünde herhangi bir işaret operatörü
yoksa o sayı pozitif değerdedir.

JavaScript dilinde temel aritmetik işlemleri yapmak için toplama, çıkarma, çarpma, bölme, mod alma ve üs alma operatörleri tanımlıdır. Aritmetik
operatörler kendisinin sağına ve soluna (her iki tarafa) işlenen aldıklarından ikili (binary) operatördürler. Tablo 4’te JavaScript dilinde ön tanımlı
aritmetik operatörler verilmiştir.

Tablo 4: JavaScript Aritmetik Operatörleri

Operatörİşlev Açıklama Örnek

+ Toplama İki sayıyı toplar. x+y
- Çıkarma Bir sayıdan diğerini çıkarır. x-y
* Çarpma İki sayıyı çarpar. x*y
/ Bölme Bir sayıyı diğerine böler. x/y
% Mod almaBir sayının diğer sayıya bölümünden kalanı verir.x % y
** Üs alma Üs alma işlemini yapar. x ** y

Aşağıda aritmetik operatörlerin basit kullanım örnekleri verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 28 / 170
i
:
i
i
i
 2.7.3. Önden ve Sondan Artırma Operatörleri

JavaScript dilinde bir değişkenin değerini birer artırıp azaltmak için bütünleşik atama operatörlerine benzer bir artırma ++ ve bir azaltma --
operatörleri kullanılır. Birer artırma ve azaltma operatörleri yalnızca değişkenlerle kullanılır, sayılarla kullanılamaz. Birer artırma ve azaltma
operatörleri kendisinin sağına (sonuna) veya soluna (önüne) değişken alabilir. Bu sebeple bu operatörlerin çıktısı değişkenin bulunduğu yere göre
(önüne veya sonuna göre) değişecektir.

Tablo 5: Önden Artırma Operatörü

Operatör Açıklama Örnek Kullanım

Önden Artırma OperatörüDeğeri 1 artırır ve yeni değeri kullanır.++x

Aşağıda verilen JavaScript kod örneğinde ++ artırma operatörü kendisinden önce değişken almıştır. Önden artırma işlevi gören bu kullanımda ++
operatörü değişkende önce geldiği için öncelikle değer artımı yapılacak ve yeni değer değişkenin üzerine yazılacaktır. Böylece değişken artık yeni
değerde kullanılacaktır. Örnekte x değişkenine 5 değeri atanmıştır. Sonraki satırda x değişkeninin değeri konsola çıktılanmıştır. Bir sonraki satırda ise
önden artırım yapılarak ++x kullanımıyla değişkenin değeri bir artırılmış ve yeni değer değişkenin üzerine yazılmıştır. Bu değer konsola
çıktılandığında 6 çıktısı görülecektir.

Eğer artırma operatörü değişkenden sonra kullanılırsa bu durumda değişken mevcut değeriyle kullanılacak ve kullanıldıktan sonra değeri bir
artırılacaktır.

Tablo 6: Sondan Artırma Operatörü

Operatör Açıklama Örnek Kullanım

Sondan Artırma OperatörüDeğeri kullanır ve daha sonra 1 artırır.x++

Aşağıda sondan artırma operatörünün kullanımına ilişkin örnek verilmiştir. İlk satırda x değişkenine yine 5 değeri atanmıştır. Sonraki satırda sondan
artırma operatörü kullanılarak x++ değeri konsola çıktılanmıştır. Bu durumda x değişkeninin mevcut değeri olan 5 kullanılacak ve konsola
çıktılanacaktır. x değişkeninin değeri ancak bu kullanımdan sonra bir artırılacaktır. Bir sonraki satırda yeni değerdeki x değişkeni konsola
çıktılanmıştır. Bu son satırın çıktısı 6 olacaktır.

Önden ve sondan artırma operatörüne benzer şekilde önden ve sondan azaltma operatörü de kullanılabilir (Tablo 7).

Tablo 7: Önden ve Sondan Azaltma Operatörü

Operatör Açıklama Örnek Kullanım

Önden Azaltma Operatörü Değeri 1 azaltır ve yeni değeri kullanır.--x
Sondan Azaltma OperatörüDeğeri kullanır ve daha sonra 1 azaltır. x--

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 29 / 170
i
:
i
i
i
 2.7.4. Karşılaştırma Operatörleri

İki değerin/işlenenin birbirine göre küçüklük, büyüklük, eşitlik vb. yönlerden ilişkisini karşılaştırmak için kullanılan JavaScript operatörleri Tablo 8’de
verilmiştir. Tabloda verilen son iki operatör her iki tarafına aldığı değer ve işlenenin değerlerini ve ilave olarak veri tiplerini de karşılaştırır, diğerleri
yalnızca değerleri karşılaştırır. Karşılaştırma operatörleri true veya false boolean değerlerden birini döndürür. Örneğin 15 > 12 karşılaştırması true
döndürür.

Tablo 8: JavaScript Karşılaştırma Operatörleri

Operatör Açıklama
> Büyüktür operatörü. Operatörün sol tarafındaki işlenen sağ tarafındakinden büyükse true döner, değilse false döner.
< Küçüktür operatörü. Operatörün sol tarafındaki işlenen sağ tarafındakinden küçükse true döner, değilse false döner.
>= Büyük veya eşittir operatörü. Operatörün sol tarafındaki işlenen sağ tarafındakinden büyük veya eşitse true döner, değilse false
döner.
<= Küçük veya eşittir operatörü. Operatörün sol tarafındaki işlenen sağ tarafındakinden küçük veya eşitse true döner, değilse false
döner.
== Eşitlik kontrol operatörü. Operatörün her iki tarafındaki işlenenler birbirine eşitse true döner, eşit değilse false döner.
!= Eşit olmama kontrol operatörü. Operatörün her iki tarafındaki işlenenler birbirine eşit değilse true döner, eşitse false döner.
=== Hem değerler hem de veri tipleri eşitlik kontrol operatörü. Operatörün her iki tarafındaki işlenenler birbirine eşitse ve aynı zamanda
bu işlenenlerin veri tipleri de aynı türdeyse true döner, değilse false döner.
!== Hem değerler hem de veri tipleri eşit olmama kontrol operatörü. Operatörün her iki tarafındaki işlenenler birbirine eşit değilse ve
aynı zamanda bu işlenenlerin veri tipleri de eşit değilse true döner, eşitse false döner.

Aşağıda karşılaştırma operatörlerinin kullanımıyla ilgili örnekler verilmiştir.

2.7.5. Mantıksal Operatörler

Mantıksal operatörler her iki tarafına aldığı değerlere mantıksal VE (&&), VEYA (||), DEĞİL (!) mantıksal kapılarını uygular. İşlem sonucu true veya
false döner.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 30 / 170
i
:
i
i
i
 Tablo 9: JavaScript Mantıksal Operatörleri

Operatör İşlev
&& VE mantıksal kapısı
|| VEYA mantıksal kapısı
! DEĞİL mantıksal kapısı

Aşağıda mantıksal operatörlerin kullanımıyla ilgili örnekler verilmiştir.

2.7.6. Diğer Operatörler

JavaScript dilinde herhangi bir kategoriye girmeyen çeşitli operatörler kullanılmaktadır (Ackermann, 2022; Svekis ve diğerleri, 2021):

typeof Operatörü

typeof operatörü sağ tarafına aldığı değerin veri tipini geri döner. Aşağıda çeşitli değerlerin veri tipleri typeof operatörüyle elde edilmiş ve konsol
ekranına çıktılanmıştır.

delete operatörü

delete operatörü dizi elemanını veya nesnenin bir özelliğini (bileşenini) siler.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 31 / 170
i
:
i
i
i
 in operatörü

in operatörü dizi içinde verilen indiste bir anahtar olup olmadığını veya bir object içinde verilen anahtar olup olmadığını kontrol eder. Eğer varsa true
döner, yoksa false döner.

instanceof operatörü

instanceof operatörü sol tarafına aldığı değerin sağ tarafına aldığı veri tipinde olup olmadığını kontrol eder. Örnek belirtilen türdeyse true, değilse
false döner.

new operatörü

Bir sınıf veya nesnenin bir örneğini oluşturmak için kullanılır.

Virgül Operatörü

Birden fazla işlenen alır ve en son işleneni geri döndürür.

Spread Operatörü

Yan yana üç nokta … ile yazılan spread operatörü dizi elemanlarının tamamını kopyalar. Spread operatörü genellikle dizileri birleştirmek için
kullanılır. Aşağıdaki örnekte ikinci satırda tumSayilar isminde bir dizi tanımlanmış ve bu diziye ciftSayilar dizisinin tüm elemanları … Spread
operatörü ile kopyalanmış ve dizinin en sonuna 8 değerindeki eleman eklenmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 32 / 170
i
:
i
i
i
 Spread operatörü aynı zamanda fonksiyonların parametrelerinde de kullanılır. Örneğin bir fonksiyon çok sayıda parametre almışsa ilk birkaç
parametreden sonra geri kalan diğer parametrelerinin tamamını ifade etmek için Spread operatörü kullanılır (geri kalan tüm parametrelerinin yerine
geçer). Bu yüzden Spread operatörü fonksiyon parametrelerinin en sonunda yer almalıdır.

Aşağıda Spread operatörünün fonksiyon parametresinde kullanımı örneklenmiştir. sayilar isimli fonksiyon sayi1, sayi2 ve geriKalanParametreler
adında üç parametre almıştır. Dikkat edilirse geriKalanParametreler isimli parametre üç nokta Spread operatörüyle tanımlanmıştır. Fonksiyonun
içinde geriKalanParametreler parametresinin değerleri konsola çıktılanmıştır. Akabinde sayilar isimli fonksiyona parametre olarak 1, 8, 34 ve 2024
değerleri verilmiştir. Konsol çıktısında 34 ve 2024 değerlerinin yer aldığı görülecektir. Çünkü fonksiyona verilen değerlere göre sayi1 parametresi 1
değerini, sayi2 parametresi 8 değerini, geriKalanParametreler parametresi ise fonksiyona verilen diğer değerlerin yerine (34 ve 2024) geçmektedir.

Koşullu (Üçlü) Operatör (?:)

Koşullu operatör if-else koşul yapısının daha kısa ifadeyle yazımıdır. Koşullu (üçlü) operatör (diğer adı ternary operatör) üç tane işlenen alır. Aşağıda
sözdizimi verilmiştir.

koşul ? değer1 : değer2;

Koşullu operatör bir koşulu kontrol eder. Eğer koşul true döndürürse değer1 kullanılır, eğer koşul false dönerse değer2 kullanılır. Aşağıda verilen kod
örneğinde kullanıcının yaşı istenmektedir. Eğer kullanıcının yaşı 18’den küçükse sisteme kaydolamayacağı, 18 veya büyükse sisteme kaydolabileceği
bilgisi ekrana çıktılanmaktadır. Aşağıdaki satırda verilen koşullu operatör bu durumun kontrolünü sağlamaktadır.

Web sayfasının kodu aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 33 / 170
i
:
i
i
i
 Dizge Birleştirme Operatörü (+)

Bir dizgeyi diğerinin sonuna eklemek için (dizgeleri uç uca birleştirmek için) + dizge birleştirme operatörü kullanılır.

null Birleşim Operatörü (??)

null birleşim operatörü ?? her iki tarafına değer alır. Eğer sol tarafındaki değişkene değer atanmışsa o değeri kullanır. Eğer sol tarafındaki değişkene
henüz bir değer atanmamışsa veya undefined ise sağ taraftaki değeri kullanır. Örneğin kullanıcının bir ürün sipariş ettiğini düşünelim. Eğer kullanıcı
sipariş esnasında miktar alanına değer girmemişse 1 tane aldığını varsaymalıyız; miktar alanına değer girmişse de onu kullanmalıyız. Bunu sağlamak
için null birleşim operatörü ?? kullanılmalıdır. Aşağıda bunun örneği verilmiştir.

Eğer kullanıcı miktar alanına değer girmişse bu durumda sipariş miktarı olarak 1 değil girdiği değer kullanılacaktır. Örneğin kullanıcı 2 tane sipariş
etmişse siparisMiktari degişkenine 2 değeri atanacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 34 / 170
i
:
i
i
i
 2.7.7. Operatör Önceliği

Matematikteki işlem önceliği kuralları JavaScript dilinde de geçerlidir. Örneğin toplama ve çarpma işlemlerinin olduğu bir aritmetik hesaplamada önce
parantezlerin içinden hesaplamaya başlanır, parantez içinde ise önce çarpma işlemi ve ardından toplama işlemi yapılır. Bu ve benzeri şekilde
operatörlerin birbirine göre öncelik ilişkisi aşağıda Tablo 10’da verilmiştir (geeksforgeeks, 2023b). Tabloda verilen operatörlerde en yukarıdaki en
öncelikli işlem sırasındadır ve aşağıya doğru işlem önceliği azalır. Tablo incelendiğinde sondan artırma operatörünün önden artırma operatörüne göre
öncelikli olduğu, üs alma operatörünün çarpma operatörüne göre öncelikli olduğu görülecektir.

Tablo 10: JavaScript Operatörleri Öncelik Sıralaması

Operatör Operatör Açıklaması Örnek

() Gruplama (1+2)
. Üye [Link]
[] Üye brand[“carName”]
new Yeni örnek oluşturma new Date(“July 27, 2023”)
() Fonksiyon çağrısı myFun()
++ Sondan artırma i++
— Sondan azaltma i–
++ Önden artırma ++i
— Önden azaltma –i
! Mantıksal NOT !(x===y)
typeof Tür typeof a
** Üs alma 4**2
* Çarpma 2*3
/ Bölme 18/9
% Mod (Bölümden kalan) 4%2
+ Toplama 2+4
– Çıkarma 4-2
<< Sola kaydırma (Bitsel) y<<2
>> Sağa kaydırma (Bitsel) y>>2
>>> İşaretsiz Sağa kaydırma (Bitsel) y>>>2
< Küçüktür 3<4
<= Küçük veya eşittir 3<=4
> Büyüktür 4>3
>= Büyük veya eşittir
In In “PI” in MATH
Instance of Instance of A instanceof B
== Eşitlik kontrolü x==y
!= Eşit olmama kontrolü x!=y
=== Tür ve değer eşitlik kontrolü x===y
!== Tür ve değer eşit olmama kontrolü x!==y
& Bitsel AND x&y
^ Bitsel XOR x^y
| Bitsel OR x|y
&& Mantıksal AND x&&y
|| Mantıksal OR x||y
?: Üçlü koşul (x>y)?x:y
= Atama x=5
+= Bütünleşik toplama ataması x+=5 // x=x+5
-= Bütünleşik çıkarma ataması x-=5 // x=x-5
*= Bütünleşik çarpma ataması x*=5 // x = x*5
/= Bütünleşik bölme ataması x/=5 // x = x/5
%= Bütünleşik mod ataması x%=5 // x = x%5
<<= Bütünleşik sola kaydırma ataması x<<=5 // x=x<<5
>>= Bütünleşik sağa kaydırma ataması x>>=5 // x=x>>5
>>>= Bütünleşik işaretsiz sağa kaydırma ataması x>>>=5 // x=x>>>5
&= Bitsel AND ataması x&=5 // x=x&5
^= Bitsel XOR ataması x^=5 // x=x^5
|= Bitsel OR ataması x|=5 // x=x|5
yield Pause fonksiyonu yield x
, Virgül x,y

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 35 / 170
i
:
i
i
i
 Aşağıda verilen örnekte sonuc değişkeninde yapılan aritmetik işlemde parantez, üs alma, çarpma ve toplama işlemleri birlikte yer almaktadır. İşleme
öncelikle parantezin içini hesaplamayla başlanacaktır. Ardından üs alma işlemi 23 yapılacak ve üs alma işleminin sonucu ile (8) parantezin içi (9)
çarpılacaktır. Böylelikle sonuc değişkenini değeri 72 çıkacaktır. İkinci satırda verilen sonuc2 değişkeninde yapılan aritmetik işlemde de aynı şekilde
üs alma, çarpma ve toplama işlemleri birlikte yer almaktadır. Fakat burada parantez olmadığından işlem sırası önce üs alma işlemi 23 yapılacak ve üs
alma işleminin sonucu (8) ile 4 çarpılacak (32) ve çarpıma 5 eklenecektir (37). Böylece sonuc2 değişkeninin değeri 37 çıkacaktır.

2.8. Veri Tipleri

JavaScript dilinde yerleşik olarak aşağıda listelenen veri tipleri tanımlanmıştır (Svekis ve diğerleri, 2021):

1. String

2. Number

3. Bigint

4. Boolean

5. Undefined

6. Null

7. Symbol

8. Object

Aşağıda verilen Tablo 11’de JavaScript veri tipleri kısaca tanımlanmış ve örneklenmiştir.

Tablo 11: JavaScript Veri Tipleri

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 36 / 170
i
:
i
i
i
 String veri tipi alfanümerik her türlü değeri saklayabilir. JavaScript dilinde tüm sayı tiplerindeki (tam sayı, ondalıklı sayı) işlemler için Number veri
tipi kullanılır. Eğer çok büyük veya çok küçük sayılarla çalışılması gerekiyorsa BigInt veri tipi kullanılır. BigInt veri tipi -(253-1) ila 253-1 arasında
değer alır. BigInt veri tipindeki bir değerin sonuna n eklenmelidir. Mantıksal değer saklayan Boolean veri tipi yalnızca true veya false değer alabilir.
JavaScript diline özel bir veri tipi olan undefined, bir değişken tanımlanmış fakat bu değişkene değer atanmamışsa bu değişkenin veri tipi undefined
olarak geçer. null veri tipi ise bir değişkenin boş değerde veya bilinmeyen bir değere sahip olduğunu ifade eder. null veri tipi küçük harfle
yazılmalıdır.

Symbol veri tipi ise ECMAScript 6 ile dile kazandırılmıştır. Symbol veri tipinde tanımlanan değerin eşsiz olduğunu belirtir. Yukarıda örneklenen
dersKodu isminde Symbol veri tipinde tanımlanan değişkenle aynı değerde yine Symbol veri tipinde dersKodu2 isminde başka bir değişken
tanımlayalım ve daha sonra bu iki değişkenin değerlerinin ve veri tiplerinin eşitlik kontrolünü (üç tane = operatörü ile) yapalım. Aşağıda verilen
JavaScript kodu çalıştırıldığında konsol çıktısında false görülecektir çünkü Symbol veri tipindeki değerler eşsiz yani benzersizdir. Dolayısıyla Symbol
veri tipindeki değerler başka hiçbir değerle eşit olamayacağından eşitlik kontrolü false döndürecektir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 37 / 170
i
:
i
i
i
 Bölüm Özeti
Anahtar elimeler dilde özel bir işlevi olan kelimelerdir. Bunlar değişken, fonksiyon vb. yapılara isim olarak verilemez.

Kodun içinde derleyici veya yorumlayıcının dikkate almaması gereken açıklama metinleri yorum satırları olarak verilir. JavaScript tek satırlı ve çok
satırlı yorum yapılmasına izin verir.

Tanıtıcılar, çeşitli programlama yapılarına programcı tarafından verilen isimlerdir. Değerler bir değişkene, fonksiyona vb. aktarılan numerik string,
boolean değerleri ifade eder.

Değişkenler bir değeri saklamak için kullanılırlar. Adı üzerinde değişkenlere atanan değerler sonradan değiştirilebilir Sabitlerin değeri ise sonradan
değiştirilemez. Sabitler tanımlanırken mutlaka bir değerle birlikte tanımlanmalıdır.

Operatörler bir değer üzerine işlem yapan özel anlamı olan semboller veya kelimelerdir. Operatörlerin etki ettiği yapılara operand denir.

JavaScript dilinde 8 farklı veri tipi bulunmaktadır. Gereksinime ne ise ona uygun veri tipleri kullanılmalıdır.

Kaynakça
Ackermann, P. (2022). JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming (First Edition.). Bonn ; Boston:
Rheinwerk Computing.

ECMAScript. (2023). Keywords and Reserved Words. ECMAScript® 2023 Language Specification. [Link]
and-reserved-words adresinden erişildi.

Flanagan, D. (2020). JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language (7th edition.). Sebastopol, CA:
O’Reilly Media.

geeksforgeeks. (2023a). What are Escape Characters in JavaScript ? GeeksforGeeks. [Link]

javascript/ adresinden erişildi.

geeksforgeeks. (2023b). Operator precedence in JavaScript. GeeksforGeeks. [Link]

adresinden erişildi.

Horstmann, C. (2020). Modern JavaScript for the Impatient (1st edition.). Boston Columbus New York San Francisco Amsterdam Cape Town:
Addison-Wesley Professional.

javatpoint. (2024). JavaScript global variable—Javatpoint. [Link]. [Link] adresinden

erişildi.

Scott, A., MacDonald, M. ve Powers, S. (2021). JavaScript Cookbook: Programming the Web (3rd edition.). Beijing Boston Farnham Sebastopol
Tokyo: O’Reilly Media.

Svekis, L. L., Putten, M. van ve Percival, C. B. R. (2021). JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun,
interactive, and dynamic web apps, games, and pages. Erscheinungsort nicht ermittelbar: Packt Publishing.

Ünite Soruları

Soru-1 :

JavaScript’te kod blokları aşağıdakilerden hangisi ile oluşturulur?

(Çoktan Seçmeli)

(A) Süslü parantezler {}

(B) Girinti (indent)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 38 / 170
i
:
i
i
i
 (C) Yuvarlak parantez ()

(D) Diyez sembolü #

Küçüktür-büyüktür işaretleri <>

Cevap-1 :

Süslü parantezler {}

Soru-2 :

Aşağıdkilerden hangisi JavaScript’in anahtar kelimeleri arasında yer almaz?

(Çoktan Seçmeli)

(A) for

(B) if

(C) let

(D) this

(E) that

Cevap-2 :

that

Soru-3 :

Aşağıda verilen JavaScript kod satırlarından hangisi atlanır ve değerlendirilmeye alınmaz?

(Çoktan Seçmeli)

(A) let x = 5;

(B) let y = 10;

(C) // let isim = "Ahmet";

(D) let toplam = x + y;

[Link]("Toplam: ", toplam);

Cevap-3 :

// let isim = "Ahmet";

Soru-4 :

Aşağıdaki seçeneklerden hangisinde hatalı tanıtıcı isimlendirmesi yapılmıştır?

(Çoktan Seçmeli)

(A) let sayi = 42;

(B) let i_sim = "Js";

(C) let dogruMu = true;

(D) let 1sayi = 90;

let new_sayi = 256;

Cevap-4 :

let 1sayi = 90;

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 39 / 170
i
:
i
i
i
 Soru-5 :

Aşağıda boş bırakılan kod satırında kişinin ad ve yaş değişkenlerini barındıran bilgi isminde bir değişken tanımlanmak isteniyor. Aşağıda verilen
seçeneklerin hangisiyle bu yapılabilir?

let ad = "Ahmet";

let yas = 30;

[Link](bilgi);

(Çoktan Seçmeli)

(A) let bilgi = `Ad: /{ad}, Yaş: /{yas}, Bilgi: /{ad} /{yas} yaşındadır.`;

(B) let bilgi = `Ad: #{ad}, Yaş: #{yas}, Bilgi: #{ad} #{yas} yaşındadır.`;

(C) let bilgi = `Ad: *{ad}, Yaş: *{yas}, Bilgi: *{ad} *{yas} yaşındadır.`;

(D) let bilgi = `Ad: ${ad}, Yaş: ${yas}, Bilgi: ${ad} ${yas} yaşındadır.`;

let bilgi = `Ad: %{ad}, Yaş: %{yas}, Bilgi: %{ad} %{yas} yaşındadır.`;

Cevap-5 :

let bilgi = `Ad: ${ad}, Yaş: ${yas}, Bilgi: ${ad} ${yas} yaşındadır.`;

Soru-6 :

Değişken kapsamını dikkate alarak aşağıdaki JavaScript kodunda tanımlanan değişkenlerden hangisi bu yönüyle diğerlerinden farklıdır?

(Çoktan Seçmeli)

(A) sayi1

(B) sayi2

(C) sonuc

(D) metin

PI

Cevap-6 :

sonuc

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 40 / 170
i
:
i
i
i
 Soru-7 :

Aşağıda verilen kod bloğu çalıştırıldığında konsola çıktılanan değer nedir?

(Çoktan Seçmeli)

(A) 14

(B) 15

(C) 16

(D) 17

18

Cevap-7 :

15

Soru-8 :

Aşağıdaki JavaScript kodlarına göre sonuc değişkeninin değeri hangi seçenekte doğru verilmiştir?

(Çoktan Seçmeli)

(A) "true"

(B) "false"

(C) true

(D) false

Cevap-8 :

true

Soru-9 :

Aşağıda verilen kod satırlarıyla ile ilgili verilen ifadelerden hangisi doğrudur?

(Çoktan Seçmeli)

(A) meyveler dizisinin "çilek" elemanı silinmiştir; ancak dizinin uzunluğu aynı kalacaktır.

(B) meyveler dizisinin "muz" elemanı silinmiştir; ancak dizinin uzunluğu aynı kalacaktır.

(C) meyveler dizisinin "çilek" elemanı silinmiştir; dizinin uzunluğu bir eksilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 41 / 170
i
:
i
i
i
 (D) meyveler dizisinin "muz" elemanı silinmiştir; dizinin uzunluğu bir eksilmiştir.

meyveler dizisine "armut" ve "muz" elemanlarının arasına bir eleman eklenir.

Cevap-9 :

meyveler dizisinin "çilek" elemanı silinmiştir; ancak dizinin uzunluğu aynı kalacaktır.

Soru-10 :

Aşağıdaki seçeneklerde verilen operatör ve açıklamalardan hangisi yanlıştır?

(Çoktan Seçmeli)

(A) % Mod

(B) i++ Sondan artırma

(C) << Bitsel sola kaydırma

(D) < Küçüktür

(E) Çarpma

Cevap-10 :

Çarpma

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 42 / 170
i
:
i
i
i
 3. Koşul Yapıları

Özlü Söz
“Programlama, başka bir insana bilgisayarın ne yapmasını istediğini söyleme sanatıdır.”

– Donald Knuth

Kazanımlar
1. JavaScript dilinde kullanılan koşul yapılarını bilir ve kod akışını kontrol etmek için koşul yapılarını kullanmayı öğrenir.
2. Belirli bir koşulun doğruluğunu kontrol etmek için “if” koşul yapısını kullanır ve kodun belirli bloklarının çalıştırılmasını sağlar.
3. Bir koşulun gerçekleşmeme durumuna bağlı olarak istenen kod bloklarının çalıştırılması için “if-else” koşul yapısını kullanır.
4. Birden fazla koşulun kontrol edilmesi gerektiğinde “if-else if” koşul yapısını kullanarak kodun akışını yönlendirir ve okunabilirliğini artırır.
5. Birden çok seçenek arasından birinin seçilmesi gerektiğinde “switch” koşul yapısını kullanır.
6. Üçlü koşul operatörü “ternary” bilir ve kullanır.

Birlikte Düşünelim
1. Koşul yapıları JavaScript’te neden önemlidir?
2. “if” koşul yapısının kullanım alanları nelerdir? Birkaç örnek veriniz.
3. “if-else” koşul yapısı nasıl çalışır?
4. “if-else if” koşul yapısının “if-else” yapısından farkı nedir? Hangi durumlarda kullanılır?
5. “switch” koşul yapısı hangi durumlarda tercih edilir? Bir örnek veriniz.
6. “Ternary” operatörü nedir ve nasıl kullanılır? Örnek vererek açıklayınız.

Başlamadan Önce
Koşul yapısı, belirli koşullar altında hangi kod satırı veya kod bloklarının çalıştırılacağını ve kodun akışını yönlendirmede kullanılan önemli bir
programlama bileşenidir. Bu bölümde koşul yapılarının farklı türleri ele alınmıştır. İlk olarak “if” koşul yapısı incelenmiştir. “if” koşul yapısı, belirli
bir koşulun doğruluğunu kontrol eder ve koşulun doğru olması durumunda belirli bir kod bloğunu çalıştırır. Ardından, “if-else” koşul yapısı ele
alınmıştır. Bu yapı ise bir koşulun doğru olup olmadığını kontrol eder ve koşul doğruysa bir kod bloğunu aksi halde başka bir kod bloğunu çalıştırır.
“if-else if” yapısı, birden fazla koşulun kontrol edilmesi gerektiğinde kullanılır ve kodun okunabilirliğini artırır. “switch” yapısı, birden çok koşulun
kontrol edilmesi gerektiğinde tercih edilir ve belirli bir koşula göre farklı kod bloklarını çalıştırır. Son olarak üçlü koşul olarak bilinen “ternary”
operatörünün kullanımıyla ilgili bilgi verilmiştir.

3.1. Koşul Yapıları

Günlük hayatta birden fazla alternatif veya olasılığın olduğu durumlarda bir karar verirken şu olay olursa şöyle yaparım veya bu olay olursa böyle
yaparım tarzı bir plan çizeriz. Programlama dillerinde de aynı şekilde hangi durumda ne yapılacağı koşul yapılarıyla belirtilir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 43 / 170
i
:
i
i
i
 Bir problemi çözerken hangi durumda hangi aksiyonun alınacağı önceden belirlenir. Benzer şekilde bir problemi programlama dili ile çözerken de
hangi durum karşısında ne yapılacağı koşul yapılarıyla bildirilir. JavaScript yorumlayıcısı kaynak kodu yukarıdan aşağıya doğru işlerken koşul
yapılarında tüm kodları çalıştırmaz. Eğer koşul sağlanmışsa sadece o koşula bağlı kodları çalıştırılır, diğer koşula ait kodları çalıştırmadan atlar.

Örneğin bir e-ticaret sitesindeki ürünlerin altında stok miktarları verilsin. Bir kullanıcı istediği herhangi bir üründen kaç adet aldığını yazarak veya
seçerek sipariş etsin. Eğer kullanıcının sipariş adedi ürünün stok miktarının altındaysa siparişin alındığı kullanıcıya bildirilmelidir. Eğer kullanıcının
girmiş olduğu sipariş adedi ürünün stok miktarının üzerindeyse kullanıcıya stok miktarının üzerinde sipariş yapamayacağı bildirilmelidir. Görüldüğü
üzere bu örnekteki bildirim mesajları kullanıcının ürün sipariş sayısına ve o ürünün stok miktarına göre değişmektedir. Programlamada bu ve benzeri
durumlar koşul yapılarıyla gerçekleştirilir. Koşul sağlanmışsa ilgili koşula ait kodlar çalıştırılır, sağlanmazsa çalıştırılmaz.

JavaScript dilinde if, if-else, if-else if ve switch koşul yapıları kullanılmaktadır. Ayrıca if-else koşul yapısının daha kısa yazımı olan ternary
operatörü de kullanılmaktadır (Svekis, Putten ve Percival, 2021).

3.1.1. if Koşul Yapısı

Bir koşula bağlı olarak çalıştırılması gereken kodlar için if koşul yapısı kullanılır. if koşul yapısı koşulun gerçekleşip gerçekleşmediğini veya koşulun
sağlanıp sağlanmadığını kontrol eder. Eğer koşul sağlanıyorsa (koşul true dönmüşse) koşula bağlı olan kodlar çalıştırılır.

if koşul yapısının sözdizimi aşağıda verilmiştir.

Eğer koşul sağlanıyorsa ilgili koşula bağlı süslü parantezlerin arasındaki (kod bloğundaki) kodlar çalıştırılır. Koşul sağlanmazsa bu durumda koşula
bağlı kodlar çalıştırılmaz ve yorumlayıcı kodun akışını süslü parantezden sonraki kod satırına verir (Flanagan, 2020).

Örneğin aşağıdaki JavaScript kodunda sayi isminde bir değişken tanımlanmış ve 10 değeri atanmıştır. Sonraki satırda sayi değişkeninin değerinin
5’ten büyük olduğu if koşul yapısıyla kontrol edilmiştir. Koşul sağlanmışsa konsola “Sayı beşten büyüktür.” yazdırılacaktır. 10 sayısı 5’ten büyük
olduğundan koşul sağlanacaktır.

Bir başka örnekte kullanıcıdan bir sayı girmesini isteyelim. Girilen sayı çift ise sayfada sayının çift olduğu yazdırılsın. Aşağıda bu problemin HTML
ve JavaScript kodu verilmiştir. Sayı girilmesi için sayi_Alani adında bir input form elemanı oluşturulmuştur. Kullanıcı sayı girdikten sonra kontrol
edilmesi için Sayı Kontrol ismindeki butona basması gerekmektedir. Butonun click olayına bağlı olarak sayiyiKontrolEt() isimli fonksiyon
çalıştırılacaktır. Fonksiyonda kullanıcının girdiği değer parseInt() fonksiyonuyla sayı veri tipine dönüştürülmüştür. Sonraki if koşul yapısında sayının
2’ye göre modu alınmıştır. Kalan değer 0 ise sayi_Durumu isimli div alanına Çift yazdırılmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 44 / 170
i
:
i
i
i
 Bir başka örnek olarak JavaScript koduyla 1-5 arası rastgele sayı üretilsin ve kullanıcıdan 1-5 arası sayı girmesi istensin. Eğer kullanıcının girdiği sayı
ile rastgele üretilen sayıyla aynı ise sayfaya “Bildiniz” mesajı çıktılansın. Bu problemin if koşul yapısıyla çözümü aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 45 / 170
i
:
i
i
i
 3.1.2. if-else Koşul Yapısı

if koşul yapısı bir koşulu kontrol eder ve eğer koşul sağlanıyorsa o koşula bağlı ilgili kodları çalıştırırdı. Fakat gerçek hayat problemlerinde iki veya
daha fazla durum söz konusudur. Böyleyken ilk durumun gerçekleşmemesi halinde diğer duruma bağlı kodların çalıştırılması için else deyimi
kullanılır. else deyimi koşul almaz (Horstmann, 2020). Sadece if koşul yapısında verilen koşulun sağlanmaması durumunda hangi kodların
çalıştırılacağı else ile bildirilir. if-else koşul yapısının sözdizimi aşağıda verilmiştir.

if koşul yapısında örneklenen problemi ele alalım. Eğer kullanıcının girmiş olduğu sayı çift ise sayfaya sayının çift olduğu yazdırılıyordu. Fakat sayı
tek ise ne yapılacağı belirtilmemişti. İşte bu ikinci durumda yani sayı tek ise ne yapılacağı else deyimiyle ile verilir. Aşağıda bu işi gerçekleştiren
kodlar if-else koşul yapısı ile verilmiştir. Her iki örnekteki sayfa yapısı aynı olduğu için HTML kodları verilmeyip yalnızca sayiyiKontrolEt()
fonksiyonunun içi verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 46 / 170
i
:
i
i
i
 3.1.3. if-else if Koşul Yapısı

if koşul yapısında bir duruma ait koşul kontrol edilmekteydi. if-else koşul yapısında ise iki duruma ait koşullar verilir. Öte yandan ikiden fazla durum
söz konusuysa bunların her birine ait kodlar if-else if koşul yapısıyla verilir. if-else if koşul yapısının sözdizimi aşağıda verilmiştir. Sözdizimde iki adet
else if koşul yapısı verilmiştir fakat probleme bağlı olarak else if koşul yapılarının sayısı artırılabilir. Sözdizimin en sonunda verilen else deyimi isteğe
bağlı olarak bulunur (Ackermann, 2022). Yani else deyiminin if-else if koşul yapısında bulunması zorunlu değildir.

Sayının durumuna bağlı olarak ekrana tek veya çift yazdıran problemi tekrar ele alalım. Bu problemde sayının iki durumuna (tek veya çift olması)
ilişkin kodlar if-else ile verilmişti. Fakat sayının sıfır olma durumu ayrıca işlenecek olursa üç durumlu bu problemi çözebilmek için if-else if-else
koşul yapısı kullanılmalıdır. Ele aldığımız bu problem if ve if-else bölümündeki örneğinin aynısı olduğundan yalnızca sayiyiKontrolEt()
fonksiyonunun içi verilmiştir. JavaScript kodu incelendiğinde ilk koşul yapısı if ile verilmiş, ikinci ve üçüncü duruma ait koşullar else if koşul
yapısıyla verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 47 / 170
i
:
i
i
i
 Bu kod dikkatle incelendiğinde en sonda else deyimi yer almamaktadır. Fakat istenirse bu kod örneği en sonda else olacak şekilde yazılabilir.
Hatırlanacak olursa else deyimi kendisinden önceki if veya else if koşullarının gerçekleşmemesi halinde çalıştırılacak kodları vermek içi
kullanılıyordu. Ele aldığımız problem üç durumdan oluşmaktadır. İlk durumda sayının sıfır olması if ile, ikindi durum sayının çift olması else if ile ve
üçüncü durumda sayının tek olması başka bir else if ile işlenmiştir. Bunun gibi üç durumdan oluşan problemlerde ilk durum if ile ikinci durum else if
verildiğinde geriye zaten son bir durum kaldığından bu durumu else if ile vermek yerine sadece else deyimiyle vermek de mümkündür. Yukarıda
örneklenen bu kodun en sonundaki else if yapısı ve buna bağlı koşul yerine yalnızca else deyimi verilse kod aynı şekilde çalışacaktır. Aşağıda bunu
örnekleyen JavaScript kodu verilmiştir.

3.1.4. switch Deyimi

İki veya daha fazla durum söz konusu ise if – else if koşul yapısı kullanılmalıydı. switch deyimi de benzer şekilde çoklu durumlarda kullanılan koşul
yapılarından biridir. Sözdizimi aşağıda verilmiştir (Ackermann, 2022). switch deyiminde ifade kontrol edilir. İfadeyle eşleşebilecek değerler case ile
verilir. JavaScript yorumlayıcısı ifadenin sonucu yukarıdan aşağıya case değerlerinde sırayla kontrol eder. Eşleşen case değerine bağlı kodlar
çalıştırılır. İlgili kodların bittiğini ifade etmek break anahtar kelimesi kullanılır. İfade hiçbir case değeriyle eşleşmezse en sonda verilen default
bloğundaki kodlar çalıştırılır. default bloğunun bulunması zorunlu değildir.

switch deyimini anlamak için kullanıcıdan bir sayı girmesini isteyelim. Girilen sayı sıfırsa ekrana sıfır yazdırsın, çift ise ekrana çift yazdırsın, tek ise

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 48 / 170
i
:
i
i
i
 ekrana tek yazdırsın, girilen değer sayı değilse bu durumda ekrana Sayı değil yazdırsın. Bu problemin switch deyimiyle çözümü aşağıda verilmiştir.
Ele aldığımız bu problem if ve if-else bölümündeki örneğinin aynısı olduğundan yine yalnızca sayiyiKontrolEt() fonksiyonunun içi verilmiştir.

Kod çalıştırılıp 7 değeri girildiğinde oluşan ekran görüntüsü aşağıda verilmiştir.

Eğer birden fazla case değerine bağlı olarak aynı kodlar çalıştırılacaksa bu case değerleri alt alta verilir ve devamında buna bağlı çalışacak ilgili kodlar
yazılır. Bu kullanımı örneklemek için kullanıcıdan bir gün yazmasını isteyelim. Bir buton ile yazılan gün kontrol edilsin. Butona basıldığında yazılan
gün hafta içi bir gün ise ekrana “Hafta İçi” yazdırsın. Girilen gün Cumartesi veya Pazar ise ekrana “Hafta Sonu” yazdırsın. Herhangi bir gün adı
girilmemişse “Gün girilmedi” yazdırsın. Aşağıda bu problemin switch deyimiyle çözümünü içeren kodlar verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 49 / 170
i
:
i
i
i
 Kod çalıştırılıp gün alanına Cuma yazıldığında oluşan ekran görüntüsü aşağıda verilmiştir.

3.1.5. Ternary Operatörü (?:)

Üçlü koşul operatörü (diğer adı ternary operatör) if-else koşul yapısının daha kısa ifadeyle yazımıdır. ternary operatörü üç tane işlenen alır. Aşağıda
sözdizimi verilmiştir.

koşul ? değer1 : değer2;

ternary operatörü bir koşulu kontrol eder. Eğer koşul true döndürürse değer1 kullanılır, eğer koşul false dönerse değer2 kullanılır.

if-else koşul yapısında da örneklenen sayının durumuna bağlı olarak ekrana tek veya çift yazdıran problemin ternary operatörü ile çözümü aşağıda
verilmiştir. Ele aldığımız bu problem if ve if-else bölümündeki örneğinin aynısı olduğundan yine yalnızca sayiyiKontrolEt() fonksiyonunun içi
verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 50 / 170
i
:
i
i
i
 Aşağıda verilen bir başka örnekte kullanıcının yaşı istenmektedir. Eğer kullanıcının yaşı 18’den küçükse sisteme kaydolamayacağı, 18 veya büyükse
sisteme kaydolabileceği bilgisi ekrana çıktılanmaktadır. Aşağıdaki satırda verilen koşullu operatör bu durumun kontrolünü sağlamaktadır.

Bölüm Özeti
Kaynak kodlar yukarıdan aşağıya doğru sırayla çalıştırılır. Fakat kimi zaman duruma göre bazı kodların çalışıp bazılarının çalışmaması gerekebilir.
Koşul yapıları adı üzerinde bir koşula bağlı olarak istenen kodların çalıştırılması için kullanılır.

Tek bir durum söz konusuysa if koşul yapısı kullanılır. if koşul yapısı bu durumun koşulunu kontrol eder. Eğer koşul sağlanıyorsa yani true ise koşula

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 51 / 170
i
:
i
i
i
 bağlı kodlar çalıştırılır.

Eğer iki durum söz konusuysa ve ilk duruma bağlı koşul sağlanmamışsa ikinci duruma ilişkin kodların çalışması isteniyorsa if-else koşul yapısı
kullanılır.

İkiden fazla durum söz konusuysa her bir duruma ait koşulların kontrol edilmesi için if-else if koşul yapısı kullanılır. Durum sayısına göre else if koşul
sayısı değişir.

Bir diğer koşul yapısı olan switch ise if-else if koşul yapısına benzemektedir. switch deyiminde bir ifade kontrol edilir. İfadeyle eşleşebilecek değerler
case deyimiyle verilir. İfadeyle eşleşen case deyimine bağlı kodlar çalıştırılır, diğer case deyimleri çalıştırılmaz. break deyimi, case bloğundan
çıkmak için kullanılır. Eğer switch yapısında kontrol edilen ifade hiçbir case değeriyle eşleşmezse default ile verilen blok çalıştırılır. default bloğu,
else deyimiyle aynı işlevdedir. default bloğunun switch deyiminde bulunması zorunlu değildir.

Son olarak if-else deyimiyle aynı işlevi gören üçlü koşul operatörü olan ternary operatörü de JavaScript dilinde kullanılmaktadır.

Kaynakça
Ackermann, P. (2022). JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming (First Edition.). Bonn ; Boston:
Rheinwerk Computing.

Flanagan, D. (2020). JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language (7th edition.). Sebastopol, CA:
O’Reilly Media.

Horstmann, C. (2020). Modern JavaScript for the Impatient (1st edition.). Boston Columbus New York San Francisco Amsterdam Cape Town:
Addison-Wesley Professional.

Svekis, L. L., Putten, M. van ve Percival, C. B. R. (2021). JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun,
interactive, and dynamic web apps, games, and pages. Erscheinungsort nicht ermittelbar: Packt Publishing.

Ünite Soruları

Soru-1 :

Aşağıdakilerden hangisi JavaScript’teki koşul ifadelerinden biri değildir?

(Çoktan Seçmeli)

(A) if

(B) if-else

(C) if-else if

(D) if-elif

switch

Cevap-1 :

if-elif

Soru-2 :

Aşağıda verilen JavaScript koduna göre konsolda çıktılanan değer hangi seçenekte doğru verilmişir?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 52 / 170
i
:
i
i
i
 (Çoktan Seçmeli)

(A) &

(B) ^

(C) ?

(D) $

Cevap-2 :

Soru-3 :

Aşağıda verilen kod bloğuna göre hangisi doğrudur?

(Çoktan Seçmeli)

(A) puan 80 olarak tanımlanmış ise "Maalesef, sınavı geçemediniz." yazdırılır.

(B) puan 40 olarak tanımlanmış ise "Maalesef, sınavı geçemediniz." yazdırılır.

(C) puan 80 olarak tanımlanmış ise if koşulu false döner.

(D) puan 40 olarak tanımlanmış ise if koşulu true döner.

puan 60 olarak tanımlanmış ise ekrana hiçbir şey yazdırılmaz.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 53 / 170
i
:
i
i
i
 Cevap-3 :

puan 40 olarak tanımlanmış ise "Maalesef, sınavı geçemediniz." yazdırılır.

Soru-4 :

Bir dersin geçme notu aşağıdaki Javascript kodları ile belirlenmektedir. Buna göre; eğer bir öğrencinin notu 82 ise ekrana yazdırılacak ifade hangi
seçenekte doğru şekilde verilmiştir?

(Çoktan Seçmeli)

(A) Notunuz: A

(B) Notunuz: B

(C) Notunuz: C

(D) Notunuz: D

Notunuz: F

Cevap-4 :

Notunuz: B

Soru-5 :

parseInt() fonksiyonunun görevi aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) Verilen değeri tam sayıya dönüştürür.

(B) Verilen değeri ondalıklı sayıya dönüştürür.

(C) Verilen değeri bir dizgeye dönüştürür.

(D) Verilen değeri boolean değere dönüştürür.

Verilen değere sıfır değerini atar.

Cevap-5 :

Verilen değeri tam sayıya dönüştürür.

Soru-6 :

Aşağıdaki JavaScript kodunda kullanılan operatör hangi seçenekte doğru verilmiştir?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 54 / 170
i
:
i
i
i
 (Çoktan Seçmeli)

(A) Küçük eşittir operatörü

(B) Büyüktür operatörü

(C) Eşit değildir operatörü

(D) Ternary operatörü

VE operatörü

Cevap-6 :

Ternary operatörü

Soru-7 :

Tanımlanan bir gun değişkeninin değerine göre, hafta içi, hafta sonu veya geçersiz gün olarak gunAdi değişkeni atanması ve konsola yazdırılması
isteniyor. Bunu gerçekleştirmek için JavaScript dilinde kullanılabilecek en uygun yapı aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) if

(B) if-else

(C) else

(D) ternary

(E) switch

Cevap-7 :

switch

Soru-8 :

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

(Çoktan Seçmeli)

(A) durum = (sayi > 0) ? "Pozitif" : "Negatif veya sıfır";

(B) durum = (sayi < 0) ? "Pozitif" : "Negatif veya sıfır";

(C) durum = (sayi > 0) & "Pozitif" : "Negatif veya sıfır";

(D) durum = (sayi > 0) ? "Pozitif" ; "Negatif veya sıfır";

durum == (sayi < 0) ? "Pozitif" : "Negatif veya sıfır";

Cevap-8 :

durum = (sayi > 0) ? "Pozitif" : "Negatif veya sıfır";

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 55 / 170
i
:
i
i
i
 Soru-9 :

Aşağıdaki JavaScript kodunun çıktısı hangi seçenekte doğru verilmiştir?

(Çoktan Seçmeli)

(A) "Merhaba"

(B) "Merhaba !"

(C) "Merhaba, misafir!"

(D) "Merhaba, JavaScript!"

"Merhaba, !"

Cevap-9 :

"Merhaba, JavaScript!"

Soru-10 :

Javascript'te koşul yapıları ile ilgili aşağıdaki ifadelerden hangisi yanlıştır?

(Çoktan Seçmeli)

(A) if-else koşul yapısı, bir koşulun doğru olup olmadığını kontrol etmek için kullanılır.

(B) switch-case yapısı, bir ifadenin değerlerini kontrol etmek için kullanılır.

(C) Ternary operatörü, koşullu ifadelerin kısa bir şekilde yazılmasını sağlar.

(D) if-else koşul yapısında if koşulu false dönerse, else bloğu içindeki satırlar çalıştırılır.

(E) Koşul ifadeleri, sadece tek bir koşulun kontrol edilmesini sağlar.

Cevap-10 :

Koşul ifadeleri, sadece tek bir koşulun kontrol edilmesini sağlar.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 56 / 170
i
:
i
i
i
 4. Döngü Yapıları

Özlü Söz
“Kodlama sadece kod değildir, gurur duymamız gereken canlı bir şeydir.”

– Daniel Wellman

Kazanımlar
1. JavaScript dilinde döngü yapılarının önemini kavrar ve belirli işlemlerin tekrarlanmasını sağlamak için döngülerin kullanımını öğrenir.
2. Farklı döngü türlerini tanır ve bu türlerin nasıl kullanıldığını öğrenir.
3. “for” döngüsünün çalışma prensibini ve “for” döngüsünü kullanmayı bilir.
4. “while” döngüsünün işleyişini kavrar ve hangi durumlarda kullanılacağını bilir.
5. “do-while” döngüsünün nasıl çalıştığını ve neden kullanıldığını bilir.
6. Nesnelerin özellikleri/anahtarları üzerinde gezinmek için “for..in” döngüsünü kullanmayı öğrenir ve bu döngünün nasıl uygulandığını bilir.
7. Dizi elemanları üzerinde gezinmek için “for..of” döngüsünü kullanmayı öğrenir ve bu döngünün nasıl kullanıldığını bilir.
8. İç içe döngülerin kullanımını anlar ve gerektiği durumda iç içe döngüleri nasıl kullanabileceğini bilir.
9. “break” ve “continue” döngü kontrol komutlarını öğrenir ve döngülerin akışını yönlendirmek için bunların nasıl kullanıldığını bilir.

Birlikte Düşünelim
1. Döngüler hangi durumlarda kullanılır?
2. Hangi durumlarda “for” döngüsü tercih edilir?
3. “while” döngüsüyle “do-while” döngüsü arasındaki temel fark nedir?
4. Bir dizideki elemanlara erişmek için “for..in” döngüsü ne zaman kullanılabilir?
5. “for..of” döngüsü hangi tür veri yapıları üzerinde çalışır ve nasıl kullanılır?
6. İç içe döngü kullanımı nedir?
7. “break” ve “continue” döngü kontrol komutları hangi durumlarda kullanılır?

Başlamadan Önce
Döngü yapıları, belirli işlemlerin tekrarlanmasını sağlamak için kullanılır. Bu bölümde JavaScript dilinde döngülerin çeşitleri ve kullanımları ele
alınmıştır. İlk olarak “for” döngüsü incelenmiştir. Döngünün kaç kere tekrarlanacağı biliniyorsa genellikle “for” döngüsü kullanılır. “while” döngüsü
bir koşul doğru olduğu müddetçe belirli bir kod bloğunun tekrar çalıştırılmasını sağlar. “do-while” döngüsü ise kod bloğunu en az bir kere çalıştırmak
için kullanılır ve ardından koşul kontrol edilir. “for..in” ve “for..of” döngüleri, nesnelerin veya dizilerin elemanlarını üzerinde gezinmek için kullanılır
ve farklı kullanım alanlarına sahiptir. Bu bölümde ayrıca iç içe döngülerin kullanımı örneklenmiştir. Son olarak döngü akışını yönlendirmek için
kullanılan “break” ve “continue” döngü kontrol komutları ele alınmıştır. “break” komutu bir döngüyü sonlandırmak için kullanılırken, “continue”
komutu döngünün bir sonraki iterasyona atlamasını sağlar.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 57 / 170
i
:
i
i
i
 4.1. Döngüler
Kaynak kodda kimi zaman bazı kod satırlarının tekrar tekrar çalıştırılması gerekebilir. Bu durumda o satırları tekrar yazmak yerine döngüler kullanılır.
Döngüler program içerisinde tekrarlı kere çalıştırılması gereken kod satırlarını yürütmek için kullanılır. Böylece kaynak kodda kod satırı azalır ve bu
sayede kodun bakımı ve yönetimi daha kolaylaşır.

Döngünün her tekrarına iterasyon denir (Ackermann, 2022). Döngünün kaç kere tekrarlandığını sayan döngü indisi veya döngü sayacı (kısaca sayaç)
kullanılır. Döngünün her iterasyonunda sayaç değeri bir artırılır.

4.2. Döngü Türleri

Döngüler programlama dillerinin en temel yapıları arasındadır. Programlama dillerinde döngüler kaç kere çalışacağı baştan belli olan döngüler ve kaç
kere çalışacağı baştan bilinmeyen döngüler olarak iki kategoriye ayrılır.

Döngülerin belirli bir tekrardan sonra sonlanması gerekir, aksi halde döngüler sürekli çalışacaktır. Döngülerin istenildiği kadar çalışmasını sağlamak
için bir koşul gerekir (Flanagan, 2020). Bu koşul sağlandığı müddetçe döngü çalışır, sağlanmadığında döngü sonlanır. Döngüler sınıflandırılırken
koşulun baştan kontrol edildiği döngüler ve koşulun sonda kontrol edildiği döngüler olarak da tasnif edilmektedir. for döngüsünde ve while
döngüsünde koşul başta kontrol edilir. do-while döngüsünde ise koşul sonda kontrol edilir. Koşulun başta kontrol edildiği döngülerde eğer koşul
sağlanmıyorsa döngü hiç çalışmaz, koşul sağlanıyorsa döngü çalışır. Özetle döngü yapıları koşul sağlandığı müddetçe çalışır. JavaScript dilinde çok
sayıda eleman veya alan içeren dizi, object gibi yapıların eleman veya alanlarını sırayla kolayca işlemek için for..in ve for..of döngüleri de
bulunmaktadır.

4.2.1. for Döngüsü

Döngünün kaç kere çalışacağının bilindiği durumlarda for döngüsü kullanılır. for döngüsünün sözdizimi aşağıda verilmiştir (Horstmann, 2020).

Sözdizimden de görüleceği üzere for döngüsü başlangıç, koşul ve değişim olmak üzere üç bileşenden oluşur. Bileşenler arasında noktalı virgül ;
kullanılır.

Başlangıç: for döngüsünün başlangıç değerini belirtir. Sadece döngünün başlangıcında bir kere çalıştırılır.

Koşul: Döngünün çalışmaya başlaması için ve döngünün kaç kere çalışacağını kontrol etmek için gereken koşuldur. Bu koşul hem döngüye başlarken
hem de döngünün her iterasyonunda kontrol edilir. Koşul sağlanmazsa döngüye hiç girilmez. Eğer koşul sağlanıyorsa döngü çalıştırılır. Döngünün her
iterasyonunda da koşulun sağlanıp sağlanmadığı kontrol edilir. Koşul sağlanmadığında da döngü sonlandırılır.

Değişim: Değişim bileşeninde döngü sayaç değerinin her iterasyonda ne kadar değişeceği verilir. Bu değişim pozitif veya negatif olabilir. Değişim
değeri her iterasyonda çalıştırılır.

Örneğin 1’den 10’a kadar birer artan sayıların toplamını bulmak isteyelim. Bu problem için for döngüsü idealdir. Çünkü döngünün hem başlangıç hem
de bitiş değeri yani döngünün kaç kere tekrar edeceği bilinmektedir. Bu durumda for döngüsünün başlangıç değeri 1, bitiş değeri de 10’dur. Yani
döngü 10 kere çalışacaktır. Döngünün bitiş değeri i <= 10 olarak döngü koşulunda verilmiştir. Döngünün değişim parametresi ise döngünün birer birer
artması istendiği için +1’dir. Bu sebeple değişim miktarı i++ olarak verilmiştir. Verilen problemde sayıların toplamını tutmak için ayrıca bir değişken
tanımlamak gerekmektedir, bu sebeple toplam isimli değişken tanımlanmıştır. Aşağıda bu problemin JavaScript kodu verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 58 / 170
i
:
i
i
i
 Web sayfası çalıştırıldığında aşağıdaki çıktıyı verecektir.

1-10 arası sayıların toplamı: 55

for döngüsü incelendiğinde döngü indisi olarak i değişkeni kullanılmıştır. Dikkat edilirse i değişkeni daha önce tanımlanmamıştır. Döngü indisinin
daha önce tanımlanmasına gerek yoktur, döngü başlığında bildiriminin yapılması yeterlidir. Bununla birlikte döngü indisi olan i değişkenine yalnızca
döngü içinde erişilebilir, döngünün dışında döngü indisine erişilemez. Örneğin döngü bittikten sonra i değişkeni çıktılanmak istendiğinde kod hata
verecektir. Aşağıda bu durum örneklenmiştir.

Döngü indisi olarak seçilen değişken döngüden önce tanımlanmış olsa dahi o değer kullanılmaz, döngü indisi döngü başlığında verilen başlangıç
değeriyle başlar. Aşağıda bu durum örneklenmiştir. i değişkeni döngüden önce tanımlanmış ve 100 değeri atanmıştır. Akabinde döngü başlığında
döngü indisi olarak da i değişkeni kullanılmıştır. Bu durumda i değişkeni döngü içinde kendisine atanan başlangıç değeri olan 1 değerini kullanır, daha
önce atanan 100 sayısı dikkate alınmaz. Bununla birlikte döngü bittikten sonra i değişkeni yazdırılmak istendiğinde yukarıdaki koddaki gibi hata
alınmaz, bunun yerine 100 değeri çıktılanır. Çünkü i değişkeni döngüden önce ayrıca tanımlandığı için döngü bitiminde de kendi orijinal değeriyle
erişilebilir. Aşağıda bu durum örneklenmiştir.

Web sayfası bu JavaScript koduyla çalıştırıldığında aşağıdaki çıktıyı verecektir.

1-10 arası sayıların toplamı: 55

i değeri: 100

for döngüsü her zaman bir artmak zorunda değildir. for döngüsünün değişim miktarı her iterasyonda ikişer ikişer artacak, onar onar katlanacak, beşer
beşer bölünecek, üçer üçer azalacak vb. istenildiği gibi verilebilir. Bu durumda döngünün koşulu da değiştirilmelidir.

Aşağıdaki örnekte 150-50 arası beşer azalan sayıların toplamını ekrana çıktılayan Web sayfası ve JavaScript kodu verilmiştir. Döngü incelenirse
başlangıç değerine i = 150 verildiği görülecektir. Döngünün 150 ve 50 arası sayılarla çalışması istendiğinden döngü koşulu olarak i >= 50 verilmiş,
böylece döngü indisinin 50 değerinden büyük olduğu müddetçe döngünün çalışması sağlanmıştır. Döngünün beşer beşer azalması istendiğinden
değişim parametresi olarak i -= 5 verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 59 / 170
i
:
i
i
i
 Web sayfası çalıştırıldığında aşağıdaki çıktıyı verecektir.

150-50 arası beşer azalan sayıların toplamı: 2100

for döngüsü başı ve sonu belli olan yani kaç kere tekrarlanacağı baştan belli olan döngü gerektiren durumlarda kullanılır. Buradan hareketle dizi
elemanlarının kaç tane olduğu bilindiğinden for döngüsü dizi elemanlarını döngü içinde işlemek (iterate etmek) için kullanılır. Aşağıdaki örnekte
bolumler isimli bir dizi tanımlanmıştır. Sonraki satırda bolumler dizisinin elemanları for döngüsü ile sayfaya çıktılanmıştır. Dizilerde ilk elemanın
indisi 0 olduğundan dizinin başlangıç değeri let i = 0; olarak verilmiştir. Dizinin ne kadar tekrar edeceğini kontrol etmek
için i<[Link] koşulu verilmiştir. Dizi elemanları sırayla işlenmek için artış miktarı olarak 1 verilmiştir.

Gerçek hayat problemlerinde döngüler ve koşul yapıları sıklıkla birlikte kullanılır. Örneğin 1-50 arası üçe bölünebilen sayıların kaç tane olduğunu
bulmak için döngü ve koşul yapısı kullanılmalıdır. 1-50 arası sayıları iterate etmek için döngü kullanılmalı, döngü içindeki her bir sayının üçe bölünüp
bölünmediğini kontrol etmek için de koşul yapısı kullanılmalıdır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 60 / 170
i
:
i
i
i
 Web sayfası çalıştırıldığında aşağıdaki çıktıyı verecektir.

1-50 arası üçe tam bölünebilen sayıların adedi: 16

for döngüsünde koşul hem döngüye girerken hem de döngünün her iterasyonunda kontrol edilir. Eğer koşul en baştan sağlanmazsa döngü hiç
çalışmayacaktır. Örneğin aşağıdaki for döngüsünde döngü indisine başlangıç değeri olarak 10 atanmış, koşul olarak ise döngü indisinin 1’den küçük
olması verilmiştir. 10 sayısı 1’den küçük olmadığından döngü koşulu baştan sağlanmayacak ve döngü hiç çalışmayacaktır.

4.2.2. while Döngüsü

Döngünün kaç kere çalışacağının bilinmediği durumlarda while döngüsü kullanılır. while döngüsü koşula bağlı olarak çalışır. Koşul döngüye
başlarken ve her iterasyonda kontrol edilir. Koşul en başta sağlanmazsa döngüye hiç girilmez (Horstmann, 2020). Koşul sağlanıyorsa (sağlandığı
müddetçe) döngü çalışır. Döngünün bir noktada sonlanması için koşulun sağlanmaması (koşulun false olması) gerekir. while döngüsünün sözdizimi
aşağıda verilmiştir .

Örneğin 1’den itibaren ardışık sayıların toplamını bulmak isteyelim. Fakat toplam değer 1000’den büyük olduğunda döngü sonlansın. Bu problemde
döngünün başlangıç değeri bilinmektedir (1) fakat döngünün bitiş değeri yani hangi sayıdan itibaren toplamın 1000’den büyük olacağı
bilinmediğinden (döngünün kaç kere çalışacağı baştan bilinemediğinden) while döngüsü kullanılmalıdır. Bu problemin while döngüsü ile çözümü
aşağıda verilmiştir. Sayıların toplam değerini saklamak için toplam değişkeni tanımlanmış ve henüz toplamaya başlanmadığından 0 başlangıç değeri
atanmıştır. Döngü indisi olarak sayi değişkeni seçilmiş ve döngü 1’den başlayacağı için başlangıç değeri olarak 1 atanmıştır. while döngüsünde koşul
olarak toplam değerin 1000’den küçük veya eşit olduğu müddetçe çalışması istenmiştir. Bir diğer ifadeyle toplam değer 1000’den büyük olduğunda
döngüden çıkılacaktır. İlk durumda toplam değer 0 olduğundan ve koşul toplam <= 1000 olduğundan koşul sağlanmaktadır (0 < 1000) ve döngü
çalışmaya başlayacaktır. Döngünün her iterasyonunda toplam değeri o anki döngü indisi olan sayıyla toplanmış, o anki sayi ve toplam değerleri
ekrana çıktılanmış ve sayi değişkeni bir artırılmıştır.

Bu kod HTML sayfası içinde <body> etiketleri arasında kaydedilip çalıştırıldığında aşağıdaki çıktı alınacaktır. Çıktıdan da görüleceği üzere 1’den
itibaren ardışık sayılar toplanmış ve 45. sayıda toplam değer 1035 olduğunda koşul sağlanmayarak (1035 <= 1000) döngüden çıkılmıştır

Sayi: 1, Toplam: 1

Sayi: 2, Toplam: 3

Sayi: 3, Toplam: 6

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 61 / 170
i
:
i
i
i
 …

Sayi: 43, Toplam: 946

Sayi: 44, Toplam: 990

Sayi: 45, Toplam: 1035

while döngüsünde kimi zaman koşul yerine true değerine sahip bir değişken verilebilir. Yukarıdaki problem bu yöntemle aşağıdaki gibi de yazılabilir.
Kod incelediğinde boolean veri tipinde kosul isminde true değerine sahip bir değişken tanımlanmıştır. while döngüsüne koşul verilmemiş bunun
yerine kosul isimli değişkenin değeri verilmiştir. while döngüsü koşul sağlanmışsa (true ise) döngü çalışmaya başlayacaktır ve koşul sağlandığı
müddetçe (true olduğu müddetçe) döngü çalışacağından döngümüz çalışacaktır. Döngünün içinde toplam değer if koşul yapısıyla kontrol edilerek
1000’den büyük ise koşul değişkeninin değerine false atanmıştır. Bu durum gerçekleştiğinde döngü sonraki iterasyonda koşulu kontrol edecek ve
koşul sağlanmadığı için de döngü sonlanacaktır.

Bu JavaScript kodu problemde istenileni yerine getirecek ve önceki kodun çıktısının aynısını verecektir.

4.2.3. do-while Döngüsü

for ve while döngülerinde koşul en başta kontrol edilmekteydi. Bu durumda koşul en başta hiç sağlanmıyorsa döngü hiç çalışmayacaktır. Fakat kimi
zaman döngünün en az bir kere çalışması gereken durumlar olabilir. İşte do-while döngüsü bu durumlar için kullanılır (Ackermann, 2022). Bu sebeple
do-while döngüsünde koşul başta değil sonda verilir. Aşağıda verilen do-while sözdiziminden de görüleceği üzere do{ } arası döngü bloğunda kodlar
çalıştırılmakta ve akabinde while ile koşul kontrol edilmektedir. Eğer koşul sağlanıyorsa döngü tekrar çalıştırılacak, koşul sağlanmıyorsa döngünün
çalışması sonlandırılacaktır. Bu durumda döngü en az bir kere çalışmış olacaktır.

Örneğin kullanıcıdan bir sayı girmesini isteyelim. Kullanıcı tek sayı girerse kullanıcıdan sayı istemeye devam edilsin, çift sayı girdiğinde program
sonlansın. En sonda da girilen tüm sayıların toplamı çıktılansın. Bu problemde kullanıcının ne zaman çift sayı gireceğini bilemeyiz. Kullanıcı ilk
denemede de çift sayı girebilir, sonraki denemelerin birinde de çift sayı girebilir. Bu sebeple kullanacağımız döngü en az bir kere çalışmalıdır. İşte bu
gibi döngünün en az bir kere çalışması gereken durumlarda do-while döngüsü kullanılmalıdır. Aşağıda bu problemin do-while döngüsüyle çözümünü
içeren HTML sayfası ve JavaScript kodu verilmiştir. JavaScript kodu incelendiğinde kullanıcının girdiği sayıların toplamını tutacak toplam isimli bir
değişken tanımlanmış ve 0 başlangıç değeri atanmıştır. Kullanıcının girdiği sayıyı saklamak için sayi isimli değişken bildirilmiştir. Kullanıcı girdisini
almak için prompt komutu kullanılmıştır. prompt komutu “Bir sayı girin:” başlıklı bir mesaj ekranında kullanıcının sayı girmesini sağlamaktadır. Bu
problemde amaç do-while döngüsünü örneklemek olduğundan kodu öğrenci açısından daha karmaşık hale getirmemek için kullanıcının bu ekranda
sayı harici değerler girmediği varsayılmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 62 / 170
i
:
i
i
i
 Web sayfası çalıştırıldığında kullanıcıdan bir sayı girmesini isteyecektir. Çıkan ekranda 5 sayısını girelim.

Girilen sayı çift olmadığı için Web sayfası bizden tekrar sayı girmemizi isteyecektir. Gelen ekranda bu sefer 6 sayısını girelim.

Bu sefer çift sayı girildiğinden do-while döngü koşulu (6 % 2 == 1) sağlanmayacak ve döngüden çıkılacaktır. JavaScript kodu girilen 5 ve 6 sayılarını
toplamını ekrana çıktılayacaktır.

Toplam: 11

Bir diğer örnek olarak sayı tahmin oyunu yapalım. JavaScript koduyla 0-10 arası rastgele bir sayı üretelim ve kullanıcıdan 0-10 arası bir sayı girmesini
isteyelim. Eğer kullanıcı rastgele üretilen bu sayının aynısını girerse ekrana “Bildiniz” yazalım, bilemezse kullanıcıdan tekrar sayı girmesini isteyelim.
Bu durumda kullanıcıdan kaç kere sayı isteyeceğimizi bilemediğimizden bir döngü kullanmalıyız. Bu problem örneğinde kullanıcı ilk seferinde veya
sonraki tahminlerin birinde sayıyı doğru tahmin edebilir. Bu sebeple döngünün en az bir kere çalışması gerekecektir. Bu yüzden bu problemde do-
while döngüsü kullanılmalıdır.

Aşağıdaki JavaScript kodunun ilk satırında [Link]() * 11 ifadesiyle 0-10 arası rastgele bir sayı üretilmekte ve üretilen sayı [Link]()
metoduyla yuvarlanmaktadır. do-while döngüsünün içinde prompt metoduyla kullanıcıdan bir sayı girmesi istenmektedir. do-while döngüsüne koşul
olarak rastgele üretilen sayı ile kullanıcının girdiği sayının aynı olmama durumu verilmiştir. Böylece rastgele üretilen sayı ile kullanıcının girdiği sayı
aynı olduğunda döngü sonlanacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 63 / 170
i
:
i
i
i
 Web sayfasını çalıştırıp tahmin etmeye başlayalım. JavaScript kodu doğru tahmin edene kadar bizden sayı isteyecektir. Sayı doğru tahmin edildiğinde
tekrar sayı girmemizi istemeyecek ve sayfada “Bildiniz” yazacaktır.

4.2.4. for..in Döngüsü

Diziler indis-değer, objectler ise anahtar-değer çiftlerinden oluşurlar. Dizi ve object türünde veri yapılarının anahtarlarını (dizilerin indisleri ve
objectlerin anahtarları) döngü içinde kullanmak (üzerinde işlem yapabilmek) için for..in döngüsü kullanılır (Flanagan, 2020; Svekis, Putten ve
Percival, 2021).

Örneğin aşağıda bolumler adında dizi tanımlanmıştır. Bu dizinin indislerini döndürmek için for..in döngüsü kullanılır. Diziye sadece elemanlar
atanmış fakat indisler verilmemiştir. JavaScript dilinde dizi indisleri sıfırdan başlamakta ve birer artmaktaydı. Bu durumda kod çalıştırıldığında
sıfırdan başlayarak dizi indislerini ekrana çıktılayacaktır.

Bu sayfa çalıştırıldığında konsola aşağıdaki çıktıyı verecektir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 64 / 170
i
:
i
i
i
 2

for..in döngüsü object veri tipinde değişkenlerle (nesnelerle) birlikte kullanıldığında nesnelerin anahtarlarını işler. Aşağıda bununla ilgili örnek
verilmiştir. for..in döngüsünde bolumler adındaki nesnenin anahtarları konsola çıktılanmaktadır.

Bu sayfa çalıştırıldığında konsola aşağıdaki çıktıyı verecektir.

WTKO

BLPR

SSAO

Object veri tipindeki nesnelerin anahtarlarının yanı sıra değerleri de for..in döngüsüyle işlenebilir. Fakat bu durumda [indis] notasyonu kullanılmalı ve
dizinin indisi olarak döngü değişkeni verilmelidir. Aşağıdaki JavaScript kodunda bu durum örneklenmiş ve hemen altında kodun çıktısı paylaşılmıştır.

WTKO : Web Tasarımı ve Kodlama

BLPR : Bilgisayar Programcılığı

SSAO : Sosyoloji

4.2.5. for..of Döngüsü

Dizi ve object türünde veri yapılarının değerlerini (dizinin elemanlarını ve nesnelerin değerlerini) döngü içinde kullanmak (üzerinde işlem
yapabilmek) için for..of döngüsü kullanılır (Flanagan, 2020; Svekis ve diğerleri, 2021).

Aşağıdaki örnekte bolumler dizisinin elemanları for..of döngüsüyle konsola çıktılanacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 65 / 170
i
:
i
i
i
 Bu sayfa çalıştırıldığında konsola aşağıdaki çıktıyı verecektir.

Web Tasarımı ve Kodlama

Bilgisayar Programcılığı

Sosyoloji

4.2.6. İç İçe Döngüler

Çok boyutlu veri yapılarının her bir boyutundaki değerleri işlemek için iç içe döngüler kullanılır. Özellikle matris, JSON öğesi, tablo satırlarının
verisini işlemek için iç içe döngülerin kullanılması gerekmektedir.

Aşağıda verilen 5 satır 2 sütunlu matrisi ekrana çıktılamak için iç içe döngülerin kullanılması gerekmektedir.

Aşağıda bu çıktıyı veren Web sayfasının kodları verilmiştir. İç içe döngülerin ilki satırları işlemek için ikincisi ise sütunları işlemek için
kullanılacaktır. Her iki sütun arasında bir ilişki olup olmadığı incelendiğinde ikinci sütundaki değerlerin ilk sütundaki değerlerin bir fazlası olduğu
görülecektir.

4.3. Döngü Kontrol Komutları

Koşul sağlandığı ve müddetçe döngüde tanımlı iterasyonlar sırayla ve eksiksiz çalıştırılır. Fakat kimi zaman örneğin 1 ile 10 arasındaki sayılarla işlem

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 66 / 170
i
:
i
i
i
 yapan bir döngüde bir koşul sağlanmışsa 5. iterasyonda çıkmak gerekebilir veya 3’ün tam katlarında döngünün çalışmaması ve sonraki iterasyonla
devam etmesi istenebilir. Bu amaçla break ve continue döngü kontrol komutları kullanılır. break ve continue döngü kontrol komutları sadece bir
döngüye özel değildir, tüm döngülerde kullanılır. Döngü kontrol komutları hangi durumda döngünün sonlanacağı veya hangi durumlarda döngü
iterasyonlarının çalıştırılmayacağının kontrolü için sıklıkla koşul yapılarıyla birlikte kullanılır.

4.3.1. break

Döngülerin koşul sağlandığı müddetçe tanımlı tüm iterasyonları sırayla ve eksiksiz çalıştıracağı ifade edilmişti. Fakat kimi zaman şartlar sağlanmışsa
döngünün çalışmasını sonlandırmak yani döngüden çıkmak gerekebilir. break komutu döngünün sonlanmasını sağlar (Flanagan, 2020; Svekis ve
diğerleri, 2021). break komutundan sonra kalan döngü iterasyonları çalıştırılmaz ve döngüden çıkılır.

Örneğin 1-100 arasındaki sayıların toplamını hesaplayalım. Döngünün her iterasyonunda o anki döngü indisi ve toplam değer sayfaya yazdırılsın.
Fakat toplam değer 250 veya üzeri olduğunda program sonlansın. Bu durumda toplam değeri her iterasyonda kontrol etmek gerekecektir. Toplam
değer 250 veya üzeri olmuşsa break komutuyla döngü sonlandırılmalıdır. Aşağıda bunu sağlayan Web sayfası ve JavaScript kodu verilmiştir. Toplam
değeri saklamak için toplam isminde bir değişken tanımlanmış 0 başlangıç değeri atanmıştır. Akabinde istenildiği üzere 1-100 arası sayıları
döndürmek için for döngüsü açılmıştır. Döngünün her iterasyonunda o anki döngü indisi ve toplam değeri sayfaya yazdırılmıştır. Toplam değerin 250
veya üzeri olduğunun kontrolü için if koşul yapısı kullanılmış ve koşul sağlanmışsa break komutuyla döngüden çıkılmıştır.

Web sayfası çıktısının baş tarafı ve son tarafı aşağıda verilmiştir. Görüldüğü üzere 22. sayıda toplam değer 253 olmuş ve döngüden çıkılmıştır.

Sayı: 1 , Toplam: 1

Sayı: 2 , Toplam: 3

Sayı: 3 , Toplam: 6

Sayı: 20 , Toplam: 210

Sayı: 21 , Toplam: 231

Sayı: 22 , Toplam: 253

Bir başka örnek olarak 25-250 arası 7’ye bölünebilen 10 tane sayı sayfaya çıktılansın. Bu problemde yediye bölünebilen sayı adedini tutmak için bir
değişken kullanmak ve döngü içinde bu değişkenin değeri 10 olduğunda döngüyü break komutuyla sonlandırmak gerekmektedir. Aşağıdaki Web
sayfasında yer alan JavaScript kodunda bu problemin çözümü verilmiştir. Öncelikle 7’ye tam bölünebilen sayıların adedini tutmak için adet isimli bir
değişken tanımlanmış ve bu değişkene 0 başlangıç değeri atanmıştır. Ardından 25-250 arası sayıları döndürmek için for döngüsü kurulmuştur. Döngü
içinde o anki indis değerinin 7’ye tam bölündüğünün kontrolü if koşul yapısıyla kontrol edilmiştir. Bölünüyorsa adet değişkeninin değeri 1 artırılmış
ve bölünen sayı sayfaya çıktılanmıştır. Devamında adet değişkeninin değerinin 10 olup olmadığı başka bir if koşul yapısıyla kontrol edilmiştir. adet
değişkeninin değeri 10 olduğunda break komutuyla for döngüsünün sonlanması sağlanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 67 / 170
i
:
i
i
i
 Web sayfası çalıştırıldığında aşağıdaki çıktıyı verecektir. Çıktıdan da görüldüğü üzere 25 ila 250 arasında çalışması gereken for döngüsü sayı 91
olduktan sonra çalışmamış ve döngü sonlanmıştır.

1. sayı: 28

2. sayı: 35

3. sayı: 42

4. sayı: 49

5. sayı: 56

6. sayı: 63

7. sayı: 70

8. sayı: 77

9. sayı: 84

10. sayı: 91

4.3.2. continue

Kimi zaman bazı döngü indislerinde döngünün çalışmaması istenebilir. Bu durumda döngü o iterasyonda çalışmayıp pas geçer ve bir sonraki
iterasyonla devam eder. continue anahtar kelimesi bu işlevi yerine getirmek için kullanılır (Flanagan, 2020; Svekis ve diğerleri, 2021).

Örneğin 1-100 arası sayıları ekrana çıktılamak isteyelim fakat bu sayıların içinde 7’ye tam bölünenler ekrana çıktılanmasın. Bu durumda her döngü
iterasyonunda o anki döngü indisi kontrol edilmelidir. Eğer döngü indisi 7’ye tam bölünmüyorsa ekrana çıktılanmalı, bölünüyorsa pas geçilip bir
sonraki döngü iterasyonuyla döngü çalışmaya devam etmelidir. Aşağıda bu problemin çözümü için 1-100 arası sayıları döndürmek amacıyla for
döngüsü kurulmuştur. Döngü içinde o anki döngü indisinin 7’ye tam bölündüğü if koşul yapısıyla kontrol edilmiştir. Eğer tam bölünüyorsa döngünün
kalan komutları çalıştırmaması ve sıradaki döngü indisiyle çalışmaya devam etmesi için continue döngü kontrol komut verilmiştir. Eğer tam bölünme
yoksa bu durumda o anki döngü indisi sayfaya çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 68 / 170
i
:
i
i
i
 Bölüm Özeti
Tekrar etmesi gereken kod bloklarını her seferinde tek tek yazmak yerine döngü yapıları kullanılır. Döngünün her tekrarına iterasyon denir.

Kaç kere tekrar edeceği belli döngüler için for döngüsü kullanılır. Kaç kere çalışacağı belli olmayan durumlarda while döngüsü kullanılır. Koşullar
sağlanmazsa for ve while döngüleri en baştan da çalışmayabilir. Koşula bağlı çalışması gereken fakat en az bir kere çalışması gereken durumda ise
do-while döngüsü kullanılır.

Veri yapılarını kolayca döngü içinde işlemek için for..in ve for..of döngüleri kullanılır. for..in döngüsü veri yapısının anahtarlarını, for..of döngüsü ise
indislerini işler.

Döngünün bütün iterasyonlarının çalışmasını beklemeden istenilen anda döngüden çıkmak için break anahtar kelimesi kullanılır. Bir koşul
gerçekleştiğinde döngünün o anki iterasyonunda bir şey yapmadan sıradaki indis değeriyle çalışmasını sağlamak için continue anahtar kelimesi
kullanılır.

Kaynakça
Ackermann, P. (2022). JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming (First Edition.). Bonn ; Boston:
Rheinwerk Computing.

Flanagan, D. (2020). JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language (7th edition.). Sebastopol, CA:
O’Reilly Media.

Horstmann, C. (2020). Modern JavaScript for the Impatient (1st edition.). Boston Columbus New York San Francisco Amsterdam Cape Town:
Addison-Wesley Professional.

Svekis, L. L., Putten, M. van ve Percival, C. B. R. (2021). JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun,
interactive, and dynamic web apps, games, and pages. Erscheinungsort nicht ermittelbar: Packt Publishing.

Ünite Soruları

Soru-1 :

Javascript'te döngü yapıları ile ilgili aşağıdaki ifadelerden hangisi yanlıştır?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 69 / 170
i
:
i
i
i
 (A) Döngünün kaç kere çalışacağının bilindiği durumlarda for döngüsü kullanılır.

(B) while döngüsü, bir koşul sağlandığı sürece döngünün çalışmasını sağlar.

(C) do-while döngüsü, döngü içeriğini en az bir kez çalıştırdıktan sonra koşulu kontrol eder.

(D) break komutu, döngüyü sonlandırmak için kullanılır ve döngüden çıkışı sağlar.

(E) continue ifadesi, döngüyü sonlandırmak için kullanılır ve döngüyü baştan başlatır.

Cevap-1 :

continue ifadesi, döngüyü sonlandırmak için kullanılır ve döngüyü baştan başlatır.

Soru-2 :

Aşağıdaki döngüyle ilgili verilen şıklardan hangisi doğrudur?

(Çoktan Seçmeli)

(A) 5’ten 1’e kadar (0 hariç) olan sayıları konsola yazdırır.

(B) 0'dan başlayarak 4'e kadar (5 hariç) olan sayıları konsola yazdırır.

(C) 5’ten 0’a kadar olan sayıları konsola yazdırır.

(D) 0'dan başlayarak 5'e kadar olan sayıları konsola yazdırır.

Konsola herhangi bir şey yazdırılmaz.

Cevap-2 :

0'dan başlayarak 4'e kadar (5 hariç) olan sayıları konsola yazdırır.

Soru-3 :

Aşağıdaki JavaScript kodları ile ilgili verilen seçeneklerden hangisi yanlıştır?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 70 / 170
i
:
i
i
i
 (Çoktan Seçmeli)

(A) Kullanıcıdan sürekli olarak bir sayı girmesi istenir.

(B) Kullanıcı "exit" yazana kadar döngü devam eder.

(C) Döngü, sonsuz döngüye girer ve ekrana sürekli kullanıcının girdiği sayı yazdırılır.

(D) Girilen her sayı toplanır ve toplam sonunda konsola yazdırılır.

Eğer kullanıcı geçersiz bir giriş yaparsa, uyarı mesajı konsola yazdırılır.

Cevap-3 :

Döngü, sonsuz döngüye girer ve ekrana sürekli kullanıcının girdiği sayı yazdırılır.

Soru-4 :

Aşağıdaki JavaScript kodlarına göre verilen seçeneklerden hangisi doğrudur?

(Çoktan Seçmeli)

(A) 50, 51, 52, 53, 54, 55 ekrana yazdırılır.

(B) 55, 54, 53, 52, 51, 50 ekrana yazdırılır.

(C) 55’ten 0’a kadar, 50 hariç tüm sayılar ekrana yazdırılır.

(D) 55’ten 0’a kadar, 0 hariç tüm sayılar ekrana yazdırılır.

55’ten itibaren azalan sonsuz döngü oluşur.

Cevap-4 :

55, 54, 53, 52, 51, 50 ekrana yazdırılır.

Soru-5 :

Tanımlanan bir obj nesnesinin değerleri for..in döngüsüyle konsol ekranına çıktılayan JavaScript kodu hangi seçenekte doğru verilmiştir?

(Çoktan Seçmeli)

(B)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 71 / 170
i
:
i
i
i
 Cevap-5 :

Soru-6 :

Aşağıdaki kodlar çalıştırıldığında dizi elemanlarının konsola sırayla yazdırılabilmesi için … ile boş bırakılan yer aşağıdaki seçeneklerden hangisi ile
tamamlanmalıdır?

(Çoktan Seçmeli)

(A) let val in arr

(B) let arr in val

(C) let val is arr

(D) let val of arr

let arr of val

Cevap-6 :

let val of arr

Soru-7 :

Yukarıdaki ekran görüntüsünün elde edilebilmesi için aşağıda verilen kod satırlarındaki … ile boş bırakılan yer aşağıdaki seçeneklerden hangisi ile

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 72 / 170
i
:
i
i
i
 tamamlanmalıdır?

(Çoktan Seçmeli)

(A) continue;

(B) break;

(C) next;

(D) else;

then;

Cevap-7 :

continue;

Soru-8 :

Yukarıdaki ekran görüntüsünün elde edilebilmesi için do-while koşulu nasıl tamamlanamaz?

(Çoktan Seçmeli)

(A) sayi < 3

(B) sayi <= 3

(C) sayi <= 5

(D) sayi <= 50

sayi <= 5000

Cevap-8 :

sayi < 3

Soru-9 :

Aşağıdakilerden hangisi yanlıştır?

(Çoktan Seçmeli)

(A) for ve while döngülerinde koşul en başta kontrol edilmektedir.

(B) Döngünün kaç kere çalışacağının bilinmediği durumlarda while döngüsü kullanılır.

(C) Döngünün en az bir kere çalışması gerektiğinde do-while döngüsü kullanılabilir.

(D) Dizi ve object türünde veri yapılarının anahtarlarını döngü içinde kullanmak için for..of döngüsü kullanılır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 73 / 170
i
:
i
i
i
 Çok boyutlu veri yapılarının her bir boyutundaki değerleri işlemek için iç içe döngüler kullanılabilir.

Cevap-9 :

Dizi ve object türünde veri yapılarının anahtarlarını döngü içinde kullanmak için for..of döngüsü kullanılır.

Soru-10 :

Aşağıdaki JavaScript kodlarının ekran çıktısı hangi seçenekte doğru verilmiştir?

(Çoktan Seçmeli)

(A)

Cevap-10 :

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 74 / 170
i
:
i
i
i
 5. Diziler

Özlü Söz
“Sadelik karmaşıklığın en üst noktasıdır.”

– Leonardo da Vinci

Kazanımlar
1. Dizi kavramını ve dizilerin genel özelliklerini bilir.

2. Dizi oluşturma yöntemlerini bilir.

3. Diziye eleman ekleyebilir, diziden istenilen bir elemana erişebilir.

4. Dizi elemanlarını değiştirebilir, diziden eleman silebilir.

5. Döngü yapılarını kullanarak dizi elemanlarını işleyebilir.

6. Dizilere özgü döngü türlerini bilir.

7. Dizi içinde dizi kullanarak çok boyutlu diziler oluşturabilir.

8. Sık kullanılan dizi metodlarını bilir.

9. Dizileri karşılaştırma metodlarını bilir.

Birlikte Düşünelim
1. Bir değişkende birden fazla veri saklamanın yolu var mıdır?

2. Diziler hem nümerik hem de string veri tipinde veri saklayabilir mi?

3. Dizilerin eleman sayılarını baştan belirlemek gerekir mi?

4. Diziden bir eleman silindiğinde o elemanın tamamen mi silinir yoksa yeri kalır ve sadece içeriği mi silinir?

5. Dizinin birden fazla elemanı nasıl seçilir?

6. Dizilere elemanlar sırayla mı eklenir yoksa dizi elemanları arasında boşluk olabilir mi?

7. Dizi elemanlarını kolayca işlemek için özel döngü türleri var mıdır?

8. Dizi içinde dizi olabilir mi?

9. Çok boyutlu dizi oluşturulabilir mi?

10. Sık kullanılan dizi metodları nelerdir?

11. Diziler nasıl karşılaştırılır? İki dizinin aynı olduğunu nasıl ispatlarsınız?

Başlamadan Önce
Diziler, birden fazla değerin tek bir yapı altında saklanmasını sağlayan önemli bir dil yapısı ve veri türüdür. Dizi elemanlarına indis numarasıyla

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 75 / 170
i
:
i
i
i
 erişilir. Dizi indisleri sıfırdan başlar. Dizilerde nümerik indisler kullanılır. Bununla birlikte pek tavsiye edilmese de isimli indisler kullanılabilir.

Diziler esnek yapıdadır, saklayacağı eleman sayısının baştan belirtilmesine gerek yoktur. Diziler oluşturulduktan sonra eleman eklenebilir, silinebilir
ve dizi elemanları değiştirilebilir. Dolayısıyla diziler dinamik yapıdadır.

Dizi elemanları döngü içinde kolaylıkla işlenebilir. for döngüsüne ilave olarak diziler için özel tasarlanmış forEach döngüsü, dizi elemanlarını işlemek
için for..of döngüsü ve dizi indislerini işlemek için for..in döngüsü kullanılır.

Bir dizi elemanı başka bir dizi olursa dizi içinde dizi yapısı meydana gelir. JavaScript dilinde matris, tablo gibi yapıları kullanmak için çok boyutlu
dizi oluşturulabilir.

JavaScript dilinde dizileri ve dizi elemanlarını işlemek için çok sayıda yerleşik metod bulunmaktadır. Diziler değişkenler üzerinden değil elemanları
üzerinden karşılaştırılır.

Bu bölümde JavaScript dilinde diziler, dizi tanımlama, dizi elemanlarını manipüle etme, dizi metodları konuları ele alınmaktadır.

5.1. Diziler
Dizi (array), aynı veya farklı veri türünde birden fazla veri öğesini saklayan mantıksal veri yapısıdır (Ackermann, 2022; Flanagan, 2020; Svekis,
Putten ve Percival, 2021).

JavaScript dilinde yerleşik basit veri tipleri bellekte en fazla tek bir veri saklayabilirken, diziler çok sayıda veri saklamak için tasarlanmışlardır.
Örneğin bir fakültedeki bölümlerin isimlerini saklamak için her bir bölüme bir tane değişken oluşturmak gerekmektedir.

Bu durum bölüm sayısı arttıkça kod yönetilemez bir hal alacaktır. Bu türde bir yol takip edildiğinde hangi değişkende hangi elemanın tutulduğu ve
toplamda kaç adet bölüm oluşturulduğu bilinemez. Diziler ise çok sayıda veriyi tek bir değişken altında saklayabilirler. Yukarıda örneklenen durum
dizi kullanılarak çok daha pratik bir şekilde çözülebilir.

Tarayıcıda “Geliştirici araçları” menüsü tıklandığında konsol sekmesine yukarıdaki kod satırları yapıştırıldığında aşağıdaki ekran gözükecektir.

Diziler aynı veya farklı türde elemanları (element) saklayabilir. Elemanların dizide bulunduğu konuma indis (index) denir. JavaScript dizilerinde ilk
elemanın indis numarası sıfırdır. Sonraki elemanların indis numarası sırasıyla birer artar. Örneğin bolumler dizisinin ilk elemanı olan "Web Tasarımı

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 76 / 170
i
:
i
i
i
 ve Kodlama"nın indisi sıfırdır. Dizinin ikinci elemanı olan "Bilgisayar Programcılığı"nın indisi 1’dir ve bu böyle devam eder. JavaScript dilinde
tanımlanan bir dizi maksimum 232 - 1 adet eleman saklayabilir.

JavaScript dilinde diziler dinamiktir yani dizilere daha sonradan eleman eklenebilir ve diziden eleman silinebilir. Bu sebeple dizinin eleman sayısının
baştan verilmesi zorunlu değildir. Dizi elemanları benzersiz (eşsiz) olmak zorunda değildir yani dizide mükerrer elemanlar olabilir (bir eleman dizide
birden fazla kere bulunabilir).

Diziler esasında object veri türündedir. typeof anahtar kelimesiyle bir dizinin veri tipi elde edilmek istendiğinde object döndürecektir. Yukarıda
tanımlanan bolumler dizisinin veri tipi aşağıdaki kod satırıyla konsol ekranına çıktılanmıştır.

[Link](typeof bolumler); // object

Dizinin eleman sayısı length dizi özelliğiyle elde edilir. Aşağıda bolumler dizisinin kaç elemanlı olduğunu konsol ekranına çıktılanmıştır.

[Link]([Link]); // 3

5.2. Dizi Oluşturma

JavaScript dilinde iki farklı yöntemle dizi oluşturulabilir (Ackermann, 2022; Flanagan, 2020; Svekis ve diğerleri, 2021). Dizi oluşturmanın en basit
yöntemi köşeli parantez notasyonunu [ ] kullanmaktır. Dizi oluşturulurken her bir elemanın arasında virgül , verilmelidir. Bu kullanımın sözdizimi
aşağıda verilmiştir.

let dizi_adi = [eleman1, eleman2, elemanN];

Aşağıda örneklenen dersler dizisi String veri tipinde elemanları saklamakta, sonuclar dizisi ise Number veri tipinde elemanları saklamaktadır.

Dizi elemanları farklı veri tiplerinde de olabilir. Aşağıda verilen örnekte karisikVeri isimli dizi tam sayı, ondalıklı sayı, dizge, boolean, undefined,
fonksiyon ve object veri tipinde elemanlara sahiptir.

Dizi oluşturmanın bir diğer yöntemi ise new Array() kurucu metodunu kullanmaktır. Aşağıdaki örnekte new Array() kurucu metoduyla dizi
oluşturulmuştur.

Dizi oluşturulurken kaç eleman saklayacağı new Array(eleman_sayisi) sözdizimiyle başlangıçta ayarlanabilir. Bu durumda verilen eleman sayısı kadar
yer ayrılmış boş bir dizi oluşturulur. Böyle tanımlanan dizinin eleman sayısı daha sonra istenildiği kadar genişletilebilir.

Aşağıda verilen örnekte isimler adında 10 elemanlı boş bir dizi oluşturulmuştur. İkinci satırda boş dizinin tamamı ve sonraki satırda ise dizinin ilk
elemanı konsola çıktılanmıştır.

Bu yöntemle dizinin eleman sayısı belirtilmesine rağmen dizi başta verilen bu sayının üzerinde de eleman saklayabilir. Örneğin aşağıdaki satırda
dizinin 13. elemanına Ahmet değeri atanmaktadır. Bu kod satırı hata vermeyecek ve sorunsuz çalışacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 77 / 170
i
:
i
i
i
 Kurucu metoda sayı yerine çift tırnak içinde dizge verilirse boş dizi yerine verilen değerde tek elemana sahip dizi oluşturulur. Örneğin aşağıdaki kod
satırında isimler adında bir dizi oluşturulmuş ve bu dizinin ilk ve tek elemanına "10" değeri atanmıştır.

Her iki dizi oluşturma yöntemini kullanarak boş bir dizi oluşturmak için parantezler içinde elemanlar veya eleman sayısı verilmez.

Diziler de tıpkı değişkenler gibi let, var ve const anahtar kelimeleriyle tanımlanabilir. const (sabit) ile oluşturulan bir dizi daha sonra tekrar
tanımlanamaz (dizi değişkenine doğrudan değer atanamaz) fakat dizinin elemanları köşeli parantez notasyonuyla veya dizi metodlarıyla değiştirilebilir,
silinebilir ve diziye yeni eleman eklenebilir. Aşağıda bunu örneklemek için sayilar isminde sabit bir dizi tanımlanmış (const ile) ve bu diziye 5 eleman
atanmıştır. Alt satırda ise sayilar dizisi atama operatörü ile yeniden tanımlanmak istenmiştir. Bu durumda ikinci satır hata verecektir ve
çalışmayacaktır.

const ile oluşturulan diziler bu şekilde tekrar tanımlanamaz fakat elemanları değiştirilebilir, diziye daha sonra eleman eklenebilir veya dizi elemanları
silinebilir. Yukarıda oluşturulan sayilar dizisinin elemanları, köşeli parantez notasyonu ve dizi metodlarıyla manipüle edilmiştir.

Bir dizi değişkeni başka bir dizi değişkenine atama operatörüyle kopyalanabilir. Aşağıdaki örnekte ilk satırda sayilar isimli ve 5 elemanlı bir dizi
oluşturulmuş ve ikinci satırda sayilar2 isimli değişkene sayilar değişkenin değeri atanmış yani sayilar dizisi sayilar2 isimli başka bir değişkene
kopyalanmıştır. Sonraki satırda sayilar2 isimli dizi konsola çıktılanmıştır.

Atama operatörüyle bir dizi değişkeni başka bir değişkene kopyalandığında, kopyalanan dizi elemanı değiştirilirse orijinal dizi elemanı da değişir veya
orijinal dizinin bir elemanı değiştirildiğinde kopyalanan dizinin de elemanı değişir.

Aşağıda verilen ilk kod satırında sayilar2 dizisinin ilk elemanının değeri 34 olarak değiştirilmektedir. Bundan sonraki satırlarda sayilar2 ve sayilar
dizilerinin ilk elemanları konsola çıktılanmıştır. Çıktılar görüntülendiğinde her iki dizinin ilk elemanının 34 olduğu yani orijinal dizinin ilk elemanının
da değiştiği görülecektir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 78 / 170
i
:
i
i
i
 Bir dizi yan yana üç nokta … yayılma (spread) operatörü ile de başka bir diziye kopyalanabilir (Scott, MacDonald ve Powers, 2021). Aşağıdaki
kodun ilk satırında oluşturulan sayilar dizisi ikinci satırda yayılma operatörüyle sayilar2 isimli değişkene kopyalanmıştır. Sonraki satırda da kopya
sayilar2 dizisi konsola çıktılanmıştır.

Yayılma operatörüyle bir dizi kopyalandığında ve daha sonra kopyalanan dizinin elemanlarında bir değişiklik yapıldığında orijinal dizide bir değişiklik
olmaz. Aşağıda bu durum örneklenmiştir. Son iki satırda verilen konsol çıktılarından da görüleceği üzere yayılma operatörüyle kopyalanan dizide
(sayilar2) ilk elemanın değerinin değiştirilmesi orijinal diziyi etkilememiştir.

5.3. Diziye Yeni Eleman Ekleme

Köşeli parantez notasyonuyla [] diziye yeni eleman eklenir. Aşağıda verilen örnekte 10 elemanlı boş bir dizi oluşturulmuş ve sonraki satırlarda dizi
elemanları eklenmiştir.

Dizi metodları kullanılarak da diziye yeni eleman eklenebilir. unshift() metodu dizinin en başına yeni eleman eklerken, push() metodu dizinin sonuna
yeni eleman ekler. Aşağıda her iki metodun kullanımı örneklenmiştir.

JavaScript dilinde dizi elemanlarının indisleri sıralı olmak zorunda değildir yani dizi elemanlarının indisleri arasında boşluk olabilir (seyrek). Aşağıda
tek elemanlı sayilar dizisi tanımlanmış ve sonraki satırda bu dizinin dördüncü elemanına -6 değeri atanmıştır. Konsol çıktısından da görüleceği üzere
dizi elemanları arasında iki tane boşluk oluşmuştur. Bu durumda aradaki elemanların değeri undefined olacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 79 / 170
i
:
i
i
i
 Eğer dizide erişilmek istenen indiste bir eleman yoksa kod hata vermeyecek fakat undefined geri dönecektir.

5.4. Dizi Elemanlarını Değiştirme

Dizinin herhangi bir elemanı köşeli parantez notasyonuyla daha sonradan değiştirilebilir.

5.5. Diziden Eleman Silme

Diziden eleman silmek için çeşitli metodlar tanımlanmıştır (Ackermann, 2022; Flanagan, 2020; Svekis ve diğerleri, 2021). Dizinin ilk elamanını
silmek için shift() metodu, son elamanını silmek için pop() metodu, dizinin herhangi bir indisinden itibaren çok sayıda eleman silmek için splice()
metodu kullanılmaktadır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 80 / 170
i
:
i
i
i
 Diziden eleman silmek için length özelliği de kullanılabilir (Horstmann, 2020). Aşağıdaki ilk kod satırında 2 elemanlı olan courseInfo dizisinin
eleman sayısı 1’e indirilmektedir. Bu durumda dizinin ilk elemanı korunacak fakat diğer eleman (3) silinecektir. Daha sonra ise length özelliğiyle
dizinin elaman sayısı 0 olarak atanıyor. Bu durumda dizinin bütün elemanları silinecektir.

Diziden bir elemanın değerini silmek için delete operatörü de kullanılabilir. delete operatörü silinecek elemanın kendisini değil indisi parametre olarak
alır. Parametre olarak verilen indisteki elemanın yerine undefined yazılır yani diziden eleman tamamen silinmez, elemanın dizideki yeri korunur fakat
içeriği boşaltılır. Bu yüzden delete operatörü kullanıldığında dizinin eleman sayısı değişmez.

5.6. Dizileri Döngü İçinde İşleme

Bir dizinin elemanlarına döngü içinde kolayca değer atanabilir, dizi elemanlarına döngü içinde erişilebilir ve yeniden değer atanabilir. Bu amaçla tüm
döngü çeşitleri kullanılabilir fakat özellikle dizi sınıfının bir metodu olan forEach metodu ve for..of döngüleri dizi elemanlarını döngü içinde işlemek
için çok daha pratiktir (Ackermann, 2022; Flanagan, 2020; Svekis ve diğerleri, 2021).

Aşağıda meyveler isimli bir dizi tanımlanmış ve dizinin elemanları döngü türleriyle konsola çıktılanmıştır. JavaScript dilinde dizi indisleri sıfırdan
başladığı için aşağıdaki for döngüsünde başlangıç değeri 0 verilmiştir. Dizinin eleman sayısı length özelliğiyle edinildiğinden döngü sayacının dizinin
eleman sayısından küçük olması for döngüsüne çalışma koşulu olarak verilmiştir. Döngü içinde ise o anki sayaç değeri ne ise döngünün o indisteki
elemanına erişilmiş (meyveler[i]) ve [Link] metoduyla o anki dizi elemanı konsola çıktılanmıştır.

Dizi sınıfının forEach metodu dizi elemanlarını döngü içinde işlemek için tasarlanmıştır . forEach metodu dizinin her bir elemanı için bir fonksiyon
çağırır ve onu çalıştırır. İstisna olarak undefined olan dizi elemanları için bu fonksiyon çalıştırılmaz. Aşağıdaki forEach metoduyla meyveler dizisinin
elemanları konsola çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 81 / 170
i
:
i
i
i
 5.7. İsimli İndis Kullanımı
Dizi indisleri olarak pek tavsiye edilmese de dizge yani isimli indisler kullanılabilir. Örneğin aşağıda verilen notlar dizisinde indisler için sıralı sayılar
yerine dizge kullanılmıştır.

İndislerde sayı yerine dizge kullanmanın olumsuz yönleri bulunmaktadır. Örneğin bu dizinin eleman sayısı length özelliğiyle öğrenilmek istendiğinde
geriye 0 dönecektir.

5.8. Çok Boyutlu Diziler

Dizi elamanı sabit bir değer yerine başka bir dizi de olabilir. Yani iç içe dizi tanımlamak mümkündür. Şu ana kadar verilen dizi örnekleri tek boyutlu
dizilerdi. Çok boyutlu dizi tanımlama yine köşeli parantez notasyonuyla yapılır. Dizi elemanı olarak köşeli parantez [ ] kullanılırsa dizi içinde dizi
tanımlanmış olur (Ackermann, 2022).

Aşağıda matris isminde 2 boyutlu (satır ve sütun) dizi tanımlanmıştır.

Bu kodun konsol çıktısı aşağıda verilmiştir. Görüleceği üzere dizi elemanları tek boyutlu (tek satırda) değil iki satırda listelenmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 82 / 170
i
:
i
i
i
 Çok boyutlu dizilerde dizi elemanlarına erişim her bir boyut için bir köşeli parantez kullanarak yapılır. Aşağıda iki boyutlu matris dizisinin
elemanlarına erişim örneği verilmiştir.

Çok boyutlu dizilerde dizi elemanının kendisi de dizidir. Yukarıda verilen matris dizisinin her satırı bir dizidir. Bu dizi aşağıdaki gibi de tanımlanabilir.

yenimatris dizisi iki elemanlıdır. Dizinin birinci elemanı ciftSayi dizisi iken ikinci elemanı tekSayi dizisidir. Dizinin ilk elemanı olan ciftSayi dizisinin
5, aynı şekilde tekSayi dizisinin de 5 elemanı bulunmaktadır.

İç içe dizilerin elemanlarını işlemek için her bir boyut için bir döngü kullanmak gerekir. yenimatris dizisi matris formunda olduğundan (satır ve sütun)
iki boyutludur ve bu dizinin bütün elemanlarını işlemek amacıyla aşağıdaki örnekte iç içe iki for döngüsü kullanılmıştır.

Verilen avaScript kodunda matris formundaki dizinin her satırı web sayfasında ayrı bir satırda çıktılanmış ve sütun elemanlarından sonra çıktının daha
okunaklı olması için – sembolü eklenmiştir. Web sayfasının görüntüsü aşağıda verilmiştir.

0-2-4-6-8-

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 83 / 170
i
:
i
i
i
 1-3-5-7-9-

Aşağıdaki örnekte yenimatris dizisinin üçüncü elemanına 10 değeri atanmıştır.

Aşağıdaki örnekte yenimatris dizisinin ikinci elemanının en sonuna 11 değeri eklenmiştir.

5.9. Dizi Metodları

JavaScript dili, diziler üzerinde işlem yapabilmek için array sınıfında çok sayıda yerleşik metoda sahiptir. Dizi metodları [Link](parametre)
sözdizimiyle kullanılır. Bazı metodlar ise [Link](parametre) sözdizimiyle kullanılır. Yerleşik dizi metodları aşağıda örneklerle açıklanmıştır
(Flanagan, 2020; geeksforgeeks, 2023; Horstmann, 2020; Kantor, 2024; Mozilla Foundation, 2023; Scott ve diğerleri, 2021; Svekis ve diğerleri, 2021;
w3schools, 2024).

at(indis)

Dizide verilen indisteki elemanı döndürür.

Aşağıda verilen örnekte bolumler dizisinin ilk elemanı ve tekSayilar dizisinin dördüncü elemanı konsola çıktılanmıştır.

concat(değer1, … değerN)

concat() metodu iki diziyi birleştirir ve birleştirilmiş yeni diziyi geri döner, orijinal diziyi değiştirmez.

Aşağıda verilen örnekte ciftSayilar dizisinin sonuna concat() metoduyla tekSayilar dizisi eklenmiş ve yeni dizi sayilar değişkenine atanmıştır.
Akabinde sayilar dizisi konsola çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 84 / 170
i
:
i
i
i
 concat() metoduna parametre olarak dizi yerine sabit bir değer de verilebilir. Aşağıda verilen örnekte ciftSayilar dizisinin sonuna 10 değeri eklenmiş
ve yeni dizi sayilar değişkenine atanmıştır. Akabinde sayilar dizisi konsola çıktılanmıştır.

copyWithin(hedef, başlangıç_indisi, bitiş_indisi)

copyWithin() metodu dizinin bir bölümünü aynı dizi içinde başlangıç ve bitiş indisleri verilen yeni bir konuma kopyalar. Böylece dizinin elemanları
değiştirilir fakat dizinin uzunluğu değiştirilmez.

Aşağıda verilen [Link](3, 0, 4) örneğinde metodun parametrelerine bakacak olursak hedef = 3, başlangıç indisi = 0 ve bitiş indisi = 4
olmaktadır. Başlangıç indisi = 0 ve bitiş indisi = 4 arasındaki dizi elemanları [1, 2, 3, 4] alınır. Hedef = 3 verildiği için bu elemanlar üçüncü indisten
itibaren aynı dizinin üzerine yazılır. Bu durumda dizi [1, 2, 3, 1, 2, 3, 4, , ] olacaktır. Kalan kısım, orijinal dizinin sonundaki elemanlarla doldurulacak
ve nihai dizi [1, 2, 3, 1, 2, 3, 4, 8, 9] olacaktır.

Aşağıda verilen [Link](1, 4) örneğinde hedef = 1, başlangıç indisi = 4 olmaktadır. Bitiş indisi ise verilmemiştir. Bu durumda başlangıç
indisi 4 olan yerden (yani 5 değerinden) başlayarak dizinin sonuna kadar olan bölüm [5, 6, 7, 8, 9] kopyalanır ve hedef indisi 1 olan yerden itibaren
yapıştırılır. Bu durumda ilk elemanın değeri (indis 0) değişmeyecektir. [1, 5, 6, 7, 8, 9, ...]. Kalan kısım, orijinal dizinin sonundaki elemanlarla
doldurulacak ve nihai dizi [1, 5, 6, 7, 8, 9, 7, 8, 9] olacaktır.

entries()

Bir dizinin her bir elemanı için [anahtar, değer] formatında döndürülebilir dizi nesnesi oluşturur. Anahtar olarak elemanın indisini, değer olarak da
elemanın değerini kullanır.

Aşağıda verilen örnekte bolumler dizisine entries() metodu uygulanmış ve [anahtar, değer] formatında döndürülebilir dizi nesnesi konsola
çıktılanmıştır.

every(KullaniciTanimliFonksiyon)

every() metodu dizideki her bir elemana parametre olarak aldığı yerleşik fonksiyonu veya kullanıcı tanımlı fonksiyonu uygular. Dizinin tüm
elemanları verilen fonksiyondaki şartları sağlıyorsa metod true döner, dizinin tek bir elemanı dahi fonksiyondaki şartı sağlamıyorsa metod false döner.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 85 / 170
i
:
i
i
i
 Boş değerdeki elemanlara (undefined) verilen fonksiyon uygulanmaz.

Örneğin aşağıda bir sayının tek sayı olduğunu test eden tekMi isimli fonksiyon tanımlanmıştır. ciftSayilar ve tekSayilar dizilerinin her bir elemanına
every metodu kullanılarak tekMi isimli fonksiyon uygulanmıştır. Dizi elemanlarının hepsi tek sayı ise sonuç true olacaktır, tek bir tanesi bile false
dönerse sonuç false olacaktır.

Konsol çıktısından da görüleceği üzere every() metodu ciftSayilar dizisine uygulandığında false dönmüş, tekSayilar dizisine uygulandığında true
dönmüştür. sayilar dizisinde ise hem tek hem de çift sayılar bulunduğundan tekMi fonksiyonunun şartını sağlamamış ve every() metodu false
dönmüştür.

fill(değer, başlangıç, bitiş)

fill() metodu bir dizinin elemanlarını verilen değer ile değiştirir. fill() metodu eğer başlangıç parametresi almışsa bu durumda o indisten itibaren dizi
elemanını değiştirir; bitiş parametresi almışsa o indise kadar elemanları değiştirir; başlangıç ve bitiş parametresi almamışsa dizinin tüm elemanlarının
yerine verilen değeri yazar. fill() metodu geriye değiştirilmiş diziyi döner.

Aşağıdaki örnekte fill() metoduyla sonuclar dizisinin tüm elemanlarının değeri 8 ile değiştirilmiştir.

Aşağıdaki örnekte fill() metodu tekSayilar dizisinin ikinci indisinden itibaren tüm elemanlarını 8 değeri ile değiştirmektedir.

Aşağıdaki örnekte fill() metodu ciftSayilar dizisinin sıfırıncı indisinden itibaren üçüncü indise kadar (üçüncü indis dahil değildir) tüm elemanlarını 8
değeri ile değiştirmektedir.

filter(KullaniciTanimliFonksiyon)

filter() metodu dizi elemanlarının her birine parametre olarak aldığı yerleşik fonksiyonu veya kullanıcı tanımlı fonksiyonu uygular ve bu fonksiyonun
şartlarını sağlayan dizi elemanlarını geri döndürür.

Aşağıdaki örnekte filter() metodu sonuclar dizisine kucuktur25 fonksiyonunu uygulamakta ve dizide değeri 25’ten küçük elemanları filtrelemektedir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 86 / 170
i
:
i
i
i
 find(KullaniciTanimliFonksiyon)

findLast(KullaniciTanimliFonksiyon)

find() metodu dizi elemanlarını verilen yerleşik fonksiyon veya kullanıcı tanımlı fonksiyon içinde arar. Verilen fonksiyon içinde aranan değerle eşleşen
ilk elemanı geri döndürür. Aranılan değer dizide yoksa undefined döner.

Aşağıdaki örnekte bolumler dizisinde “Web Tasarımı ve Kodlama” değeri aranmıştır.

Aşağıdaki örnekte sayilar dizisinde -4 değeri aranmıştır. Dizide iki tane -4 değeri bulunmaktadır fakat find() metodu ilk bulduğu değeri döner.

findLast() metodu ise son bulduğu değeri geri döndürür.

findIndex(KullaniciTanimliFonksiyon)

findLastIndex(KullaniciTanimliFonksiyon)

findIndex() fonksiyonu dizide bir elemanı doğrudan aramaz bunun yerine diziye kullanıcı tanımlı fonksiyonu uygular ve fonksiyonun şartını sağlayan
ilk indis geri döndürülür. Hiçbir eleman bu şartı sağlamıyorsa -1 döner.

Aşağıdaki örnekte sayilar dizisinde -4 değerinin ilk bulunduğu indis findIndex() metoduyla aranmıştır. Dizide iki tane -4 değeri bulunmaktadır fakat
findIndex() metodu aranılan değerin dizide ilk bulunduğu indisi döner.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 87 / 170
i
:
i
i
i
 Aşağıdaki örnekte dizide bulunmayan bir eleman aranmış ve findLastIndex metodu dizide aranılan değerde eleman olmadığı anlamına gelen -1
dönmüştür.

flat(derinlik)

flat() metodu iç içe dizinin elemanlarıyla birleştirilmiş yeni bir dizi oluşturur yani dizileri düzleştirir. Metod parametre olarak derinlik değeri alır.
Derinlik parametresinin varsayılan değeri 1 alınır. Derinlik parametresine Infinity değeri verilirse dizinin derinliğine bakılmaksızın bütün derinlikteki
diziler düzleştirir.

Aşağıdaki örnekte [2, 3] alt dizidir ve bu dizi elemanlarının derinliği 1’dir; [4 ile başlayan dizinin derinliği de 1’dir; [5 ile başlayan dizinin derinliği
2’dir; [6] dizisinin derinliği 3’tür. Örneğin [Link](2) ifadesi ikinci dereceden dizileri dizi olmaktan çıkarır ve normal eleman yapar.

flatMap(KullaniciTanimliFonksiyon)

flatmap() metodu dizinin her bir elemanına parametre olarak aldığı kullanıcı tanımlı fonksiyonu uygular ve geriye değiştirilmiş diziyi döndürür.

Aşağıda verilen flatMap() metoduyla ciftSayilar dizisindeki elemanların yarı değeri alınmıştır.

forEach(KullaniciTanimliFonksiyon)

forEach() metodu dizi elemanlarına kullanıcı tanımlı bir fonksiyonu uygular.

Aşağıdaki örnekte sayilar dizisindeki pozitif sayıların toplamı forEach() metodu içinde verilen ok fonksiyonu yardımıyla hesaplanmış ve daha sonra
konsolda toplam değer çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 88 / 170
i
:
i
i
i
 Bu örnek, ok fonksiyonu yerine kullanıcı tanımlı fonksiyon çağrılarak da yapılabilir. Aşağıda önce topla isimli bir fonksiyon tanımlanmıştır. Daha
sonra forEach() metoduna parametre olarak topla fonksiyonu verilmiştir. Bu kod örneği de yukarıdakiyle aynı çıktıyı verecektir.

from(deger, KullaniciTanimliFonksiyon)

from() metodu aldığı parametre içindeki veriyi kullanarak bir dizi oluşturur.

Aşağıdaki örnekte from()metoduna parametre olarak verilen kelimenin harflerinden bir dizi oluşturulmuştur.

Aşağıdaki örnekte ciftSayilar dizisindeki elemanların yarı değerleriyle yeni bir dizi oluşturulmuş ve konsola çıktılanmıştır.

includes(deger)

includes() metodu dizi elemanları içinde belirli bir değerin olup olmadığını kontrol eder. Eğer aranılan değer dizide varsa true, yoksa false döner.

Aşağıdaki ilk örnekte sayilar dizisinde -123 değerinin olup olmadığı, ikinci örnekte ise kemirgen dizisinde kunduz değerinin olup olmadığı includes()
metoduyla kontrol edilmiş ve sonuç konsola çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 89 / 170
i
:
i
i
i
 indexOf(deger)

lastIndexOf(deger)

indexOf() metodu dizi içinde parametre olarak aldığı elemanı arar ve aranan eleman dizide varsa elemanın bulunduğu konumu (indisi) döndürür,
aranan eleman dizide yoksa -1 döner. lastIndexOf() metodu ise aranan elemanın dizide bulunduğu son konumu döner, bulamazsa -1 döner.

Aşağıdaki örnekte sayilar dizisinde -4 elemanı indexOf() ve lastIndexOf() metodlarıyla aranmıştır. -4 değeri sayilar dizisinde iki yerde geçmektedir.
indexOf() metodu -4 değerinin dizideki ilk bulunduğu indisi yani 0, lastIndexOf() metodu ise -4 değerinin sayilar dizisinde son bulunduğu yerin
indisini yani 2 döndürmüştür.

Aşağıdaki kodda ise kemirgen dizisinde kunduz değeri aranmıştır. Dizide böyle bir eleman yer almadığından hem indexOf() hem de lastIndexOf()
metodları -1 döndürmüştür.

isArray(deger)

isArray() metodu bir değişkenin veya değerin dizi olup olmadığını kontrol eder. Eğer kontrol edilen değer bir dizi ise true, değilse false döner.

Aşağıdaki örneklerde isArray() metoduna dizi olan ve olmayan değerler verilerek sonuçlar konsol ekranına çıktılanmıştır.

join(ayraç)

join() metodu dizi elemanlarının arasına parametre olarak aldığı ayracı kullanarak bir dizge oluşturur. join() metodu diziyi değiştirmez. Ayraç
parametresine bir değer verilmezse varsayılan olarak virgül , kullanılır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 90 / 170
i
:
i
i
i
 keys()

keys() metodu dizi elemanlarının anahtarını döndürür.

Aşağıdaki örnekte sayilar dizisinin anahtarları keys() metoduyla ile elde edilmiş ve for döngüsünün içinde ekrana çıktılanmıştır.

keys() metodu isimli dizilerin anahtarlarını vermez. Aşağıda bununla ilgili bir örnek verilmiştir.

Bu kod hata vermez fakat aynı zamanda ekrana herhangi bir çıktı da vermeyecektir.

map(KullaniciTanimliFonksiyon)

map() metodu dizi elemanlarının her birine parametre olarak aldığı fonksiyonu uygular ve neticesinde yeni bir dizi döndürür.

Aşağıdaki örnekte map() metodu içinde yariDeger isimli kullanıcı tanımlı fonksiyon çağrılarak ciftSayilar dizisinin her biri elemanının yarısı alınmış
ve dönen değerlerle yeni bir dizi oluşturulmuştur.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 91 / 170
i
:
i
i
i
 of(deger)

of() metodu parametre olarak aldığı değerlerden yeni bir dizi oluşturur.

Aşağıdaki örnekte kemirgen isimli dizi of() metoduyla oluşturulmuş ve konsola çıktılanmıştır.

of() metoduna parametre verilmezse boş bir dizi oluşturur. Aşağıdaki örnekte of metoduna parametre verilmemiş ve oluşan boş dizi abc isimli
değişkene atanmıştır. İkinci satırda bu değişkenin dizi olup olmadığı isArray() metoduyla sorgulanmış ve dönen değer konsola çıktılanmıştır.

pop()

pop() metodu dizinin son elemanını siler ve sildiği elemanı geri döner.

Aşağıdaki örnekte ciftSayilar dizisini son elemanı pop() metoduyla silinmiş ve silinen değer konsola çıktılanmıştır.

Dizi konsola çıktılandığında son elemanının silindiği görülecektir.

push()

push() metodu dizinin sonuna yeni eleman ekler ve dizinin yeni durumdaki eleman sayısını geri döner.

Aşağıdaki örnekte kemirgen dizisine push() metoduyla yeni eleman eklenmiş ve dizinin eleman sayısı konsola çıktılanmıştır. Son satırda dizinin

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 92 / 170
i
:
i
i
i
 tamamı konsola çıktılanmıştır.

reduce(KullaniciTanimliFonksiyon, baslangicDeger)

reduceRight(KullaniciTanimliFonksiyon, baslangicDeger)

reduce() metodu dizi elemanlarının her birine (soldan sağa doğru) verilen kullanıcı tanımlı fonksiyonu uygular ve sonucu geri döndürür. reduce()
metodu dizide bir değişiklik yapmaz. Kullanıcı tanımlı fonksiyonun yapısı ise aşağıdaki gibi olmalıdır.

Kullanıcı tanımlı fonksiyona biriktirici parametresinin verilmesi zorunludur. Bu parametre her bir dizi elemanıyla yapılan işlem sonucunun tutulduğu
değişkendir. mevcutDeger parametresi de aynı şekilde zorunludur. mevcutDeger parametresi dizide o an işlenen elemanın değerini ifade eder.
mevcutIndis ve dizi parametrelerinin verilmesi isteğe bağlıdır.

Aşağıda verilen örnekte bir dizideki pozitif sayıların toplamı reduce() metoduyla elde edilmiştir. reduce() metodu pozitiflerinToplami isimli
fonksiyonu çağırmaktadır. pozitiflerinToplami fonksiyonu parametre olarak toplam isimli değişken ve o anki dizi elemanının değerini almaktadır. Bu
fonksiyonun gövdesinde dizi elemanının değerinin sıfırdan büyük olma durumu kontrol edilmektedir. Elemanın değeri sıfırdan büyükse toplam
değerine ilave edilmektedir, değilse toplam değer değişmemektedir. Nihai toplam değeri konsol ekranına çıktılanmaktadır.

reduce() metodu dizi elemanlarını soldan sağa doğru işler. Bunu ispatlamak için aşağıda verilen tekSayilar dizisinin elemanlarından yan yana
bütünleşik bir dizge (string) değer oluşturulmuştur. Konsol çıktısından da görüleceği üzere dizi elemanları soldan sağa işlenerek birleştirilmiştir.

reduce() metodunun benzeri olan reduceRight() metodu ise dizi elemanlarını sağdan sola doğru işler. Bunu örneklemek için yukarıda verilen kod
örneği bu sefer reduceRight() metoduyla çalıştırılmıştır. Kodun çıktısından da görüleceği üzere dizi elemanları bu sefer sağdan sola doğru
birleştirilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 93 / 170
i
:
i
i
i
 reverse()

toReversed()

reverse() metodu dizi elemanlarının sırasını ters yöne çevirir yani diziyi tersine çevirir ve ters sıralanmış diziyi döndürür. reverse() metodu tersine
sıralanan diziyi orijinal dizinin üzerine yazar yani diziyi değiştirir. Orijinal diziyi değiştirmeden dizi elemanlarını tersine çevirmek için toReversed()
metodu kullanılır.

shift()

shift() metodu dizinin ilk elemanını siler, diziyi değiştirir ve dizinin eleman sayısı bir azalır. shift() metodu geriye silinen elemanı döndürür.

slice (başlangıç, bitiş)

slice() metodu aldığı başlangıç ve bitiş parametrelerine göre dizinin istenilen bölümünün kopyasını döndürür. slice() metodu dizide bir değişiklik

yapmaz.

some(KullaniciTanimliFonksiyon)

some() metodu dizi elemanlarının her birine parametre olarak verilen kullanıcı tanımlı fonksiyonu uygular. Eğer dizi elemanlarından en az biri verilen
fonksiyondaki koşulu sağlıyorsa true döner, hiçbiri sağlamıyorsa false döner. some() metodu dizide bir değişiklik yapmaz. some() metodunda çağrılan
fonksiyon dizide değer almamış (undefined) elemanlara uygulanmaz.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 94 / 170
i
:
i
i
i
 sort()

toSorted()

sort() metodu dizi elemanlarını sıralar ve sıralanmış diziyi döndürür. Dizi elemanları önce dizgeye dönüştürülür ve ardından varsayılan olarak artan
sıralama yapar. Örneğin 3 ve 27 elemanlarını sıralarken elemanları önce “3” ve “27” şeklinde dizgeye dönüştürür ve ardından baş harflere veya
sayılara bakar. 2 sayısı 3’ten önce geldiği için “27”, “3” şeklinde sıralama yapar. sort() metodu sıralanan diziyi orijinal dizinin üzerine yazar yani diziyi
değiştirir. Orijinal diziyi değiştirmeden dizi elemanlarını sıralamak için toSorted() metodu kullanılmalıdır.

splice(indis, silinecekElemanSayisi, eklenecekEleman,,,)

toSpliced(indis, silinecekElemanSayisi, eklenecekEleman,,,)

splice() metodu dizi elemanlarının değerini değiştirmek, araya eleman eklemek veya dizi elemanlarını silmek için kullanılır. splice() metodu geriye
değiştirilmiş yeni diziyi döner. Orijinal diziyi koruyarak farklı bir dizi döndürmek için toSpliced() metodu kullanılmalıdır.

splice() metodunda sadece indis parametresine değer verilip diğer parametrelere değer verilmezse bu durumda indis parametresinden sonraki dizi
elemanları silinecektir. Aşağıdaki örnekte ciftSayilar dizisinde ikinci indisten itibaren tüm dizi elemanları silinecektir.

splice() metodunda indis parametresine ilave olarak silinecekElemanSayisi parametresine de değer verilirse bu durumda belirtilen indisten itibaren
silinecekElemanSayisi kadar eleman silinecektir. Aşağıdaki örnekte tekSayilar dizisinin ikinci indisinden itibaren 2 elemanın silinmesi istenmiştir. Bu
durumda 5 ve 7 elemanları silinecektir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 95 / 170
i
:
i
i
i
 splice() metoduyla diziye eleman eklemek için silinecekElemanSayisi parametresine 0 değeri verilir ve daha sonra eklenecek elemanlar aralarına
virgül konularak metoda verilir. Aşağıdaki örnekte kemirgen dizisine ikinci indis olarak kunduz elemanı eklenmiştir. Dizinin daha sonraki elemanları
eklenen yeni elemandan sonra listelenecektir.

splice() metodunda indis parametresine negatif değer verildiğinde işlemler dizinin başından değil sonundan itibaren yapılacaktır. Aşağıdaki örnekte
ciftsayilar dizisinin sondan ikinci indisinden itibaren bir elemanın silinmesi istenmiştir. Dizi indisleri baştan sayılırken sıfırdan başlar fakat sondan
sayılırken birden başlar. Bu durumda en sonuncu elemanın indisi -1, bir solundaki -2 olarak sayılır. Böylece aşağıdaki kullanımda -2. indisdeki 6
silinecektir.

toString()

toString() metodu dizi elemanlarını aralarına virgül koyarak string veri tipinde döndürür yani dizgeleştirir. Aşağıda verilen iki örnekte önce nümerik
veri saklayan ciftSayilar dizisi ve daha sonra string veri saklayan kemirgen dizisi toString() metoduyla elemanlarının arasına virgül konularak
dizgeleştirilmiş ve konsola çıktılanmıştır.

unshift()

unshift() metodu dizinin en başına eleman ekler, orijinal diziyi değiştirir ve dizinin yeni durumdaki eleman sayısını geri döner.

Aşağıdaki örnekte 5 elemanlı ciftSayilar dizisinin başına -2 ve -4 elemanları eklenmiş ve son durumdaki dizinin elaman sayısı olan 7 ekrana
çıktılanmıştır. Sonraki satırda ise ciftSayilar dizisi toString() metoduyla dizgeleştirilmiş ve konsola çıktılanmıştır.

Aşağıdaki örnekte kemirgen dizisinin başına kunduz elemanı eklenmiş ve üçüncü satırda kemirgen dizisinin elemanları toString() metoduyla
dizgeleştirilmiş ve konsola çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 96 / 170
i
:
i
i
i
 valueOf()

valueOf() metodu dizinin kendisini geri döner.

Aşağıdaki kodun ikinci satırında valueOf() metodunun kullanımıyla üçüncü satırda dizi değişkenini başka bir değişkene atayan kod eşdeğerdir.

values()

values() metodu dizi elemanlarını geri döner.

Aşağıdaki örnekte tekSayilar dizisinin elemanları values() metoduyla alınmış ve for döngüsünde ekrana çıktılanmıştır.

with(indis, değer)

with() metodu dizideki belirli bir indisin değerini değiştirmek için kullanılır. with() metodu orijinal diziyi değiştirmez.

Aşağıda verilen kodun ikinci satırında kemirgen dizisinin ilk indisindeki elemanın değeri [Link](1, "kunduz") ifadesiyle kunduz olarak
değiştirilmiş ve yeni oluşan dizi kemirgen2 değişkenine atanmıştır. Üçüncü satırda kemirgen2 dizisi konsola çıktılanmıştır. with() metodunun orijinal
dizide bir değişiklik yapmadığının ispatı olarak kemirgen dizisi son satırda konsola çıktılanmıştır.

5.10. Dizilerin Karşılaştırılması

JavaScript dilinde iki değerin birbirine eşit olduğunun kontrolü yan yana iki eşittir == operatörü ile yapılır. İki değerin eşitliğinin yanında veri
tiplerinin de eşit olduğunun kontrolü yan yana üç eşittir operatörü === ile yapılır. Eşitlik varsa bu operatörler true döner, yoksa false döner.

JavaScript dilinde diziler esasında object veri tipindedirler. object veri tipinde oluşturulan değişkenler belleğin farklı alanlarında saklanırlar. Bu
sebeple iki dizi değişkeni aynı sayıda elemana sahip olsalar ve elemanlarının değerleri aynı olsa dahi farklı bellek alanlarında saklandığı için == veya
=== operatörleriyle karşılaştırıldığında false dönecektir. Bu sebeple dizilerin eşit olup olmadığı değişkenler üzerinden değil dizi elemanları tek tek
kıyaslanarak yapılmalıdır.

Aşağıdaki örnekte aynı sayıda ve aynı elemanlarda olan iki dizinin == ve === operatörleriyle eşit olduğu kontrol edilmiştir. Bu diziler aynı olduğu
halde false değeri çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 97 / 170
i
:
i
i
i
 Dizilerin elemanlarının eşit olup olmadığının kontrolü için döngüler kullanılabilir. Aşağıda bu durumu örneklemek için tek boyutlu dizilerin
elemanlarının eşit olup olmadığını kontrol eden diziKarsilastir isimli bir fonksiyon tanımlanmıştır. Bu fonksiyon önce iki dizinin eleman sayılarının
aynı olup olmadığını kontrol etmektedir. Eğer eleman sayıları farklı ise fonksiyon geriye false dönmektedir. Eğer dizilerin eleman sayıları aynı ise bu
sefer her iki dizinin elemanlarının aynı olup olmadığı for döngüsü içinde kontrol edilmektedir. Eğer iki dizinin elemanları sırasıyla birbirinin aynı
değilse fonksiyon yine false dönmektedir. Eğer her iki kontrol false dönmemişse bu durumda hem dizilerin eleman sayıları eşit hem de dizilerin
elemanları eşit demektir ve fonksiyon true dönmektedir.

Dizilerin eşitliğini kontrol etmek için dizi elemanları string veri tipine çevrilerek çok daha pratik bir şekilde yapılabilir. Bunun için toString()veya
[Link]() metodlarıyla kullanılabilir. Aşağıda toString()metoduyla iki dizinin eşitliği kontrol edilmektedir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 98 / 170
i
:
i
i
i
 Bölüm Özeti
Diziler tek bir değişken altında aynı veya farklı türde çok sayıda veri saklamak için kullanılır. Böylece birbirleriyle ilişkili verinin kontrolü ve yönetimi
kolaylaşır.

Dizi bildirimi köşeli parantez notasyonu [] ile yapılır. new Array() kurucu metoduyla da dizi oluşturulabilir.

Dizilerin eleman sayısı dinamiktir. Dizi oluşturulduktan sonra diziye eleman eklenebilir ve silinebilir. unshift() metoduyla dizinin en başına, push()
metoduyla dizinin sonuna yeni eleman eklenir. Dizinin ilk elamanını silmek için shift() metodu, son elamanını silmek için pop() metodu, diziden çok
sayıda eleman silmek için splice() metodu kullanılır. Dizi elemanlarına erişim yine köşeli parantez notasyonuyla [indis] şeklinde erişilmek istenen
indis değeri verilerek yapılır.

Döngüler dizi elemanlarını işlemek için sıklıkla kullanılır. Klasik for döngüsünün yanı sıra diziyi kolayca işlemek için tasarlanmış forEach döngüsü
sıklıkla kullanılır. Dizi elemanlarını döngü içinde işlemek için for..of döngüsü kullanılırken, dizi anahtarlarını döngü içinde işlemek için for..in
döngüleri kullanılır.

Dizi içinde dizi oluşturmak mümkündür. Bir dizinin herhangi bir elemanı başka bir dizi olabilir. Böylece iç içe diziler oluşturulabilir. Ayrıca diziler iki
veya daha çok boyutlu tasarlanabilir.

Diziler object türünde olduklarından dizi değişkenleri belleğin farklı adreslerinde saklanır. Bu sebeple dizi değişkenleri eşitlik kontrolü yapan
operatörlerle karşılaştırıldığında diziler aynı olsa bile false döner. Bunun yerine dizi elemanları tek tek karşılaştırılmalı veya toString() veya
[Link]() gibi metodlar kullanılabilir.

Diziler programlama için önemli ve çok kullanılan dil yapıları arasında olduğundan her dilde olduğu gibi JavaScript dilinde de dizilerle ilgili çok
sayıda yerleşik metod tanımlanmıştır. Böylece programcı dizileri veya dizi elemanlarını işlerken kendi metodlarını yazmaya gerek duymaksızın bu
metodları kullanabilir.

Kaynakça
Ackermann, P. (2022). JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming (First Edition.). Bonn ; Boston:
Rheinwerk Computing.

Flanagan, D. (2020). JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language (7th edition.). Sebastopol, CA:
O’Reilly Media.

geeksforgeeks. (2023). Best-Known JavaScript Array Methods. GeeksforGeeks. [Link]

adresinden erişildi.

Horstmann, C. (2020). Modern JavaScript for the Impatient (1st edition.). Boston Columbus New York San Francisco Amsterdam Cape Town:
Addison-Wesley Professional.

Kantor, I. (2024). Array methods. [Link] adresinden erişildi.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 99 / 170
i
:
i
i
i
 Mozilla Foundation. (2023). Array—JavaScript | MDN. [Link]
adresinden erişildi.

Scott, A., MacDonald, M. ve Powers, S. (2021). JavaScript Cookbook: Programming the Web (3rd edition.). Beijing Boston Farnham Sebastopol
Tokyo: O’Reilly Media.

Svekis, L. L., Putten, M. van ve Percival, C. B. R. (2021). JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun,
interactive, and dynamic web apps, games, and pages. Erscheinungsort nicht ermittelbar: Packt Publishing.

w3schools. (2024). JavaScript Array Reference. [Link] adresinden erişildi.

Ünite Soruları

Soru-1 :

Aşağıdaki JavaScript kodunun çıktısı hangi seçenekte doğru verilmiştir?

(Çoktan Seçmeli)

(A) 0

(B) 1

(C) 2

(D) 3

Cevap-1 :

Soru-2 :

Aşağıdaki JavaScript kodunun çıktısı hangi seçenekte doğru verilmiştir?

(Çoktan Seçmeli)

(A) [3, 12, -4, 'JS']

(B) [3, 12, 8, 'deneme']

(C) [3, 12, 8, "deneme", "JS"];

(D) [3, 12, 8, 'JS']

["deneme", -4, "JS"];

Cevap-2 :

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 100 / 170
i
:
i
i
i
 [3, 12, 8, 'JS']

Soru-3 :

Dizinin elemanını silen ancak dizinin uzunluğunu değiştirmeyen operatör veya metod aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) pop() metodu

(B) delete operatörü

(C) shift() metodu

(D) splice() metodu

remove komutu

Cevap-3 :

delete operatörü

Soru-4 :

Aşağıdaki kod satırlarının hangisi JavaScript dizisinin en son elemanına erişir?

letdizi= [3,12,8,"deneme",-4,"JS"];

(Çoktan Seçmeli)

(A) dizi[[Link] - 1]

(B) dizi[[Link]]

(C) dizi[6]

(D) dizi[[Link]]

dizi[[Link]-1]

Cevap-4 :

dizi[[Link] - 1]

Soru-5 :

Aşağıda verilen dizinin beşinci elemanının değerini “test” olarak değiştiren komut hangi seçenekte verilmiştir?

letdizi= [3,12,8,"deneme",-4,"JS"];

(Çoktan Seçmeli)

(A) dizi[5] = test;

(B) dizi[5] = "test";

(C) dizi[4] = dizi["test"];

(D) dizi[4] = test;

(E) dizi[4] = "test";

Cevap-5 :

dizi[4] = "test";

Soru-6 :

Yukarıda verilen JavaScript kodunun konsol çıktısı aşağıdakilerden hangisidir?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 101 / 170
i
:
i
i
i
 letdizi= [3,89,5,3,3,"JS",-7];

[Link]([Link](3));

(Çoktan Seçmeli)

(A) 0

(B) 1

(C) 3

(D) 4

Cevap-6 :

Soru-7 :

Aşağıdaki şıkların hangisinde verilen bir JavaScript dizisi değildir?

(Çoktan Seçmeli)

(A) let sayilar = [2024, "sıfır"];

(B) let meyveler = { "elma", "armut", "kiraz", "çilek" };

(C) let durum = new Array(true);

(D) const dizi = [3, , 7, -6, 9, undefined];

let fonksiyonlar = [function (x) { return x + 5; }, null];

Cevap-7 :

let meyveler = { "elma", "armut", "kiraz", "çilek" };

Soru-8 :

JavaScript dizilerle ilgili aşağıdaki şıklardan hangisi doğrudur?

(Çoktan Seçmeli)

(A) Dizilerde indis 1’den başlar. İlk elemanın indisi 1’dir.

(B) Diziler sadece aynı veri türünde elemanları saklar.

(C) Dizi indisleri sayı harici dizge veya isim olabilir.

(D) Dizilerin eleman sayıları baştan belirtilir ve sonradan değiştirilemez.

Dizide olmayan bir elemana erişilmek istendiğinde kod hata verir.

Cevap-8 :

Dizi indisleri sayı harici dizge veya isim olabilir.

Soru-9 :

Dizilerin indislerini (anahtarlarını) döngü içinde işlemek için özel olarak geliştirilmiş döngü çeşidi aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) for..in döngüsü

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 102 / 170
i
:
i
i
i
 (B) for..of döngüsü

(C) for döngüsü

(D) while döngüsü

do-while döngüsü

Cevap-9 :

for..in döngüsü

Soru-10 :

İki diziyi birleştiren ve birleştirilmiş yeni diziyi geri dönen metod aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) join()

(B) concat()

(C) copyWithin()

(D) merge()

add()

Cevap-10 :

concat()

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 103 / 170
i
:
i
i
i
 6. Fonksiyonlar ve Sınıf Yapısı

Özlü Söz
“Programlama, program yazarak öğrenilir.”

– Brian Kernighan

Kazanımlar
Kazanımlar

1. Fonksiyonların işlevini fonksiyon kullanmanın sağladığı avantajları bilir.

2. Fonksiyonun bileşenlerini bilir, fonksiyon tanımlayabilir ve çağırabilir.

3. Parametreli ve varsayılan değerde parametreli fonksiyon tanımlayabilir.

4. Fonksiyon türleri arasındaki farkı bilir.

5. Anonim fonksiyon ve fonksiyon ifadeleri arasındaki farkı bilir.

6. Ok fonksiyonu tanımlayabilir.

7. Birden fazla değer döndüren üretici fonksiyon tanımlayabilir.

8. Sınıf kavramını ve sınıf elemanlarını bilir.

9. Sınıf tanımlama sözdizimini bilir ve sınıf oluşturabilir.

10. Tanımlanan bir sınıfın örneğini oluşturabilir, sınıfın metodlarını çağırabilir.

11. Sınıflarda kurucu metod kullanım amacını bilir.

12. Bir sınıfı miras alıp yeni bir sınıf oluşturabilir.

Birlikte Düşünelim
1. Fonksiyonların işlevi nedir?

2. Parametreli fonksiyon nasıl tanımlanır ve çağrılır?

3. İsimsiz fonksiyon olabilir mi?

4. Fonksiyon içinde fonksiyon tanımlanabilir mi?

5. Fonksiyon içindeki değişkene fonksiyon dışından erişilebilir mi?

6. Fonksiyon, kendisinin dışındaki bir değişkene erişebilir mi?

7. Fonksiyonlar değer döndürmek zorunda mıdır?

8. Birden fazla değer döndüren fonksiyon tanımlanabilir mi?

9. Fonksiyonların bütün parametrelerine değer vermek zorunlu mudur?

10. Fonksiyon tanımlamanın farklı yöntemleri nelerdir?

11. Fonksiyonlar kendiliğinden çalışır mı? Kendiliğinden çalışan fonksiyon tanımlanabilir mi?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 104 / 170
i
:
i
i
i
 12. Sınıf yapısı neden gereklidir?

13. Sınıflarda miras alma nedir? Neden buna gerek duyulur?

14. Sınıflar kod içinde doğrudan sınıf ismiyle çağrılıp kullanılabilir mi?

Başlamadan Önce
Fonksiyonlar, bir işlevi olan isimli kod bloklarıdır. Kod içinde bir işlevin farklı yerlerde çalıştırılması gerektiğinde her seferinde o işlevi tekrar yazmak
yerine fonksiyon adı verilen isimli bir yapı altında o işlev tanımlanır ve sadece ismiyle ve gerekiyorsa argümanlarla o fonksiyon çağrılır. Böylece daha
az kodla aynı iş yerine getirilmiş olur. Fonksiyonlar sayesinde kod tekrarı olmaz, kodun okunurluğu artar, kodun bakımı kolaylaşır ve bakım maliyeti
düşer.

Bu bölümde JavaScript dilinde parametreli parametresiz, varsayılan değerde parametreli, geriye değer döndüren, döndürmeyen fonksiyonlar örnekle
açıklanmıştır. Fonksiyon türleri, isimsiz fonksiyonlar, ok fonksiyonları, üreteç fonksiyonla ve fonksiyon-değişken ilişkileri, fonksiyonların kapsamı
konuları örneklerle işlenmiştir.

Bölümün devamında sınıf kavramı ve JavaScript dilinde sınıf tanımlama, çağırma ve sınıflarda miras alma konusuna yer verilmiştir.

Bölümle İlgili Özlü Söz

Birlikte Düşünelim

Başlamadan Önce

6.1. Fonksiyon
JavaScript dili fonksiyonel bir dildir bu sebeple fonksiyonlar JavaScript açısından önemli programlama yapıları arasındadır. Fonksiyonlar, kod
içerisinde bir görevi veya işlevi yerine getirmek için tasarlanan isimli kod yapısıdır (Scott, MacDonald ve Powers, 2021). Fonksiyonların bir ismi
vardır ve bu sayede ismiyle çağrılır ve çalıştırılırlar. Bir işi yerine getiren kod satırlarını kaynak kod içerisinde tekrar tekrar yazmaktansa ilgili kodlar
bir isimle fonksiyon yapısı altında tanımlanır ve gerektiği durumlarda bu fonksiyon çağrılır. Bu açıdan fonksiyonlar kodun yeniden kullanımını sağlar,
böylece kodun satır sayısı ve karmaşıklığı azalır ve buna bağlı olarak da kodun bakım maliyeti azalır ve kodun okunurluğu artar. Ayrıca fonksiyonlar
başka projelerde de yeniden kullanılabilir. Böylece fonksiyonlar sayesinde kodun taşınabilirliği artar.

Fonksiyonlar bir işlevi yerine getirirler. Aynı işlevdeki tekrarlanan kod satırlarını her seferinde yazmaktansa fonksiyonlar geliştirici açısından kullanım
kolaylığı sağlarlar. Örneğin aşağıda üç ürünün fiyatı ve iki farklı KDV oranı verilmiştir. İstenen şey ise birinci ve üçüncü ürünün %18 KDV oranıyla
hesaplanması ve ikinci ürünün %25 KDV oranıyla hesaplanarak toplam KDVli fiyatların sayfaya çıktılanmasıdır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 105 / 170
i
:
i
i
i
 Web sayfasının çıktısı aşağıda verilmiştir.

Ürün1 KDVli fiyatı: 118

Ürün2 KDVli fiyatı: 312.5

Ürün3 KDVli fiyatı: 885

Bu sayfadaki JavaScript kodunda her bir ürünün KDV hesabının aynı formülle tekrar tekrar yapıldığı görülecektir. Halbuki bu KDV hesabı bir
fonksiyon olarak tanımlanabilir ve her gerektiği yerde bu fonksiyon çağrılabilir. Bu amaçla bu sayfadaki ürünlerin KDVli fiyatının hesaplanması için
dışarıdan ürünün fiyatını ve KDV oranını alan ve çağrıldığı yere ürünün KDVli fiyatını hesaplayıp döndüren kdvHesapla isimli fonksiyon aşağıda
verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 106 / 170
i
:
i
i
i
 Bu verilen sayfa da bir önceki sayfa gibi aynı çıktıyı verecektir. Fakat bu sefer KDV hesaplamak için bir fonksiyon tanımlanmıştır. KDV hesabında bir
yanlışlık olduğunda önceki sayfada KDV hesaplamasının yapıldığı her satırın düzeltilmesi gerekecektir. Fakat KDVli fiyat hesaplama işlemleri
buradaki gibi bir fonksiyon altında tanımlandığında bu düzeltme işi sadece tek bir yerde yani fonksiyonun gövdesinde yapılacaktır. Böylece kodun
karmaşıklığı azalacak, bakımı kolaylaşacak ve bakım maliyeti azalacaktır. Ayrıca ürünün KDVli fiyatını hesaplayan bu fonksiyon sadece bu sayfada
değil KDV hesabının yapılacağı herhangi bir yerde de kullanabilir. Böylece kodun taşınabilirliği artacaktır. Görüldüğü üzere bu örnekteki gibi verilen
basit bir fonksiyon dahi programcıya birçok açıdan kolaylık sağlamaktadır.

Fonksiyonlar tanımlandığında otomatik olarak çalışmaz, yalnızca çağrıldığı zaman çalışır. Fonksiyonlar parametreler sayesinde dışarıdan veri alır,
böylece daha esnek kullanıma sahip yazılımlar geliştirilebilir. Programlamada fonksiyonların kullanışlı olmasını sağlayan bir başka özellik de return
anahtar kelimesiyle fonksiyonların çalıştıktan sonra geriye değer döndürmesidir.

Fonksiyonların içinde tanımlanan değişkenler yalnızca o fonksiyon içinde tanımlı ve geçerlidir.

Fonksiyonlar bir sınıfın içinde tanımlanabilir. Bu durumda sınıf metodu olarak isimlendirilir. Bu kullanım sınıf kavramı altında ele alınacaktır.

Fonksiyonlar nesnedir ve buna bağlı olarak bir değişkene değer olarak fonksiyon atanabilir. JavaScript dilinde bir fonksiyonun içinde bir başka
fonksiyon yani iç içe fonksiyon tanımlanabilir. Bu durumda fonksiyonlar tanımlandıkları kapsamdaki tüm değişkenlere erişebilirler (Flanagan, 2020).

Fonksiyonlar parametre alabilir, geriye değer döndürebilir. Bir fonksiyon bir değişkene değer olarak atanabilir, başka bir fonksiyona argüman olarak
verilebilir ve başka bir fonksiyonun dönüş değeri olabilir (Horstmann, 2020).

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 107 / 170
i
:
i
i
i
 6.1.1. Fonksiyon Tanımlama ve Fonksiyon Çağırma

Bir fonksiyon function anahtar kelimesi, fonksiyon başlığı (isim ve parametre) ve fonksiyon gövdesinden oluşur (Horstmann, 2020). JavaScript dilinde
basit bir fonksiyonun tanımlama sözdizimi aşağıdaki gibidir (Ackermann, 2022).

Fonksiyon başlığında function anahtar kelimesinden sonra fonksiyona bir isim verilir. Bölüm 2’de ele alınan Tanıtıcı isimlendirme kuralları
fonksiyonlara verilen isimlerde de geçerlidir. Süslü parantezlerden sonra fonksiyonun gövdesi yer alır. Fonksiyonun gövdesinde çalışması gereken kod
satır(lar)ı yer alır.

Aşağıda, işlevi konsola Sistem aciliyor... çıktısını vermekten ibaret basit bir fonksiyon örneği verilmiştir.

Fonksiyonlar otomatik olarak çalışmazlar yalnızca çağrıldığında çalışırlar. Fonksiyonlar ismiyle ve varsa parametrelerine değer verilerek çağrılırlar.
Fonksiyonlar çağrılırken parametrelere verilen değerlere argüman denir (Svekis ve diğerleri, 2021). Yukarıda örneklenen AcilisMesaji isimli
fonksiyonun çalışması için aşağıdaki gibi çağrılması gerekir.

AcilisMesaji();

Fonksiyonların kimi zaman gövdesindeki kodları çalıştırdıktan sonra elde edilen bir değeri veya değişkeni çağrıldığı yere döndürmesi istenebilir. Eğer
fonksiyonun geriye değer döndürmesi isteniyorsa fonksiyon gövdesinin en son satırında return anahtar kelimesiyle birlikte döndürülmesi istenen değer
veya değişken verilir (Ackermann, 2022). return anahtar kelimesi geriye değer döndürmek için kullanılır. return anahtar kelimesinden sonra
fonksiyonun çalışması sonlanır. Aşağıda hem parametre alan hem de geriye değer döndüren fonksiyonun sözdizimi verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 108 / 170
i
:
i
i
i
 6.1.2. Fonksiyonlarda Parametre Kullanımı

Fonksiyonlar genelde dışarıdan veri alır, fonksiyon gövdesinde bu veriyi işler ve gerekirse çağrıldığı yere bunu döndürürler. Böylece kodun esnekliği
artırılmış olur. Fonksiyonların dışarıdan veri alması için parametre(ler) kullanılır. Bir fonksiyon bir veya daha fazla sayıda parametre alabilir.
Aralarında virgül kullanılarak fonksiyonlara birden fazla parametre verilebilir (Svekis ve diğerleri, 2021). Fonksiyonların parametre alması zorunlu
değildir. Parametre alan fonksiyonun sözdizimi aşağıda verilmiştir.

Parametre alan fonksiyonlar ismi ve aldığı parametrelere argümanların verilmesiyle çağrılır. Argümanlar doğrudan bir değer olabileceği gibi değişken
hatta başka bir fonksiyon da olabilir. Yukarıda örneklenen sayilariTopla isimli fonksiyonun çağrılması aşağıda örneklenmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 109 / 170
i
:
i
i
i
 Parametrelere varsayılan değer verilebilir. Bu durumda fonksiyon çağrılırken kullanıcı bu parametreye bir değer vermezse parametre varsayılan değeri
kullanır; kullanıcı bu parametreye bir değer vermişse bu durumda kullanıcının vermiş olduğu değer geçerlidir (Scott, MacDonald ve Powers, 2021).
Parametreye varsayılan değer parametre = deger sözdizimiyle verilir. Varsayılan değer alan parametreler parametre listesinin en sonunda verilmelidir.
Varsayılan değer alan parametre sözdizimi aşağıda verilmiştir.

Yukarıda örneklenen kdvHesapla fonksiyonunda kullanıcı fonksiyonu çağırırken KDV değeri vermediğinde bu ürünün KDV değeri 18 olarak
kullanılacaktır. Aşağıdaki kod incelendiğinde urun1 ve urun3’ün KDVli fiyatları hesaplanırken KDV oranları verilmemiştir. Bu durumda urun1 ve
urun3’ün KDV oranı 18 olarak ayarlanacaktır. urun2 içinse KV oranı olarak kdv2 değişkeni yani 25 değeri verilmiştir

Sayfanın çıktısı aşağıda verilmiştir.

Ürün1 KDVli fiyatı: 118

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 110 / 170
i
:
i
i
i
 Ürün2 KDVli fiyatı: 312.5

Ürün3 KDVli fiyatı: 885

Bir fonksiyonun alacağı parametrelerin sayısı bilinmiyorsa veya kullanıma göre parametre sayısı değişiyorsa bu durumda rest parametresiyle (... üç
nokta operatörüyle) fonksiyona istenilen sayıda parametre verilebilir (Svekis ve diğerleri, 2021). Bu kullanımın sözdizimi aşağıda verilmiştir.

Aşağıdaki kullanım girilen her argümanı digertumParametreler isimli parametrede saklar.

Örneğin bir dizideki negatif sayıların küplerinin toplamını çıktılayan fonksiyonu üç noktalı rest parametresiyle çözebiliriz. Fonksiyonun alacağı
argüman sayısı belirtilmediğinden istenilen sayıda argüman verilebilir demektir ve bu sebeple bu kullanım daha uygun olacaktır. Aşağıda bunu
sağlayan JavaScript kodu verilmiştir.

Kodun çıktısından da görüleceği üzere fonksiyon iki kere çağrılmış ve ikisinde de fonksiyona farklı sayıda argüman verilmiştir.

6.2. Fonksiyon Türleri

JavaScript dilinde yukarıda çokça örneklenen standart bir fonksiyon tanımlanabileceği gibi programcıya kolaylık sağlaması açısından isimsiz (anonim)
fonksiyonlar, fonksiyon ifadeleri, ok fonksiyonları, iç içe fonksiyonlar ve üretici fonksiyonlar da tanımlanabilir (Ackermann, 2022; Flanagan, 2020;
Svekis, Putten ve Percival, 2021).

6.2.1. Anonim Fonksiyonlar

Anonim fonksiyonlar ismi olmayan fonksiyonlardır (Flanagan, 2020). Anonim fonksiyonlar genellikle başka bir fonksiyona parametre olarak
verilirler, olay işleyici olarak kullanılırlar veya bir değişkene değer atanarak kullanılır. Anonim fonksiyonların ismi olmadığı için çağrılamaz ve bu
nedenle yalnızca bir kere çalıştırılırlar. Bu sebeple anonim fonksiyonlara daha sonra erişilemez. Fakat anonim fonksiyonlar bir değişkene değer olarak
atanırlarsa bu değişken daha sonra kullanılabilir. Anonim fonksiyonların sözdizimi aşağıda verilmiştir.

Diziler konusunda örneklenen bir dizi içerisinde pozitif sayıları bulma problemini filter metoduyla çözelim. filter metodunun içinde görüleceği üzere
isimsiz anonim fonksiyon verilmiştir. Anonim fonksiyon parametre olarak bir sayı almış ve bu sayı sıfırdan büyükse daha önce boş olarak oluşturulan
pozitifSayilar isimli diziye eklenmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 111 / 170
i
:
i
i
i
 Fonksiyonların kendiliğinden çalışmadığı ve ancak çağrıldıklarında çalıştıkları daha önce ifade edilmişti. Fakat bir istisna olarak kendini çalıştıran
anonim fonksiyonlar tanımlandığı an adı üzerinde kendisini çalıştırırlar (Horstmann, 2020). Kendini çalıştıran anonim fonksiyonların sözdizimi
aşağıda verilmiştir.

Sayfanın örnek çıktısı aşağıda verilmiştir.

11.03.2024 17:05:46

Anonim fonksiyonlar başka bir fonksiyona argüman olarak verilebilir. Yukarıda örneklenen kendini çalıştıran anonim fonksiyonun her saniye tekrar
çalışması için setInterval fonksiyonu kullanılabilir. setInterval fonksiyonu bir kodu veya fonksiyonu belirli bir zaman aralığı süresince tekrarlı kere
çalıştırmak için kullanılır. saat_tarih elementinde güncel saniye verisini çıktılamak için setInterval fonksiyonuna yukarıda örneklenen anonim
fonksiyon ve 1000 ms değeri argüman olarak verilmiştir. Bu sayede 1000 milisaniyede bir kez yani saniyede bir kez bu anonim fonksiyon
çalıştırılacak ve böylelikle güncel saat, dakika ve saniye verisi sayfada ilgili elemente çıktılanacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 112 / 170
i
:
i
i
i
 Anonim fonksiyonlar sıklıkla olay işlemede kullanılırlar. Aşağıda verilen örnekte icerikDegistirButonu tıklandığında (onclick olayı) çalıştırılacak
kodlar anonim fonksiyon ile verilmiştir.

6.2.2. Fonksiyon İfadeleri

Anonim fonksiyonların bir ismi olmadığından daha sonra çağrılamayacağı ve sadece bir kere çalıştırılacağı ifade edilmişti. Eğer anonim fonksiyon bir
değişkene değer olarak atanırsa daha sonra bu değişkene her erişildiğinde anonim fonksiyon tekrar tekrar çalıştırılabilir. Bu kullanıma fonksiyon
ifadesi (function expression) denir (Flanagan, 2020). Fonksiyon ifadeleri programcıya hızlıca kodlama yapma imkânı sağlar. Fonksiyon ifadesinin söz
dizimi aşağıda verilmiştir.

Fonksiyon ifadesinin çağrılması aşağıda verilmiştir. Görüleceği üzere ilk fonksiyon ifadesi sıradan bir değişken çağırır gibi kullanılmış, ikinci
fonksiyon ifadesi ise parametre aldığı için degisken2(parametreler) sözdizimiyle çağrılmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 113 / 170
i
:
i
i
i
 Aşağıda argüman olarak verilen iki sayıdan büyük olanını geri döndüren fonksiyon ifadesi buyukSayiBul isimli değişkene atanmıştır. Daha sonra
buyukSayiBul isimli değişken iki kere farklı sayılar verilerek çalıştırılmıştır. Görüleceği üzere yalnızca bir kere çalışan anonim fonksiyon bir
değişkene değer olarak atandığında fonksiyon ifadesi olacak ve değişkenin her çağrılmasıyla fonksiyon ifadesi tekrarlı kere çalışacaktır.

Aşağıda verilen tekSayilariBul isimli bir başka fonksiyon ifadesi ise kendisine argüman olarak verilen bir dizideki tek sayıları bulmakta ve geri
döndürmektedir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 114 / 170
i
:
i
i
i
 6.2.3. Ok Fonksiyonları

ECMAScript 6 (ES6) ile fonksiyon ifadesi tanımlamanın daha sade, kısa ve okunabilir bir hali olan ok fonksiyonları (arrow functions) dile
kazandırılmıştır (Flanagan, 2020). Ok fonksiyonunun gövdesinde tek satır yer alıyorsa return anahtar kelimesi kullanılmasa da kod satırındaki ifadenin
değeri geri döndürülür. Ok fonksiyonunun gövdesinde birden fazla satır yer alacaksa bu kod satırları süslü parantezler arasında verilir ve geri dönecek
değer return anahtar kelimesiyle belirtilir. Ok fonksiyonunun sözdizimi aşağıda verilmiştir.

Bir önceki konu olan fonksiyon ifadesinde örneklenen büyük sayıyı bulan fonksiyon ifadesi örneği ok fonksiyonu ile daha az satırda kod ile daha
okunaklı bir şekilde aşağıdaki gibi yazılabilir.

6.2.4. İç içe Fonksiyonlar

JavaScript dilinde iç içe fonksiyon tanımlamak mümkündür (Ackermann, 2022). Bu durumda içerde tanımlanan fonksiyon dış kapsamdaki
değişkenlere erişebilir. İç fonksiyona yalnıza tanımlandığı dış fonksiyon erişebilir, dış fonksiyonun dışında bir yerden iç fonksiyona erişilemez. İç içe
fonksiyon tanımlama sözdizimi aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 115 / 170
i
:
i
i
i
 Argüman olarak aldığı iki sayının uzunluklarını ölçen (yani mutlak değerini alan) ve daha uzun olanını (sayılardan büyük olanını değil) dönen
problemi iç içe fonksiyonlar ile çözebiliriz. Aşağıda verilen iç içe fonksiyon örneğinde en dışarıdaki uzunlukOlc ismindeki dış fonksiyon
mutlakDegerHesapla ve karsilastir isimli iki tane iç fonksiyona sahiptir.

Koddan da görüleceği üzere son iki satırda uzunlukOlc isimli dış fonksiyon çağrılmış ve karşılaştırması için iki sayı verilmiştir. Kod akışına
bakıldığında mutlakDegerHesapla isimli fonksiyonda sayının mutlak değeri geri dönmüş ve devamındaki karsilastir isimli fonksiyonda mutlak değeri
alınan iki sayıdan sayı doğrusu üzerinde sıfıra daha uzak olan yani boyca büyük olan sayı geri döndürülmüştür. Bu kodda iç fonksiyonlar yalnızca dış
fonksiyonun içinden erişilebilir. Örneğin dış fonksiyonun dışında mutlakDegerHesapla isimli fonksiyona erişilemez. Aşağıdaki satır bu sebeple hata
verecektir.

6.2.5. Üretici Fonksiyonlar

Geleneksel bir fonksiyon hiçbir değer döndürmeyebilir veya sadece tek bir değer döndürebilirken üretici fonksiyonlar çok sayıda değer döndürebilir.
Üretici fonksiyon kullanmak için function anahtar kelimesinden sonra * sembolü ve fonksiyonun içinde dönen değeri belirtmek için yield anahtar
kelimesi kullanılır (Ackermann, 2022). return anahtar kelimesi fonksiyonun çağrıldığı yere bir değer döndürdükten sonra fonksiyonun çalışmasını
sonlandırmaktaydı. Fakat üretici fonksiyonun birden fazla değer döndürmesi için yield anahtar kelimesi kullanılır ve böylece fonksiyon değeri
döndürdükten sonra çalışmasını durdurur (Scott, MacDonald ve Powers, 2021). Üretici fonksiyonun tekrar çalışması ve sıradaki veriyi döndürmesi
için next() metodu kullanılır. value özelliğiyle sıradaki elemanın değeri elde edilir. Üretici fonksiyon tanımlama sözdizimi aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 116 / 170
i
:
i
i
i
 Kodun akşından da görüleceği üzere siradakiBolumuGetir isimli üretici fonksiyon verilen diziyi bir döngü içerisinde işlemekte ve her döngü
iterasyonunda sıradaki dizi elemanını döndürmektedir. bolumler isimli dizi değişkeninde Web Tasarımı ve Kodlama, Bilgisayar Programcılığı ve
Sosyoloji olmak üzere üç farklı bölüm tanımlanmıştır. siradakiBolumuGetir isimli üretici fonksiyona bolumler isimli bu dizi verilmiştir. Akabinde
üretici fonksiyon [Link]() ile üç kere çağrılmış ve sıradaki eleman yield anahtar kelimesiyle döndürülmüştür. Dönen elemanın değerinin elde
edilmesi için [Link]().value ifadesi kullanılmıştır.

6.3. Fonksiyonların Kapsamı

Bir fonksiyon içinde tanımlanan değişkene yalnızca o fonksiyonun içinden erişilebilir (Svekis ve diğerleri, 2021). Aşağıda verilen örnekte toplamBul
isimli fonksiyonun içinde tanımlanan toplam değişkenine yalnızca toplamBul isimli fonksiyondan erişilebilir. Fonksiyonun dışında toplam isimli
değişkene erişilmeye çalışıldığında kod hata verecektir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 117 / 170
i
:
i
i
i
 Fonksiyonlar kendisinin dışında (kendisinden önce veya daha sonra) tanımlanan değişkenlere erişebilir. Bir önceki örnekte toplam isimli değişken
fonksiyondan sonra tanımlanmış olsaydı fonksiyon yine de bu değişkene erişecek ve hatasız olarak çalışacaktır. Aşağıda bunun örneği verilmiştir.

Bir fonksiyonun içinde bir değişken let, var, const ifadeleri kullanılmadan tanımlandığında bu değişken global değişken olur ve kodun her yerinden bu
değişkene erişilebilir (w3schools, 2024).

Aşağıda deneme isimli bir fonksiyon çağrılmış, sonraki satırda x isimli değişken konsola çıktılanmıştır. Akabinde deneme isimli fonksiyon
tanımlanmıştır. Görüleceği üzere x isimli değişken tanımlanmadan önce çağrılmış ve üstelik bu değişken bir fonksiyonun içinden çağrılmasına rağmen
sorunsuz çalışmıştır. Çünkü x değişkeni tanımlanırken let, var, const kullanılmadığı için global değişkendir. Bu örnekte dikkat edilmesi gereken bir
diğer nokta ise deneme isimli fonksiyon ilk satırda çağrılmış fakat bu fonksiyonun tanımı çağrılmadan önce değil çağrıldığı satırdan sonra (üçüncü
satırda) tanımlanmıştır. Yani bir fonksiyon çağrısı fonksiyon tanımından önce de yapılabilir.

Bir fonksiyonun içinde global tanımlanan bir değişkenle aynı isimde lokal değişken tanımladığında ve fonksiyon çağrıldığında lokal değişken dikkate
alınacaktır. Aşağıda bu durum örneklenmiştir. x isimli ve 5 değerinde bir global değişken tanımlanmış ve aynı zamanda deneme fonksiyonu içinde de
x isminde lokal bir değişken tanımlanmıştır. Daha sonraki satırda deneme fonksiyonu konsola çıktılanmıştır. Konsolda global x değişkeninin değeri
olan 5 sayısı değil lokal x değişkeninin değeri olan 10 sayısı çıktılanacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 118 / 170
i
:
i
i
i
 6.4. Sınıf Kavramı
Bir yazılım projesinde kimi zaman çok sayıda geliştirici görev alabilir. Bu durumda çok sayıda ve kimi zaman aynı isimde fonksiyonlar
geliştirilebilmektedir. Bu keşmekeşi ve karmaşıklığı gidermek ve birbiriyle ilgili fonksiyonları mantıksal bir çatı altında toplamak için sınıf (class)
yapısı kullanılır. ES6 ile birlikte sınıf kavramı JavaScript diline girmiştir (Flanagan, 2020). JavaScript dilinde sınıf yapısı nesneye yönelik
programlamanın tüm özelliklerini desteklemez.

6.4.1. Sınıf Tanımlama ve Kullanımı

JavaScript dilinde sınıf tanımlama sözdizimi aşağıdaki gibidir.

Sınıf tanımı class anahtar kelimesiyle yapılır. Programcı tarafından tanımlanan her yapıda olduğu gibi sınıflara da bir isim verilir. Sınıf içinde
tanımlanan fonksiyonlara metod denir. Metod tanımlarken function anahtar kelimesi kullanılmaz. Sınıf yapısında veri saklamak için sınıf değişkenleri
kullanılmaktadır.

Tıpkı fonksiyonlar gibi sınıflar da tanımlandığında kendiliğinden çalışmaz. Bir sınıf tanımlandığında o sınıfı kullanabilmek için bir örneğini
oluşturmak gerekir. Sınıf örneği new anahtar kelimesiyle oluşturulur. Aşağıda sınıf örneği oluşturma sözdizimi verilmiştir.

new anahtar kelimesiyle oluşturulan sınıfın örneği bir değişkene atanır. Böylece o sınıfın metodlarına artık bu değişken üzerinden erişilir.

Aşağıda Satis isminde bir sınıf tanımlanmış ve sınıfın içinde kdvHesapla metodu verilmiştir. Bu metod fiyat ve kdv isminde iki parametre almıştır.
Metodun gövdesinde bu parametrelere verilen argümanlar kullanılarak KDV hesabı yapılmış ve hesaplanan değer metodun çağrıldığı yere return
anahtar kelimesiyle döndürülmüştür. Sonraki satırda Satis sınıfının bir örneği new anahtar kelimesiyle oluşturulmuş ve urunFiyati isimli değişkene
atanmıştır. Son satırda ise fiyatı 450, KDV oranı 18 olan bir ürünün fiyatı [Link](450, 18) ifadesiyle hesaplanmış ve [Link]
metoduyla sayfaya çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 119 / 170
i
:
i
i
i
 Bir sınıfta birden fazla metod tanımlanabilir. Bu durumda sınıf içinde tanımlanan bir metoda veya değişkene aynı sınıf içindeki bir başka metod this
anahtar kelimesiyle erişir.

Aşağıda verilen KupHesapla isimli sınıfta kare ve kup isimli iki metod yer almaktadır. kup metodu aynı sınıfta yer alan kare metoduna [Link](x)
ifadesiyle erişmiştir.

new KupHesapla() ifadesiyle KupHesapla sınıfının bir örneği oluşturulmuş ve kod içerisinde bu örneği kullanabilmek için hesap isimli değişkene
atanmıştır. Sonraki satırda KupHesapla sınıfının kup metodu, sınıf örneğinin atandığı hesap değişkeni üzerinden [Link](5) ifadesiyle çalıştırılmış
ve 5 sayısının küpü [Link]() metoduyla sayfaya çıktılanmıştır.

Sınıf örnekleri object veri türündedir. Yukarıdaki örnekte KupHesapla sınıfının bir örneği hesap isimli değişkende saklanmaktadır. typeof anahtar
kelimesiyle bu örneğin object veri tipinde olduğu aşağıdaki kod satırıyla konsol ekranına çıktılanmıştır.

[Link](typeof hesap); // object

Fonksiyonların çağrılması için fonksiyonun daha önce tanımlanmasına gerek yoktur. Yani bir fonksiyon çağrıldıktan sonra tanımlanabilir. Fakat bir
sınıfın örneğinin oluşturulması için önce sınıfın tanımlanması ve daha sonra sınıf örneğinin oluşturulması gerekir. Aşağıda bu durum örneklenmiştir.
Verilen kodun ilk satırında KupHesapla sınıfının bir örneği oluşturulmuş fakat KupHesapla sınıfı daha sonra tanımlandığı ve bu sebeple kod hata
verdiği için kodun devamı çalışmayacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 120 / 170
i
:
i
i
i
 6.4.2. Sınıflarda Kurucu Metod

Bir sınıfın örneği oluşturulduğunda kimi zaman bazı kodların otomatik olarak çalıştırılması gerekir. Sınıf sözdiziminde de verilen constructor()
fonksiyonu (kurucu/yapıcı metod) bu işlevi yerine getirir (Flanagan, 2020; Svekis, Putten ve Percival, 2021). Bir sınıf oluşturulduğunda otomatik
olarak çalıştırılması istenen kodlar constructor() metodunun içinde verilir. Kurucu metodda genelde sınıf değişkenlerine ilk değer atamaları yapılır.
Kurucu metod tıpkı diğer fonksiyonlar gibi parametre alabilir. Örneğin kurucu metod iki parametre almışsa bu sınıfın örneği new Sinif() sözdizimiyle
değil new Sinif(arguman1, arguman2) ifadesiyle oluşturulur.

Aşağıda verilen Satis sınıfında bir constructor (kurucu) metod ve kdvHesapla adında metod yer almaktadır. Kurucu metodun fiyat ve kdv isminde iki
parametresi bulunmaktadır. Kurucu metod dışarıdan aldığı fiyat ve kdv değerlerini sınıf değişkenlerine atamaktadır. Sınıf değişkenleri yapı itibariyle
global değişken gibi düşünülebilir. Böylece bu sınıf değişkenleri sınıftaki tüm metodlar tarafından erişilebilir olmaktadır. Kodun devamında verilen
kdvHesapla metodu this anahtar kelimesiyle artık sınıf değişkenleri olan fiyat ve kdv değişkenlerine erişmekte ve KDV hesabı yapmakta ve
hesaplanan değeri return anahtar kelimesiyle döndürmektedir. Sonraki satırda new anahtar kelimesiyle Satis sınıfının bir örneği oluşturulmuş ve urun
değişkenine atanmıştır. Fakat burada dikkat edilirse sınıf örneği new Satis() olarak değil new Satis(450, 18) ile yani iki argüman alarak
oluşturulmuştur. Satis sınıfında kurucu metod iki parametre aldığı için ve sınıfın bir örneği oluşturulduğunda bu kurucu metod otomatik çalıştırıldığı
için sınıf yalın halde değil iki argüman verilerek oluşturulmuştur. Sonraki satırda sınıfın kdvHesapla() metoduna urun değişkeni üzerinden erişilmiş ve
fiyatı 450, KDV oranı 18 olan bir ürünün KDVli fiyatı hesaplanarak geri dönmüş ve [Link]() metoduyla hesaplanan fiyat sayfaya
çıktılanmıştır.

6.4.3. Sınıflarda Miras Alma

Miras alma nesneye yönelik programlamanın önemli kavramlarından biridir. Kimi zaman bir sınıfa yeni metod eklemek mümkün olmayabilir veya
izinli olmayabilir. Bu durumda bu sınıf kopyalanır ve kopyalanan sınıfa yeni metod ve davranışlar eklenir. Bu ise kodların tekrarına ve karmaşaya

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 121 / 170
i
:
i
i
i
 sebep olur. İşte miras alma (inheritance) kavramı, bir sınıfın tüm metodlarının ve davranışlarının biyolojik kalıtıma benzer şekilde başka bir sınıfa
geçmesini o sınıfta olduğu gibi kullanılmasını sağlar (Scott, MacDonald ve Powers, 2021). Böylece hem kod tekrarı önlenmiş olur hem de miras
alınan sınıfa yeni metod ve özellikler eklenir. Miras alan sınıfa çocuk sınıf (child class) ve miras alınan sınıfa da ebeveyn sınıf (parent class) denir.
Çocuk sınıf ebeveyn sınıfın bütün metodlarını ve özelliklerini kullanabilir ve kendi sınıfına yeni metod ve özellikler ekleyebilir. Böylelikle kod tekrarı
olmadan ebeveyn sınıfın yeteneklerini genişletmiş olur. Çocuk sınıf içindeki bir metoddan ebeveyn sınıfın metodunu çağırmak için super anahtar
kelimesi kullanılır (Svekis, Putten ve Percival, 2021).

Bazen çocuk sınıf, ebeveyn sınıfın bazı metodlarını kullanmak istemeyebilir. Bu durumda çocuk sınıf içinde aynı isimde metod tanımlanır ve böylece
ebeveyn sınıfın o metodunu geçersiz kılınmış olur. Buna metod geçersiz kılma/ezme (method overriding) denir.

JavaScript diline miras alma ES6 (ECMAScript 2015) ile birlikte gelmiştir. Bir sınıfın metodları başka bir sınıfa extends anahtar kelimesi ile aktarılır
(miras alınır). JavaScript miras alma sözdizimi aşağıda verilmiştir.

JavaScript miras alma konusu daha önce verilen Satis sınıfı üzerinden örneklenebilir. Aşağıda verilen örnekte Depo sınıfı extends anahtar kelimesiyle
Satis sınıfını miras almıştır. Depo sınıfı içinde Giris isimli bir metod tanımlanmıştır. Giris metodunda KDVsi hesaplanan ürünün fiyatına depo maliyeti
olarak ilave 25 eklenmiştir. Burada dikkat edilirse Depo sınıfından ebeveyn sınıf olan Satis sınıfının kdvHesapla metodu super anahtar kelimesiyle
[Link]() ifadesiyle çağrılmıştır. Daha önceki örnekte Satis sınıfıyla 531 olarak hesaplanan ürünün fiyatına Depo sınıfıyla 25 eklenmiş ve
sayfada 556 çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 122 / 170
i
:
i
i
i
 Bölüm Özeti
Fonksiyonlar bir işlevi yerine getiren tekrar tekrar kullanılabilen isimli kod bloklarıdır. Fonksiyonlar, bir veya daha fazla parametre alabilir ve
çağrıldığı yere bir değer döndürebilir. Parametre alan fonksiyonların bazı parametrelerine değer vermek zorunlu olmayacaksa bu parametreye
varsayılan değer atanır, böylece kullanıcı o parametreye bir değer vermezse varsayılan değer kullanılır.

Fonksiyonların bir ismi olmalıdır fakat JavaScript dilinde isimsiz fonksiyonlar da tanımlanabilir. Bunlara anonim fonksiyonlar denir. Anonim
fonksiyonlar, genellikle diğer fonksiyonlarda argüman olarak kullanılır veya değişkenlere atanır. Bir değişkene atanan anonim fonksiyona fonksiyon
ifadesi denir. Anonim fonksiyonun ismi olmadığı için yalnızca bir kere çalışır fakat fonksiyon ifadeleri bir değişkene atandığı için değişken her
kullanıldığında fonksiyon ifadesi tekrar çalıştırılır.

JavaScript dilinde fonksiyonlar, ok fonksiyonları olarak bilinen daha kısa ve daha okunabilir bir sözdizimi ile de tanımlanabilir.

JavaScript dilinde bir fonksiyon içinde başka bir fonksiyon tanımlanabilir. İç fonksiyon dış fonksiyonun değişkenlerine erişebilir.

Fonksiyonlar return anahtar kelimesiyle çağrıldığı yere değer döndürebilir. Fakat fonksiyonlar birden fazla değer döndüremez. Üretici fonksiyonlar ise
her çağrılmada bir diziden veya herhangi bir veri yapısından sırayla değer döndürür. Üretici fonksiyonlar tanımlanırken * sembolü tanımlanır. Üretici
fonksiyonun değer döndürmesi için return yerine yield anahtar kelimesi kullanılır.

Fonksiyonların kapsamı, değişkenlerin ve fonksiyonların erişilebilir olduğu bölgedir.

Sınıf yapısı, birbirleriyle ilişkili metodları bir çatı altında tutan ve yönetimini kolaylaştıran dil yapısıdır. Bir sınıfta birden fazla metod tanımlanabilir.
Bir sınıfı kullanmak için onun bir örneği oluşturulur ve bir değişkene atanır. Daha sonra o değişken üzerinden sınıfın özellik ve metodlarına erişilebilir.
Bir sınıfın örneği oluşturulduğunda otomatik çalışması istenen kodlar Constructor isimli özel işlevi olan kurucu metodun içinde verilir.

Bir sınıfın metodlarını başka bir sınıfta yeniden yazmak yerine sınıf miras alınabilir. extends kelimesiyle bir sınıfın (ebeveyn) tüm metod ve özellikleri
kalıtım yoluyla başka bir sınıfa (çocuk) aktarılır. Çocuk sınıf ebeveyn sınıfın bütün metodlarına ve sınıf değişkenlerine super anahtar kelimesiyle
erişebilir. Çocuk sınıfa ek metodlar eklenerek ebeveyn sınıfın yetenekleri genişletilmiş olur.

Kaynakça
Ackermann, P. (2022). JavaScript: The Comprehensive Guide to Learning Professional JavaScript Programming (First Edition.). Bonn ; Boston:
Rheinwerk Computing.

Flanagan, D. (2020). JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language (7th edition.). Sebastopol, CA:
O’Reilly Media.

Horstmann, C. (2020). Modern JavaScript for the Impatient (1st edition.). Boston Columbus New York San Francisco Amsterdam Cape Town:
Addison-Wesley Professional.

Scott, A., MacDonald, M. ve Powers, S. (2021). JavaScript Cookbook: Programming the Web (3rd edition.). Beijing Boston Farnham Sebastopol
Tokyo: O’Reilly Media.

Svekis, L. L., Putten, M. van ve Percival, C. B. R. (2021). JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun,
interactive, and dynamic web apps, games, and pages. Erscheinungsort nicht ermittelbar: Packt Publishing.

w3schools. (2024). JavaScript Function Closures. [Link] adresinden erişildi.

Ünite Soruları

Soru-1 :

Aşağıda verilen JavaScript kodu çalıştırıldığında sayfa çıktılanan değer hangi şıkta verilmiştir?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 123 / 170
i
:
i
i
i
 (Çoktan Seçmeli)

(A) 8

(B) 15

(C) 17

(D) 13

12

Cevap-1 :

15

Soru-2 :

JavaScript dilinde fonksiyonlarla ilgili aşağıdakilerden hangisi yanlıştır?

(Çoktan Seçmeli)

(A) Fonksiyon parametrelerine varsayılan değer atanabilir.

(B) Değer döndürmeyen fonksiyon tanımlanabilir.

(C) Fonksiyonlar parametreli ve parametresiz tanımlanabilir.

(D) Fonksiyon gövdesinde return anahtar kelimesinden sonraki kodlar çalıştırılmaz.

(E) Fonksiyonlar her seferinde aynı argümanla çağrılmalıdır.

Cevap-2 :

Fonksiyonlar her seferinde aynı argümanla çağrılmalıdır.

Soru-3 :

Aşağıdaki seçeneklerin hangisinde kurucu metodu olan sınıf örneği verilmiştir?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 124 / 170
i
:
i
i
i
 Cevap-3 :

Soru-4 :

Üretici (generator) fonksiyonların kullanım amaçlarından bir tanesi aşağıdaki şıkların hangisinde verilmiştir?

(Çoktan Seçmeli)

(A) İç içe fonksiyon yazımını sağlar.

(B) Her çağrılmada tek bir değer döndürür.

(C) Her çağrılmada sıradaki değeri döndürür, böylece fonksiyonların çok sayıda değer döndürmesini sağlar.

(D) Fonksiyon oluşturmayı kolaylaştırır

Kullanıcıyla etkileşimi artırmak için

Cevap-4 :

Her çağrılmada sıradaki değeri döndürür, böylece fonksiyonların çok sayıda değer döndürmesini sağlar.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 125 / 170
i
:
i
i
i
 Soru-5 :

JavaScript ok fonksiyonlarıyla ilgili aşağıda verilen şıklardan hangisi yanlıştır?

(Çoktan Seçmeli)

(A) Ok fonksiyonları parametreli tanımlanmalıdır.

(B) Ok fonksiyonları tanımlanırken function anahtar kelimesi kullanılmaz.

(C) Ok fonksiyonları return anahtar kelimesi olmadan da değer döndürebilir.

(D) Ok fonksiyonlarının ismi yoktur, bir değişkene atanırlar.

Ok fonksiyonlarının gövdesi birden fazla satırdan oluşabilir.

Cevap-5 :

Ok fonksiyonları parametreli tanımlanmalıdır.

Soru-6 :

Üretici fonksiyonlarda sıradaki değeri döndürmek için kullanılan anahtar kelime aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) yield

(B) constructor

(C) return

(D) value

(E) next

Cevap-6 :

next

Soru-7 :

Aşağıda verilen test fonksiyonun, fonksiyon ifadesiyle yazımı hangi şıkta verilmiştir?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 126 / 170
i
:
i
i
i
 Cevap-7 :

Soru-8 :

JavaScript dilinde sınıflarla ile ilgili aşağıdaki ifadelerden hangisi yanlıştır?

(Çoktan Seçmeli)

(A) Sınıf metodları tanımlanırken function anahtar kelimesi kullanılmaz.

(B) Sınıfın dışında sınıf metodu tanımlanamaz.

(C) Sınıfları kullanmak için bir örneğini oluşturmak gerekir.

(D) Sınıf örnekleri Symbol veri türündedir.

Sınıf içinde sınıf değişkenine veya metoduna erişmek için this anahtar kelimesi kullanılır.

Cevap-8 :

Sınıf örnekleri Symbol veri türündedir.

Soru-9 :

Aşağıda verilen Example sınıfının örneği hangi şıkta eksiksiz ve doğru biçimde oluşturulmuş ve test metodu çağrılmıştır?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 127 / 170
i
:
i
i
i
 letornekSinif=newExample();

[Link]([Link](1, 2));

constornekSinif=newtest();

[Link]([Link](1,2));

[Link]([Link](1,2));

[Link]([Link](1,2));

letornekSinif=newExample();

[Link]([Link](1,2));

Cevap-9 :

letornekSinif=newExample();

[Link]([Link](1, 2));

Soru-10 :

Aşağıda verilen Example sınıfından miras alan Deneme isimli sınıf hangi seçenekte doğru verilmiştir?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 128 / 170
i
:
i
i
i
 Cevap-10 :

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 129 / 170
i
:
i
i
i
 7. Doküman Nesne Modeli

Özlü Söz
"Yazılımın yeniden kullanılabilir olabilmesi için öncelikle kullanılabilir olması gerekir.”

– Ralph Johnson

Kazanımlar
1. Doküman Nesne Modeli (Document Object Model - DOM) tanımını yapabilir.

2. DOM'un web sayfalarındaki önemini kavrayabilir.

3. DOM ağaç yapısının temel bileşenlerini tanımlayabilir.

4. Bir HTML dokümanının DOM yapısını anlayabilir.

5. Dokümandaki elemanları JavaScript kullanarak ekleyebilme, kaldırabilme, değiştirebilme ve yeniden düzenleyebilme yeteneğine sahiptir.

6. DOM manipülasyonunun web sayfalarında nasıl kullanılabileceğini anlar.

7. getElementById, getElementsByClassName, getElementsByTagName, querySelector ve querySelectorAll gibi yöntemlerle DOM içinde eleman
seçebilir, bulabilir.

8. Elemanların içeriğini değiştirme, ekleme ve kaldırma yeteneklerine sahiptir.

9. Metin, HTML veya CSS içeriğini DOM üzerinden nasıl manipüle edileceğini bilir.

10. Dokümandaki elemanların stili ve görünürlüğünü değiştirebilir.

11. Eleman eklenme, silinme ve yeniden düzenlenme gibi işlemleri gerçekleştirebilir.

12. Niteliklerin özelliklerini değiştirebilir ve güncelleyebilir.

Birlikte Düşünelim
1. Doküman Nesne Modelinin (Document Object Model - DOM) web sayfalarındaki önemi nedir?

2. Bir web sayfası oluştururken neden DOM'u anlamak önemlidir?

3. DOM ağaç yapısının temel bileşenleri nelerdir? Bir HTML dokümanı DOM yapısını inceleyerek bu bileşenleri tanımlayın.

4. Bir HTML dokümanına JavaScript kullanarak yeni bir öğe eklemek, mevcut bir elemanı kaldırmak ve bir öğeyi değiştirmek mümkün olabilir mi?

5. Belirli bir HTML dokümanındaki elemanları seçmek için farklı DOM seçici yöntemleri nelerdir?

6. Bir HTML dokümanında bir elemanın içeriğini değiştirmek için nasıl bir yol izlenebilir?

7. Bir HTML dokümanında bir elemanın stili JavaScript kullanılarak nasıl değiştirilir?

8. Belirli bir HTML dokümanındaki elemanları kaldırmak için farklı yöntemler nelerdir?

9. Belirli bir öğenin özellikleri kullanılarak bir HTML elemanında değişiklik yapılması mümkün olur mu?

Başlamadan Önce

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 130 / 170
i
:
i
i
i
 Bu bölümde, web geliştirme sürecinde temel bir kavram olan Doküman Nesne Modeli (Document Object Model - DOM) üzerine odaklanmaktadır.
DOM, web tarayıcıları tarafından oluşturulan ve web sayfalarının yapısını, içeriğini ve özelliklerini programatik olarak temsil eden bir yapıdır. Bu
bölüm, DOM'un nasıl çalıştığı, DOM yapısı ve DOM’un nasıl kullanıldığı konusunda ayrıntılı açıklamalara yer verilmiştir.

DOM yapısı, bir HTML dokümanının içeriğini, her bir elemanı ve bu elemanlar arasındaki ilişkileri bir ağaç yapısı içinde temsil etmektedir. Bu
bölümde öncelikle DOM yapısının nasıl oluşturulduğu ve organize edildiği incelenmiştir. Ardından, DOM ile nasıl etkileşime geçileceği sunulmuştur.
JavaScript kullanarak, dokümandaki öğelerin eklenmesi, silinmesi, değiştirilmesi veya yeniden düzenlenmesi gibi çeşitli manipülasyon işlemlerinin
gerçekleştirilebilmesi için gereken bilgilere yer verilmiştir. DOM içindeki elemanları seçmenin farklı yöntemleri ve bunların nasıl kullanıldığı ile
içerik manipülasyonu açıklanmıştır.

Web sayfalarının görünümünü değiştirmek için DOM üzerinde CSS manipülasyonu ile elemanların stili ve görünürlüğü gibi CSS özelliklerinin nasıl
değiştirileceği konusunda bilgilere yer verilmiştir. Ayrıca, DOM kullanarak dokümandaki elemanların manipülasyonunu nasıl gerçekleştirebileceğine
değinilmiştir. Son olarak, DOM üzerinde elemanlara ait özelliklerin (örneğin, ID, sınıf, veri özniteliği) nasıl manipüle edileceği gösterilmiştir.

Bu bölüm, web geliştirme sürecinde temel bir kavram olan DOM'un anlaşılmasına ve kullanılmasına yardımcı olacaktır. İleri seviye web uygulamaları
geliştirirken DOM'un gücünden tam anlamıyla yararlanmanıza olanak sağlayacaktır.

Bölümle İlgili Özlü Söz

Kazanımlar

Birlikte Düşünelim

Başlamadan Önce

7.1. Doküman Nesne Modeli (DOM) Nedir?

Bir web sayfasının temel yapısı aşağıdaki şekilde ifade edildiği gibi HTML, CSS ve JavaScript kodlarından oluşur.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 131 / 170
i
:
i
i
i
 Doküman Nesne Modeli (Document Object Model - DOM), HTML dokümanlarını işlemek için kullanılan bir uygulama programlama arabirimidir
(Application Programming Interface - API). DOM, bir HTML dokümanını bir ağaç olarak temsil eder. DOM, dokümana eleman eklenmesini,
kaldırılmasını ve değiştirilmesini, elemanın görünümünün değiştirilmesini kısaca dokümanda her türlü manipülasyon yapılmasını sağlayan
fonksiyonlar sunmaktadır.

DOM; HTML ve XML dokümanlarının “içeriğine, yapısına ve stiline dinamik olarak erişmesine ve bunları güncellemesine olanak tanıyan bir platform
ve dilden bağımsız bir arayüzdür”. DOM’un hedefi, çok çeşitli ortamlarda ve uygulamalarda kullanılabilecek standart bir programlama arayüzü
sağlamaktır. DOM kaynak kod değildir. Dokümanları hiyerarşik düzende ağaç yapısında mantıksal olarak temsil eder, nesnelere erişim için bir arayüz
sağlar.

7.2. JavaScript – DOM İlişkisi

DOM, web sayfalarının yapısını temsil eden bir programlama arayüzüdür. Bu model, HTML, XML veya XHTML gibi dokümanları bir ağaç yapısı
olarak temsil eder ve bu yapı üzerinde işlemler yapılmasını sağlar. DOM, dokümandaki bir elemana (element) hiyerarşik düzende erişilebilir, manipüle
edebilir, özellik ve stil ekleyebilir, olay ekleyebilir veya silebilir. JavaScript de bu nesne modelinin gücünden faydalanarak HTML dokümanını
dinamik hale getirir (Faizan, 2024):

· JavaScript sayfadaki tüm HTML öğelerini/elemanlarını değiştirebilir.

· JavaScript sayfadaki tüm HTML özelliklerini değiştirebilir.

· JavaScript sayfadaki tüm CSS stillerini değiştirebilir.

· JavaScript mevcut HTML elemanlarını ve özelliklerini kaldırabilir.

· JavaScript yeni HTML elemanları ve özellikleri ekleyebilir.

· JavaScript sayfadaki mevcut tüm HTML olaylarına tepki verebilir.

· JavaScript sayfada yeni HTML olayları oluşturabilir.

DOM ile sağlanan avantajlardan bazıları örneklerle şöyle açıklanabilir:

Elemana Erişim: DOM, dokümandaki her bir elemana erişmek için kullanılır. Örneğin dokümanda baslik idli sahip elemanına erişmek için aşağıdaki
gibi JavaScript kodu kullanılabilir:

Eleman Biçimini Değiştirme: DOM, elemanlarının stil (style) özelliklerini değiştirmek için kullanılabilir. Örneğin bir metin alanının rengini
değiştirmek için style özelliği altındaki color parametresine istenilen renk adı veya kodu verilebilir.

Yeni Eleman Ekleme, Silme, Değiştirme: DOM, dokümana yeni elemanlar eklemek, mevcut elemanları silmek veya değiştirmek için kullanılabilir.
Örneğin bir liste elemanına aşağıdaki kodlarla yeni bir öğe eklenebilir.

Eleman Özelliklerine ve İçeriğine Erişim: DOM, elemanların özelliklerine (örneğin bir resmin URL’si) ve içeriğine (örneğin bir metin alanındaki
içerik) erişmek için kullanılabilir. Örneğin; bir görselin URL’sini almak için:

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 132 / 170
i
:
i
i
i
 DOM, web sayfalarını dinamik ve etkileşimli hale getirmek için çok güçlü bir araçtır. DOM, web sayfalarının yapısını ve içeriğini temsil eder. Verilen
bu örnekler, DOM'un elemanlara erişme, biçimlendirme, manipülasyon gibi temel işlevlerini açıklamaktadır.

7.3. DOM Yapısı

Aşağıda, temel bazı HTML elemanları kullanılarak oluşturulmuş bir web sayfası yer almaktadır. Sayfanın iç içe geçmiş HTML elemanlarından
oluştuğu görülebilir.

Örnekte verilen HTML dokümanına ait DOM ağacı aşağıdaki gibi oluşturulabilir. İşte bu ağaç yapısı, tıpkı bir organizasyon şeması gibi HTML
elemanlarının hiyerarşik düzendeki temsilini sağlar.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 133 / 170
i
:
i
i
i
 HTML dokümanı içinde yer alan her öğe, DOM içinde bir eleman (element) olarak temsil edilir. Bu elemanlar, dokümandaki her türlü nesneyi,
özellikle HTML etiketlerini, içeriği ve özelliklerini temsil eder. DOM, bu elemanları bir hiyerarşik düzen içinde organize eder. Her bir HTML öğesi,
içinde bulunduğu diğer öğelerle bir hiyerarşi oluşturur.

DOM, dokümandaki öğeleri birbirine bağlayarak bir ağaç yapısı oluşturur. Bu yapının kökü document nesnesidir ve altındaki her öğe, bu nesnenin alt
düğümleridir. Örneğin bir paragraf öğesi içinde bulunan bir başlık öğesi, DOM'da paragraf öğesinin altında bir alt öğe olarak temsil edilir. Bu
hiyerarşik yapı, HTML sayfaları tarayıcılar tarafından işlenirken kullanılır. Tarayıcılar, DOM ağacını oluşturarak ve güncelleyerek dokümandaki
öğeleri manipüle eder ve görüntüler (Patika Academy, 2024).

Bir DOM ağacını meydana getiren temel bileşenler aşağıda açıklanıştır:

Doküman (document): DOM ağacının en üst düzeyinde yer alır. Bir HTML dokümanını temsil eder ve diğer tüm öğeleri içerir. Bir HTML
sayfasındaki herhangi bir elemana/öğeye erişilmek için öncelikle document nesnesine erişilmelidir (Faizan, 2024). document nesnesi, dokümandaki
tüm elemanlara ve bunların özelliklerine erişim sağlar. document nesnesine ait bazı özellikler aşağıda verilmiştir.

· [Link]: Dokümandaki <a> (anchor/çapa) elemanlarını içeren bir koleksiyon döndürür.

· [Link]: Dokümandaki <applet> elemanlarını içeren bir koleksiyon döndürür.

· [Link]: Dokümanın temel URI’sini döndürür.

· [Link]: Doküman gövdesini (<body>) temsil eden bir referans döndürür.

· [Link]: Sayfanın belirli bir çereze erişimini sağlar.

· [Link]: Dokümanın tipini temsil eden bir referans döndürür.

· [Link]: Dokümanın <html> kök elemanını temsil eden bir referans döndürür.

· [Link]: Tarayıcının doküman modunu belirler.

· [Link]: Dokümanın URI’sini döndürür.

· [Link]: Dokümanın barındırıldığı alan adını döndürür.

· [Link]: DOM yapılandırma nesnesini döndürür.

· [Link]: Dokümandaki <embed> elemanlarını içeren bir koleksiyon döndürür.

· [Link]: Dokümandaki <form> elemanlarını içeren bir koleksiyon döndürür.

· [Link]: Dokümanın <head> bölümünü temsil eden bir referans döndürür.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 134 / 170
i
:
i
i
i
 · [Link]: Dokümandaki <img> elemanlarını içeren bir koleksiyon döndürür.

· [Link]: DOM uygulama nesnesini döndürür.

· [Link]: Dokümanın karakter kodlama türünü döndürür.

· [Link]: Dokümanın son değiştirilme tarihini döndürür.

· [Link]: Dokümandaki tüm bağlantıları içeren bir koleksiyon döndürür.

· [Link]: Doküman yüklendikten sonra hazır olma durumunu döndürür.

· [Link]: Dokümana referans veren URI’yi döndürür.

· [Link]: Dokümandaki <script> elemanlarını içeren bir koleksiyon döndürür.

· [Link]: Dokümandaki hata denetim modunu belirler.

· [Link]: Dokümanın başlığını döndürür veya ayarlar.

· [Link]: Dokümanın URL’sini döndürür.

Örneğin bir dokümanın son erişim tarihi [Link] özelliği ile aşağıdaki gibi konsol ekranına çıktılanabilir.

[Link]("Son değiştirilme tarihi: " + [Link]);

Eleman/Düğüm/Öğe (Element/Node): HTML dokümanında yer alan her bir öğeyi (başlık, paragraf, resim vb.) temsil eder. Elemanlar, dokümandaki
yapının temel taşlarıdır. Her eleman; özellik, metin ve alt düğümler içerebilir. Elemanların birbiri ile ilişkisi aşağıdaki türlerden biriyle olabilir:

· Üst Öğe (Parent): Bir elemanın bir üst öğesi, onun bir üst düğümüdür. Örneğin; bir <div> içindeki bir <p> paragrafının üst öğesi <div> elemanıdır.

· Alt Öğe (Child): Bir elemanın alt öğeleri, onun alt düğümleridir. Örneğin; bir <div> elemanı içindeki herhangi bir <p> paragrafı, <div>'in alt
öğesidir.

· Kardeş Öğe (Sibling): Aynı düzeyde (aynı üst öğeye sahip) bulunan elemanlar birbirlerinin kardeşidir. Örneğin; aynı <div> içindeki iki farklı <p>
paragrafı birbirlerinin kardeşleridir.

Özellik (Attribute): Bir HTML elemanının özelliklerini temsil eder. Örneğin; bir resmin src özelliği, resmin kaynak URL’sini içerir.

Yazı (Text): HTML dokümanındaki metni temsil eder. Örneğin; bir paragrafın içinde yer alan metin.

Yorum (Comment): HTML dokümanındaki yorumları temsil eder. Yorumlar, dokümana açıklama eklemek için kullanılır ve genellikle tarayıcılar
tarafından görüntülenmez.

DOM bileşenleri birbirleriyle etkileşime girerek web sayfasının yapısını oluştururlar. document, içerisindeki eleman ve yorum düğümleriyle birlikte
tüm dokümanı temsil eder. Elemanlar, birbirleriyle üst öğe-alt öğe ilişkisi içinde olabilirler. Bir eleman, içinde başka eleman veya metin
bulundurabilir. Kardeş elemanlar, aynı düzeyde (aynı üst öğeye sahip) bulunur ve birbiriyle aynı düzeyde etkileşime girerler. Örneğin; CSS ile kardeş
elemanlara farklı stiller uygulanabilir. Özellikler, elemanların özelliklerini tanımlar ve elemanların davranışını veya görünümünü değiştirmek için
kullanılır. Yazı düğümleri, elemanların içeriğini temsil eder ve elemanların içeriğini değiştirmek için kullanılabilir. Yorumlar ise, dokümana ek
açıklamalar veya notlar eklemek için kullanılır ve genellikle tarayıcılar tarafından görüntülenmez; ancak doküman yapısının anlaşılması için
önemlidir.

7.4. DOM ile Manipülasyon

DOM ile web sayfasının içeriği, stili ve davranışı değiştirilebilir. DOM ile manipülasyon, web geliştiricilerin web sayfalarını dinamik ve etkileşimli
hale getirmelerini sağlamaktadır. Böylece kullanıcı deneyimi artırabilir, içerik güncellenebilir ve sayfanın görünümü istenildiği gibi şekillendirilebilir.

7.4.1. DOM ile Eleman Seçme

Doküman üzerindeki bir elemanı manipüle etmek için önce o elemanı seçmek gerekmektedir. HTML sayfasındaki bir eleman DOM ile aşağıdaki
yöntemlerden biriyle seçilebilir:

[Link](id): Bu metod, HTML sayfasındaki bir elemanı id özelliğine göre seçmek için kullanılır. idsi belirtilen elemanın yalnızca
bir tane olması gerekir çünkü her id benzersiz olmalıdır. Bu yöntem, DOM içinde elemanlara hızlı bir erişim sağlar.

Örneğin aşağıdaki HTML kodunda “elemanim” idsine sahip div öğesi verilmiştir.

<div id="elemanim">İÜ AUZEF</div>

Aşağıdaki JavaScript kodunda ise getElementById() metoduyla “elemanim” idsine sahip div öğesi seçilmekte ve eleman değişkenine atanmaktadır.
Böylece JavaScript kodunun devamında bu değişken aracılığıyla bu div öğesine erişilebilir ve onunla etkileşime geçilebilir veya manipüle edilebilir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 135 / 170
i
:
i
i
i
 let eleman = [Link]("elemanim");

[Link](name): Bu metod, HTML sayfasındaki bir elemanı name özelliğine göre seçmek için kullanılır. Aynı isme sahip
birden fazla eleman olabilir, bu nedenle döndürülen sonuç bir NodeList olacaktır.

Örneğin aşağıdaki HTML kodunda verilen onay kutusu (checkbox) türünde input öğesinin aynı isme (renk) sahip olduğu görülebilir.

Aşağıdaki JavaScript kodu ise renk ismindeki bu input öğelerini [Link]() yöntemiyle seçmektedir.

let renkler = [Link]("renk");

Yukarıdaki kod satırında “renk” adına sahip olan tüm input öğelerini içeren NodeList, renkler değişkenine atanmıştır. JavaScript kodunun devamında
renkler değişkeniyle verilen isme sahip öğelerle etkileşime geçilebilir.

[Link](tag): Bu metod, belirli bir etikete sahip tüm elemanları seçmek için kullanılır. Örneğin HTML kodunda
aşağıdaki gibi “div” etiketine sahip elemanlar olsun.

<div>İÜ</div>

<div>AUZEF</div>

<div>Bilgisayar Programcılığı</div>

Aşağıdaki JavaScript kodu “div” etiketine sahip tüm elemanları [Link]() yöntemiyle seçmektedir.

let elemanlar = [Link]("div");

[Link](class): Bu metod, belirli bir sınıfa sahip tüm elemanları seçmek için kullanılır. Örneğin, “sinif” adında bir
sınıfa sahip tüm elemanların seçilmesi için bu metod kullanılabilir.

let elemanlar = [Link]("sinif");

[Link](): Bu metod, CSS seçicileri kullanarak belirli bir elemanı seçmek için kullanılır. Metod verilen seçiciyle eşleşen ilk elemanı
döndürür.

let eleman = [Link]("#elemanim");

HTML gövdesi aşağıdaki gibi verilsin.

<body>

<p>İlk paragrafım</p>

<p class="sinif">İstanbul Üniversitesi</p>

<p class="sinif">Açık ve Uzaktan Eğitim Fakültesi</p>

<a href="[Link] Programcılığı</a>

</body>

Aşağıdaki JavaScript kodunda “sinif” isimli sınıfa ait ilk paragrafın döndürülmesi için document. querySelector() yöntemi kullanılmıştır.

[Link]("[Link]");

[Link]() metodu etiket adı, sınıf adı, id veya diğer özelliklerle birlikte kullanılabilir. Örneğin [Link]() ile idsi
“isim_soyad” olan eleman aşağıdaki satırla seçilebilir.

[Link]("#isim_soyad");

[Link]() ile üst öğesi h1 olan ilk paragraf elemanı aşağıdaki satırla seçilebilir.

[Link]("h1 > p");

[Link]() ile target özelliği olan ilk çapa/anchor elemanı aşağıdaki satırla seçilebilir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 136 / 170
i
:
i
i
i
 [Link]("a[target]");

[Link]() metodu seçici ile eşleşen ilk elemanı döndürmekteydi. Seçici ile eşleşen tüm elemanların döndürülmesi için
querySelectorAll() metodu kullanılabilir. Böylece CSS sorgusu ile eşleşen tüm HTML elemanları listelenecektir. Aşağıda verilen JavaScript kodu ile
“sinif” sınıfına ait olan tüm paragraflar seçilecek, ilk paragraf nesnesi deg[0], ikincisi ise deg[1] olarak tutulacaktır.

const deg = [Link]("[Link]");

[Link]: Ebeveyn elemana erişir. Örneğin HTML kodunda aşağıdaki div ve içinde p etiketi olsun.

<div id="parent">

<p id="child">Bu bir örnek paragraf</p>

</div>

Aşağıdaki JavaScript kodunun ilk satırında [Link]() metoduyla idsi child olan paragraf seçilmiş ve childElement isimli değişkene
atanmıştır. İkinci satırda child elemanının içinde yer aldığı ebeveyn parentNode ile seçilmiş ve sonraki satırda konsola çıktılanmıştır.

[Link]: Ebeveyn elemanın ilk düğümüne erişir. Örneğin HTML kodunda aşağıdaki elemanlar olsun.

Aşağıdaki JavaScript kodunun ilk satırında [Link]() metoduyla idsi parent olan div seçilmiş ve parentElement isimli değişkene
atanmıştır. İkinci satırda ebeveyn elemanın ilk düğümü olan paragraf etiketi firstChild ile seçilmiş ve sonraki satırda konsola çıktılanmıştır.

[Link]: Ebeveyn elemanın son düğümüne erişir. Örneğin HTML kodunda aşağıdaki elemanlar olsun.

Aşağıdaki JavaScript kodunun ilk satırında [Link]() metoduyla idsi parent olan div seçilmiş ve parentElement isimli değişkene
atanmıştır. İkinci satırda ebeveyn elemanın son düğümü olan span etiketi lastChild ile seçilmiş ve sonraki satırda konsola çıktılanmıştır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 137 / 170
i
:
i
i
i
 Aşağıdaki JavaScript kodunun ilk satırında [Link]() metoduyla idsi parent olan div seçilmiş ve parentElement isimli değişkene
atanmıştır. İkinci satırda ebeveyn elemanın tüm düğümleri <p>, <span>, <a> etiketleri childNodes ile seçilmiş ve sonraki satırda NodeList türünde
konsola çıktılanmıştır.

[Link]: Bir önceki kardeş elemana erişir. [Link]: Bir sonraki kardeş elemana erişir.

Örneğin HTML kodunda aşağıdaki elemanlar olsun.

Aşağıdaki JavaScript kodunun ilk satırında [Link]() metoduyla idsi middle olan div seçilmiş ve middleElement isimli değişkene
atanmıştır. İkinci satırda bu elemanın bir önceki kardeş elemanı olan ilk paragraf previousElementSibling ile seçilmiş, sonraki satırda bu elemanın bir
sonraki kardeş elemanı olan üçüncü paragraf nextElementSibling ile seçilmiş ve sonraki satırlarda bunlar konsola çıktılanmıştır.

7.4.2. DOM ile İçerik Manipülasyonu

Bir HTML elemanının içeriğini değiştirmek veya içeriğine erişmek için [Link], [Link] ve [Link]
kullanılabilir; ancak her biri farklı davranış göstermektedir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 138 / 170
i
:
i
i
i
 [Link]: innerText özelliği, bir elemanın içeriğini temsil eden metni alır veya ayarlar. Bu özellik, elemanın içindeki metni sadece
görüntülemek için kullanılır, HTML etiketlerini dikkate almaz.

[Link]: innerHTML özelliği, bir elemanın içeriğini temsil eden HTML veya metni alır veya ayarlar. Bu özellik, eleman içindeki tüm
HTML kodunu alır veya değiştirir. Bu nedenle, içindeki HTML etiketleri değiştirilebilir veya yeni etiketler eklenebilir.

Diğer bir örnek olarak; bir <h2> başlığın içinde İÜ yazıldığı düşünülsün. Bu içeriğin İÜ AUZEF haline getirilebilmesi için aşağıdaki kodlar
kullanılabilir.

[Link]: textContent özelliği, bir elemanın içeriğini temsil eden metni alır veya ayarlar. innerText gibi, bu özellik de HTML etiketlerini
dikkate almaz ve yalnızca metni alır veya ayarlar. innerText’den farklı olarak, textContent içindeki tüm metni alır, yani iç içe geçmiş elemanların
içeriğini de alır.

7.4.3. DOM ile CSS Manipülasyonu

Bir elemanın CSS özelliklerine DOM ile erişilebilir ve istenen CSS özelliği değiştirilebilir. CSS manipülasyonunda kullanılabilecek bazı DOM öğeleri
Tablo 12’de verilmiş olup, bu öğeler tablodan sonra kısaca açıklanmıştır.

Tablo 12: DOM elemanları

background backgroundAttachment backgroundColor backgroundImage

backgroundPosition backgroundRepeat border borderBottom
borderBottomColor borderBottomStyle borderBottomWidth borderColor
borderLeft borderLeftColor borderLeftStyle borderLeftWidth
borderRight borderRightColor borderRightStyle borderRightWidth
borderStyle borderTop borderTopColor borderTopStyle
borderTopWidth borderWidth clear clip

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 139 / 170
i
:
i
i
i
 color cursor display filter
cssFloat font fontFamily fontSize
fontVariant fontWeight height left
letterSpacing lineHeight listStyle listStyleImage
listStylePosition listStyleType margin marginBottom
marginLeft marginRight marginTop overflow
padding paddingBottom paddingLeft paddingRight
paddingTop pageBreakAfter pageBreakBefore position
strokeDasharray strokeDashoffset strokeWidth textAlign
textDecoration textIndent textTransform top
verticalAlign visibility width zIndex

Bu özelliklerle ilgili birkaç örnek aşağıda verilmiştir. Aşağıdaki satır belirli bir elementin arka plan rengini kırmızı olarak ayarlar. Sonraki satır
elementin kenarlığını sürekli, siyah renk ve 1px kalınlığında ayarlar.

[Link] = "red";

[Link] = 'border: 1px solid black';

Aşağıdaki satır dokümandaki ilk <table> öğesinin içindeki ilk <th> ve <td> öğelerinden herhangi birini seçer ve bu öğeyi element adında bir
değişkene atar. Sonraki satır ise seçili elementin kenarlığını siyah ve 1px kalınlığında ayarlar.

let element = [Link]('table th td');

css(element, { border: '1px', color: 'black'});

Tablo 12’de verilen DOM öğeleri aşağıda kısaca açıklanmıştır ([Link], 2024).

· background: Arka plan özelliklerini tanımlar (renk, resim, tekrarlama, konum vb.).

· backgroundAttachment: Arka plan resminin sayfaya bağlı mı yoksa kaydırıldığında sabit mi kalacağını belirler.

· backgroundColor: Arka plan rengini belirler.

[Link] = "pink";

· backgroundImage: Arka plan resmini belirler.

[Link] = "url('[Link]')";

· backgroundPosition: Arka plan resminin konumunu belirler.

· backgroundRepeat: Arka plan resminin tekrarlanma şeklini belirler.

· border: Kenarlık özelliklerini tanımlar (renk, stil, genişlik vb.).

[Link]("divElemani").[Link] = "thick solid #F000FF";

· borderBottom: Alt kenarlık özelliklerini tanımlar.

· borderBottomColor: Alt kenarlık rengini belirler.

· borderBottomStyle: Alt kenarlık stilini belirler.

· borderBottomWidth: Alt kenarlık genişliğini belirler.

· borderColor: Kenarlık rengini belirler.

· borderLeft: Sol kenarlık özelliklerini tanımlar.

· borderRight: Sağ kenarlık özelliklerini tanımlar.

· borderStyle: Kenarlık stilini belirler.

· borderTop: Üst kenarlık özelliklerini tanımlar.

· borderTopColor: Üst kenarlık rengini belirler.

· borderTopStyle: Üst kenarlık stilini belirler.

· borderTopWidth: Üst kenarlık genişliğini belirler.

· borderWidth: Kenarlık genişliğini belirler.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 140 / 170
i
:
i
i
i
 · clear: Yana kayan öğelerin geçeceği kenarları belirler.

· color: Metin rengini belirler.

[Link]("myDiv").[Link] = "lightblue";

· cursor: Fare işaretçisinin görünümünü belirler.

· display: Öğenin görüntülenme davranışını belirler.

[Link]("paragrafim").[Link] = "none";

· filter: Elemana uygulanacak görüntü efektlerini belirler.

[Link]("myImg").[Link] = "grayscale(50%)";

· font: Metin fontunu ve boyutunu belirler.

[Link]("metin").[Link] = "italic bold 30px arial,serif";

· fontFamily: Metin fontunu belirler.

· fontSize: Metin boyutunu belirler.

· fontWeight: Metin kalınlığını belirler.

[Link]("metin").[Link] = "200";

· height: Öğenin yüksekliğini belirler.

· left: Öğenin sol kenarının konumunu belirler.

· lineHeight: Satır yüksekliğini belirler.

· listStyle: Liste işaretlerinin görünümünü belirler.

· margin: Dış kenar boşluğunu belirler (üst, sağ, alt, sol) .

[Link]("divElemani").[Link] = "30px 15px 30px 5px";

· overflow: Taşan içeriğin nasıl ele alınacağını belirler.

· padding: İç kenar boşluğunu belirler.

<div id="box">Bilgisayar Programcılığı</div>

let box = [Link]("box");

[Link] = "20px";

· position: Öğenin pozisyonunu belirler.

· textAlign: Metin hizalamasını belirler.

<p id="paragraph">İÜ</p>

let paragraph = [Link]("paragraph");

[Link] = "right";

· textDecoration: Metin süslemesini belirler.

· textIndent: Metin girintisini belirler.

<p id="paragraph">İÜ AUZEF</p>

let paragraph = [Link]("paragraph");

[Link] = "20px";

· textTransform: Metin dönüşümünü belirler.

· top: Öğenin üst kenarının konumunu belirler.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 141 / 170
i
:
i
i
i
 · verticalAlign: Dikey hizalamayı belirler.

[Link]("myTd").[Link] = "top";

· visibility: Öğenin görünürlüğünü belirler.

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>

let box = [Link]("box");

[Link] = "hidden";

· width: Öğenin genişliğini belirler.

[Link]("girisDugmesi").[Link] = "250px";

· zIndex: Öğenin yığınlama düzenini belirler.

7.4.4. DOM ile Eleman Manipülasyonu

1. DOM ile Eleman Oluşturma

Web sayfasında bir eleman oluşturmak için createElement metodu kullanılır.

· [Link](element)

Oluşturulan elemanı sayfaya dinamik olarak eklemek için append veya appendChild metodu kullanılır.

· [Link](child)

· [Link](child)

Bu üç metoda ilişkin örnek aşağıda verilmiştir. İlk satırda [Link]() ile yeni bir div elemanı oluşturulmuş ve yeniDiv değişkenine
atanmıştır. İkinci satırda oluşturulan div elemanının içeriği innerHTML özelliğiyle “Div içeriği” olarak ayarlanmıştır. Son satırda oluşturulan div
elemanı appendChild() metoduyla dokümana eklenir. appendChild() metodu, dokümandaki bir öğenin alt elemanlarından birini belirtilen öğenin
sonuna ekler.

let yeniDiv = [Link]('div');

[Link] = 'Div içeriği';

[Link](yeniDiv);

2. DOM ile Eleman Ekleme

Yeni oluşturulan bir eleman belirli bir elemandan önce veya sonra eklenebilir. Bunun için after(), before(), insertBefore(), insertAfter() metodları
kullanılır.

[Link](eklenecekElement);

[Link](eklenecekElement);

[Link](eklenecekElement, mevcutelement);

[Link](eklenecekElement, mevcutelement);

before() metodunu örneklemek için verilen aşağıdaki JavaScript kodunun ilk satırında dokümandaki ilk table elemanı [Link]('table')
ile seçilmiş ve tablo değişkenine atanmıştır. İkinci satırda [Link]('p') komutuyla yeni bir p, paragraf elemanı oluşturmuş ve
yeniParagraf değişkenine atanmıştır. Bu paragrafın içeriği innerText özelliğiyle “insert before Örneği” olarak ayarlanmıştır. Son satırda
[Link](yeniParagraf) komutuyla oluşturulan yeni paragraf (yeniParagraf) tablodan önce dokümana eklenmiştir. Eğer tablodan sonra eklenmek
istenirse [Link](yeniParagraf) şeklinde kullanılabilir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 142 / 170
i
:
i
i
i
 3. DOM ile Eleman Silme

Dokümandan bir eleman silmek için remove() ve removeChild() metodları kullanılır.

[Link]();

[Link](silinecekElement);

Aşağıdaki örnekte parent_div idsine sahip eleman doğrudan DOM'dan kaldırılır.

[Link]('parent_div').remove();

Aşağıdaki örnekte ebeveynden bir çocuk eleman kaldırılmıştır.

[Link](silinecekElement);

4. DOM ile Eleman Değiştirme ve Klonlama

Bir elemanı değiştirmek için replaceChild() metodu, elemanı olduğu gibi klonlamak için cloneNode() metodu kullanılır.

[Link](eski, yeni);

[Link]();

7.4.5. DOM ile Özellik Manipülasyonu

[Link](ozellik): Bu metod, bir elemanın özelliğinin değerini alır. Örneğin bir a etiketinin (link/çapa/anchor) href özelliğini almak için
kullanılabilir.

<a id="link" href="[Link] Üniversitesi</a>

Yukarıda verilen link JavaScript koduyla aşağıdaki gibi seçilip href özelliği konsola çıktılanabilir.

[Link](ozellik, deger): Bu metod, bir HTML öğesine belirli bir nitelik atar veya mevcut özelliğin değerini değiştirir.

let linkElement = [Link]("link");

[Link]("href","[Link]

[Link](ozellik): Bu metod, belirtilen özelliğin bir HTML öğesinde mevcut olup olmadığını kontrol eder. Nitelik varsa true, yoksa
false döndürür.

[Link](ozellik): Bu metod, bir HTML öğesinden belirtilen özelliği kaldırır.

let linkElement = [Link]("link");

[Link]("href");

Aşağıda DOM ile özellik manipülasyonu yapan metodların kullanım örnekleri verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 143 / 170
i
:
i
i
i
 Bölüm Özeti
Doküman Nesne Modeli (Document Object Model - DOM), web sayfasındaki elementlere, özelliklerine, olaylarına ve sitillerine erişim imkânı
sağlayan arayüzdür.

JavaScript dilinde DOM API aracılığıyla web sayfasındaki bir eleman oluşturulabilir, silinebilir, herhangi bir elemana erişilebilir, elemanın biçimi
değiştirilebilir.

Bu bölümde; DOM’un tanımından başlayarak, DOM ağaç yapısı ve JavaScript ile DOM’un gücünden faydalanarak bir HTML sayfasında
yapabildikleri konusunda bilgiler verilmiştir.

Kaynakça
Faizan, P. (2024). Javascript HTML DOM. [Link]

JavaScript Tutorial. (2024). JavaScript DOM. [Link]

Medium (2023). JavaScript DOM Manipulation: A Guide. [Link]

Patika Academy (2024). Document Object Model (DOM) Nedir, [Link]

Robie, J. (2024). What is the Document Object Model? [Link]

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 144 / 170
i
:
i
i
i
 [Link] (2024). HTML DOM Style Object. [Link]

Ünite Soruları

Soru-1 :

Aşağıdakilerden hangisi DOM’un açık adıdır?

(Çoktan Seçmeli)

(A) Document Output Model

(B) Document Oriented Management

(C) Document Object Model

(D) Document Ownership Model

Document Overload Model

Cevap-1 :

Document Object Model

Soru-2 :

Aşağıdaki seçeneklerden hangisi DOM’u en iyi biçimde tanımlar?

(Çoktan Seçmeli)

(A) HTML dokümanının diğer adıdır.

(B) HTML dokümanlarını işlemek için kullanılan bir uygulama programlama arabirimidir (API’dir).

(C) Bir programlama dilidir.

(D) Bir servis yazılımıdır.

Bir kullanıcı arayüzüdür.

Cevap-2 :

HTML dokümanlarını işlemek için kullanılan bir uygulama programlama arabirimidir (API’dir).

Soru-3 :

Yukarıda verilen bir HTML dökümanının DOM ağacı kesitine göre aşağıdaki elemanlardan hangisi bu HTML dokümanında yer almaz?

(Çoktan Seçmeli)

(A) Sıralı liste

(B) Resim

(C) Link

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 145 / 170
i
:
i
i
i
 (D) Madde imi

div

Cevap-3 :

Resim

Soru-4 :

Yukarıdaki DOM ağacı kesitine göre aşağıdakilerden hangisi yanlıştır?

(Çoktan Seçmeli)

(A) 6. dereceden başlık (h6) ve anchor/çapa (a) elemanları paragrafın (p) alt öğeleridir.

(B) 2. dereceden başlık (h2) elemanının üst öğesi body elemanıdır.

(C) Görsel (img) ve tablo (table) elemanları kardeştir.

(D) 1. dereceden başlık (h1) ve tablo (table) elemanları kardeştir.

p, h6, a, h2, h1, table, tr, div ve img elemanlarının tümü body elemanının alt öğeleridir.

Cevap-4 :

Görsel (img) ve tablo (table) elemanları kardeştir.

Soru-5 :

DOM ile bir elemanın dış kenar boşluğu hangi CSS özelliği ile ayarlanır?

(Çoktan Seçmeli)

(A) border

(B) position

(C) space

(D) padding

(E) margin

Cevap-5 :

margin

Soru-6 :

Aşağıdakilerden hangisiHTML dokümanındaki <a> (anchor/çapa) elementlerini içeren bir koleksiyon döndürür?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 146 / 170
i
:
i
i
i
 (A) document.a

(B) [Link]

(C) [Link]

(D) [Link]

[Link]

Cevap-6 :

[Link]

Soru-7 :

Yukarıda verilen div elemanını id özelliğine göre seçmek için aşağıdaki seçeneklerden hangisi kullanılmalıdır?

(Çoktan Seçmeli)

(A) [Link]("id_");

(B) document.getElementBy_id();

(C) [Link]("ad_");

(D) [Link]("sinif_");

[Link]("div.sinif_");

Cevap-7 :

[Link]("id_");

Soru-8 :

hedef isimli HTML elemanından önce başka bir eleman eklemek için hangi metod kullanılır?

(Çoktan Seçmeli)

(A) [Link](element);

(B) [Link](element);

(C) [Link](element);

(D) [Link](element);

[Link](element);

Cevap-8 :

[Link](element);

Soru-9 :

Aşağıdaki tablo kenarlığının 5px, solid ve kenarlık renginin kırmızı olmasını sağlayan JavaScript kodu hangi seçenekte yer almaktadır?

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 147 / 170
i
:
i
i
i
 (Çoktan Seçmeli)

Cevap-9 :

Soru-10 :

Aşağıda JavaScript kodu ile oluşturulan bağlantının HTML dokümanına eklenebilmesi için … verilen yere aşağıdaki seçeneklerden hangisi
getirilmelidir?

(Çoktan Seçmeli)

(A) [Link](anc);

(B) [Link](a);

(C) [Link](anc);

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 148 / 170
i
:
i
i
i
 (D) [Link](anc);

[Link](anc);

Cevap-10 :

[Link](anc);

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 149 / 170
i
:
i
i
i
 8. Javascrıpt Dilinde Olay

Özlü Söz
“Hangi çalışma alanına girmek isterseniz isteyin, en az bir programlama dili öğrenmek büyük önem taşıyor.”

– Ram Ray

Kazanımlar
1. JavaScript olay kavramını ve bileşenlerini bilir.

2. Olay tanımlama türlerini bilir ve olay tanımlayabilir.

3. En temel olay kategorilerini bilir.

4. Pencere, form, klavye, fare gibi kullanıcının en sık etkileşimde bilindiği olayları bilir ve tanımlayabilir.

Birlikte Düşünelim
1. Web sayfasında butona basıldığında veya içerik girildiğinde yapılması istenenler nasıl gerçekleştirilir?

2. Olay nedir? Olay bileşenleri nelerdir?

3. Olay nasıl tanımlanır? Ne tür olaylar mevcuttur?

4. En sık kullanılan olaylar nelerdir?

5. Bir olay bütün elemanlar için kullanılabilir mi?

6. Bir form elemanına özgü olaylar var mıdır?

7. Kullanıcı tarayıcı penceresiyle etkileşime nasıl girebilir? Pencerenin kapandığını veya başka bir sekmeye geçildiği bilinebilir mi?

8. Form içeriğinin bir butona basıldığında gönderilmesi, temizlenmesi veya formda bir hata olması hangi olaylarla ilişkilidir?

9. Klavye oayları nelerdir? Bir input alanına veri girerken bir butona basmaya gerek kalmadan otomatik hesaplama hangi olayı kullanarak yapılır?

10. Bir elemanın fareyle üzerine gelindiği nasıl bilinir? Aynı şekilde fare elemanın üzerine gittiğinde bir olay tanımlanabilir mi? Örneğin bir resmin
üzerine gelindiğinde açıklama yazısının görüntülenmesi, fare resmin üzerinden gittiğinde bu açıklama yazısının gitmesi hangi olaylarla yapılır?

11. Şifre girilmesi gereken bir input alanına panodaki içeriğin kopyalanması engellenebilir mi? Kullanıcıyı şifre yazmaya mecbur etmek mümkün
müdür?

12. Bir eleman sürüklenip bırakıldığında ne tür olaylar meydana gelir? Bunların bir zaman sıralaması var mıdır?

Başlamadan Önce
Web sayfalarının iskeletini oluşturan HTML elemanları etkileşim olmazsa son derece işlevsel, sade bir belgeden farksızdır. Bu sebeple web sayfalarına
dinamizm kazandırmak ve kullanıcının sayfayla olan etkileşimini artırmak için JavaScript dilinde olaylar kullanılır.

Olaylar üç temel bileşene sahiptir: Olayın gerçekleşeceği hedef eleman, olay adı ve olay meydana geldiğinde yapılacak işler. Dolayısıyla bir olay
tanımlanırken hangi doküman elemanı veya elemanları için geçerli olduğu seçilmelidir. Bu sebeple bir önceki bölümde ele alınan DOM seçicileri iyi
bilinmelidir. İkinci olarak olay türleri bilinmelidir. Sık kullanılan pencere olayı, form olayı veya form elemanlarının işlevlerine göre yapabileceği
olaylar, klavye ve fare olayları özellikle çok iyi bilinmelidir. Son olarak bir olay olduğunda neler yapılacağı olay gövdesinin içinde verilmelidir.

Bu bölümde, kullanıcının web sayfası ile nasıl etkileşimde bulunacağı, olay kavramı ve olay bileşenleri ve türleri ele alınmaktadır. Olay kategorileri

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 150 / 170
i
:
i
i
i
 altında çeşitli olaylar listelenmekte ve her bir olay kategorisiyle ilgili örnek olaylar verilerek olay konusu açıklanmıştır.

Bölümle İlgili Özlü Söz

Kazanımlar

Birlikte Düşünelim

Başlamadan Önce

8.1. Olaylar
JavaScript dili, HTML sayfasındaki içerik ve yapıyla kullanıcının etkileşimini sağlamak için geliştirilmiş bir dildir. Kullanıcı bir butona tıkladığında,
bir form elemanına içerik girdiğinde, bir form elemanından birini veya birkaçını seçtiğinde, sürükleyip bıraktığında, bir elamanın üzerinden fareyle
geçtiğinde, klavyeden bir tuşa bastığında vb. herhangi bir etkileşimde bulunduğunda JavaScript dilinde tanımlı olay (event) çalıştırılır. JavaScript dili,
olaylar sayesinde sayfanın dinamik ve etkileşimli kullanımını sağlar.

8.2. Olay İşleme

JavaScript dilinde olayların işlenebilmesi için olayın adı, olayın hangi bileşen veya bileşenler için çalışacağı (hedef) ve olay meydana
geldiğinde/tetiklendiğinde çalıştırılacak kodlar olmak üzere üç bileşen belirtilmelidir (Flanagan, 2020).

Örneğin bir butona tıklandığında yapılacakları işlemek için öncelikle dokümanda o buton seçilmelidir. Örneğin sayfada kaydet idli butonu bir önceki
bölümde ele alınan element seçme yöntemlerinden biriyle id değerine göre aşağıdaki gibi seçelim ve kaydetButonu olarak isimlendirelim.

let kaydetButonu = [Link]("kaydet");

Akabinde olay tıklama (click) olayı olduğu için [Link] olayı işletilecektir. Bu olay olduğunda çalışacak kodlar ise süslü parantezler
arasında anonim fonksiyon kullanılarak verilebilir.

JavaScript dilinde olaylar geleneksel yöntem ile ve olay dinleyicisi ile işlenmektedir.

8.2.1. Geleneksel Olay İşleme

Klasik yöntemde bir elemana ait olay on önekiyle işlenir (Flanagan, 2020; MDN, 2024a; Svekis, Putten ve Percival, 2021; w3schools, 2024). Örneğin
bir elementin tıklanma olayını işlemek için onclick, kontrol bir olaya geçtiğinde yapılacakları işlemek için onfocus, bir elementin içeriği değiştiğinde

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 151 / 170
i
:
i
i
i
 onchange ve bir element seçildiğinde onselect olayları tetiklenir.

Aşağıda kaynak kodu verilen web sayfasındaki İçerik Değiştir butonuna tıklandığında icerik alanının içeriği “Dünya” olarak değiştirilmektedir. Bu
amaçla öncelikle hedef eleman yani buton seçilmelidir. Kod incelendiğinde İçerik Değiştir butonu id alanına göre aşağıdaki kod satırıyla seçilmiştir.

let icerikDegistirButonu = [Link]("btn");

Akabinde tıklama olayı onclick olarak belirtilmiş ve daha sonra da anonim fonksiyon içerisinde olay meydana geldiğinde (buton tıklandığında) içerik
alanını “Merhaba” olarak değiştirecek kod verilmiştir.

[Link]("icerik").innerText = "Dünya";

Sayfa kodunun tamamı aşağıda yer almaktadır.

Sayfada butonun click olayına (onclick) icerikDegistir isimli fonksiyon verilmiştir. Yani kullanıcı butona bastığında icerikDegistir fonksiyonu
çalışacaktır. Butona basmadan önce (sol) ve bastıktan sonra (sağ) sayfanın görüntüsü aşağıda verilmiştir.

Klasik yöntemle bir olay işlenirken olayın kodları anonim bir fonksiyon yerine isimli bir fonksiyonla da verilebilir. Böylece bu fonksiyon sadece o
olay için değil başka olaylar için de ismiyle çağrılıp tekrar kullanılabilir.

Yukarıda verilen örnek, bu sefer butona tıklandığında isimsiz fonksiyon yerine icerikDegistir() isimli fonksiyonun çalışması sağlanmıştır. <script>
</script> bloğunda fonksiyonun kodu verilmiştir. Böylece icerikDegistir() fonksiyonu başka olaylar için de ismiyle çağrılarak çalıştırılabilir. Aşağıda
bu kullanımın kodu verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 152 / 170
i
:
i
i
i
 Bu kod da bir önceki gibi sorunsuz bir şekilde aynı çıktıyı vererek çalışacaktır.

8.2.2. Olay Dinleyiciyle Olay İşleme

Geleneksel yöntemde bir elemana bağlı olarak yalnızca bir olay çalıştırılmaktaydı. Olay dinleyicileri ise bir elemana bağlı olarak birden fazla olayın
çalıştırılmasını sağlar. Bu yöntemde olaydan önce on öneki kullanılmaz. Örneğin tıklama olayı işlenecekse click, yüklenme olayı işlenecekse load
yazılır. addEventListener() metoduyla ile tanımlanan olay dinleyici sözdizimi aşağıda verilmiştir (Flanagan, 2020; MDN, 2024a; Svekis ve diğerleri,
2021; w3schools, 2024).

[Link]('olay1', 'olay2', 'olay3', function () {

kod satırı1;

kod satırı2;

});

Geleneksel yöntemde verilen butona tıklandığında içerik alanını değiştiren örnek olay dinleyicisi ile de çalıştırılabilir. İçerik Değiştir butonu
querySelector metoduyla aşağıdaki gibi seçilmiştir.

Sayfanın tamamının kodu ise aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 153 / 170
i
:
i
i
i
 Bu sayfa da bir önceki gibi sorunsuz bir şekilde aynı çıktıyı vererek çalışacaktır.

Olay dinleyicisi ile benzer şekilde bir elementten bir olayı kaldırmak için removeEventListener() metodu kullanılır.

8.3. Window Olayları

Tarayıcı penceresiyle ilgili Window olayları aşağıda listelenmiştir. Örneğin kullanıcı tarayıcı penceresini yeniden boyutlandırdığında, tarayıcı
penceresi görüntülendiğinde, kullanıcı başka bir sekmeden geldiğinde vb. pencere olayları Tablo 13’de listelenmiştir (MDN, 2024b; w3schools, 2024).

Tablo 13: JavaScript Window olayları

Olay Açıklama
DOMContentLoaded HTML elemanları (DOM) tamamen yüklendiğinde tetiklenir.
onabort Bir dosyanın, kaynağın (resim, görüntü vb) yüklenmesi iptal edildiğinde tetiklenir.
onafterprint Bir sayfa basıldığında tetiklenir.
onbeforeprint Bir sayfa basılmadan önce tetiklenir.
onbeforeunload Kullanıcı sayfadan ayrılmadan önce tetiklenir.
onerror Bir hata meydana geldiğinde tetiklenir.
onhashchange Sayfa linkinin (URL) hash değeri değiştiğinde tetiklenir.
onload Sayfanın yüklenmesi tamamlandığında tetiklenir.
onmessage Tarayıcı pencereleri arasında veya iframe çerçeveleri arasında iletişim gerçekleştiğinde tetiklenir.
onoffline Tarayıcı çevrimdışı olduğunda tetiklenir.
ononline Tarayıcı çevrimiçi olduğunda tetiklenir.
onpagehide Kullanıcı bir sayfadan ayrıldığında tetiklenir.
onpageshow Kullanıcı bir sayfayı görüntülediğinde tetiklenir.
onpopstate Geçmiş durumu değiştiğinde tetiklenir (ileri veya geri düğmesi).
onreadystatechange Tarayıcı penceresinin hazır olma durumu değiştiğinde tetiklenir.
onresize Tarayıcı penceresi yeniden boyutlandırıldığında tetiklenir.
onscroll Sayfa içinde kaydırma yapıldığında tetiklenir.

onstorage Tarayıcı depolama alanı veya çerez depolama alanı değiştiğinde tetiklenir.
onunload Tarayıcı penceresi kapatıldığında tetiklenir.

Örneğin tarayıcı sayfasının yeniden boyutlandırıldığında bir uyarı penceresinde bu durumu kullanıcıya bildirmek için onresize olayı kullanılır. Sayfa
yüklendiğinde kullanıcıyı uyarı penceresiyle bilgilendirmek için onload olayı kullanılır. Buna ilişkin örnek aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 154 / 170
i
:
i
i
i
 Verilen sayfa çalıştırıldıktan sonra tarayıcı penceresinin boyutu değiştirildiğinde aşağıdaki uyarı penceresi görüntülenecektir.

8.4. Kaydırma Çubuğu Olayları

Web sayfasında dikey ve yatay kaydırma çubuğu kullanıldığında tetiklenen olaylar Tablo 14’te verilmiştir (MDN, 2023a, 2023b; w3schools, 2024).

Tablo 14: JavaScript kaydırma çubuğu olayları

Olay Açıklama
scroll Sayfa veya bir elementin içeriği kaydırıldığında tetiklenir.
scrollTo Sayfayı verilen koordinatlara (x-yatay, y-dikey) kaydırmak için kullanılır.
scrollBy Sayfayı verilen mesafe kadar koordinatlara (x-yatay, y-dikey) kaydırmak için kullanılır.
onwheel Farenin tekeri aşağı veya yukarı döndürüldüğünde tetiklenir.
scrollEnd Sayfa veya bir elementin içeriğinin kaydırılması tamamladığında tetiklenir.

Örneğin sayfayı 750 piksel yatay, 250 piksel dikey konumuna kaydırmak için scrollTo metodu aşağıdaki gibi kullanılabilir.

[Link](750, 250);

Sayfayı mevcut konumundan 50 piksel sağa, 150 piksel aşağıya kaydırmak için ise scrollBy metodu aşağıdaki gibi kullanılabilir.

[Link](50, 150);

Tarayıcı penceresinin veya bir elementin mevcut kaydırma konumunu kontrol etmek veya istenilen konuma ayarlamak için Tablo 15’te verilen dört

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 155 / 170
i
:
i
i
i
 özellik de kullanılabilir.

Tablo 15: JavaScript konum özellikleri

Olay Açıklama
scrollX Pencerenin veya bir elementin yatay kaydırma konumunu (sol-sağ) piksel cinsinden döner. Sadece okunabilir (readonly)
özelliktir, değiştirilemez.
scrollY Pencerenin veya bir elementin dikey kaydırma konumunu (yukarı-aşağı) piksel cinsinden döner. Sadece okunabilir
(readonly) özelliktir, değiştirilemez.
scrollLeft Pencerenin veya bir elementin yatay kaydırma pozisyonunu döner veya ayarlar. Değiştirilebilir özelliktir.
scrollTop Pencerenin veya bir elementin dikey kaydırma pozisyonunu döner veya ayarlar. Değiştirilebilir özelliktir.

Örneğin sayfadaki icerikDegistirButonu dikey konumunu 750 piksele ayarlamak için scrollTop, yatay konumunu 250 piksele ayarlamak içinse
scrollLeft özelliği aşağıdaki gibi kullanılabilir.

8.5. Form Olayları

Kullanıcının dokümandaki form veya form elemanlarıyla etkileşimde bulunabileceği olaylar Tablo 16’da listelenmiştir (MDN, 2024a; w3schools,
2024). Bu olaylardan bazısı yalnızca bir veya birkaç elemana özeldir, yani her eleman için kullanılmaz. Örneğin onsubmit olayı genellikle form ile
kullanılırken, oninput olayı kullanıcıdan veri alan text, textarea, select gibi form elemanlarıyla kullanılır. Öte yandan onfocus ve onblur olayları tüm
elemanlar için kullanılabilir.

Tablo 16: JavaScript form olayları

Olay Açıklama
onfocus Kontrol bir elemana verildiğinde tetiklenir.
onblur Elemandan kontrol kaldırıldığında (kaybettiği anda) tetiklenir.
onchange Elemanın değeri değiştiği anda tetiklenir.
oncontextmenu Bir elemana sağ tıklandığında tetiklenir. Sağ tıklandığında gösterilecek menü için kullanılır.
oninput Kullanıcı bir elemana veri girdiğinde tetiklenir.
oninvalid Bir eleman geçersiz olduğunda tetiklenir.
onreset Form elemanlarına girilen/değiştirilen/atanan değerleri ilk haline döndürmek için kullanılır.
onsearch Kullanıcı <input="search"> elemanına bir şey yazdığında tetiklenir.
onselect Bir eleman veya içeriği seçildiğinde tetiklenir
onsubmit Form göndermek için tetiklenir.
ontoggle Bir öğe göster/gizle yapıldığında tetiklenir. Öğe gösteriliyorsa gizlenir, gizliyse gösterilir.

Örneğin sayi1 idli form elemanından kontrol bir başka elemana geçtiğinde bir uyarı penceresiyle kullanıcıyı bilgilendirmek için onblur olayı kullanılır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 156 / 170
i
:
i
i
i
 8.6. Fare Olayları
Kullanıcının doküman, form veya bir form elemanı üzerinde fare ile etkileşime girdiğinde tetiklenen fare olayları Tablo 17’de verilmiştir (w3schools,
2024).

Tablo 17: JavaScript fare olayları

Olay Açıklama
onclick Eleman üzerine fareyle (sol) tıklandığında tetiklenir.
ondblclick Fare bir elemana çift tıkladığında (sol) tetiklenir.
onmousedown Bir eleman üzerinde fareye tıklandığında tetiklenir.
onmousemove Fare imleci bir elemanın üzerindeyken hareket ettiğinde tetiklenir.
onmouseout Fare imleci bir elemanın dışına çıktığında tetiklenir.
onmouseover Fare imleci bir elemanın üzerine geldiğinde tetiklenir.
onmouseup Bir elemanın üzerinde fare düğmesi bırakıldığında tetiklenir.
onwheel Fare tekerleği bir elemanın üzerinde yukarı veya aşağı yuvarlandığında tetiklenir.

Örneğin fare sayi1 isimli inputun üzerine geldiğinde o inputun renginin kırmızı olması için onmouseover olayı, fare elemanın üzerinden çıktığında
kahverengi olması için onmouseout olayı kullanılır. Bunu sağlayan JavaScript kodu aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 157 / 170
i
:
i
i
i
 8.7. Klavye Olayları
Kullanıcının doküman, form veya bir form elemanı üzerinde fare ile etkileşime girdiğinde tetiklenen fare olayları Tablo 18’de verilmiştir (w3schools,
2024).

Tablo 18: JavaScript klavye olayları

Olay Açıklama
onkeydown Klavyede bir tuşa basıldığında tetiklenir.
onkeypress Klavyede bir tuşa basılı olduğu sürece tetiklenir.
onkeyup Klavyede basılı bir tuştan parmak geri çekildiğinde tetiklenir.

Kullanıcı sayi1 form elemanı aktifken klavyeden bir tuşa bastığında onkeydown olayıyla sayi1 elemanının arka planının mavi, sayi2 elemanında
klavyeden bir tuşa bastıktan sonra tuşu geri bıraktığında sayi1 ve sayi2 alanlarına girilen değerlerin toplamını toplam idli form elemanına eşzamanlı
yazdıran onkeyup olaylarının örneklendiği JavaScript kodu aşağıda verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 158 / 170
i
:
i
i
i
 Sayfa görüntülendiğinde sayi1 ve sayi2 form elemanlarına değer girildiğinde aşağıdaki gibi elemanlar renklenecek ve toplam hesaplanacaktır.

8.8. Pano Olayları

Kullanıcı bir form elemanının içeriğini kopyaladığında, bir elemana içerik yapıştırdığında veya bir elemanın içeriğini kestiğinde tetiklenen pano
olayları Tablo 19’da verilmiştir (w3schools, 2024).

Tablo 19: JavaScript pano olayları

Olay Açıklama
oncopy Kullanıcı bir elementin içeriğini kopyaladığında tetiklenir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 159 / 170
i
:
i
i
i
 oncut Kullanıcı bir elementin içeriğini kestiğinde tetiklenir.
onpaste Kullanıcı bir elemente bir içerik yapıştırdığında tetiklenir.

Örneğin sayi1 isimli form elemanına bir içerik kopyalandığında, yapıştırıldığında ve kesildiğinde tetiklenen pano olaylarından sonra kullanıcıyı alert
uyarı penceresiyle bilgilendiren Web sayfası ve JavaScript kodu aşağıda verilmiştir.

sayi1 idli input elemanında kopyala, yapıştır ve kes olayları gerçekleştiğinde aşağıdaki uyarı ekranları görüntülenecektir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 160 / 170
i
:
i
i
i
 8.9. Sürükleme ve Bırakma Olayları
JavaScript dilinde bir elemanın sürükleme ve bırakma (drag-drop) olaylarını takip ve kontrol etmek için Tablo 20’de verilen olaylar kullanılır
(w3schools, 2024).

Tablo 20: JavaScript sürükleme ve bırakma olayları

Olay Açıklama
ondrag Bir eleman sürüklendiğinde tetiklenir.
ondragend Sürükleme işleminin sonunda tetiklenir.
ondragenter Bir eleman geçerli bir bırakma hedefine sürüklendiğinde tetiklenir.
ondragleave Bir eleman geçerli bir bırakma hedefinden ayrıldığında tetiklenir.
ondragover Bir eleman geçerli bir bırakma hedefi üzerine sürüklendiğinde tetiklenir.
ondragstart Sürükleme işleminin başlangıcında tetiklenir.
ondrop Sürüklenen eleman bırakıldığında tetiklenir.

Örneğin siyah renkli içi dolu bir dairenin turuncu renkli bir dikdörtgenin içine sürüklenip bırakılmasını sağlayan Web sayfası ve JavaScript kodu
aşağıda verilmiştir. Sayfada siyah renkli dairenin sürüklenebilir olmasını sağlamak için draggable özelliği true ayarlanmıştır. Sürükleme-bırakma olayı
sonrası daireyle birlikte dairenin içindeki yazı da turuncu renkli dikdörtgende yer alacaktır.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 161 / 170
i
:
i
i
i
[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33
Sayfa 162 / 170
i
:
i
i
i
 Aşağıda siyah renkli dairenin sürüklenmeden önce, sürüklenirken ve sürüklenip bırakıldıktan sonraki sayfa görüntüleri verilmiştir.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 163 / 170
i
:
i
i
i
 Bölüm Özeti

JavaScript dili, web sayfalarında kullanıcı etkileşimi doğrultusunda çeşitli iş ve işlevleri gerçekleştirmek için kullanılır. Olaylar doküman (web
sayfası) üzerindeki herhangi bir eleman ile yapılabilecek işlevleri ifade eder. Web sayfasının daha dinamik ve kullanıcı etkileşimli olabilmesi için
olaylar kullanılır.

Olay yönetimi üç bileşenden oluşur: olayın tetiklendiği eleman, olayın ismi ve olay tetiklendiğinde çalışacak kodlar. JavaScript dilinde [Link]
= function (){} benzeri klasik sözdizimle ve addEventListener olay dinleyicisi ile olay oluşturulabilir.

JavaScript dilinde sayfanın görüntülendiği tarayıcı penceresi (window nesnesiyle) ilgili olaylar, form ve form elemanlarıyla ilgili olaylar, fare ve
klavye etkileşimine dayalı olaylar, kullanıcı bir form elemanının içeriğini kopyaladığında, yapıştırdığında ve kestiğinde tetiklenen pano olayları, form
elemanlarını sürükleme ve bırakma ile ilgili tetiklenen, sayfa veya elemanın yerini konumlandırma ve kaydırma çubuğu ile ilgili olaylar tanımlıdır.

Kaynakça

Flanagan, D. (2020). JavaScript: The Definitive Guide: Master the World’s Most-Used Programming Language (7th edition.). Sebastopol, CA:
O’Reilly Media.

MDN. (2023a). Element: scrollBy() method - Web APIs | MDN. [Link] adresinden
erişildi.

MDN. (2023b). Element: scrollTo() method - Web APIs | MDN. [Link] adresinden
erişildi.

MDN. (2024a). Introduction to events—Learn web development | MDN. [Link]

US/docs/Learn/JavaScript/Building_blocks/Events adresinden erişildi.

MDN. (2024b). Window—Web APIs | MDN. [Link] adresinden erişildi.

Svekis, L. L., Putten, M. van ve Percival, C. B. R. (2021). JavaScript from Beginner to Professional: Learn JavaScript quickly by building fun,
interactive, and dynamic web apps, games, and pages. Erscheinungsort nicht ermittelbar: Packt Publishing.

w3schools. (2024). HTML Event Attributes. [Link] adresinden erişildi.

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 164 / 170
i
:
i
i
i
 Ünite Soruları

Soru-1 :

HTML dokümanında yer alan "sorustur" sınıflı butonu seçen ve bunun tıklama olayını işleyen JavaScript kodları aşağıdaki hangi seçenekte
verilmiştir?

(Çoktan Seçmeli)

Cevap-1 :

Soru-2 :

Aşağıdaki olaylardan hangisi bir dosyanın, kaynağın (resim, görüntü vb) yüklenmesi iptal edildiğinde tetiklenir?

(Çoktan Seçmeli)

(A) onabort

(B) onerror

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 165 / 170
i
:
i
i
i
 (C) onunload

(D) oncancel

onreset

Cevap-2 :

onabort

Soru-3 :

Sayfa veya bir elementin içeriği kaydırıldığında tetiklenen kaydırma olayı aşağıdakilerden hangisidir?

(Çoktan Seçmeli)

(A) scrollBy

(B) scrollTo

(C) scroll

(D) onwheel

scrollEnd

Cevap-3 :

scroll

Soru-4 :

onblur olayının açıklaması aşağıdaki şıkların hangisinde verilmiştir?

(Çoktan Seçmeli)

(A) Öğe sürüklendiğinde tetiklenir.

(B) Elemandan kontrol kaldırıldığında tetiklenir.

(C) Öğenin içeriği seçildiği tetiklenir.

(D) Kontrol bir elemana verildiğinde tetiklenir.

Elemanın değeri değiştiği anda tetiklenir.

Cevap-4 :

Elemandan kontrol kaldırıldığında tetiklenir.

Soru-5 :

Kullanıcı fareyi hedef isimli butonun üzerinden çektiğinde tetiklenen olayın kodu hangi seçenekte verilmiştir?

(Çoktan Seçmeli)

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 166 / 170
i
:
i
i
i
 Cevap-5 :

Soru-6 :

Aşağıdaki şıklardan hangisinde hedef isimli elementte kullanıcının bir tuşa basması ve bir içeriği yapıştırması olayı işlenmiştir?

(Çoktan Seçmeli)

Cevap-6 :

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 167 / 170
i
:
i
i
i
 Soru-7 :

Aşağıdaki olaylardan hangisi sürüklenen eleman bırakıldığında tetiklenir?

(Çoktan Seçmeli)

(A) ondrag

(B) ondragend

(C) ondragover

(D) ondrop

ondropend

Cevap-7 :

ondrop

Soru-8 :

Sayfayı mevcut konumundan 40 piksel sağa, 30 piksel aşağıya kaydıran kod satırı aşağıdaki seçeneklerin hangisinde verilmiştir?

(Çoktan Seçmeli)

(A) [Link](30, 40);

(B) [Link](40, 30);

(C) [Link](30, 40);

(D) [Link](40, 30);

[Link](30,40);

Cevap-8 :

[Link](40, 30);

Soru-9 :

Aşağıdakilerden hangisi tarayıcı penceresiyle ilgili Window olaylarından biri değildir?

(Çoktan Seçmeli)

(A) onreadystatechange

(B) onwheel

(C) ononline

(D) onresize

onstorage

Cevap-9 :

onwheel

Soru-10 :

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 168 / 170
i
:
i
i
i
 Aşağıda verilen sil elementinin tıklanma olayı, olay işleyiciyle hangi şıkta hatasız işlenmiştir?

(Çoktan Seçmeli)

Cevap-10 :

[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33

Sayfa 169 / 170
i
:
i
i
i
[Link] [Link]/ders- slemler /ders-k tap/4600520058006A0054004F0050004D006E00500055003D00 23.02.2026 13 33
Sayfa 170 / 170
i
:
i
i
i