Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları

  • Onur YURT
  • iletisim@hazirsitekodlari.com
  • 57

    Makale

  • 3

    Yorum

  • 8

    Kategori

Webmaster adına tüm bilgi ve paylaşım platformudur.

Senin Kodun

Ana Sayfa / Javascript / JavaScript kodlarının bir HTML belgesinde kullanımını

JavaScript kodlarının bir HTML belgesinde kullanımını

HTML5 sayfalarının dinamik yani gelen taleplere anında cevap verebilmesi ve etkileşimli (interactive) olabilmesi için bir betik diline ihtiyacı vardır. Bu dil, günümüz uygulamalarına baktığımızda en yaygın dil olan JavaScript dilidir. JavaScript, HTML5 içine gömüldükten (embedded) sonra çalışır.

JavaScript kodlarını HTML5 içine gömmek için <script>…</script> etiketlerine ihtiyaç vardır. <script> elemanı, ya betik dili deyimlerini içerir ya da src (source) özelliği yardımıyla bir dış betik dosyasına referans verir.

Aşağıdaki kod parçasını daha sonraki örneklerde de kullanmak için scr.html adıyla kaydedin.

<script>
    document.write("GUZEL YURDUM TURKIYE");
    alert("GUZEL ISTANBUL'UM");
</script>

<script> etiketiyle dış kaynaktaki bir betik dosyasına referans aşağıdaki kod parçasında görüldüğü gibi verilir:

<script src="ornek.js"></script>

JavaScript temel yazım kuralları

JavaScript kodlarının yazımı için gerekli en temel kurallar şu şekilde sıralanır:

  • <script> </script> etiketi derleyiciye, içinde yazılı olan kodun bir betik kodu olduğunu bildirir.
  • // ve <– –>  sembolleri koda yorum yazmak için kullanılır.
  • document: Belirtilen pencerede gösterilecek HTML belgesini temsil eder.
  • JavaScript komut satırı sonunda, bir noktalı virgül (;) sembolü bulunur.
  • var: Diğer dillerde olduğu gibi, JavaScript’te de değişkenler mevcuttur. Değişkenler var anahtar sözcüğü ile tanımlanır ve farklı tipte olabilirler.
<script type="text/javascript">
    // GLOBAL DEGISKEN BILDIRIMI
    var gd = "GLOBAL DEGISKEN";
    var sayi = 1;
    function kont( ) {
        // LOKAL DEGISKEN TANIMLANIYOR
        // AYNI ISIMLI GLOBAL DEGISKENE GORE ONCELIKLI
        var gd= "LOKAL DEGISKEN";
        document.write(gd);
    }
kont();
 document.write(gd);
    </script>

JavaScript değişkenler için tip ayrımının yapılmadığı bir dildir; bu da tanımlanan bir değişkene her tipte verinin atanabilmesi anlamına gelir.

 

JavaScript operatörleri

JavaScript’te, +*/& gibi operatörler diğer dillerle benzer anlamlar taşır. Ayrıca, ifelsecaseforwhile gibi kontrol komutları da JavaScript dilinde kullanılabilir.

<!DOCTYPE html>
<html>
    <body>
     
        <script type="text/javascript">
            var yas = 15;
            if( yas > 18 ){
                document.write("18 YASINDAN BUYUK");
            }else{
                document.write("18 YASINDA YA DA DAHA KUCUK");
            }
        </script>
       
    </body>
</html>

JavaScript fonksiyonları

JavaScript aslında fonksiyonlar üzerine kurulmuş bir dildir. Bir fonksiyon tanımlamak için aşağıdaki format kullanılır:

function  FonkAdi(p1,p2,…pn)

              {  JavaScript Komutları;

              }

Yukarıdaki yazılış biçiminde de görüldüğü gibi, function sözcüğünden sonra fonksiyonun adı belirtilir; bu ad kullanıcı tarafından belirlenir ancak fonksiyonun yaptığı işe uygun bir isim seçilmesi tavsiye edilir. Daha sonra parantez içinde parametre listesi belirtilir. Bunlar, fonksiyonu çağırırken gönderilecek değerlerdir. Fonksiyonun gövdesi ise {} sembolleri arasına yerleştirilen JavaScript komutlarından oluşur.

<!DOCTYPE html>
<html>
    <body>
       
        <script type="text/javascript">
            function PLAKA(ad, say)
            {
                alert("SEHIR ADI.." + ad+ "PLAKA NO:" + say);
            }  
        //PLAKA fonksiyonunu çağırma
            PLAKA("ISTANBUL", 34);
            </script>
       
    </body>
</html>

JavaScript olayları (events)

Kullanıcı ya da tarayıcı bir sayfa üzerinde işlem yaparken bazı olaylar meydana gelir. Örneğin bir düğmeye (button onclick) ya da fareye tıklanır (onmousedown). JavaScript’in, HTML ile karşılıklı etkileşimi bu olaylar sayesinde olur.

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
            function MESAJ() {
                alert("GUZEL YURDUM TURKIYE")
            }
        </script>
    </head>
    <body>
        <input type="button" onclick="MESAJ()" value="BUTONA TIKLA" />
    </body>
</html>

 

JavaScript kullanarak bir sınıf değerine (attribute) erişmek

JavaScript’te, belirli bir HTML5 elemanına erişmek için, elemanın tek bir “id” değeri olmalıdır. JavaScript’in getElementById() fonksiyonunu kullanarak, belirlenmiş bir elemanı çağırabilirsiniz. Bu metoda elemanın “id” değeri parametre olarak gönderilir.

<!DOCTYPE html>
    <html>
        <head>
            <script>
                function GOSTER(kitap)
                {
                    var kittip = kitap.getAttribute("data-kitap-tip");
                    alert("" + kitap.innerHTML + " TURUNDE BIR KITAP " + kittip + " LERDEN OLUSUR");
                }
            </script>
        </head>
        <body>
           
            <h1>KITAPLAR</h1>
            <p>Kitaplar icin tikla...:</p>
           
            <ul>
                <li onclick="GOSTER(this)" id="ro" data-kitap-tip="ROMAN">ROMAN</li>
                <li onclick="GOSTER(this)" id="an" data-kitap-tip="ANI">ANI</li>
                <li onclick="GOSTER(this)" id="si" data-kitap-tip="SIIR">SIIR</li>
            </ul>
           
        </body>
    </html>

Bu örnekte, karşınıza gelecek herhangi bir kitabın üzerine tıkladığınızda o kitabın türüne ait bir açıklama geldiğini göreceksiniz.

BENZER KONULAR

JavaScript ile Basit Bir Program
JavaScript ile Basit Bir Program DEVAMI
  • 12 Mayıs 2020 | 0 | 244
Javascript | Kategorisine Ait Yazıların Daha Fazlası...

KONU HAKKINDA (Yorum Yapılmamış) | SENDE YORUM YAP DESTEK OL!

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

BEN KİMİM?

Onur YURT

Web Developer And Coder

Merhaba arkadaşlar Adım Onur YÜRT Bursada doğdum ve yaşıyorum 2009 yılından itibaren web hayatına adım attım ve şuanda bulunduğum sayfayı açtım amaçım sizlere birşeyler öğretmek ve kazandırmak Web tasarım konusunda kendimi yeterince geliştirdiğime inanıyorum bu bilgileri zamanla siz değerli takipçilerime sunmak yeterince bildiğim kodlama diller Css3, Html5, Javascript ve Php dir.

POPULER KONULAR

Hazır Site Kodları Web Siteniz İçin Hazır Site Kodları...