Web Teknolojileri Hafta 7
İçerik Javascript 2.Kısım
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.
JavaScript Objeler 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. Özellik Metod car.name=Fiat car.start() car.model=500 car.drive() car.weight=850kg car.brake() car.color=white car.stop()
JavaScript Objeler Aşağıdaki kodda car değişkenine basit bir Fiat string değeri aktarıldı. var car = "Fiat"; İkinci kodda car değişkenine birden fazla değer aktarılmaktadır. var car = {type:"Fiat", model:"500", color:"white"}; 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"};
Objelerde Özelliklere Erişim Obje özelliklerine iki yolla erişilebilir. objectName.propertyName İkinci yol objectName["propertyName"] var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; Örnek 1.Yöntem 2.Yöntem person.lastName; person["lastName"];
Objelerde Metotlara Erişim Obje metodlarına erişim objectName.methodName() var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; Örnek Doğru Erişim Hatalı Erişim name = person.fullName(); name = person.fullName;
Obje Özellik Örneği <!DOCTYPE html> <html> <body> <p id="demo">Display the result here.</p> <script> var person = {firstName:"John", lastName:"Doe"}; document.getElementById("demo").innerHTML = person.firstName; </script> </body> </html>
Obje Metod Örneği <!DOCTYPE html> <html> <body> <p id="demo">Display the result here.</p> <script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); </script> </body> </html>
Değişkenlerin Yaşam Alanları 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.
Global Değişkenler 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 }
Global Değişken Örneği <!DOCTYPE html> <html> <body> <p>A GLOBAL variable can be accessed from any script or function.</p> <p id="demo"></p> <script> var carName = "Volvo"; myFunction(); function myFunction() { document.getElementById("demo").innerHTML = "I can display " + carName; } </script> </body> </html>
Lokal Değişkenler 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 »
Lokal Değişken Örneği <!DOCTYPE html> <html> <body> <p>A local variable can only be accessed from within the function where it was declared.</p> <p id="demo"></p> <script> myFunction(); document.getElementById("demo").innerHTML = "I can display " + typeof carName; function myFunction() { var carName = "Volvo"; } </script> </body> </html>
String Özellikleri 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."
String Özel Karekterler Code Outputs \' single quote \" double quote \\ backslash \n new line \r carriage return \t tab \b backspace \f form feed
String Metodlar Method Description 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
String Metodlar 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
String Örnekler <!DOCTYPE html> <html> <body> <p id="p1">Please locate where 'locate' occurs!.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var str = document.getElementById("p1").innerHTML; var pos = str.indexOf("locate"); document.getElementById("demo").innerHTML = pos; } </script> </body> </html>
String Örnekler <!DOCTYPE html> <html> <body> <p>The substr() method extract a part of a string and returns the extracted parts in a new string:</p> <p id="demo"></p> <script> var str = "Apple, Banana, Kiwi"; document.getElementById("demo").innerHTML = str.substring(7,13); </script> </body> </html>
Number Metodları 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
Number Metodları 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
Tarih Saat Metodları new Date() new Date(milliseconds) new Date(dateString) new Date(year, month, day, hours, minutes, seconds, milliseconds) <sript> var d = new Date(); document.getElementById("demo").innerHTML = d; </script>
Dizileri Kullanma Syntax: var array-name = [item1, item2, ...]; Example: var cars = ["Saab", "Volvo", "BMW"]; <p id="demo"></p> <script> var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars[0]; </script>
Dizilerde Farklı Tipleri Barındırma 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
Dizi Elemanlarında Dolaşma 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]; }
Diziye Eleman Ekleme Diziye eleman iki yolla eklenebilir. Son eleman olarak ekleme var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits Push metoduyla ekleme var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Lemon"); // adds a new element (Lemon) to fruits
Boolean Değerler İ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 0 değeri false olarak değerlendirilir. var x = 0; Boolean(x); // returns false
Karşılaştırma Operatörleri Operator Description Comparing Returns == equal to x == 8 false x == 5 true x == "5" === equal value and equal type x === 5 x === "5" != not equal x != 8 !== not equal value or not equal type x !== 5 x !== "5" x !== 8 > greater than x > 8 < less than x < 8 >= greater than or equal to x >= 8 <= less than or equal to x <= 8
Karşılaştırma Operatörleri Operator Description Comparing Returns == equal to x == 8 false x == 5 true x == "5" === equal value and equal type x === 5 x === "5" != not equal x != 8 !== not equal value or not equal type x !== 5 x !== "5" x !== 8 > greater than x > 8 < less than x < 8 >= greater than or equal to x >= 8 <= less than or equal to x <= 8
Lojic Operatörler Operator Description Example && and (x < 10 && y > 1) is true || or (x == 5 || y == 5) is false ! not !(x == y) is true
Karşılaştırma Syntax if (condition) { block of code to be executed if the condition is true } if (hour < 18) { greeting = "Good day"; }
Karşılaştırma 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"; }
Karşılaştırma 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"; }
Karşılaştırma Örneği <!DOCTYPE html> <html> <body> <p id="demo">Display the result here.</p> <script> var greeting; var hour = new Date().getHours(); if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } document.getElementById("demo").innerHTML = greeting; </script> </body> </html>
Switch switch(expression) { case n: code block break; case n: code block break; default: default code block }
Switch 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; }
Döngüler for for (statement 1; statement 2; statement 3) { code block to be executed } for (i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; } for (i = 0, len = cars.length, text = ""; i < len; i++) { text += cars[i] + "<br>"; }
Döngüler for <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var text = ""; var i; for (i = 1; i < 10; i = i + 2) { text += i + "<br>"; } document.getElementById("demo").innerHTML = text; </script> </body> </html>
Döngüler while while (condition) { code block to be executed } while (i < 10) { text += "The number is " + i; i++; }
Döngüler do while do { code block to be executed } while (condition); do { text += "The number is " + i; i++; } while (i < 10);
Döngüler do while <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var i = num1; while (i < num2) { document.getElementById("demo").innerHTML += i + "<br>"; i++; } </script> </body> </html>
Break Break komutu döngüyü kullanıldığı yerde kırarak sonlandırır. for (i = 0; i < 10; i++) { if (i === 3) { break; } text += "The number is " + i + "<br>"; }
Continue Continue komutu döngüyü kullanıldığı yerde işlem yaptırmadan bir sonraki iterasyona yönlendirir. for (i = 0; i < 10; i++) { if (i === 3) { continue; } text += "The number is " + i + "<br>"; }
JavaScript JSON 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"} ] }
JavaScript JSON 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"}
JavaScript JSON 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"} ]
JavaScript JSON İ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);
JavaScript JSON <!DOCTYPE html> <html> <body> <h2>Create Object from JSON String</h2> <p id="demo"></p> <script> 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; </script> </body> </html>
JavaScript Form Elemanlar 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. <p id="demo">İçerikler buraya gelecek.</p> var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text;
JavaScript Form Doğrulama 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; } } <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
JavaScript Form Elemanlar 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. <p id="demo">İçerikler buraya gelecek.</p> var x = document.forms["frm1"]; var text = ""; var i; for (i = 0; i < x.length; i++) { text += x.elements[i].value + "<br>"; } document.getElementById("demo").innerHTML = text;
JavaScript Form Doğrulama 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; } } <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form>
JavaScript Form Doğrulama <!DOCTYPE html> <html> <head><script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("Name must be filled out"); return false; } </script></head> <body> <form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post"> Name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html>