Tiga cara untuk memasukkan javascript dalam halaman

Question

Petunjuk ini akan membantu Anda membuat file JavaScript, menambahkannya ke halaman web Anda, dan menguji apakah file tersebut berfungsi

Table of Contents Show

1. Buat file JavaScript
2. Tambahkan beberapa kode uji ke file
3. Tambahkan file ke halaman web Anda
4. Simpan file Anda
5. Buka halaman web di Google Chrome
6. Buka Konsol Pengembang
Rekap Cepat
Atribut Tag Skrip dan Kegunaannya
JavaScript di halaman Web HTML
1. Tag skrip dengan Kode JavaScript di <script type="text/javascript"> // JS code here </script>_6 Elemen
1. Tag skrip dengan Kode JavaScript di <script type="text/javascript"> // JS code here </script>8 Elemen
3. Kode JavaScript di File Eksternal
Termasuk Sintaks JavaScript Eksternal
Keuntungan File JavaScript Eksternal
Kode JavaScript dalam Contoh File Eksternal
Termasuk JavaScript di Halaman HTML. Praktek terbaik
Bagaimana Anda memasukkan JavaScript di halaman web?
Bagaimana cara memasukkan JavaScript di halaman HTML?
Apa itu js Dalam berapa banyak cara kami dapat menyematkan JS di halaman web Anda?
Apa cara terbaik untuk memasukkan file skrip di halaman HTML?

1. Buat file JavaScript

Di proyek Anda, di folder yang sama dengan halaman index.html Anda, buat file baru bernama my-project.js. Semua kode JavaScript proyek Anda harus ditulis dalam file .js

2. Tambahkan beberapa kode uji ke file

Di file baru Anda my-project.js_, tambahkan kode di bawah ini

console.log('It works!');

Kode ini akan menampilkan pesan “It works. ” di jendela keluaran pengembang browser Anda, yang akan segera kita lihat

3. Tambahkan file ke halaman web Anda

Di file index.html Anda, tambahkan tag script untuk memuat JavaScript baru Anda. Tag skrip harus menjadi baris kode terakhir sebelum tag body penutup Anda

Ini adalah baris yang perlu Anda tambahkan

<script src="my-project.js"></script>

_

Dan ini adalah contoh file HTML termasuk baris baru

<!doctype html>
<html>    <head>
        <title>Example Page</title>
    </head>    <body>        <h1>Welcome to my Example Page</h1>        <p>This is some page content.</p>        <script src="my-project.js"></script>    </body></html>

4. Simpan file Anda

Pastikan Anda telah menyimpan semua file Anda, terutama my-project.js baru Anda dan perubahan Anda pada index.html

5. Buka halaman web di Google Chrome

Di browser folder sistem operasi normal Anda, temukan file index.html Anda. Klik kanan file tersebut dan pilih "Buka dengan Google Chrome"

6. Buka Konsol Pengembang

Di Chrome, klik menu opsi di kanan atas, yang terlihat seperti tiga titik kecil. Buka Lebih Banyak Alat lalu klik Alat Pengembang

Di alat pengembang, klik tab bernama Konsol dan Anda akan melihat pesan Anda “Berhasil. ”

Jika Anda tidak melihat pesan tersebut, Anda perlu memeriksa ulang apakah Anda telah mengikuti langkah-langkahnya dengan benar

Rekap Cepat

Inilah semua langkah dalam bentuk yang disederhanakan

Buat file JavaScript baru dengan beberapa kode pengujian
```
<script src="my-project.js"></script>
```
3
Muat file JavaScript menggunakan tag skrip di HTML Anda
Gunakan Alat Pengembang untuk memeriksa apakah pesan tersebut muncul

Setelah pesan percobaan berhasil ditampilkan, Anda dapat menambahkan kode JavaScript lain yang Anda inginkan ke file tersebut

Kode JavaScript dapat disisipkan dalam file HTML dengan menggunakan tag HTML <script>. Saat dokumen HTML dimuat dengan tag <script> di browser web, browser memproses konten yang terlampir di dalam tag skrip sebagai kode JavaScript

Tag skrip dapat berisi pernyataan skrip atau merujuk ke file JavaScript eksternal. Tag skrip menyediakan atribut src yang memungkinkan kita menambahkan referensi ke file skrip eksternal

JavaScript adalah bahasa skrip default untuk sebagian besar browser

Atribut Tag Skrip dan Kegunaannya

Berikut adalah sintaks dasar penggunaan tag <script>

<script src="JS_FILE_URL" type="..."></script>

_

Demikian pula, kita dapat menggunakan tag ________ 37 _______ untuk langsung menambahkan kode JavaScript juga, seperti ini

<script type="text/javascript">
    // JS code here
</script>

Ada lima atribut tag skrip yang tercantum di bawah ini dalam tabel

AtributNilaiDeskripsi

<script type="text/javascript">
    // JS code here
</script>

1

BENAR
Salah

Ini menentukan apakah skrip harus dijalankan secara asinkron atau tidak.

<script type="text/javascript">
    // JS code here
</script>

2

teks/ECMAScript
teks/javascript
aplikasi/ECMAScript
aplikasi/javascript
teks/VBScript

Ini menentukan jenis skrip Multipurpose Internet Mail Extensions (MIME). Umumnya, nilai teks/javascript digunakan.

<script type="text/javascript">
    // JS code here
</script>

3charsetIt menentukan jenis pengkodean karakter yang digunakan dalam skrip

<script type="text/javascript">
    // JS code here
</script>

4

BENAR
Salah

Ini menentukan apakah browser terus mem-parsing halaman web atau tidak.

<script type="text/javascript">
    // JS code here
</script>

5URLIni menentukan pencari sumber seragam (URL) dari file yang berisi skrip

Now that we know about the

<script src="jsfile.js" type="text/javascript"></script>

Atribut

<script type="text/javascript">
    // JS code here
</script>

_2 adalah opsional dalam contoh kode di atas

Keuntungan File JavaScript Eksternal

Menggunakan file JavaScript eksternal memiliki kelebihannya sendiri

Itu memisahkan kode HTML dan JavaScript dan membuat kode terlihat bersih dan mudah dimengerti
Kode JavaScript eksternal dapat digunakan kembali di beberapa halaman web HTML
Kode JavaScript eksternal dapat di-cache di browser. Setelah di-cache, browser tidak akan memuat file JavaScript lagi dan lagi dan akan menggunakan versi cache-nya. Ini akan membuat halaman web Anda memuat dengan cepat

Kode JavaScript dalam Contoh File Eksternal

Kode yang diberikan di bawah ini menunjukkan cara menautkan file JavaScript eksternal dengan dokumen HTML

<html>
    <head> 
        <title>my first JavaScript</title> 
        <script src="jsfile.js"></script> 
    </head> 
    <body> 
        <p id="script">this is the old text</p> 
        <button type="button" onclick="text()">Click this button to use JavaScript</button> 
    </body> 
</html>

Kode JavaScript disimpan dalam sebuah file dengan nama jsfile. js

function text() 
{
    document.getElementById("script").innerHTML = "This text has been written inside the JavaScript.";
}

Pada kode di atas, kita telah mendefinisikan sebuah fungsi sederhana di JavaScript, kita akan belajar tentang fungsi JavaScript di tutorial yang akan datang

Termasuk JavaScript di Halaman HTML. Praktek terbaik

Dalam proyek besar, kode JavaScript bisa sangat besar dan mungkin ada beberapa file JavaScript eksternal yang disertakan di setiap halaman HTML menggunakan beberapa tag <script>. Ya, kita dapat menggunakan beberapa tag <script>_ untuk memasukkan sebanyak mungkin file JavaScript eksternal yang kita inginkan

Misalnya, jika kita memiliki 3 file JavaScript, dengan nama, satu. js, dua. j dan tiga. js dan kami harus menyertakan semua ini di halaman HTML kami. Kami akan menggunakan 3 tag <script> dalam kasus ini,

<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>

Sekarang pertanyaannya adalah, di mana kita harus meletakkan kode di atas di halaman HTML kita. Haruskah kita meletakkannya di dalam bagian HEAD dari kode HTML, atau haruskah kita meletakkannya di bagian BODY halaman HTML kita?

Nah, jika kita taruh di bagian HEAD, maka ketika halaman web Anda akan dimuat, semua file JavaScript akan dimuat terlebih dahulu yang dapat memperlambat pemuatan halaman web Anda, yang tidak baik.

Jadi, kita harus memuat file JavaScript eksternal yang digunakan di halaman web, terakhir, berarti tepat sebelum tag

<script type="text/javascript">
    // JS code here
</script>

9 penutup atau setelah tag

<script type="text/javascript">
    // JS code here
</script>

9 penutup, sehingga pertama halaman web lengkap kita dimuat dan kemudian file JavaScript eksternal dimuat. Dengan cara ini, meskipun kita memiliki file JavaScript yang besar, halaman web kita tidak akan melambat karenanya

<html>
    <head>
        ...
    </head>
    <body>
        <!-- body of HTML page -->
    </body>
    <script src="one.js" type="text/javascript"></script>
    <script src="two.js" type="text/javascript"></script>
    <script src="three.js" type="text/javascript"></script>
</html>

Kesimpulan

Jadi tutorial ini mencakup semua cara untuk memasukkan kode JavaScript ke dalam halaman web HTML dan juga praktik terbaiknya. Dalam tutorial berikutnya, kita akan belajar bagaimana kita bisa mendapatkan keluaran dari kode JavaScript sehingga kita dapat mulai melakukan beberapa pengkodean dan melihat kode JavaScript berjalan

Bagaimana Anda memasukkan JavaScript di halaman web?

Untuk menyertakan file JavaScript eksternal, kita dapat menggunakan tag skrip dengan atribut src . Anda telah menggunakan atribut src saat menggunakan gambar. Nilai untuk atribut src harus berupa jalur ke file JavaScript Anda. Tag skrip ini harus disertakan di antara tag