JavaScript Nedir?
JavaScript, web sayfalarına etkileşim ve dinamizm kazandıran bir programlama dilidir. HTML
ile sayfanın temel yapısı oluşturulurken, CSS ile sayfa görselliği ve stil düzenlemeleri yapılır.
JavaScript ise sayfanın kullanıcı etkileşimlerine tepki verebilen ve dinamik içerikler
oluşturabilen bir hale gelmesini sağlar. JavaScript'in ana özelliklerinden bazıları şunlardır:
• Tarayıcı Destekli: JavaScript, tüm modern tarayıcılar tarafından desteklenir ve bu
sayede herhangi bir ek yazılıma gerek kalmadan çalışır.
• İstemci Taraflı: Genellikle kullanıcıların tarayıcılarında (istemci tarafında) çalışır, bu
da hızlı ve anında tepki vermesini sağlar.
• Nesne Tabanlı: JavaScript, nesne tabanlı bir dildir; bu, verileri ve işlevleri bir arada
gruplandırarak daha organize ve yeniden kullanılabilir kod yazmayı sağlar.
JavaScript'in Kullanım Alanları
JavaScript, geniş bir kullanım alanına sahiptir ve yalnızca web sayfalarında değil, diğer dijital
projelerde de önemli bir rol oynar. İşte başlıca kullanım alanları:
Web Sayfalarında Etkileşim:
o Dinamik İçerik: Kullanıcıların sayfa içeriğiyle etkileşime geçmesini sağlar;
örneğin, bir butona basıldığında bir bilgi kutusu açılması veya form doğrulama
yapılması gibi.
o Animasyonlar: CSS ile birlikte kullanıldığında sayfa öğelerine animasyonlar
ve geçiş efektleri ekleyebilir.
o Olay Yönetimi: Tıklama, kaydırma, klavye kullanımı gibi olaylara yanıt
verebilir.
Tek Sayfa Uygulamaları (Single Page Applications - SPA):
o React, Angular ve Vue gibi JavaScript kütüphaneleri ve framework'leri, tek
sayfa uygulamalarının geliştirilmesinde önemli rol oynar. Bu uygulamalar, tüm
içeriği tek bir sayfada barındırır ve yalnızca gerekli verileri yükleyerek
kullanıcıya daha hızlı bir deneyim sunar.
Sunucu Taraflı Programlama:
o [Link] gibi platformlar sayesinde JavaScript artık yalnızca istemci tarafında
değil, sunucu tarafında da kullanılabilmektedir. Bu, JavaScript ile tüm
uygulamanın tamamını oluşturabilmeye imkan tanır ve hem istemci hem de
sunucu tarafında aynı dili kullanma avantajı sağlar.
Mobil Uygulama Geliştirme:
o React Native ve Ionic gibi araçlarla, JavaScript kullanarak mobil uygulamalar
geliştirebilirsiniz. Bu, web geliştiricilerine mobil uygulama geliştirme
konusunda daha kolay bir geçiş sağlar.
Oyun Geliştirme:
o JavaScript, basit 2D oyunlar veya bazı 3D oyunlar geliştirmek için de kullanılır.
Özellikle HTML5 Canvas özelliği ve [Link] gibi oyun geliştirme
kütüphaneleri, JavaScript'in oyun dünyasında kullanılmasına olanak tanır.
Makine Öğrenimi ve Veri Analizi:
o JavaScript ile veri analizi, makine öğrenimi gibi daha gelişmiş işlemler de
yapılabilir. [Link] ve [Link] gibi kütüphaneler sayesinde, tarayıcı
tabanlı makine öğrenimi modelleri oluşturmak ve çalıştırmak mümkündür.
JavaScript'in Temel Yapısı
Değişkenler (Variables)
• Tanım: Değişkenler, veri saklamak için kullanılır ve JavaScript’te var, let, ve const
anahtar kelimeleriyle tanımlanır.
• Örnekler:
var name = "John"; // Eski, global kullanım
let age = 30; // Modern, yerel kullanım
const pi = 3.14; // Sabit, değiştirilemez değer
• Farklar:
o var: Daha eski bir değişken tanımlama şekli, global veya fonksiyon kapsamına
sahiptir.
o let: Blok içinde geçerlidir, kodun daha güvenli ve hatasız çalışmasını sağlar.
o const: Değeri değiştirilemeyen değişkenler için kullanılır.
3. Veri Türleri (Data Types)
• Temel Veri Türleri:
o String: Metinsel veri tipi ("Hello, World!").
o Number: Sayısal veri tipi (5, 3.14).
o Boolean: Doğru/Yanlış değerleri (true veya false).
o Array: Birden fazla veriyi saklamak için kullanılan diziler ([1, 2, 3]).
o Object: Anahtar-değer çiftleri şeklinde tanımlanan veri türü ({ name: "John",
age: 30 }).
• Örnekler:
let message = "Hello!";
let score = 95;
let isStudent = true;
let colors = ["red", "green", "blue"];
let person = { name: "Alice", age: 25 };
4. Operatörler (Operators)
• Aritmetik Operatörler: +, -, *, /, %.
o Örnek: let sum = 10 + 5;
• Atama Operatörleri: =, +=, -=, *=, /=.
• Karşılaştırma Operatörleri: ==, ===, !=, <, >, <=, >=.
o Örnek: if (age > 18) { ... }
• Mantıksal Operatörler: && (ve), || (veya), ! (değil).
5. Koşul Yapıları (Conditionals)
• if, else if, else: Belirli koşullara göre farklı kod bloklarını çalıştırır.
• switch: Çok sayıda durumu yönetmek için kullanılır.
• Örnek:
let score = 75;
if (score >= 90) {
[Link]("A");
} else if (score >= 80) {
[Link]("B");
} else {
[Link]("C");
}
6. Döngüler (Loops)
• for Döngüsü: Belirli bir sayıda döner.
o Örnek: for (let i = 0; i < 5; i++) { [Link](i); }
• while Döngüsü: Belirli bir koşul doğru olduğu sürece döner.
• do...while Döngüsü: Koşul sona erene kadar döner, en az bir kez çalışır.
• for...of ve for...in: Diziler ve nesneler üzerinde iterasyon yapmak için kullanılır.
Fonksiyonlar (Functions)
• Tanım: Kod bloklarını daha sonra tekrar kullanmak üzere saklamak için kullanılır.
• Fonksiyon Tanımlama:
o Traditional Function:
function greet() {
[Link]("Hello!");
greet();
• Parametreler ve Geri Dönüş:
o Parametreli bir örnek: function add(a, b) { return a + b; }
8. Nesneler ve Diziler (Objects and Arrays)
• Diziler: Birden fazla veri saklamak için kullanılır, indeksle erişilir.
let fruits = ["apple", "banana", "cherry"];
[Link](fruits[1]); // "banana"
• Nesneler: Anahtar-değer çiftleri olarak veri saklar.
let student = { name: "Alex", grade: 90 };
[Link]([Link]); // "Alex"
9. DOM Manipülasyonu (DOM Manipulation)
• Tanım: JavaScript ile HTML öğelerine erişip onları değiştirme süreci.
• Temel İşlemler:
o [Link]("id"): Bir öğeyi ID ile seçer.
o [Link](".class"): CSS seçicilere göre öğeleri seçer.
o Örnek:
[Link]("myButton").onclick = function() {
alert("Button clicked!");
};
10. Olaylar (Events)
• Tanım: Kullanıcı etkileşimlerine yanıt verir. (örneğin tıklama, fareyle üzerine gelme)
• Örnek:
let button = [Link]("button");
[Link]("click", function() {
alert("Button was clicked!");
});
HTML SAYFALARINDAKİ ELEMANLARA ERİŞİM YÖNTEMLERİ
JavaScript ile HTML sayfasındaki nesnelere erişmek için birçok yöntem vardır. En yaygın
yöntemler getElementById, getElementsByClassName, getElementsByTagName,
querySelector, ve querySelectorAll gibi DOM seçicileridir. Her birini açıklayıcı örneklerle ele
alalım.
1. getElementById
Bu yöntemle bir HTML elemanına id değeri üzerinden erişebilirsiniz. Sadece ilk eşleşen
öğeyi döndürür.
HTML
<h2 id="baslik">Merhaba Dünya!</h2>
<button id="btn">Butona Tıkla</button>
JavaScript
const baslik = [Link]("baslik");
const button = [Link]("btn");
[Link]("click", function() {
[Link] = "Butona Tıklandı!";
});
2. getElementsByClassName
Bu yöntemle aynı class adına sahip birden fazla öğeyi seçebilirsiniz. Bu yöntem bir
HTMLCollection (dizi benzeri yapı) döndürür.
HTML
<p class="paragraf">Birinci paragraf</p>
<p class="paragraf">İkinci paragraf</p>
JavaScript
const paragraflar = [Link]("paragraf");
for (let i = 0; i < [Link]; i++) {
paragraflar[i].[Link] = "blue";
}
Bu örnekte, .paragraf sınıfına sahip tüm p öğeleri mavi renge boyanır.
3. getElementsByTagName
Bu yöntem, belirli bir HTML etiketi ile tüm öğeleri seçer. Bu da bir HTMLCollection
döndürür.
HTML
<div>Birinci div</div>
<div>İkinci div</div>
JavaScript
const divler = [Link]("div");
for (let i = 0; i < [Link]; i++) {
divler[i].[Link] = "1px solid black";
Bu örnekte, sayfadaki tüm div öğelerine siyah bir çerçeve eklenir.
4. querySelector
querySelector ile CSS seçici kurallarına göre ilk eşleşen öğeyi seçebilirsiniz. id, class, veya
herhangi bir CSS seçici kullanılabilir.
HTML
<h2 class="baslik">Merhaba</h2>
JavaScript
const baslik = [Link](".baslik");
[Link] = "24px";
Bu örnekte, .baslik sınıfına sahip ilk h2 öğesinin yazı boyutu 24 piksel olarak ayarlanır.
5. querySelectorAll
querySelectorAll ile CSS seçici kurallarına göre tüm eşleşen öğeleri NodeList olarak
seçebilirsiniz.
HTML
<ul>
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ul>
JavaScript
const listeOgeleri = [Link]("ul li");
[Link](function(item) {
[Link] = "green";
});
Bu örnekte, tüm li öğeleri yeşil renkte gösterilecektir.
Uygulama Örneği: Basit Bir Sayfa Etkileşimi
• Basit bir buton ve kutucuk ekleyerek, butona tıklanıldığında kutucuğun rengini
değiştiren bir etkileşim yaptırabilirsiniz.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basit JavaScript Örneği</title>
</head>
<body>
<button id="changeColor">Rengi Değiştir</button>
<div id="box" style="width:100px; height:100px; background-color:blue;"></div>
<script>
[Link]("changeColor").onclick = function() {
let box = [Link]("box");
[Link] = [Link] === "blue" ? "red" : "blue";
};
</script>
</body>
</html>
JAVA SCRIPT, HTML ve CSS KODLARINI ÇALIŞTIRMAK İÇİN ÇEŞİTLİ
UYGULAMALAR
JavaScript kodlarını kolayca deneyip çalıştırmak için kullanabileceğiniz birçok çevrimiçi
platform vardır. Bu platformlardan bazıları aşağıda liste şeklinde verilmiştir.
1. JSFiddle
o HTML, CSS ve JavaScript kodlarını aynı anda yazarak sonuçları anında
görebilirsiniz.
o Kendi oluşturduğunuz kodları kaydedip paylaşabilirsiniz.
2. CodePen
o HTML, CSS ve JavaScript kodlarınızı yazıp hızlıca test edebileceğiniz
kullanıcı dostu bir platform.
o Topluluk desteği ile ilham verici projeleri keşfedebilir ve kendi çalışmalarınızı
paylaşabilirsiniz.
3. JSBin
o Basit ve hızlı bir arayüze sahip, JavaScript kodlarını anında çalıştırmak için
ideal.
o HTML, CSS ve JavaScript kodlarıyla çalışmak için kolay bir seçenek sunar.
4. PlayCode
o Kodlarınızın sonuçlarını gerçek zamanlı olarak görebileceğiniz bir ortam
sağlar.
o Kod tamamlama ve hata denetleme özellikleri sayesinde JavaScript kodlarını
öğrenenler için oldukça faydalıdır.
5. Replit
o Sadece JavaScript değil, diğer birçok programlama diliyle de çalışabileceğiniz
kapsamlı bir platform.
o Kodları saklama, iş birliği yapma ve projeleri paylaşma özellikleri sunar.
6. StackBlitz
o Özellikle JavaScript framework’leri (React, Angular, Vue) ile çalışmak için
harika bir platformdur.
o Tarayıcı üzerinden bir IDE gibi çalışır, bu yüzden daha kapsamlı projeler için
de uygundur.
Bu platformlardan herhangi birini kullanarak JavaScript kodlarınızı deneyebilir ve çıktılarını
anında görebilirsiniz. Başlangıç için JSFiddle ve CodePen oldukça kullanıcı dostu
uygulamalardır, ancak daha geniş projeler için Replit ve StackBlitz’in oldukça işlevsel olduğu
söylenebilir.