T.C. CELAL BAYAR ÜNİVERSİTESİ TURGUTLU MESLEK YÜKSEKOKULU BİLGİSAYAR TEKNOLOJİSİ VE PROGRAMLAMA JavaScript DERS NOTU Seval ÖZBALCI seval.zbalci@bayar.edu.tr MANİSA 2003
İÇİNDEKİLER İÇİNDEKİLER... 2 JAVASCRIPT... 4 DEĞİŞKENLER... 6 Genel Değişken Özellikleri... 6 Değişkenlerin İşlem Operatörleri İle Kullanımı... 7 Aritmetik Operatörler... 8 Karşılaştırma Operatörleri... 9 Mantıksal Operatörler... 9 Özel karşılaştırma Operatörü... 9 Internet Explrer & Netscape Farkı... 11 Ekrana Çıktı Ve Klavyeden Bilgi Giriş... 14 Prmpt ()...14 Write()...15 KOŞUL VE DÖNGÜLER... 16 Kşul Yapıları... 16 If (Eğer)...16 If.. Else (Eğer... Değilse)...16 Döngü Yapısı... 18 Fr Döngüsü...18 Şartlı Döngü Yapısı While...19 D.. while yapısı...19 Break ve Cntinue İfadeleri...20 Switch-Case İfadesi...21 FONKSİYON KAVRAMI... 22 Fnksiyna Değer Gönderme ve Değer Alma... 22 NESNELER VE ÖZELLİKLERİ... 24 Windw Nesnesi... 24 Pencere Açmak Ve Kapamak...24 Windw.Lcatin.Prtcl...26 Windw.Histry.G...26 Status Bar Kullanımı...27 Tarayıcı Nesnesi... 27 Çerçeve (Frame) Nesnesi... 27 Frm Nesnesi... 29 Text Alanı...30 Şifre Alanı...30 Butnlar...31 Rady (Radi) Düğmeleri...31 Select Unsuru...32 OLAYLAR... 33 nclick... 33 nmuseover, nmuseout... 34 nsubmit... 35 2 :.
nreset... 35 nchange... 36 nlad, nunlad... 37 nerrr, nabrt... 37 JAVASCRİPT İLE DHTML... 38 Katman Özelliklerini Değiştirme... 38 Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 3
JAVASCRIPT Java ile JavaScript ldukça fazla karıştırılmaktadır. Java, Sun firması tarafından Pascal ve Delphi dillerinden esinlenerek yazılmış bir prgramlama dilidir. Snuçta işletim sistemlerinden bağımsız bir prgram elde edersiniz. Yani exe veya cm uzantılı dsya luşturur. Fakat JavaScript bu tür bir prgramlama dili değildir. Yrumlanması için bir tarayıcıya ihtiyaç duyar. Bu yüzden script dilidir. Html dsyasını içine gömülüdür. Snuçta elinizde exe veya cm uzantılı bir dsya yktur. Javascript, Netscape firması tarafından C dilinden esinlenilerek yazılmıştır. Yazılma amacı Html'in sahip lmadığı bazı özelliklerin web sayfalarında kullanılmak istenmesidir. Ziyaretçi ile etkileşim gibi önemli unsurlarda Html'in eksiklerini tamamlayıcı unsurlara ihtiyaç duyulması snucunda Netscape firması bu knuya ağırlık vererek JavaScript script dilini internet rtamına kazandırmıştır. Netscape ve Internet Explrer tarayıcılarının JavaScript kdundaki anlayışları farklıdır. Nedeni ise, Netscape JavaScript dilini hazırladığında Micrsft un bu dilin özelliklerini veya yazılım tarzını tam anlamıyla Internet Explrer'a eklemeyip kendi yazım kurallarını belirlemesidir. Bu yüzden JavaScript kdu yazarken bu iki tarayıcı özelliklerini de göz önünde bulundurmalıyız. Java Script'in Genel Bazı Özellikleri Javascript kdlarını yazmak için Windws kullanıcıları için NtePad, Mac. kullanıcıları için Simple Text yeterlidir. JavaScript kdları <script> etiketi ile başlar, </script> etiketi ile biter. <script> etiketi, JavaScript'i anlamayan eski sürüm tarayıcıların bu kısmı geçmeleri içindir. Genellikle yazım tarzı aşağıdaki şekildedir: <script> <! JavaScript kdları --> </script> İyi bir prgramcı kd satırlarında açıklama yapar. Bu satır şu işlemi gerçekleştiriyr gibi açıklayıcı bilgiler yazar kdlarının yanına. JavaScript'te bu tür 4 :.
açıklamalar // ile başlar ve // ile biter. Eğer açıklamanız bir satırdan fazla ise /* ile başlar */ ile biter. Örnek: // bu satır kullanılacak değişkenlerin tanımlanması /* açıklama satırı 1 açıklama satırı 2 açıklama satırı 3 */ JavaScript kdları Html kdların arasında yer alır. Veya uzantısı js lan dsyalarda saklanarak yine Html içerisinden çağırılır. Java Appletleri gibi Html'den ayrı bir unsur değildir. Javascript Html'in bir parçasıdır. Kullanılacak yere göre Html'in içerisinde kullanılır. Fakat genelde <head> </head> etiketleri arasında kullanılır. Javascript kdları bittiğinde elinizde asla kendi başına çalışan uzantısı exe veya cm lan bir dsya lmaz. Her zaman için tarayıcı tarafından yrumlanması gerekir. Yrumlanması demek Javascript kdunun çalışması anlamındadır. Nesne ve buna uygulanan laylar ile ilgili bir takım görevleri vardır. Javascript kullandığı her unsuru nesne larak algılar. Siz bu nesneleri tıklamak, üzerine gelmek, üzerinde çıkmak gibi laylar ile çalıştırırsınız ki bu da Javascript'in ziyaretçi ile etkileşmesi demektir. NOT: Her knuyu şöyle bir kuyup hemen ardından uygulamalısınız. Uygulamada dikkat edilmesi gereken; her kd örneğinin (değişkenler knusundakiler gibi) kendi başına bir iş yapmayabileceğidir. Bu tür kdlar diğerlerinden farklı larak arka planı açık sarı ve italik larak yazılmıştır. Uygulayabilmek için diğer birtakım kdlara da ihtiyaç duyulur. Bu yüzden bu tip knuları sadece bilginiz lması amacıyla kuyup geçiniz. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 5
DEĞİŞKENLER Genel Değişken Özellikleri Değişkenler Javascript'te ve diğer prgramlama dillerinde lduğu gibi bilgi deplamak bu bilgiyi kullanmak amacıyla kullanılırlar. Değişkenler "var" kmutu ile luşturulurlar. Karakter larak kullanıldıklarında işlem yapılamazlar. Nümerik larak kullanıldıklarında ancak işlem yapabilirler. Kullanımına bir örnek verelim. Örnek: var sayi; var sayi1=10; var yazi1="10"; Burada birinci satırdaki "sayi" değişkeni script kdunun herhangi bir yerinde kullanılmak üzere luşturulmuştur. İkinci satırda "sayi1" adındaki değişkenin değeri hemen satırda = ifadesinden snra verilmiştir. Böyle değişken tanımıda yapılabilir. Üçüncü satırda ise değişkenin karakter ifadesi larak kullanımını görüyruz. Burada önemli lan karakter değişkenlerin alıntı " " ifadesinin arasında kullanılmasıdır. Her değişkenden snra ; işareti knulmalıdır. Tarayıcı, bir başka kmut satırına geçtiğini bu yl ile anlar. Şimdi değişkenlerle ilgili matematik işlemlerinin nasıl lacağını görelim. Bunu daha iyi açıklayabilmek için örnekler üzerinde çalışalım. Örnek: var sayi1=10; var sayi2=20; var sayi3=sayi1+sayi2; Birinci ve ikinci satırlarda değişkenler luşturduk. Üçüncü satırdaki ise sayi3 değişkeni ile diğer iki değişkeni tpladık. Burada önemli lan işlem yapmak istediğimizde değişken değerinin alıntı " " işaretlerinin arasına knmamasıdır. Üçüncü satırı - ileride göreceğimiz write () fnksiynu ile - tarayıcıda yazdırırsak göreceğimiz değer 30'dur. Şimdi de değişkenleri karakter larak tanımladığımızda neler lduğuna bakalım. Örnek: var sayi1="10"; var sayi2="20"; var sayi3= sayi1+sayi2 ; 6 :.
Bir önceki örnekten farklı larak değişken değerlerinin alıntı işaretleri içerisinde yazdık. Eğer sayi3 adlı değişkeni tarayıcıda bastırırsak göreceğimiz ifade 1020 ifadesidir. Yani tarayıcı karakter larak tanımladığımız değişkenleri ardada ekledi. Burada unutulmaması gereken şey bunun sadece + işleminde geçerli lmasıdır. Diğer işlem türlerinde bu tür bir snuç alınamaz. Değişkenlere ad verirken uymamız gereken kurallar. 1) Değişken isimleri harf veya _ karakteri ile başlayabilir. Rakam kullanmak istersek 2. karakterden snra kullanabiliriz. Yani değişkenin ilk karakteri rakam lamaz. Değişken isimlerine örnekler; var url="webteknikleri"; dğru var _rakam=12; dğru var a1=123; dğru var 3uzler="üçüzler" yanlış 2) Değişken tanımlarken bir veya birden fazla bşluk bırakmak tanımlama açısından herhangi bir srun teşkil etmez. 3) Değişken adı verirken kullandığımız harflerin büyük veya küçük lması bazı tarayıcılarda fark etmezken çğu tarayıcıda farklı bir değişken anlamındadır. Yani; var say=1; var Say=1; Birçk tarayıcıda farklı değişkenler larak algılanır. Değişkenlerin İşlem Operatörleri İle Kullanımı Değişkenlere işlem yaptırabilecek peratörleri ve özelliklerini inceleyelim. Operatörleri birkaç kısıma ayırarak inceleyelim; Aritmetik peratörler Karşılaştırmak peratörleri Mantıksal peratörler Özel peratörler Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 7
ARİTMETİK OPERATÖRLER Her zaman kullandığımız bu peratörler +, -, *, /, % 'dir.değişkenlerin çeşitli aritmetik peratörlerle kullanımına bir örnek verelim. Örnek: var i=10; var j=11; var k=12; var m,n; m=i*j+k; n=i*(j+k); İlk üç satırda değişkenlerimizi hem tanımlayıp hem de değer atadık. Dördüncü satırda ise m ve n değişkenlerini tanımlayıp değer atamadık. Diğer satırlarda ise m ve n değişkenlerinden istenen işlemleri tanımladık. Buna göre sn iki satırın snuçları farklıdır. Çünkü parantezlerin işlem önceliği vardır. Beşinci satırın cevabı (10*11)+12 = 122 şeklinde lacaktır. Sn satırda ise snuç 10*(11+12) = 230 lacaktır. Diğer bir işlem peratörü lan % 'nin yaptığı işlemi şu şekilde anlatabiliriz. % peratörü % işaretinin slundaki değişkeni sağındaki değişkene böler ve kalanı verir. Örnek larak; var a=100; var b=9; var c=100%9; Burada c değişkenin değeri 100/9'un kalanı 1'dir. Yani c değişkeninin değeri 1 lacaktır. Diğer -(eksi) ve / (bölme) peratörlerinin işlemleri kendilerine atanan çıkartma ve bölme işlemidir. Bu peratörlerin kısa kullanımı içinde Javascript bize klaylık sağlar. Bu peratörleri sıralamak istersek; -= : *= : /= : %= : ++ : -- Bu peratörlerin kısa uzun şekilde yazılışları ise aşağıdaki gibidir. x+=y x=x+y x-=y x=x-y x*=y x=x*y x/=y x=x/y x%=y x=x%y x++ x=x+1 x-- x=x-1 Bu peratörlerin nasıl işlem yaptığını bir örnekte görelim. var x,y,z; 8 :.
x=10; y=20; z=30; x++; x+=y; z--; y*= z; Şimdi her zamanki gibi işlem satırlarının cevaplarını birlikte bulalım. x++ satırı x=x+1 işleminin yapılmasını söyler. Buna göre x değişkeni 11 değerini alır. İkinci satıra geldiğimizde x+=y satırı x=x+y işleminin yapılmasını söyler. Bir önceki satırdaki x'in değeri 11 idi. Böylelikle yeni x'in değeri 11+20=31 lacaktır. Diğer satırda z-- işlemi snucunda z'nin değeri 29 lacaktır. Sn satırda ise y=y*z işlemi ile y değişkeni 20*29= 380 değerini alacaktır. KARŞILAŞTIRMA OPERATÖRLERİ Değişkenlerin birbirleri ile karşılaştırılmak istendiğinde kullanılan peratörlerdir. Bu peratörler ise; == peratörü iki değişkenin birbirine eşitliğini kntrl eder.!= peratörü iki değişkenin birbirine eşit lmadığı durumlarda kullanılır. < peratörü bilindiği üzere küçüktür peratörüdür. Sldaki değişkenin sağdakinde küçüklüğünü kntrl eder. <= sldaki değişkenin sağdaki değişkene küçük eşitliğini kntrl eder. eder. > sldaki değişkenin sağdaki değişkene göre büyük lup lmadığını kntrl >= sldaki değişkenin sağdaki değişkene büyük eşitliğini kntrl eder. MANTIKSAL OPERATÖRLER İki değişkene bağlı karşılaştırılmaların yapılmak istendiği durumlarda kullanılır. Operatörler &&,,! peratörleridir. && And (ve) peratörü iki değişkenin de değeri dğru lması istendiğinde kullanılır. Or (veya) peratörü iki değişkenden en az birinin dğru lması durumu istediğinde kullanılır.! Nt (değil) peratörü değişkenin değeri dğru ise yanlış, yanlış ise dğru lması istendiği durumlarda kullanılır. ÖZEL KARŞILAŞTIRMA OPERATÖRÜ Bu peratör iki değişken arasında karşılaştırma yapmanın en sade ve kısa yludur. Operatörün kullanım biçimi : değişken_1 [karşılaştırma peratörü] değişken_2? değişken_3 : değişken_4 Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 9
Buna göre ; Bunu bir örnekle açıklayalım. Değişkenleri var ile tanımladığımızı farz ediyrum. a < b? c : d Yukarıdaki satırda yapılması istenen işlem; a değişkeninin b değişkeninden küçük lup lmadığı karşılaştırılıyr. Buna göre cevap dğruysa işlemin snucu c değişkeninin değeri değilse d değişkeni luyr. Şimdi tüm bu öğrendiklerimizi bir Javascript kdunda görelim. Bu bizim ilk Javascript kdumuz lacak. Örnek : <script Language="JavaScript 1.2"> <! var i=1; var j=2; var k=3; var m=4; var n=5; var p=6; var q=7; i=+j; j++; k--; m=m+k; n=*j; i < j? 3 : 1 ; k >= n? 0 : 1 ; k=2 && j=5? p : q ; i=2 j=3? m : n ; p!=2? k : 10 ; -- > </script> İlk yedi satırda değişkenlerimizi hem tanımladık hem de değer atadık. Böyle bir yazımı yapabileceğimizi değişkenleri anlatmaya başlarken söylemiştik. İşlem satırlarına geçtiğimizde ise; i+=j; Bu işlem daha da önce gördüğümüz gibi bize i=i+j işlemini yapmamızı söyler. Buna göre i değişkeninin değeri 3 lacaktır. Hemen altındaki satırda bulunan j++ işlemi dlayısıyla da j değişkeni 3 değerini alacaktır. Diğer işlem satırında k--işlemi ile de k değişkeni 2 değerini alır. Bir diğer satırdaki m=m+k işlemi ile m(m=4) değişkeni k(k=2) değişkeni tplanarak 6 değerini alır. n=*j işlemi ile de n(n=5) değişkeni 3*5=15 değerini alacaktır. 10 :.
Şimdi diğer karşılaştırma işlemlerine geçmeden önce değişkenlerimizin işlem snrası aldığı değerleri yazalım. i=3, j=3, k=2, m=6, n=15, p=6, q=7 ; i < j? 3: 1 ; Bu satırın 3 < 3 işleminin cevabı dğru ise 3 değilse 1 değeri alacağını görebiliyruz. Tabi ki üç üçten küçük lmadığı için cevabımız 1 lacaktır. k>=n? 0 : 1 ; Bu satırda ise 2>=15 işlemi gerçekleşir ki bunun cevabı da yanlıştır ve ikinci değer işlem satırının cevabıdır yani 1 dir. Şimdiki karşılaştırma işlemimiz ise mantıksal peratörlerle ilgili. Buna göre; k=2 && j=5? p : q ; İşlem bize ne söylüyr? K değişkeni ve j değişkeninin kesin larak bir değere eşit lup lmadığını karşılaştırmamızı söylüyr. Bu iki değer de dğruysa çünkü &&(and) mantıksal peratörünün anlamı bu işlem dğrudur değilse yanlıştır. Buna göre k=2 'dir. Fakat buna karşılık j'nin değeri 5 değildir. Bu yüzden karşılaştırmanın cevabı yanlıştır. Dlayısıyla işlem q yani 7 değerini alır. p!=2? k : 10 ; İşlemde istenilen p değişkeninin değerinin ikiden farklı lması durumdur. Yani 6!=2 bunun anlamı dğrudur. Gerçektende 6=2 değildir. Bizde bu satırda bunu istiyrduk. O halde cevap dğrudur. Böylelikle işlem k yani 2 değerini alır. Şimdi biz bu yaptıklarımızla sadece javascript'te bir şeyler hesap etmesini ve karşılaştırmasını söyledik. Tarayıcı da bu işlemleri yapar ve hafızasında tutar. Daha snra öğreneceğimiz kmutlarla bunları istersek tarayıcıya yazdırabilir. Başka bir yerde kullanılmasını söyleyebiliriz. Internet Explrer & Netscape Farkı Giriş kısmında belirttiğimiz gibi Javascript kdlarında MSIE (Micrsft Internet Explrer) ve NN (Netscape Navigatr) yönünden farklılık vardır. Bu tarayıcının html dökümanı nasıl mdellediğine bağlıdır. Tarayıcının nesne döküman mdeli, bir Html sayfasındaki çeşitli elemanların tarayıcı tarafından nasıl algılanıp yrumlandığı ile ilgilidir. Javascript gerçekte W3C (Web tekniklerinin standartlarını belirleyen kurum www.w3c.rg) knsrsiyumu tarafından belirlenen kdlardan luşmamıştır. Tarayıcı üreten firmalar bu knuları kendilerince yrumlayıp tarayıcılarına yerleştirmişlerdir. Yani kendi nesne döküman mdellerini luşturmuşlardır. Biz bu kısımda her iki tarayıcınında nesne döküman mdelini incelemeyeceğiz. Bize gerekli lan kısmını öğreneceğiz. Şimdi tarayıcı farkının nasıl ayırt edilebileceğini görelim. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 11
ie4 = (dcument.all)? true : false ; nn4 = (dcument.style)? true : false ; Biz bu iki satırla bir önceki ders lan değişkenler ve mantıksal peratörler yardımıyla iki tarayıcıyı da kntrl altına aldık. Bir diğer örnekle yapıyı pekiştirelim. <script language="javascript"> <!-- // Kdları eski sürüm tarayıcılardan saklayalım. ie4 = (dcument.all)? true : false ; nn4 = (dcument.style)? true : false ; if (ie4) { // MSIE 4.0 için uygun kdları buraya yazacağız } else { // NN 4.0 için uygun kdları buraya yazacağız. } //Saklamayı bitir --> </script> Şimdi bu kdları inceleyelim. Değişken tanımlama kısmında anlamadığınız bir kısım varsa 1. Değişkenler kısmına tekrar geri dönmelisiniz. If (ie4) ve if (nn4) Burada ileriki derslerde öğreneceğimiz kşul ifadesini kullanıyruz. Bu kdları Javascript'in anlayış tarzı şu şekilde lacaktır. Eğer nn4, ie4 değişkenlerinden dğru lanı ie4 ise -ki bunu true ve false değerlerinden algılar- alt satıra geçip na uygun kdu uygulayacaktır. Şayet ie4=false yani nn4=true ise diğer if kşulu yrumlanarak işleme knulacaktır. Bu da nn4 için gerekli kdun çalıştırılması demektir. Örnek Uygulama 1: <html> <head> <title>tarayıcı kntrlü</title> <head> <script language="javascript"> <!-- // Kdları eski sürüm tarayıcılardan saklayalım. functin tarayici() { ie4 = (dcument.all)? true : false ; nn4 = (dcument.style)? true : false ; if (ie4) { // MSIE 4.0 için uygun kdları buraya yazacağız. 12 :.
windw.lcatin="ie.htm"; } else { // NN 4.0 için uygun kdları buraya yazacağız. windw.lcatin="nn.htm"; } } //Saklamayı bitir --> </script> </head> <bdy nlad=tarayici()> </bdy> </html> 1. Yukarıda verilen kdları herhangi bir editör (NtePad gibi) yardımıyla yazıp tara.htm larak kaydedin. <html> <head> <title>msie tarayıcı kullanıyrsunuz</title> </head> <bdy> <h3>tarayıcınız Internet Explrer</h3> </bdy> </html> 2. Bu kdu ie.htm larak kaydedin. <html> <head> <title>netscpae tarayıcı kullanıyrsunuz</title> </head> <bdy> <h3>tarayıcınız Netscape Navigatr</h3> </bdy> </html> 3. Bu kdu nn.htm larak kaydedin. Önemli! Bu üç Html dsyasının da aynı klasörde lması gereklidir. Tara.htm adlı dsyada anlamadığınız kdlar lduğunu görüyrsunuz. Şimdilik bu kdları anlamanız gerekli değil. Yeri geldikçe bu kdların nerede ve nasıl kullanılacağını göreceğiz. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 13
Ekrana Çıktı Ve Klavyeden Bilgi Giriş Html üzerinden klavye aracılığı ile ziyaretçiden bilgi almayı ve herhangi bir değişken vb. türde yazıların html e nasıl yazdırılacağını göreceğiz. PROMPT () Hemen başlayalım. Ziyaretçiden bilgi alma iki tür JavaScript kmutuyla gerçekleşir. Birisi Prmpt yani bizim burada bahsedeceğimiz kmut. Diğeri ise Frm yluyla bilgi alınması. Frm yluyla alınan bilgiler frmun Html üzerinde yer alması yüzünden Prmpt kmutu ile birbirinden ayrılır. Prmpt kmutu ile Html sayfasından hariç bir pencere açılır. Alınmak istenen bilgi ziyaretçiye bu yl ile srulur ve hemen altındaki bşluk yardımıyla cevap alınır. Şimdi kdun nasıl kullanıldığına bir göz atalım. prmpt ("Srulan sru", "Cevap örneği") Bu kmutun yrumlanışı şu şekildedir. Html üzerinde Html'den bağımsız bir pencere aç (bu prmpt kmutu ile yapılır). İlk çift tırnak içerisinde lan kelime veya kelime grubu, pencerenin üst kısmında ve değiştirilemeyen kısımdır. Burada sru veya pencerenin niçin açıldığı ile ilgili bir açıklama verilir. İkinci çift tırnakta ise dldurulacak lan cevap satırının içinde seçili bir haldedir. Bu ise genel larak cevap örneği larak ziyaretçiye sunulur. Kullanılması zrunlu değildir. Kullanılmadığınızda undefined gibi tanımlanmamış uyarısı alınır. prmpt ("Tarayıcınızın türünü giriniz?","lütfen cevabı ie veya nn larak veriniz"); Şimdi kullanıcıdan nasıl bilgi alınacağını gördük fakat bu bilgiyi nasıl kullanabiliriz? Bu srunun cevabı prmpt kmutunu var ile bir değişkene atmak suretiyle kullanabiliriz lacaktır. Yani ; var tara=prmpt ("Tarayıcınızın türünü giriniz?","lütfen cevabı ie veya nn larak veriniz"); Biz bu satır ile ne yapmış lduk? Ziyaretçiden prmpt kmutu ile tarayıcısı srduk ve bunu var değişken tanımlama kmutuyla tara değişkenine atadık. Ziyaretçiden aldığımız bu bilgi snucunda tara değişkeni ya ie yada nn değerini alacaktır. Biz daha snraki satırlarda bu değişkeni belli bir kşul kyarak kullanabiliriz. Mesela daha önceki örneklerimizde lduğu gibi ie ise şu sayfayı aç nn ise şu sayfayı aç. Bir öneri: Bu tip tarayıcı tanıma yöntemi ldukça yanlış bir yöntemdir. Çünkü ziyaretçiden alınan bilgi ile bizim daha snra kullandığımız kşul ifadeleri uyuşmayabilir. Bu yüzden kdumuz dğru çalışmaz. 14 :.
WRİTE() Html dsyasına yazı yazdırma kmutu ise write dır. Bu kdun yazım kurallarını inceleyecek lursak ; dcument.write ("görüntülenmek istenenler", değişken_ismi ); Kdu inceleyelim: Javascript html üzerinde yazı yazmak istediğinde write kmutunu tek başına kullanamaz. Bunun için dcument fnksiyneli (yardımcısı manasında) ile birlikte kullanılır. dcument.write kmutundan snra parantez açılır. Daha snra yazılmak istenen sıraya göre değişken ismi veya görüntülenmek istenenler yazılır. Değişkenler çift tırnak içerisinde yazılmazlar. Sadece görüntülenmek istenenler çift tırnak içerisinde yazılır. Şimdi prmpt kmutu ile write kmutunu birleştirerek bir kd hazırlayalım. Bu kdumuzda prmpt aracılığıyla ziyaretçiye adını srup ad değişkenine atıyruz. Daha snra bu değişkeni write kmutu yardımıyla ziyaretçiye Merhaba diyruz. Şimdi kdlara geçelim. Örnek : <html><head><title>prmpt, write örneği </title></head> <bdy> <!-- //Kdları eski tarayıcılardan gizliyruz var isim = prmpt ("İsminizi Giriniz ", "Küçük harf veya büyük harf kullanabilirsiniz" ); dcument.write ("Merhaba ", isim, "!" ); // Saklamayı bitir --> </script> </bdy> </html> Eski kdlarımıza göre bu kdun biraz farklı lduğu rahatlıkla görülebilir. Javascript kdumuz <head> etiketleri arasında kullanılmaz. Daha öncede değindiğimiz şekilde uygulanması istenen sıraya bağlı larak kdlar yerini almıştır. Biz aslında Html'de fnt kurallarını kullanarak yazı da yazdırabiliriz. Hiçbir kural uygulamadığınızda tarayıcının standart (default) değerleri kullanılır. Örneğin, Merhaba dedikten snra alınan ismin bir alt satırda görüntülenmesini istiyrsak bunu Javascript'e şu şekilde yaptırabiliriz (<br> türünde Html etiketlerinin tümünü Javascript'e yaptırabilirsiniz). dcument.write ("Merhaba", "<br>", isim) Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 15
KOŞUL VE DÖNGÜLER Bilgisayarı bilgisayar yapan knular bunlardır. Çünkü hiçbir bilgisayar kendi kriterleriyle yrum yapamaz. Bizim kşullar ve döngüler ile verdiğimiz, önceden belirlenmiş kıstasları göz önünde bulundurarak gerekli seçimleri yapar. Kşul Yapıları Javascript'in en önemli özelliklerinden biri kşul yapılarıdır. Aslında bu knu sadece Javascript'in değil bilgisayarın da en önemli knusudur. Şimdi knunun inceliklerine bir göz atalım. IF (EĞER) Javascript'te çğu dilde lduğu gibi kşul yapısının kdu If (eğer) kmutudur. Yazılım şekli ise şu şekildedir. If (a==b) //kşul dğru ise ilk satır işleme knulur // kşul dğru değilse ilk satırın altındaki kmut satırı işleme knulur. Şimdi kdumuzu biraz inceleyelim : Kşul kmutu yani if ile işleme başlıyruz. Daha snra karşılaştırılacak değişkenler veya başka nesneler parantez içerisinde srgulanıyr. Dikkat ederseniz çift eşittir kullandık. Çünkü tek eşittir işareti değer atama işlemidir. Çift değişken ile kşul yapısı sağlanır. Eğer kşul dğruysa hemen altındaki satır işleme knulur. Eğer kşul yanlış ise ikinci satır işleme knulur. Yk ben kşul dğru ise 2 ve daha çk işlem yaptırmak istiyrsanız bunun cevabı yapılması istenen işlemlerin { } arasında yer almasıdır. Yani : If (a==b) { // 1.işlem //2. İşlem...... } IF.. ELSE (EĞER... DEĞİLSE) Bu bölümde ise If kşul ifademize Else kmutunu ekleyerek kşul yapısı örneklerle açıklanacaktır. 16 :.
If ( a==b ) { // şunları şunları yap } else { //değilse şunları yap } Yani örnekten de anlaşıldığı gibi if kşulu ile a ile b nin eşitliği karşılaştırılıyr. Eğer dğruysa hemen altındaki kısım işleme knuluyr. Else ile yk değilse altındaki kısmı işleme ky diyruz. If (a==b) { //şunları yap } if (a==c) { //şunları yap } else { //şunları yap } Şimdi bu kd Javascript'e: a değişkeni b değişkenine eşitse nrmal larak alt satırı işleme kymasını, eğer bu karşılaştırma yanlış ise altındaki işlemleri geçerek a'nın c'ye eşitliğini kntrl etmesini ve bu da değilse (else) alt satırdaki işlemleri devreye kymasını bildirir. Else yapısı genel larak bir karşılaştırma snucunda cevap yanlış ise diğer bütün durumlarda şu işi yap manasında kullanılır. Örnek Uygulama 2: <html> <head> <title>kşul yapıları </title> </head> <bdy> <script language="javascript"> <!-- //eski sürüm tarayıcılardan kdumuzu saklayalım var gun = prmpt ("Bugün günlerden ne?","lütfen küçük harf kullanınız"); if (gun=="pazar") Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 17
{ dcument.write ("Bugün günlerden ", gun, " lduğuna göre hatfa snundayız","<br>") dcument.write ("<b>", "İyi tatiller..", "</b>") } else { dcument.write ("Bugün günlerden pazar lmadığına göre tatil gününde değiliz!","<br>") dcument.write ("İyi çalışmalar..") } //saklamayı bitir--> </script> </bdy> </html> Döngü Yapısı Javascript'te diğer prgramlama dillerinde lduğu gibi istediğiniz işlemi 2 veya daha fazla kez yaptırmak için belli prgram kdları mevcuttur. Bu diğer dillere çk benzer lan fr döngü kmutudur. Bu kmutun yaptığı işlem, istenilen fnksiyn veya fnksiyn parçalarını istenilen değerde tekrar etmektir. FOR DÖNGÜSÜ fr ( değişken_başlangıç_değerler1, değişken_başlangıç_değeri2 ; döngü sayısı ; değişecek_değişken_adı_ve_türü ) { yapılması istenen işlemler } Burada parantezler içerisinde verilen değişken_başlangıç_değerler kısmı ve değişecek_değişken_adı_ve_türü kısmını yazmanız gerekmez. Döngü içerisinde kullanılan değişken daha snrada istenilen şekilde arttırılabilir veya azaltılabilir. Yapı gözünüzü krkutmasın hemen bir örnekle daha iyi anlayalım. fr (a=0, b=0 ; c<=3 ; c++) { yapılması istenen işlemler } fr ifadesi için kısa yazılım : var a,b=0; fr (;c<=3;c++) { yapılması istenen işlemler } Şimdi bunu tam bir örnekle daha da pekiştirelim. Varsalım ki elimizde bir çarpım tablsu yapmak istiyruz. Buna göre 5 sayısı için 1'den 10'a kadar sayıları bir 18 :.
tabl içerisinde vereceğiz. Şimdi bu durumda fr döngüsüz 10 adet tabl yazmamız gerekecekti fakat biz fr döngüsü ile işlemi 1 satıra indirgeyeceğiz. <html> <head> <title>fr döngüsü</title> </head> <bdy> <script language="javascript"> <!-- //eski sürüm tarayıcılardan kdumuzu saklayalım var cevap=0; fr ( sayi=0 ; sayi>=10 ;); { sayi--; var cevap = 5 * sayi ; dcument.write( "5 * ", sayi, " =", cevap,"<br>") } //saklamayı bitir--> </script> </bdy> </html> Burada gördüğünüz gibi işlem tek bir satıra ingirdendi. Şimdi de fr döngüsünün yapmak istediğimiz işlemlerde yetersiz kaldığı durumlarda kullanabileceğimiz yapıları görelim. ŞARTLI DÖNGÜ YAPISI WHİLE Javascript kdu yazarken -prgramda bir önceki örnekte lduğu gibi- sayaç değişkeninin her değeri için istediğiniz işlemi yapmasını istemeyebilirsiniz. Bunun için while kmutunu kullanırsınız ki bu Javascript'e "İstediğim işi şu şart sağlanıyrsa yap!" demiş lursunuz. While döngüsünde fr döngüsünden farklı larak döngü içerisindeki değişkenlerin tanımlanması gerekir. Şimdi yazım kurallarına bir göz atalım. while ( döngü şartı ) { şart dğruysa yapılacak işlemler} şart dğru değilse yapılacak işlemler DO.. WHİLE YAPISI D... while yapısı genel larak bir döngünün yapısını eğer şart dğruysa tekrar et manasındadır. Yani d ile başlangıçta hiçbir kşul lmadan işlem yapılır. Daha snra while şartı dğru ise tekrar d yapısında geri dönülür. Bunu bir örnek ile açıklamak gerekirse; Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 19
Örneğin bir ticari siteniz var. İnsanlar sizden gelip istedikleri ürünleri satın alıyrlar. Bir ürün için siparişlerini verdiler ve bizde bunun karşılığı larak ücret + karg + kdv miktarını hesapladık ve müşterimize dedik ki istediğiniz ürün şu fiyata şu gün elinizde lur. Bu hesaplamaların hepsini d yapısı ile yap dedik. Ve snra srduk daha başka ürünlerde almak istiyr musunuz? İşte bu da while yapısı ile srulur. Şayet cevap evet ise d yapısı tekrarlanır değilse d döngü yapısında çıkılır. Bu tür bir örnek yapalım ; Bizim kitap, cd ve kaset sattığımız varsayalım. Bizden de 2 kitap ve 3 cd aldığını varsayarsak ; var kitap=2000000; var cd=3000000; var kaset=1500000; d { var kitapistek =prmpt ("Kaç tane kitap almak istiyrsunuz?", "lütfen rakam giriniz"); var cdistek= prmpt ("Kaç tane cd almak istiyrsunuz?", "lütfen rakam giriniz"); var kasetistek= prmpt ("Kaç tane kaset almak istiyrsunuz?", "lütfen rakam giriniz"); var kitaptutar=kitapistek*2000000; var cdtutar=cdistek*3000000; var kasettutar=kasetistek*1500000; var tplamtutar = kitaptutar+cdtutar+kasettutar; dcument.write (kitapistek," tane kitap ", cdistek," tane cd ", kasetistek, "tane kaset siparişiniz alınmıştır ", "<br>"); dcument.write ("<br>", "Aldığınız ürünlerin tplam tutarı = ",tplamtutar); var istek =prmpt("başka ürünlerde satın almak istiyr musunuz?", "e veya h giriniz"); } while (istek="e") dcument.write ("<br>","bizden alışveriş yaptığınız için teşekkürler") BREAK VE CONTİNUE İFADELERİ While kmutu ile şartı belirledikten snra yapılan işlemin kesilmesi veya devam etmesi tmatik hale gelmektedir. Fr döngüsü içerisinde de bu tür bir layı break ve cntine ifadeleri ile gerçekleştiririz. Javascript break ifadesini gördüğü anda döngü işlemini keser ve bir snraki kmut satırını işleme kyar. Cntinue ifadesinde ise döngü break ifadesindeki gibi kesilir fakat işleme knulan satır bir snraki satır değildir. Cntinue'de döngü başına dönülür. 20 :.
Örnek: fr () {işlem1; işlem2; break; } Burada işlem2 ile verilen kısımda örnek larak bir srgu yapılabilir. Srgu dğru ise break ifadesine gelinir ve burada döngü kesilir. fr () { işlem1; işlem2; cntinue;} sürdürülür. Burada yine işlem2 ile srgu yapılırsa cntine ifadesi ile döngünün devamı Önemli : Break ve Cntinue ifadeleri her kmutu kesmek veya devam ettirmek için kullanılamaz. Mesela bir if (Eğer) ifadesi şart dğru değilse break ile kes denilemez. Sadece döngü içerisinde döngünün kesilmesi veya devam ettirilmesi için kullanılabilir. SWİTCH-CASE İFADESİ Bu ifade genel larak menü kullanımında veya srgu işlemlerinde işe yarar. Swicht ile ifade alınır case ifadesi ile işlemler srgulanarak yapılır. Yazım kurallarına bir göz atalım. switch (parametreler) { case "ifade1" : case "ifade2" :... } Bir örnek verelim. Burada web sayfamızdaki herhangi bir işlemde çıkıp çıkmak isteyip istemediği sruluyr. Cevap evet ise işlem istenilen yönde yönlendiriliyr. Cevap hayır ise döngüden çıkılmaktadır. Burada kendimizi ziyaretçinin klavyesinde Caps Lck tuşuna basılı lup lmadığını önemsemiyruz. Çünkü kşul ifademizi hem küçük harf hem de büyük harfe göre yazıyruz. var sec; sec = prmpt ("Çıkmak istiyr musunuz ","Evet için E veya e, Hayır için H veya h giriniz") switch (sec) { case "e" : case "E" : dcument.write ("Tekrar hşgeldiniz") //yapılması istenen işlemler case "h": case "H" : dcument.write ("Bizi tercih ettiğiniz çin teşekkürler") break //Çıkılması istendiği için döngüyü kesmek için break kmutunu kullanıyruz. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 21
FONKSİYON KAVRAMI Çğu zaman Javascript kdunuzda bir işlemin birden fazla yapılması gerekebilir. Hatta kimi zaman Javascript'e bir işlem yaptırmadan önce başka bir işlemi yaptırmak istenebilir. İşte bu tür tekrarlanan işin yapılması için gerekli işlem ve kmut gruplarına Fnksiyn adı verilir. Fnksiynlar genelde, A isimli gruptaki işlemleri yap radan bir değer al bunu B isimli gruba götür gibi işlemler için kullanılır. Bu tür kmut sistemleri Javascript'te en çk kullanılan kmut türlerindendir. Fnksiynun yazım kuralları şu şekildedir: functin fnksiyn_ismi (parametre1, parametre2,... ) { yapılması istenen işlemler } Fnksiyna Değer Gönderme ve Değer Alma Bir fnksiynun Javascript içerisindeki ilk önemli görevi diğer fnksiynlardan veya herhangi bir yerden bir değer alıp nu kendi içerisinde işletip snra istenilen fnksiyna veya yere göndermektir. Mesela herhangi bir muhasebe işleminin yapılıp bize geri gönderilmesini istediğimiz düşünelim. Genel yapı larak kdumuz şu şekilde lacaktır. Veri1 ve Veri2'nin işleme knulacağı fnksiynların tanımlanması Veri1'in alınması Veri2'in alınması Veri1'in fnksiyna gönderilmesi Veri2'nin fnksiyna gönderilmesi Alınan verilerin ekrana yazdırılması Şimdi bu genel kdu Javascript'te nasıl yapacağımızı görelim : <html> <head> <script language="javascript"> <!-- //eski sürüm tarayıcılardan kdu gizleyelim functin veri1(ilkveri) { var ilktplam = (ilkveri * 30 )/100 ; return ilktplam ; } functin veri2 (ikinciveri) { var ikincitplam = (ikinciveri * 45 )/100; return ikincitplam; } -- > </script> </head> <bdy> <script language="javascript"> <! 22 :.
var data1 = prmpt ("Birinci miktarı giriniz","rakam gir"); var data2 = prmpt ("İkinci miktarı giriniz", "rakam gir"); dcument.write ("İlk işleminizin snucu = ", veri1(data1) ); dcument.write ("İkinci işlemin snucu = ", veri2(data2) ); -- > </script> </bdy> </html> İlk satırların functin tanımlama lduğunu görüyrsunuz. Burada veri1, veri2 adlı iki tane fnksiynu tanımladık. Diğer satırlarda prmpt kmutu ile klavyeden bilgi girişi sağladık. Daha snra bu verileri fnksiynlara göndererek istediğimiz işlemi yaptırdık ve daha snrada bunu return yöntemiyle geri aldık. Bu kısma kadar yaptığımız fnksiyna bir değer göndermekti. veri1(data1) kmutuyla prmpt yluyla aldığımız data1 değişkenini veri1 adlı fnksiyna gönderdik. Yani functin veri1(ilkveri) şeklindeki fnksiyna biz data1 değişkenin gönderdik. Fnksiyn bu değeri yani data1 değişkenin aldığında tmatik larak ilkveri değişkenine atadı. Böylelikle ilkveri=data1 ldu. Daha snra istenilen işlemler yapıldı. Ve ardından return ilktplam değeri geri gönderildi. Bu değer daha snra ekrana yazdırıldı. Diğer veri2 adlı değişken için de aynı tür bir işlem sözknusudur. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 23
NESNELER VE ÖZELLİKLERİ Günümüzde bilişim Teknljileri ile ilgilenen hemen herkesin duyduğu bir terim var: Nesneye Yönelik Prgramlama (OOP). Nedir bu Nesneye Yönelik Prgramlama? Bu tip prgramlamada kullanılan her öğe bir nesne larak kabul edilir. Bu nesnelerin özelliklerini kullanarak nları değiştirerek prgram yazılır. Javascript'te bu tür bir prgramlama dilidir. Örneğin webde sörf yaparken herkesin karşısına çıkan frmlar birer nesnedir. Bu nesnelerin tepkiye göre cevap vermesi gibi özellikler de nun yani nesnenin özellikleridir. Örneğin şimdiye kadar çğu kez kullandığımız dcument.write kmutu aslında bir nesnenin özelliğine atıfta bulunmaktan başka bir şey değildir. Yani dcument nesnesinin write özelliğini kullanarak html sayfamıza yazı yazdırıyruz. Windw Nesnesi Genel larak pencere özellikleri ile ilgili bir nesnedir. PENCERE AÇMAK VE KAPAMAK Birçk yerde gördüğünüz pencere açma pencerelerin çeşitli özelliklerini değiştirme işte bu nesne yardımıyla yapılmaktadır. Şimdi bu nesneyi nasıl kntrl edeceğiz nu görelim. Pencere açmak için : windw.pen("url_adı", "pencere_adı", "pencere_özellikleri"); Pencere kapatmak için : windw.clse(); Pencere kapatmak için windw.clse() kmutu vermek yeterlidir. Burada kapatılan pencere anda kullanılmakta lan penceredir. Pencere açarken ise, windw.pen ile pencerenin açılmak istendiği belirtilir. Parantez içerisinde verilenler ise açılması istenen pencerenin özelliklerini belirtir. Url_adı : Buraya yazılacak dsya ismi açılacak pencerenin içerisinde lacaktır. Örnek : windw.pen("http://webteknikleri/wp/index.htm") veya ; 24 :.
windw.pen("index.html") Pencere_adı : Bu açılacak pencerenin adını belirtir. Birden çk pencere ile işlemler yapıyrsanız hangi pencereye bir kmut gönderdiğinizin belli lması için gereklidir. Örnek : Windw.pen("index.html", "ana"); Pencere_özellikleri : Bu özellikte adından belli lduğu ölçüde pencerenin özellikleri ile ilgilidir. Bir pencerenin değiştirilebilir özellikleri şunlardır : menubar : Tarayıcıların en üst kısmında bulunan File(Dsya), Edit(Düzen) vb. menülerin bulunduğu satırdır. tlbar : Tarayıcılarda üst kısımda Back(Geri), Frward(İleri) vb. tuşların bulunduğu kısımdır. lcatin : Tarayıcılarda ziyaret etmek istediğiniz web adresini yazdığınız kısım. status : Tarayıcıların en alt kısmında hangi dsyanın yüklendiği ile ilgili bilgi veren kısımdır. scrllbars : Sağ tarafta bulunan sürgü çubuklarıdır. resizable : Pencerenin byutlarının kullanıcıya bırakılması veya kesin değerler almasıyla ilgilidir. width : Açılacak lan pencerenin piksel cinsinden genişliğidir. height : Açılacak lan pencerenin piksel cinsinden byudur. left : Açılacak lan pencerenin ekranın sl tarafından kaç piksel uzaklıkta lacağını belirler. Tp : Açılacak lan pencerenin ekranın üstünden kaç piksel aşağıda lacağını belirler. Eğer pencere özellikleri kısmında değişmesini istemediğiniz bir özellik varsa nu yazmanıza gerek yktur. Bu değerler tarayıcının standart(default) değerlerinden alınır. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 25
Örnek: Şimdi bir pencere açalım. Açtığımız pencerede dsya, düzen ve ileri, geri tuş takımı lmasın. Pencerenin byutları 200x300 piksel lsun. Şimdi buna göre kdumuz: windw.pen ("http://webteknikleri/wp/index.htm", "webteknikleri", " menubar=n, tlbar=n, scrllbars=yes, lcatin=yes, width=200, heigt=300";) WİNDOW.LOCATİON.PROTOCOL Windw nesnesinin lcatin.prtcl nesnesi ise yüklenen dsyanın sabit diskten mi yksa internetten mi yüklendiğini gösterir. http: ile dsyanın internetten yüklendiğini belirtir. file: ile dsyanın sabit diskten yüklendiğin belirtir. Mesela şöyle bir örnekle dsyanın nerden yüklendiğini kntrl edelim. if (windw.lcatin.prtcl == "http:" ) { dcument.write ("Bu belge Internet'ten geliyr.") } else { dcument.write ("Bu belge sabit diskten geliyr") } WİNDOW.HİSTORY.GO Windw'un histrry özelliği ile bir önceki sayfaya erişim sağlanabilir. Örneğin kullanıcı herhangi bir frmu dldurmadı ve işlem yapılamadı bu durumda bir hata mesajı ile kullanıcıyı uyardıktan snra histry nesnenisin kullanarak bir önceki sayfaya kullanıcıyı gönderebilirsiniz. Bunun için gerekli kd yazımı şu şekildedir. Windw.histry.g(-1) Bir önceki sayfaya -1 ile ulaşabilirsiniz. Bu değeri arttırarak daha önceki sayfalara da ulaşabilirsiniz. 26 :.
STATUS BAR KULLANIMI Status bar windw nesnesinde belirttiğimiz gibi tarayıcıların en alt kısmında yer alan hangi dsyaya gidileceği veya yüklendiği ile ilgili bilgi veren kısımdır. Status barı değiştirmek için şu kdları yazmalıyız. windw.status="webteknikleri'nden Merhaba!"; Bu şekilde kullandığımız bir status kdu ile sayfa açık kaldığı sürece Webteknikleri'nden Merhaba! yazısı karşımızda lacaktır. Tarayıcı Nesnesi Tarayıcılar Javascript tarafından bir nesne larak algılanır. Bu nesnenin özelliklerini şöyle sıralayabilir. appname Tarayıcı adı appversin Tarayıcının Versinu appcdename Tarayıcının kd adı useragent Tarayıcının anamakinaya(server) kendini tanıtırken verdiği isim <html> <head><title>tarayıcı Özellikleri</title></head> <bdy> <script language="javascript1.2"> <! dcument.write("şu anda kullandığınız tarayıcının özellikleri :", "<br>"); dcument.write(navigatr.appname + navigatr.appversin + navigatr.appcdename + navigatr.useagent ) ; --> </script> </bdy> </html> Çerçeve (Frame) Nesnesi Çerçeve tekniği bir web sayfası üzerinde birden fazla web sayfası görüntülenmek istendiğinde kullanılır. Daha ayrıntılı bilgi için HTML adlı bölümümüze bakınız. Javascript açısından her bir çerçeve bir pencere sayılır. Bunların içeriğini kntrl etmek için belli kmut stilleri vardır. Şimdi nları görelim: Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 27
Tp : En üst pencere (Yani tarayıcının kendisi) Parent : Herhangi bir çerçeveyi luşturan düzenleyici bölüm Self : Çerçevenin kendisi Javascript çerçeve düzenleyicileri (FrameSet) içerisindeki diğer alt çerçeveleri 0 dan başlayarak numaralandırır. Bu numaralar yardımıyla çerçeve özelliklerini değiştirebiliriz. Örneğin iki tane çerçeveye sahip bir sayfada birinci çerçeve parent.frames[0] diğeri ise parent.frames[1] larak adlandırılır. Örneğini verdiğimiz gibi iki çerçeveli bir web sayfamız lduğunu varsayalım. Ana sayfamız ki bu sayfa tarayıcıya sayfanın iki html sayfasında luştuğunu söyleyen, çerçeve düzenleyicisinin lduğu sayfanın kdları şu şekilde lsun. 1. İlk sayfayı frame.html larak kaydedin. <html> <head><title>frame (Cerceve)</title></head> <!-- frames --> <frameset cls="50%,*"> <frame name="sl" src="sl.html"> <frame name="sag" src="sag.html"> </frameset> </html> Bu sayfayı sl.html larak kaydedin. <html> <head><title>sl Frame</title></head> <bdy> <script language="javascript1.2"> <! parent.frames[0].dcument.write("herhangi bir hesaplama vb.unsur icin kullanilacak kd turu", "<br>", "SOL taraf icin"); --> </script> </bdy> </html> 2. Aşağıdaki sayfayı sag.html larak kaydedin. <html> <head><title>sag Frame</title></head> <bdy> <script language="javascript1.2"> 28 :.
<! parent.frames[1].dcument.write("herhangi bir hesaplama vb.unsur icin kullanilacak kd turu", "<br>", "SAG taraf icin" ); --> </script> </bdy> </html> Frm Nesnesi Javscript açısından Html'in en önemli nesneleri Frmlardır. Çünkü ziyaretçi ile etkileşmede en büyük unsurlardan birisi Frmlardır. Html kendi frm nesnesini kendisi luşturabilir. Bu bakımdan Javascript'e düşen bir göre yktur. Javascript frm verilerinin yrumlanması ve işlenmesinde devreye girer. Şimdi frm unsurlarını tanıyalım : Name : Frmun ismi Actin : Frmun işleneceği perl veya cgi prgramının tanımlanacağı etiket Enctype : Frmun kdlanma türü Methd : Frmun gönderme(pst) mi yksa alma(get) işlemi göreceğini belirler. Target : Pencere ismi OnSubmit : Gönderme metdunun ismi Bunlardan yararlanarak bir frm nesnesinin kdunu yazalım. <frm name="mail" actin="http://www.webteknikleri.cm/cgi-bin/mail.pl" methd="post"> Frm unsurları </frm> Şimdi biz bu kdda "Frm Unsurları" diye bir şeyden söz ettik. Bu frm unsurları ziyaretçiden nasıl bilgi alınacağını belirleyen unsurlardır. Bunlar bir metin alanı veya aşağı düşmeli bir menü labilir. Frm etiketi içerisindeki tüm unsurlar element adlı dizi-değişken içerisine yazılırlar ve frm unsurları kullanılırken bu tip bir atıfta bulunmanız gerekir. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 29
TEXT ALANI Text alanı frm unsurlarının en önemlilerindendir. Ziyaretçilerden bilgi almak amacıyla kullanılır. Kullanımı şu şekildedir. <input type="text"> Şeklinde kullanılır. Bu nesnenin kullanılan etiketleri : Name : text alanının ismi Size : text alanının web sayfasında görülecek kısmının büyüklüğü Maxlenght : text alanına en fazla kaç karakter girilebileceğini belirler. İşte bir tam teşekküllü text alanı : <frm name="mail" actin="http://www.webteknikleri.cm/cgi-bin/mail.cgi" methd = POST> <input type="text" name="email" size=15 maxlenght=40> </frm> Buraya kadar işimiz Html ile hallettik. Şimdi bu frm nesnesinin özelliklerini Javascript aracılığıyla nasıl değiştirilebileceğini görelim. dcument.frm_ismi.elements[numara]. değiştirilmek_istenen özellik. numara : değiştirilmek istenen elemanın numarasıdır. Değiştirilmek istenen özellikler şunlar labilir. value : içerisindeki değer lenght : nesnenin uzunluğu name :ismi Şimdi bir örnek verelim (bu örnek bir önceki frm içindir). dcument.mail.elements[0].lenght=20 ŞİFRE ALANI Bu alanlar şifreli bilgi almak için kullanılır. Bu alana bir bilgi girildiğinde karakterler gözükmez nun yerine asteriks * işareti görülür. Örnek: <frm actin="http://" name="mail"> 30 :.
<input type="passwrd" name="sifre" > </frm> Bu tür frm unsurlarına erişimde text alanı gibi aynı şekildedir. BUTONLAR Frm unsuru larak iki tür butn vardır. Bunlar frm unsurlarını frm görevine göre göndermeye veya almaya yönelik Gönder (Submit) düğmesi bir diğeri ise Frm unsurlarının tümünün ilk halini almasını sağlayan Sil (Reset) düğmesidir. Şimdi bunların nasıl kullanıldıklarını görelim. <frm actin="http://" name="mail"> <input type="submit" name="gnder" value="gonder"><br> <input type="reset" name="sil" value="sil"> </frm> RADYO (RADİO) DÜĞMELERİ Bu tür düğmelerin en büyük özelliği rady düğmeleri gibi lmasıdır. Yani herhangi bir menü üzerinde sadece bir seçim yaptırmak istiyrsanız bu tür frm öğelerini kullanırsınız. Şimdi bunun ile ilgili bir örnek yapalım. <HTML> <HEAD> <TITLE>Radi</TITLE> <SCRIPT LANGUAGE = "JavaScript1.2"> functin srgu (secim) {var deger = null fr (var i=0; i<secim.length; i++) {if (secim[i].checked) { deger = secim[i].value break } } return deger } </SCRIPT> </HEAD> <BODY> <FORM name="frm1"> <p> <input type=radi name="firma" value="bilemediniz Yazilim">Micrsft</p> <p><input type=radi name="firma" value="bilemediniz Yazilim">Brland</p> <p><input type=radi name="firma" value="bilemedinizyazilim">adbe</p> <p><input type=radi name="firma" value="tebrikler Bildiniz">Cpmaq</p> Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 31
<input type=buttn value="bunlardan hangisi bilgisayar ureticisidir" nclick="alert(srgu(this.frm.firma))"> </FORM> </BODY> </HTML> Gördüğünüz gibi bu frm unsuruna da(öğesi) diğer frm unsurları gibi aynı şekilde ulaşılır. Fakat diğerlerinden farklı larak burada checked(seçilmiş) yardımcı etiketini kullandık. Burada Javascript ile bir döngü luşturarak hangi nesnenin seçili(checked) lduğunu kntrl ediyruz. Ve alert ile srulan srunun cevabının dğruluğunu ziyretçiye bildiriyruz. SELECT UNSURU Select öğesi frm nesnelerimizden menü yluyla ziyaretçi ile etkileşme yllarından bir tanesidir. Bu bir tür seçme kutusudur. Aşağı düşmeli kutu sayesinde kutu içerisindekilerden birisini seçebilirsiniz. Name, Multiple ve Size özelliklerine sahiptir. Bu nesnemizde nesnenin yönelendirilmesi açısından nblur, OnFcus, OnChange özellikleri kullanılabilir. Nesnenin özelliklerine ulaşım için en çk kullanılan etiket yardımcısı ise value(değer) dır. <HTML> <HEAD> Rady kutularında yaptığımız örneği şimdide Select öğesine uygulayalım. <title>select</title> <SCRIPT LANGUAGE = "JavaScript1.2"> functin secim(secilen) { return secilen.ptins[secilen.selectedindex].value } </SCRIPT> </HEAD> <BODY> <FORM name="sru"> <p><select NAME="firma"> <OPTION value="bilemediniz Yazilim">Micrsft</OPTION> <OPTION value="bilemediniz Yazilim">Brland</OPTION> <OPTION value="bilemediniz Yazilim">Adbe</OPTION></P> <OPTION value="tebrikler Bildiniz">Cmpaq</OPTION></P><br> <input type=buttn value="bunlardan hangisi bilgisayar ureticisidir" nclick="alert(secim(this.frm.firma))"> </FORM> </BODY> </HTML> 32 :.
OLAYLAR Ziyaretçiye sunulan bir web sayfası üzerinde ziyaretçinin yaptığı her tür hareket bir bağlantıyı tıklaması, bir resmin üzerine gelmesi, resmin üzerinde ayrılması, bir frmu yanlış dldurup hataya yl açması hep bir laydır. nclick Web sayfası üzerinde bir nesnenin msue ile üzerine tıklanması snucu nclick layı gerçekleşir. Olayın gerçekleşmesi için nesneni tıklanıp bırakılması gereklidir. Yani muse tuşuna basıldığında nclik layı gerçekleşmiş lmaz. nclick layı tuşa basılıp bırakıldıktan snra gerçekleşir. Bağlantılar, resimler, frm düğmeleri tıklanabilecek nesneler arasındadır. OnClick yönlendiricisine bu durumda ne yapacağını Html etiketleri arasında bildirmeniz gerekir. Örnek: <html><head><title>nclick</title> <script language="javascript1.2"> <! functin merhaba() {alert ("beni tikladiniz"); } --> </script></head> <bdy> <input type="buttn" name="tikla" value="tikla" nclick=merhaba()> </bdy> </html> Burada yaptığımız işlem html etiketleri arasında yer verdiğimiz bir butna tıklama (nclick) ile ne yapacağını merhaba fnksiynuna git diyruz. Fnksiynda ekrana bir uyarı ile beni tıkladınız diye bir uyarı mesajı geçiyr. Şimdi burada alert nesnesini de görmüş lduk. Alert nesnesi ziyaretçiye herhangi bir durumda uyarı vermek amacıyla kullanılır. Görüldüğü üzere parantez içerisinde çift tırnak içine uyarı yazısı yazılır. OnDblClick layı da nclick layı ile yapı larak aynıdır. nclick'ten farkı nesneye çift tıklandığında çalışmasıdır. Diğer yöntemler nclick ile aynıdır. Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 33
nmuseover, nmuseout Bu tür nesne layları ingilizce adı (nmuseover = muse işaretçisi/imleç üzerindeyken, nmuseout = muse işaretçisi üzerinden ayrıldığında) üzerinde lmakla birlikte muse-un nesnenin üzerinde lup lmadığı ile ilgilenir. Örnek: <html> <head><title>nmuseover ve nmuseout </title> <script language="javascript1.2"> <! functin uzerinde() {windw.status="tıklayın ve Webteknikleri.cm adresine gidin" } functin disinda() {windw.status="webteknikleri.cm baglantisina tıklayın" } --> </script></head> <bdy> <a href="http://www.webteknikleri/index.htm" nmuseover = uzerinde() nmuseout =disinda()> Webteknikleri.cm </a> </bdy> </html> nmuseover ve nmuseout metdu ile ilgili bir diğer örnek: <html> <head><title>onmuseover</title> <script language="javascript1.2"> <! functin altavista() {dcument.web.mesaj.value="en unlu web mtrlarindan biri" } functin altavistasil() { dcument.web.mesaj.value="" } functin yah() { dcument.web.mesaj.value="en unlulerden bir tane daha" } functin yahsil() {dcument.web.mesaj.value="" } functin htbt() {dcument.web.mesaj.value="ve bir tanesi daha" } functin htbtsil() {dcument.web.mesaj.value="" } --> </script></head> <bdy> 34 :.
<a href="www.altavista.cm" nmuseover="altavista()" nmuseout = "altavistasil()"> Altavista</a><br> <a href="www.yah.cm" nmuseover="yah()" nmuseout="yahsil()">yah</a><br> <a href="www.htbt.cm" nmuseover="htbt()" nmuseout="htbtsil()">htbt</a><p> <frm name="web"> <input type="text" name="mesaj" size="50"> </frm> </bdy> </html> nsubmit Web üzerinde sörf yaparken çğunlukla karşımıza çıkan frmlar biz dldurduktan snra sayfanın bağlı bulunduğu server (ana makine) ya gönderilir. Fakat biz bu nsubmit layı ile frm gönderilmeden önce frmun düzgün dldurulup dldurulmadığını kntrl edebiliriz. Bunu örnek bir kd ile açıklayalım. Html sayfamızda bdy etiketleri arasında dldurulmasını istediğimiz bir frm var ve ilgili kdun başlangıcı şöyle : <frm actin="mail.pl" methd="pst" nsubmit="dgrula()"> Bu satır ile frmun gönderilmesiyle (nsubmit) dgrula fnksiynunu çağırıyruz. dgrula fnksiynu da şu şekilde labilir (Bu fnksiyn head etiketleri arasında lan script etiketleri arasında lmalıdır). functin dgrula() { cnfirm ("Frmu düzgün dldurduysanız OK'i tıklayınız'); } Bu fnksiynda kullandığımız cnfirm nesnesi ile kullanıcıya OK ve Cancel tuşları ile Emin misin? Frm Gönderiliyr! denilmektedir. nreset Bu lay ile web sayfanızda bulunan frmdaki yazdıklarınızın tamamen silinir. Yani yazdığınızın yanlış lduğunu farkettiniz bu durumda Sil (Reset) tuşunu tıklarsınız ve size bş bir frm gelir. Yalnız burada birşeyi belirtmek isterim. Reset(Sil) tuşuna tıkladıktan snra tarayıcının back(geri) düğmesini tıkladığınızda frmunuzda yazdıklarınız tekrar geri gelmez. Fakat siz nreset layı ile bu durum için sn bir ziyaretçiye seçenek sunabilirsiniz. Örnek: Seval ÖZBALCI seval.zbalci@bayar.edu.tr - Internet Prgramlama Ders Ntu - CBÜ Turgutlu MYO.: 35
<html> <head><title>nreset</title> <script language="javascript1.2"> <! functin sil() { return cnfirm('silmek istediginize emin misiniz?'); } --> </script> </head> <bdy> <frm nreset="return sil()"> <input type="text" name="mail"> <input type="reset" value="sil"> </frm> </bdy> </html> nchange Web sayfası üzerinde ziyaretçinin değiştirebileceği üç tür alan vardır. Bunlar text (metin) textarea (geniş metin alanı) select (seçim alanı) dır. Muse u bu alanlar üzerine getirip tıkladığınızda nchange(değişti) layını gerçekleştirmiş lursunuz. Şimdi bunu select yöntemi ile nasıl lduğunu görelim. Örneğimizde aşağı düşmeli bir menü tasarlayacağız ve şeçili durumda lan web sayfasına gönderme yapacağız. <html> <head><title>onchange</title> <script language="javascript1.2"> <! functin degisti() { windw.pen("www.altavista.cm"); } --> </script> </head> <bdy> <frm methd="pst"> <p><select name="degistir" size="1" nchange="degisti()"> <ptin>adresi tikla <ptin>altavista </select> </frm> </bdy> 36 :.