Turkhackteam.net/org - Turkish Hacking & Security Platform  
Geri git   Turkhackteam.net/org - Turkish Hacking & Security Platform >
Programlama
> Java

Java Object Oriented Programming temeline dayanan, çok işlevli, step by step işleyen dilin dökümanlarının paylaşım alanı.





JavaScript Yazım Kuralları

Java

Yeni Konu aç Cevapla
 
Seçenekler
Alt 22-06-2015 03:26   #1
  • Binbaşı
  • Üye Bilgileri
Üyelik tarihi
03/2015
Nereden
M3RSİN
Yaş
32
Mesajlar
Konular

Teşekkür (Etti): 264
Teşekkür (Aldı): 663


Cool JavaScript Yazım Kuralları



JavaScript Yazım Kuralları

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 scriptlerimizi …
Bir önceki bölümde JavaScript ile HTML arasındaki ilişkiye
değinmiş, JavaScript’in neden nesne-yönelimli bir kodlama dili olduğuna açıklık
getirmiştik. Bu yazımızda ise JavaScript kodlarını HTML etiketleri içine
yazmadan nasıl ayrı bir dosya olarak kaydeceğimizi göreceğiz. Tabi yazımız bu
konuyla sınırlı değil; iyi bir kod yazarı, yani programcı olmak için bilinmesi
gereken bazı temel yazım kurallarının neler olduğunu da yine bu yazıda
öğreneceğiz. Ayrıca yeri geldikçe DOM ile ilgili küçük ama yararlı bilgileri
paylaşmayı sürdürüyoruz. Hazırsanız yazımıza bir soruyla başlayalım :


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.






style="BORDER-RIGHT: #afbcc7 1px solid; BORDER-TOP: #afbcc7 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #afbcc7 1px solid; BORDER-BOTTOM: #afbcc7 1px solid; BACKGROUND-COLOR: #f5f5f5">
/* 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 :






style="BORDER-RIGHT: #afbcc7 1px solid; BORDER-TOP: #afbcc7 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #afbcc7 1px solid; BORDER-BOTTOM: #afbcc7 1px solid; BACKGROUND-COLOR: #f5f5f5">
<!

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.






style="BORDER-RIGHT: #afbcc7 1px solid; BORDER-TOP: #afbcc7 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #afbcc7 1px solid; BORDER-BOTTOM: #afbcc7 1px solid; BACKGROUND-COLOR: #f5f5f5">
// 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

}





style="BORDER-RIGHT: #afbcc7 1px solid; BORDER-TOP: #afbcc7 1px solid; FONT-SIZE: 11px; BORDER-LEFT: #afbcc7 1px solid; BORDER-BOTTOM: #afbcc7 1px solid; BACKGROUND-COLOR: #f5f5f5">
<!

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>



#sayfa_sonu#


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.

Yukarıda saydığımız maddeler ile ilgili bir kaç örnek vermek
gerekirse;


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.



border=1>


vAlign=top>abstract
boolean
break
byte
case
catch
char
class
const
continue
debugger
default
delete
do
double

vAlign=top>else
enum
export
extends
false
final
finally
float
for
function
goto
if
implements
import
in

vAlign=top>instanceof
int
interface
long
native
new
null
package
private
protected
public
return
short
static
super

vAlign=top>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



style="BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px"
align=right>




İYİ FORUMLAR



___________________________________________

SeN 0 Elindeki Çakmağı Anca Gösterir Gösterir Ç3k3rSin Ama Ben Bir DefA Yaktımmı , Yedi C3DDini Yakarım ! ╾━╤デ╦︻

 Offline  
 
Alıntı ile Cevapla
Alt 22-06-2015 03:44   #2
  • Yarbay
  • Üye Bilgileri
Üyelik tarihi
10/2014
Nereden
İstanbul
Mesajlar
Konular

Teşekkür (Etti): 1057
Teşekkür (Aldı): 1659




Elinize Sağlık..



___________________________________________

" Düşman ülkesi viran olacak, Türkiye büyüyüp Turan olacak! "
Ziya Gökalp
 Offline  
 
Alıntı ile Cevapla
Cevapla

Bookmarks

Seçenekler


Bilgilendirme Turkhackteam.net/org
Sitemizde yer alan konular üyelerimiz tarafından paylaşılmaktadır.
Bu konular yasalara uygunluk ve telif hakkı konusunda yönetimimiz tarafından kontrol edilse de, gözden kaçabilen içerikler yer alabilmektedir.
Bu tür konuları turkhackteamiletisim [at] gmail.com mail adresimize bildirebilirsiniz, konular hakkında en kısa sürede gerekli işlemler yapılacaktır.
Please Report Abuse, DMCA, Harassment, Scamming, Warez, Crack, Divx, Mp3 or any Illegal Activity to turkhackteamiletisim [at] gmail.com

Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz.
Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.



         

Powered by vBulletin® Copyright ©2000 - 2019

TSK Mehmetçik Vakfı

Türk Polis Teşkilatını Güçlendirme Vakfı

Google+
Pomeranian Boo
Siber Güvenlik
sosyal medya bayilik paneli

wau