Java script

5,723 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,723
On SlideShare
0
From Embeds
0
Number of Embeds
3,000
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Java script

  1. 1. Bilg.Yük.Müh.Oğuzhan TAŞ AkareSoft Yazılım Web Tasarım & Programlama Version 1..0.0.2 AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  2. 2. JavaScript Nedir? JavaScript bir script(betik) dilidir. Programlama dili değildir, bir script(betik) dilidir. Kendi başına çalışan EXE, COM dosyalar üretemezsiniz. JavaScript, ağırlıklı olarak tarayıcılar üzerinde çalışır. JavaScript ile Java Programlama Dili karıştırılmamalıdır. JavaScript, istemci (client) tarafında çalışır. JavaScript, node.js gibi sunucu(server) tarafında çalışan platformlarla karıştırılmamalıdır. Node.js ayrı bir sunum olarak anlatılacaktır. JavaScript, genelde istemci tarafında çalışarak sunucu yükünü azaltır. Sadece kullanıcının tarayıcısında sonuçlar üretilir. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  3. 3. JavaScript JavaScript kodları aşağıdaki gibi script tag’leri arasında yazılır. <script> </script> veya <script type="text/javascript"> </script> JavaScript kodları js uzantılı dosyalara yazılıp, HTML içinde <head> etiketleri arasında çağrılabilir. <script type="text/javascript" src="script.js"></script> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  4. 4. Ekrana yazı yazmak JavaScript dili bir HTML çıkışı oluşturabilir. Bütün Çalışmasını istediğiniz HTML kodlarınızı document.write () içerisinde yazabilirsiniz. <script> document.write("<h1>Bu bir yazı</h1>"); </script> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  5. 5. JavaScript ile Olaylar JavaScript ile form nesnelerine ait olayları kontrol edebiliriz. Örneğin aşağıda bir butona tıklandığında (onclick olayı) ekrana mesaj yazdırıyoruz. Form, Textbox, Radio, Checkbox, Select, Textarea nesneleri hakkında olayları JavaScript ile yönetebiliriz. <button type="button" onclick="alert('Hoş Geldiniz!')">Bana Tıkla!</button> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  6. 6. JavaScript ile HTML içeriği değiştirme JavaScript kullanarak HTML içeriğini değiştirebilirsiniz. Örneğin form nesnelerinden text, select, textarea, radio, checkbox gibi nesnelerin id veya name özelliklerinden o nesneye erişip özelliklerini değiştirebilirsiniz. Örneğin aşağıdaki gibi bir metin kutusu oluşturalım. <input type="text" name="ad" id="ad" value=" Değer giriniz" > Aşağıda ad isimli nesnenin değeri boşaltılıyor. document.getElementById("ad").value=""; AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  7. 7. JavaScript ile CSS Değişikliği Aşağıdaki fonksiyon sayfa yüklendiğinde çalıştırılarak zemin renginin kırmızı yapılmasını sağlıyor. function zeminRenkDegistir(renk){ document.body.style.background = renk; } <BODY onload="zeminRenkDegistir('red');"> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  8. 8. JavaScript ile CSS Değişikliği JavaScript kullanarak CSS kodlarında değişikliği yapabilirsiniz. Örneğin aşağıda CSS ile oluşturulan kutunun rengini üzerine tıklandığında değiştirelim. .kutu{ color:#FFF; background-color:#F20000; width:250px;height:250px; } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  9. 9. JavaScript ile CSS Değişikliği function renkdegistir() { document.getElementById("kutu").styl e.background="green"; } Aşağıdaki şekilde HTML içinde çağırıyoruz. <div class="kutu" id="kutu" onclick="renkdegistir();"> Bu bir kutucuk </div> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  10. 10. JavaScript ile Giriş Kontrolü JavaScript ile form giriş kontrolünü kolaylıkla yapabilirsiniz. Örneğin;  metin kutusuna değer girilmemişse kaydedilmemesini, e-mail adresinin uygun formatta girilip girilmediğini; Tweeter’da olduğu gibi textarea ‘ya maksimum kaç karakter girileceğini vs. kontrol edebilirsiniz. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  11. 11. Form Kontrolü Aşağıdaki formda sadece bir metin kutusu ve bir form bulunmaktadır. Metin kutusunun boş geçilmemesi ve girilen metin uzunluğunun 4’den küçük olması halinde uyarı verilmesini sağlayan JavaScript kodunu yazınız. <body> <form id="kayitForm"> <label>Adınızı Giriniz: </label> <input type="text" name="ad" id="ad"><br> <input type="button" onclick="formKontrol();" value="Kaydet"><br> </form> </body> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  12. 12. Fonksiyon function formKontrol(){ deger= document.getElementById("ad").value; if (deger == "" ){ alert("Lütfen ad alanını boş geçmeyiniz"); } else{ if (deger.length<4) alert("Lütfen 3den büyük giriniz."); else alert("Tebrikler"); } } } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  13. 13. parseInt() parseInt() fonksiyonu bit string değeri tam sayıya dönüştürmek için kullanacağınız bir fonksiyondur. yenideger = parseInt(gelenDeger); Örneğin iki metin kutusunda sayılar girildiğinde ve matematiksel işlem yapılmak istendiğinde girilen değerler mutlaka sayıya çevrilmelidir. tamsayi=parseInt(document.getElementById("sayi")) AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  14. 14. parseInt() Kullanımı Aşağıdaki fonksiyon iki metin kutusuna girilen sayı Değerlerini toplayarak ekrana mesaj yazmaktadır. function topla(){ sayi1=parseInt(document.getElementById("sayi1").value); sayi2=parseInt(document.getElementById("sayi2").value); toplam = sayi1 + sayi2; alert(toplam); } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  15. 15. parseFloat() Kullanımı Özellikle küsüratlı değerler üzerine işlem yapılıyorsa, string bir ifadeyi küsüratlı hale çevrimek için kullanılır. Bir integer bir float ifadenin sonucu float’tır. İki float ifadenin sonucu float’tır. parseInt fonksiyonu sayı float olsa bile küsüratını atarak tam sayı yapar. sayi1=parseFloat(document.getElement ById("sayi1").value); AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  16. 16. JS Dosyasını çağırma JavaScript fonksiyonlarını ve komutlarını bir dosyaya kaydedip HTML sayfanız içerisinden aşağıdaki gibi çağırabilirsiniz. Genelde JavaScript dosyalar JS klasörüne atılır, JavaScript dosyalarının uzantısı ise JS olur. <head></head> tagleri arasında aşağıdaki gibi yazarak da JavaScript dosyalarını çağırabilirsiniz. <script src="myScript.js"></script> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  17. 17. JavaScript Değişkenler var x; var araba="Ford"; Diziler var araba=new Array(); araba[0]="Saab"; araba[1]="Volvo"; araba[2]="BMW"; AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  18. 18. Diziler için özel fonksiyonlar pop() : Dizinin son elemanını kaldırır, ve bu eleman geri döner. push() : Dizinin sonuna yeni eleman ekler, yeni uzunluk geri döner. concat(): İki diziyi birleştirir, sonuçta yeni dizi döner. indexOf(): Bir elamanı dizide arar, geriye pozisyonunu döndürür. lastIndexOf(): indexOf() gibidir, sondan başlar. reverse(): Dizinin elemanlarını ters çevirir. join(): Tüm dizi elemanlarını bir stringde birleştirir. sort(): Dizinin elamanlarını sıralar. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  19. 19. Object(Nesne) Tipi JavaScript’de Boolean, Integer, Float, Array tipleri dışında Object(Nesne) tipi de vardır. kisi=new Object(); kisi.adi="Cüneyt "; kisi.soyadi="Arkın"; kisi.yas=50; kisi.gozrengi="mavi"; nesne.özellik şeklinde bir nesnenin özelliğine, nesne.Metodadi() şeklinde bir nesnenin metoduna erişebiliriz. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  20. 20. Nesneler var kisi={ adi : "Oğuzhan", soyadi : " Taş", TC : 35023310233; }; isim= kisi.adi; isim=kisi[" adi"]; AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  21. 21. confirm() kullanımı function sorbakalim() { var cevap = confirm("Ayrılmak ister misiniz?") if (cevap){ alert("Güle güle!") window.location = "http://www.google.com/"; } else{ alert("Kaldığınız için Teşekkürler!") } } <input type="button" onclick="sorbakalim()" value="Siteden Ayrıl"> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  22. 22. prompt kullanımı function topla(){ sayi1=prompt("1.sayı",""); sayi2=prompt("2.sayi",""); if (sayi1 !="" && sayi2!=""){ toplam =parseFloat(sayi1) +parseFloat(sayi2); alert("Toplam değeri="+toplam); } else alert("Lütfen boş geçmeyiniz"); } <input type="button" onclick="topla();" value="topla"> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  23. 23. Döngüler function say() { for(i=1; i<10; i++) alert(i); } For ile Sonsuz Döngü for (;;){ } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  24. 24. For Sonsuz Döngüsü (Döngüler For içinde Break Kullanımı) function say() {  for(i=1;; i++) {  if (i==15) break;  alert(i); } } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  25. 25. While Döngüsü function say() { i=1; while(i<10){  alert(i);  i++; } } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  26. 26. While Sonsuz Döngüsü function say() { deger=true; i=1; while(deger){  alert(i);  if (i==15) break;  i++; } } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  27. 27. Döngü ile Dizi Toplama function dizitopla() { var sayilar=new Array(); sayilar[0]=1; sayilar[1]=5; sayilar[2]=10; toplam=0; for (i=0;i<sayilar.length;i++){ toplam+=sayilar[i]; alert(sayilar[i]); } alert("Toplam Sonucu="+toplam); } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  28. 28. Ratsgele Sayı Üretme Math.random(); 0 ile 1 arasında sayı üretir. Math.floor((Math.random()*10)+1); Buarada 1 ile 10 arasında sayı üretiliyor, 1 eklenmesinin nedeni üretilenlerin sıfırdan AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  29. 29. Olaylar – Onfocus Olayı Örneğin bir metin kutusuna odaklanınca rengini değiştirelim. function aktifYap(x) { x.style.background="#FFFFBB"; } function aktifYap2(x) { x.style.background="green"; x.style.color="white"; } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  30. 30. Olaylar – Onfocus Olayı Adınızı Giriniz: <input type="text" onfocus="aktifYap(this)"><br> Soyadınızı Giriniz: <input type="text" onfocus="aktifYap2(this)"><br> <p>Metin kutusuna odaklanınca rengi sarı veya yeşil olacak.</p> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  31. 31. Olaylar Onmousedown Onmouseup Örneğin fare şemsiye kapalı iken üzerine gelince şemsiyenin açılasını sağlayalım. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  32. 32. Olaylar Onmousedown Onmouseup function semsiyeAc() {document.getElementById('semsiye').src="semsiye acik.jpg"; } function semsiyeKapat() { document.getElementById('semsiye').src="semsi yekapali.jpg"; } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  33. 33. Olaylar Onmousedown Onmouseup Aşağıdaki id’si semsiye olan nesnede iki olay tetikleniyor. Onmousedown olayında semsiyeAc fonksiyonu, onmouseup olayında semsiyeKapat fonksiyonları çağrılıyor. <img id="semsiye" onmousedown="semsiyeAc()" onmouseup="semsiyeKapat()" src="semsiyekapali.jpg" /> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  34. 34. Olaylar onmouseout ve onmouseover Onmouseover olayı fare nesne üzerine getirilince tetiklenir, onmouseout ise fare nesne üzerinde alınınca gerçekleştirilir. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ Durum 1 Durum 2 Örneğin metin kutusu nesnemiz Durum 1 deyken fare üzerine getirilince Durum2 Ye geçmesini isteyebiliriz.
  35. 35. Olaylar onmouseout ve onmouseover function aktifYap(x){ x.style.background="#D20000"; x.style.color="#FFF"; x.value=""; } function pasifYap(x) { x.style.background="#FFF"; x.style.color="#000"; } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  36. 36. Olaylar onmouseout ve onmouseover <html> <body> <script> // Önceki sayfadaki fonksiyonlar buraya gelecek </script> Adınızı Giriniz: <input type="text" value="Fareyi üzerime getirin« onmouseover="aktifYap(this);" onmouseout="pasifYap(this);"> </body> </html> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  37. 37. Radio Button olayları Aşağıdaki gibi iki tane radio button olsun, Erkek seçilince ekrana Erkek seçildi, bayan seçilince bayan seçildi yazsın. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  38. 38. Radio Button olayları function sec(){ if (document.formCv.cinsiyet[0].checked){ alert("Erkek seçildi"); } if (document.formCv.cinsiyet[1].checked) alert("Bayan seçildi"); } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  39. 39. Radio Button olayları Formun head kısmına <script> etkiketleri arasında önceki sayfadakileri body kısmına da aşağıdakileri yapıştırınız. <form name="formCv" > Erkek:<input type="radio" name="cinsiyet" value="Erkek" onclick="sec()";> Bayan:<input type="radio" name="cinsiyet" value="Bayan" onclick="sec()";> </form> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  40. 40. Radio Buton Örnek 2 Radio butonlardan erkek seçilince askerlik durumu sorulsun, bayan seçilince sorulmasın. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  41. 41. Radio Buton Örnek 2 function sec(){ if (document.formCv.cinsiyet[0].checked){ document.getElementById('askerlik').style.vi sibility = 'visible'; } if (document.formCv.cinsiyet[1].checked) document.getElementById("askerlik").style.vi sibility="hidden"; } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  42. 42. Radio Buton Örnek 2 <form name="formCv" > Erkek:<input type="radio" name="cinsiyet" value="Erkek" onclick="sec()";> Bayan:<input type="radio" name="cinsiyet" value="Bayan" onclick="sec()";> <br> <select id="askerlik" name="askerlik"> <option value="1">Tecilli</option> <option value="2">Yapıldı</option> <option value="3">Muaf</option> </select> </form> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  43. 43. Checkbox (Onay Kutusu) function HepsiniSec(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = true ; } function HicbiriniSecme(chk) { for (i = 0; i < chk.length; i++) chk[i].checked = false ; } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  44. 44. Checkbox (Çağırma) <input type="button" value="Hepsini Seç" onclick="HepsiniSec(document.frmCheck.dersler);"> <input type="button" value="Hiçbirini Seçme" onclick="HicbiriniSecme(document.frmCheck.dersler );"> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  45. 45. Screen(Ekran) Nesnesi availHeight: Ekran yüksekliğini verir. (Windows Görev Çubuğu Hariç) availWidth: Ekran genişliğini verir. (Windows Görev Çubuğu Hariç) colorDepth: Resimleri gösterirken kullanılan renk paletinin bit derinliğini verir. height: Ekranın toplam yüksekliğini verir. width: Ekranın toplam genişliğini verir. pixelDepth: Ekranın renk çözünürlüğünü verir. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  46. 46. JavaScript hazır fonksiyonlar  Math.abs(-7.25); //abs, mutlak değer fonksiyonudur. 7.25  var c=Math.abs(null); 0 (sıfır)  var x=Math.PI; 3,14  var y=Math.sqrt(16); 4  Math.floor(1.6); //floor fonksiyonu aşağı yuvarlar 1  var d=Math.ceil(5.1); //ceil fonksiyonu yukarı yuvarlar 6  var e=Math.ceil(-5.1) -5 AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  47. 47. JavaScript Sabitler Math.E = Sabit E Sayısı =2,718 Math.PI = Sabit PI sayısı =3,14… Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  48. 48. Pencere Oluşturma-window window.open komutu parametreler alarak yeni bir pencere açılmasını sağlar. Aşağıda 200 piksel genişliğinde, 100 piksel yüksekliğinde bir pencere oluşturularak içine «Bu pencere» yazılıyor. Son satırda da yeni oluşturulan pencereye odaklanılıyor. <script> myWindow=window.open('','','width=200,height=100') myWindow.document.write("<p>Yeni pencere</p>") myWindow.focus(); </script> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  49. 49. Pencere Ayarla  <script>  function pencere_ayarla(genislik, yukseklik, pfile)  {  ust= parseInt((screen.height-yukseklik)/2)-50;  sol= parseInt( (screen.width-genislik)/2);  rapor_m= window.open(pfile,'Bul','location=0,status=0,scrollbars= 1,width='+genislik+',height='+yukseklik+',top='+ust+',le ft='+sol);  rapor_m.focus();  }  </script>  </head>  <body> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  50. 50. String Fonksiyonları charAt(sayi) stringin belirtilen karakterini bulur. var str = "Ankara Havası"; var n = str.charAt(2); Sonuç: k concat() İki veya daha fazla stringi birleştirir. var str1 = "Türkiyenin"; var str2 = "Güzellikleri! "; var n = str1.concat(str2); Sonuç: "Türkiyenin Güzellikleri! " substr(n1,n2) Verilen stringin n1. karakterden itibaren n2 tanesini alır. var str="Türkiyenin Güzellikleri!"; var n=str.substr(2,5) Sonuç: rkiye AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  51. 51. Buton ile Yeni Pencere Aşağıda düğmenin onclick olayı tetiklenerek pencere_ayarla fonksiyonu çalıştırılıyor.  <input name="Dugme" type="button" onClick="pencere_ayarla(550,525,‘http://www.google. com');" value="Yeni Pencere"> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  52. 52. İleri-Geri Sayfaya Gitme (History) Buton şeklinde çağırmak için; <form> <input type="button" value="Önceki Sayfaya Geri Dön" onclick="history.go(-1)"> </form> Link(bağlantı) şeklinde çağırmak için; <a href="javascript:history.go(1)"> Bir sonraki Sayfa </a> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  53. 53. Düzenli İfadeler (Regular Expressions) Değiştiriciler (Modifiers) i: Küçük büyük harf hassasiyetli g: Global karşılaştırma gerçekleştirir. m: Çok satırlı karşılaştırma gerçekleştirir. Köşeli Parantezler (Brackets) [abc] Parantezler içindeki karakterlerden birini bulur. [^abc] Parantezler içinde olmayanları bulur. [0-9] Sıfır ile Dokuz arası rakam bulur. [A-Z] Büyük A ile Z arası karakterleri bulur. [a-z] Küçük a ile z arası karakterleri bulur. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  54. 54. Düzenli İfadeler (Regular Expressions) [A-z] Büyük A ile küçük z arası tüm harfler bulunur. [adgk] Verilen küme içerisindekileri bulunur. [^adgk] Verilen küme dışındakileri bulur. [red|green|blue] Verilen alternatifler den birini bulur. MetaKarakterler . Bir karakteri bulur, (yeni satır ve satır sonlandırıcı hariç) w Bir kelime karakteri bulur. W Kelime olmayan karakteri bulur. d Bir rakamı bulur AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  55. 55. Düzenli İfadeler (Regular Expressions) D Rakam olmayanları bulur. s Beyaz boşlukları (whitespace) bulur. S Beyaz boşluk olmayanları bulur. b Bir kelimeyi bulur. (başlangıç veya bitişte) B Bir kelimeyi bulur (başlangıç ve bitişte olmayanı). 0 Null karakterleri bulur. n Yeni satır başlangıç karakterlerini bulur. f Yeni form (Form Feed)karakterlerini bulur. r Satış başı (Carriage Return)karakterlerini bulur. t Tab karakterlerini bulur. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  56. 56. Düzenli İfadeler (Regular Expressions) v Dikey Tab karakterlerini bulur. xxx Sekizlik sayı düzeninde xxx ile belirtilenleri bulur. xxd Onaltılık sayı sisteminde dd gösterilenleri bulur. uxxxx Onaltılık sayı sisteminde xxxx ile gösterilen unicode karakterleri bulur. Quantifiers n+ İçinde en az bir n geçenleri bulur. n? İçinde sıfır veya bir tane n içerenleri bulur. n* İçinde sıfır veya daha fazla içerenleri bulur. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  57. 57. Düzenli İfadeler (Regular Expressions)  kelime1 @ kelime2 . kelime3 E-posta adresinin düzenli ifadelerde gösterimi şöyle olabilir. Bir kelime = w+ Sonra @ işareti = @ Sonra bir kelime = w+ Sonra nokta = . En son bir kelime = w+ Sonuç : /w+@w+.w+/ Ve daha bir çok kural tanımlayabilirsiniz AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  58. 58. Özet Regular Expressions AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  59. 59. Özet Regular Expressions AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  60. 60. Özet Regular Expressions AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  61. 61. RegExp Parametreler global: Karakter dizisinin tamamının kontrol edilip-edilmeyeceği. ignoreCase: Harf hassasiyetinin olup olmadığı nultiline: Karakter dizisinin çok satırlı olup-olmadığı. RegExp Fonksiyonlar exec: Aldığı karakter dizisi parametresi içinde eşleşmeyi uygular. test : Aldığı karakter dizisi parametresini eşleşme için test eder. AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  62. 62. Sadece Sayı Girişi <script type='text/javascript'> function sayisalKontrol(eleman, mesaj){  var regularifade = /^[0-9]+$/;  if(eleman.value.match(regularifade)){  return true;  }else{  alert(mesaj);  eleman.focus();  return false;  } } </script> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  63. 63. Sadece Sayı Girişi (2) Önceki sayfadaki fonksiyonu aşağıdaki form içinde kullanabilirsiniz. <form> Telefon Numarası: <input type='text' id='sayilar'/> <input type='button' onclick="sayisalKontrol(document.getElementById('sayilar'), 'Yalnızca sayi girebilirsin')" value='Kontrol et' /> </form> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  64. 64. Sadece Harf Girişi <script type='text/javascript'> function harfKontrol(eleman, mesaj){  var regularifade = /^[a-zA-Z]+$/;  if(eleman.value.match(regularifade)){  return true;  }else{  alert(mesaj);  eleman.focus();  return false;  } } </script> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  65. 65. Sadece Harf Girişi(2) <form> Adınız (Sadece harf): <input type='text' id='harfler'/> <input type='button' onclick="harfKontrol(document.getElementById('harfle r'), 'Sadece harf giriniz')" value=‘Kontrol et' /> </form> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  66. 66. E-posta Kontrolü function eposta_kontrol(form_id, eposta) { var reg = /^([A-Za-z0-9_-.])+@([A-Za-z0-9_-.])+. ([A-Za-z]{2,4})$/; var adres = document.forms[form_id].elements[eposta].value; if(reg.test(adres) == false) { alert(‘Geçersiz e-posta adresi girdiniz.'); return false; } } AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  67. 67. E-posta kontrolü (2) Önceki sayfadaki fonksiyonu çağırmak için aşağıdaki HTML kodlarını kullanabilirsiniz. Aşağıdaki form onaylandığında e-posta adresi kontrol edilerek doğruysa kaydet.php’ye gönderilir. <form id="form_id" method="post" action="kaydet.php" onsubmit="javascript:return eposta_kontrol('form_id','eposta');"> <input type="text" id="eposta" name="eposta" /> <input type="submit" value="Gönder" /> </form> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  68. 68. Bir sayfayı yazıcıya Gönderme window.print fonksiyonunu kullanarak aktif yazıcıya web sayfasını gönderebilirsiniz. <form> <input type="button" value= " Bu sayfayı yazdır " onClick="window.print()" /> </form> AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ
  69. 69. Kaynaklar www.w3cschools.com http://www.mynotlar.com/javascript http://www.tizag.com/javascriptT/ http://www.codeproject.com/ AkareSoft - Bilg. Yük. Müh. Oğuzhan TAŞ

×