JavaScript, genellikle web tarayıcılarında kullanılan, hafif, nesne tabanlı bir programlama dilidir. JavaScript, web sayfalarını etkileşimli hale getirmek, kullanıcı etkileşimleri yönetmek ve dinamik içerik oluşturmak için yaygın olarak kullanılır. Ayrıca, Node.js gibi ortamlarda sunucu tarafında da kullanılabilir. İşte JavaScript'in temel özelliklerini gösteren bazı örnekler:
console.log("Merhaba, Dünya!");
// Değişken tanımlama ve matematiksel operatörler
let sayi1 = 10;
let sayi2 = 5;
let toplam = sayi1 + sayi2;
let fark = sayi1 - sayi2;
let carpim = sayi1 * sayi2;
let bolum = sayi1 / sayi2;
console.log("Toplam:", toplam);
console.log("Fark:", fark);
console.log("Çarpım:", carpim);
console.log("Bölüm:", bolum);
// Koşullu ifade
let sayi = 42;
if (sayi > 50) {
console.log("Sayı 50'den büyük.");
} else if (sayi === 50) {
console.log("Sayı 50'ye eşit.");
} else {
console.log("Sayı 50'den küçük.");
}
// For döngüsü
for (let i = 0; i < 5; i++) {
console.log(i);
}
// While döngüsü
let sayac = 0;
while (sayac < 5) {
console.log(sayac);
sayac++;
}
// Basit bir fonksiyon tanımlama
function topla(x, y) {
return x + y;
}
// Fonksiyonu kullanma
let sonuc = topla(3, 7);
console.log("Toplam:", sonuc);
// Dizi tanımlama ve kullanma
let renkler = ['kırmızı', 'yeşil', 'mavi'];
// Dizi üzerinde döngü
for (let renk of renkler) {
console.log(renk);
}
// Nesne tanımlama ve kullanma
let ogrenci = { ad: 'Ali', soyad: 'Yılmaz', yas: 20 };
// Nesne içindeki değere erişim
let ad = ogrenci.ad;
console.log("Öğrenci Adı:", ad);
// Promise kullanımı
let sayiAlma = new Promise((resolve, reject) => {
let sayi = Math.random();
if (sayi < 0.5) {
resolve("Başarılı: " + sayi);
} else {
reject("Başarısız: " + sayi);
}
});
// Promise kullanımı
sayiAlma.then((sonuc) => {
console.log(sonuc);
}).catch((hata) => {
console.error(hata);
});
Bu örnekler, JavaScript'in temel özelliklerini göstermekte ve dilin geniş bir yelpazede kullanım alanlarına sahip olduğunu göstermektedir. JavaScript ile daha fazla deneme yaparak ve projeler geliştirerek dilin gücünü daha iyi anlayabilirsiniz.
HTML:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipülasyonu</title>
</head>
<body>
<h1 id="baslik">Merhaba, Dünya!</h1>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
javascriptCopy code
// DOM manipülasyonu
let baslikElementi = document.getElementById("baslik");
baslikElementi.innerHTML = "JavaScript ile Değiştirildi!";
javascriptCopy code
// Fetch API kullanımı
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));
HTML:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Kullanımı</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1 id="baslik">Merhaba, Dünya!</h1>
</body>
</html>
JavaScript (script.js):
javascriptCopy code
// jQuery kullanımı
$(document).ready(function() {
$('#baslik').html('jQuery ile Değiştirildi!');
});
Bu örnekler, JavaScript'in çeşitli kullanım senaryolarını ve farklı alanlarda nasıl kullanılabileceğini göstermektedir. JavaScript ile ilgili daha fazla bilgi edinmek ve uygulama yapmak için çeşitli kaynakları inceleyebilirsiniz.
1. Merhaba Dünya!
javascriptCopy codeconsole.log("Merhaba, Dünya!");
2. Değişkenler ve Temel Operatörler
javascriptCopy code// Değişken tanımlama ve matematiksel operatörler
let sayi1 = 10;
let sayi2 = 5;
let toplam = sayi1 + sayi2;
let fark = sayi1 - sayi2;
let carpim = sayi1 * sayi2;
let bolum = sayi1 / sayi2;
console.log("Toplam:", toplam);
console.log("Fark:", fark);
console.log("Çarpım:", carpim);
console.log("Bölüm:", bolum);
3. Koşullu İfadeler
javascriptCopy code// Koşullu ifade
let sayi = 42;
if (sayi > 50) {
console.log("Sayı 50'den büyük.");
} else if (sayi === 50) {
console.log("Sayı 50'ye eşit.");
} else {
console.log("Sayı 50'den küçük.");
}
4. Döngüler
javascriptCopy code// For döngüsü
for (let i = 0; i < 5; i++) {
console.log(i);
}
// While döngüsü
let sayac = 0;
while (sayac < 5) {
console.log(sayac);
sayac++;
}
5. Fonksiyonlar
javascriptCopy code// Basit bir fonksiyon tanımlama
function topla(x, y) {
return x + y;
}
// Fonksiyonu kullanma
let sonuc = topla(3, 7);
console.log("Toplam:", sonuc);
6. Diziler (Arrays) ve Nesneler (Objects)
javascriptCopy code// Dizi tanımlama ve kullanma
let renkler = ['kırmızı', 'yeşil', 'mavi'];
// Dizi üzerinde döngü
for (let renk of renkler) {
console.log(renk);
}
// Nesne tanımlama ve kullanma
let ogrenci = { ad: 'Ali', soyad: 'Yılmaz', yas: 20 };
// Nesne içindeki değere erişim
let ad = ogrenci.ad;
console.log("Öğrenci Adı:", ad);
7. Asenkron Programlama (Promises ve Async/Await)
javascriptCopy code// Promise kullanımı
let sayiAlma = new Promise((resolve, reject) => {
let sayi = Math.random();
if (sayi < 0.5) {
resolve("Başarılı: " + sayi);
} else {
reject("Başarısız: " + sayi);
}
});
// Promise kullanımı
sayiAlma.then((sonuc) => {
console.log(sonuc);
}).catch((hata) => {
console.error(hata);
});
Bu örnekler, JavaScript'in temel özelliklerini göstermekte ve dilin geniş bir yelpazede kullanım alanlarına sahip olduğunu göstermektedir. JavaScript ile daha fazla deneme yaparak ve projeler geliştirerek dilin gücünü daha iyi anlayabilirsiniz.
8. DOM Manipülasyonu (Document Object Model)
JavaScript, HTML belgesinin içeriğini dinamik olarak değiştirmek ve manipüle etmek için kullanılır. Aşağıda, basit bir HTML sayfasındaki bir öğenin içeriğini değiştiren bir JavaScript örneği:HTML:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipülasyonu</title>
</head>
<body>
<h1 id="baslik">Merhaba, Dünya!</h1>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
javascriptCopy code
// DOM manipülasyonu
let baslikElementi = document.getElementById("baslik");
baslikElementi.innerHTML = "JavaScript ile Değiştirildi!";
9. Ajax ve Fetch API
JavaScript, web sayfalarının arka planda sunucularla iletişim kurmasını sağlayan Ajax (Asynchronous JavaScript and XML) ve Fetch API'yi destekler. Aşağıda, Fetch API kullanarak basit bir veri çekme örneği:javascriptCopy code
// Fetch API kullanımı
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));
10. jQuery Kullanımı
jQuery, JavaScript'e alternatif olarak kullanılan bir kütüphanedir ve özellikle DOM manipülasyonu ve olay yönetimi gibi işlemleri kolaylaştırır.HTML:
htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Kullanımı</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1 id="baslik">Merhaba, Dünya!</h1>
</body>
</html>
JavaScript (script.js):
javascriptCopy code
// jQuery kullanımı
$(document).ready(function() {
$('#baslik').html('jQuery ile Değiştirildi!');
});
Bu örnekler, JavaScript'in çeşitli kullanım senaryolarını ve farklı alanlarda nasıl kullanılabileceğini göstermektedir. JavaScript ile ilgili daha fazla bilgi edinmek ve uygulama yapmak için çeşitli kaynakları inceleyebilirsiniz.
