HTML – SCRIPT ETİKETİ (TAGI)

Script Etiketi (Tagı); javascript kodlarımızı bu etiket içine yazmamız ve harici javascript dosyamızı html sayfamıza dâhil etmemiz için kullandığımız etiket türüdür.

Script Etiketini (Tagını) kullanabilmemiz için javascript kodlama dilini bilmemiz gerekiyor.

Javascript ile form doğrulama ve kontrol işlemleri, veri kayıt işlemleri, veri gönderip alma işlemleri ve anlık sayfa içi işlemler gibi burada saymadığımız birçok işlemleri yapabiliriz. 

Script etiketleri (tagarı) genellikle <head> </head> etiketleri içerisinde kullanılır. Fakat zorunlu kaldığımız durumlarda script etiketini <body> </body> etiketleri içerisinde de kullanabiliriz. 

Script etiketinin iki türlü kullanım şekli vardır. Bunlar; dâhili kullanım türü veharici kullanım türü şeklindedir. İlk örneğimize dâhili kullanım türüyle başlayalım.

Script etiketin yazılışı; <script> işareti ile başlar </script> işareti ile biter.

Örneğimizi javascript’in en basit kodlarından “alert” komutu yani ziyaretçilerimize uyarı mesajı vermemizi sağlayacak kod ile verebiliriz.

Script etiketleri arasına “alert” komutu yazdıktan sonra parantezleri ( ) oluşturuyoruz. Parantez içine, ziyaretçilere vermek istediğimiz mesajı çift tırnak "…" işaretleri arasına yazıyoruz.

KOD ÖRNEĞİ;

<html> 

       <head> 

             <script> 

                  alert ("Web Sitemize Hoş Geldiniz!")

                </script>

       </head>

       <body> 

       </body> 

</html>

GÖRÜTÜ;

Şimdi diğer kullanım türü dediğimiz, harici kullanım türünü inceleyelim. Bu örneği verebilmek için ilk önce javascript dosyası oluşturmalıyız.

Dosyamızı oluşturduktan sonra html sayfamıza geri dönüp, javascript kodları ile çalışmalar yapacağımız bir html nesnesi oluşturalım.

Üzerinde işlem yapacağımız bir html etiketini yazalım. Meselâ “<div> </div>” etiketiyle örneklendirmelerimizi yapabiliriz. Div etiketini oluşturduktan sonra içeriğini boş bırakıyoruz.

Script kodlarıyla bu oluşturduğumuz etiket üzerinden çalışmalar yapabilmemiz için “div” etiketine (tagına) atayabileceğimiz özelliklerden “ıd” özelliğini ve ıd özelliğine de “test” adında bir değer verebiliriz.

KOD ÖRNEĞİ;

<html> 

       <head> 

       </head>

       <body> 

                 <div id="test"> </div>

          </body> 

</html>

Şimdi javascript dosyamızı açalım ve html sayfamızdaki oluşturduğumuz <div> </div> etiketine bir veri atayalım. 

Bunun için şöyle script kodu uygulayabiliriz; “document.getElementById” yazdıktan sonra parantez içindeki tırnaklar arasına html sayfasındaki div etiketine atadığımız değeri yani test adındaki ıd’ yi yazıyoruz.

Buradaki mantık; elementin içerisinde bulunan ıd’ ye eriş ve bu doküman öğesini bul manasını taşımaktadır. Sonra “.” innerHTML yazıp karşısına atamak istediğimiz değeri yazıyoruz.

KOD ÖRNEĞİ;

                                                  JS Dosyası  (ornek.js)

 

document.getElementById("test").innerHTML = "Merhaba Ben Div İçinde Bir Nesneyim";
 

Şimdi javascript dosyamızı kaydedip asıl yapmamız gereken işlemimize geçiyoruz.

Javascript dosyamızda yaptığımız işlemlerin çalışması için harici ornek.js dosyamızı <script> </script> etiketi ile html sayfamıza dâhil etmemiz gerekiyor.

Bunun için tekrar <script> </script> etiketlerini açıyoruz ve dış dosyaların yolunu belirlemek için kullandığımız “src” alt özelliğini ve dosyamızın dizin yolunu yazıyoruz.

Burada faydalı bir hatırlatma yapmak istiyorum; Harici bir dosyayı html sayfamıza dâhil etmemiz gerektiğinde script etiketini <body> "</body>" kapanış etiketinden hemen öncesinde yazmayı unutmayın. Çünkü web standartları için en doğru kullanış şekli böyledir. Eğer script etiketi (tagı) sayfada oluşturulan etiketlerin üstünde bulunursa web kodlamaların okunması ve taranması yukarıdan aşağıya doğru yapıldığından dolayı nesnelere veya etiketlere atanan değerleri okuyamayacaktır ve tarayıcıya aktaramayacaktır.

KOD ÖRNEĞİ;

<html> 

       <head> 
       </head>

       <body> 

                 <div id="test"> </div>
                 <script 
type="text/javascriptsrc="ornek.js"></script>
       </body> 

</html>

GÖRÜTÜ;

Gördüğümüz gibi <div> </div> etiketin içine hiçbir veri atamadığımız hâlde javascript dosyasında script kodlarıyla belirlediğimiz veriyi yansıtmış olduk.

BU ETİKETE ATANAN ALT ÖZELLİKLER;

Özellik Değer

 Tanım

charset charset Bağlı belgenin karakter kodlamasını tanımlar.
async async Zaman Komutunda uyumsuzluğu belirtir.
type text/javascript
application/ecmascript
application/javascript
text/vbscript
Verinin MIME Türünü belirler.
src URL Dokümanımıza dış veriyi çağıracağımız zaman, o dış dosyanın bağlantı yolunu belirlediğimiz yerdir. Eklemek istediğimiz dizin yolunu buraya yazarız.
defer defer Script etiketinin içerdiği betiğin çalıştırılmasını erteleyip sayfa tam yüklendikten sonra çalıştırılmasını sağlar.

Tarayıcı Desteği;

Chrome Firefox IE Opera Safari
EVET EVET EVET EVET EVET