• Post :
  • Yorum : 0

JavaScript' e Giriş

JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir programlama dilidir.

Biliyor musun?
JavaScript ve Java, hem konsept hem de tasarım açısından tamamen farklı dillerdir. JavaScript, 1995 yılında Brendan Eich tarafından icat edildi ve 1997'de ECMA standardı oldu. ECMA-262, standardın resmi adıdır. ECMAScript, dilin resmi adıdır.

JavaScript Neden Gerekli ?


JavaScript, tüm web geliştiricilerinin öğrenmesi gereken 3 dilden biridir:

   1. HTML, web sayfalarının içeriğini tanımlamak için
   2. CSS, Web sayfalarının düzenini belirlemek için
   3. JavaScript, Web sayfalarının davranışını programlamak için

Web sayfaları, JavaScript'in kullanıldığı tek yer değil. Çoğu masaüstü ve sunucu programı JavaScript kullanır. Node.js en iyi bilinendir. MongoDB ve CouchDB gibi bazı veritabanları da programlama dili olarak JavaScript kullanır.

En Basitinden Neler Yapar ?
 

1- JavaScript HTML İçeriğini Değiştirebilir. Birçok JavaScript HTML yönteminden biri getElementById () 'dir.

Bu örnek, bir HTML öğesini "bulmak" (id = "test" ile) yöntemini kullanır ve öğe içeriğini (innerHTML) "Selam JavaScript" olarak değiştirir:

document.getElementById("test").innerHTML = "Selam JavaScript";


2- JavaScript HTML Özellik Değerlerini Değiştirebilir. Bu örnekte JavaScript, bir <img> etiketinin src (kaynak) niteliğinin değerini değiştirir:

<button onclick="document.getElementById('resim').src='test.png'">Değiştir</button>


3- JavaScript HTML Stillerini Değiştirebilir (CSS). Bir HTML öğesinin stilini değiştirmek, bir HTML özelliğini değiştirmenin bir türevidir:

document.getElementById("test").style.fontSize = "35px";


4- JavaScript HTML Öğelerini Gizleyebilir. Ekran stilini değiştirerek HTML elemanlarını gizlemek mümkündür:

document.getElementById("test").style.display = "none";


5- JavaScript HTML Öğelerini Gösterebilir. Gizli HTML öğelerini göstermek, görüntüleme stilini değiştirerek de yapılabilir:

document.getElementById("test").style.display = "block";


<script> Etiketi

HTML’de, <script> ve </script> etiketleri arasına JavaScript kodu girilmelidir.

<script>
document.getElementById("test").innerHTML = "İlk Deneme";
</script>


JavaScript İşlevleri ve Olayları

Bir JavaScript işlevi, "çağrıldığında" çalıştırılabilen bir JavaScript kodu bloğudur. Örneğin, bir olay gerçekleştiğinde, kullanıcı bir düğmeyi tıkladığında olduğu gibi bir işlev çağrılabilir.

<head> veya <body> içindeki JavaScript

Bir HTML belgesine istediğiniz sayıda komut dosyası ekleyebilirsiniz. Komut dosyaları <body> veya bir HTML sayfasının <head> bölümüne veya her ikisine de yerleştirilebilir.

<head> konumundaki JavaScript

Bu örnekte, bir HTML sayfasının <head> bölümüne bir JavaScript işlevi yazıldı. Bir button öğesine tıklandığında işlev çağrılır (çağrılır):

<!DOCTYPE html>
<html>
<head>
<script>
function fonksiyon() {
  document.getElementById("test").innerHTML = "Paragraf Değişmiştir.";
}
</script>
</head>
<body>

<h1>Bu Bir Web Sayfasıdır</h1>
<p id="test">Bu Bir Paragraftır.</p>
<button type="button" onclick="fonksiyon()">Test Et!</button>

</body>
</html>

<body> konumundaki JavaScript

Bu örnekte, bir HTML sayfasının <body> bölümüne bir JavaScript işlevi yazıldı. Bir button öğesine tıklandığında işlev çağrılır (çağrılır):

<!DOCTYPE html>
<html>
<body>

<h1>Bu Bir Web Sayfası</h1>
<p id="test">Bir Paragraf</p>
<button type="button" onclick="fonksiyon()">Test Et!</button>

<script>
function fonksiyon() {
 document.getElementById("test").innerHTML = "Paragraf Değişti";
}
</script>

</body>
</html>


Harici JavaScript Dosyalarının Avantajları

Komut dosyalarını harici dosyalara yerleştirmenin bazı avantajları vardır:

- HTML'i ve kodu ayırır.
- HTML ve JavaScript’in okunmasını ve bakımını kolaylaştırır.
- Önbelleğe alınmış JavaScript dosyaları, sayfa yüklenmelerini hızlandırabilir.

Dış Kaynaklar

Harici komut dosyalarına, tam bir URL ile veya geçerli web sayfasına göre bir yolla ulaşılabilir.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

 


JavaScript Görüntüleme Şekilleri
 

JavaScript verileri farklı şekillerde "görüntüleyebilir":

- InnerHTML kullanarak bir HTML öğesinin içine yazma.
- Document.write () işlevini kullanarak HTML çıktısına yazma.
- Window.alert () kullanarak bir uyarı kutusuna yazma.
- Console.log () kullanarak tarayıcı konsoluna yazma.

Nasıl Kullanılır ?

InnerHTML

Bir HTML öğesine erişmek için JavaScript document.getElementById (id) yöntemini kullanabilir. Id niteliği HTML öğesini tanımlar. InnerHTML özelliği HTML içeriğini tanımlar:

<script>
document.getElementById("test").innerHTML = 5 + 6;
</script>


document.write()

Bir HTML belgesi yüklendikten sonra document.write () yönteminin kullanılması, mevcut tüm HTML’leri siler: Test amacıyla, document.write () kullanmak mümkündür:

<script>
document.write(5 + 6);
</script>


window.alert()

Verileri görüntülemek için bir uyarı kutusu kullanılabilir:

<script>
window.alert(5 + 6);
</script>


console.log()

Hata ayıklama amacıyla, verileri görüntülemek için console.log () yöntemini kullanılır.

<script>
console.log(5 + 6);
</script>

Yorum Yap