Javascript Temelleri

AÖF Web Tasarımı ve Kodlama Javascript & jQuery

Javascript #1

Javascript Tanıtımı ve Kullanım Şekilleri

Javascript ile ilgili konuşulacak çok şey var fakat biz kısa ve öz bir giriş yaparak devam edeceğiz. Netscape tarayıcılar grubu geliştirenler tarafından 1997 yılında EcmaScript olarak doğmuştur. Java programlama dili ile hiç ilgisi yoktur. Tamamen isim benzerliği söz konusudur.

Javascript programlama dili yakın geçmişe kadar istemci taraflı (client side) olarak hayatımızdaydı. Bir başka deyişle web sayfasını barındığı sunucudan (hosting) bilgisayara aktarma ve görüntüleme işi gören tarayıcılar (browser) tarafından kullanılmaktaydı. Sunucu ile herhangi bir direkt çalışabilme bağı bulunmuyordu. Node.js kavramından sonra ise işler değişti. Javascript günümüzde sunucu taraflı olarak da kullanılabilmektedir. Şimdilik bu kadarını bilsek yeterli. Biz sadece istemci taraflı (client side) tarafını ele alacağız. Çünkü Node.js farklı ve ayrıca ilgi isteyen konudur.

Javascript Neden Kullanılır ? Kullanmak Zorunda mıyız?

Farklı sebeplerle Javascript kullanılır. Kullanmasak olur mu, olur. Ancak neredeyse bir web sayfasının kritik ihtiyacıdır diyebiliriz.

Bir web sayfasındaki butona tıkladığınızda karşınızda oluşan aksiyon; bir formun post edilmesi (gönderilmesi), bir pencerenin açılması, ziyaretçinin yönetimine bırakılmış bir alanın kontrolü, fare ile üzerine gelinen bir bağlantının şekil veya renk değiştirmesi, bir fotoğraf galerisinde kayıp geçen fotoğraflar, form doldurduğunuzda ve göndermek istediğinizde karşınıza çıkan eksik veya yanlış bilgi uyarı ekranları gibi çokça alanda Javascript kullanılır, kullanılmalıdır.

HTML Sayfasında Javascript Nasıl Çağrılır veya Yerleştirilir? Kodları nereye Yazılır ?

Daha önce yazdığımız CSS temellerine dair yazımızı (CSS #1) okuyanlar hatırlayacaktır. CSS kodlarını HTML sayfamızda üç şekilde kullanabiliyorduk. Bunlar; dışarıdan dosya çağırma, sayfa içi stil etiketi ekleyerek ve bu stil etiketine CSS kurallarını yazarak kullanma ve satır içi kullanım şeklindeydi.

Javascript’in kullanım şekli de farklı değildir. Bunları anlatırken bir yandan da ufak tefek javascript kodlarına giriş yapacağız. Her farklı kod için bir açıklama satırı ekleyeceğiz.

1- Dışarıdan çağrılan JS dosyası kullanılarak Javascript kullanımı:

Aşağıdaki sayfayı js adlı bir klasör oluşturup jskodu.js dosya adıyla o klasörün içerisine kaydedelim. Yani dosyaya ulaşım js/jskodu.js şeklinde olsun.

document.getElementById('test_alani').innerHTML = "Bu okuduğunuz yazı Javascript tarafından oluşturulmuş ve 'test_alani' kimlikli paragrafa girilmiştir.";

Şimdide aşağıdaki dosyamızı js_ders1.html adı ile kaydedelim. Bu dosyamız js klasörünün (dizininin) dışında olsun.

<!DOCTYPE html>
<html>
<head>
<title>Javascript #1</title>
</head>
<body>

<h1>JS tarafından sayfaya müdahale</h1>
<p id="test_alani"></p>
 
<script language="javascript" src="js/jskodu.js">
</script>
</body>
</html>

js_ders1.html dosyamızı tarayıcıda açtığımızda göreceksiniz ki “Bu okuduğunuz yazı Javascript tarafından oluşturulmuş ve ‘test_alani’ kimlikli paragrafa girilmiştir.” yazısı karşımıza çıkacak. Ne yaptık ? Bir JS dosyası oluşturduk ve Javascript kodlarımızı buna yazdık. Bir HTML dosyası oluşturduk ve JS dosya yolumuzu belirterek <script src=”DOSYA_YOLU”> …. </script> şeklinde sayfamıza çağırdık.
Şimdi kodlarımızı aşama aşama incelemeye geçelim.

HTML dosyamızda h1 (başlık/header) etiketi ve boş içerikli bir paragraf etiketi (p) oluşturduk. Bu paragrafa bir kimlik ismi verdik ve “test_alani” olarak bu ismi kendisine kaydettik. Bunu yapma sebebimiz; dışarıdan bu elemana müdahale edebilmekti.

Javascript dosyamızda yazdığımız kodu açıklarsak:
document.getElementById(‘test_alani’).innerHTML : Doküman içerisinde kimliği “test_alani” olan elemanı bul ve bu elemanın HTML içeriğine (innerHTML) şu metni gir …

Burada birkaç farklı önemli husus var.

  • Neden Javascript dosyamızı <body> … </body> etiket bloğuna yazdık?

Javascript’in bir HTML elemanına müdahale edebilmesi öncelikle o nesneyi bulup tanıması gerekmektedir. Yani tarayıcının sayfayı üstten alta doğru kodlarını okuyarak ekrana bastığını düşünürsek henüz sayfada yüklenme işlemi gerçekleşmemiş bir elemana Javascript müdahale edemez. Çünkü o nesne, Javascript için tanımsız (undefined) nesnedir.

  • Peki <head> …. </head> etiket bloğuna yazma imkanımız yok muydu?

Var elbette. Ancak bunun için Javascript kodlarımızda küçük bir değişiklik yapmamız gerekiyor. JS dosyasımızın içeriğini şu şekle getirelim:

// Sayfa yüklendiğinde, yürütüldüğünde çalıştırılacak fonksiyon tanımlayalım
window.onload = function(){
	document.getElementById('test_alani').innerHTML = "Bu okuduğunuz yazı Javascript tarafından oluşturulmuş ve 'test_alani' kimlikli paragrafa girilmiştir.";
}

HTML sayfamızı da aşağıdaki şekilde düzenleyip script’imizi head etiket bloğuna taşıyalım:

<!DOCTYPE html>
<html>
<head>
<title>Javascript #1</title>
<script language="javascript" src="js/jskodu.js">
</script>
</head>
<body>

<h1>JS tarafından sayfaya müdahale</h1>
<p id="test_alani"></p>
 

</body>
</html>

Site başlığımızı içeren <title> etiketimizin hemen altına alındı script kod bloğumuz. Peki ilk yaptığımız ile sonuncusu arasındaki fark ne?
Birinci şekilde “sayfa yüklenme sırasına göre test_alani kimlikli elemanı bul” eylemi gerçekleştirdik.
İkincisinde ise peşin olarak dedik ki: “tüm pencere içeriğinin yüklenmesini bekledikten sonra (window.onload) Javascript kodunu devreye koy”

Aslında fonksiyon yazma işine daha sonra başlayacaktır fakat konular iç içe olduğundan yeri geliyor ve kullanmak durumunda kalıyoruz.
Buraya kadar dışarıdan çağırmıştık JS dosyamızı. Şimdi ikinci yönteme geçelim.

2- Kodları <script> …. </script> kod bloğunda ve doküman içerisinde yazarak Javascript kullanımı:

Yukarıdaki çalışmamızı aşağıdaki şekilde düzenleyelim:

<!DOCTYPE html>
<html>
<head>
<title>Javascript #1</title>
<script language="javascript">
window.onload = function(){
	document.getElementById('test_alani').innerHTML = "Bu okuduğunuz yazı Javascript tarafından oluşturulmuş ve 'test_alani' kimlikli paragrafa girilmiştir.";
}
</script>
</head>
<body>

<h1>JS tarafından sayfaya müdahale</h1>
<p id="test_alani"></p>
 

</body>
</html>

Başlık (title) etiketimizin hemen altında script kod bloklarını kullanarak sayfamızın içerisine yazdık JS kodlarını. Dışarıdan başka bir .js dosyası çağırmaya gerek kalmadı.

Ne farkı var? : Bu şekilde doküman içi kod blokları olarak Javascript kodlarını yazmak karmaşaya sebep olur. Bu yüzden dışarıdan dosya çağırmayı alışkanlık haline getirmekte fayda var.

3- Kodları satır içi yazıp attribute (özellik) olarak Javascript kullanımı:

Bu konu biraz daha karmaşık. Fakat bu yöntem de kimi zaman gerekli olabilmekte. Önce direkt HTML sayfamızı değiştirelim:

<!DOCTYPE html>
<html>
<head>
<title>Javascript #1</title>
 
</head>
<body onload="javascript:document.getElementById('test_alani').innerHTML = 'Bu okuduğunuz yazı Javascript tarafından oluşturulmuş ve \'test_alani\' kimlikli paragrafa girilmiştir.';">

<h1>JS tarafından sayfaya müdahale</h1>
<p id="test_alani"></p>
 

</body>
</html>

Şimdi neler olmuş inceleyelebiliriz.
Baştan dediğim gibi bu durum biraz daha karmaşık ve attribute (özellik/nitelik) bilgisi gerektirmekte. Temel etiket bloklarımızdan olan <body> etiketinin onload özelliği vardır. Bu özellik ya da nitelik dokümanın gövdesi (body) yüklendiği zaman devreye girecek olan fonksiyonları, işlevleri belirtmemizi sağlar. Onload içerisine yazdığımız kodun javascript: ile başlaması, biraz sonra yazacaklarımızın Javascript’i ilgilendirdiğini belirtmemize yarar. Kodun geri kalan kısmını yukarıda açıklamıştık. Sadece farklı olan tek nokta var: Backslash (ters eğik çizgi \ kaçış karakteri) …

Programlamada tırnak işaretleri sıkça kullanılır. Bazı durumlarda ise tırnak içerisinde yazdığımız, programa ait değerin (string) içerisinde de tırnak kullanmamız gerekmektedir. Aşağıdaki şekilde yazılmış bir Javascript kodu hata verecektir:

// bir değişken (variable) tanımlayalım
var degiskenimiz = "Burada yazılan kod "Javascript" konusunu kapsamaktadır.";

Kodların renklendirilmesine de dikkat ettiğinizde fark edeceksiniz ki; tırnakların kullanımından kaynaklanan hata sebebiyle kod erken sonlanmış ve tanımsız nesneler var olmuştur. Çift tırnak içinde tanımlanan bir string (değer) içerisinde de çift tırnak kullanılırsa ve ters bölü işareti olarak da adlandırılan backslash karakteri kullanılmaz ise bu tür hatalar karşılaşmak olağandır. Backslash karakterleri kaçış yapılacak olan tırnak karakterinin önüne / öncesine yazılmalıdır.

Şimdi de birkaç doğru tırnak kullanım örneği yapalım:

var a,b,c,d; // Kullanacağımız değer adlarını oluşturduk. Şimdi onlara değer atayalım:

a = 'Tırnak içerisinde tırnak kullanmak konusunda \'dikkat isteyen bir husustur\' denmektedir.';

b = "Çift tırnak içerisinde yine çift tırnak kulanabilmek için de \"backslash\" karakteri ile kaçış uygulamak gerekmektedir.";

c = 'Tek tırnakla tanımlanan bir değer içerisinde "çift tırnak" kullanımının bir zararı olmadığı gibi ... ';

d = "Çift tırnakla tanımlanan bir değer içerisinde de 'tek tırnak' kullanmak sorun teşkil etmez. 'Backslash' karakteri AYNI TİP tırnaklar iç içe geçecek ise gerekli olmaktadır.";

Sanıyorum tırnakların iç içe kullanımı da bu şekilde anlaşılır olmuştur.
Sorunuz var ise bu sayfa altından yorum bırakabilirsiniz.