Okuyacağınız bu konu Javascript’in özü hakkındadır, platform ile bağlantılı değildir. İleride Node.JS ve diğer platformlarda aynı şekilde kullanabilirsiniz.
Fakat kodlarımızın çalıştırılabilmesi için en azından bir ortam gerekli ve bu kitap tarayıcı üzerinden açılarak size bu ortamı yaratmış oluyor. Tarayıcı özel komutları ( alert) daha az tutulacak. Böylece eğer diğer platformlara yönelmek istiyorsanız bu komutlarla zaman geçirmenize gerek kalmayacak. Diğer yandan sonraki bölümde tarayıcı özellikleri daha derinlemesine incelenecektir.
Öyleyse web sayfasına nasıl JavaScript dökümanı ekleyeceğinizi öğreneceksiniz. Sunucu taraflı çevrelerde JavaScript kodunuzu "node my.js" komutuyla çalıştırabilirsiniz.
Script etiketi
Javascript programları html içerisine <script> etiketi ile eklenebilir.
Örneğin:
<!DOCTYPE HTML>
<html>
<body>
<p>Javascript Kodundan önce...</p>
<script>
alert( 'Hello, world!' );
</script>
<p>...Javascript kodundan sonra.</p>
</body>
</html>Sağ üst taraftaki “Play” (Çalıştır) butonuna basarak örneği çalıştırabilirsiniz.
<script> etiketi içerisine yazdığınız JavaScript komutu tarayıcı o koda geldiğinde doğrudan okunur.
Modern yazım
Bugünlerde <script> etiketi genelde özellikler eklenmeden yazılmakta. Fakat eski kodlara baktığınızda aşağıdaki gibi kodları görmek mümkündür:
typeözelliği:<script type=…>- Eski HTML4 standardı script etiketi içerisinde tip getirmeyi zorunlu kılıyordu. Genelde bu
type="text/javascript"idi. Günümüzde ise HTML standartlarıtypeözelliğini varsayılan olarak kabul edebiliyor. language(dil) özelliği:<script language=…>- Bu özellik yazılan script’in dilini göstermek amacıyla kullanılır. Fakat bu da artık önemini yitirmiştir. Javascript varsayılan dil olduğundan dolayı söylemeye gerek yoktur.
JavaScript kodundan önce ve sonra yazılan yorumlar. Çok eski JavaScript kitaplarına bakarsanız aşağıdaki gibi bir kod bloğuyla karşılaşmanız muhtemeldir:
```html no-beautify
<script type="text/javascript"><!--
...
//--></script>
```
Bu yorumların amacı <script> etiketini anlamayan tarayıcılarda JavaScript kodunun ekrana yazılmasını engellemektir. Fakat artık neredeyse tüm tarayıcılar <script> etiketini anladıklarından bu konuda da bir sıkıntı bulunmamaktadır. Eğer böyle bir kod bloğu görürseniz kod çok eski diyebilirsiniz.
Dışardan yüklenen Javascript kod dosyaları
Eğer çok fazla JavaScript kodunuz varsa bunları ayrı bir sayfaya koyabilirsiniz.
Sonrasında bu dosyayı aşağıdaki gibi yol göstererek sayfanızda çalıştırılmasını sağlayabilirsiniz.
<script src="/kod/yolu/ana.js"></script>Buradaki /kod/yolu/ana.js site ana dizininden itibaren kesin (absolute) yol belirtir.
Tabi göreceli (relative) yol belirtmek de mümkündür. Örneğin src="script.js" HTML dosyasının kayıt edildiği klasördeki "script.js"'yi al anlamına gelir.
Tam URL vermek de mümkündür. Örneğin:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>Birkaç kod dosyası eklemek isterseniz aşağıdaki gibi yazabilirsiniz.
<script src="/js/script1.js"></script>
<script src="/js/script2.js"></script>
…Kural olarak en basit JavaScript kodları doğrudan HTML içerisine yazılır. Daha karmaşık olanlar farklı dosyalarda taşınır.
Ayrı dosyalarda taşınmasının bir diğer güzel yanı tarayıcıların bu dosyaları indirip ön belleğe almasıdır cache.
Bu olaydan sonra eğer bu kod dosyaları değişmediyse daha sonraki sayfa gösterimlerinde o dosyaları tekrar indirmeyecektir. Yani kod dosyaları sadece bir defa indirilecektir. Bu da web sayfasının veri trafiğinin daha az olmasını ve sayfanın daha hızlı gösterilmesini sağlar.
Aşağıdaki kod bloğu çalışmayacaktır:
<script src="file.js">
alert(1); // İçerik görmezden gelinecektir çünkü `src` tagı kullanılmıştır.
</script>script tagını kullanırken dışarıdan mı dosya ekleyeceksiniz ( <script src="…"> ) yoksa dosyayı içeride mi yazacaksınız bunun kararını vermemiz gerekmektedir.
Yukarıdaki örnek iyi <script> etiketi içerisinde şu şekilde çalıştırılır.
<script src="file.js"></script>
<script>
alert(1);
</script>Özet
<script>etiketi kullanarak sayfaya Javascript kodu entegre edebilirsiniz.typevelanguageözellikleri artık gerekli değildir.- Dışarıdan bir kod eklemek için
srcözelliğini kullanabilirsiniz. Ör :<script src="path/to/script.js"></script>
Tarayıcı ve web sayfası etkileşimi üzerine JavaScript tarafında öğrenilecek çok şey vardır. Fakat unutmayın ki bu bölüm JavaScript diline adanmıştır. Tarayıcıyı sadece JavaScript çalıştırabilmesinden dolayı kullanacaksınız. Böylece anında kodu çalıştırabilecek ve bir yandan da kitabı okumaya devam edebileceksiniz.
Yorumlar
<code>kullanınız, birkaç satır eklemek için ise<pre>kullanın. Eğer 10 satırdan fazla kod ekleyecekseniz plnkr kullanabilirsiniz)