Bu sayfa, JavaScript'in neler yapabileceğine dair bazı örnekler içerir.
JavaScript HTML İçeriğini Değiştirebilir
Birçok JavaScript HTML yönteminden biri getElementById().
Bu örnek, bir HTML öğesini (id = "demo" ile) "bulmak" için yöntemi kullanır ve öğe içeriğini ( innerHTML) "Merhaba JavaScript" olarak değiştirir:
Misal
JavaScript hem çift hem de tek tırnakları kabul eder:
Misal
document.getElementById('demo').innerHTML = 'Hello JavaScript';
JavaScript, HTML Öznitelik Değerlerini Değiştirebilir
Bu örnekte JavaScript src, bir <img>etiketin (kaynak) özniteliğinin değerini değiştirir :
Ampul
JavaScript HTML Stillerini Değiştirebilir (CSS)
Bir HTML öğesinin stilini değiştirmek, bir HTML niteliğini değiştirmenin bir çeşididir:
Misal
JavaScript, HTML Öğelerini Gizleyebilir
displayStil değiştirilerek HTML öğelerinin gizlenmesi yapılabilir :
Misal
JavaScript, HTML Öğelerini Gösterebilir
Gizli HTML öğelerini görüntülemek, displaystili değiştirerek de yapılabilir :
Misal
JavaScript HTML İçeriğini Değiştirebilir
Birçok JavaScript HTML yönteminden biri getElementById().
Bu örnek, bir HTML öğesini (id = "demo" ile) "bulmak" için yöntemi kullanır ve öğe içeriğini ( innerHTML) "Merhaba JavaScript" olarak değiştirir:
Misal
JavaScript:
document.getElementById("demo").innerHTML = "Hello JavaScript";Misal
document.getElementById('demo').innerHTML = 'Hello JavaScript';
JavaScript:
document.getElementById('demo').innerHTML = 'Hello JavaScript';Bu örnekte JavaScript src, bir <img>etiketin (kaynak) özniteliğinin değerini değiştirir :
Ampul
JavaScript:
<!DOCTYPE html>
<html>
<body>
<h2>
[SIZE=6][B]JavaScript Ne Yapabilir?[/B][/SIZE]
</h2>
<p>JavaScript, HTML öznitelik değerlerini değiştirebilir. .</p>
<p>Bu durumda JavaScript, bir görüntünün src (kaynak) özniteliğinin değerini değiştirir. </p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>Bir HTML öğesinin stilini değiştirmek, bir HTML niteliğini değiştirmenin bir çeşididir:
Misal
JavaScript:
document.getElementById("demo").style.fontSize = "35px";displayStil değiştirilerek HTML öğelerinin gizlenmesi yapılabilir :
Misal
JavaScript:
document.getElementById("demo").style.display = "none";Gizli HTML öğelerini görüntülemek, displaystili değiştirerek de yapılabilir :
Misal
JavaScript:
document.getElementById("demo").style.display = "block";
Son düzenleme: