- Katılım
- 12 Eylül 2014
- Mesajlar
- 167
- Tepkime puanı
- 0
- Puanları
- 0
JavaScript kodlarını HTML içine yazmak zorunda mıyız?
"JavaScript kodları HTML içine gömülür" ifadesi, "bütün kodlar, HTML belgesinin içine yazılmalıdır" anlamına gelmediği için sriptlerimizi ayrı düz yazı dosyaları olarak kaydedip HTML'ye dışardan ekleme olanağına da sahibiz. Peki bu yöntem bize ne kazandırır? Örneğin kodlarınıza belge kaynağından ulaşılmasını istemiyor olabilirsiniz; belki de script bloklarıyla html etiketlerinin içiçe olması hoşunuza gitmiyordur... Buna benzer durumlarda JavaScript kodlarını ayrı dosyalara kaydedip HTML'ye eklemek işinizi kolaylaştırabilir. Şimdi örneğimizi inceleyelim :
Aşağıdaki kodları favori metin editörünüzde (örneğin Not Defteri) yazıp kaydedin.
/* merhaba_dunya.js dosyası */ // Bu fonksiyon çağrıldığında bir uyarı kutusu görüntülenir. function merhabaDunya(){ alert("Merhaba Dünya! Biz dostuz..."); }
Örnek kodun ilk satırında yer alan açıklama, dosya adının "merhaba_dunya.js" olduğunu belirtiyor. "JS" uzantısıyla ilk defa karşılaşıyor olabilirsiniz; bu uzantı, içinde sadece JavaScript kodları bulunan dosyaları belirtmek için kullanılır. Dosyanın uzantısını "js" olarak değiştirdiğinizde simgesinin de değiştiğini farkedeceksiniz. Windows altında bu simgeye sağ tıklayıp "Edit(Düzenle)" komutunu vererek, dosyayı Notepad(Not Defteri) programıyla açabilirsiniz. Artık JavaScript dosyamızı HTML'ye ekleyebiliriz. Aşağıdaki kodları yazalım :
<! merhaba_dunya.htm dosyası Bu HTML sayfası, ayrı bir script dosyasının içindeki "merhabaDunya()" fonksiyonunu çağırmaktadır. > <html> <head> <title>JavaScript Dosyasını HTML'ye Eklemek</title> <script language="JavaScript" src="merhaba_dunya.js"> </script> </head> <body onLoad="merhabaDunya()"> <p>Merhaba, merhaba...</p> </body> </html>
İlk bakışta farkedebileceğiniz gibi "merhaba_dunya.js" adıyla kaydettiğimiz script dosyamızı "source", yani "kaynak" anlamındaki "src" ifadesiyle çağırıyoruz. Belirtilen kaynaktan çağrılıp html belgesine eklenen script kodlarımız "**********...</script>" etiketlerinin arasındaymışcasına icra edilir. Örnek kodumuzdaki ikinci önemli nokta, "onClick" yerine "onLoad" olayının kullanılmış olmasıdır. Hatırlayacağınız gibi "onClick" JavaScript kodlarının belirli bir nesneye tıklandığında çalıştırılmasını sağlıyordu. "onLoad" ise kodların nesne yüklendiğinde icra edilmesini olanaklı kılmaktadır. Burada olayımız "body" nesnesini -ki bu nesne html gövdesinde yer alan tüm nesneleri de kapsamaktadır aynı zamanda- yönlendirerek sayfa içeriği yüklendikten sonra fonksiyonu çağırır. Hazır "onLoad" olayından da bahsetmişken daha sonra ayrıntılı bir şekilde ele alacağımız DOM hakkında bir iki açıklama daha yapmamız gerekiyor :
Bildiğiniz gibi DOM, "Belge Nesne Modeli(******** Object Model)" anlamına gelmekteydi. DOM, tarayıcı programı ve program penceresinde görüntülenen tüm nesneler ile ilgili olayları(event) ve metodları(method) belirten bir kurallar topluluğudur. JavaScript kodları bu kurallara göre işlerlik kazanır. Burada olay(event) olarak tanımladığımız şey, herhangi bir iş, herhangi bir eylemdir. Sözgelimi ziyaretçinin, sayfa üzerindeki bir butona tıklaması, yeni bir tarayıcı penceresinin açılması veya sayfa üzerinde yer alan bir nesnenin yüklenmesi DOM tarafından birer olay olarak kabul görür. Metod(method) ise, bu olayları ve/veya nesnelerin özelliklerini(property) kullanarak tarayıcı programının veya tarayıcı penceresinde görüntülenen unsurların durumlarını değiştirmek için başvurulan yöntemlerin genel adıdır.
İşte şimdiye kadarki örneklerimizde kullandığımız "onLoad" ve "onClick" ifadeleri DOM içinde tanımlı olan olaylardan ikisidir. Olayları tanımlarken kullandığımız sözcüklerin anlamını bilmek konunun daha iyi kavranmasına yardımcı olacaktır : İngilizce bir sözcük olan "Load", "yükleme" anlamındadır ve "on" takısıyla beraber kullanıldığında, "yüklendiğinde" ifadesine karşılık gelir. Aynı şekilde "onClick" ise "tıklandığında" ifadesinin karşılığıdır. Örneklerde, "Button" nesnesine tıklandığında veya "Body" nesnesi yüklendiğinde bizim gösterdiğimiz metodlar uygulanarak fonksiyonumuz icra edilmiş ve bir mesaj kutusu görüntülenmiştir. Bu mesaj kutusunun da bir nesne olduğunu unutmayalım... Aşağıdaki örneği inceleyin ve anlamaya çalışın; bu örnekte karşımıza çıkan yeni olaylara ve metodlara ileride değineceğiz.
// merhaba_dunya.js dosyası /* "solTiklandiginda, uzerinGeldiginde ve sagTiklandiginda" fonksiyonları "merhabaDunya" adındaki fonksiyonu çağırmaktadır. */ function merhabaDunya(){ alert("Merhaba Dünya! Biz dostuz..."); } function solTiklandiginda(){ merhabaDunya(); // fonksiyon çağrılıyor } function uzerineGelindiginde(){ merhabaDunya(); // fonksiyon çağrılıyor } function sagTiklandiginda(){ merhabaDunya(); // fonksiyon çağrılıyor }
<! merhaba_dunya.htm dosyası Bu HTML sayfası, ayrı bir script dosyasının içindeki fonksiyonları çağırmaktadır. > <html> <head> <title>JavaScript Dosyasını HTML'ye Eklemek</title> <script language="JavaScript" src="merhaba_dunya.js"> </script> </head> <body onLoad="merhabaDunya()"> <p onMouseDown="alert('Merhaba Dünya! Biz dostuz...');"> Merhaba, merhaba...</p> <form> <b>"merhabaDunya" Fonksiyonu</b><br> <input type="button" value="Sol Tıklayın" onClick="merhabaDunya();"> <input type="button" value="Üzerime Gelin" onMouseOver="merhabaDunya();"> <input type="button" value="Sağ Tıklayın" onContextMenu="merhabaDunya();"> </form> <form> <b>Diğer Fonksiyonlar</b><br> <input type="button" value="Sol Tıklayın" onClick="solTiklandiginda();"> <input type="button" value="Üzerime Gelin" onMouseOver="uzerineGelindiginde();"> <input type="button" value="Sağ Tıklayın" onContextMenu="sagTiklandiginda();"> </form> <p> </body> </html>
JavaScript kodları yazarken nelere dikkat etmeliyiz?
JavaScript kodlarının farklı şekillerde yazılabilmesi, script dilinin esnekliğinden kaynaklanmaktadır. Ancak her dilde olduğu gibi JavaScript'te de dikkat edilmesi gereken yazım kuralları bulunmaktadır. Bazen en uzman programcı bile yazdığı kodların bir yerinde bir fonksiyon parantezini kapatmayı unutabilir, tabii bu da programın tamamen işlevini kaybetmesi, hatalara yol açması demektir. Programcının dikkatsizliğine bağlanabilecek bunun gibi bir hatanın yanında bilgisizliğin neden olduğu yazım hatalarıyla da çok sık karşılaşılmaktadır.
JavaScript, C programa diline çok benzemektedir. Bu yüzden C için geçerli olan kuralların çoğu JavaScript için de geçerlidir. Ayrıca değişken adlarının rakamla başlamaması, ayrılmış kelimelerin belirleyici olarak kullanılamaması gibi yazım kuralları neredeyse tüm dillerde ortaktır. Şimdi bu yazım kurallarını maddeler halinde görelim :
1.degisken
Yanlış, çünkü belirleyici sözcükler rakamla başlayamaz, sözcük içinde noktalama işareti(.) bulunamaz. Doğru kullanımı, "birincidegisken" olabilir.
merhabaDünya
Yanlış, çünkü belirleyici sözcükler içinde İngiliz alfabesinde yer almayan karakterler kullanılamaz. Doğru kullanımı, "merhabaDunya" olabilir.
kullanici Adi
Yanlış, çünkü belirleyici birden çok sözcükten oluşuyorsa sözcükler arasında boşluk olamaz. Doğru kullanımı, "kullanici_Adi" olabilirdi.
default
Yanlış, çünkü belirleyici olarak ayrılmış sözcüklerden biri kullanılmıştır. Doğru kullanımı, "Default" olabilirdi.
Son verdiğimiz örnek biraz kafanızı karıştırmış olabilir ancak siz sormadan ben açıklayim : JavaScript yorumlayıcısı "default" sözcüğünü ayrılmış sözcük olarak değerlendirirken "Default" u sıradan bir sözcük olarak görmekte, belirleyici olarak kullanılmasına izin vermektedir. Bunun nedeni JavaScript'e yine C dilinden miras kalan büyük harf-küçük harf duyarlılığıdır. Örneğin "default - Default" belirleyicileri veya "fixman - Fixman" belirleyicileri JavaScript için aynı değildir. ("Fixman" örneği Şahin Usta içindi
)
Aşağıda JavaScript 1.5 versiyonu için ayrılmış sözcüklerin tam listesini bulacaksınız; bunların bir kısmı şu anda JavaScript içinde kullanıldığından dolayı anahtar sözcük(keyword) olarak adlandırılmaktadır, geri kalanların ise dilin ilerki versiyonlarında kullanılması olasıdır.
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
******
in instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super switch
synchronized
this
throw
throws
transient
true
try
typeof
var
****
volatile
while
with
JavaScript için kod yazarken yapılan hatalardan biri de açılan parantezleri kapatmayı unutmaktır. function fonksiyonAdi() şeklinde başlattığımız bir fonksiyon bloğunu mutlaka "{ }" işaretleri arasına almalıyız. İlerde göreceğimiz bazı komutlar da bu işaretlerle beraber kullanılmaktadır. Özellikle içiçe geçen karşılaştırma işlemlerinde veya döngülerde parantez kullanımına çok dikkat edilmelidir.
Bazı programcılar JavaScript kodları yazarken C'den kalma bir alışkanlıkla her satırın veya komutun sonuna ";" işareti eklemektedir. Bu zorunlu olmamakla beraber yararlı bir alışkanlıktır; hem kodların okunabilirliğini arttırmakta, hem de olası hataların ve karışıklıkların önüne geçilmektedir. Ayrıca birden fazla komut aynı satırda aralarına virgül konulmak suretiyle kullanılabilir. Örneğin aşağıdaki kod satırında önce "merhaba" adında bir değişken tanımlanarak, değeri string(karakter dizisi) olarak belirtilmiş, bu string değişkenin içeriği alert() metoduyla görüntülenmiş, ve sonra da değeri değiştirilmiştir :
var merhaba = "Merhabalar efendim!"; alert(merhaba), merhaba = "";
merhaba = ""; ifadesinden sonra bu değişkenin içeriğini tekrar görüntülemeye çalıştığımızda boş bir mesaj kutusuyla karşılaşırız. Burada dikkat edilmesi gereken nokta "," ve ";" işaretlerinin kullanıldığı yerlerdir. Yazdığımız örneklerin sayısı arttıkça bu işaretleri ne zaman kullanıp ne zaman kullanmamamız gerektiğini daha iyi kavrayacağız. JavaScript yazımında düşülen yanlışlardan bir diğeri tırnak işareti kullanımında karşımıza çıkar. Aşağıdaki örnekleri inceleyelim :
alert(Hayat Güzeldir!);
alert("Benim adım "JavaScript", senin adın ne?");
alert('Tyler Durden'ı tanıyor musun?');
İlk örneğimizdeki yazım yanlışını hemen farketmiş olmalısınız; "alert()" metoduyla görüntülenmek istenen ifade bir değişken değeri olmadığı sürece, mutlaka tek tırnak(') veya çift tırnak(") işaretleri arasına alınmalıdır-ki örnek kodda bu kuralın dışına çıkılmıştır. İkinci örneğimiz ise size ilk bakışta yanlışsız gibi görünebilir ama bu örnekte de önemli bir hata bulunuyor. Çift tırnak işaretleri arasına alınan string değerin içinde çift tırnak işareti kullanmak yazım kurallarına aykırıdır. Bu kodu şu şekilde düzeltebiliriz :
alert("Benim adım 'JavaScript', senin adın ne?");
"Çift tırnak işaretini ne şekilde olursa olsun kullanmak istiyorum" diyorsanız aşağıdaki yazım şekli yardımınıza koşuyor :
alert("Benim adım \"JavaScript\", senin adın ne?");
Burada karşımıza çıkan "\" sembolü, ardına eklenen işaretin string olarak yorumlanmasını sağlamaktadır. Aynı şekilde bu sembol, diğer işaretler için de kullanılabilir : " ' ( ) { } [ ] \ ... gibi. Eğer bu örneğimiz anlaşıldıysa son örnekteki hatayı da göreceğinize inanıyorum.
Son olarak kodlama alışkanlıklarından da bahsedip bu yazımızı noktalayalım. JavaScript'in kod yazımında esnek olduğunu daha önce belirtmiştik. Örnek "merhabaDunya()" fonksiyonunu yazarken "{ }" işaretleri arasında kalan satırın biraz daha içeriden başladığını farketmişsinizdir. Bu bir yazım kuralı olmamakla beraber yararlı kod yazma alışkanlıklarından biridir. Şimdi fonksiyonumuzu aşağıdaki gibi yeniden yazalım :
function merhabadunya(){alert("Merhaba Dünya! Biz dostuz...")}
Fonksiyon bu haliyle de hata vermeden çalışır; ancak kodunuzun çok uzun olduğunu varsayarsak, üzerinde değişiklik ve düzenleme yapmaya çalıştığınızda bunun gibi bir yazım şekli kafanızın karışmasına neden olacaktır. Bu yüzden okunabilirliği mümkün olduğunca arttırmak için, fazla satır kullanmaktan, satırlara girinti vermekten(genellikle TAB tuşunu kullanarak), yeri geldikçe açıklama ve yorum ifadeleri eklemekten kaçınılmamalıdır. Ayrıca değişkenleri ve fonksiyonları adlandırırken, verilen adların yeterince açıklayıcı olmasına özen gösterilmelidir. Örneğin, kullanıcı adını depoladığımız değişkenin belirleyicisi "kAdi" yerine "kullaniciAdi" veya "kullanici_adi" olursa bu değişkeni kullanırken işimiz önemli ölçüde kolaylaşacaktır. Yine iki veya daha fazla sözcükten oluşan belirleyicilerde ilk sözcükten sonraki sözcüklerin ilk harflerini büyük yazmak da yararlı kodlama alışkanlıklarından biridir ("siniftaKalanOgrenciler" gibi)...
Bu yazının da sonuna geldik. Şimdiye kadarki konuları yeniden gözden geçirmenizi öneririm; çünkü temel bilgileriniz ne kadar sağlam olursa, daha sonra değineceğimiz konuları anlamanız da o kadar kolaylaşır... Umarım siz JavaScript konusunda hiç sınıfta kalmazsınız
"JavaScript kodları HTML içine gömülür" ifadesi, "bütün kodlar, HTML belgesinin içine yazılmalıdır" anlamına gelmediği için sriptlerimizi ayrı düz yazı dosyaları olarak kaydedip HTML'ye dışardan ekleme olanağına da sahibiz. Peki bu yöntem bize ne kazandırır? Örneğin kodlarınıza belge kaynağından ulaşılmasını istemiyor olabilirsiniz; belki de script bloklarıyla html etiketlerinin içiçe olması hoşunuza gitmiyordur... Buna benzer durumlarda JavaScript kodlarını ayrı dosyalara kaydedip HTML'ye eklemek işinizi kolaylaştırabilir. Şimdi örneğimizi inceleyelim :
Aşağıdaki kodları favori metin editörünüzde (örneğin Not Defteri) yazıp kaydedin.
/* merhaba_dunya.js dosyası */ // Bu fonksiyon çağrıldığında bir uyarı kutusu görüntülenir. function merhabaDunya(){ alert("Merhaba Dünya! Biz dostuz..."); }
Örnek kodun ilk satırında yer alan açıklama, dosya adının "merhaba_dunya.js" olduğunu belirtiyor. "JS" uzantısıyla ilk defa karşılaşıyor olabilirsiniz; bu uzantı, içinde sadece JavaScript kodları bulunan dosyaları belirtmek için kullanılır. Dosyanın uzantısını "js" olarak değiştirdiğinizde simgesinin de değiştiğini farkedeceksiniz. Windows altında bu simgeye sağ tıklayıp "Edit(Düzenle)" komutunu vererek, dosyayı Notepad(Not Defteri) programıyla açabilirsiniz. Artık JavaScript dosyamızı HTML'ye ekleyebiliriz. Aşağıdaki kodları yazalım :
<! merhaba_dunya.htm dosyası Bu HTML sayfası, ayrı bir script dosyasının içindeki "merhabaDunya()" fonksiyonunu çağırmaktadır. > <html> <head> <title>JavaScript Dosyasını HTML'ye Eklemek</title> <script language="JavaScript" src="merhaba_dunya.js"> </script> </head> <body onLoad="merhabaDunya()"> <p>Merhaba, merhaba...</p> </body> </html>
İlk bakışta farkedebileceğiniz gibi "merhaba_dunya.js" adıyla kaydettiğimiz script dosyamızı "source", yani "kaynak" anlamındaki "src" ifadesiyle çağırıyoruz. Belirtilen kaynaktan çağrılıp html belgesine eklenen script kodlarımız "**********...</script>" etiketlerinin arasındaymışcasına icra edilir. Örnek kodumuzdaki ikinci önemli nokta, "onClick" yerine "onLoad" olayının kullanılmış olmasıdır. Hatırlayacağınız gibi "onClick" JavaScript kodlarının belirli bir nesneye tıklandığında çalıştırılmasını sağlıyordu. "onLoad" ise kodların nesne yüklendiğinde icra edilmesini olanaklı kılmaktadır. Burada olayımız "body" nesnesini -ki bu nesne html gövdesinde yer alan tüm nesneleri de kapsamaktadır aynı zamanda- yönlendirerek sayfa içeriği yüklendikten sonra fonksiyonu çağırır. Hazır "onLoad" olayından da bahsetmişken daha sonra ayrıntılı bir şekilde ele alacağımız DOM hakkında bir iki açıklama daha yapmamız gerekiyor :
Bildiğiniz gibi DOM, "Belge Nesne Modeli(******** Object Model)" anlamına gelmekteydi. DOM, tarayıcı programı ve program penceresinde görüntülenen tüm nesneler ile ilgili olayları(event) ve metodları(method) belirten bir kurallar topluluğudur. JavaScript kodları bu kurallara göre işlerlik kazanır. Burada olay(event) olarak tanımladığımız şey, herhangi bir iş, herhangi bir eylemdir. Sözgelimi ziyaretçinin, sayfa üzerindeki bir butona tıklaması, yeni bir tarayıcı penceresinin açılması veya sayfa üzerinde yer alan bir nesnenin yüklenmesi DOM tarafından birer olay olarak kabul görür. Metod(method) ise, bu olayları ve/veya nesnelerin özelliklerini(property) kullanarak tarayıcı programının veya tarayıcı penceresinde görüntülenen unsurların durumlarını değiştirmek için başvurulan yöntemlerin genel adıdır.
İşte şimdiye kadarki örneklerimizde kullandığımız "onLoad" ve "onClick" ifadeleri DOM içinde tanımlı olan olaylardan ikisidir. Olayları tanımlarken kullandığımız sözcüklerin anlamını bilmek konunun daha iyi kavranmasına yardımcı olacaktır : İngilizce bir sözcük olan "Load", "yükleme" anlamındadır ve "on" takısıyla beraber kullanıldığında, "yüklendiğinde" ifadesine karşılık gelir. Aynı şekilde "onClick" ise "tıklandığında" ifadesinin karşılığıdır. Örneklerde, "Button" nesnesine tıklandığında veya "Body" nesnesi yüklendiğinde bizim gösterdiğimiz metodlar uygulanarak fonksiyonumuz icra edilmiş ve bir mesaj kutusu görüntülenmiştir. Bu mesaj kutusunun da bir nesne olduğunu unutmayalım... Aşağıdaki örneği inceleyin ve anlamaya çalışın; bu örnekte karşımıza çıkan yeni olaylara ve metodlara ileride değineceğiz.
// merhaba_dunya.js dosyası /* "solTiklandiginda, uzerinGeldiginde ve sagTiklandiginda" fonksiyonları "merhabaDunya" adındaki fonksiyonu çağırmaktadır. */ function merhabaDunya(){ alert("Merhaba Dünya! Biz dostuz..."); } function solTiklandiginda(){ merhabaDunya(); // fonksiyon çağrılıyor } function uzerineGelindiginde(){ merhabaDunya(); // fonksiyon çağrılıyor } function sagTiklandiginda(){ merhabaDunya(); // fonksiyon çağrılıyor }
<! merhaba_dunya.htm dosyası Bu HTML sayfası, ayrı bir script dosyasının içindeki fonksiyonları çağırmaktadır. > <html> <head> <title>JavaScript Dosyasını HTML'ye Eklemek</title> <script language="JavaScript" src="merhaba_dunya.js"> </script> </head> <body onLoad="merhabaDunya()"> <p onMouseDown="alert('Merhaba Dünya! Biz dostuz...');"> Merhaba, merhaba...</p> <form> <b>"merhabaDunya" Fonksiyonu</b><br> <input type="button" value="Sol Tıklayın" onClick="merhabaDunya();"> <input type="button" value="Üzerime Gelin" onMouseOver="merhabaDunya();"> <input type="button" value="Sağ Tıklayın" onContextMenu="merhabaDunya();"> </form> <form> <b>Diğer Fonksiyonlar</b><br> <input type="button" value="Sol Tıklayın" onClick="solTiklandiginda();"> <input type="button" value="Üzerime Gelin" onMouseOver="uzerineGelindiginde();"> <input type="button" value="Sağ Tıklayın" onContextMenu="sagTiklandiginda();"> </form> <p> </body> </html>
JavaScript kodları yazarken nelere dikkat etmeliyiz?
JavaScript kodlarının farklı şekillerde yazılabilmesi, script dilinin esnekliğinden kaynaklanmaktadır. Ancak her dilde olduğu gibi JavaScript'te de dikkat edilmesi gereken yazım kuralları bulunmaktadır. Bazen en uzman programcı bile yazdığı kodların bir yerinde bir fonksiyon parantezini kapatmayı unutabilir, tabii bu da programın tamamen işlevini kaybetmesi, hatalara yol açması demektir. Programcının dikkatsizliğine bağlanabilecek bunun gibi bir hatanın yanında bilgisizliğin neden olduğu yazım hatalarıyla da çok sık karşılaşılmaktadır.
JavaScript, C programa diline çok benzemektedir. Bu yüzden C için geçerli olan kuralların çoğu JavaScript için de geçerlidir. Ayrıca değişken adlarının rakamla başlamaması, ayrılmış kelimelerin belirleyici olarak kullanılamaması gibi yazım kuralları neredeyse tüm dillerde ortaktır. Şimdi bu yazım kurallarını maddeler halinde görelim :
- Belirleyici(identifier) dediğimiz, programcının tanımladığı değişkenleri, metodları ve nesneleri belirten adlar harfle veya alt çizgiyle(_) başlamak zorundadır. Rakam veya semboller ilk karakter olarak kullanılamaz.
- Eğer belirleyici birden fazla sözcükten oluşuyorsa, bütün sözcükler bitişik yazılmalıdır.
- Belirleyici sözcükler içinde İngilizce alfabede yer almayan, Türkçe'ye ve diğer dillerin alfabelerine ait karakterler bulunmamalıdır (ç,ğ,ı,ö,ş,ü,Ç,Ğ,İ,Ö,Ü).
- Programa diline özgü anahtar sözcükler(keywords) belirleyici olarak kullanılamaz. Dil tasarlanırken tanımlanmış olan, ayrılmış sözcükler(reserved words) de diyebileceğimiz bu özel sözcükler, kodlar yorumlanırken dile özgü anlamlarıyla değerlendirilir.
1.degisken
Yanlış, çünkü belirleyici sözcükler rakamla başlayamaz, sözcük içinde noktalama işareti(.) bulunamaz. Doğru kullanımı, "birincidegisken" olabilir.
merhabaDünya
Yanlış, çünkü belirleyici sözcükler içinde İngiliz alfabesinde yer almayan karakterler kullanılamaz. Doğru kullanımı, "merhabaDunya" olabilir.
kullanici Adi
Yanlış, çünkü belirleyici birden çok sözcükten oluşuyorsa sözcükler arasında boşluk olamaz. Doğru kullanımı, "kullanici_Adi" olabilirdi.
default
Yanlış, çünkü belirleyici olarak ayrılmış sözcüklerden biri kullanılmıştır. Doğru kullanımı, "Default" olabilirdi.
Son verdiğimiz örnek biraz kafanızı karıştırmış olabilir ancak siz sormadan ben açıklayim : JavaScript yorumlayıcısı "default" sözcüğünü ayrılmış sözcük olarak değerlendirirken "Default" u sıradan bir sözcük olarak görmekte, belirleyici olarak kullanılmasına izin vermektedir. Bunun nedeni JavaScript'e yine C dilinden miras kalan büyük harf-küçük harf duyarlılığıdır. Örneğin "default - Default" belirleyicileri veya "fixman - Fixman" belirleyicileri JavaScript için aynı değildir. ("Fixman" örneği Şahin Usta içindi
Linkleri sadece kayıtlı üyeler görebilir. Linkleri görebilmek için Üye Girişi yapın veya ücretsiz olarak Kayıt Olun
Aşağıda JavaScript 1.5 versiyonu için ayrılmış sözcüklerin tam listesini bulacaksınız; bunların bir kısmı şu anda JavaScript içinde kullanıldığından dolayı anahtar sözcük(keyword) olarak adlandırılmaktadır, geri kalanların ise dilin ilerki versiyonlarında kullanılması olasıdır.
abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
******
in instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super switch
synchronized
this
throw
throws
transient
true
try
typeof
var
****
volatile
while
with
JavaScript için kod yazarken yapılan hatalardan biri de açılan parantezleri kapatmayı unutmaktır. function fonksiyonAdi() şeklinde başlattığımız bir fonksiyon bloğunu mutlaka "{ }" işaretleri arasına almalıyız. İlerde göreceğimiz bazı komutlar da bu işaretlerle beraber kullanılmaktadır. Özellikle içiçe geçen karşılaştırma işlemlerinde veya döngülerde parantez kullanımına çok dikkat edilmelidir.
Bazı programcılar JavaScript kodları yazarken C'den kalma bir alışkanlıkla her satırın veya komutun sonuna ";" işareti eklemektedir. Bu zorunlu olmamakla beraber yararlı bir alışkanlıktır; hem kodların okunabilirliğini arttırmakta, hem de olası hataların ve karışıklıkların önüne geçilmektedir. Ayrıca birden fazla komut aynı satırda aralarına virgül konulmak suretiyle kullanılabilir. Örneğin aşağıdaki kod satırında önce "merhaba" adında bir değişken tanımlanarak, değeri string(karakter dizisi) olarak belirtilmiş, bu string değişkenin içeriği alert() metoduyla görüntülenmiş, ve sonra da değeri değiştirilmiştir :
var merhaba = "Merhabalar efendim!"; alert(merhaba), merhaba = "";
merhaba = ""; ifadesinden sonra bu değişkenin içeriğini tekrar görüntülemeye çalıştığımızda boş bir mesaj kutusuyla karşılaşırız. Burada dikkat edilmesi gereken nokta "," ve ";" işaretlerinin kullanıldığı yerlerdir. Yazdığımız örneklerin sayısı arttıkça bu işaretleri ne zaman kullanıp ne zaman kullanmamamız gerektiğini daha iyi kavrayacağız. JavaScript yazımında düşülen yanlışlardan bir diğeri tırnak işareti kullanımında karşımıza çıkar. Aşağıdaki örnekleri inceleyelim :
alert(Hayat Güzeldir!);
alert("Benim adım "JavaScript", senin adın ne?");
alert('Tyler Durden'ı tanıyor musun?');
İlk örneğimizdeki yazım yanlışını hemen farketmiş olmalısınız; "alert()" metoduyla görüntülenmek istenen ifade bir değişken değeri olmadığı sürece, mutlaka tek tırnak(') veya çift tırnak(") işaretleri arasına alınmalıdır-ki örnek kodda bu kuralın dışına çıkılmıştır. İkinci örneğimiz ise size ilk bakışta yanlışsız gibi görünebilir ama bu örnekte de önemli bir hata bulunuyor. Çift tırnak işaretleri arasına alınan string değerin içinde çift tırnak işareti kullanmak yazım kurallarına aykırıdır. Bu kodu şu şekilde düzeltebiliriz :
alert("Benim adım 'JavaScript', senin adın ne?");
"Çift tırnak işaretini ne şekilde olursa olsun kullanmak istiyorum" diyorsanız aşağıdaki yazım şekli yardımınıza koşuyor :
alert("Benim adım \"JavaScript\", senin adın ne?");
Burada karşımıza çıkan "\" sembolü, ardına eklenen işaretin string olarak yorumlanmasını sağlamaktadır. Aynı şekilde bu sembol, diğer işaretler için de kullanılabilir : " ' ( ) { } [ ] \ ... gibi. Eğer bu örneğimiz anlaşıldıysa son örnekteki hatayı da göreceğinize inanıyorum.
Son olarak kodlama alışkanlıklarından da bahsedip bu yazımızı noktalayalım. JavaScript'in kod yazımında esnek olduğunu daha önce belirtmiştik. Örnek "merhabaDunya()" fonksiyonunu yazarken "{ }" işaretleri arasında kalan satırın biraz daha içeriden başladığını farketmişsinizdir. Bu bir yazım kuralı olmamakla beraber yararlı kod yazma alışkanlıklarından biridir. Şimdi fonksiyonumuzu aşağıdaki gibi yeniden yazalım :
function merhabadunya(){alert("Merhaba Dünya! Biz dostuz...")}
Fonksiyon bu haliyle de hata vermeden çalışır; ancak kodunuzun çok uzun olduğunu varsayarsak, üzerinde değişiklik ve düzenleme yapmaya çalıştığınızda bunun gibi bir yazım şekli kafanızın karışmasına neden olacaktır. Bu yüzden okunabilirliği mümkün olduğunca arttırmak için, fazla satır kullanmaktan, satırlara girinti vermekten(genellikle TAB tuşunu kullanarak), yeri geldikçe açıklama ve yorum ifadeleri eklemekten kaçınılmamalıdır. Ayrıca değişkenleri ve fonksiyonları adlandırırken, verilen adların yeterince açıklayıcı olmasına özen gösterilmelidir. Örneğin, kullanıcı adını depoladığımız değişkenin belirleyicisi "kAdi" yerine "kullaniciAdi" veya "kullanici_adi" olursa bu değişkeni kullanırken işimiz önemli ölçüde kolaylaşacaktır. Yine iki veya daha fazla sözcükten oluşan belirleyicilerde ilk sözcükten sonraki sözcüklerin ilk harflerini büyük yazmak da yararlı kodlama alışkanlıklarından biridir ("siniftaKalanOgrenciler" gibi)...
Bu yazının da sonuna geldik. Şimdiye kadarki konuları yeniden gözden geçirmenizi öneririm; çünkü temel bilgileriniz ne kadar sağlam olursa, daha sonra değineceğimiz konuları anlamanız da o kadar kolaylaşır... Umarım siz JavaScript konusunda hiç sınıfta kalmazsınız
Linkleri sadece kayıtlı üyeler görebilir. Linkleri görebilmek için Üye Girişi yapın veya ücretsiz olarak Kayıt Olun
