Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Java script

7,744 views

Published on

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Ş

×