Javascript Dersleri

Bu derse basladigniza gore sanirim Html,Css konusunda temel bilgiye sahipsiniz demektir.Eger boyle degilse lutfen Html Dersleri | Css Dersleri Bu linkleri ziyaret ederek bir sure temel html,css bilgisi kazanmalisiniz.



Neden?

  • Html ile sayfanin icerigini olusturduk(Bir cop adam olusturduk)
  • Css ile sayfanin duzenini sagladik,gorsel guzellik kattik(Cop adami yakisikli bir adam yaptik,bu halde bile css etkisiyle cesitli fiziksel hareketler yapabilir)
  • Javascript ile sayfanin kullaniciya tepki vermesini saglayacagiz.(Yakisikli adam simdi mantikli harekerlerde bulunabilir,kullanici ile etkilesime gecebilir)
  • Javascript Neler Yapabiliriz Basitce gorelim

    Asagida yer alan icerik html derslerimizde bulunan dersin aynisidir. bu derste anlatilan tiklama/fonksiyon/.. gibi terimler devam eden derslerde ayrintili anlatilacaktir,sadece onbilgi acisindan incelemenizde yarar var.
    JavaScript Html sayfalarini daha dinamik/etkili/canli yapar.
    Asagidaki butonu tiklarmisiniz?



    Gordugnuz gibi tiklama islemine karsilik bir cevap aldik.

    JavaScript Kullanimi

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

    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,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.

    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 javascript kodlarinda tek tirnak ( ' ) veya cift tirnak ( " ) kullanabiliriz.
    Yukardaki degistir isimli fonksiyonumuzu baska ogelerde cagirabilir!

    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.
    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");
    }

    • Javascript istemci tarafli bir dildir,
    • yani kodlarimiz sunucu uzerinde degil,kaynagi cagiran kullanicinin bilgisayarinda yorumlanir
    • Bu durum sunucunun yukunu hafiflettigi icin,kodlarimiz daha hizli calisir
    • Aynen html'de oldugu gibi yazilan kaynak kodlar gizli degildir!
    • Gizlilik sorunu olmayan kodlar icin javascript kullanmak avantajlidir.
    • Kodlar yukardan asagiya dogru satir satir okunur.

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