HTML – JavaScript Yapısı!

#HTML

JavaScript, html dosyalarına dinamiklik ve erişebilirlik kazandırır. Bu makalede javascript in html içinde nasıl kullanılacağını açıkladık.

HTML ve JavaScript İlişkisi!
HTML ve JavaScript İlişkisi!

JavaScript, HTML sayfalarını daha dinamik ve etkileşimli hale getirir.

Örnek

Bu örnekte butona tıklandığında javascript sayesinde ekrana şuanki saati yazdırabiliyoruz.

<!DOCTYPE html>
<html>
<body>

<h1>İlk JavaScript Kodum!</h1>

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Tıkla ve Saati Göster!</button>

<p id="demo"></p>

</body>
</html> 

Çıktısı;

See the Pen html javascript by ArmyYazılım (@armyyazilim) on CodePen.

HTML <script> Etiketi

<script>Etiket, bir istemci tarafı komut dosyası (JavaScript) tanımlamak için kullanılır.

<script>Eleman ya komut ifadeleri içeriyor veya içinden harici komut dosyasına işaret srcözniteliği.

JavaScript’in genel kullanımları, görüntü işleme, form doğrulama ve içeriğin dinamik değişimleridir.

Bir HTML öğesini seçmek için, JavaScript document.getElementById()yöntemi en çok kullanır .

Bu JavaScript örneği, “Merhaba JavaScript!” Yazıyor. = “demo” kimliğine sahip bir HTML öğesine:

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

Çıktısı;

See the Pen html javascript text by ArmyYazılım (@armyyazilim) on CodePen.

JavaScript’in Önemi!

İşte JavaScript’in neler yapabileceğine dair bazı örnekler:

JavaScript HTML içeriğini değiştirebilir.

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>Javascript ile p etiketinin içindeki yazıyı değiştireceğiz:</p>

<button type="button" onclick="myFunction()">Tıkla!</button>

<p id="demo">Bu yazıyı değiştireceksiniz.</p>

<script>
function myFunction() { 
  document.getElementById("demo").innerHTML = "Merhaba JavaScript!";
}
</script>

</body>
</html>

Çıktısı;

See the Pen html js text değiştir by ArmyYazılım (@armyyazilim) on CodePen.

JavaScript HTML stillerini değiştirebilir.

Bu örnekte yazının arkaplan rengi, yazı rengi ve boyutu değişecektir tıkladığınız zaman.

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "25px"; 
  document.getElementById("demo").style.color = "red";
  document.getElementById("demo").style.backgroundColor = "yellow";        
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

Çıktısı;

See the Pen html js stil ekle by ArmyYazılım (@armyyazilim) on CodePen.

JavaScript HTML niteliklerini değiştirebilir.

See the Pen html js resim değiştir. by ArmyYazılım (@armyyazilim) on CodePen.

HTML <noscript> Etiketi

<noscript>Etiketi tarayıcılarında engelli komut varsa veya istemci tarafı komut dosyalarını desteklemeyen bir tarayıcısı olan kullanıcılar için alternatif bir içerik sağlamak adına kullanılır:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

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

<noscript>Üzgünüz javascript desteklemiyor tarayıcınız.</noscript>

<p>bu tarayıcı javascript destekliyor. bundan dolayı "hello javascript" yazısını gördünüz. Eğer tarayıcı desteklemeseydi "noscript" etiketindeki yazıyı görecektiniz.</p>
 
</body>
</html>

See the Pen html js noscript by ArmyYazılım (@armyyazilim) on CodePen.

HTML Komut Dosyası Etiketleri

EtiketlerAçıklamalar
<script> İstemci tarafı komut dosyasını tanımlar.
<noscript> İstemci tarafı komut dosyalarını desteklemeyen kullanıcılar için alternatif bir içerik tanımlar.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt ////