JavaScript komutları, HTML sayfalarını daha dinamik ve etkileşimli hale getirir.
Aşağıdaki örnekte butona basınca tarih ve saati anlık olarak görebilirsiniz.
<!DOCTYPE html>
<html>
<body>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Tarih ve Saat.</button>
<p id="demo"></p>
</body>
</html> HTML <script> Etiketi
HTML <script> etiketi, JavaScript komut dosyasının tanımlanması için kullanılır.
<script> ögesi HTML dosyası içinde komut dosyası içerebileceği gibi harici olarak da js uzantılı javascript komut dosyası çağırabilir. Javascript yaygın olarak görüntü işleme, form doğrulama ve içeriği dinamik hale getirmek için kullanılır.
HTML ögesini seçme işlemi document.getElementById() komutu ile yapılır.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Merhaba JavaScript!";
</script>
</body>
</html>
Yukarıdaki örnek javascript ile id değeri demo olan elemana merhaba javascript yazdırmaktadır.
JavaScript ile Neler Yapılabilir?
Javascript ile yapabileceğiniz bir çok şey vardır. Aşağıda bulunan örnekleri inceleyebilirsiniz.
Javascript ile içerik değiştirme;
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">Tıklayın!</button>
<p id="demo">NE YAZACAK ?.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Merhaba JavaScript!";
}
</script>
</body>
</html>Javascript ile renk ve stil değiştirme işlemleri;
<!DOCTYPE html>
<html>
<body>
<p id="demo">JavaScript ile renk ve stil değiştirme yapabilirsiniz.</p>
<script>
function fonksiyonDeneme() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>
<button type="button" onclick="fonksiyonDeneme()">Tıklayın!</button>
</body>
</html>HTML <noscript> Etiketi
<noscript> etiketi, tarayıcılarında komut dosyalarını devre dışı bırakanlar, komut dosyalarını desteklemeyen bir tarayıcıya sahip olanlara görüntülenecek alternatif bir içeriği gösterir.
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Merhaba JavaScript!";
</script>
<noscript>Üzgünüz Tarayıcınız JavaScript Desteklemiyor veya Javascript Devredışı Bırakılmış!</noscript>
</body>
</html>
Muhtemelen bir çok kişinin tarayıcısı yeni olduğu için yukarıdaki örnek çalışacaktır. Tarayıcı ayarlarından javascripti devredışı bırakıp örneği deneyebilirsiniz.
