JavaScript

BTP 207
İNTERNET PROGRAMCILIĞI I
Ders 7
JavaScript
2
HTML’in sahip olmadığı bazı özelliklerin web sayfalarında kullanılmasını sağlar.
 Java ile javascript birbirine karıştırılmamalıdır. Java Sun firması tarafından
Pascal ve Delphi dillerinden esinlenerek yazılmış bir programlama dilidir.
Javascript Netscape firması tarafından C dilinden türetilmiş bir script dilidir.
Yorumlanması için bir tarayıcıya ihtiyaç duyar ve yorumlandığı tarayıcının
türüne bağlı olarak farklı sonuç verebilir.
 Javascript kodları HTML sayfa içerisinde veya js uzantılı harici bir dosya
oluşturularak kullanılabilir.
 Javascript kodları, sayfanın açılması, tıklama, sayfanın kapanması, kullanıcının
kodları çağırması gibi bir olay meydana geldiğinde çalıştırılır. İstenilirse,
hazırlanan kodların belirli aralıklarla çalışması sağlanabilir.
 HTML ile oluşturulabilen bir işlem javascript kullanılarak da oluşturulabilir ama
bu çok doğru bir yöntem değildir. Eklenen her javascript kodu sayfaya yük
getirecek ve her tarayıcıda aynı sonucu vermeyecektir.
JavaScript




3
İnteraktif web sayfaları tasarlanmasını sağlar.
Genellikle HTML sayfalarının içerisine gömülerek kullanılır.
Javascript bir yorumlama dilidir.
Lisans satın alınmasına gerek yoktur.
JavaScript’le Neler Yapılabilir? (1/2)
 Javascript HTML tasarımlarına programlama desteği sağlar.
 Javascript yardımıyla HTML sayfalarına dinamik metinler konulabilir.
document.write(“Adınız :” + isim) şeklindeki bir javascript kullanımı isim
değişkenine verilen değeri HTML sayfasına yazacaktır.
 Javascript yardımıyla web sayfasında gerçekleşen olaylara göre işlemler
gerçekleştirilebilir.
 HTML sayfası üzerindeki nesnelerin değerlerini okuma, değiştirme veya bunlara
değer yazmak için kullanılır.
JavaScript
JavaScript’le Neler Yapılabilir? (2/2)
 Form üzerine girilen bilgileri göndermeden önce doğruluğunu kontrol etmek
için kullanılabilir.
 Sayfayı ziyaret eden kişinin web tarayıcısını belirlemek ve tarayıcıya özel
yapılması gereken işlemler varsa bunları gerçekleştirmek için kullanılır.
JavaScript Yapısı
 Javascript kodları yazmak için özel bir yazılıma gerek yoktur.
 Javascript genellikle HTML sayfanın ihtiyaç duyulan bölümlerinde kullanılır.
 Hazırlanan sayfalar web browser tarafından yorumlanırken, web browser
<script language=“JavaScript”> etiketini gördüğünde bu kısımdan itibaren
javascript olarak yorumlar ve </script> etiketini gördüğü anda bu yoruma son
verip, HTML yorumuna döner.
4
JavaScript Kodlama
 Javascript HTML kodları gibi kodlar arasındaki boşlukları ve açıklama satırlarını
dikkate almaz.
 Javascript’te komut satırları noktalı virgül (;) işareti ile yan yana veya alt alta
yazılabilir.
 Javascript küçük harf, büyük harf ayrımı yapmaktadır. Nesnelere isim verilirken
büyük harf-küçük harf ayrımına dikkat edilmelidir.
 Javascript nesnelerinin ilk harfi sayı ile başlayamaz ama sonraki karakterlerde
sayı kullanılabilir.
 Javascript nesnelerinin karakterleri arasında boşluk bırakılamaz, boşluk yerine
_ işareti kullanılmalıdır. Örneğin deger_1=8 gibi
 Javascript komutları nesne ismi olarak kullanılamaz.
5
JavaScript Kodlama
6
Nesne ismi olarak kullanılamayan isimler:
abstract, alert, arguments, Array, blur, boolean, Boolean, break, byte, callee, caller,
captureEvents, case, catch, char, class, clearInterval, clearTimeout, close, closed, confirm,
const, constructor, continue, Date, debugger, default, defaultStatus, delete, do, document,
double, else, enum, escape, eval, export, extends, FALSE, final, finally, find, float, focus, for,
frames Function, function, goto, history, home, if, implements, import, in, infinity,
innerHeight, innerWidth, instanceof, int, interface, isFinite, isNaN, java, length, location,
locationbar, long, Math, menubar, moveBy, moveTo, name, NaN, native, netscape, new,
null, Number, Object, open, opener, outerHeight, outerWidth, package, Packages,
pageXOffset, pageYOffset, parent, parseFloat, parseInt, personalbar print, private, prompt,
protected, prototype, public, RegExp, releaseEvents, resizeBy, resizeTo, return, routeEvent,
scroll, scrollbars, scrollBy, ScrollTo, self, setInterval, setTimeout, short, static, status,
statusbar, stop, String, super, switch, synchronized, this, throw, throws, toolbar, top,
toString, transient, TRUE, try, typeof, unescape, unwatch, valueOf, var, void, watch, while,
window, with
JavaScript Kodlama
7
 Yazılan kodlar ziyaretçinin bilgisayarında çalışacağı için nesne isimlerinde
Türkçe karakter kullanılmamalıdır.
 Javascript’te tek tırnak (‘) işareti ile çift tırnak (“) işareti arasında işlevsel
bakımdan bir fark yoktur. Ancak iç içe tırnak kullanılan durumlarda, içteki ve
dıştaki tırnaklar farklı olmalıdır.
<input type=“button” onclick=“alert(‘Düğmeye Tıklayınız’);”>
 Yazılan koda açıklama satırı eklemek için // işareti kullanılır. // işareti, sadece
işaretin konulduğu satır için geçerli olup yorumlayıcı bu satırı dikkate
almayacaktır. Açıklama satırlarının bir satırdan fazla olduğu durumlarda /*….*/
işareti kullanılır.
 Yazılan kodlar bazı tarayıcılarda sorun çıkartabilir. Bu gibi durumlarda kodlar
<!-- … //--> yapısı kullanılarak gizlenebilir.
JavaScript Kodlama
8
UYGULAMA : JavaScript desteği olmayan bir tarayıcıdan kodları gizleme.
1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz.
2. Sayfada “İlk mesajım” yazısıyla karşılaşıyorsanız kullandığınız web tarayıcısının
javascript desteği var demektir.
3. Oluşturduğunuz sayfayı farklı web tarayıcılarda çalıştırarak deneyiniz.
JavaScript Kullanımı
9
HTML sayfa içerisinde JavaScript kullanmak için <script> etiketi kullanılır.
JavaScript kodlaması bittikten sonra </script> etiketi ile sonlandırılır.
 document.write komutu ile web sayfasına istenilen yazı yazdırılabilir. Yazı
içerisine yerleştirilen bir HTML etiketi de işlevini yerine getirecektir.
A. <head> Etiketi İçerisinde JavaScript Kullanımı
<head> ve </head> etiketleri arasına yazılan JavaScript kodları genellikle fonksiyon
tanımlamalarında kullanılır.
 Buraya yazılan script kodları fonksiyon oluşturuyorsa, çağrıldığında veya bir olay
gerçekleştiğinde çalışır. Herhangi bir fonksiyon oluşturmuyorsa, sayfa açıldığı
anda çalışır ve sayfa yüklenmeden burası aktif olur.
 Sayfa yüklenirken kullanıcıdan alınmak istenilen bilgi var ise burası kullanılabilir.
 Bu bölümde tanımlanan değişkenlere, sayfanın herhangi bir bölümünden
ulaşılabilir.
JavaScript Kullanımı
UYGULAMA : <head> etiketi içerisinde JavaScript kullanımı.
1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz.
2. Oluşturulan fonksiyonu farklı yerlerde tanımlayarak farkı görünüz.
10
JavaScript Kullanımı
B. <body> Etiketi İçerisinde JavaScript Kullanımı
<body> ve </body> etiketleri arasına yazılan JavaScript kodları, sayfa yüklenirken
yükleme işlemi <body> etiketine geldiğinde çalışmaya başlar. Bu bölge içerisinde
tanımlanan değişkenler tanımlandığı noktadan sonra kullanılabilir.
UYGULAMA : JavaScript yardımıyla web sayfasına kayan yazı ekleme.
1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz.
2. HTML yardımıyla tablo oluşturarak iki ayrı sütun için kayan yazı uygulaması
yapınız.
11
JavaScript Kullanımı
C. <head> ve <body> Etiketlerinde JavaScript Kullanımı
Web sayfası içerisine yerleştirilebilecek script sayısında herhangi bir sınırlama
yoktur.
D. Harici JavaScript Dosyalarının Kullanımı
JavaScript kodları harici bir dosyaya yazılır ve bu dosya HTML sayfasından çağrılır.
 Oluşturulan harici dosyalar .js dosya uzantılı olarak kaydedilir.
 Bu dosyalarda <script> ve </script> etiketleri kullanılmaz. Javascript kodları
doğrudan yazılır.
 Harici dosyaları çağırmak için kullanılan script satırı <head> veya <body>
etiketleri arasında olabilir. Kullanım şekli aşağıdaki gibidir:
<script type=“text/javascript” src=“dosya_yolu/dosya_adı.js”> </script>
12
Değişkenler




13
Değişkenlere isim verilirken kodlama standartlarına dikkat edilmesi gerekir.
Değişken tanımlamak için var ifadesi kullanılır.
Tek satırda birden fazla değişken tanımlanabilir.
Değişkene değer ataması tanımlama esnasında veya daha sonra yapılabilir.
Değişkenler tanımlanırken tipini belirtmeye gerek yoktur. İçerdiği değere göre
değişken tipi belirlenecektir.
 Sayısal türdeki değer atama işlemlerinde değerler tırnak içerisine alınmadan
yazılmalıdır. Karakter kümesi şeklindeki ifadelerde ise değerler tırnak içerisinde
belirtilmelidir.
 Daha önce tanımlanan bir değişken tekrar tanımlanırsa içerdiği değer
silinecektir. Örneğin, aşağıda ders değişkeni tekrar tanımlandığı için içerdiği
EEM306 değeri silinecektir.
var ders =“EEM306”;
var ders;
Değişkenler
UYGULAMA :
1. Verilen kodları yazıp tarayıcı sayfasında görüntüleyiniz.
2. Değişkenleri harici bir javascript dosyasında tanımlayarak kullanınız.
14