Öğr. Gör. Serkan AKSU 1

Transkript

1 Öğr. Gör. Serkan AKSU 1

2 JavaScript JavaScript Nedir? Nestcape firması tarafından C dilinden esinlenerek yazılmış, Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript dili istemci taraflı (client-side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için JavaScript kullanılır. İlk başta yalnızca Netscape tarayıcıları için tasarlanan JavaScript, daha sonra diğer tarayıcılar tarafından da desteklenen genel bir scripting dili haline gelmiştir <script> <! -- JavaScript kodları --> </script>

3 JavaScript JavaScript, Java dilinin bir versiyonu değildir. JavaScript kendi başına bir script dilidir. Genellikle HTML sayfalarında kullanıcı kontrolleri eklemek, formları kontrol etmek, hesaplamalar yapmak gibi işler için kullanılır. Javascript, HTML gibi, Visual Basic Scripting Edition (VBScript) gibi, kodları (komutları) düz yazı dosyası olarak kaydedilen ve işleyebilmesi için bir yorumlayıcıya ihtiyacı olan bir dildir. Java ile yazdığınız program ise (en azından teoride) işletim sisteminden bile bağımsız olarak, kendi başına çalışabilir. Javascript, HTML in bir parçasıdır ve içinde bulunduğu HTML ile birlikte Web Browser programı tarafından yorumlanır. Dolayısıyla, Javascript programı yazmak demek, bir Web sayfası hazırlamak ve bu sayfadaki HTML kodlarının arasına Javascript kodları gömmek demektir.

4 JavaScript Nerede Kullanılır? JavaScript kullanımının iki ana alanı vardır: İstemci taraflı ve sunucu taraflı script yazmak. Şu anda HTML sayfalara gömülü yazılan scriptlerin çoğu JavaScript kullanılarak yazılmaktadır. Sunucu taraflı JavaScript, ASP gibi çalışmaktadır. İstemci Taraflı JavaScript (Client Side JavaScript) Ziyaretçinin bilgisayarında çalışan JavaScript e İstemci taraflı JavaScript (CSJS) denir.bu scriptler sunucuda çalışmadığından sunucuya ek bir yük getirmez. Sunucu Taraflı JavaScript (Server Side JavaScript) Sunucu taraflı JavaScript (SSJS) ise temel JavaScript e ek olarak nesneler ve işlevler katılarak veritabanlarına erişim, gönderme ve diğer işlemlerin yapılması sağlanır. SSJS, veritabanı temelli Web uygulamalarının geliştirilmesini sağlar. SSJS hızlı ve etkin

5 JavaScript Nerede Kullanılır? Tablo: CSJS (Client-Side JavaScript) ile SSJS (Server-Side JavaScript) karşılaştırılması. CSJS SSJS Etiketler <SCRIPT> <SERVER> İşletme Client browser (interpreted=yorumlamalı) Server (compiled byte code=derlemeli) Derleme Yok Web Uygulaması İstemci JavaScript destekli Tüm browserler Sunucu Serverden bağımsız JavaScript destekli

6 JavaScript Özellikleri İşletme Sırası HTML belgesinde JavaScript eklendiğinde, kodun işletimi sırasıyla yapılır. Ancak fonksiyon ve belli bir olaya (ONCLICK gibi) bağlı olan JavaScript kodlarının işletimi o anda yapılır. Değişkenler Bir değeri içeren bellek adlarını ifade ederler. İşleçler (Operators) Değerler ya da değişkenler arasında toplama, çıkarma gibi işlemlerin yapılmasını sağlarlar. İşleçler +, *, /, - gibi işaretlerle kullanılır.

7 JavaScript Özellikleri İfadeler (Expression) Değişkenlerin, işleçleri ve deyimlerin bir araya gelerek oluşturdukları yapılara ifade derin. Örneğin: Ucret = Gün * Yevmiye formülü bir ifadedir. Deyimler (Statements) Deyimler belli bir komut ya da söz dizimi bileşenlerinin grubuna verilen addır. Örneğin bir komut ya da bir IF yapısı deyimi oluşturur:

8 JavaScript Özellikleri Nesneler (Objects) Kendi değerleri, özellikleri ve işlemleri olan bileşenlere nesne (object) denir. JavaScript dilinde çok sayıda yerleşik nesne vardır. Fonksiyonlar (Functions) Bir JavaScript fonksiyonu diğer dillerdeki bir fonksiyon yordam ya da bir alt yordam anlamına gelir. Bir fonksiyon bir dizi işlemi yerine getirir ve bir sonuç döndürür. Ayrıca fonksiyonlar, parametre olarak kabul edilen birçok değer kabul ederler. Function_Adi( ) { deyim 1 deyim 2... deyim N }

9 JavaScript Özellikleri Açıklamalar: Bütün programlama dillerinde olduğu gibi, kod yazarken açıklama yazmak için kullanabileceğimiz bir karakter vardır. JavaScript te bu <! ve //-->. işaretlerinin arasıdır. <! bu bir açıklamadır //-->. JavaScript kodu diğer programlama dillerinde olduğu gibi deyimlerden (statements) oluşur. Bu deyimler atama, değerleri karşılaştırma ve işlemlerin yapılması için komutlar anlamına gelmektedir.

10 JavaScript Fonksiyonları JavaScript fonksiyonları function anahtar kelimesi ile tanımlanır. Fonksiyonun tanımlanması function functionname(parametreler) { değişkenler; deyimler ; return değer; } function Carpma( a, b ) { return a * b; }

11 JavaScript Fonksiyonları Function() Constructor JavaScript fonksiyonlarının function anahtar kelimesi ile tanımlandığını görmüştük. Fonksiyonlar, aynı zamanda Function() olarak çağrılan constructor biçiminde de kullanılabilir. var Carpma = new Function("a", "b", "return a * b"); var x = Carpma(4, 3); Aynı fonksiyon constructor kullanılmadan da tanımlanabilir. var Carpma = function(a, b) {return a * b} var x = Carpma(4, 3);

12 JavaScript Fonksiyonları Kendi Kendini Çağırabilen (self-invoking) Fonksiyonlar JavaScript fonksiyonları kendi kendini çağırıp otomatik olarak başlatılabilir. Fakat self-invoking fonksiyonları aşağıdaki gibi yazdığımızda hata ile karşılaşırız. function() { değişken ve deyimler; }(); Bu fonksiyonlar aşağıdaki gibi parantezler içerisinde tanımlanır.

13 JavaScript Fonksiyonları Parametre Alan Fonksiyonlar JavaScript fonksiyonları değişkenleri parametre olarak alabilir. function Islem(a, b) { return a * b; } var x = Islem(5, 3);

14 JavaScript Sayfa Elemanları JavaScript ile sayfa elemanlarına ID veya Name özellikleri ile erişilebilir. Örnek bir form uygulaması aşağıda verilmiştir.

15 Fonksiyonların Harici Dosyadan Kullanılması JavaScript fonksiyonları harici bir.js dosyasında tanımlanıp kullanılabilir. Bunun için önce fonksiyonların bulunduğu dosyanın web sayfasına head bölümünde import edilmesi gerekmektedir. fonksiyonlar.js function Carpma(param_a, param_b) { return a * b; } <head> <script type="text/javascript" src="fonksiyonlar.js"></script> </head> <body> <script> z = Carpma(x, y); </script> </body>

16 Fonksiyonların Harici Dosyadan Kullanılması

17 Haftaya JavaScript HTML DOM (Document Object Model)