Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah javascript ke halaman HTML
Bagaimana untuk menambah javascript ke halaman HTML
- PHPzasal
- 2023-04-26 10:36:095196semak imbas
Memandangkan aplikasi web terus berkembang, JavaScript menjadi semakin popular, menyediakan interaksi dinamik dan fungsi yang lebih kompleks untuk halaman web dan aplikasi web. Artikel ini akan membantu anda mempelajari cara menambahkan JavaScript pada halaman HTML.
1. JavaScript Dalaman
JavaScript Dalaman merujuk kepada meletakkan kod JavaScript terus dalam dokumen HTML. Kod ini mesti disertakan dalam teg
Contohnya:
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<script>
function welcome() {
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="welcome()">Click me!</button>
</body>
</html>
Apabila pengguna mengklik butang, kotak mesej akan muncul yang menunjukkan "Hello World!".
2. JavaScript Luaran
Apabila terdapat banyak kod JavaScript, adalah lebih sesuai untuk memasukkannya ke dalam fail luaran yang berasingan daripada memasukkannya ke dalam dokumen HTML. Ini menjadikan kod lebih mudah untuk diselenggara, diubah suai dan digunakan semula merentas berbilang halaman.
Untuk menambah kod JavaScript luaran pada dokumen HTML, gunakan teg
Contohnya:
<!DOCTYPE html> <html> <head> <title>Example</title> <script src="example.js"></script> </head> <body> <button onclick="welcome()">Click me!</button> </body> </html>
Di sini, kami menambahkan teg
3. Pustaka luaran
Pustaka JavaScript ialah satu set fungsi boleh guna semula dan coretan kod yang boleh digunakan untuk mempercepatkan pembangunan web. Pustaka ini memudahkan pembangun melaksanakan tugas biasa seperti jQuery, React dan Vue.js.
Untuk menambah pustaka luaran pada dokumen HTML, gunakan kaedah yang sama seperti skrip JavaScript luaran.
Contohnya:
<!DOCTYPE html> <html> <head> <title>Example</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <button onclick="$('.welcome-message').toggle()">Click me!</button> <p class="welcome-message" style="display: none;">Hello World!</p> </body> </html>
Di sini, kami menambahkan teg
Ringkasan:
Di atas ialah tiga kaedah tentang cara menambah JavaScript pada halaman HTML: JavaScript dalaman, JavaScript luaran dan perpustakaan luaran. Kami secara fleksibel boleh memilih kaedah yang berbeza untuk menulis kod JavaScript mengikut keperluan projek.
Walau apa pun, penting untuk diingat untuk sentiasa memastikan kod anda jelas, mudah dibaca dan boleh diselenggara.
Atas ialah kandungan terperinci Bagaimana untuk menambah javascript ke halaman HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!