HTML5 ve JavaScript

-

HTML5 ve JavaScript


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>
Ekran Çıktısı;

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

JavaScript operatörleri

JavaScript'te, +, -, *, /, & gibi operatörler diğer dillerle benzer anlamlar taşır. Ayrıca, if, else, case, for, while gibi kontrol komutları da JavaScript dilinde kullanılabilir.

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ı; }

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.

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.

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

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

İç İçe Döngüler

-
Resim
İç İçe Döngüler Bir döngü yapısının içine başka bir döngü yapısının yerleştirilmesiyle elde edilen yapıya iç içe döngü (nested loop) adı verilir. JavaScript dilinde, if deyimlerini herhangi bir derinliğe kadar iç içe kullanmak nasıl mümkünse, döngü deyimlerini de iç içe kullanmak mümkün olacaktır. İç içe döngülerde hatırlanacak anahtar bilgi, önce en içteki döngülerin tamamlanması gerektiğidir. Bu konuda aşağıdaki kural iç içe döngüler için daima geçerlidir: İç içe döngülerde en içteki döngü en önce tamamlanır. İç İçe Döngüler Aşağıdaki programda, dış döngü olan i parametreli döngü beş kez çalışacaktır (i=1,2,3,4,5). i'nin her değeri için ise içteki döngü üç kez çalışacaktır (j=1,2,3). Böylece aşağıdaki çıktı elde edilecektir: <html> <head> <TITLE>Nested</TITLE> </head> <body bgColor="pink" > <FONT FACE="Comic sans MS"> <SCRIPT LANGUAGE="javaSCRIPT"> var i,j; for(i=1;i<=...
Devamı

Olağan Dışı Durumların Değerlendirilmesi

-
Resim
Olağan Dışı Durumların Değerlendirilmesi En üst düzey geliştiricilerin bile zaman zaman hatalı kod yazabildiğini biliyoruz. Bir programın çalışması esnasında normalde karşılaşılmaması gereken bir durum oluşursa, sektörde buna  olağan dışı durum (exception)  ve bu durumda ne yapılacağının belirlenmesine de  olağan dışı durum yönetimi (exception handling)  denir. Bir bölme işleminde paydanın  0  olması,  beklenmeyen  ya da  olağan dışı  bir durumdur. Aynı şekilde bir dosyaya erişim yapmak isteyen bir komutun o dosyayı bulamaması da olağan dışı bir durumdur. C++ diline kadar, olağan dışı durumların tespiti ve yönetimi yazılımcıların özel olarak geliştirdikleri kod parçalarıyla yapılabiliyordu. C++ dilinden itibaren olağan dışı durum yönetimi, dilin içine eklenen özel komut, sınıf ve metotlarla yapılabiliyor. Java ile birlikte,  Microsoft Visual Studio.Net ’in üç teme...
Devamı

Kontrol ve Karar Verme İşlemleri

-
Resim
Kontrol ve Karar Verme İşlemleri Diğer bilgisayar programlama dillerinde olduğu gibi, JavaScript dilinde de, esas olarak iki farklı tipte kontrol yapısı ya da komutu mevcuttur: Seçme (selection) işlemini gerçekleştiren kontrol komutları: Bu tip kontrol komutlarında, bir ifade kontrol edilerek, ifadenin değerine göre çeşitli seçeneklerden bir tanesine dallanma işlemi gerçekleştirilir. if, if else, switch case gibi yapılar bu tür komutları oluşturur. Tekrarlama (loop, repetition): Bu tip kontrol yapılarında bir işlemler grubu, bir koşula bağlı olarak belirli sayıda (10 kez, 50 kez vb) tekrarlı olarak icra edilebilir. for, while, do while yapıları da buna örnektir. İlerleyen eğitim içeriklerinde, JavaScript dilindeki bütün kontrol yapıları tüm ayrıntıları ile verilmektedir. if Deyimi Birçok programlama dilinde olduğu gibi, JavaScript'te de, bir ifadeyi kontrol ederek ifadenin sonucuna göre ya da doğruluğuna göre belirli işlemleri yapmayı ya da yapmamayı sağlayan ...
Devamı