Merhabalar,
Uzun süredir düşündüğüm ders konusu için JavaScripti seçtim. Belirli aralıklarla başlangıç seviyesindeki arkadaşlar için hem yazılı hem de videolu bir şekilde sizlere sıfırdan JavaScript dersleri anlatmaya çalışacağım.
Temel seviyede JavaScript bilgisine sahip olacağınız bu eğitime gelin hızlıca başlayalım;
Nelere İhtiyacımız Var ?
Öncelikle JavaScripti nasıl çalıştıracağız diğer programlama dilleri gibi ayrı port veya ayrı programlara mı ihtiyacımız var ? Cevap kısaca: Hayır!
Temel seviyede JavaScript kullanmanız için ihtiyacınız olan 2 şey;
- Kod Editörü (VS Code, Sublime Text, Atom vb.)
- İnternet Tarayıcısı
Evet gördüğünüz gibi bu kadar basit. İleri seviyeler, JS frameworkleri için demiyorum temel seviye JavaScript için başlangıçta ihtiyacımız olan 2 şey yukarıdakiler olmaktadır.
Peki Nasıl Çalıştıracağız ?
Bilmeyenler için JavaScript dosya uzantısı (‘.js’) olmakta. Peki bu dosyayı direkt tarayıcıda çalıştırabiliyor muyuz ?
Hayır. Tarayıcılar .js dosyalarını direkt olarak çalıştırmazlar. Bu yüzden eğitim boyunca .html içerisine gömüp kullanacağız JavaScripti.
Hemen HTML içine gömmenin bir kaç örnek yoluna bakalım;
Satır İçi Kullanım
<button onclick="alert('Sıfırdan JavaScript Derslerine Hoş Geldiniz!');">
Bana Tıkla
</button>HTML de bulunan onclick attribute yani niteliği ile birlikte Click (Tıklama) eventini yakaladık. İçine alert fonksiyonunu yazarak küçük bir JavaScript kodunu yazmış olduk.
Alert fonksiyonu burada sadece tarayıcının uyarı vermesini sağlayacak bize. Bu tarz basit işlemler için HTML de JavaScripti tetikleyen bazı attribute bulunmaktadır.
Dahili Kullanım
<html lang="tr">
<head>
<title>Dahili Kullanım</title>
<script>
alert('Sıfırdan JavaScript Derslerine Hoş Geldiniz!');
</script>
</head>
<body>
<script>
console.log('Sıfırdan JavaScript Derslerine Hoş Geldiniz!');
</script>
</body>
</html>Bu şekilde <script> | </script> tagları arasına JavaScript kodumuzu direkt olarak yazabiliyoruz. Script etiketleri arasında JavaScript kodumuz çalışacaktır.
Script etiketi en çok <head> etiketi arasına konulmaktadır. Dilerseniz </body> etiketinin bitişinin hemen üstüne de konumlandırabilirsiniz.
Harici Kullanım
<html lang="tr">
<head>
<title>Dahili Kullanım</title>
<script src="haricidosya.js"></script>
</head>
<body>
<script src="haricidosya.js"></script>
</body>
</html>Harici kullanımda ise <script> etiketinin src niteliğini kullanarak uzantısı .js olan JavaScript dosyamızı çağırabiliriz. Bu örnekte .html dosyası ile .js dosyası aynı dizinde olduğu için dosya yolunu belirtmedim.
Dosya yolunu dikkatli verdiğinizden emin olunuz. Bi alt klasöre gitmek için “../haricidosya.js“, bi üst klasöre gitmek için ise “klasoradi/haricidosya.js” olarak belirtmelisiniz.
Oluşturduğumuz bu .js uzantılı dosyada ise JavaScript kodumuzu yazıyoruz. .html dosyasında bağladığımız için sorunsuzca çalışacaktır.
Özet
3 farklı yöntem ile JavaScript kodlarımızı HTML içerisinde çalıştırmayı öğrendik. Bundan sonraki aşamalarda ise JavaScriptin temellerine ve başlangıç için gerekli bilgilere göz atacağız.
Eğer bu adımları sorunsuz bir şekilde atlattıysanız diğer derse geçebilirsiniz 🙂
Eğer anlamadığınız yer olursa öncelikle yukarıdaki YouTube videomu izlemenizi öneririm. Youtube üzerinden veya buradaki yorum alanından anlamadığınız kısımları bana sorabilirsiniz.
Umarım anlaşılır olmuştur.
Mutlu Kodlamalar 🙂