Web Teknolojileri Hafta 6 1. İçerik  Javascript 2.Kısım 2.

... konulu sunumlar: "Web Teknolojileri Hafta 6 1. İçerik  Javascript 2.Kısım 2."— Sunum transkripti:

1 Web Teknolojileri Hafta 6 1

2 İçerik  Javascript 2.Kısım 2

3 JavaScript Objeler  Objeler(Nesneler) gerçek hayattaki varlıkları modelleyen de ğ işkenlerdir. Örnek olarak bir arabayı obje olarak modellersek; Bir arabanın a ğ ırlık, renk gibi özellikleri varken çalıştır ve stop et şeklinde metotları bulunmaktadır. 3

4 JavaScript Objeler 4  Obje = car  Tanımlanan bir obje ile birden fazla araba oluşturabilir. Oluşturulan her araba farklı özelliklere sahip olabilir. Örne ğ in bir arabanın rengi siyahken di ğ er beyaz olabilir. ÖzellikMetod car.name=Fiatcar.start() car.model=500car.drive() car.weight=850kgcar.brake() car.color=whitecar.stop()

5 JavaScript Objeler 5 var car = "Fiat"; var car = {type:"Fiat", model:"500", color:"white"}; Aşağıdaki kodda car değişkenine basit bir Fiat string değeri aktarıldı. İkinci kodda car değişkenine birden fazla değer aktarılmaktadır. name:value şeklinde değer aktarılır. Virgüllerle birden fazla değer birbirinden ayrılır. var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

6 Objelerde Özelliklere Erişim 6 objectName.propertyName Obje özelliklerine iki yolla erişilebilir. İkinci yol var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; objectName["propertyName"] person.lastName; Örnek 1.Yöntem 2.Yöntem person["lastName"];

7 Objelerde Metotlara Erişim 7 objectName.methodName() Obje metodlarına erişim Örnek Doğru Erişim Hatalı Erişim name = person.fullName(); var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; name = person.fullName;

8 Obje Özellik Örneği 8 Display the result here. var person = {firstName:"John", lastName:"Doe"}; document.getElementById("demo").innerHTML = person.firstName;

9 Obje Metod Örneği 9 Display the result here. var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName();

10 Değişkenlerin Yaşam Alanları 10 Değişkenler yaşam alanlarına göre iki türdedir. 1-Global değişkenler 2-Lokal değişkenler Global değişkenlere javascript kodunda her yerden ulaşılabilir ve yaşam alanları tüm javascript kodu kadardır. Lokal değişkenler ise sadece tanımlandığı bloktan erişilebilir ve yaşam alanları blok içindedir. Bloğun dışına çıkılınca ölürler.

11 Global Değişkenler 11 Global Değişken örneği var carName = " Volvo"; // carName değişkenine buradan erişilebilir. function myFunction() { // carName değişkenine buradan da erişilebilir }

12 Global Değişken Örneği 12 A GLOBAL variable can be accessed from any script or function. var carName = "Volvo"; myFunction(); function myFunction() { document.getElementById("demo").innerHTML = "I can display " + carName; }

13 Lokal Değişkenler 13 Lokal Değişken örneği // carName değişkeni buradan ulaşılamaz. //Burada yaşamamaktadır. function myFunction() { var carName = "Volvo"; // carName değişkenine buradan erişilebişir. // Değişken bu blok için yaşar. } Try it Yourself »

14 Lokal Değişken Örneği 14 A local variable can only be accessed from within the function where it was declared. myFunction(); document.getElementById("demo").innerHTML = "I can display " + typeof carName; function myFunction() { var carName = "Volvo"; }

15 String Özellikleri 15 Stringler metinsel bilgileri saklayan değişlen tipleridir. İki şekilde tanımlanabilir; Tek tırnak veya çift tırnak içinde. var carname = "Volvo XC60"; var carname = 'Volvo XC60'; String uzunluğu length özelliği ile bulunur. var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; String özel karekterleri escape karetkeri ile yazdırabilirsiniz. var x = 'It\'s alright'; var y = "We are the so-called \"Vikings\" from the north."

16 String Özel Karekterler 16 CodeOutputs \'single quote \"double quote \\backslash \nnew line \rcarriage return \ttab \bbackspace \fform feed

17 String Metodlar 17 MethodDescription charAt()Returns the character at the specified index (position) indexOf()Returns the position of the first found occurrence of a specified value in a string concat()Joins two or more strings, and returns a copy of the joined strings lastIndexOf()Returns the position of the last found occurrence of a specified value in a string replace()Searches a string for a value and returns a new string with the value replaced search()Searches a string for a value and returns the position of the match slice()Extracts a part of a string and returns a new string split()Splits a string into an array of substrings substr()Extracts a part of a string from a start position through a number of characters substring() Extracts a part of a string between two specified positions

18 String Metodlar 18 toLocaleLowerCase()Converts a string to lowercase letters, according to the host's locale toLocaleUpperCase()Converts a string to uppercase letters, according to the host's locale toLowerCase()Converts a string to lowercase letters toString()Returns the value of a String object toUpperCase()Converts a string to uppercase letters trim()Removes whitespace from both ends of a string valueOf()Returns the primitive value of a String object

19 String Örnekler 19 Please locate where 'locate' occurs!. Try it function myFunction() { var str = document.getElementById("p1").innerHTML; var pos = str.indexOf("locate"); document.getElementById("demo").innerHTML = pos; }

20 String Örnekler 20 The substr() method extract a part of a string and returns the extracted parts in a new string: var str = "Apple, Banana, Kiwi"; document.getElementById("demo").innerHTML = str.substring(7,13);

21 Number Metodları 21 parseInt tamsayı tipine dönüştürür. parseInt("10"); // returns 10 parseInt("10.33"); // returns 10 parseInt("10 20 30"); // returns 10 parseInt("10 years"); // returns 10 parseInt("years 10"); // returns NaN parseFloat() ondalık sayı tipine dönüştürür. parseFloat("10"); // returns 10 parseFloat("10.33"); // returns 10.33 parseFloat("10 20 30"); // returns 10 parseFloat("10 years"); // returns 10 parseFloat("years 10"); // returns NaN

22 Number Metodları 22 valueOf() sayısal değerini geri gönderir. var x = 123; x.valueOf(); // returns 123 from variable x (123).valueOf(); // returns 123 from literal 123 (100 + 23).valueOf(); // returns 123 from expression 100 + 23

23 Tarih Saat Metodları 23 new Date() new Date(milliseconds) new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) var d = new Date(); document.getElementById("demo").innerHTML = d;

24 Dizileri Kullanma 24 var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars[0]; Syntax: var array-name = [item1, item2,...]; Example: var cars = ["Saab", "Volvo", "BMW"];

25 Dizilerde Farklı Tipleri Barındırma 25 Dizilerde farklı tipler tek bir dizide barındırılabilir. Aşağıdaki örnekte string ve integer tipdeki değerler aynı dizide barınmaktadır. var person = ["John", "Doe", 46]; length() özelliği ile dizinin uzunluğu bulunabilir. var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.length; // the length of fruits is 4

26 Dizi Elemanlarında Dolaşma 26 Dizi elemanlarında döngü yardımıyla dolaşılabilir. var index; var fruits = ["Banana", "Orange", "Apple", "Mango"]; for (index = 0; index < fruits.length; index++) { text += fruits[index]; }

27 Diziye Eleman Ekleme 27 Diziye eleman iki yolla eklenebilir. var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Lemon"); // adds a new element (Lemon) to fruits Son eleman olarak ekleme Push metoduyla ekleme

28 Boolean Değerler 28 İki değere sahip olan programlamada sıklıkla kullanılan değişken tipidir. YES / NO ON / OFF TRUE / FALSE Boolean() fonksiyonu karşılaştırmanın sonucunu verir. Boolean(10 > 9) // returns true var x = 0; Boolean(x); // returns false 0 değeri false olarak değerlendirilir.

29 Karşılaştırma Operatörleri 29 OperatorDescriptionComparingReturns ==equal tox == 8false x == 5true x == "5"true ===equal value and equal type x === 5true x === "5"false !=not equalx != 8true !==not equal value or not equal type x !== 5false x !== "5"true x !== 8true >greater thanx > 8false <less thanx < 8true >=greater than or equal to x >= 8false <=less than or equal tox <= 8true

30 Karşılaştırma Operatörleri 30 OperatorDescriptionComparingReturns ==equal tox == 8false x == 5true x == "5"true ===equal value and equal type x === 5true x === "5"false !=not equalx != 8true !==not equal value or not equal type x !== 5false x !== "5"true x !== 8true >greater thanx > 8false <less thanx < 8true >=greater than or equal to x >= 8false <=less than or equal tox <= 8true

31 Lojic Operatörler 31 OperatorDescriptionExample &&and(x 1) is true ||or(x == 5 || y == 5) is false !not!(x == y) is true

32 Karşılaştırma 32 Syntax if (condition) { block of code to be executed if the condition is true } if (hour < 18) { greeting = "Good day"; }

33 Karşılaştırma 33 Syntax if (condition) { block of code to be executed if the condition is true } else { block of code to be executed if the condition is false } if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; }

34 Karşılaştırma 34 Syntax if (condition1) { block of code to be executed if condition1 is true } else if (condition2) { block of code to be executed if the condition1 is false and condition2 is true } else { block of code to be executed if the condition1 is false and condition2 is false } if (time < 10) { greeting = "Good morning"; } else if (time < 20) { greeting = "Good day"; } else { greeting = "Good evening"; }

35 Karşılaştırma Örneği 35 Display the result here. var greeting; var hour = new Date().getHours(); if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting;

36 Switch 36 switch(expression) { case n: code block break; case n: code block break; default: default code block }

37 Switch 37 switch (new Date().getDay()) { case 0: day = "Sunday"; break; case 1: day = "Monday"; break; case 2: day = "Tuesday"; break; case 3: day = "Wednesday"; break; case 4: day = "Thursday"; break; case 5: day = "Friday"; break; case 6: day = "Saturday"; break; default: alert(‘Nothing’); break; }

38 Döngüler for 38 for (statement 1; statement 2; statement 3) { code block to be executed } for (i = 0; i "; } for (i = 0, len = cars.length, text = ""; i "; }

39 Döngüler for 39 var text = ""; var i; for (i = 1; i < 10; i = i + 2) { text += i + " "; } document.getElementById("demo").innerHTML = text;

40 Döngüler while 40 while (condition) { code block to be executed } while (i < 10) { text += "The number is " + i; i++; }

41 Döngüler do while 41 do { code block to be executed } while (condition); do { text += "The number is " + i; i++; } while (i < 10);

42 Döngüler do while 42 var i = num1; while (i < num2) { document.getElementById("demo").innerHTML += i + " "; i++; }

43 Break 43 for (i = 0; i "; } Break komutu döngüyü kullanıldığı yerde kırarak sonlandırır.

44 Continue 44 for (i = 0; i "; } Continue komutu döngüyü kullanıldığı yerde işlem yaptırmadan bir sonraki iterasyona yönlendirir.

45 JavaScript JSON 45 JSON veri saklamak ve taşımak için bir biçimdir. JSON temsil J ava S cript O bject N -rotasyon JSON hafif veri değişim formatıdır JSON bağımsız dildir * JSON "kendini açıklayan" ve anlaşılması kolaydır { "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ] }

46 JavaScript JSON 46 JSON sözdizimi kuralları Veri ad / değer çiftleri içinde Veri virgül ile ayrılır Kaşlı nesneleri tutmak Köşeli parantezler diziler tutun JSON nesneleri küme parantezi içine yazılır. Sadece JavaScript gibi nesneler birden fazla ad / değer çiftlerini içerebilir: {"firstName":"John", "lastName":"Doe"}

47 JavaScript JSON 47 JSON Diziler JSON diziler köşeli parantez içinde yazılır. Sadece JavaScript gibi, bir dizi nesneleri içerebilir: "employees":[ {"firstName":"John", "lastName":"Doe"}, {"firstName":"Anna", "lastName":"Smith"}, {"firstName":"Peter", "lastName":"Jones"} ]

48 JavaScript JSON 48 İlk olarak, JSON sözdizimi içeren bir JavaScript string oluşturun: var text = '{ "employees" : [' + '{ "firstName":"John", "lastName":"Doe" },' + '{ "firstName":"Anna", "lastName":"Smith" },' + '{ "firstName":"Peter", "lastName":"Jones" } ]}'; Sonra, bir JavaScript nesnesine dönüştürmek için yerleşik fonksiyon JSON.parse() kullanın: var obj = JSON.parse(text);

49 JavaScript JSON 49 Create Object from JSON String var text = '{"employees":[' + '{"firstName":"John","lastName":"Doe" },' + '{"firstName":"Anna","lastName":"Smith" },' + '{"firstName":"Peter","lastName":"Jones" }]}'; obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName;

50 JavaScript Form Elemanlar 50 İçerikler buraya gelecek. var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i "; } document.getElementById("demo").innerHTML = text; Aşağıdaki javascript kodu frm1 isimli formdaki tüm elemanların içindeki değerleri demo Id değere sahip p tagına basar.

51 JavaScript Form Doğrulama 51 Form kontrolü yapılabilir. function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } } Name:

52 JavaScript Form Elemanlar 52 İçerikler buraya gelecek. var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i "; } document.getElementById("demo").innerHTML = text; Aşağıdaki javascript kodu frm1 isimli formdaki tüm elemanların içindeki değerleri demo Id değere sahip p tagına basar.

53 JavaScript Form Doğrulama 53 Form kontrolü yapılabilir. function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } } Name:

54 JavaScript Form Doğrulama 54 function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } Name: