elementlerin içeriklerini ve durumlarını belirler. Örneğin, Giriş tasarladığımız bir formun yalnızca kullanıcının sunulan
JavaScript (JS) günümüz internet teknolojisinin temel sözleşmeyi kabul etmesi durumunda gönderilmesini taşlarından biridir (Kitabın sayfa 83 Resim 4.1). HTML ve sağlayabiliriz. CSS ile içerik üretim ve yönetim işlevlerini yerine getirmektedir. Günümüz modern internet tarayıcılarının Sayfalara Element Eklemek ve Silmek
(Ör: Google Chrome, Microsoft Edge) çoğu herhangi bir JS kullanarak sayfalara yeni elementler ekleyebilir ya da eklentiye gerek duymadan JS desteği sunmaktadır. Modern silebiliriz. Örneğin, sayfanızdaki bir listeyi kullanıcının internet teknolojileri düşünüldüğünde JS, HTML ve CSS dolduracağı bir formdan alacağımız verilerle doldurabiliriz. ile sıkı bir etkileşim içindedir. Bir internet sayfasının içeriği Aynı şekilde bu listedeki bir elementin tıklanması halinde HTML tarafından yapılandırılır. CSS bu yapının listeden silinmesini sağlayabiliriz. görünümünü düzenlemekle görevli bileşendir. JS ise Bir Elementin Görünümünü Değiştirmek sayfanın programlanmasını sağlayan mantıksal bileşendir. JS kullanılarak kullanıcıdan alınan veriler işlenerek JS sayfadaki bir elementin CSS stillerini değiştirebilir. sayfanın tepki vermesi sağlanabilir. JS bir betik (script) Örneğin, sitemizin okunmasını kolaylaştırmak için gece ve dilidir. Betikler kendilerini yorumlayan ikincil araçlar gündüz saatlerinde iki renk temasıyla sunmak istediğinizi üzerinde çalıştırılır. Örneğin sunucu tabanlı çalışan PHP düşünelim. Bu amaçla sitemize gece/gündüz temaları dilinin betikleri PHP yorumlayıcı ile çalıştırılır. Benzer arasında geçiş yapmak için bir düğme ekleyebiliriz.
şekilde Flash teknolojisinin programlama dili olan Kullanıcıdan Onay Almak Actionscript, Flash Player üzerinde çalıştırılır. JS diyalog kutularını kullanarak kullanıcıdan işlem onayı JS, Netscape Navigator isimli internet tarayıcısının üreticisi alabilir. Örneğin sayfamızdaki bir formdaki “Satın al” Netscape firması tarafından üretilmiştir. Başlarda Mocha düğmesine tıklandığında kullanıcıya onaylama ya da ve Livescript adlarıyla anılan proje, 1995 yılının sonunda vazgeçme şansı sunabiliriz. Netscape Navigator 2.0 beta sürümü ile JavaScript adı Zamanlanmış Görev Kullanmak altında piyasaya sürülmüştür. Java diline çok yakın olan bu isimlendirme programlama dünyasında bir karmaşaya JS zamanlayıcı (Timer) nesnesini kullanarak zamanlanmış neden olmuştur. İsimleri ve programlama yapıları benzerlik görev oluşturabilir ya da bir olayın aralıklarla göstermesine rağmen, JS ve Java farklı dillerdir. Java tekrarlanmasını sağlayabilir.
uygulamaları Java Sanal Makineleri (Java Virtual Machine) JavaScript Nereye Yazılır? üzerinde çeşitli platformlarda çalışabilir. JS kodlarıysa JS kodları HTML dokümanlarında head ya da body genellikle tarayıcılar (ör: Chrome, Safari, Edge) tarafından bölümlerine yazılabilir. HTML bir işaretleme dili işletilir. olduğundan, metin halindeki JS kodlarının da işaretlenmesi JavaScript’in İşlevleri gerekmektedir. Aksi halde yazılan kodlar programlama JS dilinin iki temel işlevi bulunmaktadır: internet kodu olarak yorumlanmak yerine sayfada gösterilecektir. sayfalarını düzenlemek ve tarayıcıları yönetmek. JS, Bu amaçla JS kodları script etiketleri arasına yerleştirilir. HTML DOM (Document Object Model – Doküman Nesne HTML dilinin eski versiyonlarında script etiketlerinin type Modeli) modelini kullanarak internet sayfalarının niteliği kullanılmaktaydı. Bu versiyonlarda script etiketleri içeriklerine erişebilir. HTML DOM yapısı W3C (World <script type=”text/js”> şeklinde açılmaktaydı. Günümüzde Wide Web Consortium – Dünya İnternet Konsorsiyumu) HTML’nin varsayılan programlama dili JS olduğundan tanımlanmış standart bir modeldir. Sayfa yüklendiğinde type niteliğini kullanmaya gerek yoktur. Fonksiyonlar tarayıcı otomatik olarak sayfanın DOM modelini oluşturur. çağırıldığında çalışan JS kodu bloklarıdır. Fonksiyonlar JS bu modele ulaşarak sayfadaki: elementleri, elementlerin sayfadaki olaylara bağlanarak çalıştırılabilirler.
niteliklerini ve CSS stillerini değiştirebilir, sayfaya yeni JS kodlarını sayfa dışında tutmanın pek çok avantajı vardır. elementler ekleyebilir, sayfadan element silebilir ve Öncelikle bu yaklaşım yazılan JS kodlarının birden fazla sayfadaki elementlerin tetiklediği tüm olaylara tepki sayfada kullanılabilmesine olanak verir. verebilir. Yazım Kuralları (Sentaks) Bir HTML Elementinin İçeriğini Değiştirmek JavaScript internet sayfalarını programlamak için JS sayfadaki bir elementin içeriğini düzenleyebilir. Web kullanılır. Programlar, art arda işletilmesi gereken sayfamızda bir satın alma formu oluğunu düşünelim. Bu yönergeler (statement) halinde yazılır. Günlük yazım formun sonundaki bir paragraf elementinin içeriğini işlerimizde cümlelerimizi ayırdığımız gibi, programlama kullanıcının satın alma formundaki seçimlerine göre dilleri yönergelerini de birbirinden ayırmamız gerekir. JS değiştirebiliriz. dilinde yönergeler noktalı virgül kullanılarak ayrılır.
Bir Elementin Niteliklerini Değiştirmek
HTML elementleri kendilerine tanımlı nitelikler ile gelir. Bu nitelikler elementlerin açılış etiketlerine yazılarak
Değerler düşünelim. Bunu gerçekleştirmek için hedeflediğiniz JS değerleri sayısal ya da metin şeklinde olabilir. Sayısal paragraf elementini bulmanız gerekmektedir. Elementler, değerler doğrudan sayılar halinde yazılabilir. JS dilinde sayfadaki DOM’u belirten document nesnesinin sağladığı ondalık işareti “.” noktadır. metotlarla bulunabilir. document nesnesi elementleri bulmak için üç adet metot sağlar. Bunlar; JS tırnaklar içine yazılmış tüm değerlere metin olarak document.getElementById,,document.getElementsByClas yaklaşmaktadır. Bu nedenle “11.1” ifadesi JS için bir sName ve document.getElementsByTagName metotlardır. metindir. Bu ifade üzerinde toplama ya da çarpma gibi bir sayısal işlem gerçekleştirilemez. Tırnaklar içine document.getElementById()
almadığınız metinler yazım hatalarına (Syntax Error) yol id, HTML etiketlerinin en önemli niteliklerinden biridir. açar. JS bu değerlerin değişken ismi ya da tanımlı bir Her HTML elementi kendine atanmış bir id niteliğine sahip anahtar sözcük olmadığını belirten hata mesajları olabilir. Sayfalar oluşturulurken id niteliklerinin gösterecektir. çakışmaması sağlanırsa elementler bu nitelikleri yoluyla kolaylıkla bulunabilir. Değişkenler Programlama dillerinin en temel yapılarından biri DOM metotlarının elementlere ulaşabilmesi için bu değişkenlerdir. Değişkenler, programın çalıştırılması elementlerin oluşturulmuş olması gerekmektedir.
sırasında farklı değerleri bilgisayar hafızasında tutabilmek document.getElementsByTagName() için kullanılır. JS değişkenleri var anahtar sözcüğü ile Bu fonksiyon verilen etiket adıyla işaretlenmiş bir tanımlanır. Değişkenlerin içine değer göndermek için eşittir elementler kümesi çevirir. Bu metot kullanılırken dikkat “=” işleci kullanılır. edilmesi gereken en önemli nokta bir element değil, İşleçler elementler kümesi çevirmesidir. Bulunan paragraflar, JS dilinde değerler ve değişkenler arasındaki işlemler değişken içinde bir dizi halinde tutulmaktadır. Pek çok işleçler yoluyla gerçekleştirilir. JS işleçleri aritmetik programlama dilinde olduğu gibi, JS dizi indisleri de sıfır işleçler, atama işleçleri, metin işleci ve kıyaslama ve ile başlamaktadır.
mantıksal işleçler şeklinde sınıflanabilir. document.getElementsByClassName()
JS yönergelerdeki boşlukları görmezden gelir. Kodlarınızı Class nitelikleri işaretlenerek HTML elementlerinden daha okunur kılmak için boşluk karakterleri kümeler oluşturulabilir. Sayfa üzerinde aynı sınıflı tüm kullanabilirsiniz. İşleçlerin önlerine ve arkasına boşluk elementleri bulmak için getElementsByClassName metodu bırakmanız önerilen bir programlama yaklaşımıdır. kullanılır. Bu metot da bir elementler dizisi çevirmektedir.
Kıyaslama İşleçleri ve Mantıksal İşleçler Çıktı Mekanizmaları
Mantıksal işleçler verilen ifadenin doğruluğunu sınar JavaScript kodlarının sonuçları kullanıcıya beş farklı çıktı (Kitabımızın sayfa 97 de Tablo 4.4 verilmiştir). Bu mekanizmasıyla yansıtılabilir. Bunların üçü HTML DOM ifadelerin sonuçları true (doğru) ya da false (yanlış) olur. üzerinde çalışırken, ikisi tarayıcının (BOM) iletişim Kıyaslama ve mantıksal işleçler genellikle karar yapıları ile özelliklerini kullanır. kullanılır. Mantıksal işleçler kıyaslama ifadelerinin sonuçları üzerinde işlem yapmak için kullanılır. JS dili üç innerHTML
mantıksal işleç sağlamaktadır (Kitabımızın sayfa 97 de innerHTML özelliği bir HTML elementinin içeriğini Tablo 4.5 verilmiştir). Mantıksal işleçler kıyaslama düzenlemek için kullanılır. innerHTML bir özellik ifadelerinin bağlanması için kullanılabilir. oluğundan, bir fonksiyon gibi parantezler ile çağırılmaz. Bunun yerine bir atama işlemi gibi çalıştırılır. nnerHTML İfadeler değerler, değişkenler ve işleçlerin birlikte özelliği sadece elementin metin içeriğini değil, içinde kullanılmasıyla oluşturulur. Bu birleşimin sonucu her bulunabilecek diğer elementleri de değiştirir. Bu özellik zaman bir değer olur. Bu işleme ifadenin yorumlanması table, ul, ol gibi içerik tutucu elementlerle kullanılırken denir. JS dilinde anahtar sözcükler gerçekleştirilecek dikkatli olunmalıdır. eylemleri belirtir. Örneğin var anahtar sözcüğü tarayıcıya yeni bir değişken yaratmasını söyler. Yazılan bir programla document.write() ilgili not almak programcıların sıklıkla kullandığı bir HTML sayfasına içerik eklemek için document.write() yöntemdir. Bu amaçla program kodu içinde yorum satırları metodu kullanılabilir. Kullanışlı bir araç gibi görülmesine kullanılır. rağmen, sadece geliştirme ve sınama amaçlarıyla kullanılması önerilmektedir. Bu metot, HTML kodu da Dom Nesnelerine Erişmek dahil olmak üzere sayfaya herhangi bir içeriği eklemeye JS dilinin en önemli işlevlerinden biri sayfadaki elementler izin verir. DOM yüklendikten sonra document.write üzerinde işlem yapmaktır. Bu işlemi yapabilmek için JS metodunun kullanımı innerHTML kullanımına benzer bir kodunun sayfadaki DOM elementine erişmesi sonuç verir. Örneğin bir düğmenin tıklanmasıyla tetiklenen gerekmektedir. Sayfamızda 10 adet paragraf oluğunu ve fonksiyonlarda kullanılması halinde sayfa içeriği bunlardan birinin içeriğini değiştirmek istediğinizi sıfırlanarak verilen içerik sayfaya yazılacaktır.
WTK290U-İNTERNET TABANLI PROGRAMLAMA
Ünite 4: JavaScript
appendChild()
appendChild metodu bir HTML elementine yeni bir çocuk element ekler. DOM mimarisinde bir elementin içine eklenen yeni elementler çocuk element olarak ele alınır.
console.log()
Tarayıcılar sayfalardaki hataları ve uyarıları bildirmek üzere konsol (console) adlı bir araç içermektedir. Bu araç pek çok tarayıcının Görünüm menüsü kullanılarak açılabilir. JS kodlarında hata bulunması halinde bu hataya ilişkin bilgiler konsolda listelenir. Bunun yanında, programcılar console.log() metodunu kullanarak konsol çıktısı üretebilir.
window.alert()
window.alert() metodu kullanıcıya uyarı kutusu göstermek için kullanılır. Bu metot kullanıcıdan veri almayıp, sadece bilgilendirme amacı ile kullanılmaktadır.
window.confirm()
window.confirm() metodu kullanıcıya diyalog kutuları göstermek için kullanılır. Bu metot kullanıldığında kullanıcının tamam ya da İptal diyebileceği bir onay kutusu gösterilmektedir. Bu kutu üzerinde gösterilen mesajların dili, işletim sisteminden otomatik olarak çekilir. Bu nedenle düğmeler üzerinde yazan metinler değiştirilemez.
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.
Bir betik dili olan JS, üst düzey programlama dillerine oranla çok daha küçük bir veri tipi kümesi kullanır. JS programlarında beş farklı veri tipi kullanılır (kitabımızın 105 sayfasın da Tablo 4.6 verilmiştir). C# gibi dillerden farklı olarak JS değişkenlerinin ön tanımlı bir veri tipi yoktur. JS değişkenleri dinamik olduğundan, kendilerine atanan değere göre farklı veri tiplerinde olabilirler. Bununla birlikte, değişkende tutulan veri tipi, değişken üzerinde kullanılabilecek metotları belirler.
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. 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. 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 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. 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ı
JS programları art arda verilen yönergelerin yorumlanması yoluyla işletilir. Fakat gerçek yaşamda pek az program bu doğrusal işleyişle yönetilebilir. Kullanıcınızın seçtiği bir radyo düğmesi, kullanıcı sözleşmesini kabul edip etmemesi, sitenizin ziyaret edilme saati gibi pek çok duruma bağlı olarak program akışının yönlendirilmesi gerekir. 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.
İf
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. Mantıksal ifadeden true (doğru) sonucunun çıkması durumunda çalıştırılacak kodlar if ifadesinin hemen arkasında küme parantezleri ( { … } ) 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. else anahtarının arkasında yeni bir if bloğu yazılabilir. Bu sayede ilk şartın sağlanmaması durumunda yeni bir şart kontrol edilerek program dallanması sağlanabilir.
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ünler 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 düğmeye tıklanması, klavyeden bir tuşa basılması, sayfanın while döngüsü verilen şart ifadesi sağlandığı (true sonuç içeriğinin yüklenmesi gibi durumlar elementlerin verdiği) sürece bir kod bloğunu işletir. while döngülerinde tetiklediği olaylar tarafından JS’ye bildirilir. JS bu olaylara kontrol değişkenine döngü içinde müdahale edilmelidir. tepki verecek şekilde programlanabilir. Bu amaçla Aksi halde döngünün işletilmesi sonlanmayabilir. Bu tür elementlerin sağladığı olaylara JS fonksiyonları bağlanır. döngülere sonsuz döngü denir. Sonsuz döngüler Elementlerin olaylarına doğrudan JS kodu da yazılabilir. tarayıcıların tepkisiz kalmasına neden olabilir. Fakat yazılacak kodlar genellikle birkaç satır süreceğinden fonksiyonların kullanılması daha uygun olacaktır. do/while Tarih Nesnesi 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 JS dilinde tarih işlemlerini gerçekleştirmek için date ardından küme parantezleri ( { … } ) içinde işletilecek kod nesnesi kullanılır. date nesnesi oluşturmak için new anahtar bloğu yazılır. Kod bloğunun arkasında döngünün sözcüğü kullanılır. Bunun ardından nesnenin metotları işletilmesini kontrol eden while ifadesi yazılır. do/while kullanılarak, tarih nesnesinden istenen bilgiler çekilebilir. döngüsünün, while döngüsünden tek farkı, verilen şart date nesnesi parametre verilmeden oluşturulduğunda, sağlanmıyor olsa bile döngünün en az bir kez dönmesidir. kullanıcı bilgisayarının sistem saatinden yararlanılarak güncel tarih bilgisi oluşturur. date nesnesi belirli bir zaman For noktası verilerek de oluşturulabilir,
İşlev bakımından for ve while döngüleri arasında fark Zamanlanmış Görevler 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. JS kodları belirli bir zamanda çalışmak üzere ayarlanabilir. while döngülerinde kontrol bloğunda sadece şart ifadesi yer Bu işleme zamanlanmış görev denmektedir. JS iki tür alırken; for döngülerinin kontrol bloğunda, tanımlama zamanlanmış görev desteklemektedir. İlk zamanlanmış ifadesi, şart ifadesi ve işlem ifadesi yer alabilir. görev verilen kodları bir zaman aralığından sonra (ör: 10sn) işletir. Bu amaçla setTimeout fonksiyonu kullanılır. Bu Fonksiyonlar fonksiyona parametre olarak işletilecek kodları içeren bir Fonksiyonlar belirli bir görevi yerine getirmek için fonksiyon ve milisaniye cinsinden bekleme süresi verilir. hazırlanmış kod bloklarıdır. Fonksiyonlar yalnızca Zamanlanmış görevin kontrol edilebilmesi için bu görev çağırıldıklarında işletilir. JS fonksiyonları iki yolla oluşturulurken bir değişkene aktarılabilir. Zamanlanmış çağırılabilir. İlk yol programcının fonksiyonu kod ile görevler için milisaniye birimi kullanılmaktadır. 1 saniye çağırmasıdır. İkinci yol ise fonksiyonun bir DOM 1000 milisaniyeye eşittir.
elementine bağlanmasıdır. Bu yollardan ilki bu başlıkta, Zamanlanmış görevin iptali için elearTimeout fonksiyonu ikincisi Olaylar başlığında detaylı olarak anlatılacaktır. kullanılır. Zamanlanmış görev oluşturan metodlar,
Programlama yapısı olarak metot ve fonksiyon aynı şeyleri görevleri oluşturduktan sonra kontrol referansları çevirir. ifade eder. Fonksiyonlar ve metotlar aynı yollarla Bu referanslar bir değişkenlere atanarak zamanlanmış oluşturulur ve çağırılırlar. Fonksiyonlar ve metotlar görevleri iptal etmek için kullanılabilir. Zamanlanmış parametre alabilir ve geriye değer döndürebilirler. görevleri iptal etmek için clearTimeout ve clearInterval Fonksiyon ve metot arasındaki tek fark metotların bir metodmarı kullanılır. clearTimeout fonksiyonu setTimeout nesneye bağlı olmasıdır. Fonksiyonlar yazılan kodlar içinde ile oluşturulan zamanlanmış görevleri iptal ederken, tek başlarına çalışabilirler. Burada kullandığımız alert clearInterval metodu setInterval ile oluşturulmuş görevleri metodu, diğer BOM metotları gibi JS dilinin window iptal eder. Görevler oluşturulurken kullanılan değişkenler nesnesine bağlı olarak çalışmaktadır. Bu nedenle bu metotlara parametre olarak gönderilerek görevlerin isimlendirme farklılaşsa bile kullanım yöntemlerinde bir iptali sağlanabilir.
fark yoktur.
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. Fonksiyonlar içinde tanımlanan yerel değişkenlere fonksiyon dışında erişilemez.
Olaylar
HTML elementleri üzerlerinde bir işlem gerçekleştiğinde bunu bildirmek için olaylar tetiklerler. Örneğin bir