CSE341 Programlama Dilleri JavaScript Murat DÜZGÜN.

... konulu sunumlar: "CSE341 Programlama Dilleri JavaScript Murat DÜZGÜN."— Sunum transkripti:

1 CSE341 Programlama Dilleri JavaScript Murat DÜZGÜN

2 Nedir Bu JavaScript? Ne Amaçla Kullanılır? JavaScript’in Tarihi Yazım Kuralları Veri Tipleri & Değişkenler Operatörler & İfadeler JavaScript Objeleri Fonksiyonlar Dinamik Sayfalar Oluşturma Çerezler & Diğer Depolama Teknikleri JavaScript & Ajax Genel Hatlar

3  Netscape Navigator 2.0 ile birlikte geliştirilen istemci taraflı (client- side) script dilidir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için kullanılan bir web programlama dilidir. Nedir bu JavaScript? HTML kodları arasına yerleştirilen küçük kodlardır. Tek başına.js uzantılı JavaScript kodları da yazılabilir.

4 Genel Tabir ile; HTML ‘in sahip olmadığı özellikler yada yetersiz kaldığı yerlerde web sayfaların oluşturulmasında kullanılır. JavaScript kullanımının iki ana alanı vardır: istemci taraflı ve sunucu taraflı script yazmak. Şu anda HTML sayfalara gömülü yazılan scriptlerin çoğu JavaScript kullanılarak yazılmaktadır. Bunlar da genellikle kullanıcı bilgilerinin doğru girilip girilmediği ya da kullanıcıya veri girişinde ya da menü kullanımında seçenekler sağlamaktır. Sunucu taraflı JavaScript, aynı ASP gibi çalışmaktadır. Ne Amaçla Kullanılır?

5  1995 yılında Netscape Navigator 2.0 ile birlikte Brendan Eich tarafından geliştirilen ve önceleri Mocha daha sonra LiveScript olarak adlandırılan ve en sonunda şu anki adı olan JavaScript oldu.  Başlangıçta sadece Nestcape tarayıcılarında çalışan JavaScript,artık günümüzde hemen hemen bütün tarayıcılar tarafından desteklenmektedir.  En büyük yanlışlıklardan biride isim benzerliğinden dolayı basitleştirilmiş Java olarak insanlardan tarafından algılanmasıdır.Oysa ki,Java ile herhangi bir alakası olmayan aksine,C dilinin tarayıcılara uyarlanmış hali diyebiliriz. JavaScript’in Tarihi Aslında JavaScript ile Java arasındaki isim benzerliği bir tesadüf değildir.Sun firması o sıralarda(javaScript in LiveScript olarak tanındığı sıralar) platform dan bağımsız java dili üzerinde çalışmaktaydı.Ve Java ismi çok popülerdi insanlar arasında ve bundan esinlenip JavaScipt adı verildi.

6  Syntax’ı C ve C++ mantığıyla aynı fakat bazı temel farklılıklar var.  Comment alma ifadelerinde C/C++ ‘in comment alma ifadeleri geçerlidir.  JavaScript’i tarayıcıya iki farklı şekilde yorumlatabiliriz.İlki ayrı bir dosyaya(.js uzantılı bir dosya) javascript kodları yazılır,ikincisi ise HTML’in içine gömerek yapabiliriz.Fakat,javascript’i HTML içerisine gömmek için HTML etiketini kullanırız. Örnek 2.Yöntem: alert("Hello, World!"); Yazım Kuralları

7 Örnek 1.Yöntem:  Case Sensitive’dir.

8 1. Veri Tipleri (Data Types - Values) Nelerdir? Veri tipi diye adlandırdığımız kavram, dil tanımı yapılırken belirli kıstaslara göre sınırlandırılmış farklı türlerdeki değerleri ifade etmektedir. JavaScript dili aşağıdaki veri tiplerine sahiptir : 1.1. Sayılar(Numbers) Tamsayı(integer) ve kayan noktalı(floating-point) sayı tiplerinin her ikisi de desteklenmektedir. Tamsayılar pozitif, 0 veya negatif olabilirken kayan noktalı bir sayı herhangi bir ondalık ayırıcı, bir "e" (büyükharf veya küçükharf) veya her ikisini birden içerebilir. "e", bilimsel gösterimlerde sağa veya sola doğru kaç nokta kaydırılacağını belirtmek için kullanılır. Tamsayı ve kayan noktalı sayı tiplerinin dışında özel sayı değerleri de bulunmaktadır : Veri Tipleri ve Değişkenler

9 NaN veya Not a Number(sayı değil) Pozitif sonsuz Negatif sonsuz Pozitif 0 Negatif 0 Tam sayılar 10 tabanında (decimal), 8 tabanında(octal) ve 16 tabanında (hexadecimal) temsil edilir. 1.2. Mantıksal Değerler (Logical Values) "Boolean" olarak da adlandırabileceğimiz mantıksal değerler true ve false şeklinde ifade edilir. Herhangi bir eşitliğin veya karşılaştırma işleminin sonucu doğruysa true veri tipi elde edilir; aksi halde false durumu oluşmaktadır. Veri Tipleri ve Değişkenler

10 Stringler String veriler tek veya çift tırnak işaretleri arasına alınarak belirtilir. Aşağıdaki ifadeler string veri tiplerine örnektir : "JavaScript öğrenmek çok zevkli!" 'Aynştayn, "Hayal kurmak bilgiden daha önemlidir." demiş.' "128“ 1.3. Null(Boş) Değerler Null, boş değerleri göstermekte kullanılan bir anahtar sözcük (keyword) olmasının yanında, ilkel bir değerdir. Çünkü JavaScript büyük harf-küçük harf duyarlı olduğundan "null" değeri, "Null" veya "NULL" gibi ifadelerle aynı kabul edilmez.

11 Veri Tipleri ve Değişkenler 1.4. Undefined(Tanımsız) Değerler Bir değişken yaratıldıktan sonra bu değişkene bir değer tahsis edilmezse alacağı değer tanımsızdır (undefined). Undefined, tıpkı "Null" gibi ilkel bir değerdir. 1.5. Veri Tipi Dönüşümleri JavaScript dinamik olarak hazırlanmış bir dildir. Bir değişkenin veri tipini, değişkeni bildirirken belirtmek zorunda değiliz. Tipler arasındaki dönüşüm script çalıştırılırken otomatik olarak gerçekleştirilebilir. Örneğin aşağıdaki gibi bir değişken bildirimi yaptığımızı düşünelim : var yas = 35 Sonra da değeri sayısal olan bu değişkene string değer tahsis edelim : yas = "Yaş 35, yolun yarısı eder..." JavaScript dinamik bir dil olduğu için örnekteki değer atamaları herhangi bir hataya neden olmaz.

12 Veri Tipleri ve Değişkenler Bir ifadede string değerler ve sayısal değerler birarada ve "+" operatörüyle birlikte kullanılmışsa, JavaScript sayısal değerleri stringe dönüştürür. Aşağıdaki örnekleri inceleyelim : x = "Doğru cevap : " + 42 // x değişkeni "Doğru cevap : 42" değerini alır y = 42 + " doğru cevaptır." // y değişkeni "42 doğru cevaptır." değerini alır Eğer "+" dışında bir operatör kullanılırsa bu dönüştürme işlemi gerçekleşmez : x = "66" - 6 // x değişkeni 60 değerini alır. x = "66" + 6 // x değişkeni "666" değerini alır.

13 Veri Tipleri ve Değişkenler 2. Değişkenler JavaScript'te değişkenleri bildirmek için iki farklı yol kullanılabilir : Sadece değer ataması yaparak. Örneğin, x = 35 var anahtar sözcüğüyle birlikte kullanarak. Örneğin, var x = 35 2.1. Değişkenleri Değerlendirmek Bir değişkene veya dizi (array) öğesine herhangi bir değer tahsis edilmemişse değeri undefined olarak belirlenir; ataması yapılmamış bir değişkeni işleme soktuğumuzda bildirim türüne göre aşağıdaki sonuçlarla karşılaşırız. Değer ataması yapılmamış değişken var anahtar sözcüğü kullanılmadan bildirilmişse, işlem sonucunda çalışma zamanı hatası(runtime error) ile karşılaşılır. Değer ataması yapılmamış bir değişken var anahtar sözcüğü ile bildirilmişse, işlem sonucunda tanımsız bir değer veya NaN değeri elde edilir.

14 Veri Tipleri ve Değişkenler Şimdiki örneğimizde değer ataması yapılmamış değişkenlerin nasıl değerlendirildiğini açıkça göreceğiz : function f1(){ return x - 5; } f1() // Çalışma zamanı hatasına(runtime error) neden olur function f2(){ return var x - 2; } f2() // NaN değerini verir Not : "return" anahtar sözcüğü, sağına yazılan değeri fonksiyonun çağrıldığı yere gönderir. Boş (null) bir değişkeni işleme soktuğumuzda sayısal ifadelerde 0 gibi, mantıksal(boolean) ifadelerde "false" gibi davranır. Örneğin; var x = null; y = x * 32; // y değişkeninin aldığı değer : 0

15 Veri Tipleri ve Değişkenler Bir ifadede string değerler ve sayısal değerler birarada ve "+" operatörüyle birlikte kullanılmışsa, JavaScript sayısal değerleri stringe dönüştürür. Aşağıdaki örnekleri inceleyelim : x = "Doğru cevap : " + 42 // x değişkeni "Doğru cevap : 42" değerini alır y = 42 + " doğru cevaptır." // y değişkeni "42 doğru cevaptır." değerini alır Eğer "+" dışında bir operatör kullanılırsa bu dönüştürme işlemi gerçekleşmez : x = "66" - 6 // x değişkeni 60 değerini alır. x = "66" + 6 // x değişkeni "666" değerini alır. 2.3. Genel ve Yerel Değişken Bildirimleri Değişkenleri fonksiyon dışında bildirdiğimizde genel değişken (global variable) olarak çağrılırlar. Bunun nedeni belgenin her yerinde kullanılabilmeleridir. Değişkenlerin bildirimini bir fonksiyonun içinde yaptığımız zaman ise yerel değişken (local variable) olarak çağrılırlar ve sadece bildirildikleri fonksiyonla beraber kullanılabilirler.

16 Veri Tipleri ve Değişkenler Genel bir değişkeni bildirirken var kullanmak kod yazarının seçimine bırakılmıştır; ancak değişken fonksiyon içinde bildirilecekse var anahtar sözcüğü kullanılmak zorundadır. Bir pencere (window) veya çerçeve (frame) içinde tanımlanmış genel değişkenlere başka pencere veya çerçevelerden erişmek için değişkenlerin tanımlandığı pencerenin veya çerçevenin adı belirtilmelidir. Örneğin, telefonNumarasi değişkenini bir FRAMESET belgesinde tanımladığımızı varsayarsak, diğer çerçevelerden bu değişkene parent.telefonNumarasi gibi bir ifade yardımıyla ulaşabiliriz.

17 Operatörler ve İfadeler JavaScript de ifadeler genelde noktalı virgül ile sonlandırılır.Fakat,bu gerekli değildir.Yani şöyle bir ifade geçerlidir. Ancak tek satırda yazılan ifadeler noktalı virgül ile sonlandılmalıdır. Örnek : Var elma = “yesil”; var elma = “kirmizi” var elma; var armut; = var elma var armut

18 Operatörler ve İfadeler İf,for,while ifadeleri C ile aynı şekildedir. Örnek : var age = 13; if (age >= 18) document.write(“Ooo… Sen Kocaman Adam Olmussun:D”); else document.write(“Hiim…Sen Daha Toysun Dostum:D”); Bir de bunlara ek olarak C ve benzeri dilllerden farklı olarak Şöyle bir mantıksal operator kullanılır. var x=3; if (x === 3) alert(“cevap dogru”); if (x === “3”) alert(“cevap yanlis”); Sonuç olarak 3 eşittir ifadesi kesin sonuç olacağını göstermektedir.

19 JavaScript Objeleri JavaScript de objeler new keywordü kullanarak oluşturulur.Primitive Data Type olarak string,boolean,number,date,math sınıflarını içermektedir. Arrayler JavaScript de; string,date objeleri gibi array de bir objedir. var newArray = new Array('one','two'); yada var newArray = ['one','two']; alert(testArray.length); // ekrana 2 basar Örnek: var programLanguages = new Array ('C++','Pascal','FORTRAN','BASIC','C#','Java','Perl','JavaScript'); for (var itemIndex in programLanguages) { document.writeln(programLanguages[itemIndex] + " "); }

20 Fonksiyonlar  C/C++ daki gibi fonksiyon yapısı JavaScript tarafından da desteklenir.  Birde isimsiz fonksiyonlar vardır.Bunlar obje gibidirler.Constructor’ı kullanılarak yeni bir fonksiyon oluşturulabilinir. Örnek : var sayHi = new Function("toWhom","alert('Hi ' + toWhom);"); sayHi("World!");  Birde “Function Literal” lar vardır.İsimsiz fonksiyonlara benzemektedirler. Örnek : var func = function (x, y) { return x * y; } alert(func(3,3));

21 Fonksiyonlar Bunlara ek olarak fonksiyonlar parametre olarak başka bir fonksiyona gönderebiliriz. Örnek : // fonksiyon olarak 3.arguman cagrilir function funcObject(x,y,z) { alert(z(x,y)); } function testFunction() { // 3.parametre bir fonksiyon funcObject(3,4,function(x,y) { return x * y}) }

22 Dinamik Sayfalar Oluşturma JavaScript kullanarak web sayfalarının içerikleriyle oynayabilir ve sayfalar oluşturabiliriz.Elbette JavaScript yanında CSS,HTML gibi bazı dilleri de bilmek gerekmekte. Sayfa içerisinde her resim,form,yazı gibi içerikler birer nesne olarak algılanır tarayıcı tarafından.Bunun için,bu nesnelere javascript ile erişmek için DOM (Document Object Model) yöntemi kullanılır. Örnek : var tstElem = document.getElementById("testelement"); Böylelikle id adı testelement olan nesne alınır javascript tarafından.Sonrasında ise; tstElem.style.color="#fff"; Böylelikle; o nesne renk niteliği RGB modelinde olan #fff (kırmızı)değerini alır.

23 Çerezler ve Diğer Depolama Teknikleri Çerez(Cookie);herhangi bir internet sitesi tarafından bilgisayara bırakılan bir tür tanımlama dosyası. Çerez dosyalarında oturum bilgileri ve benzeri veriler saklanır. Çerez kullanan bir siteyi ziyaret ettiğinizde, bu site tarayıcınıza sabit diskinize bir ya da birden fazla çerez bırakma konusunda talep gönderebilir. İstemci tarafında bırakılan bu çerezleri düzenlemek ve oluşturmak için JavaScript kullanılmaktadır(bir seçenek tabiki).Aynı şekilde çerezlere erişme yöntemi olarak da DOM yöntemi kullanılmaktadır. Örnek : document.cookie="cookieName=cookieValue; expires=date; path=path"; Yukarıdaki şablon kullanarak bir çerez oluşturulur. Elbette javascript ile çerezleri okuyabilir,düzenleyebilir,silebiliriz.

24 JavaScript & Ajax AJAX (Asynchronous JavaScript and XML), İnternet sayfalarında JavaScript ve XMLHttpRequest kullanımı ile etkileşimli uygulamalar yaratan tekniğin adıdır. En yaygın kullanım alanı, sayfayı yeniden yüklemeye gerek kalmaksızın, sayfada görünür değişiklikler yapmaktır. XMLHttpRequest kullanılarak birden fazla bağımsız işlem yapılabilir. Ajax kullanırken,javascript ve xml kullanarak veri işlemesi yada iletimi yapılır.Günümüzde Ajax veritabanlardan verilerin çekilmesinde çokça kullanılmaktadır.Buna örnek popüler websiteler;Facebook,Youtube… gibi milyonlarca website…

25 JavaScript & Ajax Örnek Bütün Bir Program : var xmlhttp=null; function showHint(str) { if (str.length==0){ document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

26 JavaScript & Ajax var url="gethint.asp?q=" + str; url=url+"&sid="+Math.random(); xmlhttp.open("GET",url,false); xmlhttp.send(null); document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } First Name: Suggestions:

27 Eklemeler JavaScript’i daha da gelişmiş ve ileri özellikler kazandıran birçok eklenti ve framework ler yazılmıştır. Bunlardan en bilinenleri;  jQuery  moo Tools  prototypes.js  script.aculo.us  ASP.NET Ajax Framework Bu eklentiler de amaç tamamen “Az Kod Yaz, Çok İş Yap” prensibine dayanmaktadır.