7 Şubat 2017 Salı

Javascript Yerleşimi: Javascripti nereye yazmalıyız?

Yazar: odan 7.2.17 , , , , Yorum Bırak
Javascript Yerleşimi: Javascripti nereye yazmalıyız?

Bir HTML belgesinin herhangi bir yerinde JavaScript kodunu kullanabiliriz. Bununla birlikte JavaScript'i bir HTML dosyasına eklemenin bazı yolları şu şekildedir:

<Head> ... </ head> bölümü içerisinde.

<Body> ... </ body> bölümü içerisinde.

Harici bir dosyada script dosyası kullanıp ardından <head> ... </ head> bölümüne referans ekleyerek kullanma.

Aşağıdaki bölümde, JavaScript'i bir HTML dosyasına farklı şekillerde nasıl yerleştirebileceğimizi göreceğiz.

<head>...</head> İçerisinde Javascript Kullanma

Bir kullanıcı, bir buttona tıkladığında olduğu gibi, bir aksiyonda çalıştırılacak bir script dosyasının olmasını isterseniz, o komut dizisini head tagleri içerisinde aşağıdaki gibi yerleştirebiliriz:

<html>

   <head>
   
      <script type="text/javascript">
         <!--
            function merhabaDe() {
               alert("Merhaba Dünya")
            }
         //-->
      </script>
      
   </head>
   
   <body>
      <input type="button" onclick="sayHello()" value="Merhaba De" />
   </body>
   
</html>
Burada görüldüğü üzere kullanıcı Merhaba De düğmesine bastığı an click eventinde tanımlı olan merhabaDe metodu çalışır ve ekrana Merhaba Dünya yazılı bir uyarı penceresi açar.

<body>...</body> İçerisinde Javascript Kullanma

Sayfa yüklendiğinde bir içerik oluşturacak bir Javascript komutu çalıştırmak istiyorsanız, bunu body tagleri içerisinde yapabilirsiniz. Aşağıdaki koda bakacak olursak:

<html>

   <head>
   </head>
   
   <body>
   
      <script type="text/javascript">
         <!--
            document.write("Merhaba Dünya")
         //-->
      </script>
      
      <p>Bu sayfanın body kısmıdır </p>
      
   </body>
</html>
Bu kod aşağıdaki gibi bir çıktı üretir:

Merhaba Dünya
Bu sayfanın body kısmıdır

Hem <body>...</body> İçerisinde  Hem de <head>...</head> İçerisinde Javascript Kullanma

Javascript kodlarını hem head hem de body tagleri arasına koyarak beraber kullanabilirsiniz:

<html>
   <head>
      <script type="text/javascript">
         <!--
            function merhabaDe() {
               alert("Merhaba Dünya")
            }
         //-->
      </script>
   </head>
   
   <body>
      <script type="text/javascript">
         <!--
            document.write("Merhaba Dünya")
         //-->
      </script>
      
      <input type="button" onclick="merhabaDe()" value="Merhaba De" />
      
   </body>
</html>
Bu kod aşağıdaki gibi bir çıktı oluşturacaktır:

Merhaba Dünya
Ve de buraya Merhaba De diye bir button gelecektir.

Harici Dosya Üzerinden Referans ile Javascript Kullanma

JavaScript ile daha kapsamlı çalışmaya başlarken, aynı JavaScript kodunu bir sitenin birden fazla sayfasında tekrar kullandığınız durumların bulunması muhtemeldir.

Birden çok HTML dosyasında aynı kodu sürekli tekrar ederek kullanmakla sınırlı değiliz. Script tagi, JavaScript'i harici bir dosyaya kaydetmenizi ve daha sonra HTML dosyalarınıza eklemenizi sağlayacak bir mekanizma sağlar.

HTML kodunuza script tagi ve src özniteliğini kullanarak harici bir JavaScript dosyasını nasıl ekleyebileceğinizi göstermek için öreneğe bakalım:

<html>

   <head>
      <script type="text/javascript" src="dosyamiz.js" ></script>
   </head>
   
   <body>
      .......
   </body>
</html>

Burda gördüğümüz üzere dosyamiz.js adlı javascript dosyamızı referans olarak head tagleri arasına yazdık ve bu dosya içerisindeki metodları vs. bu html dosyamız içerisinden de kullanabiliriz.

0 yorum:

Yorum Gönder