HTML5 ve JavaScript
Lisans:
Creative Commons
11.12.2020
tarihinde güncellendi
Bakabileceğiniz Etiketler:
Eğitmen:
Geleceği Yazanlar Ekibi
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, if, else, case, for, while 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.
