JavaScript Nereye Koyulur ?

<script> Tagı

HTMl dosyalanımızda <script> taglarının arasında javascript kodu yazabiliriz.

1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9</head>
10<body>
11    <script>
12        console.log('Hello World');
13    </script>
14</body>
15</html>
16

Ayrı bir dosyada tutmak.

Javascripti .js uzantılı dosyalara kaydedebiliriz.

Bu şekilde kaydettiğimiz javascript'i src tagında çağırabiliriz.

1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9    <script src="./main.js"></script>
10</head>
11<body>
12</body>
13</html>
14

Burdaki ./ bulunduğumuz dizin anlamına geliyor.

<body> etiketine mi yoksa <head> etiketine mi koymalı ?

JavaScript sayfanın diğer kaynakları arasında yüklenmesi en uzun sürendir.

Bu yüzden ayfanın ilk çiziminin gecikmemesi için javascript' i en son yükleriz.

Bunu sağlamanın iki yolu vardır.

#1 Sayfanın sonunda yüklemek

<body> tagının sonuna ekleyerek sayfamızın sonunda javascript'i yükleyebiliriz.

1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9</head>
10<body>
11    <script src="js/main.js"></script>
12</body>
13</html>
14

#2 defer etiketi

Sayfanın neresine koyulduğu fark etmeksizin javascript'i sayfamızı yavaşlatmadan eklemenin bir yolu defer etiketidir.

defer etiketi javascript'i arkaplanda yükleyerek sayfanın yavaş açılmasını engeller.

1
2<!DOCTYPE html>
3<html lang="en">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Document</title>
9    <script defer src="js/main.js"></script>
10</head>
11<body>
12</body>
13</html>
14