|
||
| JavaScript Nedir: JavaScript; web tasarımı ile ilgilenenler için HTML dilinden sonra en önemli dildir. İyi bir web tasarımcısı olmak için en az html ve JavaScript dillerini bilmeniz lazım. Bu dilin en büyük özelliği html dili ile iç içe kullanılması ve kolay anlaşılır olmasıdır. Bu özellikleri JavaScript 'i en çok kullanılan diller arasına sokmuştur. JavaScript dilini öğrenebilmek için html dilini çok iyi bilmek gerekir. Html dilini bilmiyorsanız hiç şansınız yok  Şey aslında bi şansınız var... Bu sitede sevgili Savaş 'ın yazdığı HTML dersleri de var... Ama bence Savaş 'ın o iğrenç esprilerine katlanmak yerine webmaster olmaktan vazgeçin daha iyi Yani en azından HTML'den nefret etmemiş olursunuz. JavaScript Ne İşe Yarar: Kuru kuruya bir kaç resim ve yazıdan oluşan sitelerden bıktıysanız ve zorlanmadan daha fazlasını öğrenmek istiyorsanız, JavaScript dili tam size göre, bu dil sayesinde kolayca sitenizi canlandırıp, ziyaretçi ile diyalog içine sokabilirsiniz. Bu dil sayesinde bir çok şey yapabilirsiniz bunların başında form kontrolü, ufak oyun ve programlar gelir. Kısacası html dilini biliyor ve kendinizi daha fazla geliştirmek istiyorsanız aramıza hoş geldiniz JavaScript Diline Giriş: JavaScript dili de diğer tüm programlama dilleri gibi komutlardan meydana gelir. İsterseniz önce bu komutların yazılış formatını görelim. Temel olarak JavaScript komutları Html de <script></script> tagları arasına yazılır. <html> <script language="javascript"> Bu satırda kullanacağımız scriptin versiyonunu belirtiyoruz. { Bu raya JavaScript komutları yazılır } </script> <body> Bu araya html kodları yazılır ve JavaScripte yönlendirme yapılır </body> <html> Yukarıdaki örnekte kullandığımız JavaScript'in versiyonunu language komutunu kullanarak belirtiyoruz. JavaScript'in bir den fazla versiyonu vardır (JavaScript1.0, JavaScript1,2 vs.). Bu versiyonların her birinde yeni komutlar eklenmiştir bu nedenle scriptin versiyonunu belirtmek önemlidir. Daha sonra hangi versiyonla hangi komutların eklendiğini daha ayrıntılı olarak inceleyeceğiz. JavaScript komutları sadece bu formatla sınırlı değildir. Direk html kodları arasında ya da "js" uzantılı dosyalar olarak da kullanılabilirler. İlerde bu değişik formatları daha detaylı olarak ele alacağız. Biz anlatımımız boyunca bu formatları karışık olarak kullanacağız. |
||
|
||
| Fonksiyonlar JavaScript komutları genelde fonsiyon içinde tanımlanırlar. Basit scriplerde fonksiyona pek gerek duyulmasa da scriptin karmaşıklığı artıkça fonksiyon kullanımı gerekebilir ve çoğu zaman zorunlu hale gelir. Biz de anlatımımız boyunca vereceğimiz örneklerin hemen hemen hepsinde fonksiyon kullanacağımız için ilk dersimize fonksiyon kullanımı ile başlamak istedim. Umarım bi sakıncası yoktur? Gerçi olsa ne yazar.. JavaScript'te foksiyon kabaca function fonksiyonun_adı() şeklinde tanımlanır ve fonksiyonun çalışabilmesi için herhangi bir komutla tetiklenmesi gerekir. Örnek : <html> <script language="javascript"> function mesaj() { alert("fonksiyon örneği çalışıyor.") } </script> <body> <center> <p> Function Örneği</p> <input type="button" value="Tıklayın!.." onclick="mesaj()"> </body> </html>  Örnek için TıklayınızNot: Bu JavaScript'te fonksiyonu tetiklemek için "<button></button>" ve "onclick" komutlarını kullandık bunları ilerleyen derslerde daha ayrıntılı olarak inceleyeceğiz şimdilik bilmeniz gereken bu komutların genelde beraber kullanıldığıdır. Diğer örneklerimizde de bu komutlardan yararlanacağız.. <button onclick="fonksiyonun adı">tıklayıın</button> Fonksiyona Dışarıdan Değişken Gönderme. Foksiyonların en çok kullandığımız özelliklerinden biri de dışarıdan değişken alabilme özelliğidir. function deneme(a) 'şeklinde tanımlanan bir fonksiyona dışarıdan her hangi bir "a" ve değişkeni yollanabilir. Dışardan bir değişken yollanabileceği gibi birden fazla değişkende yollana bilir. function deneme(x,y) 'şeklindeki bir fonksiyona dışarıdan "x" ve "y" gibi iki değişken gönderilebilir. Gönderilen ilk değişken "x" ikinci değişken "y" olarak algılanır. dışarıdan yollanan değişken, tetikleme komutunun sonuna eklenen deneme('ali','veli') (burada deneme('ali','veli') yazmamızın nedeni tetiklenecek fonksiyonun adının deneme() olmasıdır) komutu ile yollanır burada 'ali' birinci değişken 'veli' ise ikinci değişkendir. Örnek : <htm> <script language="javascript"> function deneme(a ,  { alert("birinci değişkeniniz="+ a) alert("ikinci değişkeniniz="+ } </script> <body> <center> <p>İkinci Function Örneği</p> <input type="button" value="Tıklayın!.." onclick="deneme('bilim','teknoloji')"> </body> </html> scriptin çalışan örneğini görmek için tıklayın.
|
||
|
||
| Mesaj Kutuları Alert Kutusu: Alert kutusu uyarı mesajları vermek için kullanılır. Mesaj kutuları içinde en çok kullanılanı alert kutusudur. Bu kutu bir ünlem işareti, yazdığınız mesaj ve bir tamam butonundan oluşur.  alert(deşğişken) yada alert("Masj buraya yazılır") Örnek: <html> <script language="javascript"> function mesaj() { alert("ilk örneğimiz çalışıyor") } </script> <body> <center> <p>Alert Kutusu Örneği</p> <input type="button" value="Tıklayın!.." onclick="mesaj()"> </body> </html> scriptin çalışan örneğini görmek için tıklayın. |
||
|
||
| Confirm Kutusu: Confirm kutusu genelde yapılacak olan işlem hakkında kullanıcıya soru sormak için kullanılır. Bir soru işareti, mesajınız, bir Tamam ve bir İptal butonlarından oluşur. * Bu mesaj kutusuyla verilen mesajın cevabı bir değişkene atanarak değişik işlemler yapılabilir. - Cevap olarak, "Tamam" butonunun tıklanması değişkene "1" değerini atar. - "İptal" butonunun tıklanması ise değişkene "0" değerini atar. (Pencerenin köşesinden kapatılması, "İptal" butonuna basmak ile aynı işlevi görür)  confirm(Değişken) yada confirm("mesaj buraya yazılır") Örnek: <html> <script language="javascript"> function mesaj() { var a a = confirm("Tamam yada İptali tıklayın.") if (a==1) { alert("Tamam tuşunu tıkladınız.") } if (a==0) { alert("İptal tuşunu tıkladınız.") } } </script> <body> <center> <p>Confirm Kutusu Örneği</p> <input type="button" value="Tıklayın!.." onclick="mesaj()"> </body> </html> scriptin çalışan örneğini görmek için tıklayın.Not: Bu örnekte "if (a==1)" kısmıyla başlayan satırdan scripti kapattığımız satıra kadar olan kısımda if() komutu yardımı ile karşılaştırma yapıyoruz. Şimdilik bu bölüm sizi alakadar etmiyor sadece scriptin anlaşılır olması için eklenmiştir. Ayrıca var a şeklinde kullanılan satır "a" isminde bir değişken tanımlamak için kullanılmıştır. Şimdilik bu kısımlara takılmayın ilerleyen derslerde bunlar ayrıntılı olarak anlatılacak |
||
|
||
| Prompt() Mesaj Kutusu : Prompt mesaj kutusu diğer mesaj kutularından farklı olarak kullanıcının değer girişi yapabildiği bir kutudur. Yani kullanıcıya verilen mesaj karşılığında bir değer girmesi istenir. Değişkene atanan bu değer script içinde isteğe göre değerlendirile bilinir. değişken = prompt('mesaj','örnek')  Örnek: <html> <script language="javascript"> function mesaj() { var a a = prompt("Adınızı Giriniz","Adınız") alert(a+" JavaScript Öğrenmeye başladın artık!") } </script> <body> <center> <p>Confirm Kutusu Örneği</p> <input type="button" value="Tıklayın!.." onclick="mesaj()"> </body> </html> scriptin çalışan örneğini görmek için tıklayın.
|
||
|
||
| Değişkenler Değişken : Değişken, JavaScript de dahil olmak üzere tüm programlama dillerinde kullanılan, içeriği tamamen isteğe bağlı olarak atanan ve programcı tarafından ihtiyaca göre oluşturulan nesnelerdir. Değişkenin içeriği metin yada sayı olabilir. JavaScripte Değişken Kullanımı : JavaScript'te değişken kullanmak için ilk olarak, değişken isminin "var" komutu kullanılarak belirtilmesi gerekir. (Evet bu değişkeni önceden belirtme işi çok gıcık ama napalım gülü seven dikenine katlanır). Hemen değişkeni belirtirken yada daha sonra script içerisinde değişkene bir değer atanabilir. Eğer değişken tanıtılmadan içeriğine bir değer atanılmaya çalışırsa script çalışmaz. var gezegen gezegen = "mars" yada var gezegen = "mars" ' Bu örneklerde değişkenimiz "gezegen", değeri "mars" tır. * Bir var komutu ile birden çok değişken tanımlana bilir. var okul,sınıf,no 'burada var komutu okul,sınıf ve no olmak üzere üç değişken oluşturduk. Örnek: <html> <script language="javascript"> function deneme() { var mesaj mesaj = "örneğimiz çalışıyor" alert(mesaj) } </script> <body> <center> <p>Değişken Örneği</p> <input type="button" value="Tıklayın!.." onclick="deneme()"> </body> </html> scriptin çalışan örneğini görmek için tıklayın. |
||
|
||
| JavaScript Değişkenlerinin Özellikleri: - JavaScrip'te değişken kullanılmadan önce "var" komutu ile tanımlanmalıdır. - JavaScrip'te değişkene atanan değer " " yada ' ' imleri arasına yazılır. - Küsuratlı sayısal değerler "." (nokta) ile gösterilir. 3.5 ( "," virgül kullanılmaz.) - JavaScrip'te değişken algılanırken büyük küçük harf ayrımı yapılır. Örneğin "okul" ile "Okul" kelimeleri JavaScript tarafından iki farklı değişken olarak algılanır. Değişken Çeşitleri Boolean Değişkeni : Bu değişkenler iki farklı değer alabilen değişkenlerdir. Bu değişkenin "true" değerini alması değişkenin geçerli yada kullanıla bilir olduğu, "false" değerini alması ise geçersiz yada kullanılamaz olduğu anlamına gelir. Ayrıca "false" yerine "0", "true" yerine "1" değerleri de kullanıla bilir. Bu değişkeni ilerde bazı örneklerde kullanacağız. Global Değişken : Global değişken, diğer değişkenler gibi hemen hemen tüm programlama dillerinde kullanılır. Kullanım amacı; Bir fonksiyon içinde tanımladığımız bir değişken başka bir fonksiyon için geçerli değildir. Yani bir fonksiyonda tanımlayıp kullandığımız bir değişkeni başka bir fonksiyonda kullanmak için yeniden tanımlayıp değer atamamız gerekir. Ama bazı durumlarda aynı değişkenin bir çok fonksiyonda kullanılması gerekebilir. Yani değişkene verdiğimiz değerin tüm fonksiyonlarda geçerli olması ve değerinin değiştirilebilmesi istenebilir. Bu durumda global değişkene ihtiyaç duyulur. JavaScrip'te global değişken kullanımı çok kolaydır. Yapmanız gereken tek şey, global değişken olarak kullanmak istediğiniz değişkeni fonksiyon içinde degil de hemen scripti tanımladıktan sonra yani fonksiyon açmadan tanımlamaktır. Yani hiç bir ek komuta gerek yoktur. Bu şekilde tanımladığınız bir değişkeni script içindeki tüm fonksiyonlarda tekrar tanımlamaya gerek kalmadan kullana bilirsiniz. Örnek: <html> <script language="javascript"> var sayi = '10' function deneme1() { alert("1. fonksiyon, global değişken ="+sayi) } function deneme2() { alert("2. fonksiyon, global değişken ="+sayi ) } </script> <body> <center> <p>Global Değişken Örneği</p> <p>Fonsiyon 1</p> <input type="button" value="Tıklayın!.." onclick="deneme1()"> <p>Fonsiyon 2</p> <input type="button" value="Tıklayın!.." onclick="deneme2()"> </body> </html> scriptin çalışan örneğini görmek için tıklayın.
|
||
|
||
| Array (Dizi) Değişken : Diğer tüm değişken türleri sadece bir tek değer alabilmekteydi. Ama dizi değişkende birden fazla değer tek değişken içinde tutulabilir. Dizi değişken oluşturmak için diğer değişkenler gibi önce değişkenin adı "var" komutu ile tanımlanır. Daha sonra "new Array()" komutu ile değişkene değerler atanır. * Dikkat edilmesi gereken en önemli unsur "Array" komutunun ilk "A" harfi mutlaka büyük harfle yazılmalıdır. Küçük a yazılırsa script çalışmaz. var degisken degisken = new Array(deger1,deger2,deger3,deger4....) Dizi değişkenin değerleri okunurken degişken[0], degişken[1], degişken[2] şeklinde okunur. Burada dikkat edilmesi gereken en önemli unsur. ilk değerin
<html> <script language="javascript"> function dizi_degisken() { var gezegenler gezegenler = new Array("merkur","venus","dunya","mars","jupiter") alert("değişkenleriniz = "+gezegenler[0]+gezegenler[1]+gezegenler[2]+gezegenler[3]+gezegenler[4]) } </script> <body> <center> <p>Dizi Değişken Örneği.</p> <input type="button" value="Tıklayın!.." onclick="dizi_degisken()"> </body> </html>[/color] scriptin çalışan örneğini görmek için tıklayın.
|
||
|
||
| Mantıksal ve Matematiksel İşlemler Karşılaştırmalar : Karşılaştırma işlemleri genellikle scripte koşul vermek için kullanılır. Değerler koşula uygunsa sonuç "true", değilse "false" dir. JavaScrip'te karşılaştırma operatörleri tablosu ; OPERATÖR ADI ANLAMI == Eşit Sol ve sağdaki değerler biribirlerine eşitse != Eşitdeğil Sol ve sağdaki değerler birbirlerine eşitdeğilse < Küçük Soldaki değer sağdaki değerden küçüse > Büyük Soldaki değer sağdaki değerden büyükse <= Küçük yada eşit Soldaki değer sağdaki değere eşit yada küçükse >= Büyük yada eşit Soldaki değer sağdaki değere eşit yada büyükse |
||
|
||
| Mantıksal İşlemler : Mantıksal işlemler genelde birden fazla karşılaştırma işlemi arasında bağ kurmak içim kullanılır. Örneğin iki koşul arasında "||" operatörü kullanıldığında sağdaki yada soldaki koşullardan herhangi birinin sonucu "true" (doğru) ise mantıksal işlemin sonucunda "true" dir. JavaScrip'te mantıksal işlem operatörleri tablosu ; OPERATÖR ADI ANLAMI && Ve (and) Sol ve sağdaki koşulların her ikiside doğruysa || Veya (or) Sol ve sağdaki koşullardan herhangi biri doğruysa ! Değil Verilen koşul doğru ise Not: Karşılaştırma işlemleri ve mantıksal işlemler hakkındaki örnekleri if() komutunu incelerken kullanacağız. |
||
|
||
| Matematiksel İşlemler : Dört işlem (toplama, çıkartma, çarpma ve bölme) için kullanılan basit matematiksel ifadelerdir. JavaScrip'te matematiksel işlem operatörleri tablosu ; OPERATÖR ADI ANLAMI + toplama Sol ve sağdaki değerleri birbirine ekler. - çıkarma Soldaki değerden sağdaki değerleri çıkarır * çarpma Sol ve sağdaki değerleri birbiri ile çarpar. / bölme Soldaki değeri sağdaki değere böler. |
||
|
||
| Math Nesnesi: JavaScript'te karmaşık matematiksel işlemler Math nesnesi yardımı ile kullanılır. Math nesnesi temel matematiksel işlemlerin yanı sıra yararlı birkaç karşılaştırma işlemi de içermektedir. Bu ek işlemler çok kolaylıklar sağlar. Örneğin girilen iki sayıdan hangisinin büyük olduğunu Math.max() komutu yardımı ile kolayca görebiliriz. Math nesnesi işlem operatörleri tablosu ; OPERATÖR ADI ANLAMI PI "pi"sayısı "pi" sayısının tam değerini verir. E "e"sayısı "e" sayısının tam değerini verir. sqrt(x) karekök x'sayısının karekök değeri. log(x) logaritma x'sayısının karekök değeridir pow(x,y) x^y x üzeri y sayısının değeri. sin(x) sinüs x'sayısının sinüs değeri. cos(x) cosinüs x'sayısının cosinüs değeri tan(x) tanjant x'sayısının tanjant değeri asin(x) arcsinüs x'sayısının arcsinüs değeri. acos(x) arccosinüs x'sayısının arccosinüs değeri atan(x) arctanjant x'sayısının arctanjant değeri. abs(x) tamkısım x'sayısının tamkısımını döndürür max(x,y) büyük sayı x ve y sayılarından büyük olanın değeri min(x,y) küçük sayı x ve y sayılarından küçük olanın değeri ceil(x) büyük tam sayı x'sayısından büyük en yakın tamsayı değeri floor(x) küçük tam sayı x'sayısından küçük ve en yakın tamsayı değeri round(x) tam sayı x'sayısına en yakın tam sayı değeri. random() rasgele sayı "0" ile"1" arasında rasgele bir sayı değeri exp(x) sayı x'sayısının kendisi |
||
|
||
| Kullanım Şekli: Yukarıdaki tabloda verdiğimiz komutlar tek başlarına kullanılamazlar. Muhakkak Math nesnesi ile birlikte kullanılmalıdırlar. Math.komut ' Örneğin Math.sin(30) * Math komutunun ilk harfi muhakkak büyük olmalıdır. "math" şeklindeki bir yazım ilk harfi küçük olduğu için çalışmayacaktır. * Aynı şekilde yukarıdaki tabloda verilen operatörler aynen tabloda verildiği gibi küçük harfle yazılmalıdır. Herhangi bir karakteri büyük harfle yazılırsa script çalışmaz. Örnek: Girilen sayısının karekökünü bulan bir script; <htm> <script language="javascript"> function kok() { alert('9 un karekökü= '+Math.sqrt(9)) } </script> <body> <center> <p>Math Nesnesi Örneği</p> <input type="button" value="Tıklayın!.." onclick="kok()"> </body> </htm> scriptin çalışan örneğini görmek için tıklayın.
|
||
|
||
| Documet Nesnesi Ve Form Nesneleri Document Nesnesi: JavaScrip'te document nesnesi üzerinde bulunduğumuz sayfa anlamına gelir. Document nesnesi kullanılarak üzerinde bulunduğumuz sayfanın özelliklleri değiştirilebilir. OPERATÖR İSMİ VE ANLAMI title Sayfanın başlığı bgcolor Sayfanın ardalan rengi fgcolor Sayfanın yazı rengi linkColor Sayfanın link rengi alinkColor Üzerinde bulunulan link rengi vlinkColor Ziyaret edilmiş link rengi location Sayfanın URL'si lastmodified Sayfanın son güncellendiği tarih write() Sayfa içerisine yazı yazmak için kullanılır clear() Sayfanın JavaScriptle eklenen içeriğini temizler. |
||
|
||
| Location Nesnesi : O an üzerinde bulunan web sayfası manasına gelmektedir. Özellikleri aşağıdaki tabloda verilmişti. Özellik: Açıklama: href Üzerinde bulunulan sayfanın URL'sini verir protocol Üzerinde bulunulan sayfanın Protokol türünü verir reload() Üzerinde bulunulan sayfanın yeniden yüklenmesini sağlar |
||