JAVASCRIPT YAZIM KURALLARI
- Javascript’te değişkenler ya alt çizgi ile başlar ya da harf ile başlar. Değişkenler rakamla başlamaz ve özel karakterlerle başlamaz. $degisken, #degisken, 8degisken gibi.
- Değişken isminin uzunluğu en çok 255 karakter olabilir.
- Değişken ve fonksiyon isimlerinde büyük küçük harf ayrımı vardır.
- Değişkenler her zaman var ifadesiyle tanımlanmalıdır.
- Javascript’te Türkçe karakterler kullanılmaz, Ç,Ş,Ğ,Ü,Ö…
- Sabit değişkenler cons degisken; şeklinde tanımlanmalıdır.
- Kodlamada geçen anahtar kelimeler (while,for,if..) kodlama arsından kullanılmaz.
- Kod blokları ; ile ayrılır.
- Tek tırnak ifadesi ile çift tırnak ifadesi arasında işlevsel bir fark yoktur.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 | //Birçok JavaScript HTML yöntemlerden biridir getElementById () document.getElementById("demo").innerHTML = "Hello JavaScript"; //çift tırnak document.getElementById('demo').innerHTML = 'Hello JavaScript'; //tek tırnak //JavaScript Değişkenler var x; x = 6; //Çoklu Değişken Tanımlama var x, y, z; x = 5; y = 6; z = x + y; //JavaScript Operatörleri var deger=(5 + 6) * 10; //JavaScript Yorumlar //Bu bir Yorum Satırı /* JavaScript Yorumlar */ //JavaScript Duyarlı davası var lastname, lastName; lastName = "Doe"; lastname = "Peterson"; //JavaScript ve Deve Kılıf var DegiskenTanimlama;/*Büyük Harfle başlar diğerleri küçük harfle devam eder.*/ //JavaScript Beyaz Boşluk var person = "Hege";/*JavaScript birden çok boşluk yok sayar. Bunu daha okunabilir hale getirmek için komut dosyasına beyaz alan ekleyebilir.*/ //Değişken türleri //1. Integer - Sayı türü (tırnaksız yazılır) var sayi; sayi = 5.6; //2. String - Dizgi değişkenler var dizgi; dizgi = 'yeni 654654 ^+%^%&£#$£#$ veri'; //3. Boolean (doğru - yanlış / true - false) var karar; karar = 4 >= 3; karar = 7 <= 5; //4. Diziler //var dizi = [5, 6, 'string', false, (4>3)]; var dizi = new Array(5 , 6 , 'string' , false , (4>3)); //5. Objeler var araba = {tekerlek:'goodyear', far:"yıldız", kasa:"sedan"}; document.write(typeof(x)); /* Matematik işlemler */ var sayi1 = 10; var sayi2 = 20; // toplama işlemi için + kullanılır var toplam = sayi1 + sayi2; // çıkarma işlemi için - kullanılır var toplam = sayi1 - sayi2; // çarpma işlemi için * kullanılır var toplam = sayi1 * sayi2; // bölme işlemi için / kullanılır var toplam = sayi2 / sayi1; // kalanı gösterme için işlemi için % kullanılır var toplam = sayi2 % sayi1; // değişkendeki sayısal değeri 1 arttırmak için ++ kullanılır; sayi ++; // değişkendeki sayısal değeri 1 azaltmak için ++ kullanılır; sayi --; // aşağıdaki ifadenin diğer hali sayi = sayi + 5; sayi +=5; // aşağıdaki ifadenin diğer hali sayi = sayi - 5; sayi -=5; // aşağıdaki ifadenin diğer hali sayi = sayi * 5; sayi *=5; // aşağıdaki ifadenin diğer hali sayi = sayi / 5; sayi /=5; // aşağıdaki ifadenin diğer hali sayi = sayi % 5; sayi %=5; //sayı içeren string ifadeyi sayıya çevirme sonuc = "5"; sonuc = parseInt(sonuc); parseInt("10 ASDFASDF");// Sadece integer değer dönderir. parseFloat("10.33"); // returns 10.33 //Yuvarlama sonuc = Math.round(5.4);// <5> yuvarlar sonuc = Math.ceil(5.1);//YUKARI YUVARLAR sonuc = Math.floor(5.9);// AŞAĞI YUVARLAR //Kalan bulma sonuc = 55%3; sonuc = Math.pow(8, 2); ; // Üstlü kuvvektini alır. //Sayının karekökü sonuc = Math.sqrt(5);//Kara kökünü verir. sonuc = Math.abs(-5);//Mutlak değeriniz alır. sonuc = Math.min(-5, 9, 0, 7.4);//en küçüğünü alır. sonuc = Math.max(-5, 9, 0, 7.4);//en büyüğünü alır //0 ile 1 arasında rastgele sayı üretme fonksiyonu sonuc = Math.random(); sonuc = Math.round(sonuc*1000); /* Koşul ifadeleri */ if (sayi1 > 5) { document.writeln("büyük"); } else if (sayi == 5) { document.writeln("eşit"); } else{ document.writeln("küçük"); } /* mantıksal operatörler */ var sayix = 10; var sayiy = "10"; // eşittir için == kullanılır. eşitlik için değerlerin aynı olması yeterli if (sayix == sayiy) {} // eşit değil için != kullanılır. eşitlik için değerlerin aynı olmaması yeterli if (sayix != sayiy) {} // denktir için === kullanılır. denklik için değerlerin ve veri tiplerinin aynı olması gerekli if (sayix === sayiy) {} // denk değil için === kullanılır. denklik için değerlerin ve veri tiplerinin aynı olmaması gerekiyot if (sayix !== sayiy) {} // büyüktür için > kullanılır. bir sayının diğerinden büyük olup olmadığını kontrol eder if (sayix > sayiy) {} // büyük eşit için >= kullanılır. bir sayının diğerinden büyük veya diğerine eşit olup olmadığını kontrol eder if (sayix > sayiy) {} // küçüktür için > kullanılır. bir sayının diğerinden küçük olup olmadığını kontrol eder if (sayix < sayiy) {} // küçük eşit için <= kullanılır. bir sayının diğerinden küçük veya diğerine eşit olup olmadığını kontrol eder if (sayix <= sayiy) {} // ve ifadesi. "&&" şeklinde kullanılır. koşula sokulan iki ifadenin birden geçerli olması durumunda if koşulunu sağlar if (sayix > sayiy && sayi1 < sayi2) {} // veya ifadesi. "||" şeklinde kullanılır. koşula sokulan iki ifadeden herhangi biri geçerliyse if koşulunu sağlar if (sayix > sayiy || sayi1 < sayi2) {} // FONKSİYONLAR function myFunction(p1, p2) { return p1 * p2; } //parametreli fonksiyon ve return var x = myFunction(4, 3); function myFunction(a, b) { return a * b; } //Nesne Özellikleri var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue" }; //person["lastName"];|| person.lastName; //Yerel JavaScript Değişkenler function myFunction() { var carName = "Volvo";/*Fonksiyon içinde tanımlanan değişkenler parantez dışında tanımsızdır.*/ } //Genel JavaScript Değişkenler var carName = " Volvo"; /*Tüm döküman içerisinde kullanılabilir. */ function myFunction() { // fonksiton içerisinde de kullanılabilir } //Events <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button> |
Event
onchange Bir HTML elemanı değiştirildi
onclick Kullanıcı bir HTML öğesi tıklar
onmouseover Kullanıcı bir HTML öğesi üzerinde fareyi hareket ettirir
onmouseout Kullanıcı bir HTML öğesi üzerinde fareyi çektiğinde.
onkeydown kullanıcı bir klavye tuşuna iter
onload kullanıcı bir klavye tuşuna iter
JavaScript Strings
\b Boşluk
\b Boşluk
\r Satır Baş
ı\f Form Besleme
\t Yatay Gönye bir tab boşlu
\v Dikey Sekme
Uzun Kod Hatları Breaking
1 2 3 4 5 6 | document.getElementById("demo").innerHTML = "Hello Dolly!"; //En iyi okunabilirlik için, programcılar genellikle 80 karakterden uzun kod satırları önlemek ister. document.getElementById("demo").innerHTML = "Hello \ Dolly!"; //Ayrıca bir kod satırı kadar zarar verebilir bir metin dizgisi içinde tek ters eğik çizgi ile: document.getElementById("demo").innerHTML = "Hello" + "Dolly!";//bir dize kırmaya daha kolay yolu, dize ilave kullanmaktır |
Dize Yöntem ve Özellikleri
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length; //Bir dize bir dize bulma var str = "Please locate where 'locate' occurs!"; var pos = str.indexOf("locate");//IndexOf () metodu (konumunu) dizinini döndüren birinci bir dizge içinde belirtilen bir metnin bir olayda: var pos = str.lastIndexOf("locate");//LastIndexOf () metodu dizinini döndürür son bir dizedeki belirtilen metnin oluşum: var pos = str.indexOf("locate",15);//Her iki yöntem de arama için başlangıç pozisyonu olarak ikinci bir parametre kabul ediyoruz: var pos = str.search("locate");//Arama () yöntemi, belirtilen değeri için bir dizi arama maç pozisyonunu geri gönderir: var str = "Apple, Banana, Kiwi"; var res = str.slice(7, 13);//Belirtilen indexler arasındaki karakterleri getirir. var res = str.slice(-12,-6);//Tersinde 12 karater gelir tekrar terse 6 karater alır var res = str.slice(7);//Yedi karakterden sonra gelen hepsini alır. var res = str.slice(-12); var res = str.substr(7,6);//Selice ile aynı görevi görür var n = str.replace("Varolan", "Yerinegelen");//Metindeki içeriği değitirir. var text2 = str.toUpperCase();//Metni büyük yazdırır. var text2 = text1.toLowerCase();//Metni küçük yazdırır. var text3 = text1.concat(" ",text2);//Metinleri birleştirir. var text3 = str.charAt(0);//İlk karakterini verir. var text3 = str.charCodeAt(0); //Karakter kodunu verir. var text3 = str[0]; var arr = str.split(",");//Metni virgüler göre böler ve dizi olarak dönderir. var x = 123; x.toString(); //Metni string yapar |
Tarih işlemleri
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var tarih = new Date(); var basla = tarih.getTime(); var sonuc = Date(); sonuc = tarih.getDate(); //Ayın kaçıncı günü? sonuc = tarih.getDay(); // Haftanın gün sayısı sonuc = tarih.getMonth(); //Ay bilgisi (0-11) sonuc = tarih.getFullYear(); // 4 haneli yıl bilgisi sonuc = tarih.getHours(); // 0-23 arası saat bilgisi sonuc = tarih.getMinutes();//0-59 arası dakika bilgisi sonuc = tarih.getSeconds(); //0-59 saniye bilgisi sonuc = tarih.getDate()+"/"+(tarih.getMonth()+1)+"/"+tarih.getFullYear()+" "+tarih.getHours()+":"+tarih.getMinutes()+"<small>:"+tarih.getSeconds()+'</small>' sonuc = tarih.getTime(); tarih = new Date(); sonuc = tarih.getTime()-basla; document.getElementById('sonuc').innerHTML = sonuc; |
DİZİ DEĞİŞKENLER
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | var person = []; var cars = ["Saab", "Volvo", "BMW"]; var person = ["John", "Doe", 46]; var points = new Array(40, 100, 1, 5, 25, 10); var dizi = Array("asdsadasd",324234,"fdgfdhfgh","sadasdasd"); document.getElementById("demo").innerHTML = Array.isArray(dizi);//FALSE TRUE DEĞERİ DÖNER DİZİ OLUP OLMADIĞINI KONTROL EDER. document.write(dizi[0]); //dizideki eleman sayısı dizi.length; //dizi elemanlarını sıralar dizi.sort(); //dizi elemanlarını tersten sıralar dizi.reverse(); //dizinin sonuna yeni eleman ekler dizi.push("yeni son"); //dizinin başına yeni eleman ekler dizi.unshift("yeni ilk"); //diziden eleman silme dizi.splice(0,1); //başlangıç sırası, kaç eleman silinecek dizi.splice(0,3,"yeni1","yeni2","yeni3"); // silinenleri yerine yeni elemanları ekler //dizinin son elemanını siler dizi.pop(); //dizinin ilk elemanını siler dizi.shift(); //dizide belirtilen indeksteki değeri siler, indeks değeri korunur. delete dizi[0]; //dizileri birleştirir dizi.concat(dizi2,dizi3); // aranan değerin bulunduğu indeksin numarasını verir dizi.indexOf("aranan"); //elemanın metinsel bir değer mi sayısal bir değer mi olduğunu gösterir typeof(dizi[1]); //dizi elemanları stirng(metinsel) veri türüne çevirir dizi.toString(); //elemanlar arasındaki virgül yerine başka bir karakter koymak için kullanılır. dizi.join("?"); //dizide verilen aralıktaki elemanları döndürür dizi.slice(1,4); //başlangıç sırası, bitiş sırası |
DELETE OPERATÖRÜ BİR DİZİ İÇERİSİNDE SIRASI BELİRTİLMİŞ BİR ÖĞEYİ SİLMEK İÇİN KULLANILIR
1 2 3 4 5 | function silem(){ var silinmez; degersil="degişken"; delete degersil; } |
IN OPERATÖRÜ ÖZELLİK BELİRTİLEN NESNENİN İÇİNDE İSE TRUE GÖNDERİR
1 2 3 4 5 | function inoperator(){ var kisiler=new Array("çağlar","ali","veli","elif","nur"); sonuc=0 in kisiler; //True kisiler index çağlar ali in kisiler; // true kisiler index 1 } |
INSTANCEOF OPERATÖRÜ NESNE BELİRTİLEN NESNE TİPİNDE TRUE DEGER ÜRETİR
1 2 3 4 5 6 7 | function instanceofoparetor(){ uyeler=new Array("çağlar","ali","veli","elif","nur"); if(uyeler instanceof Array){ document.write("<br />dizi tipinde"); }else{ } } |
typeof() operatörü verilen değişkenin değerini gönderir
1 2 3 4 | function degiskenturu(){ a="değişken"; alert(typeof(a)); } |
KOŞUL-ŞART, DÖNGÜLER ve HATA AYIKLAMA
if şartı
1 2 3 4 5 6 7 8 9 10 | var a=1; if(a>1){ alert("MERHABA DÜNYA"); //şart sağlandığında çalışacak }else{alert("ÜZGÜNÜM"); //ŞART SAĞLANMADIĞINDA ÇALIŞACAK} /* if else if else şartı*/ var a=2; if(a==1){alert("MERHABA DÜNYA"); //şart sağlandığında çalışacak }else if(a<1){ alert("MERHABA DÜNYA"); //şart sağlandığında çalışacak }else{ alert("ÜZGÜNÜM"); //ŞART SAĞLANMADIĞINDA ÇALIŞACAK } |
for döngüsü
1 2 3 4 5 | for(var sayac=0;sayac<5; sayac++){ document.write(sayac+". döngü <br>"); } |
while kullanımı
1 2 | say=0; while(say<10){ document.write(say+". döngü <br>");} |
do while kullanımı
1 | do{ document.write("donguye girdi."+sayi)}while(sayi<5); |
for in kullanımı
1 2 | var dizi={isim:"çağlar",soyad:"BOSTANCI"}; for(deger in dizi){ document.write(dizi[deger]+"<br />")} |
// BREAK ; FOR DÖNGÜSÜ İÇERİSİNDE ÇIKMAYA SAĞLIYOR
//CONTINUE DEYİMİ DÖNGÜDE BİR SONRAKİ DEGERDEN DEVAM EDİYOR
try{}catch(){} kullanımı
1 2 | var deger=5; try{ alert("merhaba dünya"); }catch(err){ alert("hata oluştu"+err.message);} |
try-throw hata ayıklamada kullanılır ama hata degerlerini codunu verir
1 2 3 4 5 6 7 8 9 | try{ if(deger<5){ throw "hata 1";} if(deger<4){ throw "hata 2";} if(deger<3){ throw "hata 3";} }catch(err){ if(err=="hata 1"){ document.write("hata "+err+" çalıştı");} if(err=="hata 1"){ document.write("hata "+err+" çalıştı");} if(err=="hata 1"){ document.write("hata "+err+" çalıştı");} } |
try-catch-final hatayı ayılayıp aynı zamanda da codun final bölümünün çalışması için kullanılır.
1 2 3 4 5 6 7 8 9 10 | var deger=12; try{ if(deger<5){ throw "hata 1";} if(deger<4){ throw "hata 2";} if(deger<3){ throw "hata 3";} }catch(err){ if(err=="hata 1"){ document.write("hata "+err+" çalıştı");} if(err=="hata 1"){ document.write("hata "+err+" çalıştı");} if(err=="hata 1"){ document.write("hata "+err+" çalıştı");} }finally{ document.write("Yinede çalışacak");} |
//BERAK KULLANIMI
1 2 3 4 | for (i = 0; i < 10; i++) { if (i === 3) { break; } text += "The number is " + i + "<br>"; } |
//CONTIUNE KULLANIMI
1 2 3 4 | for (i = 0; i < 10; i++) { if (i === 3) { continue; } text += "The number is " + i + "<br>"; } |
JavaScript HTML DOM
JavaScript sayfasındaki tüm HTML ögelerini değiştirebilir
JavaScript tüm HTML sayfası özelliklerini değiştirebilir
JavaScript sayfasında tüm CSS stillerini değiştirebilir
JavaScript HTML öğeleri ve öznitelikleri mevcut kaldırabilirsiniz
JavaScript yeni HTML öğelerini ve özelliklerini ekleyebilir
JavaScript sayfasında tüm mevcut HTML olaylara tepki verebilir
JavaScript sayfasındaki yeni HTML etkinlikleri oluşturabilirsiniz
1 | document.getElementById("metin").innerHTML = "Merhaba dünya!"; |
Bulma HTML Elemanları
1 2 3 4 5 6 7 8 9 10 11 12 | // nesneyi idye göre yakalama document.getElementById("id1").innerHTML; // nesneyi classa göre yakalama document.getElementsByClassName("kutu")[0].innerHTML; // nesneyi name değerine göre yakalama document.getElementsByName("isim").innerHTML; // nesneyi etiket adına göre yakalama document.getElementsByTagName("p")[0].innerHTML; //nesneyi css seçiciler ile yakalama document.querySelectorAll("div.kutu")[0].innerHTML; //stil verme document.getElementById("nesne1").style.border = "1px solid #333"; |
HTML Elementleri Değiştirme
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //HTML in içeriğini değiştirir. document.getElementById("id1").innerHTML="İÇERİĞİNİ EKLER"; //Belirtilen html elementin var olan özelliklerini getirir. document.getElementById("link2").attributes; //HTML elementlerde belirtilen özelliğin değerini alır. document.getElementById("link2").getAttribute("href"); //Idsi belirtilen elementin özellik değerini değiştirir. document.getElementById("link2").setAttribute("href","http://www.google.com.tr"); //Seçilen elementin style özelliğini değiştirme. document.getElementById("link2").style.width="100px"; //HTML elementine yeni bir özellik ekleme var deger=document.getElementById("xxx"); var ozellik=document.createAttribute("name"); ozellik.value="merhabadunya"; deger.setAttributeNode(ozellik); |
Ekleme Silme Elemanlar.
1 2 3 4 | var para = document.createElement("P"); // yeni bir p elementi oluştu var t = document.createTextNode("merhaba dünya"); // elemete metin oluşturuldu para.appendChild(t); // elemente metin girildi document.getElementById("geneldiv").appendChild(para); // element ilgili dive eklendi. |
DOM Elementler Arası Gezinme
childNodes Kullanımı
children Kullanımı
nexSibling Kullanımı
nextElementSibling Kullanımı
previousSibling Kullanımı
previousElementSibling Kullanımı
parentNode Kullanımı
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //childNodes Kullanımı var element=document.getElementById("kardesler"); console.log(element.childNodes[0].style.color="red"); //children Kullanımı var element=document.getElementById("kardesler"); console.log(element.children[0].innerHTML="asdfasdff"); //nexSibling Kullanımı var element=document.getElementsByTagName("p"); console.log(element[0].nextSibling); //nextElementSibling Kullanımı var element=document.getElementsByTagName("p"); console.log(element[0].nextElementSibling.style.color="red"); //previousSibling Kullanımı var element=document.getElementsByTagName("p"); console.log(element[1].previousSibling); //previousElementSibling Kullanımı var element=document.getElementsByTagName("p"); console.log(element[1].previousElementSibling.style.color="red"); //parentNode Kullanımı var element=document.getElementsByTagName("p"); console.log(element[1].parentNode.style.backgroundColor="red"); |
HTML element silme/kaldırma
1 2 | var list = document.getElementById("geneldiv"); //İlgili element seçildi. list.removeChild(list.childNodes[0]); // id="geneldiv" il ul-li elmenti silindi.with |
1 2 | document.getElementById("link2"). document.getElementById("myImage").src = "landscape.jpg"; |
//HTML elemanı ekleme document.appendChild(element)
1 2 3 4 | var para = document.createElement("P"); // yeni bir p elementi oluştu var t = document.createTextNode("merhaba dünya"); // elemete metin oluşturuldu para.appendChild(t); // elemente metin girildi document.getElementById("geneldiv").appendChild(para); // element ilgili dive eklen |
//HTML elementlerinin içeriğini değiştirme. document.replaceChild(element)
1 2 3 | var textnode = document.createTextNode("Water"); // Değiştirilecek metin oluşturuldu var ddd = document.getElementById("myList").childNodes[0]; // id si belirtilen elementin 0. elemanı seçildi. ddd.replaceChild(textnode, ddd.childNodes[0]); //metin değiştirildi: |
//HTML kardeşler arası geçiş
1 2 3 | var secilenelement=document.getElementById("p1"); var ikincicucuk=secilenelement.nextElementSibling;<!--Sonraki Kardeş Elmenti Alır--> var birincielement=ikincicucuk.previousElementSibling;<!--Önceki Kardeş Elementi Alır--> |