Ünite 4: JavaScript

Giriş

JavaScript (JS) günümüz internet teknolojisinin temel taşlarından biridir. HTML ve CSS ile birlikte içerik üretim ve yönetim işlevlerini yerine getirmektedir. Günümüz modern internet tarayıcılarının (Ör: Google Chrome, Microsoft Edge) çoğu herhangi bir eklentiye gerek duymadan JS desteği sunmaktadır. Çoğunlukla internet sayfalarında kullanılmakla birlikte, JS dili masaüstü eklentileri (Ör: hesap makinesi, takvim araçları), PDF dokümanları ve sunucu taraflı uygulamalarda da çalıştırılabilir. JS bir betik (script) dilidir. Betikler kendilerini yorumlayan ikincil araçlar üzerinde çalıştırılır. Örneğin sunucu tabanlı çalışan PHP dilinin betikleri PHP yorumlayıcı ile çalıştırılır. Benzer şekilde Flash teknolojisinin programlama dili olan Actionscript, Flash Player üzerinde çalıştırılır. C, Visual Basic gibi programlama dillerinin ürünleri ise kendi başlarına çalışabilecek şekilde derlenir. Bu derleme işlemleri sonucunda oluşturulan programlar (Ör: Windows ortamında EXE uzantılı dosyalar) işletim sistemi tarafından doğrudan çalıştırılırlar.

Javascript’in İşlevleri

JS dilinin iki temel işlevi bulunmaktadır: internet sayfalarını düzenlemek ve tarayıcıları yönetmek.

Bir HTML Elementinin İçeriğini Değiştirmek

JS sayfadaki bir elementin içeriğini düzenleyebilir. Web sayfamızda bir satın alma formu oluğunu düşünelim. Bu formun sonundaki bir paragraf elementinin içeriğini kullanıcının satın alma formundaki seçimlerine göre değiştirebiliriz. Örneğin 200TL fiyatlı bir ürün için, kullanıcının gireceği adet bilgisine göre toplam bakiyeyi hesaplayarak sayfaya yazabiliriz. Bu örnekte JS metin kutusunun değişim olayına tepki vererek, sayfadaki bir elementin içeriğini düzenlemektedir.

Bir Elementin Niteliklerini Değiştirmek

HTML elementleri kendilerine tanımlı nitelikler ile birlikte gelir. Bu nitelikler elementlerin açılış etiketlerine yazılarak elementlerin içeriklerini ve durumlarını belirler. Örneğin, tasarladığımız bir formun yalnızca kullanıcının sunulan sözleşmeyi kabul etmesi durumunda gönderilmesini sağlayabiliriz. Bu amaçla formu gönderen düğmenin aktif olup olmama durumunu niteliklerini değiştirerek düzenleyebiliriz. Düğmeleri oluşturabilen input elementinin aktifliği disabled niteliği ile ayarlanır. disabled niteliği true olan elementlerin etkileşimi kapatılır. JS ile kullanıcının sözleşmeyi okuduğunu beyan ettiği onay kutusunu dinleyerek, bu kutunun değişimine göre Gönder düğmesinin aktifliğini düzenleyebiliriz.

Sayfalara Element Eklemek ve Silmek

JS kullanarak sayfalara yeni elementler ekleyebilir ya da silebiliriz. Örneğin, sayfadaki bir listeyi kullanıcının dolduracağı bir formdan alacağımız verilerle doldurabiliriz. Aynı şekilde bu listedeki bir elementin tıklanması halinde listeden silinmesini sağlayabiliriz.

Bir Elementin Görünümünü Değiştirmek

JS sayfadaki bir elementin CSS stillerini değiştirebilir. Örneğin, sitemizin okunmasını kolaylaştırmak için gece ve gündüz saatlerinde iki renk temasıyla sunmak istediğinizi düşünelim. Gece saatlerinde çok parlak ekranlar gözleri yoracağından koyu bir artalan üzerinde parlak yazılar; gündüz saatlerinde de tam tersi bir tema kullanalım. Bu amaçla sitemize gece/gündüz temaları arasında geçiş yapmak için bir düğme ekleyebiliriz. Hatta JS düğmeler yerine, bilgisayarın sistem saatini kontrol ederek bu geçişleri otomatik olarak da gerçekleştirebilir.

Kullanıcıdan Onay Almak

JS diyalog kutularını kullanarak kullanıcıdan işlem onayı alabilir. Örneğin sayfamızdaki bir formdaki “Satın al” düğmesine tıklandığında kullanıcıya onaylama ya da vazgeçme şansı sunabiliriz. Kullanıcının onay vermesi halinde satın alma işlemleri için gerekli rutinleri işletebilir, aksi halde formu sıfırlayabiliriz.

Zamanlanmış Görev Kullanmak

JS zamanlayıcı (Timer) nesnesini kullanarak zamanlanmış görev oluşturabilir ya da bir olayın aralıklarla tekrarlanmasını sağlayabilir. Örneğin bir sınav uygulaması oluşturduğumuzu düşünelim. Bu uygulamada her sorunun yanıtlanması için kullanıcıya 30 saniye verilsin. 30 saniye sonunda kullanıcının soruyu yanıtlamasını engellemek için zamanlanmış görevleri kullanabiliriz. Saniyede bir kere çalışacak zamanlanmış görev ile sayfadaki bir sayaç güncellenerek, zamanın bitişinde formu gönderecek olan düğmenin etkileşimi kaldırılabilir.

Yazım Kuralları

JavaScript internet sayfalarını programlamak için kullanılır. Programlar, art arda işletilmesi gereken yönergeler (statement) halinde yazılır. Günlük yazım işlerimizde cümlelerimizi ayırdığımız gibi, programlama dilleri yönergelerini de birbirinden ayırmamız gerekir. JS dilinde yönergeler noktalı virgül kullanılarak ayrılır.

Değerler

JS değerleri sayısal ya da metin şeklinde olabilir. Sayısal değerler doğrudan sayılar halinde yazılabilir. JS dilinde ondalık işareti “.” noktadır. Metinler ise tırnaklar içinde yazılır. Metinleri belirtmek için tek tırnak (‘metin’) ya da çift (“metin”) tırnak çiftleri kullanılır.

Değişkenler

Programlama dillerinin en temel yapılarından biri değişkenlerdir. Değişkenler, programın çalıştırılması sırasında farklı değerleri bilgisayar hafızasında tutabilmek için kullanılır. JS değişkenleri var anahtar sözcüğü ile tanımlanır. Değişkenlerin içine değer göndermek için eşittir “=” işleci kullanılır. JS kullanırken oluşturacağınız değişkenler ve fonksiyonların isimlendirilmesi konusunda uymanız gereken kurallar bulunmaktadır. Bu kurallara uymamanız durumunda JS hata verecektir. Bu kurallar aşağıda sıralanmıştır.

• Değişken isimlerinde boşluk kullanılamaz.
• Değişken isimlerinde Türkçe karakterler (ü,ğ,i,ş,ç,ö) kullanılamaz.
• Değişken isimlerinde büyük ve küçük harfler kullanılabilir [A-Z, a-z].
• Değişken isimlerinde, ilk karakter olmamak şartıyla sayılar kullanılabilir [0-9].
• Değişken isimlerinde alt tire “_” ve “$” dolar işareti kullanılabilir. _ ve $ işaretlerinin ilk ve son karakter olarak kullanılması önerilmez.
• Değişken isimleri JS rezerve sözcüklerinden (for, var, function vb.) biri olamaz.
• İsimlendirmeler büyük küçük harf duyarlıdır. (sayi ve Sayi ayrı değişkenlerdir).

İşleçler

JS dilinde değerler ve değişkenler arasındaki işlemler işleçler yoluyla gerçekleştirilir. JS işleçleri aritmetik işleçler, atama işleçleri, metin işleci ve kıyaslama ve mantıksal işleçler şeklinde sınıflanabilir.

Aritmetik İşleçler : Değerler arasında işlem yapmak için aritmetik işleçler kullanılabilir. Örneğin; + verilen değerleri toplar, * verilen değerleri çarpar, % ikinci değere göre ilk değerin modunu alır.

Atama İşleçleri: Atama işleçleri değişkenlere veri göndermek için kullanılır. Bu işleçlerin kullanılabilmesi için ifadenin sol tarafında bir değişken bulunması gerekir.

Metin İşleci: + işleci metinlerin birleştirilmesi için de kullanılır. Arasına + işleci konan metinler birleştirilir.

Kıyaslama İşleçleri ve Mantıksal İşleçler

Mantıksal işleçler verilen ifadenin doğruluğunu sınar. Bu ifadelerin sonuçları true (doğru) ya da false (yanlış) olur. Kıyaslama ve mantıksal işleçler genellikle karar yapıları ile birlikte kullanılır. Örneğin; <= işleci küçük ya da eşittir anlamındadır. 2<=3 işlemi true sonucunu verecektir.

Dom Nesnelerine Erişmek

JS dilinin en önemli işlevlerinden biri sayfadaki elementler üzerinde işlem yapmaktır. Bu işlemi yapabilmek için JS kodunun sayfadaki DOM elementine erişmesi gerekmektedir. Sayfamızda 10 adet paragraf oluğunu ve bunlardan birinin içeriğini değiştirmek istediğinizi düşünelim. Bunu gerçekleştirmek için hedeflediğiniz paragraf elementini bulmanız gerekmektedir. Elementler, sayfadaki DOM’u belirten document nesnesinin sağladığı metotlarla bulunabilir. document nesnesi elementleri bulmak için üç adet metot sağlar. Bunlar; document.getElementById,document.getElementsByClass Name ve document.getElementsByTagName metotlardır.

Çıktı Mekanizmaları

JavaScript kodlarının sonuçları kullanıcıya beş farklı çıktı mekanizmasıyla yansıtılabilir. Bunların üçü HTML DOM üzerinde çalışırken, ikisi tarayıcının (BOM) iletişim özelliklerini kullanır.

Veri Tipleri

Programlama dilleri değişkenler içinde farklı tiplerde veri saklayabilir. C# gibi üst düzey programlama dillerinde uygulama performansını arttırmak ve hata ayıklamayı desteklemek gibi amaçlarla pek çok veri tipi kullanılır. Bu tür dillerde sadece sayısal değerleri tutmak için bile birkaç tane veri tipi kullanılır. Örneğin, C# dilinde 0-255 arasındaki sayısal değerler için byte , ±32768 aralığındaki tam sayılar için short veri tipi kullanılır. Ondalıklı sayıları ve çok büyük sayıları tutmak içinse float , double , decimal gibi veri tipleri kullanılır.

String

String veri tipi karakter dizilerini tutabilir. Metin türündeki bu veriler “çift tırnak” ya da ‘tek tırnak’ çiftleri arasında ifade edilmelidir. Tırnaklar arasına alınmış “100” değerinin sayısal değil, metin olarak saklandığına dikkat ediniz.

Number

Number veri tipi sayısal değerleri tutmak için kullanılır. Number, tam sayılar, ondalıklı sayılar ve negatif sayıları tutmak için kullanılabilir. Bunun yanında çok büyük sayılar üstel ifadeler olarak yazılabilir. Örneğin 1e6 ifadesi 1x106 =1.000.000 değerine eşittir. Benzer şekilde 2e-3 ifadesi ise 0,002 (2x10-3) değerine eşittir.

Boolean

Boolean veri tipi mantıksal doğru ve yanlış ifadelerini tutmak için kullanılır. Mantıksal karşılaştırma (4>3) ve değişken içeriği sorgulama (isArray) gibi işlemlerin sonuçları Boolean değişkenlerde tutulur.

Array

Array veri tipi benzer nitelikteki ya da birbirleri ile ilişkili değerlerin tutulması için kullanılır. Array birden fazla değeri bir arada tutabildiğinden birleşik bir veri tipidir. Programlama alanında bu veri tipine dizi adı verilmektedir.

Object

JS dilindeki birleştirilmiş veri yapılarından bir diğeri nesnelerdir (Object). Dizilere benzemekle birlikte nesnelerdeki içerikler indislerle değil, isimlerle tanımlanır. Nesne tanımlamaları küme parantezleri arasında ( { … } ) yapılır. Nesnenin özellikleri virgüller ile birbirlerinden ayrılır. Nesne özelliği ve değeri ise iki nokta ( özellik : değer ) ile birbirinden ayrılır.

Koşul Yapıları

Program akışının yönlendirilmesi için koşul yapıları kullanılır. Koşul yapıları, yazılan şart ifadelerine göre işletilecek kod bloklarının yazılması için alan sağlar. JS diğer programlama dillerinde sıklıkla kullanılan if , else ve switch yapılarını kullanmaktadır.

if: if, kullanılabilecek en temel koşul yapısıdır. Bu yapı, bir şartın sağlanması durumunda işletilecek kod blokları yazılmasına izin verir. Şartlar mantıksal ifadeler (ör: a==b) şeklinde yazılır. Mantıksal ifadeler if sözcüğünden hemen sonra parantezler içine yazılır.

else: if yapısına ikinci bir blok bağlamak için else anahtar sözcüğü kullanılabilir. if yapısında verilen mantıksal ifadenin yanlış olması durumunda else bloğu çalıştırılır. else yazılırken mantıksal ifade verilmez. Bu nedenle else blokları her zaman bir if yapısının arkasında kullanılır. else blokları, yalnızca if yapısındaki şartın yanlış olması durumunda çalıştırılır. Bu şarta bağlı olmayan kodların yazılması için else bloğuna ihtiyaç yoktur.

switch: if/else yapısı bir şart ifadesinin doğru ya da yanlış olma durumuna göre çalışır. Bir değişken ile ilgili birden fazla duruma yanıt vermemiz gerektiğinde art arda if yapıları kullanmamız gerekebilir. Bu yapıların art arda kullanımını yönetmek zordur. Ayrıca, art arda aynı yapıları kullanmak kodlarınızda karmaşaya yol açabilir. Bunun yerine switch yapısını kullanarak bir değişkenin çeşitli durumlarında çalıştırılacak kod blokları yazabilirsiniz.

Döngüler

Döngüler verilen bir kod bloğunu bir şart sağlandığı sürece tekrar tekrar işletilmesini sağlayan programlama yapılarıdır. JS üç döngü yapısı sağlamaktadır. Temelde tüm döngü yapılarının görevi belirlenen şart sağlandığı sürece verilen kod bloklarını işletmektir. Sağlanan döngü yapılarının tek farkı şartın ifade ediliş biçimidir.

while: while döngüsü verilen şart ifadesi sağlandığı (true sonuç verdiği) sürece bir kod bloğunu işletir.

do/while: do/while döngüsü, while döngüsünün bir türevidir. do/while döngüleri do anahtar sözcüğüyle başlar. Bunun ardından küme parantezleri ( { … } ) içinde işletilecek kod bloğu yazılır. Kod bloğunun arkasında döngünün işletilmesini kontrol eden while ifadesi yazılır. do/while döngüsünün, while döngüsünden tek farkı, verilen şart sağlanmıyor olsa bile döngünün en az bir kez dönmesidir.

for: İşlev bakımından for ve while döngüleri arasında fark yoktur. for döngülerinin farkı, döngünün işletilmesi ile ilgili tüm işlemlerin kontrol bloğu içerisinde yapılmasıdır. while döngülerinde kontrol bloğunda sadece şart ifadesi yer alırken; for döngülerinin kontrol bloğunda, tanımlama ifadesi, şart ifadesi ve işlem ifadesi yer alabilir.

Fonksiyonlar

Fonksiyonlar belirli bir görevi yerine getirmek için hazırlanmış kod bloklarıdır. Fonksiyonlar yalnızca çağırıldıklarında işletilir. JS fonksiyonları iki yolla çağırılabilir. İlk yol programcının fonksiyonu kod ile çağırmasıdır. İkinci yol ise fonksiyonun bir DOM elementine bağlanmasıdır.

Değişkenlerin Etki Alanı

JS dilinde değişkenlerin erişilebilirliği etki alanları kavramı ile belirlenir. Bir değişken yerel ya da genel (global) etki alanında yer alabilir. Fonksiyonlar içinde tanımlanan değişkenler yerel, fonksiyonlar dışında tanımlanan değişkenler genel değişkenlerdir. Genel bir kural olarak bir değişkenin etki alanı tanımlandığı küme parantezlerinin arasıdır denebilir.

Olaylar

HTML elementleri üzerlerinde bir işlem gerçekleştiğinde bunu bildirmek için olaylar tetiklerler. Örneğin bir düğmeye tıklanması, klavyeden bir tuşa basılması, sayfanın içeriğinin yüklenmesi gibi durumlar elementlerin tetiklediği olaylar tarafından JS’ye bildirilir. JS bu olaylara tepki verecek şekilde programlanabilir. Bu amaçla elementlerin sağladığı olaylara JS fonksiyonları bağlanır.

Tarih Nesnesi

JS dilinde tarih işlemlerini gerçekleştirmek için date nesnesi kullanılır. date nesnesi oluşturmak için new anahtar sözcüğü kullanılır. Bunun ardından nesnenin metotları kullanılarak, tarih nesnesinden istenen bilgiler çekilebilir. Aşağıda verilen kodda, ikinci satırda bir date nesnesi oluşturularak tarih değişkenine atanmaktadır. Üçüncü satırda ise date nesnesinin getHours ve getMinutes metotları ile saat ve dakika bilgileri çekilmektedir. Bu bilgiler tarayıcı konsoluna mesaj olarak yazdırılmaktadır.

Zamanlanmış Görevler

JS kodları belirli bir zamanda çalışmak üzere ayarlanabilir. Bu işleme zamanlanmış görev denmektedir. JS iki tür zamanlanmış görev desteklemektedir. İlk zamanlanmış görev verilen kodları bir zaman aralığından sonra (ör: 10sn) işletir. Bu amaçla setTimeout fonksiyonu kullanılır. Bu fonksiyona parametre olarak işletilecek kodları içeren bir fonksiyon ve milisaniye cinsinden bekleme süresi verilir. Zamanlanmış görevin kontrol edilebilmesi için bu görev oluşturulurken bir değişkene aktarılabilir.