1 / 92

IT50 4 ~~ JScript ~~ JavaScript’e giriş II

IT50 4 ~~ JScript ~~ JavaScript’e giriş II. Yrd. Doç. Dr. Yuriy Mishchenko. Javascript nesneleri. Javascript başından nesne tabanlı programlama dili değil, ancak başından önemli derecede birkaç nesnelere bağlı Ayrıca Javascript nesne tabanlı programlama için aletler de sağlar.

keith
Download Presentation

IT50 4 ~~ JScript ~~ JavaScript’e giriş II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. IT504~~JScript~~JavaScript’e giriş II Yrd. Doç. Dr. Yuriy Mishchenko

  2. Javascript nesneleri Javascript başından nesne tabanlı programlama dili değil, ancak başından önemli derecede birkaç nesnelere bağlı Ayrıca Javascript nesne tabanlı programlama için aletler de sağlar http://www.scinetcentral.com/~mishchenko/MIT504.html

  3. Javascript nesneleri Javascript programlamaya başlarken Javascript nesnelerinden en önemli olan birkaç sistem nesnesi; bunlar Document, Window, History, Screen, Navigator, String, Date, Math, Array, Number ve Global http://www.scinetcentral.com/~mishchenko/MIT504.html

  4. Javascript String nesnesi Javascriptte String nesnesi metin işleme için son derecede önemli Javascript nesnesi tüm metin içeren değişkenler için otomatik olarak oluşturulur, yani Javascriptte metin değerlerinin hepsi String sınıfından nesneler http://www.scinetcentral.com/~mishchenko/MIT504.html

  5. Javascript String nesnesi Javascriptte String nesnesi metin işleme için son derecede önemli Javascript nesnesi tüm metin içeren değişkenler için otomatik olarak oluşturulur, yani Javascriptte metin değerlerinin hepsi String sınıfından nesneler Javascript String işlemleri her zaman belirli string değişkeninde uygulanır http://www.scinetcentral.com/~mishchenko/MIT504.html

  6. Örnek <!DOCTYPE html><html><body> <script>var txt="Hello World!";document.write(txt.length);var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";document.write(txt.length); </script></body></html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  7. String fonksiyonları: metin özellikleri ve standarlaştırılması • Javascript String fonksiyonları • string.length – metnin uzunluğu • string.charAt/ charCodeAt – metnin belirli pozisyonundaki harf • string.toLowerCase/ toUpperCase – metindeki harfleri küçük/büyük hartlere değiştiriyor • string.trim – metin başında veya sonunda olan boşlukları siliyor http://www.scinetcentral.com/~mishchenko/MIT504.html

  8. Örnek <!DOCTYPE html> <html><body> <script> var txt="Hello World!" document.write("<li>Uzunluk " + txt.length) document.write("<li>6. harf " + txt.charAt(5)) document.write("<li>6. harfinkodu " + txt.charCodeAt(5)) document.write("<li>kucukharf " + txt.toLowerCase()) document.write("<li>buyukharf " + txt.toUpperCase()) document.write("<li>trim " + txt.trim()) </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  9. String temel arama ve kopyalama • Javascript String fonksiyonları • string.indexOf/lastIndexOf – metinde belirli altmetnini arıyor • string.substr/substring – metnin belirli pozisyonundaki altmetnini kopyalıyor • string.replace - metindeki altmetnini yeni metin ile değiştiriyor • string.split – metin belirli sembolü kullanarak parçalıyor, çıktı parçaların bir dizisi (Array) http://www.scinetcentral.com/~mishchenko/MIT504.html

  10. Örnek <!DOCTYPE html> <html><body> <script> var txt="Hello World!" document.write("<li>indexOf 'o' " + txt.indexOf("o"))//çıktı 4 document.write("<li>lastIndexOf 'o' " + txt.lastIndexOf("o")) //çıktı 7 document.write("<li>1. harften 4. harflıkaltmetni " + txt.substr(1,4)) //çıktı "ello" document.write("<li>1. harften 5. harfe altmetni " + txt.substring(1,5)) //çıktı "ello" document.write("<li>Bye World! " + txt.replace("Hello","Bye")) //çıktı Bye World document.write("<li>Tüm kelimeler " + txt.split(" ")) //çıktı Hello,World!, </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  11. String regex arama ve kopyalama • Javascript String fonksiyonları • string.search – regex veya örnek kullanarak metinde arama, bulunmuş sonuçlar için pozisyonunu veriyor • string.match - regex veya örnek kullanarak metinde arama, bulunmuş sonuçlar için kendisini veriyor (dizi veya Array) • string.replace - regex veya örnek kullanarak metinde arama, bulunmuş sonuçları yeni metine değiştiriyor • string.split - regex veya harf kullanarak metni parçalara parçalıyor, çıktı – parçaların dizisi (Array) http://www.scinetcentral.com/~mishchenko/MIT504.html

  12. Örnek <!DOCTYPE html> <html><body> <script> var txt="Hello World!" document.write("<li>harf buyukluk duyarsiz arama " + txt.search(/world/i)) // regex, çıktı 6 document.write("<li>harf buyukluk duyarsiz arama " + txt.match(/world/i)) // regex, çıktı "World" document.write("<li>harf buyukluk duyarsiz replace " + txt.replace(/world/i,"dunya!")) // regex, çıktı "Hello dunya" document.write("<li>doğru kelime parçalanması " + txt.split(/[_\W]+/)) // regex, çıktı "Hello, World," </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  13. String diğer • Javascript String fonksiyonları • string.slice – string.substring'in aynısı • string.concat – string "+" öperatörünün aynısıeg: var h="Hello ", h.concat("World") => "Hello World" http://www.scinetcentral.com/~mishchenko/MIT504.html

  14. Javascript Date nesnesi Javascript Date nesnesi tarih kaydetme, elde etme ve biçimlendirme için kullanılır Javascriptte Date nesneleri, new Date() komutu ile her zaman oluşturulur Date nesnesine belirli tarih şu şekilde atanabilirnew Date() – şimdiki tarih ve zamannew Date(milisaniye) 1970/01/01'ten sonra millisaniye yani UNIX timestampnew Date(tarih stringi)new Date(yıl,ay,gün,saat,dakika,saniya,milisaniye) http://www.scinetcentral.com/~mishchenko/MIT504.html

  15. Örnek <!DOCTYPE html> <html><body> <script> varbugun = new Date() var d1 = new Date("October 13, 1975 11:13:00") var d2 = new Date(79,5,24) var d3 = new Date(79,5,24,11,33,0) </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  16. Javascript Date alınması • Javascipt Date fonksiyonları: • getDate, getMonth, getFullYear, getHours, getMinutes, getSeconds, getMilliseconds – ilgili tarihin parçasını veriyor • getUTCDate, getUTCMonth, getUTCFullYear, getUTCHours, getUTCMinutes, getUTCSeconds, getUTCMilliseconds – aynısı UTC zamanı kullanarak • getTime – UNIX timestamp, yani 1970/01/01 ten sonra geçtiği milisanye sayısı http://www.scinetcentral.com/~mishchenko/MIT504.html

  17. Javascript Date güncelleştirilmesi • Javascipt Date fonksiyonları: • setDate, setMonth, setFullYear, setHours, setMinutes, setSeconds, setMilliseconds • setUTCDate, setUTCMonth, setUTCFullYear, setUTCHours, setUTCMinutes, setUTCSeconds, setUTCMilliseconds • setTime – UNIX timestamp, yani 1970/01/01 ten sonra geçtiği milisanye sayısı http://www.scinetcentral.com/~mishchenko/MIT504.html

  18. Javascript Date biçimlendirilmesi • Javascipt Date fonksiyonları: • Date.parse – tarih metni okuyor, sonuç – UNIX timestamp (1970/01/01 ten geçtiği ms sayısı) • toDateString, toTimeString, toISOSring, toUTCString, toLocaleString, toString – tarih metin formatında göstermek • toJSONString, tarih JSON formatında göstermek http://www.scinetcentral.com/~mishchenko/MIT504.html

  19. Javascript Date tipik işlemleri • Tarihin metinlerden okunması • new Date("tarih metni") kullanarak yapılabilir • Date.parse("tarih metni") ve setTime() kullanarak yapılabilir • String işlemleri ve new Date(yıl,ay,gün,...) kullanarak yapılabilir • NOT: ilk iki yöntemler standart olmayan formatlarıla sorun çıkartabilir • NOT: javascript'te Date nesnesindeki Month değerleri 0 ile başlar, yani 0 ocak demek, 1 şubat, vb • NOT: javascript'te Date nesnesindeki Day değerleri 0 ile başlar, 0 pazar demek, 1 Pazartesi demek, vb http://www.scinetcentral.com/~mishchenko/MIT504.html

  20. Örnek <!DOCTYPE html> <html><body> <script> var tarih = "2005-07-08" var d1 = new Date(tarih) var d2 = new Date(); d2.setTime(Date.parse(tarih)) var parts = tarih.split("-"); d3 = new Date(parts[0],parts[1]-1,parts[2]) document.write(d1 + "<br/>" + d2 + "<br/>" + d3 + "<br/>") //çıktı // Fri Jul 08 2005 03:00:00 GMT+0300 (Turkey Daylight Time) // Fri Jul 08 2005 03:00:00 GMT+0300 (Turkey Daylight Time) // Fri Jul 08 2005 03:00:00 GMT+0300 (Turkey Daylight Time) </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  21. Javascript Date tipik işlemleri • Javascript ile tarih güncelleştirilmesi • Date nesnesinin "set" ve "get" fonksiyonları kullanrak tarih kollayca ilerlenebilir • Not: hafta/ay sinirleri otomatik olarak dikkate alınır http://www.scinetcentral.com/~mishchenko/MIT504.html

  22. Örnek <!DOCTYPE html> <html><body> <script> varbugun = new Date() var d1=bugun, d2=bugun, d3=bugun d1.setDate(d1.getDate()+1) //+ 1 gün, yarın d2.setMonth(d2.getMonth()+1) //+ 31 gün d2.setYear(d2.getYear()+1) //+ 365 gün document.write(d1.toString + "<br/>" + d2.toString + "<br/>" + d3.toString + "<br/>") </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  23. Javascript Date tipik işlemleri • Javascript Date biçimlendirilmesi • toString fonksiyonları kullanarak yapılabilir • Date nesnesi stringe direkt olarak ekleyerek yapılabilir • getFullYear, getMonth, getDate, ... fonksiyonları kullanarak elle yapılabilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  24. Örnek <!DOCTYPE html> <html><body> <script> var d1 = new Date("2005-07-08") document.write(d1 + "<br/>") document.write(d1.toString() + "<br/>") document.write(d1.toDateString() + "<br/>") document.write(d1.toTimeString() + "<br/>") document.write(d1.toUTCString() + "<br/>") document.write(d1.toLocaleString() + "<br/>") document.write(d1.getFullYear() + "-" + (d1.getMonth()+1) + "-" + d1.getDate()) //çıktı: // Fri Jul 08 2005 03:00:00 GMT+0300 (Turkey Daylight Time) // Fri Jul 08 2005 03:00:00 GMT+0300 (Turkey Daylight Time) // Fri Jul 08 2005 // 03:00:00 GMT+0300 (Turkey Daylight Time) // Fri, 08 Jul 2005 00:00:00 GMT // 7/8/2005 3:00:00 AM // 2005-7-8 </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  25. Javascript Math nesnesi Javascript Math nesnesi matematiksel işlemler için kullanılır Javascript Math nesnesi önemli matematiksel sabitler ve fonksiyonlar içerir http://www.scinetcentral.com/~mishchenko/MIT504.html

  26. Javascript Math nesnesi • Javascript Math sabitleri • E – Euler sayısı - 2.718... • PI – pi sayısı – 3.141... • SQRT2 – karekök 2 – 1.414 http://www.scinetcentral.com/~mishchenko/MIT504.html

  27. Javascript Math nesnesi • Javascript Math fonksiyonları • abs, cos, sin, tan, acos, asin, atan, exp, log, max, min, ceil, round, floor, sqrt, pow, random http://www.scinetcentral.com/~mishchenko/MIT504.html

  28. Örnek <!DOCTYPE html> <html><body> <script> for(var i=1; i<100; i++) { document.write(i + " – " + Math.pow(i,3) + "<br/>") } </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  29. Javascript Number nesnesi Javascript Number nesnesi, javascript'in sayısal değişkenleri için baze temel fonksiyonları sağlar http://www.scinetcentral.com/~mishchenko/MIT504.html

  30. Javascript Number nesnesi • Javascript Number fonksiyonları • MAX_VALUE, MIN_VALUE, NaN, POSITIVE_INFINITY, NEGATIVE_INFINITY sabitleri • toExponential, toFixed, toPrecision, toString – farklı sayın metin formatları http://www.scinetcentral.com/~mishchenko/MIT504.html

  31. Örnek <!DOCTYPE html> <html><body> <script> var pi = Math.PI document.write(pi.toExponential()+"<br/>") //3.141592653589793e+0 document.write(pi.toFixed(2)+"<br/>") //3.14 document.write(pi.toPrecision(2)+"<br/>") //3.1 document.write(pi.toString()+"<br/>") //3.141592653589793 </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  32. Javascript Array nesnesi Javascript Array nesnesi, javascript dizileri için baze işlemler tanımlar Javascriptte her tür tanımlanmış dizi, Array sınıfından bir nesnevar dizi = [1,2,3,4,5]  Array'den bir nesnevardizi[0]=1;dizi[1]=2; dizi[3]=3; dizi[4]=4; dizi[5]=5  Array'den bir nesnesi http://www.scinetcentral.com/~mishchenko/MIT504.html

  33. Javascript Array temel işlemleri • Javascript Array fonksiyonları • length – dizinin uzunluğu • concat – iki dizi birleştiriyor • reverse – dizi elemanlarının sırası tam terse değiştşriyor • join – dizi elemanlarından bir string oluşturuyor • sort – dizi sıralandırıyor • toString – dizi stringe değiştiriyor http://www.scinetcentral.com/~mishchenko/MIT504.html

  34. Örnek <!DOCTYPE html> <html><body> <script> var a = new Array(3,2,1); document.write(a.toString() + "<br/>") // 3,2,1 a=a.concat([4,5]) document.write(a.join() + "<br/>") // 3,2,1,4,5 document.write(a.reverse() + "<br/>") // 5,4,1,2,3 document.write(a.sort() + "<br/>") // 1,2,3,4,5 </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  35. Javascript Array arama ve güncelleştirme işlemleri • Javascript Array fonksiyonları • indexOf, lastIndexOf –dizide elemanı arıyor • pop, push – dizinin son elemanı çıkart/ekle (yığın işlemleri) • shift, unshift – dizinin ilk elemanı çıkart/ekle (kuyruk işlemleri) • slice – iki pozisyon arasından altdizinini seçiyor (String'in substring'e benzer) • splice – belirli pozisyonda elemanı silip yeni elemanı ekliyor (String'in replace'e benzer) http://www.scinetcentral.com/~mishchenko/MIT504.html

  36. Örnek <!DOCTYPE html> <html><body> <script> var a = new Array(1,2,3,3,3,3,4,5); document.write(a.indexOf(3) + "<br/>") //çıktı 2 document.write(a.lastIndexOf(3) + "<br/>") //5 a=a.slice(0,3) document.write(a + "<br/>") //1,2,3 a.push(5) document.write(a + "<br/>") //1,2,3,5 document.write(a.pop() + ";" + a + "<br/>") //5;a=1,2,3 a.unshift(5) document.write(a + "<br/>") //5,1,2,3 document.write(a.shift() + ";" + a + "<br/>") //5;a=1,2,3 a.splice(1,1,5,5,5) document.write(a + "<br/>") //1,5,5,5,3 </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  37. Javascript Array arama ve diğer işlemleri Javascript Array'in çok yararlı bir özelliği, Array.prototype özelliğini kullanarak yeni foksiyonların tanımlanabilmesiArray.prototype.yeni-fonk-ismi = function() {islem;} http://www.scinetcentral.com/~mishchenko/MIT504.html

  38. Örnek <!DOCTYPE html> <html><body> <script> Array.prototype.kareler = function() { for (var i=0; i<this.length; i++) { this[i]=Math.pow(this[i],2); } } var a = new Array(1,2,3,4,5); a.kareler() document.write(a + "<br/>) </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  39. Javascript Global nesnesi Bunlara ek olarak Javascript Global sistem nesnesini tanımlar; bu nesne birkaç faydalı fonksiyon tanımlar, ancak bu fonksiyonlar javascriptte direk olarak Global nesnesini belirtmeden çağırılır http://www.scinetcentral.com/~mishchenko/MIT504.html

  40. Javascript Global nesnesi • Global nesnesinin fonksiyonları • decodeURI, encodeURI – URI http isteği için encode/decode ediyor • eval – javascript string olarak tanımlanmış ifadesini çalıştırıyor • isFinite, isNaN – bir değişken için sonsuzluk ve not-a-number durumunu kontrol ediyor • parseFloat, parseInt – string ilgili sayıya çeviriyor • String – nesne bir stringe değiştiriyor http://www.scinetcentral.com/~mishchenko/MIT504.html

  41. Örnek <!DOCTYPE html> <html><body> <script> varuri = "my test.php?isim=Çağdaş&soyisim=Çiftçi"; var enc = encodeURI(uri) document.write(enc + "<br/>"+decodeURI(enc) + "<br/>"); // cikti //my%20test.php?isim=%C3%83%E2%80%A1a%C3%84%C5%B8da%C3%85%C5%B8&... // ...soyisim=%C3%83%E2%80%A1ift%C3%83%C2%A7i //my test.php?isim=Çağdaş&soyisim=Çiftçi var $x="12+33/3+5"; document.write(eval($x)+"<br/>") // cikti28 (yanisonucu) document.write(isFinite(2/0)+"<br/>") // false (yanisonsuz) document.write(isNaN(Infinity/Infinity)) // true (yanisayidegil) </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  42. Javascript tarayıcı nesneleri Javascript tarayıcı nesneleri, web sayfası, web tarayıcı, ve kullanıcının bilgisayarının özellikleri hakkında javascript programlarına bilgi verir Javascript tarayıcı nesneleri Document, Window, History, Screen, Navigator ve Location http://www.scinetcentral.com/~mishchenko/MIT504.html

  43. Javascript Window nesnesi Javascript Window nesnesi, web tarayıcının penceresini temsil eder ve ilgili önemli değişkenleri ve fonksiyonları içerir Window nesnesinin özellik ve fonksiyon sayısı çok fazla, ama en önemli aşağıda geçireriz http://www.scinetcentral.com/~mishchenko/MIT504.html

  44. Javascript Window nesnesi • Window nesnesi diğer belge nesnelere ana-nesnesi: • window.document – pencerede açılmış HTML belgenin Document nesnesi • window.screen –pencerenin görsel özelliklerini tanımlayan Screen nesnesi • window.navigator – pencerenin web tarayıcı özelliğini tanımlayan Navigator nesnesi • window.location –pencerenin URL ve diğer özelliklerini tanımlayan Location nesnesi • window.history –pencerede açılmış HTML nesnesine bağlı URL tarihinin History nesnesi http://www.scinetcentral.com/~mishchenko/MIT504.html

  45. Javascript Window nesnesi • Pencerenin bilgileri • window.innerHeight, innerWidth – belgenin yükseklik ve boyut içerir • window.pageXoffset, pageYoffset – scrollbar ile ilgili pencerenin pozisyonu içerir • window.screenLeft, screenRight, screenX, screenY – pencerenin ekranda pozisyonu içerir • window.name – pencerenin ismini içerir • window.parent, opener, top – pencereyi açtığı pencere hakkında bilgi içerir http://www.scinetcentral.com/~mishchenko/MIT504.html

  46. Örnek <!DOCTYPE html> <html> <body> <h1>Pencerebilgileri</h1> <script> document.write("name:" + window.name + "<br/>") document.write("width:" + window.innerWidth + "<br/>") document.write("height:" + window.innerHeight + "<br/>") document.write("ScreenX:" + window.screenX + "<br/>") document.write("ScreenY:" + window.screenY + "<br/>") </script> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  47. Javascript Document nesnesi Javascript Document nesnesi, belge bilgileri içerir Bunları, DOM yani Belge Nesne Modeli konuşurken gözden geçireceğiz to be continued ... http://www.scinetcentral.com/~mishchenko/MIT504.html

  48. Javascript History nesnesi • Javascript History nesnesi, tarayıcının URL tarihi içerir ve kontrol eder • length özelliği • back(), forward(), go() metotlar, URL tarihinde geri, ileri ve diğer belirli bir URL indirmeye başlatabilir http://www.scinetcentral.com/~mishchenko/MIT504.html

  49. Örnek <!DOCTYPE html> <html> <head> <script> function goBack() { window.history.go(-2) } </script> </head> <body> <button onclick="goBack()">2 sayfa geri git</button> </body> </html> http://www.scinetcentral.com/~mishchenko/MIT504.html

  50. Javascript Screen ve Navigator nesnesi • Javascript Screen nesnesi, bilgisayarın ekranın özelliklerini gösteriyor • screen.height • screen.width • screen.pixelDepth, colorDepth – renk çözünürlüğü http://www.scinetcentral.com/~mishchenko/MIT504.html

More Related