Bagaimana untuk menambah javascript ke html-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menambah javascript ke html

WBOY

Lepaskan： 2023-05-21 09:04:07

asal

2983 orang telah melayarinya

JavaScript ialah bahasa skrip berasaskan objek dan dipacu peristiwa yang digunakan secara meluas dalam pembangunan web. Halaman web boleh dibuat lebih interaktif dan dinamik melalui JavaScript, dan semasa pembangunan selalunya perlu menambah kod JavaScript pada HTML untuk merealisasikan fungsi halaman tersebut.

Artikel ini akan memperkenalkan cara menambahkan JavaScript pada HTML, termasuk skrip dalaman, skrip luaran dan skrip sebaris.

1. Skrip dalaman

Skrip dalaman adalah untuk menulis kod JavaScript terus dalam halaman HTML. Kaedah ini sesuai untuk situasi di mana jumlah kod adalah kecil, seperti beberapa kesan interaktif yang mudah. Berikut ialah contoh menggunakan skrip dalaman untuk menukar warna teks apabila tetikus diletakkan:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内部脚本示例</title>
</head>

<body>
    <h1 onmouseover="this.style.color='red'" onmouseout="this.style.color='black'">鼠标放上去改变颜色</h1>
</body>

</html>

Salin selepas log masuk

Dalam contoh ini, kod JavaScript ditambah terus pada elemen HTML h1 melalui acara onmouseover dan onmouseout ke buat perubahan warna teks apabila tetikus diletakkan masing-masing menjadi merah dan hitam apabila naik dan bergerak menjauh.

2. Skrip luaran

Skrip luaran menyimpan kod JavaScript dalam fail berasingan dan kemudian memperkenalkannya melalui halaman HTML. Kaedah ini sesuai untuk situasi di mana jumlah kod adalah besar atau berbilang halaman perlu dikongsi dan boleh meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod. Berikut ialah contoh untuk memperkenalkan fail JavaScript luaran ke dalam halaman HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    <script src="example.js"></script>
</head>

<body>
    <h1>Hello World!</h1>
</body>

</html>

Salin selepas log masuk

Dalam contoh ini, laluan ke fail JavaScript luaran ditentukan melalui atribut <script> bagi teg src dan maka fail itu diperkenalkan dalam fail HTML kod JavaScript dalam , sekali gus merealisasikan penggunaan semula kod.

3. Skrip sebaris

Skrip sebaris bermaksud menulis kod JavaScript dalam atribut tag HTML. Kaedah ini sesuai untuk situasi di mana beberapa kesan interaktif khusus perlu dilaksanakan menggunakan JavaScript dan hanya berfungsi dalam teg ini. Berikut ialah contoh menggunakan skrip sebaris untuk muncul kotak gesaan apabila mengklik butang:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行内脚本示例</title>
</head>

<body>
    <button onclick="alert('Hello World!')">点击这里弹出提示框</button>
</body>

</html>

Salin selepas log masuk

Dalam contoh ini, kod JavaScript ditambah terus pada elemen butang HTML melalui acara onclick, supaya a kotak gesaan muncul apabila butang diklik.

Tiga kaedah di atas boleh menambah kod JavaScript pada HTML untuk mencapai halaman web yang lebih interaktif dan dinamik. Dalam pembangunan sebenar, pilih kaedah yang sepadan untuk menambah kod JavaScript seperti yang diperlukan, dan perhatikan kebolehbacaan, kebolehselenggaraan dan kebolehgunaan semula kod.

Atas ialah kandungan terperinci Bagaimana untuk menambah javascript ke html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!