1. JavaScript Nedir?
Web sitelerini interaktif hale getiren bir programlama dilidir. HTML ve CSS ile birlikte çalışarak tarayıcı üzerinde dinamik içerikler oluşturulmasını sağlar. Modern web geliştirme dünyasında vazgeçilmezdir. Tarayıcı içinde çalışır ve kullanıcı etkileşimleri (tıklama, yazı girişi gibi) üzerinden sayfa ile iletişimi sağlar.
2. JavaScript Nasıl Çalışır?
JavaScript kodu HTML içine <script>
etiketleri ile yerleştirilir veya ayrı bir .js
dosyasında bulunabilir. Tarayıcılar JavaScript’i okur ve çalıştırır. Örneğin:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Başlangıç</title>
</head>
<body>
<h1>JavaScript ile Merhaba Dünya</h1>
<script>
console.log("Merhaba Dünya!");
</script>
</body>
</html>
Bu kod, tarayıcı konsolunda “Merhaba Dünya!” ifadesini gösterir.
3. Değişkenler
Üç tür değişken tanımlayıcı bulunur: var
, let
ve const
. Bu değişkenler değer saklamak için kullanılır. Örneğin:
var isim = "Ali";
let yaş = 25;
const ülke = "Türkiye";
console.log(isim, yaş, ülke);
var
: ES5 öncesi popüler olan genel tanımlayıcıdır.let
: Blok bazında geçerlidir ve ES6 ile gelen bir tanımlayıcıdır.const
: Sabit bir değeri tanımlamak için kullanılır ve sonradan değiştirilemez.
4. Değişkenler ve Veri Tipleri
Değişken Tanımlama
JavaScript’te üç ana değişken tanımlama yöntemi vardır: var
, let
, const
.
var
: Blok kapsamına sahip değildir vehoisting
ile yukarı taşınır.let
: Blok kapsamına sahiptir. Yalnızca tanımlandığı blokta erişilebilir.const
: Değeri değiştirilemez; tanımlandığı blokta sabit olarak kalır.
var isim = "Ali"; // var kullanarak değişken tanımlama
let yaş = 25; // let kullanarak değişken tanımlama
const ülke = "Türkiye"; // const kullanarak sabit tanımlama
Veri Tipleri
primitive (temel) ve non-primitive (karmaşık) veri tiplerini içerir.
- Primitive Tipler:
string
,number
,boolean
,null
,undefined
,symbol
- Non-Primitive Tipler:
object
,array
,function
let isim = "Ahmet"; // string
let yaş = 30; // number
let aktif = true; // boolean
let sehir = null; // null
let tanimsiz; // undefined
5. Operatörler
Operatörler, değişkenler üzerinde işlem yapmak için kullanılır:
- Aritmetik Operatörler:
+
,-
,*
,/
,%
- Atama Operatörleri:
=
,+=
,-=
, vb. - Karşılaştırma Operatörleri:
==
,!=
,===
,!==
,<
,>
, vb. - Mantıksal Operatörler:
&&
,||
,!
Örnek:
let x = 10;
let y = 5;
console.log(x + y); // 15
console.log(x === y); // false
6. Koşullu İfadeler
if
, else if
, else
ve switch
yapıları ile koşullu işlemleri destekler.
let havaDurumu = "güneşli";
if (havaDurumu === "yağmurlu") {
console.log("Şemsiye almayı unutma!");
} else if (havaDurumu === "güneşli") {
console.log("Güneş gözlüğü alabilirsin.");
} else {
console.log("Hava durumu normal.");
}
7. Döngüler
Döngüler, tekrarlı işlemler yapmak için kullanılır:
for
döngüsüwhile
döngüsüdo...while
döngüsü
for (let i = 0; i < 5; i++) {
console.log("Sayı: " + i);
}
8. Fonksiyonlar
Fonksiyonlar, bir işlemi tekrar kullanmak için tanımlanan kod bloklarıdır. JavaScript’te iki tür fonksiyon tanımlaması vardır:
- Standart Fonksiyon:
function topla(a, b) {
return a + b;
}
console.log(topla(3, 4)); // 7
Arrow Fonksiyonu (=>):
const carp = (a, b) => a * b;
console.log(carp(2, 3)); // 6
9. Diziler
JavaScript dizileri, birden fazla veriyi aynı anda saklamak için idealdir. push
, pop
, shift
, unshift
gibi dizi metodları ile diziye yeni eleman ekleyebilir veya çıkarabilirsiniz.
let meyveler = ["Elma", "Armut", "Muz"];
meyveler.push("Kivi"); // Diziye ekleme yapar
console.log(meyveler[2]); // "Muz"
10. Nesneler
JavaScript’te nesneler, özellikler ve yöntemler barındırır:
let araba = {
marka: "Toyota",
model: "Corolla",
yıl: 2021,
detay: function() {
return this.marka + " " + this.model;
}
};
console.log(araba.detay()); // "Toyota Corolla"
11. JavaScript ve HTML Entegrasyonu
HTML sayfalarına farklı yollarla entegre edilebilir. Aşağıda bu yöntemleri açıklıyoruz.
1.1 Dahili JavaScript (Inline JavaScript)
JHTML içinde <script>
etiketleri arasında yazılabilir. Bu yöntem, küçük kod parçaları için uygun olabilir ancak genellikle tavsiye edilmez.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Entegrasyonu</title>
</head>
<body>
<h1>Merhaba Dünya</h1>
<script>
console.log("JavaScript buraya yazıldı!");
</script>
</body>
</html>
1.2 Harici JavaScript Dosyası Kullanımı
Harici bir .js
dosyası oluşturmak, JavaScript kodlarını HTML’den ayırır ve kodu daha düzenli hale getirir. Bu yöntem büyük projeler için idealdir.
- HTML Dosyası:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Dosyası Ekleme</title>
<script src="script.js"></script>
</head>
<body>
<h1>Harici JavaScript Kullanımı</h1>
</body>
</html>
JavaScript Dosyası (script.js
):
console.log("Harici dosyadan JavaScript çalıştı!");
Bu yapı, kodun daha iyi yönetilmesine olanak tanır.
2. JavaScript Değişkenleri ve Veri Tipleri
HTML entegrasyonunda sıkça değişkenler ve veri tipleri kullanırız. Değişkenler, veriyi geçici olarak saklar ve bu veriyi dinamik olarak güncelleyebiliriz.
2.1 Değişken Tanımlama
JavaScript’te var
, let
ve const
ile değişkenler tanımlanır.
let
: Blok kapsamına sahip olup güncellenebilir.const
: Sabit bir değeri saklar, tekrar atama yapılamaz.
let isim = "Ali";
const dogumYili = 1990;
console.log(isim, dogumYili);
2.2 Veri Tipleri
JavaScript’te yaygın veri tipleri:
- string:
"Merhaba"
- number:
42
,3.14
- boolean:
true
veyafalse
- array:
[1, 2, 3, 4]
- object:
{ isim: "Ali", yaş: 25 }
let isim = "JavaScript";
let yaş = 26;
let diller = ["HTML", "CSS", "JavaScript"];
console.log(typeof isim, typeof yaş, typeof diller);
3. HTML Etiketlerine Erişim: DOM Manipülasyonu
Document Object Model (DOM), HTML belgesinin erişilebilir hale gelmesini sağlar. JavaScript ile HTML öğelerine erişebilir ve dinamik olarak güncelleyebiliriz.
3.1 getElementById
Kullanımı
HTML sayfasındaki bir etikete id
atayarak bu etikete JavaScript ile erişebiliriz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>DOM Manipülasyonu</title>
</head>
<body>
<h1 id="başlık">Orijinal Başlık</h1>
<button onclick="başlıkDeğiştir()">Başlığı Değiştir</button>
<script>
function başlıkDeğiştir() {
document.getElementById("başlık").innerHTML = "Yeni Başlık";
}
</script>
</body>
</html>
3.2 Diğer DOM Seçiciler
JavaScript ile DOM’da daha fazla seçici vardır:
getElementsByClassName
: Sınıf adına göre seçim yapar.querySelector
: CSS seçicilerine göre seçim yapar.querySelectorAll
: Tüm öğeleri seçer ve bir NodeList döner.
4. JavaScript ile Olay İşleme
Kullanıcı etkileşimleri, web sayfasında dinamik değişiklikler yapmak için önemlidir. Olay yönetimi için onclick
, onmouseover
, onchange
gibi olayları kullanır.
4.1 onclick
Olayı ile Buton İşlevi
Bir butona tıklandığında bir işlemi çalıştırmak için onclick
olayını kullanabiliriz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Olay İşleme</title>
</head>
<body>
<button onclick="merhaba()">Tıkla</button>
<script>
function merhaba() {
alert("Merhaba, JavaScript!");
}
</script>
</body>
</html>
4.2 Fare ve Klavye Olayları
Fare ve klavye olaylarını da destekler. Bu olaylar kullanıcı deneyimini artırmak için kullanılır.
onmouseover
: Fare üzerine geldiğinde tetiklenir.onkeydown
: Klavyede bir tuşa basıldığında çalışır.
5. Form İşlemleri ve Doğrulama
HTML formlarıyla veri toplamak yaygındır. Form verilerini işlemek ve doğrulamak için kullanılabilir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Form Doğrulama</title>
</head>
<body>
<form onsubmit="return formuKontrolEt()">
<label for="isim">İsim:</label>
<input type="text" id="isim" name="isim">
<button type="submit">Gönder</button>
</form>
<script>
function formuKontrolEt() {
let isim = document.getElementById("isim").value;
if (isim === "") {
alert("İsim alanı boş bırakılamaz.");
return false;
}
return true;
}
</script>
</body>
</html>
Bu örnekte, formuKontrolEt
fonksiyonu, onsubmit
olayını kullanarak formun geçerli olup olmadığını kontrol eder.
6. JavaScript ve HTML5 API’leri
HTML5, JavaScript ile daha fazla özellik sunan API’ler içerir. Örneğin:
- Canvas API: Grafik ve şekil çizme işlemleri.
- Geolocation API: Kullanıcı konum bilgisi.
- Web Storage API: Tarayıcıda veri depolama (localStorage, sessionStorage).
Canvas API Örneği
<canvas id="çizim" width="400" height="200"></canvas>
<script>
let canvas = document.getElementById("çizim");
let ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);
</script>
7. CSS ile JavaScript Etkileşimi
CSS ile doğrudan etkileşim kurarak bir sayfanın stilini dinamik olarak değiştirebilir. Bu, kullanıcı etkileşimine göre görünümü değiştirme veya animasyonlar ekleme gibi olanaklar sağlar.
7.1 style
Özelliği Kullanımı
JavaScript ile bir HTML öğesinin style
özelliğini değiştirerek CSS özelliklerini güncelleyebilirsiniz. Örneğin, bir düğmeye tıklandığında yazının rengini değiştirebiliriz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>CSS ve JavaScript Etkileşimi</title>
</head>
<body>
<h1 id="başlık">CSS ve JavaScript Etkileşimi</h1>
<button onclick="stilDegistir()">Rengi Değiştir</button>
<script>
function stilDegistir() {
let başlık = document.getElementById("başlık");
başlık.style.color = "blue"; // Rengi mavi yapar
başlık.style.fontSize = "24px"; // Yazı boyutunu değiştirir
}
</script>
</body>
</html>
7.2 CSS Sınıfları Ekleme ve Kaldırma
CSS sınıfları ekleyip çıkararak bir öğenin görünümünü değiştirmek daha etkili ve yönetilebilir bir yöntemdir. JavaScript’in classList
özelliği ile HTML öğelerine sınıf ekleyip kaldırabilirsiniz.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>CSS Sınıfı Eklemek</title>
<style>
.vurgula {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p id="metin">JavaScript ile CSS sınıfı ekleme örneği</p>
<button onclick="sınıfEkle()">Vurgula</button>
<script>
function sınıfEkle() {
let metin = document.getElementById("metin");
metin.classList.toggle("vurgula");
}
</script>
</body>
</html>
Bu örnekte, butona tıklandığında vurgula
sınıfı eklenir veya kaldırılır.
7.3 Dinamik Stiller
JavaScript ile CSS stillerini dinamik olarak değiştirebiliriz. Örneğin, bir öğenin görünümünü ve konumunu değiştirmek için stil özelliklerini kullanabiliriz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Dinamik CSS Değişikliği</title>
<style>
#kutu {
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
transition: all 0.5s; /* Geçiş efektleri */
}
</style>
</head>
<body>
<div id="kutu"></div>
<button onclick="hareketEttir()">Hareket Ettir</button>
<script>
function hareketEttir() {
let kutu = document.getElementById("kutu");
kutu.style.transform = "translateX(200px)";
kutu.style.backgroundColor = "blue"; // Renk değişimi
}
</script>
</body>
</html>
Bu örnekte, kutunun pozisyonu ve arka plan rengi değişir. transition
özelliği ile geçiş efekti eklenmiştir, bu da animasyonlu bir görünüm sağlar.
7.4 CSS Sınıfı Değiştirme
JavaScript kullanarak bir öğeye CSS sınıfları ekleyip çıkararak stilini değiştirebiliriz. Bu, özellikle öğenin görünümünü duruma göre değiştirmek için yararlıdır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>CSS Sınıfı Değiştirme</title>
<style>
.gizle {
display: none; /* Gizli hale getirme */
}
</style>
</head>
<body>
<div id="mesaj">Bu mesaj gizli olacak!</div>
<button onclick="gizle()">Mesajı Gizle</button>
<button onclick="goster()">Mesajı Göster</button>
<script>
function gizle() {
document.getElementById("mesaj").classList.add("gizle");
}
function goster() {
document.getElementById("mesaj").classList.remove("gizle");
}
</script>
</body>
</html>
Bu örnekte, kullanıcı butonlara tıkladığında mesajın görünürlüğü değişir.
8. Asenkron JavaScript ve AJAX
Asenkron JavaScript, kullanıcı etkileşimini kesmeden arka planda işlemler gerçekleştirme olanağı tanır. Bu sayede bir sayfa yenilenmeden sunucudan veri alınabilir veya veritabanına veri gönderilebilir. AJAX (Asynchronous JavaScript and XML) teknolojisi ile bu işlemler yapılabilir.
8.1 fetch
API Kullanımı
fetch
API, sunucuyla iletişim kurmak için modern ve basit bir yöntemdir. Örneğin, bir JSON dosyasından veri almak için aşağıdaki gibi kullanılabilir:
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Bir hata oluştu:', error));
Bu kod, JSON verisini almak için fetch
API kullanır ve ardından bu veriyi konsola yazdırır.
8.2 AJAX ile Form Verisi Gönderme
Bir form verisini AJAX ile sunucuya gönderebiliriz:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>AJAX Form Gönderme</title>
</head>
<body>
<form id="form">
<input type="text" id="isim" placeholder="Adınızı girin">
<button type="button" onclick="veriGönder()">Gönder</button>
</form>
<script>
function veriGönder() {
let isim = document.getElementById("isim").value;
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ isim: isim })
})
.then(response => response.json())
.then(data => console.log('Başarılı:', data))
.catch(error => console.error('Hata:', error));
}
</script>
</body>
</html>
9. Modüler Yapı ve ES6 Özellikleri
JavaScript projelerinde kodun yönetilebilirliği için modüler yapı önemlidir. ES6 ile gelen import
ve export
anahtar kelimeleri sayesinde, farklı JavaScript dosyalarını birbiriyle entegre edebiliriz.
9.1 export
ve import
Kullanımı
Bir JavaScript dosyasını başka bir dosyada kullanmak için export
ve import
özelliklerini kullanabiliriz.
- Module.js: Fonksiyon tanımlayıp
export
ediyoruz.
// Module.js
export function selamVer(isim) {
return `Merhaba, ${isim}!`;
}
2. Main.js: Başka bir dosyada bu fonksiyonu import
ederek kullanıyoruz.
import { selamVer } from './Module.js';
console.log(selamVer('Ahmet')); // "Merhaba, Ahmet!"
10. Web Projelerinde JavaScript Uygulamaları: Örnek Projeler
Son olarak, öğrendiğiniz bilgileri pekiştirmek için HTML ile JavaScript’i birlikte kullanarak birkaç basit uygulama örneği hazırlayacağız. Bu projeler sayesinde JavaScript’in web projelerinde nasıl kullanılabileceğini göreceksiniz.
10.1 Basit Hesap Makinesi Uygulaması
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Hesap Makinesi</title>
</head>
<body>
<h1>JavaScript ile Hesap Makinesi</h1>
<input type="number" id="sayi1" placeholder="Sayı 1">
<input type="number" id="sayi2" placeholder="Sayı 2">
<button onclick="topla()">Topla</button>
<p id="sonuç">Sonuç: </p>
<script>
function topla() {
let sayi1 = parseFloat(document.getElementById("sayi1").value);
let sayi2 = parseFloat(document.getElementById("sayi2").value);
let sonuç = sayi1 + sayi2;
document.getElementById("sonuç").innerHTML = "Sonuç: " + sonuç;
}
</script>
</body>
</html>
10.2 Anlık Saat Gösterimi
Kullanıcının saatini sürekli güncel olarak gösteren basit bir uygulama:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Anlık Saat</title>
</head>
<body>
<h1>Anlık Saat</h1>
<p id="saat"></p>
<script>
function saatGüncelle() {
let tarih = new Date();
document.getElementById("saat").innerHTML = tarih.toLocaleTimeString();
}
setInterval(saatGüncelle, 1000); // Her saniye saat güncellenir
</script>
</body>
</html>
11. İleri Düzey JavaScript Konuları
Şimdi, JavaScript’in daha ileri düzey konularına geçelim. Bu konular, gelişmiş uygulama geliştirme becerileri kazandıracak ve modern özelliklerini daha iyi anlamanıza yardımcı olacaktır.
11.1 JavaScript Tabanlı Framework ve Kütüphaneler
Modern web geliştirmede, JavaScript tabanlı framework ve kütüphaneler büyük bir rol oynamaktadır. Bunlar, uygulama geliştirme sürecini kolaylaştırır ve daha modüler bir yapı sağlar.
- React: Kullanıcı arayüzleri oluşturmak için kullanılan bir kütüphanedir. Bileşen tabanlı yapısı ile dinamik ve yeniden kullanılabilir bileşenler oluşturulmasına olanak tanır.
- Vue.js: Progressive JavaScript framework’üdür. Uygulama geliştirirken kullanımı kolay bir yapı sunar ve bileşenler aracılığıyla dinamik sayfalar oluşturmanıza yardımcı olur.
- Angular: Google tarafından geliştirilen bir framework’dür. MVC (Model-View-Controller) mimarisini kullanarak büyük ölçekli uygulamalar geliştirmeyi kolaylaştırır.
11.2 JavaScript ile Olay Delegasyonu
Olay delegasyonu, daha iyi performans sağlamak ve daha az bellek kullanmak için kullanılan bir tekniktir. Bir olay dinleyicisi, ana bir öğeye eklenir ve alt öğelerdeki olaylar bu ana öğe üzerinden yönetilir.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Olay Delegasyonu</title>
</head>
<body>
<ul id="liste">
<li>Öğe 1</li>
<li>Öğe 2</li>
<li>Öğe 3</li>
</ul>
<script>
document.getElementById("liste").addEventListener("click", function(event) {
if(event.target.tagName === "LI") {
alert(event.target.innerHTML + " tıklandı!");
}
});
</script>
</body>
</html>
Bu örnekte, ul
etiketine bir olay dinleyicisi eklenmiştir. Bu, dinamik olarak oluşturulan alt öğelerde bile tıklama olaylarını yönetmeye olanak tanır.
11.3 JavaScript Promiseleri ve Asenkron Programlama
Asenkron işlemleri yönetmek için Promise
yapısını sunar. Bu, asenkron kod yazmayı ve hata yönetimini kolaylaştırır.
let veriAl = new Promise((resolve, reject) => {
let durum = true; // Durumu simüle et
if (durum) {
resolve("Veri başarıyla alındı!");
} else {
reject("Veri alınamadı.");
}
});
veriAl
.then(sonuc => console.log(sonuc))
.catch(hata => console.error(hata));
Bu örnekte, Promise
nesnesi bir işlemi temsil eder ve then
ve catch
ile sonuç veya hata durumu yönetilir.
11.4 Async/Await ile Asenkron Programlama
Async/Await, asenkron kod yazımını daha okunabilir hale getirir. async
anahtar kelimesi bir fonksiyonu asenkron hale getirirken, await
anahtar kelimesi bir Promise
‘in çözülmesini bekler.
async function veriAlma() {
try {
let yanit = await fetch('https://jsonplaceholder.typicode.com/posts');
let veri = await yanit.json();
console.log(veri);
} catch (hata) {
console.error('Hata:', hata);
}
}
veriAlma();
Bu örnekte, fetch
API’si kullanılarak veri asenkron bir şekilde alınmaktadır.
11.5 Web API’leri ve Tarayıcı Özellikleri
Tarayıcı ile etkileşimde bulunmak için birçok yerleşik API sunar. Bu API’ler sayesinde kullanıcı deneyimini artırabiliriz.
- Geolocation API: Kullanıcının konumunu alır.
- Web Storage API: Tarayıcıda veri saklamayı sağlar.
- Service Workers: Offline uygulamalar geliştirmek için kullanılır.
11.6 Test ve Hata Ayıklama
JavaScript ile geliştirilen uygulamalarda test ve hata ayıklama süreçleri de önemlidir. JavaScript uygulamalarını test etmek için:
- Unit Test: Bireysel fonksiyonların test edilmesi.
- Integration Test: Farklı bileşenlerin bir arada çalışmasının test edilmesi.
- End-to-End Test: Uygulamanın tamamının gerçek bir kullanıcı gibi test edilmesi.
Kullanılan Araçlar:
- Jest: JavaScript kodlarının test edilmesi için popüler bir test çerçevesidir.
- Mocha: Asenkron testler yazmak için esnek bir test çerçevesidir.
12. Örnek Projeler
Artık CSS ile JavaScript’in etkileşimini ve ileri düzey konuları anladığımıza göre, birkaç uygulama projesiyle öğrendiklerimizi pekiştirelim.
12.1 Yapay Zeka Destekli Basit Anket Uygulaması
Bu uygulama, kullanıcılardan yanıtlar toplar ve yanıtları analiz eder.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Anket Uygulaması</title>
<style>
#sonuc {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Hangi programlama dillerini biliyorsunuz?</h1>
<input type="checkbox" id="js"> JavaScript
<input type="checkbox" id="py"> Python
<input type="checkbox" id="java"> Java
<button onclick="anketSonucu()">Gönder</button>
<div id="sonuc"></div>
<script>
function anketSonucu() {
let diller = [];
if (document.getElementById("js").checked) diller.push("JavaScript");
if (document.getElementById("py").checked) diller.push("Python");
if (document.getElementById("java").checked) diller.push("Java");
let sonuc = diller.length > 0 ? "Seçtiğiniz diller: " + diller.join(", ") : "Hiçbir dil seçmediniz.";
document.getElementById("sonuc").innerHTML = sonuc;
}
</script>
</body>
</html>
12.2 Hava Durumu Uygulaması
Kullanıcıdan bir şehir alarak hava durumu bilgisini gösteren basit bir uygulama:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Hava Durumu Uygulaması</title>
</head>
<body>
<h1>Hava Durumu Uygulaması</h1>
<input type="text" id="sehir" placeholder="Şehir girin">
<button onclick="havaDurumu()">Hava Durumunu Göster</button>
<p id="sonuc"></p>
<script>
async function havaDurumu() {
let sehir = document.getElementById("sehir").value;
const API_KEY = 'YOUR_API_KEY'; // API anahtarınızı buraya ekleyin
let yanit = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${sehir}&appid=${API_KEY}&units=metric`);
let veri = await yanit.json();
if (veri.cod === 200) {
document.getElementById("sonuc").innerHTML = `Şehir: ${veri.name}, Sıcaklık: ${veri.main.temp}°C`;
} else {
document.getElementById("sonuc").innerHTML = "Şehir bulunamadı.";
}
}
</script>
</body>
</html>
Bu örneklerde JavaScript’in HTML ile etkileşimi, CSS ile nasıl stil değişikliği yapıldığı ve ileri düzey JavaScript konuları üzerinde durduk. Gelişmiş uygulama projeleri ile gerçek dünya senaryolarında JavaScript’i nasıl kullanabileceğinizi gösterdik.