Merhaba bugün JavaScript derslerimizden birincisine
başlıyoruz. Bugün sizlerle JavaScript ile HTML kodlarını nasıl
değiştirebileceğimizi, HTML kodlarını nasıl gizleyebileceğimizi ve HTML kodlarını
nasıl gösterebileceğimizi öğreneceğiz. Haydi başlayalım : )
JavaScript ile HTML kodlarının içeriğini değiştirebiliriz.
Bunun için bize gerekli olan getElementById(). Metodudur. Aşağıda vereceğimiz
örnekte getElementById(). Metoduyla değiştirmek isteğimiz kodu bulacağız ve
isteğimiz şekilde değiştireceğiz.
Örnek Kod :
<html>
<body>
<h2>JavaScript İle Neler Yapılabilir?</h2>
<p id="demo">Değiştirilecek Cümle</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Yerine Yazılacak Yazı"'>Tıkla</button>
</body>
</html>
JavaScript’i hem tek tırnak hem de çift tırnakla
kullanabiliriz
Örnek Kod :
<html>
<body>
<h2>JavaScript İle Neler Yapılabilir?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Tıkla</button>
</body>
</html>
JavaScript ile Html kod içindeki resimlerin rengini de
değiştirebiliriz. Bu örnekte ampul
kullanarak JavaScriptle Html kodun içinde resmin rengini nasıl
değiştirebileceğimizi görelim.
Örnek Kod :
<html>
<body>
<h2>JavaScript İle Neler Yapılabilir?</h2>
<p>JavaScript can change HTML attributes.</p>
<p>In this case JavaScript changes the src (source) attribute of an image.</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>
JavaScript ile HTML style dosyalarını da değiştirebiliriz.
Örnek Kod :
<html>
<body>
<h2>JavaScript İle Neler Yapılabilir?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Tıkla</button>
</body>
</html>
JavaScript ile Html elementlerini gizleyebiliriz. Dilerseniz
bir örnekle bilgimizi pekiştirelim.
Örnek Kod :
<html>
<body>
<h2>JavaScript İle Neler Yapılabilir?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Tıkla</button>
</body>
</html>
Ve bu dersimizde son olarak sizlere gizlediğimiz HTML
kodlarını JavaScript yardımı sayesinde nasıl tekrardan gösterebileceğimizi
açıklayayım.
Örnek Kod :
<html>
<body>
<h2>JavaScript İle Neler Yapılabilir?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Tıkla</button>
</body>
</html>
YORUM EKLE