Javascript İle Kodlama Yaparken Dikkat Edilecekler

[myakn55]

 

Javascript uzmanları tarafından önerilen ve üzerinde en çok durulan konulardan biri budur. Javascript kullandığımız tüm projelerimizde aynı kuralları kullanmamız gereklidir.

Javascript Kodlama Kuralları

Kodlama kuralları programlama için stil yönergeleridir. Yani yazdığımız kodları bir standarda oturtmamız gerekmektedir. Stil kılavuzu genelde şunları kapsar;

- Değişken ve fonksiyonlar için isimlendirme ve açıklama kuralları.

- White space , girinti ve boşlukların nasıl kullanılacağına dair kurallar.

- Programlama uygulama ve ilkeleri.

Kodlama kuralları kaliteli kod yazmamızı sağlar;

- Kodları daha okunaklı yazmamızı sağlar.

- Kodların bakım ve güncelleştirilmesini kolaylaştırır.

Kodlama kurallarını yalnız kendi kodlarımız için veya ekip çalışmasında ortak belirlenen kurallar için kullanabilirsiniz. Kendi kodlama kurallarınız ekiple çalıştığınızda ortak alınan kurallardan farklı olabilir.

Değişken İsimleri

Ben genelde yazdığım projelerde CamelCase değişken adı yapısını kullanıyorum. W3school2un önerdiği yazım şeklide budur. Mesela 2 kelimeden oluşan bir değişken adı için ilk kelimenin tüm harfleri küçük, ikinci kelimenin ise ilk harfi büyük diğerleri küçük yazılır.

<script>
let  saatKac = "17:28";
var telefonModeli = "Apple";
const piSayisi="3.14";
</script>

Operatörlerin Etrafındaki Boşluklar

Kullandığımız operatörlerin (+ , - , - , / ) sonuna daime boşluk koymalıyız. Bu kodumuzun okunabilirliğini artıracaktır.

<script>
var x = y + z;
var arabalar= ["Renault" ,  "Ford" ,  "Fiat"];
</script>

Girinti Boşluğu

Kod blokları arasında yazacağınız kodlar için daima 2 boşluk kullanın.

<script>
function ad(ad) {
  return  ad;
}
</script>

Girintilerde tab kullanmanız önerilmez. Farklı editörler tab boşluğunu farklı şekillerde yorumlayabilir.

İfade Kuralları

Bazı basit ifadeler için uymamız gereke kurallar şu şekildedir.

- Her zaman basit bir ifadeyi noktalı virgülle sonlandırın.

<script>
let arabalar = ["Volvo", "Saab", "Fiat"];

var kisi = {
  isim: "Zafer",
  soyisim: "Yıldız",
  age: 26,
  gozRengi: "yeşil"
};
</script>

Karmaşık ifadeler için uymamız gereken kurallar;

- Açma parantezini (Süslü parantez) ilk satıra koyun.

- Açılan parantezden önce bir boşluk bırakın.

- Kapatma parantezini boşluk bırakmadan yeni satıra ekleyin.

- Karmaşık bir ifadeyi noktalı virgülle sonlandırmayın.

Fonksiyonlar:

<script>
function isimSoyle(isim) {
  return isim;
}
</script>

Döngüler:

<script>
for (i = 0; i < 5; i++) {
  x += i;
}
<script>

Koşullu İfadeler:

<script>
if (zaman< 20) {
  mesaj = "İyi günler";
} else {
  mesaj = "İyi akşamlar";
}
</script>

Nesne Kuralları

Nesne kullanırken daha düzgün kod yazmak için uymamız gereken kurallar şunlardır:

- Süslü parantezi nesne adı ile aynı satırda yazın.

- İki nokta üst üste ve her özellik ile değeri arasında boşluk bırakın.

- Sadece metinsel ifadelerde tırnak kullanın.

- Son özellik-değer çiftinden sonra virgül eklemeyin.

- Süslü parantezin kapatma kısmını boşluk bırakmadan bir alt satıra yazın.

- Nesne tanımını her zaman noktalı virgülle sonlandırın.

 

Kısa nesneler tek satırda yalnızca özellikler arasında boşluk bırakılarak yazılabilir.

<script> var kisi = {isim:"Sare", soyIsim:"Ocaktan", yas:50, gozRengi:"yesil"}; </script>

Satır Uzunluğu

Bir satırda yazacağınız maksimum karakter sayısı 80 olsun. Eğer fazla ise alt satırdan yazmaya devam edin.

<script> document.getElementById("demo").innerHTML= "KodlamakLazim"; <script>

Adlandırma Kuralları

Her zaman tüm kodlarınız için aynı adlandırma kuralını uygulayın.

Mesela Javascript için önerilen kurallar şunlardır;

- Değişken ve Fonksiyonlar için CamelCase.

- Global değişkenler için UPPERCASE.

- Sabit değişkenler için UPPERCASE.

HTML Dosyasına Javascript Yükleme

Harici Javascript dosyalarını sayfaya dahil etmek için kullanılan temel sözdizimi şu şekildedir. Type özniteliğini kullanmamıza gerek yoktur.

<script src="myscript.js"></script>

HTML Elementlerine Erişmek

Html elementlerine verilen öznitelikleri küçük harfle tanımlamamız önerilir. Aksi takdirde hatayla karşılaşabiliriz.

<script> var deneme = getElementById("Demo") var deneme = getElementById("demo") </script>

Mümkün olduğu kadar Html de adlandırmaları Jaascript gibi yapmaya çalışın.

Dosya Uzantıları

Html dosyaları için .html veya .htm

Css dosyaları için .css

Javascript dosyaları için .js kullanmalıyız.

Çoğu web servis sunucuları (Apache, Nginx) büyük küçük harfe duyarlıdır.

zafer.jpg dosyasına Zafer.jpg olarak erişemeyiz.

Diğer web sunucuları büyük-küçük harfe duyarlı değillerdir.

Büyük ve küçük harflerin karışımı şeklinde bir dosya kullanırsanız oldukça tutarlı olmanız gerekmektedir. Çünkü bazı durumlarda hatanın nerden kaynaklandığını bulamayıp günlerce uğraşmanız gerekebilir.

Case sensitive olmayan bir sunucudan, case sensitive olan bir sunucuya geçerseniz siteniz çalışmayabilir.

Bu tür sorunların önüne geçmek için mümkün olduğu kadar küçük harf ile isimlendirilmiş dosyalar kullanmaya dikkat edin.

Performans

Şunu unutmayın. Kodlama kuralları bilgisayarlar tarafından kullanılmaz. Çoğu kuralın program işleyişi üzerinde çok az bir etkisi vardır.

Küçük projelerde girinti ve fazladan boşluklar önemli değildir.

Geliştirme aşamasında kodlar okunabilir olmalıdır yani boşlukları kendi okuyabileceğimiz şekilde ayarlamamız gerekmektedir. Ancak sunucuya dosyamızı yüklediğimiz zaman sıkıştırmalıyız.