BİL205U-WEB ARAYÜZ PROGRAMLAMA
Ünite 5: JavaScript Temelleri
Giriş
Statik web sayfaları görsel olarak geliştirilebilse de kullanıcı ile etkileşime girecek yeteneğe sahip değildir. JavaScript ile statik web sayfaları yerine dinamik web sayfaları hazırlanabilir oldu. Kullanım kolaylığı, tarayıcılarda çalışabilmesi, HTML dosyaları ile mükemmel uyumu gibi nedenler ile web programlamada hızlıca popüler oldu. JavaScript, günümüzde web sayfaları için HTML ve CSS teknolojileri kadar temel gereksinimdir.
Javascript
Javascript, hem sunucu tarafında hem de istemci tarafında kullanılabilen dinamik programlama dilidir. Hafif ve hızlı olması genellikle web sayfalarında kullanılmasını kolaylaştırmıştır. HTML ve CSS ile hazırlanan statik web sayfalarını içerik güncellemesi veya kullanıcı işlemleri gibi özellikler kazandırarak dinamik web sayfalarına dönüştürmeye yarar. Java ile karıştırılan JavaScript yapı olarak birbirinden farklı dillerdir. Java derlenen(compile) bir dil olmasına rağmen JavaScript betik(script) bir dildir.
Derlenen programlama dilleri, derleme işleminden sonra işletim sistemine uygun bir çıktı üretirler. Örneğin Windows için .exe uzantılı bir çıktı üretirler.
HTML ve CSS bir programlama dili olmamasına rağmen JavaScript programlama dilidir. Diğer programlama dillerinde olduğu gibi döngüler, koşullar gibi özelliklere sahiptir. Günümüzde yaygın olarak kullanılan birçok web çatısının(React, Angular, Vue gibi) alt yapısı JavaScript ile hazırlanmıştır. Kullanımı oldukça yaygındır.
Javascript kullanmanın avantajlarından bazıları şunlardır;
• İstemci tarafı doğrulama: Kullanıcı girişi sunucuya gönderilmeden doğrulanabilir. Örneğin, eksik girilen parola karakteri gibi işlemler istemci tarafında kontrol edilebilir. Bu sayede sunucu yoğunluğu azaltılır. • HTML sayfa ile etkileşim: JavaScript HTML sayfalara doğrudan müdahale edebilir. Dosyaya öge ekleme, silme veya değiştirme gibi işlemler kolaylıkla yapılabilir. • Kullanıcı bildirimleri: Web sayfalarının kullanıcılarına farklı türde bildirimler vermek için kullanılabilir. Hazırlanan pop-up ile kullanıcılar bilgilendirilebilir. • Sunucudan veri yükleme: Web sayfasında yapılan işten bağımsız sunucudan veri yükleyebilir. • Sunucu uygulamaları: Javascript RunTime üzerine kurulu NodeJs ile hızlı ve ölçeklenebilir sunucu uygulamaları yazılabilir. • Mobil uygulamaları: Geliştiricilerin mobil uygulama geliştirebilecekleri React Native gibi çerçeveler bulunmaktadır.
Çalışma Ortamının Hazırlanması
JavaScript tarayıcılar üzerinde çalıştırılabilir. Bilgisayarda doğrudan çalıştırmak için ise NodeJs platformunu
kullanabilirsiniz. HTML dosyası ile birlikte yazdığımız JavaScript kodları veya HTML dosyasına dahil ettiğimiz JavaScript kodlarını içeren dosyalar, tarayıcılar tarafından doğrudan yorumlanabilir. JavaScript kodunu, tarayıcı konsoluna yazarakta çalıştırabiliriz. Kodu tarayıcıda çalıştırmak için Geliştirici Araçları’nda “Console” sekmesine geçerek, buraya yazmak yeterlidir. Chrome tarayıcı için F12 kısayolunu kullanarak Console sekmesine ulaşabilirsiniz. JavaScript kodlarını çalıştırmanın diğer yöntemide NodeJs kullanmaktır. Yazdığınız .js uzantılı kod dosyalarını tarayıcıda çalıştırmak yerine NodeJs platformunu bilgisayarınıza yükleyerek çalıştırabilirsiniz.
NodeJs’i bilgisayarınıza yüklemek için https://nodejs.org/ adresinden işletim sisteminize uygun sürümü indirebilir ve kurabilirsiniz. NodeJs’i kurduktan sonra VSC üzerinden kodlarımızı yazıp çalıştıracağız. JavaScript kodlarını yazacağımız klasörde Bölüm 1’de anlattığımız VCS kullanarak script.js isimli dosya oluşturup açalım. Dosya içerisine aşağıdaki kod bloğunu yazalım.
KOD:
console.log("Merhaba Dünya!")
Kod bloğundaki console.log() komutu, konsola göstermek istediğimiz mesajı yazdıran komuttur. VCS üzerinde bulunan terminali açmak için Terminal>Yeni Terminal menüsünü seçmeniz yeterli.
Söz Dizimi ve Yerleşimi
Yorumlar (Comments)
JavaScript ile yorum satırı ekleyebilmek için iki farklı yöntem vardır. İlki “//” işaretidir. Tarayıcılar “//” işaretinden sonra gelen karakterleri yorum olarak görür ve programa dahil etmez. Tek satır yorum yapmak için kullanılır. Birden fazla satır, yorum satırına dönüştürülebilir. Kod içerisinde “/*” ve “*/” işaretleri arasındaki satırlar, yorum satırı olarak görülür ve tarayıcılar tarafından koda dahil edilmez.
Boşluk ve Satır Sonları
JavaScript, kod içerisindeki boşluk, girdi ve yeni satırları yok sayar. Programlama yaparken kodunuzun okunabilir ve anlaşılabilir olması için boşluk girdi ve satırları kullanabilirsiniz. Burada bahsedilen boşluk kavramı satır içinde yazılan komutlar arasındaki boşluktur. Girdi kavramı ise satır başlarken bırakılan boşluğu tanımlar. Yeni satır ise herhangi bir kod içermeyen satırdan sonra oluşturulan yeni satırdır.
Noktalı Virgül Kullanımı
JavaScript kodlarını incelerken satır sonlarına eklenen noktalı virgül (;) işaretini görebilirsiniz. C, C++ gibi dillerde bu zorunlu olsada JavaScript kodlarında zorunlu değildir. Aynı satırda birden fazla komut yazacaksanız bunları ayırmak için noktalı virgül kullanmanız gerekir.
Büyük-Küçük Harf Duyarlılığı
JavaScript, büyük-küçük harf duyarlılığı olan bir dildir. Değişken, fonksiyon isimleri gibi adlandırmalarda harflerin yazılışları aynı olmalıdır. Örneğin, sayi ve Sayi farklı değişkenler olarak atanır.
HTML Dosya İle Kullanımı
HTML dosya içinde JavaScript çalıştırılırken kod <script>...</script> etiketleri arasına yazılır. <script> etiketleri ise body etiketinin kapanışından hemen önce yazılmalıdır.
Kısa JavaScript kodlarını yukarıdaki kod bloğunda olduğu gibi yazabiliyoruz. Ancak kod satırları uzadığında aynı dosya içinde hem HTML hem de JavaScript kodları olacağından geliştiricilerin takip etmesi zor olacaktır. Bu gibi durumlarda JavaScript kodlarını ayrı sayfaya hazırlayıp HTML dosyasına dahil edebiliriz.
Değişkenler
Değişkenler, bir bilgisayar programında referans alınacak ve işlenecek bilgileri depolamak için kullanılır. Ayrıca, verileri tanımlayıcı bir adla etiketlemeyi sağlarlar. Böylece yazılan kodlar geliştiriciler tarafından daha net anlaşılabilir. Değişkenleri bilgi içeren kaplar olarak düşünmek yararlıdır. Tek amaçları, verileri bellekte etiketlemek ve depolamaktır. Değişkenler bilgisayarların geçici belleğinde (RAM) saklanır ve program sonlandırıldığında yok olurlar. Diğer programlama dillerinde olduğu gibi JavaScript de değişken kullanımını destekler.
Değişken İsimlendirme Kuralları
JavaScript değişkenlerin harf, alt çizgi( _ ) ve dolar işareti($) işareti ile başlamasına izin verir. Sayı ile başlamasına izin vermez. İlk harften sonra sayı kullanılmasında bir sorun oluşturmaz. Örneğin 1sayi isimli değişkene izin verilmezken sayi1 ismi kabul edilir. Değişken isimlerinin içerisinde ise harf, sayı, alt çizgi ve dolar işareti bulunabilir. Bunların haricinde karakterlerin kullanımına izin verilmez.
Değişkenlerin Kapsamı
Programlama dillerinde değişkenlerin ulaşılabilir olduğu kod blokları değişkenin kapsamı olarak ifade edilir. Değişken yalnızca tanımlandığı kapsam içerisinde kullanılabilir.
Global Kapsam: Program içerisinde her yerden erişim sağlanabilen kapsam türüdür. Bu kapsamda tanımlanan değişkenler tüm sayfada kullanılabilir ve global değişken olarak adlandırılır. Global değişkenlere atanan değerler, program sonlandırılıncaya kadar saklanır. Programda çok fazla global değişken kullanılması bellek sorunlarına yol açacaktır. Bu yüzden gerekmediği durumlarda global değişken kullanılmaması önerilir.
Lokal Kapsam: Programın içerisindeki fonksiyonların her biri için oluşan kapsamlardır. Lokal kapsam fonksiyonla sınırlıdır. Bu kapsam içinde tanımlanan değişken yerel
değişken olarak tanımlanır ve tanımlandığı kapsam dışında kullanılamaz.
Block kapsam, fonksiyon kapsamının alt kümesi olarak düşünülebilir. Program içerisindeki süslü parantezler ({ }) arasında kalan bölgeleri ifade eder. Bu kapsam içinde let ve const ile tanımlanan değişkenler kapsam dışına çıktıktan sonra bellekten kaldırılır.
var - let - const Anahtar Kelimeleri
JavaScript 2015 yılından önce değişken atamalarında yalnızca var anahtar kelimesini kullanıyordu. 2015 yılından sonra eklenen block kapsam kavramı ile birlikte let ve const anahtar kelimeleri duyuruldu. Değişken ve kapsam ihtiyacına göre üç anahtar kelimede kullanılabilir. Değişken, global veya fonksiyon kapsamlı kullanılacaksa var ile tanımlanmalıdır. Değişkene atanan değer programın akışında bir daha değiştirilmeyecekse const anahtar kelimesi kullanılmalıdır. Ancak programın akışında değişkenin değeri değişecekse let anahtar kelimesi kullanılmalıdır. Kitabın 163. sayfasındaki Tablo 5.1’den değişken ataması yapılırken kullanılan anahtar kelimelerin kapsam özellikleri incelenebilir.
Veri Türleri
String
JavaScript dilinde karakter verilerini içeren değişkenler string olarak adlandırılır. Stringlerin uzunluğu içindeki karakterlerin uzunluğu kadardır. Karakterlere indeks değerleri kullanılarak ulaşılabilir.
Number
JavaScript ile sayısal değerleri ifade edebildiğimiz veri türü number olarak adlandırılır. Number değişkenler tam sayı veya ondalıklı sayılar olabilir. Atama yapılırken atanan değer tırnak işareti içerisinde olmamalıdır. Aşağıdaki kod bloğunda göreceğiniz gibi number türünde olan nbr değişkeni ve string türünde olan str değişkenleri farklı türdeki değişkendir. Değişken türlerini konsola yazdırmak için typeof komutunu kullanabilirsiniz. String bir ifadeyi number değerine dönüştürmek için parseInt ve parseFloat metotlarını kullanabilirsiniz. parseInt string içerisindeki ifadenin sadece tam sayı olan kısmını çevirirken parseFloat ondalık kısmını da çevirecektir.
Boolean
Boolean mantıksal doğru veya yanlış değerlerini ifade eden veri türüdür. Doğru için true, yanlış için false kullanır. Boolean türünde değişkenler koşul yapılarında karar verebilmek için kullanılır.
Diziler
JavaScript ile ihtiyacımız olan verileri kolayca tanımlayabiliriz. Ancak bazen aynı türdeki verileri depolamak için birçok değişken kullanmak yerine tek değişken kullanmak daha pratik olur. Örneğin 5 dersi olan bir öğrencinin tüm derslerini, sıralı bir değişkende tutmamız gerekebilir. Bu durumda JavaScript dilinin sunduğu dizi isimli özel bir veri türü vardır. JavaScript ile
dizi tanımlamak için köşeli parantezler([ ]) arasında veriler tanımlanır.
Nesneler
Program geliştirirken bir değişken ile ilgili sakladığımız birden çok özelliğimiz olabilir. Örneğin, bir kullanıcının adı, soyadı, yaşı, adresi gibi ayrı ayrı bilgileri saklamamız gerekebilir. Her kullanıcı için, bu kadar çok değişken oluşturmak imkânsızdır. JavaScript ile birlikte gelen nesne veri türü değişkenlerin altında özellik saklamaya izin verir. Nesneler süslü parantezler ({...}) ile tanımlanır. Nesnelerin altında veriler anahtar:değer yapısı ile saklanır. Her bir veri özellik olarak adlandırılır.
Operatörler
Bir operatör, belirli bir değeri veya işleneni değiştirme veya karşılaştırma yeteneğine sahiptir. Sayma gibi çok basit işlemlerden, güvenlik şifrelemesi gibi karmaşık algoritmalara kadar her şey için kullanılabilirler. Örneğin 2+3 işleminde artı işareti (+) bir operatördür. JavaScript ile kullanılan operatörleri 4 başlıkta inceleyebiliriz.
Aritmetik Operatörler: Program içerisinde yaptığımız matematiksel işlemleri ifade eden operatörlerdir (Kitabın 168. Sayfasındaki Tablo 5.3 incelenebilir).
Atama Operatörleri: JavaScript’te değişkenlere değer atamak için kullanılan operatörlerdir. Sağ tarafta bulunan değer sol taraftaki değişkene atanır. Atanan değer doğrudan sayı veya karakter olabileceği gibi aritmetiksel operatörlerle yapılan bir işlemin sonucu veya fonksiyondan dönen değer olabilir. Kitabın 169. Sayfasındaki Tablo 5.4’te JavaScript ile sık kullanılan atama operatörleri incelenebilir.
Karşılaştırma Operatörleri: Bilgisayar üzerinde çalışan programlarda, akış kontrolüne karar vermek için karşılaştırma operatörlerini kullanırız. İki değerin karşılaştırılması sonucunda karşılaştırma operatörü boolean (true veya false) değer döner. Kitabın 170. sayfasındaki Tablo 5.5’ten JavaScript ile sık kullanılan karşılaştırma operatörlerini inceleyebilirsiniz.
Mantıksal Operatörler: Mantıksal operatörler, boolean değerleri karşılaştırmak için kullanılırlar. Kitabın 171. sayfasındaki Tablo 5.6’da örnekleri inceleyebilirsiniz.
Koşullu İfadeler
Programlama dilleri, çalışma akışına karar verebilmek için koşullu ifadeleri kullanır. Koşullu ifadeler, bazı koşullara bağlı olarak bir kod parçasını yürütmekten sorumludur.
if & else & else if
JavaScript, mantıksal ifadenin doğru veya yanlış olmasına bağlı olarak farklı kod bloklarını çalıştırabilmek için if koşul yapısını kullanır. Çalıştırılmak istenen bir kod bloğu program içerisinde bir koşula bağlı olabilir. if, koşul sağlandığında kod bloğunun çalışmasına izin verir.
Çalışma esnasında if bloğunda koşulu sağlanmadığında farklı bir kod bloğunu çalıştırmak gerekebilir. Örneğin,
kullanıcı girişi yapılmadığında ekranda bu kez farklı bir uyarı vermek isteyebiliriz. Bunun için ikinci bir if bloğu yazmak gibi bir seçeneğimiz olsa da kullanabileceğimiz else anahtar kelimesi vardır.
Değişkenin farklı koşullar içinde test edilmesini istediğimiz durumlarda else if anahtar kelimesini kullanabiliriz.
Switch
Akış kontrolünde, farklı koşullara göre farklı eylemler gerçekleştirmek için birden fazla if yapısı kullanılabilir. Ancak arka arkaya gelecek if yapıları, kodun okunabilirliğini kötüleştirecektir. Bu gibi birçok koşul olduğu durumlarda switch yapısı kullanılabilir. Switch yapısı ile koşulu sağlayan değerlerden biri seçilebilir veya varsayılan bir kod bloğu çalıştırılabilir.
Döngüler
Programlama kavramlarının en temel ve güçlü yapılarından olan döngüler, belirli bir kod bloğunu bir koşul gerçekleşene kadar çalıştırabilir. Birden çok kez tekrar etmesi gereken kod blokları için döngüler kullanılabilir. Hemen hemen tüm programlama dilleri döngü yapılarına sahiptir.
For
Programlama dilleri arasında popüler olan for döngüsü, kod bloğunu belirli sayıda çalıştırmak için kullanılanılır. Kullanılırken, bir değişken tanımlanır ve her tekrar için arttırılır veya azaltılır. Değişken kullanılarak kodun çalıştırılması istenen tekrarı belirtecek koşul yazılır. Döngü içinde belirlenen koşul sağlanana kadar, kod bloğu çalıştırılır. Örneğin ekrana 1’den 10’a kadar sayıları yazdırmak istersek bunları tek tek yazdırmak yerine aşağıdaki kod bloğu ile kolayca yapabiliriz. Tanımladığımız i değişkeninin değeri i++ komutuyla her tekrarda 1 arttırılır. Artış sayısını ikişer ikişer veya farklı sayılarla arttırabilirsiniz. i<=10 tanımlaması i değerinin 10’dan küçük ve eşit olduğu sürece döngünün devam edeceğini belirtmek için kullanılan koşul kısmıdır.
Dizinin eleman sayısını öğrenmek için length özelliği kullanılabilir.
for/in
JavaScript ile nesnenin özelliklerine ulaşmak için for/in yapısı kullanılabilir. Nesne bir dizi ise dizinin indeks değerlerini özellik olarak kabul edecektir.
for/of
JavaScript ile bir dizinin değerlerine ulaşmak için for/of yapısı kullanılabilir. Dizinin elemanlarına indeks değerlerine göre ulaşacaktır.
While
Belirli bir koşul sağlandığı sürece tekrar edilmek istenen kod blokları için while döngüsü kullanılabilir. Örneğin, kullanıcı tarafından kırmızı rengin seçili olduğu sürece bir kod bloğunun tekrar etmesini istediğimizi varsayalım.
Renk değişkeninin durumuna bakarak bu kodu sürekli çalıştırmak için while döngüsünü çalıştırabiliriz.
Fonksiyonlar
Programlamada kullanılan fonksiyon yapısı, bir kod bloğunu kodun farklı noktalarında tekrar yazmak yerine, kolayca yeniden kullanılabilir hâle getirir. Fonksiyonlar program içerisinde modülerlik ve yeniden kullanılabilirlik sağlar. Örneğin; önceki örneklerde kullandığımız console.log() komutu, konsol ekranına mesaj yazdırabilmemizi sağlayan bir fonksiyondur.
Fonksiyon Tanımlama
JavaScript ile fonksiyon tanımlamak için, function anahtar sözcüğünü ardından fonksiyon adını, bir parametre listesini ve fonksiyon gövdesini aşağıdaki gibi tanımlamalısınız.
Her fonksiyon, kendine özel bir fonksiyon adına sahiptir. Aynı isimli birden fazla fonksiyon olması hâlinde kodunuz çalışmayacaktır. Örnek kodda verilen toplaVeYaz fonksiyon adıdır. Büyüyen projelerde fonksiyon kullanımı da artacaktır. Birçok fonksiyonun olduğu projelerde, fonksiyon adları, fonksiyonun yaptığı işi açıklayabilecek şekilde seçilmelidir. Geliştirici fonksiyon adına bakarak fonksiyon hakkında fikir sahibi olmalıdır. Aksi takdirde kodunuz karmaşık ve yönetilmesi zor olacaktır.
Fonksiyon isminden sonra gelen parantez içindeki sayi1 ve sayi2 değerleri fonksiyonun parametreleridir.
Fonksiyon içinde tanımlanan sonuc değişkeni, lokal kapsamlı değişkendir ve fonksiyon dışına çıkıldığı zaman bellekten kaldırılacaktır.
Fonksiyon Çağırma
Tanımladığınız fonksiyonu kullanmak için fonksiyonu çağırmanız gereklidir. Hazırladığınız fonksiyonu çağırmak için aşağıdaki gibi, önce fonksiyon adını ardından fonksiyon için gerekli parametreleri yazmalısınız.
return Anahtar Kelimesi
Fonksiyonun içindeki geri döndürülmek istenilen değerler için return anahtar kelimesi kullanılabilir. Fonksiyonun çağrıldığı satırda işlemin sonucunun atanabilmesi için değişkende tanımlanmalıdır.
Anonim Fonksiyonlar
Anonim fonksiyonlar, kendisiyle ilişkilendirilmiş herhangi bir adı olmayan fonksiyonlardır. Normalde JavaScript’te bir fonksiyonu tanımlamak için fonksiyon adından önce function anahtar sözcüğü kullanılır. Ancak anonim fonksiyonlarda isim vermeden, yalnızca function anahtar sözcüğünü kullanılır.
Anında Çağrılan Fonksiyonlar (IIFE)
JavaScript ile yazılan bir fonksiyon tanımlandıktan sonra hemen çalıştırılmak istenebilir. İngilizce Immediately Invoked Function Expression kelimelerinin kısaltması olan IIFE ile fonksiyon tanımlandıktan sonra tekrar bir çağırma işlemine gerek kalmaksızın hemen çalıştırabilir.
Açılır Kutular
Web sayfalarında kullanıcılara mesaj göstermek veya kullanıcının onayını almak için JavaScript ile gelen açılır kutular kullanılabilir. Açılır kutular ile kullanıcı etkileşimi sağlanabilir.
JavaScript ile beraber 3 farklı açılır kutu gelir. Bunlar; uyarılar için kullanılan alert, kullanıcıdan onay almak için confirm ve kullanıcıdan bilgi almak için prompt kutularıdır.
Bilginin kullanıcıya ulaştığına emin olmak için Alert kullanılır. Kullanıcıya bilgi hakkında bir uyarı verilir ve devam etmesi için “Tamam” butonuna basması gerekir.
Gösterilmek istenen bilgi alert() fonksiyonuna parametre olarak girilir.
Onay kutusu oluşturmak için confirm() fonksiyonu kullanılır. Kullanıcının ekranında gösterilecek mesaj confirm() fonksiyonuna parametre olarak yazılır. Fonksiyon, kullanıcının seçimine göre boolean bir sonuç döner.
Prompt parametre ile çağırılır. Kullanıcıdan istenen bilginin açıklaması ilk parametre, varsayılan değer ise ikinci parametre olarak verilir. Fonksiyon kullanıcının girdiği değeri geri döndürür.
Zamanlayıcılar
JavaScript’te, belirli bir zamanda bir görevi veya herhangi bir fonksiyonu çalıştırmak için zamanlayıcılar kullanılabilir. Temel olarak zamanlayıcı, kodun yürütülmesini geciktirmek veya düzenli bir zaman aralı- ğında çalıştırmak için kullanılır.
setTimeout metodu, belirli bir süre geçtikten sonra bir kod parçasının çalıştırılmasına olanak tanır. Bu metodu, belirli bir zaman sonra JavaScript kodunu çalıştırmak için kullanılan bir zamanlayıcı olarak düşünebilirsiniz.
setTimeout metodu çağrıldığında “Timer Identifier” denilen zamanlayıcı kodunu döndürür. Kod içerisinde setTimeout ile yazılan zamanlayıcıyı iptal etmek için clearTimeout kullanılabilir. clearTimeout metodunu çalıştırabilmek için müdahale edilmek istenen zamanlayıcıya ait timer identifier kullanılır.
JavaScript ile kullanılan diğer zamanlayıcı metodu setInterval, bir kod parçasını belirli aralıklarla çalıştırmak için kullanılır. setTimeout ile aynı söz dizimine sahiptir.