Temel web tasarım dersleri yazı dizimizin bu bölümünde yine web tasarımında olmazsa olmaz olan bir konuya değineceğiz. Konumuz, JavaScript. Yani bir web sayfasına hareket katan, sayfaları eğlenceli hale getiren, bir işlem yaparken ekranın tam ortasına emin misin hemşerim, son kararın mı, onaylıyor musun diye minik dialog pencereleri açan, yanıp sönen efektler veren script dili.
Web tasarımına merak sarıp öğrenmeye çalışanlar için temelden başladığımız bu yazı dizimizin önceki yazılarında HTML Nedir ve CSS Nedir? konularına değinmiştik. Bu yazımızda ise web tasarımı ile ilgilenirken fazlaca kullanacağımız, severek ve zevkle kullanacağımız Javascript dilinden bahsedeceğiz.
Javascript nedir?, Javascript nerelerde kullanılır?, Javascript ne işe yarar?, Javascript ile neler yapılabilir? tüm soruların cevabını yazının içinde bulabilirsiniz.
JavaScript Nedir?
JavaScript, yaygın olarak web tarayıcılarında kullanılan dinamik bir script dilidir. Etkileşimli ve dinamik web sayfaları oluşturmaya imkan sağlar. Yazım şekli ve ismi gereği Javaya benzemesinden dolayı sürekli karıştırılıyor olsalar da aslında JavaScript ve Java birbirinden farklı teknolojilerdir. Java nedir konusuna ilerleyen zamanlarda açıklık getireceğim.
JavaScript günümüzde gelişmiş olan tüm web sitelerinin neredeyse tamamında kullanılmaktadır. JavaScript web sitelerinin dinamik olmasını ve işlevselliğinin artmasını sağlar. Kullanıcı taraflı ve sunucu taraflı çalışabilir. Web sitelerinin kullanıcılar ile iletişim kurmasına yardımcı olur.
Örnek vermek gerekirse, bir web sitesinde form doldururken eksik veya hatalı giriş yaptığımızda uyarı veren veya bir girişe tepki olarak ekranda bulunan bir bilgiyi değiştiren JavaScript’tir. Tabiki bu verdiğim örnekler JavaScript’in yapabildiklerinin binde biridir.
JavaScript dosyalarının uzantısı .js şeklindedir.
JavaScript ile ilgili detaylı bilgi almak için buraya tıklayın.
JavaScript Tarihçesi
Javascript’in yaratıcısı Netscape çalışanı Brendan Eich‘tir. Javascript dili 1997 yılında kullanılmaya başlanmıştır. İlk çıktığı zamanlarda Javascript nedir sorusu oldukça merak edilen bir soruydu. Sebebi ise o günkü tarayıcılarınbir çoğunun henüz javascripti yorumlayamıyor olmasıydı. Ancak JavaScript dili o yıldan bugün geliştirilmeye devam etti. Brendan Eich aynı zamanda Mozilla Vakfı‘nı da kurdu ve bu vakıf JavaScript dilini geliştirmeye halen devam etmektedir.
JavaScript ile Neler Yapılabilir?
JavaScript ile HTML’in kaynak kodlarına müdahale edilebilir, sayfa post işlemi (form gönderme) yapılabilir, kullanıcıya mesaj verilebilir vb.. Kısacası JavaScript ile bir web sayfası dinamik hale getirilebilir.
JavaScript’i çalışan bir örnek ile ifade edelim. Aşağıdaki örneklerde göreceğiniz gibi “Test Et” butonuna tıkladığınız zaman WPLİMON ile Javascript Öğreniyorum! yazısının rengi değişecek, “Mesaj Göster” butonuna tıkladığınız zaman ise ekranda bir mesaj göreceksiniz. İşte bu ve bunun gibi olayları gerçekleştiren JavaScript dilidir.
Javascript Örnek:
alert("Batuhan Özyavru ile Javascript öğreniyorum.");
Örnekten de anlaşılacağı gibi JavaScript az önce de bahsettiğim gibi web sayfalarını dinamik hale getirmek için kullanılan bir betik dildir.
HTML İçinde JavaScript Dosyası Çağırma
Web sayfamıza JavaScript kodları eklemek de tıpkı CSS eklemek gibidir. Bir önceki yazım olan CSS Nedir? başlıklı makalemde bahsettiğim gibi HTML içinde CSS dosyası çağırma ile aynı mantıkta JavaScript dosyalarımızı da çağırabilir veya direkt olarak HTML içine JavaScript kodu yazabiliriz.
<script type="text/javascript" src="JAVASCRIPT DOSYASININ BULUNDUĞU DİZİN"></script>
Yukarıdaki yöntem .js uzantılı dosyamızı projemize dahil eder ve dosya içindeki JavaScript kodlarını çalıştırmayı sağlar. Bir diğer yöntem ise HTML dosyasının içine direkt olarak JavaScript kodları yazmaktır. Buda şu şekilde olur:
<script type="text/javascript"> ... JAVASCRIPT KODLARI ... </script>
JavaScript Editörleri
JavaScript oluşturmak ve düzenlemek için bir çok editör mevcuttur. Bunlardan en sıkça kullanılan ve ücretsiz olanları ise Notepad++ ve Sublime Text editörleridir.
Notepad ++ :
+ Notepad++ indirmek için buraya tıklayın
Sublime Text :
+ Sublime Text indirmek için buraya tıklayın
