Javascript HTML'in ve Web platformunun programlama dilidir. Öğrenmesi oldukça kolaydır. Bu dökümantasyon size JS hakkında size temel bilgi sağlayacak.
Javascript tüm web geliştiricilerinin bilmesi gereken üç dilden bir tanesidir.
- HTML: Web sayfalarının içeriğini oluşturur.
- CSS: Sayfaların görüntü bakımından düzen ve yerleşimini sağlar.
- JS: Web sayfalarının nasıl davranacağını programlar.
Javascript'in kullanıldığı tek alan elbette sadece web siteleri değil. Çokça masaüstü ve ve server taraflı programlar Javascript'i kullanmaktadırlar. Bunların arasından Node.JS gayet popüler olmakla beraber ayrıca MongoDB , CouchDB gibi bazı veri tabanlarıda programlama dili olarak Javascript kullanıyorlar.
Javascript ve Java gerek konsept gerekse tasarım bakımından birbirlerinden tamamen farklı dillerdir.
Javascript ilk olarak Brendan Eich tarafından 1995'te ortaya atıldı ve 1997'de ECMA standartı haline geldi. Standartın resmi adı ECMA-262 idi. ECMAScript dilin, resmiyetteki adıdır.
getElementById() çokça Javascript metotlarından yalnızca bir tanesidir.
Bu metotu örneğimizde ID'si demo olan bir HTML elementini bulmak ve onun üzerinde işlemler yapmak, mesela içeriğini (innerHTML) değiştirmek için kullanacağız.
document.getElementById('demo').innerHTML = 'Merhaba JavaScript';Javascript dilinde tek tırnak da çift tırnak da geçerlidir.
document.getElementById('demo').innerHTML = 'Merhaba JavaScript';Bu örnekte Javascript ile img etiketinin src özelliğini değiştireceğiz.
JavaScript ile bir elementin stilini değiştirmek, elementin özelliğini değiştirmenin başka bir türüdür.
document.getElementById('demo').style.fontSize = '35px';HTML elementleri gizlemek, elementin display stil özelliğini değiştirerek mümkün. Aynısı gizli olan bir elementi göstermek için de geçerli.
document.getElementById('demo').style.display = 'none';document.getElementById('demo').style.display = 'block';HTML'de, JavaScript kodları mutlaka script etiketi içerisine gömülü olmalıdır.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";<
</script>Eski JavaScript örnekleri script etiketleri içerisinde type="text/javascript" değerini içerebilir.
Bu özellik zorunlu değildir. HTML'in varsayılan script dili zaten JavaScript'tir.
Yazılımcı tarafından belirlenen yerde çağrılıp kullanılabilecek JavaScript kodlarından oluşan bloklara JavaScript fonksiyonu diyebiliriz. Mesela bir event tetiklendiğinde spesifik örnek vermek gerekirse kullanıcı bir butona tıkladığı zaman çağırabileceğimiz kod blokları.
İlerleyen bölümlerde fonksiyonlar ve eventlar hakkında daha fazla bilgi yer almaktadır.
Bir HTML dökümanına istediğimiz sayıda script eklememiz mümkün. Bu scriptler HTML dökümanın <head> veya <body> kısmında yer alabilirler.
Bu örnekte bir JavaScript fonksiyonu dökümanın <head> kısmında yerleştirilmiş olacak. Bu fonksiyon butona tıklandığı zaman tetiklenecek.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById('demo').innerHTML = 'Paragraph changed.';
}
</script>
</head>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>Aynen yukarda olduğu gibi bu örnekte de fonksiyon dökümanın <body> kısmında yer alacak ve işlevi aynı olacak.
<!DOCTYPE html>
<html>
<body>
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById('demo').innerHTML = 'Paragraph changed.';
}
</script>
</body>
</html>Scriptleri <body> elementinin içinde en aşağı kısımlara yerleştirmek hız açısından avantajlı olacaktır. Zira o script içeriğinin yorumlanması yavaşlık doğurabileceğinden dolayı tüm HTML elementlerinin altına yerleştirildiği zaman çok fazla yansımayacak ve hissedilmeyecektir.
Scriptler ayrıca tamamen harici dosyalardan da dahil edilebilir. Mesela scriptDosyam isminde bir JS dosyası oluşturalım ve içeriğini örnekteki hale getirelim.
function myFunction() {
document.getElementById('demo').innerHTML = 'Paragraph changed.';
}Farklı sayfalarda da kullanabileceğimiz scriptleri böyle dosya haline getirip kod fazlalığını önlememiz mümkün. Javascript dosyalarının uzantısı .js olmalıdır. Şimdi bu dosyayı HTML dökümanımıza gömmek için script etiketlerini açacağız ve src özelliğine bu dosyayı belirteceğiz:
<script src="myScript.js"></script>Bu script etiketlerini de yukarıda değindiğimiz üzere <head> veya <body> elementleri içerisinde kullanabiliriz.
Harici script dosyaları <script> tagları içermez.
JavaScript kodlarını harici dosyalara taşımanın bazı avantajları mevcut:
- HTML ve JS kodlarının birbirine karışmasını önler.
- Okunabilirliği arttırır.
- Script dosyalarını re-usable yani tekrar kullanılabilir hale getirir, böylelikle birbirini tekrar eden kodlar da ortadan kalkmış olur.
Bir kaç tane script dosyasını HTML dökümanına gömmek için bir kaç tane <script> etiketi kullanabiliriz.
<script src="myScript.js"></script>
<script src="myScript2.js"></script>Harici script dosyaları URL ile veya ilişkili bir dosya yolu ile belirtilebilir.
Aşağıdaki örnek tam bir URL adresi kullanmaktadır.
<script src="https://www.w3schools.com/js/myScript1.js"></script>Aşağıdaki örnek aynı web sitesinin farklı bir klasörünün altındaki dosyayı kullanmaktadır.
<script src="/js/myScript1.js"></script>Aşağıdaki örnek aynı web sitesinin aynı klasöründeki dosyayı kullanmaktadır.
<script src="/js/myScript1.js"></script>Javascript farklı yollardan verileri gösterebilir:
innerHTMLkullanarak HTML elementinin içine yazmakdocument.write()kullanarak HTML dökümanına yazmakwindow.alert()kullanarak mesaj kutusu göstermekconsole.log()kullanarak tarayıcının konsoluna yazmak
JavaScript bir HTML elementine erişmek için document.getElementById(id) metodunu kullanır.
id özelliği HTML elementini temsil eder. innerHTML özelliği ise HTML elementinin içeriğini temsil eder.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById('demo').innerHTML = 5 + 6;
</script>
</body>
</html>Bir bilgiyi HTML'de göstermek için innerHTML özelliğini değiştirmek yaygın olarak kullanılan yöntemdir.
Test amacıyla kullanımı uygundur.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>Bir HTML dökümanı yüklendikten sonra
document.write()methodunu kullanmak bütün HTML'i silecektir. Aşağıdaki örnekte bu durum mevcuttur.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(5 + 6)">Try it</button>
</body>
</html>Bu metot yalnızca test için kullanılıyor olmalıdır.
Bilgiyi göstermek için mesaj kutusu kullanılması da mümkün.
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
```Alınacak çıktıları test etmek için ve debugging aşamasında sıkça kullanılan yöntem olarak tarayıcının konsoluna da bilgiyi yazdırabiliriz.
İlerleyen kısımlarda debugging hakkında daha fazla bilgi sahibi olacağız.
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>Statements örnekleri:
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4Aslında bir bilgisayar programı, bilgisayar tarafından çalıştırılacak talimatlar listesidir. Bir programlama dilinde bu programlama talimatları statements olarak ifade edilir.
HTML'de JavaScript programları web tarayıcıları tarafından çalıştırılır.
JavaScript statementları şunlardan oluşur: Değerler, operatörler, ifadeler, keywordler ve yorumlar.
Örnekteki statement tarayıcıya, id'si 'demo' değerine eşit olan HTML elementinin içine 'Merhaba' yazmasını söyler.
document.getElementById('demo').innerHTML = 'Merhaba';Çoğu JavaScript programı çokça JavaScript statementı içerir. Statementlar da yazıldıkları sıra doğrultusunda tek tek, satır satır çalıştırılır.
Noktalı virgüller JavaScript statementlarını ayırır.
Her çalıştırılabilir statementın sonuna noktalı virgül ekleyebiliriz.
var a, b, c; // 3 değişken oluştur
a = 5; // 5 değerini a değişkenine ata
b = 6; // 6 değerini b değişkenine ata
c = a + b; // a ve b değişkenlerinin toplamını c değişkenine ataAyrıca birden fazla statementta eğer noktalı virgüllerle ayrılırsa tek satırda bulunmaları mümkün.
a = 5;b = 6;c = a + b;Araştırma yaparken bazı projelerde noktalı virgül kullanılmadığını görebilirsiniz. JavaScript dilinde noktalı virgül kullanımı zorunlu değil fakat herhangi sorun yaşanmaması için oldukça tavsiye edilmektedir.
JavaScript birden fazla boşluğu (space karakterini) yok sayar. Scriptinize okunabilirliğini arttırmak için beyaz alanlar ekleyebilirsiniz. Aşağıda örnekteki iki satır da birbirine denktir.
var person='Hege';
var person = 'Hege';Operatörlerin arasına boşluklar eklemek de iyi olacaktır.
var x = y + z; Okunabilirlik için programcılar çoğunlukla 80 karakterden uzun kod satırları yazmayı tercih etmezler.
Eğer bir JavaScript statementı tek satıra sığmıyor veya okunabilirliği bozuyor ise o satırı bir operatörden sonra bitirip yenisine geçebiliriz.
document.getElementById("demo").innerHTML =
"Hello!"; JavaScript statementları kod bloklarında süslü parantezler { . . . } içerisinde birbirleriyle grup haline gelebilirler.
Kod bloklarının amacı birlikte çalışacak statementları gruplamaktır. Bu durumu fonksiyonlarda görebiliriz.
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello!";
document.getElementById("demo2").innerHTML = "How are you?";
}İlerleyen kısımlarda fonksiyonlar hakkında daha fazla bilgi sahibi olacağız.
JavaScript statementları yapılacak işin belirtilmesi için genellikle bir keyword ile başlar.
JavaScript'te tüm rezerve edilmiş keywordleri görüntülemek için tıklayınız
JavaScript keywordleri rezerve edilmiş anahtar kelimelerdir. Bunlar değişken, fonksiyon vb. tanımlanırken kullanılamaz.
JavaScript syntaxı aslında kurallar dizisidir. JavaScript programlarının yapılandırılmasına dair tariftir de diyebiliriz.
var x, y, z; // Değişken nasıl tanımlanır
x = 5; y = 6; // Değer nasıl atanır
z = x + y; // Hesaplama nasıl yapılırBir programlama dilinde değişken kavramı aslında içinde veri bulunan bir kutu gibidir.
JavaScript değişken tanımlamalarında var anahtar kelimesini kullanır.
= operatörü ile de tanımlanan değişkenlere, değer ataması yapılabilir.
Bu örnekte 'x' bir değişken olarak tanımlanmış ve içerisine 6 değeri atanmıştır.
var x;
x = 6; JavaScript hesaplama işlemleri için aritmetik operatörleri ( +, -, *, / ) kullanır.
(5 + 6) * 10JavaScript değer atama işlemleri için atama operatörünü ( = ) kullanır.
var x, y;
x = 5;
y = 6; Bütün JavaScript statementları çalıştırılabilir değildir.
// ifadelerinden sonrasına veya /* ve */ ifadeleri arasına yazılacak içerikler yorum satırı olacaktır.
Yorum satırları da yok sayılacak, çalıştırılmayacaktır.
var x = 5; // Çalıştırılacak
// var x = 6; ÇalıştırılmayacakTanımlıyıcılar aslında isimlerdir.
JavaScript'te tanımlayıcılar değişkenleri (ve anahtar kelimeleri, fonksiyonları) adlandırmak için kullanılır.
Geçerli isimlendirme için kurallar genelde çoğu programlama dilinde aynıdır.
JavaScript isimlendirmesinde ilk karakter muhakkak bir harf veya bir alt tire (_) veya bir dolar simgesi ($) olmalıdır. Sonraki karakterler yine harf, alt tire, dolar işareti ve rakamlardan oluşabilir.
İlk karakter olarak rakam verilemez.
Tüm JavaScript tanımlayıcıları küçük-büyük harflere duyarlıdır. Mesela soyad ve soyAd değişkenleri, birbirinden bağımsız iki değişkendir.
var soyad, soyAd;
soyad = "John";
soyAd = "Doe";Bir diğer örnek olarak JavaScript var anahtar kelimesini Var, VAR gibi şekillerde yazıldığı zaman anlayamaz ve yorumlayamaz.
JavaScript Unicode karakter setini kullanır.
Unicode global olarak tüm karakterleri, sembolleri ve noktalama işaretlerini barındırır. Detaylı bilgi için göz atabilirsiniz.
JavaScript yorumları JavaScript kodunu açıklamak ve okunur kılmak maksadıyla kullanılır.
Ayrıca sık olarak da mevcut kod satırlarının çalışmasını (test maksadıyla) engellemek için kullanılır.
Tek satır yorumlar // ile başlar.
// işaretleri ile bu işaretlerin konulduğu satırın sonuna kadar yazılacak şeyler JavaScript tarafından yok sayılır yani çalıştırılmaz.
Aşağıda her kod satırından önce kullanılarak örneklenmiştir.
// baslik ID'sine sahip nesnenin içeriğini değiştirir:
document.getElementById("baslik").innerHTML = "Benim İlk Sayfam!";
// paragraf ID'sine sahip nesnenin içeriğini değiştirir:
document.getElementById("paragraf").innerHTML = "Benim ilk paragrafım.";Aşağıdaki örneğimizde ise kod satırlarının bitiminde satıra dahil olarak kullanmıştır.
var x = 5; // x isminde değişken tanımla ve 5 değerini ata
var y = x + 2; // y isminde değişken tanımla ve x değişkenini 2 ile toplayarak ortaya çıkan sonucu ataBirden fazla satırda yorumlar için /* işaretleriyle başlanır ve */ işaretleri ile bitirilir. Bu iki işaretleme arasında bulunacak tüm yazılar yorum satırı olacaktır. Aşağıda örnek verilmiştir.
/*
Aşağıdaki kod
ID'si baslik ve paragraf olan
HTML elementlerinin içeriğini
benim web sayfamda değiştirecektir.
*/
document.getElementById("baslik").innerHTML = "Benim İlk Sayfam!";
document.getElementById("paragraf").innerHTML = "Benim ilk paragrafım.";Tek satır yorumlar sıkça kullanılmakla beraber çok satır yorumlara ise genelde resmi dökümantasyonlarda yer verilmektedir.
Bir ürünü veya programı henüz geliştirme aşamasındayken test maksatlı bazı kodları çalıştırmamız veya çalışmasını önlememiz gerekebilir. Eğer yorum satırları olmasaydı çalışmasını önlemek için tabii ki kodu silmemiz gerekecekti. Fakat çalışmasını istemediğimiz kodu test ve geliştirme aşamasındayken yorum satırı haline çevirirsek JavaScript onu yok sayacak ve çalıştırmayacaktır.
//document.getElementById("baslik").innerHTML = "Benim İlk Sayfam!";
document.getElementById("paragraf").innerHTML = "Benim ilk paragrafım.";Ayrıca çoklu yorum satırları ile de çokça kod bloğunun çalışmasını engellememiz mümkün.
/*
document.getElementById("baslik").innerHTML = "Benim İlk Sayfam!";
document.getElementById("paragraf").innerHTML = "Benim ilk paragrafım.";
*/Değişkenler aslında verileri barındıran, saklayan kutucuklardır.
Bu örneğimizde x, y ve z değişkendirler.
var x = 5;
var y = 6;
var z = x + y;Yukarıdaki örnekten şu yorumlar çıkartılabilir:
- x, 5 değerini barındırır.
- y, 6 değerini barındırır.
- z, 11 değerini barındırır.
Yine bu örnekte de fiyat1, fiyat2 ve toplam değişkendirler.
var fiyat1 = 5;
var fiyat2 = 6;
var toplam = fiyat1 + fiyat2;Aynen cebirde olduğu gibi programlamada da değerleri ifade etmek için değişkenler (mesela fiyat1) kullanıyoruz.
Aynı şekilde bu değerler ile işlemler yaparak sonuçlara ulaşabiliyoruz
Yukarıdaki örnekten elde bulunan değişkenlerle hesaplama yaparak 11 sonucuna ulaşıldığı görülüyor.
Bütün JavaScript değişkenleri tekil isimlerle tanımlanmış olmalılardır.
Bu tekil isimler tanımlayıcılar olarak isimlendirilir.
Tanımlayıcılar x, y gibi kısa isimler olabilmekle beraber yaş, toplam gibi açıklayıcı da olabilir.
Değişkenler (tekil tanımlayıcılar) için genel kurallar:
- İsim harfler, rakamlar, alt tireler ve dolar sembolleri içerebilir.
- İsim bir harfle başlamalıdır. Ayrıca dolar sembolü veya alt tire ile de başlayabilir (fakat bu dökümantasyonda bu şekilde kullanım yapılmayacaktır.)
- İsimler büyük-küçük harf duyarlıdır. (y ve Y farklı değişkenlerdir)
- Rezerve edilmiş kelimeler, anahtar kelimeler isim olarak kullanılamaz.
JavaScript değişkenleri sayıları tutabileceği gibi metinleri de tutabilir.
JavaScript çokça tip veriyi tutabilir fakat şuan için sadece sayılar ve metinleri düşünelim.
Metinler tek tırnak veya çift tırnak içerisine yazılabilir. Sayılar ise herhangi bir tırnak içerisinde olmaksızın doğrudan yazılırlar. Eğer sayıları da tırnak içinde yazarsanız metin olarak kabul edileceklerdir.
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';var anahtar kelimesi ile JavaScript'te değişken tanımlamamız mümkün.
var arabaAdi;Bu şekilde tanımladıktan sonra değişken herhangi bir değere sahip olmayacaktır (teknik olarak undefined değerine sahip olacaktır.).
Tanımlanan değişkene değer atamak için eşittir (=) sembolünü kullanabiliriz.
arabaAdi = "Volvo";Aynı zamanda değişkeni tanımlama esnasında da değer atamamız mümkün:
var arabaAdi = "Volvo";Aşağıdaki örnekte arabaAdi ismiyle bir değişken oluşturduk ve içerisine "Volvo" değerini atadık.
Sonrasında bu değişkenin değerini çıktı almak için ID'si 'demo' olan bir HTML paragrafının içerisine yazdırdık.
<p id="demo"></p>
<script>
var arabaAdi = "Volvo";
document.getElementById("demo").innerHTML = arabaAdi;
</script> Bir statementta birden fazla değişken tanımlayabiliriz.
Statementa var ile başlayalım ve değişkenleri virgül ile ayıralım.
var person = "John Doe", carName = "Volvo", price = 200; Bu işlemi birden fazla satıra da ayırabiliriz.
var person = "John Doe",
carName = "Volvo",
price = 200;Eğer bir JavaScript değişkenini tekrar tanımlarsanız önceki değerini kaybetmeyecektir.
Aşağıdaki örnekte arabaAdi isimli değişken yine de "Volvo" değerine sahip olacaktır.
var carName = "Volvo";
var carName;Cebirde olduğu gibi JavaScript'te de =, + gibi operatörlerle aritmetik işlemler yapabilirsiniz:
var x = 5 + 2 + 3;Ayrıca stringlere de uygulamamız mümkün. Bu durumda stringler birleşeceklerdir.
var x = "John" + " " + "Doe"; Lütfen şunu da deneyin:
var x = "5" + 2 + 3;Eğer tırnak içerisine sayı yerleştirirseniz metin gibi davranacaklar ve geri kalan değerlerle birleşeceklerdir. Şimdi de şunu deneyin:
var x = 2 + 3 + "5";Önceki örneklerimize aslında operatörlerin bir kısmını görmüş ve kullanmıştık.
Atama operatörümüz (=) ile tanımlanan değişkene değer atayabiliriz.
var x = 10; Toplama operatörümüz (+) ile sayılar üzerinde toplama işlemi yapabiliriz.
var x = 5;
var y = 10;
var sum = x + y;Çarpma operatörümüz (*) ile sayıları birbirleri ile çarpabiliriz.
var x = 5;
var y = 2;
var z = x * y;Aritmetik operatörleri sayesinde sayılar üzerinde aritmetik işlemler yapabiliriz.
| Operatör | Açıklama |
|---|---|
| + | Toplama |
| - | Çıkarma |
| * | Çarpma |
| ** | Üs (kuvvet) alma |
| / | Bölme |
| % | Mod alma |
| ++ | Arttırma |
| -- | Azaltma |
JavaScript Aritmetik kısmında bu operatörleri daha detaylı görecek ve kullanacağız.
Atama operatörleri ile değişkenlere belirtilen değerler atanır.
| Operatör | Örnek | Eşdeğer |
|---|---|---|
| = | x = y | x = y |
| += | x += y | x = x + y |
| -= | x -= y | x = x - y |
| *= | x *= y | x = x * y |
| /= | x /= y | x = x / y |
| %= | x %= y | x = x % y |
| **= | x **= y | x = x ** y |
(+=) operatörü değeri değişkene ilave eder.
Atama operatörleri hakkında detaylı anlatım JavaScript Atama kısmında yapılacaktır.
+ operatörü metinleri birleştirmek için de kullanılır.
var txt1 = "John";
var txt2 = "Doe";
var txt3 = txt1 + " " + txt2;Çıktısı: John Doe olacaktır.
+= toplama ve atama operatörü de yine metinler için geçerlidir.
var txt1 = "What a very ";
txt1 += "nice day"; Çıktısı: What a very nice day olacaktır.
+operatörü metinler ile kullanıldığı zaman birleştirme operatörü olarak isimlendirilir.
İki sayıyı toplamak bunların toplamını döndürecektir ama bir sayı ve bir metni toplamak geriye metin döndürecektir.
var x = 5 + 5;
var y = "5" + 5;
var z = "Hello" + 5;Çıktı sırasıyla:
10
55
Hello5
Eğer string ve int değerleri toplamaya çalışırsanız sonuç string olacaktır.
| Operatör | Açıklama | |
|---|---|---|
| == | Eşittir | |
| === | Denktir | |
| != | Eşit değildir | |
| !== | Denk değildir | |
| > | Büyüktür | |
| < | Küçüktür | |
| >= | Büyüktür veya eşittir (Büyük eşittir) | |
| <= | Küçüktür veya eşittir (Küçük eşittir) | |
| ? | Ternary operatörü |
Karşılaştırma operatörleri hakkında detaylı anlatım JavaScript Karşılaştırma kısmında yapılacaktır.
| Operatör | Açıklama | |
|---|---|---|
| && | VE | |
| || | VEYA | |
| ! | DEĞİL |
Mantık operatörleri hakkında detaylı anlatım JavaScript Karşılaştırma kısmında yapılacaktır.
| Operatör | Açıklama | |
|---|---|---|
| typeof | Değişkenin tipini döner | |
| VEYA |