Html-JavaScript

JavaScript Html sayfalarini daha dinamik/etkili/canli yapar.
Asagidaki butonu tiklarmisiniz?



Gordugnuz gibi tiklama islemine karsilik bir cevap aldik.

Html - JavaScript Kullanimi

Asagdaki ornekte de gorulecegi uzere javascript kodlarimizi sayfamizda
<script> ... </script>
etiketi icine yazariz,(CSS de style kullanimi gibi),

Html-Javacript alert Kullanimi

Herhalde internnet gezinirken gerkli/gereksiz bicok sayfadan birtakim uyari mesajlari almissinizdir, Nasil yapiliyor gorelim.
<button type="button" style="padding:6px;" onclick="alert('Evet Butonu Tikladin!');">Mesaj Goster</button>

Kodlara baktigimizda button etiketini kullandigimizi goruyoruz(henuz daha incelemedik) anlasilacagi uzere bir buton olusturmaya yariyor. ornekte butonun onclick isminde bir niteligi var,bu nitelik javascripte ozgu islemler yaptirmak icin kullanilir,
onclick="alert('Evet Butonu Tikladin!');"
Bu kodda onclick='...' ifadesi buton tiklaninca burdaki javascript kodunu calistir demektir. alert('...'); ile ekranda istedigmiz mesaji gostermis olduk.

Html - JavaScript ile bir ogenin icerigi degisebilir

<div id="ornekjs">
   <strong id="baslik_id">Baslik Alani</strong>
 </div>

 <button type="button" onclick="degistir();" style="padding:6px;">Basligi Degistir</button>

 <script>
 function degistir(){
   document.getElementById("baslik_id").innerHTML = "Yeni Baslik";
 }
 </script>
Baslik Alani

onclick="degistir();
bu ifadeyle dedikki ,buton tiklaninca degistir ismindeki javascript fonksiyonunu calistir, degistir fonksiyonumuz asagda script taglari arasinda tanimlandi.
<script>
 function degistir(){
   document.getElementById("baslik_id").innerHTML = "Yeni Baslik";
 }
 </script>
bu konular JavaScript derslerimizde detayli incelenecek fakat burda da aciklamakta fayda var,
document.getElementById("baslik_id")
ifadesiyle sayfamizdaki baslik_id isimli ID'ye sahip ogeye ulastik,ve innerHtml ile de bu ogeye yeni icerik atadik
Yukardaki degistir isimli fonksiyonumuzu baska ogelerde cagirabilir!

Html-JavaScript ile ogenin Css Stili Degistirilebilir

<div id="ornekjs">
  <strong id="renkli_baslik">Tikla ve Kirmizi Yap</strong>
</div>
<button type="button" onclick="rengi_degistir();" style="padding:6px;">Basligi Degistir</button>
<script>
function rengi_degistir(){
  document.getElementById("renkli_baslik").style.color="red";
}
</script>
Tikla ve Kirmizi Yap

JavaScript ile html nitelikleri de degistirilebilir,

Html-JavScript noscript etiketi

Kullanicinin tarayicisi JavaScripti desteklemiyorsa/engellendiyse ona ozel icerik sunabiliriz.
<noscript>
  Tarayici Javascript desteklemiyor
</noscript>
yukardaki kod Javascript engellenmis yada desteklenmeyen tarayicilarda calisacaktir.
Aynen CSS de yaptigimiz gibi Javascript kodlarini .js uzantili ayri bir dosyaya yazarak dokumanimiza ekleyebiliriz.basitce asagdaki gibi
<script src="dosyamiz.js"></script>

Ornek:

Onceki ornekler onclick(tiklama) ile tetiklenen javascript kodlari yazdik,asagda ise imlec ogenin ustune gelince(onmouseover) tetiklenen Javascript kodu yazdik.
<div id="son_ornek">
     <script src="kaynak/dosyamiz.js"></script>
      <button type="button" onmouseover="uzerinde();" style="padding:8px">Butonun Uzerine Imleci Getir</button>
</div>
ve dosyamiz.js icerigi
function uzerinde(){
  alert("Merhaba Ben harici Javascript dosyasindan geldim");
}

Html - JavaScript Parametreli Fonksiyon

Yukarda soyle bir uyari yapmistik "...fonksiyonumuzu baska ogelerde cagirabilir!"
kodu inceledigimizde her linkin '1.Link Tiklandi','2.Link Tiklandi' gibi birtakim bilgileri fonksiyona verdigni goruyoruz,gelen bu bilgiler fonksiyonda gelen_veri isimli degiskende tutuluyor bizde bu sayede tiklanan linkleri mesaj olarak yansitabildik.
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript Uygulama</title>
	<script>
	function tiklandi(gelen_veri){
		document.getElementById('sonuc').innerHTML=gelen_veri;
	}
	</script>
</head>
<body>
	<a href="#" onclick="tiklandi('1.Link Tiklandi')">Link-1</a>
	<a href="#" onclick="tiklandi('2.Link Tiklandi')">Link-2</a>
	<a href="#" onclick="tiklandi('3.Link Tiklandi')">Link-3</a>
<br><br>
	<strong id="sonuc" style='color:red;'></strong>
</body>
</html>
fonksiyon,parametreli fonksiyon,onclick,onmouseover,vs gibi terimlerle ilk defa karsilastiysaniz lutfen sorun yapmayin bu konular javascript derslerimizde ayrintili incelenecektir.

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com