JavaScript – Giriş

Web tasarım kursumuzda artık belirli bir seviyeye ulaşmış bulunuyoruz.

HTML ve CSS derslerimizin sonuna geldik; temel seviye web tasarım işlemlerinden ayrılıp web programlamaya giriş yapıyoruz.

Bundan sonraki derslerimize JavaScript ile devam edeceğiz. Şimdiden herkese başarılar dilerim.

• JavaScript, web’in programlama dilidir
• JavaScript öğrenmek kolaydır
• JavaScript derslerimiz boyunca basit düzeyden ileri düzeye JavaScript öğrenebilirsiniz

Örnek Bir JavaScript Uygulaması Yapalım

Bu örneğimizde bir buton olacak ve bu butona tıklandığında bize o anki saati ve tarihi gösterecek.

Şimdi sizlere bu uygulamanın kodlarını göstereceğim ama hemen telaşa kapılmayın; bu yalnızca kod mantığını anlayabilmeniz için bir örnek. Elbette sizi doğrudan bu gibi uygulamalar yazmaya başlatmayacağım.

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">Tarih ve saati görüntülemek için tıklayın!</button>
<p id="demo"></p>

JavaScript ile Bir HTML Öğesinin İçeriğini Değiştirebiliriz

JavaScript bu konularda son derece kolaydır. Şimdi tek satırlık bir kodla bu örneğimizi gerçekleştirelim:

<script>
document.getElementById("demo").innerHTML = "Merhaba JavaScript";
</script>

HTML ve JavaScript dillerinde tek tırnak veya çift tırnak kullanabilirsiniz.

İlk ders olması sebebiyle ve unutmamanız açısından bu dersimizde verdiğimiz her örneği hem çift tırnak hem de tek tırnakla vereceğim.

Zamanla hangisi size daha kolay veya kullanışlı geliyorsa onu alışkanlık hâline getirir, diğerini kendiliğinden bırakırsınız.

JavaScript ile HTML Stillerini Değiştirebilirsiniz

Tıpkı ilk zamanlar yalnızca HTML bilirken CSS ekleyerek div’lere stil verdiğimiz gibi, JavaScript ile de HTML öğelerine stil verebiliriz.

Örnek:

<script>
document.getElementById("demo").style.fontSize = "25px";
// ya da
document.getElementById('demo').style.fontSize = '25px';
</script>

JavaScript ile HTML Öğelerini Gizleyebilirsiniz

JavaScript ile HTML öğelerini çok basit bir şekilde görünmez yapabiliriz.

<script>
document.getElementById("demo").style.display = "none";
// ya da
document.getElementById('demo').style.display = 'none';
</script>

JavaScript ile HTML Öğelerini Yeniden Gösterebilirsiniz

Gizlediğiniz HTML öğelerini JavaScript kullanarak tekrar görünür hâle getirebilirsiniz.

<script>
document.getElementById("demo").style.display = "block";
// ya da
document.getElementById('demo').style.display = 'block';
</script>

Web tasarım kursumuzun JavaScript derslerinin ilk bölümünü işlemiş bulunuyoruz. Herkese başarılar dilerim.