JavaScript ve Web Geliştirme Eğitimi
1. JavaScript Nedir?
JavaScript, web sayfalarını dinamik ve etkileşimli hale getiren bir programlama dilidir. Tarayıcıda çalışır ve HTML ile CSS ile birlikte web geliştirmede kullanılır.
1.1. Basit Bir JavaScript Örneği
Aşağıdaki örnekte, "Hello, World!" mesajını bir alert kutusunda görüntüleyen basit bir JavaScript kodu bulunmaktadır:
<script>
alert('Hello, World!');
</script>
2. DOM Manipülasyonu
Document Object Model (DOM), web sayfasının yapısını temsil eder ve JavaScript ile bu yapıyı değiştirebiliriz.
2.1. Bir HTML Elementine Erişme ve Değiştirme
Aşağıdaki örnekte, JavaScript kullanarak bir paragrafın içeriğini değiştireceğiz:
<p id="myParagraph">Bu bir paragraftır.</p>
<script>
document.getElementById('myParagraph').innerText = 'Paragraf içeriği değişti!';
</script>
3. Etkinlikler ve Olaylar
JavaScript ile kullanıcının etkileşimlerine yanıt verebiliriz. Bu etkileşimler olaylar olarak adlandırılır.
3.1. Butona Tıklama Olayı
Aşağıdaki örnekte, bir butona tıklama olayıyla bir mesaj görüntüleyeceğiz:
<button onclick="showMessage()">Tıkla Beni</button>
<script>
function showMessage() {
alert('Butona tıklandı!');
}
</script>
4. Form İşleme
Formlar, kullanıcıdan veri toplamak için kullanılır ve JavaScript ile bu verileri işleyebiliriz.
4.1. Basit Bir Form Doğrulama
Aşağıdaki örnekte, bir formun gönderilmeden önce boş olup olmadığını kontrol edeceğiz:
<form onsubmit="return validateForm()">
<input type="text" id="name" placeholder="Adınız" />
<input type="submit" value="Gönder" />
</form>
<script>
function validateForm() {
var name = document.getElementById('name').value;
if (name == '') {
alert('Lütfen adınızı giriniz.');
return false;
}
return true;
}
</script>
5. AJAX ile Veri Alma
AJAX, web sayfasını yeniden yüklemeden veri almak için kullanılır. Bu, daha dinamik ve hızlı kullanıcı deneyimleri sağlar.
5.1. AJAX Kullanarak Veri Alma
Aşağıdaki örnekte, bir API'den veri almak için AJAX kullanacağız:
<button onclick="loadData()">Veri Yükle</button>
<div id="data"></div>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.onload = function() {
if (xhr.status == 200) {
document.getElementById('data').innerHTML = xhr.responseText;
}
};
xhr.send();
}
</script>