Web Sayfasına JavaScript Ekleme

Web sayfalarına JavaScript eklemenin çeşitli yöntemlerini keşfedin. Satır içi, dahili ve harici komut dosyalarıyla JavaScript kodlarını nasıl entegre edeceğinizi öğrenin. JavaScript'i kullanarak sayfanızı daha etkileşimli ve dinamik hale getirin.

JavaScript Ekim 11, 2023 0 531 Okuma Listesine Ekle

Web Sayfasına JavaScript Ekleme

JavaScript bir web sayfasına üç farklı şekilde eklenebilir:

Satır İçi Komut Dosyası - (Inline Script)
Dahili Komut Dosyası - (Internal Script)
Harici Komut Dosyası - (External Script)
Çoklu Harici Komut Dosyaları - (Multiple External Script)

Aşağıdaki bölümlerde web sayfanıza JavaScript kodu eklemenin farklı yolları gösterilmektedir.

Satır İçi Komut Dosyası - Inline Script

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Onur KUL:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('onurkul.com.tr adresine hoş geldiniz!')">Bana Tıkla</button>
  </body>
</html>

alert() yerleşik fonksiyonunu kullanarak bir açılır uyarı mesajı oluşturabiliriz.

Dahili Komut Dosyası - Internal Script

Dahili komut dosyası head veya body kısmına yazılabilir, ancak HTML belgesinin body kısmına yerleştirilmesi tercih edilir. İlk olarak sayfanın head kısmına yazalım.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Onur KUL:Internal Script</title>
    <script>
      console.log('onurkul.com.tr adresine hoş geldiniz!')
    </script>
  </head>
  <body></body>
</html>

Çoğu zaman dahili bir komut dosyasını bu şekilde yazarız. JavaScript kodunu body bölümüne yazmak en çok tercih edilen seçenektir. console.log() çıktısını görmek için tarayıcı konsolunu açın.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Onur KUL:Internal Script</title>
  </head>
  <body>
    <button onclick="alert('onurkul.com.tr adresine hoş geldiniz!');">Bana Tıkla</button>
    <script>
      console.log('www.onurkul.com.tr')
    </script>
  </body>
</html>

console.log() çıktısını görmek için tarayıcı konsolunu açın.

Harici Komut Dosyası - External Script

Dahili komut dosyasına benzer şekilde, harici komut dosyası bağlantısı başlıkta veya gövdede olabilir, ancak gövdeye yerleştirilmesi tercih edilir. Öncelikle .js uzantılı harici bir JavaScript dosyası oluşturmalıyız. .js uzantısı ile biten tüm dosyalar JavaScript dosyalarıdır. Proje dizininizin içinde introduction.js adında bir dosya oluşturun ve aşağıdaki kodu yazarak bu .js dosyasını body kısmının en altına ekleyin.

console.log('www.onurkul.com.tr adresine hoş geldiniz!')

Head Kısmında Harici Komut Dosyası

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Onur KUL:External script</title>
    <script src="introduction.js"></script>
  </head>
  <body></body>
</html>

Body Kısmında Harici Komut Dosyası

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Onur KUL:External script</title>
  </head>
  <body>
    <!-- JavaScript dış bağlantısı başlıkta veya gövdede olabilir --> 
    <!-- Gövdenin kapanış etiketinden önce harici JavaScript komut dosyasını koymak için önerilen yerdir -->
    <script src="introduction.js"></script>
  </body>
</html>

console.log() çıktısını görmek için tarayıcı konsolunu açın.

Çoklu Harici Komut Dosyaları - Multiple External Scripts

Birden fazla harici JavaScript dosyasını da bir web sayfasına bağlayabiliriz. Bir adet helloworld.js dosyası oluşturun ve aşağıdaki kodu yazın.

console.log('Merhaba Dünya!')

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Çoklu Harici Komut Dosyaları</title>
  </head>
  <body>
    <script src="./helloworld.js"></script>
    <script src="./introduction.js"></script>
  </body>
</html>