|
Netscape Navigator 2.0 ile birlikte geliştirilen JavaScript client-side bir dildir. Web sayfalarında dinamik içerik sağlamak ya da kullanıcıyla iletişim kurmak için kullanılır. Javascript dili kullanılarak HTML sayfalarını geliştiricek bir çok olanağa sahip olabilir ve kaliteli web sayfaları hazırlayabilirsiniz.
window. alert("Bloguma hoş geldiniz  ")
Bir tarayıcının anlayacağı temel dil HTML'dir. JavaScript dilinin HTML belgesi içinde yazılabilmesi için <SCRIPT> etiketleri kullanılır. Javascript kodu <script language="JavaScript"> etiketiyle başlar ve </script> tagıyla sonlandırılır. Language belirtilmediğinde default olarak JavaScript gelir.
Web sayfası hazırlarken Javascript kodlarını web sayfasına ekleme’nin farklı yolları vardır. Bunlar; - Head Bölümünde
- Body Bölümünde
- Body Bölümünde URL olarak
<HEAD> İçerisinde: Bir HTML belgesinde Head bölümünde <Script> tagını kullanarak herhangi bir Javascript kodunu HTML sayfamıza ekleyebiliriz. Head bölümüne eklenen script kodu Body bölümü yüklendikten sonra etkin hale gelir.
<html>
<head>
<script language="javascript">
</script>
</head>
<body>
//bılabılabılabıla
</body>
</html>
ya da şu şekilde de kullanılabilir...
<head>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
Burada script.js isimli JavaScript dosyasını sayfamız içerisinde direk kullanmış oluyoruz.
<BODY> İçerisinde: Html belgenin Body bölümünde Script kodunu kullanmanın iki yolu vardır:
Doğrudan çalışacak kodlar </script> etiketi kullanılarak Html belgenin istenildiği yerine yazılır. Yazılan script browser tarafından okunduğunda çalışmaya başlar.
<script language="JavaScript">
function document.write(“En Son Okunduğu Tarih:” + document.lastModified)
</script>
<BODY> İçerisinde URL Olarak: JavaScript kodunu URL olarak da kullanmak mümkündür.Örneğin;
<a href="javascript: alert('Son!')">Siteden Çık</a>
Kullanımına daha sık rastladığımız diğer bir yöntem de: Kullanıcı tarafından bir olayın başlatılmasıyla Javascript kodunun çalışmaya başlamasıdır. Örneğin buttona clicklendiğinde Javascript kodunun devreye girmesi gibi…
<html>
<head>
<script language="JavaScript">
function DenemeUyari()
{
alert(“I love coding;)!”);
}
</script>
</head>
<body>
//bılabılabıla
<form>
<input type="button" name="Button1" value="Buraya Tıklayın" onclick="DenemeUyari()">
</form>
</body>
</html>
Peki bu script nasıl çalışır ? İlk olarak button oluşturulur. Buttona tıklandığında ekranda “I love coding;)” yazan minik bir pencerecik oluşacaktır. Fonksiyon okunur ve browser'ın hafızasında tutulur. Html dilindeki <Form> tagıyla button oluşturulur. Burada <Form> tagları arasındaki ‘onclick’ sayesinde butona basıldığında hangi fonksiyonun çağırılacağını belirleriz. alert() fonksiyonu Javascript’in fonksiyonlarından biridir. Bu nedenle methodun çalışması için onclick de çağırmamız yeterli olacaktır.
JAVASCRİPT DİLİNİN ÖZELLİKLERİ:
JavaScript dilinin temel gramer yapısından bahsedecek olursak;
Çalışma Sırası: HTML belge içerisinde script kodu eklendiğinde sırayla çalışır. Farklı olarak yukarıda ki örnekde de görüldüğü gibi functionlar işin içine girdiğinde, bir olay gerçekleştiğinde o olaya bağlı olarak çalışması gereken JavaScript kodu çalışır.
Değişkenler: Bir değeri içeren bellek adlarını ifade ederler.
Operators: Değerler ya da değişkenler arasında toplama, çıkarma gibi işlemlerin yapılmasını sağlarlar. İşleçler +, *, /, - gibi işaretlerle kullanılır.
Expressions: Değişkenlerin, işleçleri ve deyimlerin bir araya gelerek oluşturdukları yapılara ifade denir.
Statements: Deyimler belli bir komut ya da söz dizimi bileşenlerinin grubuna verilen addır. Örneğin bir komut ya da bir IF yapısı deyimi oluşturur.
Objects: Kendi değerleri, özellikleri ve işlemleri olan bileşenlere nesne (object) denir. JavaScript dilinde çok sayıda yerleşik nesne vardır.
Functions: Bir JavaScript fonksiyonu diğer dillerdeki bir fonksiyon yordam ya da bir alt yordam anlamına gelir. Bir fonksiyon bir dizi işlemi yerine getirir ve bir sonuç döndürür. Ayrıca fonksiyonlar, parametre olarak kabul edilen birçok değer kabul ederler.
Case Sensitivity: JavaScript case sensitive (büyük küçük harf duyarlı) bir dildir. Değişkenler ve diğer öğeler küçük ya da büyük yazılabilirler. Ancak A değişkeni ile a değişkeni birbirinden farklıdır.
<script language="JavaScript">
test= "küçük harf";
TEST= "BÜYÜK HARF";
document. writeln("test = "+test+"<BR>");
document. writeln("TEST = "+TEST+"<BR>");
</script>
Açıklamalar:
Bütün programlama dillerinde olduğu gibi, kod yazarken açıklama yazmak için kullanabileceğimiz bir karakter vardır. JavaScript'te bu <!- ve //-->. işaretlerinin arasıdır.
Document Objects: JavaScript’in en ünlü nesnelerinden birisidir. Document nesnesi tüm sayfaya verilen isimdir. Bu açıdan önemi büyüktür;)
document.write(“Selam everbody”)
Bu kod içerisinde “document” bir nesnedir. “write” ise bir methoddur. Şimdi document nesnesiyle ilgili diğer metodları gözden geçirmeye devam edelim…
lastModified: Bu minik mbtod bize en son yapılan güncelleme tarhini verir.
<script language="JavaScript">
document. write("Son Güncelleme Tarihi:" + document.lastModified);
</script>
bgColor and fgColor: Şimdi arka plan rengini ve yazı rengini değiştirmeyi deneyelim…
<script language="JavaScript">
document. bgColor="black"
document. fgColor="#336699"
</script>
document.open(): Sayfa içerisinde yeni bir document nesnesi oluşturur.
document.vlinkColor: Ziyaret edilmiş link rengini belirler.
document.linkColor: Linklerin rengini belirler.
document.alinkColor: Mouse üzerine geldiğinde linklerin alacağı rengi belirler.
<script language="JavaScript">
document. open()
document. vlinkColor="red";
document. linkColor="orange";
document. bgColor="white";
document. fgColor="blue";
document. alinkColor="green";
</script>
Renkler böyle karıştırılır ;)
document.write(): Sayfa üzerine yazıları ve sonuçları yazar, ayrıca html taglarını uygular.
document.writeln(): write metodu ile aynı işi görür,farkı yazının sonuna bir boşluk eklemesidir.
document.title: Sayfa başlığını değiştirir-verir.
document.URL: Sayfa adresini verir.
document.close(): Yeni oluşturulan document nesnesini sonladırır.
<script language="JavaScript"> document.write("URL : "+document.URL);
document. write("Basligi : ”+document.title);
document. write("<a href='javascript:history.back()'>geri dönüş</a>");
document. close();
</script>
Message Box: Minik uyarı pencereleri için kullanılır. Birkaç çeşidi vardır:
Alert:
<body>
<script>
window. alert("Bloguma hoş geldiniz ")
</script>
</body>
Confirm: window.confirm("Pencereyi kapatmak istediğine eminmisiniz ?")
Prompt: Prompt mesaj kutusu verilen yetkiye göre kullanıcıdan bilgi alabilmemize olanak tanır.
window.prompt("Lütfen kullanıcı adını giriniz !")
ya da şu şekilde de kullanılabilir…
window.prompt("Sorulan Soru ?", “Cevabı”) Kaynak: CodeProject Görüşmek Ümidiyle...
Sevgiler…
Görüntüleme sayısı: 187
Yaptığınız yorumlar için teşekkür ederim.
|
Yazılım 
