JavaScript ile HTML kod değiştirme, Gizleme, Gösterme – Ders 1 


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> 









































Yorumlar











Yorum Gönder






























Bu blogdaki popüler yayınlar









HTML içinde görünmeyen yazı




















Resim







    HTML sayfa içinde görünmesini istemediğimiz,kod açıklaması vb. sebebler için kullandığımız yazıları nasıl saklarız onu paylaşıyorum.   <!-- Gizli yazı --> şeklinde eklenen içerikler gizli olur sayfada görünmez.   Örnek:   <!--Buraya yazılan yazılar sayfada görünmez  <a href="http://yeniwebmaster.blogspot.com/">Webmaster Blog</a>   -->    








Devamı










Mouse ile üzerine gelince değişen resim | HTML + CSS 





















Merhaba arkadaşlar.Uzun bir aradan sonra yeni bir paylaşım yapıyorum.Basit ama web sayfanizda kullanınca göze güzel görünecek bir özellikten bahsedeceğim.Özelliğimiz; Mouse ile resim üzerine gelince değişip üzerinden çekince eski haline gelen resimler.  Bu özelliği menülerde,butonlarda yada resim paylaşımlarında kullanabilirsiniz.  Hemen kodları deneyelim.Masaüstünüze  index.html,resim1.jpg,resim2.jpg dosyaları ekleyin.Ardından not defteri ile index.html dosyasını açıp içine aşağıdaki kodları ekleyip kaydedelim.   <html>  <style>  #degisenresim {      height: 70px;      width: 120px;      background-image: url('resim1.jpg');  }   #degisenresim:hover {      background-image: url('resim2.jpg');  }  </style>  <img id="Library">  </html>   Kodları kaydettikten sonra index.html dosyasını tarayıcı ile açtığınızda sayfada resim1.jpg'yi göreceksiniz üzerine mouse götürdüğünüzde resim1 kaybolacak yerine resim2.jpg görünecektir tekrar m








Devamı










Otomatik arka plan rengini değiştirme (Javascript &  HTML)





















Merhaba arkadaşlar.Bu konumuzda siteniz için otomatik olarak değişen site arka plan rengi nasıl yapılır onu göstereceğiz. Aşağıdaki javascript fonksiyon ile css ye komut vererek otomatik olarak sayfanin renk değiştirmesini sağlıyoruz.Süre ayarını kodların içindeki 5000 yazan kısmı değiştirerek yapabilirsiniz.5000=5 saniye.  Kodları çalıştırmadım ama çalışıyor olması gerekiyor sorun yaşayanlar yorum yaparsa yardımcı olmaya çalışırım.İyi çalışmalar.    <html> <head> <style> body {     background: blue; /* initial color */     transition: background .5s; /* .5s how long transition should take */ } </style>  <script> var colors = ['green', 'orange', 'blue']; var active = 0; setInterval(function(){     document.querySelector('body').style.background = colors[active];     active++;     if (active == colors.length) active = 0; }, 5000);</script> </head>  <body>   </body> </html>    








Devamı