JavaScript, HTML ve Web’in programlama dilidir. JavaScript’i öğrenmek kolaydır. Bu eğitim size JavaScript’i temelden ileri düzeye kadar öğretir.
Neden JavaScript’i Öğrenmeliyiz?
JavaScript, tüm web geliştiricilerin öğrenmesi gereken 3 dilden biridir.
1. HTML, web sayfalarının içeriğini tanımlamak için
2. Web sayfalarının düzenini belirlemek için CSS
3. Web sayfalarının davranışını programlamak için JavaScript
Web sayfaları, JavaScript’in kullanıldığı tek yer değil. Çoğu masaüstü ve sunucu programı JavaScript kullanır. Node.js en iyi bilinendir. MongoDB ve CouchDB gibi bazı veritabanları da programlama dili olarak JavaScript kullanılmaktadır.
JavaScript ve Java, hem konsept hem de tasarım açısından tamamen farklı dillerdir. JavaScript, 1995 yılında Brendan Eich tarafından icat edildi ve 1997’de ECMA standardı oldu. ECMA-262, standardın resmi adıdır. ECMAScript, dilin resmi adıdır.
Bu JavaScript kılavuzu ile, JavaScript Nedir ? Niçin JavaScript Öğrenmeliyiz ? sorularını cevaplamış olduk.
Javascript ile Neler Yapabiliriz ?
Birçok şey yapabiliriz. Burada birkaç örnek sizinle paylaşacağım, bu sayede az çok JavaScript hakkında bilgi sahibi olmuş olacağız.
JavaScript HTML İçeriğini Değiştirebilir
Birçok HTML öğesi için, getElementById() metodunu kullanabilirsiniz. Bu örnekte id si, ornek olan bir html öğesinin içeriğine Merhaba Javascript yazarak içeriğini değiştirmeyi örnek olarak göstereceğiz.
document.getElementById("ornek").innerHTML = "Merhaba JavaScript";
Javascsipt nesneye dayalı bir programlama mantığı kullanır. Burada getElementById() metodu, yani fonksiyonu, document nesnesinin bir methodudur. Burada iki tane metod art arda çalışmaktadır, ornek id li element bulmak ve seçmek için, getElementById(“ornek”) kısmı, innerHTML kısmı ile de , öğe bulunduktan sonra, içine Merhaba JavaScript yazıldığını düşünebilirsiniz.
<!DOCTYPE html>
<html>
<body>
<h2>Javascript Ne Yapabilir?</h2>
<p id="ornek">JavaScript HTML içeriğini değiştirebilir</p>
<button type="button" onclick='document.getElementById("ornek").innerHTML = "Merhaba JavaScript!"'>Tıklayınız</button>
</body>
</html>
Yukarıdaki örnekte, id si ornek olan, paragraf içinde ” JavaScript HTML içeriğini değiştirebilir” yazısını önce görürsünüz, sonra Tıklayınız butonuna tıklarsanız, javascript kodu ornek id li paragrafı bulur ve sonra içeriğini “Merhaba JavaScript” olarak değiştirir.
Javascript’de hem tek tırnak hem de çift tırnak kullanılabilir.
JavaScript HTML Özellik Değerlerini Değiştirebilir
Aşağıdaki örnek öğesinin yani resim ögesinin, src özelliğini değişterek, ışığı açıp kapatacağız. Bu örnekte, 2 resim var. Birisi ışık yanarken diğeri ise açık kapalı durumda, resmin src özelliğini değiştirmek için butonun onclick özelliğine Javascipt kodu yazarak, src özelliğini değiştirdik, bu şekilde ışığı açıp kapattık.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Neler Yapabilir?</h2>
<p>JavaScript HTML Özelliklerini değiştirebilir.</p>
<p>Bu örnekte JavaScript ile img öğesinin src özelliği değiştirilmektedir.</p>
<button onclick="document.getElementById('benimResmim').src='pic_bulbon.gif'">Işığı Aç</button>
<img id="benimResmim" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('benimResmim').src='pic_bulboff.gif'">Işığı Kapat</button>
</body>
</html>
JavaScript Işık Aç Kapat Örneği
JavaScript HTML Stillerini Değiştirebilir (CSS)
Bir HTML öğesinin stilini değiştirmek, bir HTML özelliğini değiştirmenin bir türevidir aslında.
document.getElementById("ornek").style.fontSize = "35px";
Örnek bu kodu bir paragraf için kullanarak bir örnek yapalım, Tıklayınız butonuna tıkladığımızda yazı büyüsün.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Neler Yapabilir?</h2>
<p id="ornek">Tıklayınız butonuna tıkladığınızda bu yazının fontu 35px olacak şekilde büyür, yani yazı daha büyük olur.</p>
<button type="button" onclick="document.getElementById('ornek').style.fontSize='35px'">Tıklayınız!</button>
</body>
</html>
JavaScript HTML Öğelerini Gizleyebilir
HTML öğelerini gizlemek, görüntüleme stilini değiştirerek yapılabilir.
document.getElementById("ornek").style.display = "none";
JavaScript HTML Öğelerini Gösterebilir
Gizli HTML öğelerini göstermek, görüntüleme stilini değiştirerek de yapılabilir.
document.getElementById("ornek").style.display = "block";
Yukarıdaki örneklerden de anlaşılacağı üzere, HTML kodumuz içinde, id veya sınıf etiketi vererek, bir HTML öğesini belirttikten sonra, JavaScript ile ilgili HTML öğesine ulaşabilir, içeriğini veya bir özelliğini değiştirebiliriz.
JavaScript ile yapabileceklerimiz bununla sınırlı değildir, bu JavaScript kılavuzunda, birçok komut öğrenerek, çok farklı şeyler yapmayı öğreneceğiz.