JavaScript Ders Slaytları

Transkript

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
İndex.html
İSTEMCİ
<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İ
SUNUCU
http://www.edersane.tv
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).
• <!—
• KODLAR...
• -->
– </script>
<NOSCRIPT> TAKISI
• JAVASCRIPT DESTEKLEMEYEN BİR TARAYICIDA
HERHANGİ BİR İLETİNİN GÖRÜNMESİNİ
SAĞLAR.
• <!—
• 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
TEXT
RADIO
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>
– <!- – 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>
– <!—
– 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
value
name
Value
Name
Focus()
Blur()
Select()
METOT
Focus()
Blur()
Select()
EVENTHANDLER
onFocus
onBlur
onSelect
onChange
// Girdi alanının string cinsinden değeri
// Girdi alanının ismi
// Kürsorü girdi alanına taşır
// Kürsorü girdi alanından sonraki alana götürme
// Alandaki metin seçilir
ONAY (CHECKBOX) NESNESİ
ÖZELLİK
value
name
checked
METOT
Click()
EVENTHANDLER
onClick
SEÇENEK (RADIO) NESNESİ
ÖZELLİK
value
name
checked
METOT
Click()
EVENTHANDLER
onClick
SEÇİM (SELECT) NESNESİ
ÖZELLİK
METOT
length
Focus()
name
Blur()
selectedIndex
Options[i].text
Options[i].value
Options[i].selected
Options[i].index
EVENTHANDLER
onFocus
onBlur
onChange
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()">
Boy: <input type="text" name=“boy" />
Kilo: <input type="text" name=“kilo" />
</form>
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()">
</form>
•
•
•
•
•
•
•
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>

JavaScript Ders Slaytları

Transkript

Benzer belgeler

NO: AD SOYAD:

8. OLAYLAR

Aktif (client-based) Web Teknolojileri ve Programlama

Web Sitenize Script Kurma Rehberi

Otomatik Form Doldurma Saldırıları ve Bu Tür Saldırılara

Web Programlama

Javascript : Javascript Nedir?

Javascript : Javascript Nedir?

Google Search API ile ajax arama

Kopya Kağıtları

Simple JavaScript e - emrecan

Facebook paylaşım detaylarını kişiselleştirme

UNIVERSITY OF CAMBRIDGE INTERNATIONAL EXAMINATIONS

Kataloğu Görüntüle

dumlupınar üniversitesi - WebSitem