JAVASCRIPT İSTEMCİ TARAFLI WEB PROGRAMLAMA (CLIENT SIDE WEB PROGRAMMING)
BİLİNMESİ GEREKENLER İNTERNET BİLGİSİ HTML TEMEL WEB TASARIMI BİLGİSİ
PASİF SAYFA NEDİR? STANDART HTML KOMUTLARI İLE OLUŞTURULANVE SUNUCUYA KOYULAN, HER ÇAĞIRILDIĞINDA AYNI ŞEKİLDE GELEN, HERHANGİ BİR PROGRAM KODU (SCRIPT) İÇERMEYEN WEB SAYFALARIDIR.
AKTİF SAYFA NEDİR? HTML KODLARININ ARTIK BAZI İŞLER İÇİN YETERSİZ GELDİĞİNİ FARK EDEN TASARIMCILAR, BU EKSİKLİĞİ HTML KODLARININ ARASINA KOD YAZARAK GİDERMEYE ÇALIŞMIŞLARDIR. AKTİF WEB SAYFALARI ZİYARETÇİDEN VERİ ALABİLİR, ONLARI İŞLEYEBİLİR VE SONUCU ZİYARETÇİYE GÖNDEREBİLİR.
AKTİF SAYFA NEDİR? ÖRNEĞİN BİR SİTEYE GİRDİĞİNİZDE SİZE TARİHİ YAZABİLİR, SAAT 12.00 A KADAR SİZE GÜNAYDIN, SAAT 18.00 A KADAR TÜNAYDIN VE SAAT 18.00 DEN SONRA İYİ AKŞAMLAR YAZABİLİR. BU SAYFA AKTİFTİR VE DEĞİŞEN GÜNE/SAATE GÖRE FARKLI MESAJLAR VERMEKTEDİR.
SCRIPT (BETİK) NEDİR? ÖĞRENİLMESİ VE KULLANILMASI KOLAY OLSUN DİYE BASİTLEŞTİRİLMİŞ/ SADELEŞTİRİLMİŞ, PROGRAMLAMA DİLİDİR. ÖRNEĞİN VBSCRIPT,VB NİN SADELEŞTİRİLMİŞ BİR VERSİYONUDUR. BU VERSİYONDA, PROGRAM YAZMAYI ZORLAŞTIRAN BAZI KURALLAR KALDIRILMIŞTIR.
SCRIPTING NEDİR? SCRIPT YAZMA İŞLEMİDİR. İKİ TÜRLÜ SCRIPT YAZILABİLİR: CLIENT SIDE (İSTEMCİ TARAFLI) SERVER SIDE (SUNUCU TARAFLI)
İSTEMCİ TARAFLI SCRIPTING NEDİR? TARAYICI TARAFINDAN ÇALIŞTIRILMASI İÇİN YAZILAN KODLARDIR. ZİYARETÇİ ADRES ÇUBUĞUNA BİR WEB ADRESİ YAZIP ÇAĞIRDIĞINDA, TARAYICIYA, HTML İLE BİRLİKTE SCRIPT KODLARI DA GÖNDERİLİR. TARAYICI KODLARI ALIR VE ZİYARETİNİN BİLGİSAYARINDA ÇALIŞTIRIR.
İSTEMCİ TARAFLI SCRIPTING NEDİR? BU YÖNTEMLE, KODLAR ZİYARETÇİNİN BİLGİSAYARINDA ÇALIŞTIRILDIĞINDAN SUNUCUNUN YÜKÜ DE HAFİFLETİLMİŞ OLUR. DOLAYISIYLA KODLAR DAHA HIZLI ÇALIŞIR. AMA XP İLE BİRLİKTE ARTIK KODLAR TARAYICIDA UYARI VERDİĞİNDEN İSTEMCİ TARAFLI KOD YAZIMI PEK TERCİH EDİLMEMEKTEDİR.
İSTEMCİ TARAFLI SCRIPTING http://www.edersane.tv İSTEMCİ İndex.html <html><head> </head><body> <script> A=1; A=A+1; </script> </body></html> SUNUCU KODLAR HTML SAYFASININ İÇİNDEDİR VE İSTEMCİDE ÇALIŞIR
NEREDE KULLANILIR? GÜVENLİĞİN ÖNEMLİ OLMADIĞI, WEB SAYFALARINI GÖRSELLEŞTİRME VE ETKİNLEŞTİRNE İŞLEMLERİNDE KULLANILIR. SAYFA RENKLERİNİN DEĞİŞTİRİLMESİ, ANİMASYONLU FARELER V.B İŞLEMLER İÇİN İSTEMCİ TARAFLI SCRIPTING KULLANILIR.
DEZAVANTAJI NEDİR? HER TARAYICI HER SCRIPT DİLİNİ DESTEKLEMEYEBİLİR. ÖRNEĞİN FIREFOX VBSCRIPT İ DESTEKLEMEZ. DOLAYISIYLA, INTERNET EXPLORER DA SORUNSUZ ÇALIŞAN KODLAR NETSCAPE DE ÇALIŞMAZ. JAVASCRIPT HEMEN HEMEN TÜM TARAYICILAR TARAFINDAN DESTEKLENİR.
AVANTAJI NEDİR? KODLAR ZİYARETÇİNİN BİLGİSAYARINDA ÇALIŞTIRILDIĞI İÇİN SUNUCUNUN YÜKÜ HAFİFLETİLMİŞ OLUR.
SUNUCU TARAFLI SCRIPTING NEDİR? KODLAR SUNUCU ÜZERİNDE ÇALIŞIR VE SONUÇLAR BİR HTML BELGESİ OLARAK TARAYICIYA GÖNDERİLİR. BURADA ÖNEMLİ OLAN KONU; TARAYICINIZ NE OLURSA OLSUN SAYFANIZ VE KOD SONUÇLARI TAM OLARAK GÖRÜNECEKTİR. ÇÜNKÜ SUNUCUDA ÇALIŞAN KODUN SONUÇLARI TARAYICIYA HTML OLARAK GÖNDERİLİR.
SUNUCU TARAFLI SCRIPTING İSTEMCİ http://www.edersane.tv SUNUCU index.asp A=1 A=A+1 SONUÇ <html><head> </head><body> SONUÇ </body></html> KODLAR SUNUCUDA ÇALIŞIR VE SONUÇLAR HTML OLARAK GÖNDERİLİR
DEZAVANTAJI NEDİR? TÜM KODLAR SUNUCUDA ÇALIŞTIĞI İÇİN DONANIM OLARAK ÇOK İYİ BİR SUNUCU GEREKMEKTEDİR.
AVANTAJI NEDİR? HERHANGİ BİR SCRIPT DİLİNİ DESTEKLEYEN TARAYICI GEREKMEZ, SONUÇLAR TÜM TARAYICILARDA GÖRÜNÜR. KODLAR SUNUCUDA ÇALIŞTIĞI İÇİN ZİYARETÇİLERDEN KORUNMUŞ OLUR. YANİ KAYNAK KODLARINI HERKES GÖREMEZ.
HANGİ TARAF? WEB SAYFALARINI GÖRSELLEŞTİRME V.B. İŞLEMLER İÇİN İSTEMCİ TARAFLI SCRIPTING TERCİH EDİLEBİLİR. BU DURUMDA IE GÜVENLİK UYARISI VERİR. ZİYARETÇİLER BU UYARILARDAN TEDİRGİN OLDUĞU İÇİN ARTIK PEK TERCİH EDİLMİYOR. TİCARİ VE GİZLİLİĞİN ÖNEMLİ OLDUĞU İŞLER İÇİN SUNUCU TARAFLI SCRIPTING KULLANILIR.
HANGİ SCRIPT DİLİ? HEMEN HEMEN TÜM TARAYICILAR TARAFINDAN DESTEKLENDİĞİNDEN DOLAYI İSTEMCİ TARAFLI SCRIPTING İÇİN JAVASCRIPT KULLANILIR. SUNUCU TARAFLI İŞLEMLER İÇİN PHP VEYA ASP.NET KULLANILIR. DİKKAT! JAVASCRIPT KODLARI ZİYARETÇİ BİLGİSSAYARINDA, PHP/ASP.NET KODLARI SUNUCUDA ÇALIŞIR.
JAVA? / JAVASCRIPT? JAVA İLE JAVASCRIPT GENELDE KARIŞTIRILMAKTADIR. AMA FARKLI DİLLERDİR. JAVA, SUN FİRMASI TARAFINDAN YAZILMIŞ BİR PROGRAMLAMA DİLİDİR. SONUÇTA İŞLETİM SİSTEMLERİNDEN BAĞIMSIZ BİR PROGRAM ELDE EDERSİNİZ. YANİ EXE VEYA COM UZANTILI DOSYA OLUŞTURUR. JAVASCRIPT, NETSCAPE FİRMASI TARAFINDAN C/JAVA DİLİNDEN ESİNLENİLEREK YAZILMIŞTIR. YORUMLANMASI İÇİN BİR TARAYICIYA İHTİYAÇ DUYAR. BU YÜZDEN SCRIPT DİLİDİR. JAVASCRIPT, HTML DOSYASININ İÇİNE GÖMÜLÜDÜR. SONUÇTA ELİNİZDE EXE VEYA COM UZANTILI BİR DOSYA YOKTUR.
NEDEN SCRIPT ÖĞRENİYORUZ? HTML İLE SADECE DURAĞAN (STATİK) SAYFALAR YAPABİLİRSİNİZ. YANİ ZİYARETÇİYE SADECE BİR TAKIM BİLGİLER GÖSTEREBİLİRSİNİZ. OYSA SCRIPT KULLANARAK DİNAMİK, ZİYARETÇİ İLE ETKİLEŞİMLİ SAYFALAR HAZIRLAYABİLİRSİNİİZ. ÖRNEĞİN ZİYARETÇİDEN BOY/KİLO BİLGİSİNİ ALIP KİLO UYGUNLUĞUNU HESAPLAYABİLİR, SONUCA GÖRE KENDİSİNE KİLO KONUSUNDA TAVSİYEDE BULUNABİLİRSİNİZ.
JAVASCRIPT NASIL KULLANILIR? HTML KODLARININ ARASINA SCRIPT YAZMAK İÇİN <SCRIPT>...</SCRIPT> TAGI KULLANILIR. <SCRIPT TYPE= TEXT/JAVASCRIPT >......... </SCRIPT>
ÖRNEK <html> <head></head> <body> <script type= text/javascript"> alert ( Selam ); </script> </body> </html>
ESKİ TARAYICILARDA DURUM ESKİ TARAYICILAR (2.0 VE ÖNCESİ) SCRIPTLERİ ÇALIŞTIRMAZ VE HATA VERİRLER. BUNUN İÇİN SCRIPTLER AÇIKLAMA TAGININ İÇİNE YAZILIR (SAKLANIR). <script type= text/javascript"> <! KODLAR... --> </script>
<NOSCRIPT> TAKISI JAVASCRIPT DESTEKLEMEYEN BİR TARAYICIDA HERHANGİ BİR İLETİNİN GÖRÜNMESİNİ SAĞLAR. <script type= text/javascript"> <! KODLAR... --> </script> <noscript>tarayıcınız JavaScript kodlarını çalıştırmıyor! </noscript>
SCRIPT NEREYE YAZILMALI? BİR SCRIPT DÖRT FARKLI BÖLÜME YAZILABİLİR: HEAD BÖLÜMÜ BODY BÖLÜMÜ HARİCİ.JS DOSYASINA OLAY YÖNLENDİRİCİLERİNE
HEAD BÖLÜMÜNE NEDEN YAZILIR? HEAD BÖLÜMÜNE FONKSİYON VE ALT PROGRAMLAR (PROSEDÜRLER) YAZILIR. BU ŞEKİLDE WEB SAYFASI YÜKLENDİĞİNDE BU KODLAR KULLANIMA HAZIR HALE GELMİŞ OLUR VE BODY BÖLÜMÜNDEKİ KODLAR TARAFINDAN ÇAĞRILABİLİRLER.
FONKSİYONLAR & ALT PROGRAMLAR (PROSEDÜRLER) HEAD BÖLÜMÜNE YERLEŞTİRİLEN PROSEDÜRLER SAYFA YÜKLENDİĞİNDE ÇALIŞMAZ. HERHANGİ BİR KOD TARAFINDAN ÇAĞIRILDIĞINDA VEYA BİR OLAY İLE TETİKLENDİĞİNDE ÇALIŞIRLAR. <html> <head> <script type= text/javascript"> KOMUTLAR... </script> </head>
BODY BÖLÜMÜNE NEDEN YAZILIR? BODY BÖLÜMÜNE YAZILAN SCRIPTLER SAYFA YÜKLENDİĞİNDE OTOMATİK OLARAK ÇALIŞIRLAR. YANİ, BİR KODUN, SAYFA YÜKLENDİĞİNDE OTOMATİK OLARAK ÇALIŞMASINI İSTİYORSANIZ BODY BÖLÜMÜNE YAZMALISINIZ.
HARİCİ JAVASCRIPT DOSYALARI BAZI KODLAR.JS UZANTILI BİR METİN DOSYASINA KAYDEDİLİP SAYFA İÇERİSİNE ÇAĞRILABİLİR: <script type= text/javascript src= kodlar.js > </script> BÖYLECE YAZDIĞIMIZ BİR KODU DİĞER SAYFALARDA DA KULLANABİLİRİZ.
OLAY YÖNLENDİRİCİLERİ (EVENT HANDLERS) BİR OLAY GERÇEKLEŞTİĞİNDE BAZI KODLARIN ÇALIŞMASI SAĞLANIR. <input type= button value= Tıkla onclick= alert( Selam ) > YUKARIDAKİ KODLA, BUTONA TIKLADIĞIMIZDA Selam YAZAN BİR MESSAGEBOX ÇIKAR.
AÇIKLAMALAR // TEK SATIR AÇIKLAMA DOCUMENT.WRITE ( SELAM ) // AÇIKLAMA /* PARAGRAF */ /* 1. SATIR 2. SATIR 3.SATIR */
DEĞİŞKENLER DEĞİŞKENLER JAVASCRİPT'TE VE DİĞER PROGRAMLAMA DİLLERİNDE OLDUĞU GİBİ BİLGİ DEPOLAMAK VE BU BİLGİYİ KULLANMAK AMACIYLA KULLANILIRLAR. DEĞİŞKENLER "VAR" KOMUTU İLE OLUŞTURULURLAR. KARAKTER OLARAK KULLANILDIKLARINDA İŞLEM YAPILAMAZLAR. ANCAK NÜMERİK OLARAK KULLANILDIKLARINDA İŞLEM YAPABİLİRLER.
DEĞİŞKEN TANIMLAMA var sayi; var sayi1=10; var yazi1="10"; Var ad= alican ;
DEĞİŞKEN TANIMLAMA KURALLARI GENEL OLARAK C DİLİ DEĞİŞKEN TANIMLAMA KURALLARI GEÇERLİDİR DEĞİŞKEN İSİMLERİ HARF VEYA _ KARAKTERİ İLE BAŞLAYABİLİR. YANİ DEĞİŞKENİN İLK KARAKTERİ RAKAM OLAMAZ. JAVASCRIPT KOMUTLARI DEĞİŞKEN OLARAK KULLANILAMAZ. BÜYÜK/KÜÇÜK HARF DUYARLIDIR. DEĞİŞKEN İSİMLERİNDE BOŞLUK, NOKTA, VİRGÜL, #, - GİBİ ÖZEL İŞARETLER VE TÜRKÇE KARAKTERLER KULLANILMAZ.
VERİTİPLERİ NUMBER (SAYI) STRING (METİN) BOOLEAN (MANTIKSAL DEĞER) UNDEFINED (DEĞER ATANMAMIŞ) NULL (HİÇ, TANIMLANMAMIŞ DEĞER) NaN (GEÇERSİZ SAYI)
VERİTİPİ DÖNÜŞÜMÜ JAVASCRIPT TE VERİTİPİ, İÇERİSİNE ATANAN DEĞERE GÖRE OTOMATİK OLARAK DEĞİŞİR. var x= ali ; x=3; x=true; x=new array( a,1);
TYPEOF() FONKSİYONU FONKSİYONA PARAMETRE OLARAK VERİLEN DEĞERİN VERİTİPİNİ DÖNDÜRÜR. var ad= fahrettin, yas=38; document.write(typeof(ad)); document.write( <br> ); document.write(typeof(yas));
DEĞİŞKENLERİN KAPSAMA ALANI DEĞİŞKENLERİ GENEL VE YEREL OLARAK İKİYE AYIRABİLİRİZ: GENEL DEĞİŞKENLER SAYFADA <SCRIPT> TAGININ İÇİNDE TANIMLANIR VE SAYFANIN HER YERİNDE KULLANILABİLİR. BU TÜR DEĞİŞKENLER GENELDE HEAD BÖLÜMÜNDE TANIMLANIR. LOCAL DEĞİŞKENLER İSE FONKSİYON İÇİNDE TANIMLANIR VE SADECE FONKSİYON İÇİNDE KULLANILABİLİRLER.
DEĞİŞKENLERİN KAPSAMA ALANI var a=5, b=10;//fonksiyon dışında,genel function islem(),a= ali ; b= veli ; Var c= ahmet ; //fonksiyon içinde, yerel - islem(); document.write( a= +a+ b= +b+ c= +c);
DİKKAT! FORM ELEMANLARINA YAZILAN HER TÜRLÜ VERİ STRING KABUL EDİLİR. BUNLARI TAMSAYI VEYA ONDALIKLI SAYIYA DÖNÜŞTÜRMEK İÇİN AŞAĞIDAKİ FONKSİYONLAR KULLANILIR: parseint() //TAMSAYI parsefloat() //ONDALIKLI SAYI
STRING() & NUMBER() BU FONKSİYONLAR VERİLEN DEĞERİN TİPİNİ DÖNÜŞTÜRÜR. Var s1= 12 ; Var s2= abc23 ; Document.write(Number(s1)+1); //sonuç:13 Document.write(String(s1)+s2); //sonuç:12abc23
BİLGİ GİRİŞİ ZİYARETÇİDEN BİLGİ ALMA İKİ ŞEKİLDE OLABİLİR: JAVASCRİPT İN PROMPT() KOMUTUYLA DİĞERİ İSE FORM YOLUYLA
PROMPT() AÇILAN BİR MESAJ KUTUSU İLE VERİ ALINIR prompt ("Sorulan soru", Varsayılan değer"); ÖRNEĞİN: var yas=prompt ( Yaşınızı giriniz?");
ALERT() MESAJ KUTUSU İLE BİLGİLENDİRME YAPILMASINI SAĞLAR. Alert ( Web Sitemize Hoşgeldiniz! );
CONFIRM() TAMAM VE İPTAL DÜĞMESİ OLAN BİR MESAJ KUTUSU AÇAR. YES DÜĞMESİNE TIKLANDIYSA TRUE, İPTAL DÜĞMESİNE TIKLANDIYSA FALSE DÖNDÜRÜR.
SAYFAYA BİLGİ YAZDIRMA HTML SAYFASINA VERİ YAZDIRMAK İÇİN WRITE() KOMUTU KULLANILIR. document.write ("görüntülenmek istenenler", değişken_ismi );
UYGULAMA <script type= text/javascript > <! //Kodları eski tarayıcılardan gizliyoruz var sayi; sayi=prompt("sayı giriniz"); document.write (sayi); Alert ( Girdiğiniz sayı= +sayi); // Saklamayı bitir --> </script>
JAVASCRIPT İÇİNDE HTML EĞER JAVASCRIPT İÇİNDE HERHANGİ BİR HTML KOMUTU KULLANILACAKSA ÇİFT TIRNAK İÇİNE ALINIR. ÖRNEK: document.write ("Merhaba", "<br>", Nasılsınız? )
UYGULAMA <script type="text/javascript"> var sayi; sayi=prompt("sayı giriniz"); document.write ("GİRDİĞİNİZ SAYI AŞAĞIDA <BR>"+sayi); </script>
OPERATÖRLER C DE KULLANILAN +, -, =, /, ++, --, GİBİ OPERATÖRLER AYNEN JAVASCRIPT TE DE KULLANILIR. HEPSİ C DE ÖĞRENDİĞİMİZ GİBİ İHTİYAÇ HALİNDE C# DERS SLAYTLARINA BAKINIZ
KOŞULLAR VE DÖNGÜLER HEPSİ C DE ÖĞRENDİĞİMİZ GİBİ İHTİYAÇ HALİNDE C# DERS SLAYTLARINA BAKINIZ
FONKSİYONLAR Function (parametreler) { İşlemler; }
UYGULAMA PARAMETRESİZ FONKSİYON: <script type="text/javascript"> Function mesaj(),alert ( Merhaba );- </script> <input type= button value= Tıkla onclick= mesaj() >
UYGULAMA TEK PARAMETRELİ FONKSİYON: <head><script> function kare(x) { var sonuc; sonuc=x*x; return sonuc; } </script></head> <body> <script> var a=prompt("sayı1:"); document.write("sayının karesi="+kare(a)); </script> </body>
UYGULAMA İKİ PARAMETRELİ FONKSİYON: <head><script> function topla(x,y) { var sonuc; sonuc=x+y; return sonuc; } </script></head> <body><script> var a=prompt("sayı1:"); a=number(a); var b=prompt("sayı2:"); b=number(b); document.write("sonuç="+topla(a,b)); </script></body>
OLAY YÖNETİCİLERİ (EVENT HANDLERS) JAVASCRIPT, EVENT-DRIVEN, YANİ, OLAY GÜDÜMLÜ (OLAYLARLA YÖNLENDİRİLEN) PROGRAMLAMAYA İMKAN SAĞLAYAN BİR DİLDİR. OLAY YÖNETİCİSİ, BİR OLAY MEYDANA GELDİĞİNDE, BİR İŞLEMLER GRUBUNU HAREKETE GEÇİREN NESNEDİR.
OLAY YÖNETİCİLERİ (EVENT HANDLERS) BİR HTML ELEMANINA OLAY YÖNLENDİRİCİSİ AŞAĞIDAKİ GİBİ EKLENİR: <etiket eventhandler= javasctript kodu > <a href= index.html onclick= alert( selam ) > Anasayfaya git </a> VEYA <a href= javascript:; onclick= alert( selam ) > </a>
ÇOK KULLANILAN BAZI OLAYLAR (EVENTHANDLER) onclick //buton veya bir linkin tıklanması. onfocus // metin kutusu, metin alanı veya seçim listesinin odaklanması. onblur //metin kutusunun ilgi odağı olmaktan çıkması, diğer nesneye geçilmesi. onchange //metin kutusu, metin alanı veya seçim listesinin değişmesi. onload //sayfanın yüklenmesi.
ÇOK KULLANILAN BAZI OLAYLAR (EVENTHANDLER) onunload // sayfanın kapanması onsubmit // formun onaylanması onreset // form iptalinde onmouseover // farenin link üzerinden geçmesi onmousemove // farenin hareket etmesi
SAYFA AÇILDIĞINDA KODLARIN ÇALIŞMASI <head> <script> Function acuyar() { Alert( Sitemize hoş geldiniz! ) } </script> </head> <body onload= acuyar() > </body>
SAYFA KAPANDIĞINDA KODLARIN ÇALIŞMASI <head> <script> Function kapatuyar() { Alert( Gene bekleriz! ) } </script> </head> <body onunload= kapatuyar() > </body>
BUTONA TIKLANDIĞINDA KODLARIN ÇALIŞMASI <head> <script> Function tikla() { Alert( Butona tıkladınız! ) } </script> </head> <body> <input type= button value= Tıkla onclick= tikla() > </body>
JAVASCRIPT NESNELERİ JAVASCRIPT TAM ANLAMIYLA NESNE TABANLI BİR DİL OLMASA DA İÇERİSİNDE ÖNCEDEN TANIMLI NESNELER VARDIR. DAHA ÖNCEDEN GÖRDÜĞÜMÜZ BAZI FONKSİYONLAR BU NESNELERE ÖRNEKTİR.
JAVASCRIPT TE BAZI HAZIR NESNELER STRING //metin işlemlerinde kullanılır ARRAY //dizi işlemlerinde kullanılır BOOLEAN //true false işlemleri yapılır DATE //tarih işlemlerinde kullanılır NUMBER //sayısal işlemlerde kullanılır MATH //matematiksel işlemlerde kullanılır
STRING NESNESİ Bold() //kalınlaştırır Italics() //eğik tolovercase() //küçük harfe çevir touppercase() //büyük harfe çevir Fontcolor() //metin rengi Fontsize() //metin boyutu Concat() //değişke değer ekler Replace(«değer1», «değer2»)
ARRAY NESNESİ DİZİ TANIMLAR Var gunler=new Array(); Sort() //dizi elemanlarını sıralar Reverse() //dizideyi sıralamayı ters çevirir Lenght //dizi eleman sayısı Push() //dizi sonuna değer ekler Unshift() //dizi başına değer ekler Pop() //en son elemanı siler Shift() //ilk elemanı siler Splice(indeks, adet) //eleman siler
SAYISAL SIRALAMA SORT() METODU ELEMANLARI STRING KABUL EDER VE METİNSEL SIRALAMA YAPAR. SAYISAL DEĞERLERİ SIRALAMAK İÇİN: Var dz=new Array(8,10,50,160,83,19) dz.sort(function(a,b){return(a-b)}) For(var i=0;dz.length;i++),document.write(dz*i++ );-
BOOLEAN MANTIKSAL İŞLEMLERDE KULLANILIR. Var evli=true; tostring() //mantıksal değeri metne çevirir valueof() //nesnenin aldığı değeri verir
DATE NESNESİ Date() //Sistem tarihi & saati getdate() //tarih nesnesinin günü gethours() //tarih nesnesinin saati getminutes() //tarih nesnesinin dakikası tostring() // metne çevirir
DATE NESNESİ Var tarih=new Date(); Var yil=tarih.getfullyear() //Yıl Var ay=tarih.getmonth() //Ay Var gun=tarih.getdate() //Gün Var saat=tarih.gethours() //Saat Var dk=tarih.getminutes() //Dakika Document.write(gun+ : +ay+ : +yil); Document.write(saat+ : +dk);
NUMBER NESNESİ tofixed() //virgülden sonraki karakter sayısı tostring() //metne çevirir valueof() //değişken değeri NaN //Sayı olmadığını belirtir
MATH NESNESİ PI() // PI değeri Abs() // mutlak değer Pow(x,y) //x in y kuvveti Random() //0-1 arası rasgele sayı Sqrt() //karekök valueof() //değişken değeri Ceil()//kendinden 1 büyük sayıya yuvarla Round() //yuvarla Floor() //kesirli değerin tamsayı kısmı
GİRİLEN SAYININ KÜPÜ <script> var s; s=prompt( Sayı:"); //s=number(s); document.write( Sayının küpü="+pow(s,3)); </script>
DAİRENİN ALANI & ÇEVRESİ <script> var r,alan,cevre; r=prompt("yarıçap:"); //r=number(r); alan=math.pi*r*r; cevre=2*math.pi*r; document.write("alan="+alan + " " + "Çevre="+ cevre); </script>
ZAMANLAMA İŞLEMLERİ BAZI KODLARIN BELİRLİ ARALIKLARLA VEYA BELLİ BİR GECİKMEYLE ÇALIŞMASINI SAĞLAMAK İÇİN ZAMANLAYICILAR KULLANILIR. SETTIMEOUT() CLEARTIMEOUT() SETINTERVAL() CLEARINTERVAL()
SETTIMEOUT() BELİRLİ KODLARI BELİRTİLEN ZAMAN SONUNDA SADECE BİR DEFA ÇALIŞIRIR. Window.setTimeout(«kodlar»,zaman) VEYA Var zaman=window.settimeout(«kodlar»,zaman) ŞEKLİNDE KULLANILIR. ZAMAN DEĞERİ MS CİNSİNDEN BELİRTİLİR.
SETTIMEOUT() Function zaman(),alert «2 saniye oldu!!!»- Window.setTimeout(«zaman(),2000»);
CLEARTIMEOUT() SETTIMEOUT() METODUYLA OLUŞTURULMUŞ ZAMANLAMA İŞLEMİNİ İPTAL EDER. BU METODU KULLANMAK İÇİN SETTIMEOUT() BİR DEĞİŞKENE ATANMALIDIR. Window.clearTimeout(zaman);
SETINTERVAL() BELİRLİ ARALIKLARLA KODLARIN ÇALIŞMASINI SAĞLAR. Window.setInterval(«kodlar»,zaman); VEYA Var z=window.setinterval(«kodlar»,zaman);
CLEARINTERVAL() SETINTERVAL() METODUYLA OLUŞTURULMUŞ ZAMANLAYICIYI İPTAL EDER.
KRONOMETRE <script type="text/javascript" language="javascript"> var i=0; function say() { document.getelementbyid("kutu").innerhtml=i; i++; } </script> </head> <body> <div id="kutu"></div> <script type="text/javascript" language="javascript"> var zaman=window.setinterval("say()",1000); </script>
TARAYICI NESNELERİ NASIL VISUAL STUDIO DA FORM, TEXTBOX, CHECKBOX, RADIO GİBİ NESNELER VARSA, JAVASCRIPT TE DE KENDİNE ÖZEL NESNELER VARDIR. BU NESNELERİN ÖZELLİK VE METOTLARI KULLANILARAK DEĞİŞİK İŞLEMLER YAPILABİLİR.
TARAYICI NESNELERİ JAVASCRIPT İN KENDİNE ÖZEL FORM VE FORM ELEMANLARI YOKTUR. BUNUN İÇİN HTML FORM VE ELEMANLARINI KULLANIR. YANİ FORMLAR HTML KOMUTLARIYLA OLUŞTURULUR, FORMDAKİ VERİLER JAVASCRIPT KOMUTLARIYLA ALINIR VE İŞLENİR.
TARAYICI NESNELERİ JAVASCRIPT TE NESNELER, ADINA DOM DENİLEN BİR MODELLE ANILIR. BU MODELDE TARAYICI, TARAYICIDAKİ SAYFA, SAYFADAKİ FORM VE ELEMANLAR BİRER NESNE OLARAK KABUL EDİLİR.
NESNELER (DOM/DOCUMENT OBJECT MODEL) WINDOW (PENCERE) DOCUMENT (PENCEREDEKİ SAYFA) FORM RADIO TEXT TAMAM SUBMIT
TARAYICI NESNELERİ WINDOW DOCUMENT NAVIGATOR LOCATION HISTORY SCREEN
WINDOW NESNE & METOTLARINDAN BAZILARI window.name //PENCERE ADI window.status //DURUM ÇUBUĞU METNİ Closed //PENCERE AÇIK MI KAPALI MI? alert() //UYARI KUTUSU confirm() //ONAY KUTUSU prompt() //VERİ GİRİŞ KUTUSU open() //YENİ PENCERE AÇAR close() //AKTİF PENCEREYİ KAPATIR
LOCATION NESNE & METOTLARINDAN BAZILARI location.href //SAYFANIN URL ADRESİ location.protocol //KULLANILAN PROTOKOL (HTTP, FTP, FILE) location.hostname //SUNUCU ADI location.port //URL PORT NO location.pathname //DOSYANIN FİZİKSEL ADRESİ Location.assign() //TARAYICIYA SAYFA YÜKLER location.reload() //AKTİF SAYFAYI YENİDEN YÜKLER Location.replace() //TARAYICIDAKİ SAYFAYI BAŞKA BİR SAYFA İLE DEĞİŞTİRİR.
HISTORY NESNE & METOTLARINDAN BAZILARI WINDOW NESNESİ İLE KULLANILIR: Window.history history.current //MEVCUT SAYFA history.lenght //ZİYARET EDİLMİŞ SAYFA ADEDİ history.back() //ÖNCEKİ SAYFAYA GİT history.forward() //SONRAKİ SAYFAYA GİT History.go(-x) // X SAYFA GERİ GİDER
DOCUMENT NESNE & METOTLARINDAN BAZILARI document.title //SAYFA BAŞLIĞI document.bgcolor //SAYFA ARDALANI document.fgcolor //SAYFA YAZI RENGİ document.linkcolor //LİNK RENGİ document.lastmodified //GÜNCELLEME TARİHİ document.write() //SAYFAYA YAZ document.clear() //SAYFAYI TEMİZLE getelementbyid() //ID NOLU ELEMAN getelementbyname() // NAME ADLI ELEMAN
NAVIGATOR NESNESİ TARAYICILAR JAVASCRIPT TARAFINDAN BİR NESNE OLARAK ALGILANIR. BU NESNENİN BAZI ÖZELLİKLERİ ŞÖYLE SIRALANABİLİR. Navigator.Appname // tarayıcı adı Navigator.appversion //tarayıcının versiyonu Navigator.appcodename //tarayıcının kod adı Navigator.useragent // tarayıcının sunucuya //(server) kendini tanıtırken verdiği isim
SCREEN NESNESİ KULLANICININ EKRAN BİLGİSİNİ ALIR. Colordepth() //RENK DERİNLİĞİ Width() //EKRAN GENİŞLİĞİ Height() //EKRAN YÜKSEKLİĞİ
UYGULAMA <script type= text/javascript"> document.write("şu anda kullandığınız tarayıcının özellikleri :", "<br>"); document.write(navigator.appname + navigator.appversion + navigator.appcodename + navigator.useagent ) ; </script>
PENCERE ÖZELLİKLERİ window.open ("http://www.bilimsel.com.tr", Bilimsel Ltd.", " menubar=no, toolbar=no, scrollbars=yes, location=yes, width=200, heigt=300";)
LOCATION (ÖRNEK) <script language= javascript"> document.write "Protokol:" & location.protocol & "<br>" document.write "Sunucu Adı:" & location.hostname & "<br>" document.write "Port:" & location.port & "<br>" document.write "Dosya adresi:" & location.pathname & "<br>" </script>
STATUS BAR KULLANIMI STATUS BAR WINDOW NESNESİNDE TARAYICILARIN EN ALT KISMINDA YER ALAN HANGİ DOSYAYA GİDİLECEĞİ VEYA YÜKLENDİĞİ İLE İLGİLİ BİLGİ VEREN KISIMDIR. STATUS BARI DEĞİŞTİRMEK İÇİN ŞU KODLARI YAZMALIYIZ: window.status= bilimselden merhaba!"; BU ŞEKİLDE KULLANDIĞIMIZ BİR STATUS KODU İLE SAYFA AÇIK KALDIĞI SÜRECE YAZI KARŞIMIZDA OLACAKTIR.
UYGULAMA <html><head><title>onclick</title> <script type= text/javascript"> <!- - function merhaba() {alert ("beni tikladiniz"); } --> </script> </head> <body> <input type="button" name="tikla" value="tikla" onclick=merhaba()> </body> </html>
UYGULAMA <html> <head><title>onmouseover ve onmouseout </title> <script type= text/javascript"> <! function uzerinde(),window.status="tıklayınca Bilimsel e gidecek " - function disinda(),window.status= Bilimsel e tıkla " - --> </script> </head> <body> <a href="http://www.bilimsel.com.tr" onmouseover = uzerinde() onmouseout =disinda()> BİLİMSEL </a> </body> </html>
JAVASCRIPT İLE ETKİLEŞİMLİ FORMLAR FORMLAR ZİYARETÇİLERDEN VERİ ALMAK İÇİN KULLANILAN ARAYÜZLERDİR. FORMLARDAN ALINAN VERİLERİN KONTROLÜ VE İŞLENMESİ BU NEDENLE ÇOK ÖNEMLİDİR.
FORM BİR BELGEDEKİ (DOCUMENT) FORMDUR. AŞAĞIDAKİ GİBİ ÖZELLİK VE METOTLARA SAHİPTİR. action //formdaki verilerin gönderileceği sayfa name //formun adı method //postalama metodu value //bir metin kutusu ya da metin alanı metni Length //Formdaki eleman sayısı Submit() //bilgiler action ile belirtilen sayfaya gönderilir Reset() //formdaki bilgiler silinir
POSTALAMA METODU FORMDAKİ VERİLER 2 ŞEKİLDE HEDEF SAYFAYA GÖNDERİLİR: GET: BİLGİLER ADRES ÇUBUĞU ÜZERİNDEN GÖRÜNÜR ŞEKİLDE GİDER. EN FAZLA 3 KB BİLGİ GÖNDERİLEBİLİR. POST:BİLGİLER GİZLİ OLARAK GİDER VE BOYUT KISITLAMASI YOKTUR. AKSİ İSTENMEDİKÇE POST METODUNU KULLANIN.
DOM TABLOSUNDA FORM NESNESİ FORM BUTTON CHECKBOX RADIO TEXTAREA HIDDEN PASSWORD RESET SELECT SUBMIT TEXT
FORM NESNESİ ÖZELLİK METOT EVENTHANDLER Form.Submit() onsubmit Form.Reset() onreset Form.Submit() // Form içeriğini gönderir Form.Reset() // Form içeriğini siler onsubmit // Form içeriğini göndermek için yapılan tıklama onreset // Form içeriğini silmek için yapılan tıklama
TEXT/TEXTAREA/PASSWORD NESNESİ ÖZELLİK METOT EVENTHANDLER value Focus() onfocus name Blur() onblur Select() onselect onchange Value // Girdi alanının string cinsinden değeri Name // Girdi alanının ismi Focus() // Kürsorü girdi alanına taşır Blur() // Kürsorü girdi alanından sonraki alana götürme Select() // Alandaki metin seçilir
ONAY (CHECKBOX) NESNESİ ÖZELLİK METOT EVENTHANDLER value Click() onclick name checked
SEÇENEK (RADIO) NESNESİ ÖZELLİK METOT EVENTHANDLER value Click() onclick name checked
SEÇİM (SELECT) NESNESİ ÖZELLİK METOT EVENTHANDLER length Focus() onfocus name Blur() onblur selectedindex onchange Options[i].text Options[i].value Options[i].selected Options[i].index
FORM UYGULAMALARI-1 <body> <form name="formum" action="form.html" onsubmit="uyar()"> Ad: <input type="text" name="adsoyad" /> <input type="submit" value="tıkla"/> </form> <script type="text/javascript"> function uyar() { var ad; ad=document.getelementbyname( adsoyad ).value; alert("adınız: " + ad); } </script> </body>
FORM UYGULAMALARI-2 <body> <form name="formum" action="form.html" onsubmit= hesapla()"> Ad: <input type="text" name="adsoyad" /> Boy: <input type="text" name= boy" /> Kilo: <input type="text" name= kilo" /> <input type="submit" value="tıkla"/> </form> <script type="text/javascript"> function hesapla() { var fark, ad, boyu,kilosu; ad= document.getelementbyname( adsoyad ).value; boyu= document.getelementbyname( boy ).value; kilo= document.getelementbyname( kilo ).value; fark=math.abs(boy-kilo); if (fark<10) alert( sayın " + ad + kilonuz normal ); else alert( sayın " + ad + kilonuz fazla ); - </script> </body>
FORM UYGULAMALARI-3 FORM ALANININ KONTROLÜ: <body> <form name="formum" action="form.html" onsubmit="kontrol()"> Ad: <input type="text" name="adsoyad" /> <input type="submit" value="tıkla"/> </form> <script type="text/javascript"> function kontrol() { if (document.getelementsbyname( adsoyad ).value.length<2) alert("adınızı doğru giriniz"); } </script> </body>
HATA DENETİMİ Try {//Hata olabilecek kodlar;} Catch(err),//Hata olduğunda çalışacak kodlar;- Finally,//Hata olsada olmasada çalışacak kodlar;-
HATA DENETİMİ <script> Try { hesapla(); Document.write( Hesapla fonksiyonu çağırıldı! ); } Catch(err) { alert(err.message);//oluşan hata bildirilir } </script>