JavaScript Kullanımı
JavaScript Web Sayfalarında Nasıl Kullanılır?
JavaScript, web sayfalarına dinamik ve interaktif özellikler eklemek için kullanılan bir programlama dilidir. HTML ve CSS ile birlikte, modern web geliştirmenin temel taşlarından biridir. JavaScript, tarayıcı tarafında çalışır ve kullanıcı etkileşimlerine yanıt verir, sayfa içeriğini dinamik olarak değiştirir ve sunucu ile iletişim kurar. Bu makalede, JavaScript’in web sayfalarında nasıl kullanıldığını örneklerle açıklayacağız.
1. JavaScript’i HTML’e Ekleme Yöntemleri
JavaScript, bir web sayfasına üç farklı şekilde eklenebilir:
a) Inline (Satır İçi) JavaScript
JavaScript kodu, HTML etiketlerinin içine doğrudan yazılabilir. Bu yöntem, küçük ve basit işlemler için kullanılır, ancak büyük projelerde önerilmez çünkü kodun okunabilirliğini azaltır.
<button onclick="alert('Butona tıklandı!')">Tıkla</button>b) Internal (Dahili) JavaScript
JavaScript kodu, HTML dosyası içinde <script> etiketleri arasına yazılır. Bu yöntem, küçük projeler veya tek sayfalık uygulamalar için uygundur.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Örneği</title>
</head>
<body>
<button id="myButton">Tıkla</button>
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Butona tıklandı!");
});
</script>
</body>
</html>c) External (Harici) JavaScript
JavaScript kodu, ayrı bir .js dosyasına yazılır ve HTML dosyasına <script> etiketi ile bağlanır. Bu yöntem, büyük projelerde tercih edilir çünkü kodun düzenli ve yeniden kullanılabilir olmasını sağlar.
Örnek:
script.jsdosyası:
document.getElementById("myButton").addEventListener("click", function() {
alert("Butona tıklandı!");
});index.htmldosyası:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>JavaScript Örneği</title>
</head>
<body>
<button id="myButton">Tıkla</button>
<script src="script.js"></script>
</body>
</html>2. JavaScript ile Temel İşlemler
JavaScript, web sayfalarında birçok temel işlemi gerçekleştirmek için kullanılabilir. İşte bazı örnekler:
a) DOM Manipülasyonu
JavaScript, Document Object Model (DOM) üzerinde değişiklik yaparak sayfa içeriğini dinamik olarak güncellemeyi sağlar.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>DOM Manipülasyonu</title>
</head>
<body>
<p id="text">Bu bir örnek metindir.</p>
<button id="changeText">Metni Değiştir</button>
<script>
document.getElementById("changeText").addEventListener("click", function() {
document.getElementById("text").innerText = "Metin değiştirildi!";
});
</script>
</body>
</html>b) Form Doğrulama
JavaScript, kullanıcıların formlara girdiği verileri doğrulamak için kullanılabilir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Form Doğrulama</title>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="email">E-posta:</label>
<input type="text" id="email" name="email">
<button type="submit">Gönder</button>
</form>
<script>
function validateForm() {
let email = document.getElementById("email").value;
if (!email.includes("@")) {
alert("Geçerli bir e-posta adresi girin!");
return false;
}
alert("Form başarıyla gönderildi!");
return true;
}
</script>
</body>
</html>c) Event Handling (Olay Yönetimi)
JavaScript, kullanıcı etkileşimlerini (tıklama, fare hareketi, klavye girişi vb.) yakalamak ve bu olaylara yanıt vermek için kullanılır.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Olay Yönetimi</title>
</head>
<body>
<button id="myButton">Tıkla</button>
<p id="output"></p>
<script>
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("output").innerText = "Butona tıklandı!";
});
</script>
</body>
</html>3. JavaScript ile Gelişmiş İşlemler
JavaScript, sadece basit işlemlerle sınırlı değildir. Aşağıda daha gelişmiş kullanım örnekleri bulunmaktadır:
a) API İstekleri (Fetch API)
JavaScript, sunucularla iletişim kurmak ve API’lerden veri çekmek için kullanılabilir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>API İsteği</title>
</head>
<body>
<button id="fetchData">Verileri Getir</button>
<ul id="dataList"></ul>
<script>
document.getElementById("fetchData").addEventListener("click", function() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(data => {
let list = document.getElementById("dataList");
data.forEach(item => {
let li = document.createElement("li");
li.innerText = item.title;
list.appendChild(li);
});
})
.catch(error => console.error('Hata:', error));
});
</script>
</body>
</html>b) Animasyonlar
JavaScript, CSS ile birlikte kullanılarak web sayfalarına animasyonlar eklemek için kullanılabilir.
Örnek:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Animasyon Örneği</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="moveButton">Hareket Ettir</button>
<script>
document.getElementById("moveButton").addEventListener("click", function() {
let box = document.getElementById("box");
let position = 0;
let interval = setInterval(() => {
if (position >= 300) {
clearInterval(interval);
} else {
position += 5;
box.style.left = position + "px";
}
}, 20);
});
</script>
</body>
</html>Sonuç
JavaScript, web sayfalarına dinamik ve interaktif özellikler eklemek için güçlü bir araçtır. Temel işlemlerden gelişmiş uygulamalara kadar birçok alanda kullanılabilir. JavaScript’i öğrenmek, modern web geliştirme dünyasında kendinize bir yer edinmek için önemli bir adımdır. Yukarıdaki örnekler, JavaScript’in web sayfalarında nasıl kullanıldığını anlamanıza yardımcı olacaktır. Daha fazla pratik yaparak, JavaScript’in sunduğu tüm imkanlardan yararlanabilirsiniz.
