Merhaba, Bu yazı ile birlikte, tüm web geliştirme süreçlerimizde ihtiyaç duyacağımız bir başka dil olan JavaScript’e Giriş yapıyoruz.

JavaScript Nedir?

JavaScript, yaygın olarak web tarayıcılarında kullanılmakta olan dinamik bir web programlama dilidir. JavaScript sayesinde web tarayıcının kullanıcı ile etkileşimlerde bulunması, web tarayıcının kontrol edilmesi,  web sunucu ile iletişime geçilmesi ve web sayfası içeriğinin değiştirilmesi gibi fonksiyonlar sağlanır.

JavaScript ile Java aynı diller değildir. Fakat bir çok benzerliği bulunmaktadır. Java mantığına daha önceden aşina olanlar, JavaScript öğrenmekte çok zorluk çekmeyeceklerdir.

JavaScript Kodları Nereye Yazılır?

JavaScript kodlarımızı HTML sayfalarımız içerisinde farklı şekillerde ve konumlarda kullanabiliriz.

1) Sayfa içerisinde JavaScript

HTML sayfalarımızda Javascript kodları kullanmamız mümkün. Bunun için sayfamızın herhangi bir bölümüne* <script> </script> HTML etiketleri arasına JavaScript kodlarımızı yerleştirmemiz yeterlidir.

<script type=”text/javascript”> şeklinde bir kullanım da görebilirsiniz ancak buradaki type öğesini ve text/javascript değerini kullanmanıza gerek yoktur çünkü HTML’in varsayılan script dili JavaScripttir.

JavaScript HTML Sayfasında Nereye Yazılmalıdır?

JavaScript kodlarımızı sayfamız içerisinde herhangi bir yere yazabiliriz. <head> </head> etiketleri içerisinde JavaScript yazmamız durumunda, sayfa yukarıdan aşağıya doğru yüklendiği için sayfamızın yüklenme hızını düşürecektir. Bu sebeple aksi bir gereklilik olmadıkça JavaScript sayfada en son yüklenmelidir. Bu sebeple genellikle sayfa içeriğimizi bitirdiğimizde </body> etiketinin hemen üstüne <script> kodlarımızı yazmamız en sağlıklı kullanım şekli olacaktır.

2) HTML Event Olarak JavaScript

JavaScript kodumuzu HTML event özelliklerini kullanarak da yazabiliriz. Örnek olarak bir öğemize vereceğimiz onclick özelliği ile, HTML öğesinin üzerine tıklandığında yapılacak JavaScript eylemini bildirebiliriz.

<p onclick='alert("İlk JavaScript kodum.");'>Tıkla Çalıştır</p>

HTML Event listesini paylaşacağız.

3) JS Dosyasını Çekmek

Daha önceki yazılarımızda CSS dosyasını sayfaya çekmeyi görmüştük. Benzeri bir kullanım ile harici olarak oluşturduğumuz bir JavaScript dosyasını da sayfamıza çekerek JavaScript fonksiyonlarımızı sayfamıza taşımamız mümkün. Bu hem sayfamızda kod kalabalığı olmasını engelleyecektir hem de aynı JavaScript dosyasını bir çok sayfada kullanabilmemize, bir değişiklik yapmak istediğimizde de tek bir dosya üzerinden değişikliğimizi yapıp tüm sayfalara etki edebilmesini sağlamaktadır. Bunun için kullanmamız gereken HTML etiketimiz yine <script> dir. Fakat farklı olarak daha önce sayfamıza görsel çekerken, görselin bulunduğu konumu tarif etmek için kullandığımız src özelliğini kullanmamız gerekir.

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

JavaScript ile ilgili yazılarımı takip ederken istediğiniz kullanım şeklini tercih edebilirsiniz. Ben çok uzun scriptler dışında sayfa içi kullanımı ile örneklemeler yapacağım.

İlk JavaScript Kodum

Yeni bir HTML sayfası oluşturuyoruz. Ve </body> kapatma taginin en üstüne ilk javascript kodumuzu ekliyoruz.

<!DOCTYPE html>
<html>
<head>
<title>İlk JavaScript Sayfam</title>

</head>
<body>


<script>
 alert("İlk JavaScript kodum.");
</script>
</body>
</html>

Burada eklediğimiz JavaScript kodu alert("İlk JavaScript kodum.");sayfada bir uyarı mesajı gösterir. İçerisindeki mesajı değiştirerek deneyebilirsiniz.