39 – Html Javascript Kullanımı
Javascript html sayfalarımızı dinamik, daha etkileşimli hale getiren, tarayıcı tarafında çalışan bir yazılım dilidir.
Harici bir javascript dosyası yazabileceğimiz gibi html sayfası içerisinde javascript betikleri kullanmak için <script> etiketi kullanırız.
Javascript web sayfası tarayıcıda yüklenirken tarayıcı tarafında çalışır. javascript sayesinde html öğelerine ulaşıp daha interaktif ve kullanıcı etkileşimli bir sayfa tasarlayabiliriz.
Aşağıdaki örnekte bir paragraf tanımlayalım ve bir id verelim. Javascript ile id ‘ye erişip içeriğine bir yazı ekleyelim.
Örnek
<html>
<head>
<title>Html javascript Kullanımı</title>
</head>
<body>
<h3>Html Sayfasında Javascript Kullanmak</h3>
<p id="icerik" > </p>
<script>
document.getElementById('icerik').innerHTML="Merhaba Javascript"
</script>
</body>
</html>Yukarıdaki örnekte <p> ile bir paragraf açtık. Ancak içerisine hiç birşey yazmadık. Javascript sayesinde <p> elemanının id’si ile elemana ulaştık ve içeriğine merhaba javascript yazılmasını sağladık.
Html içersinde javascript kullanım örnekleri
Javascript Hangi Yıldayız Örnek
Aşağıdaki örnekte hangi yılda olduğumuzu gösteren bir javascript kodu html sayfası içerisinde nasıl kullanılır gösterilmiştir.
Örnek
Javascript ile Stil Verme Örnek
Var olan bir paragrafın stil özelliklerini javascript ile değiştirelim.
Örnek
<body>
<button type="button" onclick="stilDegistir()"> Tasarımı Değiştir</button>
<p id="paragraf">Html Sayfasında Javascript ile Stil Değiştiriyorum </p>
<script>
function stilDegistir(){
document.getElementById("paragraf").style.backgroundColor="purple";
document.getElementById("paragraf").style.color="white";
document.getElementById("paragraf").style.fontSize="24px";
document.getElementById("paragraf").style.padding="10px";
}
</script>
</body>Javascript ile Resim Değiştirme Örneği
Örnek
Javascript <noscript> Etiketi
noscript etiketi javascriptin desteklemediği tarayıcılarda çıkacağı alternatif yazı için kullanılır.
Örneğin bir javascript kodu yazdık ve kullanıcının tarayıcısında bu desteklenmiyorsa noscript etiketleri içerisine yazdığımız metin gözükecektir.
Örnek Kullanımı:
<p id="paragraf"> </p>
<script>
document.getElementById("paragraf").innerHTML="Merhaba Javascript";
</script>
<noscript>
Bu tarayıcıda javascript Desteklenmemektir. içeriği görmek için Javascripti etkin hale getirebilrisiniz.
</noscript>Eğer tarayıcıda javascript etkin değil ise paragrafımızın içerisine Merhaba Javascript yazamayacaktır. noscript etiketleri içerisine yazdığımız yazı gözükecektir.