JavaScript Öğrenme Serisi ne Web Sayfasına JavaScript Ekleme ile devam ediyoruz. JavaScript bir web sayfasına dört farklı şekilde eklenebilir:

  • Satır içi komut dosyası (Inline script)
  • Dahili komut dosyası (Internal script)
  • Harici komut dosyası (External script)
  • Çoklu komut dosyası(Multiple External script)

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

Satır içi komut dosyası (Inline script)

Masaüstünüzde bir klasör oluşturun ve klasörün içinde bir inlineScript.html dosyası oluşturun.Ardından aşağıdaki kodu yapıştırın ve Chrome‘da açın.

<!--inlineScript.html-->

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptOgrenmeSerisi:Inline Script</title>
</head>

<body>
    <button onclick="alert('JavaScriptOgrenmeSerisine Hoşgeldiniz!')">Click Me</button>
</body>

</html>

Şimdi, ilk satır içi komut (Inline script) dosyanızı yazdınız. Yerleşik alert () işlevini kullanarak bir açılır uyarı mesajı oluşturabiliriz.

Dahili komut dosyası (Internal script)

Dahili komut dosyası (Internal script) head veya body bölümüne yazılabilir, ancak HTML belgesinin body bölümüne yerleştirilmesi tercih edilir. Önce sayfanın head bölümüde yazalım. internalScriptHead.html

<!--internalScriptHead.html-->

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptOgrenmeSerisi:Internal Script</title>
    <script>
        console.log("JavaScriptOgrenmeSerisine Hoşgeldiniz!")
    </script>
</head>

<body>
</body>

</html>

Dahili komut dosyası (Internal script)‘sında en yaygın kullanım body bölümüne JavaScript kodunu yazmakdır. internalScriptBody.html

<!--internalScriptBody.html-->

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptOgrenmeSerisi:Internal Script</title>
</head>

<body>
    <button onclick="alert('JavaScriptOgrenmeSerisine Hoşgeldiniz!');">Click Me</button>
    <script>
        console.log("JavaScriptOgrenmeSerisine Hoşgeldiniz!");
    </script>
</body>

</html>


Console.log () işlevinden çıktıyı görmek için tarayıcı konsolunu açmayı unutmayın.

JavaScript Internal Script
Web Sayfasına JavaScript EklemeJavaScript Internal Script
Harici komut dosyası (External script)

Dahili komut dosyası (Internal script) yapısına benzer bir yapıya sahip.Head ve Body de kullanılabilir.Lakin genellikle Body bölümünde kullanılır.İlk olarak adından anlaşılacağı üzere .js uzantılı bir harici JavaScript dosyası oluşturmamız gerekiyor.Tüm JavaScript dosyaları .js ile biter.Proje dizininizin içinde bir externalScriptIntroduction.js dosyası oluşturun ve aşağıdaki kodu yazın ve bu .js dosyasını body bölümünün alt kısmına bağlayın.

/*externalScriptIntroduction.js */

console.log('JavaScriptOgrenmeSerisine Hoşgeldiniz!')

Head bölümündeki Harici komut dosyası (External script)

<!--externalScriptIntroductionHead.html-->

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptOgrenmeSerisi:External script</title>
    <script src="externalScriptIntroduction.js"></script>
</head>

<body>
</body>

</html>


Body bölümündeki Harici komut dosyası (External script)

<!--externalScriptIntroductionBody.html-->

<!DOCTYPE html>
<html>

<head>
    <title>JavaScriptOgrenmeSerisi:External script</title>
</head>

<body>
    //Head veya Body bölümünde olabilir
    // Lakin Body bölümü önerilir
    <script src="externalScriptIntroduction.js"></script>
</body>

</html>


Console.log () işlevinden çıktıyı görmek için tarayıcı konsolunu açmayı unutmayın.


Çoklu komut dosyası(Multiple External script)


Birden çok harici JavaScript dosyasını bir web sayfasına bağlayabiliriz.
Proje klasörü içinde bir hellohome.js dosyası oluşturun ve aşağıdaki kodu yazın.

/*hellohome.js */

console.log('Merhaba, Ev!')

Çoklu komut dosyası(Multiple External script)

<!--multipleExternalScriptBody.html-->

<!DOCTYPE html>
<html>

<head>
    <title>Multiple External Scripts</title>
</head>

<body>

    <script src="./helloHome.js"></script>
    <script src="./externalScriptIntroduction.js"></script>
</body>

</html>
JavaScript Multiple External script
Web Sayfasına JavaScript EklemeJavaScript Multiple External script

Kaynakça