Rumah > Artikel > hujung hadapan web > Cara menggunakan JavaScript dalam HTML
Cara menggunakan JavaScript dalam HTML
- PHPzasal
- 2023-04-26 14:25:451073semak imbas
Cara menggunakan JavaScript dalam HTML
Dalam pembangunan web, HTML dan JavaScript adalah dua teknologi yang sangat diperlukan dan penting. HTML ialah bahasa penanda yang digunakan untuk membina halaman web, manakala JavaScript ialah bahasa skrip yang digunakan untuk menambah pelbagai kesan interaktif pada halaman web. Gabungan HTML dan JavaScript dapat merealisasikan aplikasi web berwarna-warni dan kesan dinamik. Artikel ini akan memperkenalkan cara HTML menggunakan JavaScript untuk melaksanakan pelbagai fungsi.
1. Masukkan kod JavaScript
Dalam halaman HTML, anda boleh menggunakan teg
<!DOCTYPE html>
<html>
<head>
<title>Insert JavaScript into HTML</title>
</head>
<body>
<h1>Hello World!</h1>
<script>
alert('Hello JavaScript!');
</script>
</body>
</html>
Dalam kod di atas, menggunakan teg
2. Fungsi pemprosesan acara
Dalam HTML, JavaScript boleh digunakan untuk melaksanakan pelbagai fungsi pemprosesan acara, seperti klik tetikus, pergerakan tetikus, pemuatan halaman, dll. Berikut mengambil peristiwa klik tetikus sebagai contoh untuk memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi pemprosesan acara.
<!DOCTYPE html> <html> <head> <title>Mouse click event with JavaScript</title> </head> <body> <button onclick="alert('Hello JavaScript!')">Click me!</button> </body> </html>
Dalam kod di atas, gunakan atribut onclick untuk melaksanakan fungsi pengendali acara klik tetikus pada butang Apabila pengguna mengklik butang, kotak amaran akan muncul, memaparkan "Hello JavaScript!" . Kaedah ini boleh digunakan untuk melaksanakan pelbagai acara tetikus, acara papan kekunci, dll.
3. Operasi DOM
Dalam HTML, JavaScript boleh digunakan untuk mengendalikan DOM halaman, seperti menukar gaya elemen, memasukkan, memadam elemen, dsb. Berikut mengambil elemen memasukkan sebagai contoh untuk memperkenalkan cara menggunakan JavaScript untuk melaksanakan operasi DOM.
<!DOCTYPE html>
<html>
<head>
<title>Insert element with JavaScript</title>
</head>
<body>
<h1 id="heading">Hello World!</h1>
<button onclick="add()">Add element</button>
<button onclick="remove()">Remove element</button>
<script>
function add() {
var p = document.createElement('p');
var text = document.createTextNode('This is a new paragraph.');
p.appendChild(text);
document.body.appendChild(p);
}
function remove() {
var p = document.getElementsByTagName('p')[0];
p.parentNode.removeChild(p);
}
</script>
</body>
</html>
Dalam kod di atas, gunakan kaedah createElement() untuk mencipta elemen
yang baharu, gunakan kaedah createTextNode() untuk mencipta nod teks dan tambahkan nod teks pada < ;p> elemen , dan akhirnya gunakan kaedah appendChild() untuk menambah elemen
4. Pemprosesan data borang
Dalam HTML, JavaScript boleh digunakan untuk memproses data borang, seperti mengesahkan data input pengguna, mengemas kini data dalam masa nyata, dsb. Berikut mengambil pengesahan data borang sebagai contoh untuk memperkenalkan cara menggunakan JavaScript untuk memproses data borang.
<!DOCTYPE html>
<html>
<head>
<title>Form validation with JavaScript</title>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("First name must be filled out");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
First name: <input type="text" name="fname"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Dalam kod di atas, gunakan fungsi validateForm() untuk mengesahkan data yang dimasukkan oleh pengguna Jika pengguna tidak mengisi nama Pertama, kotak amaran akan muncul untuk memaparkan ralat mesej dan menghalang penyerahan borang. Kaedah ini boleh melakukan pelbagai operasi pada data borang, seperti mengesahkan data, mengemas kini halaman dalam masa nyata, dsb.
Ringkasan
Artikel ini memperkenalkan cara HTML menggunakan JavaScript untuk melaksanakan pelbagai fungsi, termasuk memasukkan kod JavaScript, fungsi pengendalian acara, operasi DOM, pemprosesan data borang, dsb. Dengan memahami asas ini, anda boleh menyediakan alat yang lebih berkuasa dan operasi yang lebih fleksibel untuk pembangunan web.
Atas ialah kandungan terperinci Cara menggunakan JavaScript dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!