JavaScript dilinin çeşitli tekniklerini ve özelliklerini gösteren kapsamlı bir uygulamalı JavaScript örnekleri içerir.
Örnek kodları Sublime Text 3 kod editörü kullanarak deneyebilirsiniz. Ya da gerçek zamanlı online HTML editörü kullanabilirsiniz.
JavaScript “Merhaba Dünya!” Uygulaması
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript "Merhaba Dünya!" Uygulaması</title>
</head>
<body>
<script>
let merhaba = "Merhaba Dünya!";
console.log(merhaba);
</script>
<p>Not: Klavyedeki F12 tuşuna basarak tarayıcı konsoluna (console) bakın.</p>
</body>
</html>JavaScript Kodunu Bir HTML Dosyasına Gömme
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Kodunu Bir HTML Dosyasına Gömme</title>
</head>
<body>
<script>
let merhaba = "Merhaba Dünya!";
document.write(merhaba);
</script>
</body>
</html>HTML Belgesinde Harici Bir JavaScript Dosyası Çağırma
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Belgesinde Harici Bir JavaScript Dosyası Çağırma</title>
</head>
<body>
<button type="button" id="Btn">Tıkla</button>
<script src="/js/main.js"></script>
</body>
</html>HTML Etiketine JavaScript Kodu Ekleme
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Etiketine JavaScript Kodu Ekleme</title>
</head>
<body>
<button onclick="alert('Merhaba Dünya!')">Tıkla</button>
</body>
</html>JavaScript’te Büyük / Küçük Harf Duyarlılığı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript'te Büyük / Küçük Harf Duyarlılığı</title>
</head>
<body>
<script>
let merhabaDunya = "Merhaba Dünya!";
console.log(merhabaDunya);
console.log(MerhabaDunya);
console.log(merhabadunya);
</script>
<p>Not: Klavyedeki F12 tuşuna basarak tarayıcı konsoluna (console) bakın, şöyle bir satır göreceksiniz: "Uncaught ReferenceError: merhabaDunya is not defined".</p>
</body>
</html>JavaScript Tekli Yorum Satırı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Tekli Yorum Satırı</title>
</head>
<body>
<script>
// Bu benim ilk JavaScript örneğim
document.write("Merhaba Dünya!");
</script>
</body>
</html>JavaScript Çoklu Yorum Satırı
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Çoklu Yorum Satırı</title>
</head>
<body>
<script>
/* Bu benim ilk
JavaScript örneğim */
document.write("Merhaba Dünya!");
</script>
</body>
</html>JavaScript’te Değişken Oluşturma
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript'te Değişken Oluşturma</title>
</head>
<body>
<script>
// Değişkenler Oluşturma
let isim = "Mecnun";
let yas = 21;
let evliMi = false;
// Değişken Değerlerini Yazdırma
document.write(isim + "<br>");
document.write(yas + "<br>");
document.write(evliMi);
</script>
</body>
</html>JavaScript’te Değişken Bildirme
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript'te Değişken Bildirme</title>
</head>
<body>
<script>
// Değişken Bildirimi
let kullaniciAdi;
// Değer Atama
kullaniciAdi = "Leyla Mecnun";
// Değişken Değerini Yazdırma
document.write(kullaniciAdi);
</script>
</body>
</html>Aynı Anda Birden Çok Değişkeni Bildirme
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Aynı Anda Birden Çok Değişkeni Bildirme</title>
</head>
<body>
<script>
// Birden Çok Değişken Bildirme
var isim = "Mecnun", yas = 21, evliMi = false;
// Değişken Değerlerini Yazdırma
document.write(isim + "<br>");
document.write(yas + "<br>");
document.write(evliMi);
</script>
</body>
</html>Tarayıcı Konsoluna Yazma
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tarayıcı Konsoluna Yazma</title>
</head>
<body>
<script>
// Basit bir metin mesajı yazdırma
console.log("Merhaba Dünya!");
// Değişken değer yazdırma
let x = 10;
let y = 20;
let topla = x + y;
console.log(topla); // Çıktı: 30
</script>
<p>Not: Klavyedeki F12 tuşuna basarak tarayıcı konsoluna (console) bakın.</p>
</body>
</html>Bir Uyarıyı İletişim Kutusuna Yazma
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Bir Uyarıyı İletişim Kutusuna Yazma</title>
</head>
<body>
<script>
// Basit bir kısa mesaj görüntüleme
alert("Merhaba Dünya!");
// Değişken değer görüntüleme
let x = 10;
let y = 20;
let topla = x + y;
alert(topla); // Çıktı: 30
</script>
</body>
</html>Tarayıcı Penceresine Yazma
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Tarayıcı Penceresine Yazma</title>
</head>
<body>
<script>
// Basit bir kısa mesaj yazdırma
document.write("Merhaba Dünya!");
// Değişken değer yazdırma
let x = 10;
let y = 20;
let topla = x + y;
document.write(topla); // Çıktı: 30
</script>
</body>
</html>document.write() Yöntemle İlgili Sorun
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>document.write() Yöntemle İlgili Sorun</title>
</head>
<body>
<h1>Bu bir başlık</h1>
<p>Bu bir paragraf metindir.</p>
<button type="button" onclick="document.write('Merhaba Dünya!')">Tıkla</button>
</body>
</html>HTML Öğesine Yazdırma
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>HTML Öğesine Yazdırma</title>
</head>
<body>
<p id="harika"></p>
<p id="sonuc"></p>
<script>
// Bir öğenin içine metin dizesi yazma
document.getElementById("harika").innerHTML = "Merhaba Dünya!";
// Bir öğenin içine değişken bir değer yazma
let x = 10;
let y = 20;
let topla = x + y;
document.getElementById("sonuc").innerHTML = topla;
</script>
</body>
</html>JavaScript’te Gerçek API ile Bağlantı Kurma ve Veri Çekme
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript'te Gerçek API ile Bağlantı Kurma ve Veri Çekme</title>
</head>
<body>
<script>
const yazilar = fetch("https://api.dailysmarty.com/posts");
// console.log(yazilar);
yazilar
.then(data => data.json())
.then(data => {
data.posts.forEach((item) => {
document.write("<a href='" + item.url_for_post + "'>" + item.title + "</a><br>");
});
})
.catch((err) => {
console.log(err);
})
</script>
</body>
</html>JavaScript’te Attribute Kullanarak Öznitelikleri Değiştirme
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript'te Attribute Kullanarak Öznitelikleri Değiştirme</title>
</head>
<body>
<a href="https://www.pexels.com" target="_blank">Pexel.com</a>
<hr>
<img src="https://s.pexels.com/photos/4207892/pexels-photo-4207892.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="50%">
<img src="https://s.pexels.com/photos/2868871/pexels-photo-2868871.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="50%">
<script>
// Bağlantı linkini değiştirme
let a = document.querySelector("a");
console.log(a);
a.setAttribute("href", "https://www.unsplash.com");
// Birinci görseli bulup yeni resimle değiştirme
let img1 = document.querySelectorAll("img")[0];
console.log(img1);
img1.setAttribute("src", "https://s.pexels.com/photos/4048182/pexels-photo-4048182.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
// İkinci görseli bulup yeni resimle değiştirme
let img2 = document.querySelectorAll("img")[1];
console.log(img2);
img2.setAttribute("src", "https://s.pexels.com/photos/4171211/pexels-photo-4171211.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
</script>
</body>
</html>JavaScript’te Click Event Kullanarak Kutuları Gizleme
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript'te Click Event Kullanarak Kutuları Gizleme</title>
<style>
.kutu{
width: 150px;
height: 150px;
margin: 10px;
float: left;
}
#mavi{
background-color: blue;
}
#kirmizi{
background-color: red;
}
#sari{
background-color: yellow;
}
</style>
</head>
<body>
<div id="mavi" class="kutu"></div>
<div id="kirmizi" class="kutu"></div>
<div id="sari" class="kutu"></div>
<script>
let kutular = document.querySelectorAll(".kutu");
kutular.forEach(function(kutu){
kutu.addEventListener("click", function(){
this.style.display = "none";
})
});
</script>
</body>
</html>