JavaScript Nedir? JavaScript Ne İşe Yarar?

Bu yazımda JavaScript nedir? Neden JavaScript öğrenmeliyim? JavaScript ile neler yapılabilir? JavaScript kodlarını hangi editörde yazmalıyım? sorularına cevap verdikten sonra en temel seviyeden başlayıp ileri seviyeye kadar tüm JavaScript konularını anlatmaya başlayacağım.

JavaScript Nedir?

JavaScript web sayfalarına etkileşim kazandırmak için geliştirilmiş bir betik dildir. Tabiki JavaScript sadece web sayfalarına etkileşim kazandırmak için kullanılmıyor. Daha önceleri JavaScript dilini ön yüz (frontend) geliştirmek için kullanıyorduk.

Yani yazdığımız JavaScript kodlarını tarayıcılarda çalıştırabiliyorduk. Günümüzde ise C#, Java, Php, Python vb.. programlama dilleri gibi backend alanında da kullanabiliyoruz. Hatta birçok masaüstü ve sunucu programı da artık JavaScript kullanıyor.

Örneğin Node.js bunlardan en bilinenidir. Node.js, yazmış olduğumuz JavaScript kodlarını makine diline çeviriyor. Böylece artık JavaScript kodları yazarken tarayıcı bağımlılığımız ortadan kalkmış oldu. Bunların dışında MongoDB ve CouchDB gibi bazı veritabanları da JavaScript dilini kullanıyor.

Bunun yanında son zamanların en popüler JavaScript framework’lerinden olan Angular, React, Vue gibi framework’lerin de temelde JavaScript kullanmaları JavaScript diline farklı bir önem kazandırdı.

Hatta artık mobil uygulamaları yazabilmek için mutlaka Java programlama dilini bilmemiz gerekmiyor. JavaScript programlama dilini kullanarakta mobil uygulamalar geliştirebiliyoruz.

Son olarak şunu da belirtmek istiyorum. Npm sayesinde artık birçok JavaScript kütüphanesini saniyeler içerisinde projelerimize dahil edebiliyoruz.

İşte bu gibi nedenlerden dolayı özellikle son yıllarda JavaScript en popüler programlama dillerinden birisi haline geldi.

ÖNEMLİ : Bazen Java programlama dili ile JavaScript programlama dili birbirine karıştırılabiliyor. Fakat bu iki dilde sadece isim benzerliği bulunuyor. Hem konsept hem de tasarım açısından tamamen farklı dillerdir.

Neden JavaScript Öğrenmeliyim?

Eğer bir web geliştiricisi olmak istiyorsanız öğrenmeniz gereken olmazsa olmaz 3 dil vardır.

1 – Html : Web sayfalarını oluştururken ilk olarak Html kodları yazarak sayfanın temel içeriğini ortaya çıkarırız.

Örneğin bir buton oluşturmak istersek;

Html Kodları

<button>Sepete Ekle</button>

<button>Sepete Ekle</button>

Tarayıcıdaki Görünümü

Html konularında eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE HTML DERSLERİ yazımdan tüm Html konularına bakabilirsiniz.

2 – Css : Yazmış olduğumuz Html kodlarına stil verebilmek ve aynı zamanda web sayfalarının yerleşimini belirlemek için Css öğrenmemiz gerekiyor.

Örneğin yukarıda Html ile yazdığımız butona Css özellikleri uygulayalım.

Html ve Css Kodları

<style>
button{
border: none;
background-color: lawngreen;
color: darkgreen;
border-radius: 6px;
padding: 12px;
}
</style>
<button>Sepete Ekle</button>

<style>

button{

border: none;

background-color: lawngreen;

color: darkgreen;

border-radius: 6px;

padding: 12px;

}

</style>

<button>Sepete Ekle</button>

Tarayıcıdaki Görünümü

Css konularında eksikleriniz olduğunu düşünüyorsanız A’DAN Z’YE CSS DERSLERİ yazımdan tüm Css konularına bakabilirsiniz.

3 – JavaScript : Yazmış olduğumuz web sayfalarına etkileşim kazandırmak için JavaScript öğrenmemiz gerekiyor.

Örneğin biraz önce Html ve Css kullanarak yapmış olduğumuz butona JavaScript kodları yazarak etkileşim kazandıralım. Butona tıklandığında alert metodu ile “Butona Tıkladınız!!!” mesajı verdirelim.

Html, Css ve JavaScript Kodları

<style>
button{
border: none;
background-color: lawngreen;
color: darkgreen;
border-radius: 6px;
padding: 12px;
}
</style>
<button onclick="alert('Ürün Sepete Eklendi!')">Sepete Ekle</button>

<style>

button{

border: none;

background-color: lawngreen;

color: darkgreen;

border-radius: 6px;

padding: 12px;

}

</style>

<button onclick="alert('Ürün Sepete Eklendi!')">Sepete Ekle</button>

Uygulama Demosu

JavaScript nedir, neden öğrenmeliyiz? sorusuna cevap verdiğimize göre şimdi de JavaScript ile neler yapabiliyoruz? onlara bakalım.

JavaScript ile Neler Yapılabilir?

JavaScript programlama dilini kullanarak kapsamlı projeler de yazabiliriz ama bu kısımda basit birkaç örneği ne kadar kolay bir şekilde yapabildiğimizi göstermek istiyorum.

⇒ JavaScript ile bir Html öğesinin içeriğini değiştirebiliriz. Örneğin butona tıklandığında id’si test olan Html etiketinin içeriğini “Merhaba JavaScript!” ile değiştirelim.

Html ve JavaScript Kodları

<p id="test">JavaScript Derslerine Hoşgeldiniz.</p>
<button onclick='document.getElementById("test").innerHTML = "Merhaba JavaScript!"'>Tıkla!</button>

<p id="test">JavaScript Derslerine Hoşgeldiniz.</p>

<button onclick='document.getElementById("test").innerHTML = "Merhaba JavaScript!"'>Tıkla!</button>

Uygulama Demosu

NOT : JavaScript kodları yazarken tek tırnak veya çift tırnak kullanabiliriz.

⇒ JavaScript ile bir Html öğesinin attribute’larının değerlerini değiştirebiliriz. Örneğin bir link tanımlayalım ve bu linke tıklandığında “https://www.google.com.tr/” adresine bağlantı verelim.

Butona tıklandığında bu linkin href attribute’unun değerini https://yandex.com.tr/ olarak değiştirelim.

Html ve JavaScript Kodları

<a id="link" href="https://www.google.com.tr/">Google</a>
<button onclick="document.getElementById('link').href='https://yandex.com.tr/'">Tıkla</button>

<a id="link" href="https://www.google.com.tr/">Google</a>

<button onclick="document.getElementById('link').href='https://yandex.com.tr/'">Tıkla</button>

Uygulama Demosu

Dikkat ederseniz butona tıkladığımızda a etiketinin href attribute’unun değeri değişiyor.

⇒ JavaScript ile bir Html öğesine Css değerleri verebilir veya varolan Css değerlerini değiştirebiliriz.

Örneğin bir p etiketi ve bir buton tanımlayalım. Butona tıklandığında p etiketinin font-size özelliğine 40px değeri verelim.

Html ve JavaScript Kodları

<p id="test">JavaScript Derslerine Hoşgeldiniz!</p>
<button onclick="document.getElementById('test').style.fontSize='40px'">Tıkla!</button>

<p id="test">JavaScript Derslerine Hoşgeldiniz!</p>

<button onclick="document.getElementById('test').style.fontSize='40px'">Tıkla!</button>

Uygulama Demosu

⇒ JavaScript ile Html öğelerine Css uygulama konusunda bir örnek daha vermek istiyorum.

Örneğin bir div etiketi ve 2 buton tanımlayalım. Butonlardan Gizle yazılı butona tıkladığımızda div etiketini gizleyelim. Butonlardan Göster yazılı butona tıkladığımızda div etiketini tekrar gösterelim.

Html ve JavaScript Kodları

<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div id="box"></div>
<button onclick="document.getElementById('box').style.visibility = 'hidden'">Gizle</button>
<button onclick="document.getElementById('box').style.visibility = 'visible'">Göster</button>

<style>

div{

width: 200px;

height: 200px;

background-color: red;

}

</style>

<button onclick="document.getElementById('box').style.visibility = 'hidden'">Gizle</button>

<button onclick="document.getElementById('box').style.visibility = 'visible'">Göster</button>

Uygulama Demosu

JavaScript ile neler yapılabilir sorusuna çok basit birkaç örnek ile cevap vermeye çalıştım. Tabi dediğim gibi anlaşılması adına basit örnekler tercih ettim. Bunların dışında JavaScript ile sliderlar, açılıp kapanan pencereler, mesaj kutuları vb.. yüzlerce örneği yapabiliyoruz.

JavaScript Kodlarını Hangi Editörde Yazmalıyım?

JavaScript kodlarını istediğiniz herhangi bir editörde de yazabilirsiniz. Örneğin Notepad++, Atom, Sublime Text, Brackets vb.. Ben Visual Studio Code editörünü kullanıyorum ve size de Visual Studio Code kullanmanızı tavsiye ederim.

Visual Studio Code kullanmak isteyenler için JavaScript kodlarını yazarken işlerimizi kolaylaştıran küçük bir eklentiyi göstermek istiyorum.

Visual Studio Code editörünü indirmek için sitesini ziyaret edebilirsiniz.

İndirip kurulum işlemini tamamladıktan sonra aşağıdaki resimde olduğu gibi soldaki Extensions (Eklentiler) ikonuna tıklıyoruz.

Daha sonra arama kutusuna JavaScript (ES6) code snippets yazıp aratıyoruz.

Son olarak JavaScript (ES6) code snippets eklentisini Install butonuna tıklayarak yüklüyoruz.

Bu eklenti sayesinde JavaScript kodlarını daha hızlı ve kolay bir şekilde yazabiliyoruz.

Umarım “JavaScript Nedir” yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

BOOTSTRAP NEDİR? BOOTSTRAP NASIL KULLANILIR?

Css Nedir? Ne İşe Yarar? Css Kullanımı

Yeni bir yazımda görüşmek üzere.

JavaScript Nedir? JavaScript Ne İşe Yarar?