Cara menggunakan JavaScript dalam HTML-Soal Jawab bahagian hadapan-php.cn

Cara menggunakan JavaScript dalam HTML

PHPz

Lepaskan： 2023-04-26 15:09:57

asal

1132 orang telah melayarinya

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 untuk memasukkan kod JavaScript adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Insert JavaScript into HTML</title>
</head>
<body>
    <h1>Hello World!</h1>
    <script>
    alert('Hello JavaScript!');
    </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, menggunakan teg untuk memasukkan sekeping kod JavaScript ke dalam dokumen HTML, fungsi alert() akan muncul kotak amaran, memaparkan "Hello JavaScript!". Dengan cara ini, kod JavaScript boleh dibenamkan terus dalam halaman untuk melaksanakan pelbagai fungsi logik.

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(&#39;Hello JavaScript!&#39;)">Click me!</button>
</body>
</html>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!