Mengapa kami menggunakan JavaScript dalam HTML?-tutorial js-php.cn

Mengapa kami menggunakan JavaScript dalam HTML?

王林

Lepaskan： 2023-08-29 10:33:02

ke hadapan

1236 orang telah melayarinya

为什么我们在 HTML 中使用 JavaScript？

Pertama, kami akan faham apa itu JavaScript. Apabila tapak web melakukan lebih daripada sekadar duduk di sana dan memberikan anda maklumat statik, seperti menunjukkan kemas kini kandungan tepat pada masanya, peta interaktif, visual animasi 2D/3D, menatal kotak juke video, dll., JavaScript hampir pasti digunakan. Selain itu, anda boleh menambah ciri lanjutan pada tapak web anda menggunakan skrip atau bahasa pengaturcaraan JavaScript. Dua lapisan pertama kek yang terdiri daripada teknologi web standard ialah HTML dan CSS. Tingkat ini adalah tingkat tiga.

Tahap halaman web

Bahasa penanda yang kami gunakan untuk menstruktur dan mentakrifkan maksud kandungan web dipanggil HTML. Menggunakan HTML, kami boleh mentakrifkan perenggan, tajuk dan jadual data serta membenamkan imej dan video ke dalam halaman web.
CSS bermaksud Cascading Style Sheets dan merupakan bahasa peraturan gaya yang kami gunakan untuk menggunakan gaya pada kandungan HTML, seperti mewujudkan warna latar belakang dan fon serta menyusunnya ke dalam lajur.
JavaScript ialah bahasa skrip yang membolehkan anda melakukan segala-galanya daripada membina bahan mengemas kini secara dinamik kepada mengurus multimedia dan grafik animasi. Perkara yang menakjubkan boleh dilakukan dengan hanya beberapa baris kod JavaScript.

Penggunaan JavaScript dalam pembangunan web

JavaScript ialah bahasa komputer yang digunakan di web. JavaScript boleh digunakan untuk mengemas kini dan mengubah suai HTML dan CSS. Ia boleh digunakan untuk mengira, menukar dan mengesahkan data. Pengguna boleh berinteraksi dengan halaman web menggunakan JavaScript. Sebenarnya tiada had untuk perkara yang boleh anda capai dengan JavaScript; berikut adalah beberapa contoh penggunaannya di halaman web -

Anda boleh mendedahkan atau menyembunyikan lebih banyak maklumat dengan menekan butang.
Warna butang berubah apabila tetikus diletakkan di atasnya.
Tapak web ini mempunyai karusel imej yang boleh anda tatal.
Zum masuk atau keluar foto menggunakan pemasa atau kira detik di tapak web,
Mainkan kandungan audio dan video dalam halaman,
Animasikan dan paparkan dengan menu lungsur hamburger dan banyak lagi.

Tujuan JavaScript pada halaman web

Apabila anda memuatkan halaman web dalam penyemak imbas anda (tab penyemak imbas), anda sedang melaksanakan kod (HTML, CSS dan JavaScript) dalam persekitaran pelaksanaan. Ini serupa dengan kilang yang memasukkan bahan mentah (kod) dan menghasilkan produk siap (laman web).

Melalui API Model Objek Dokumen, JavaScript sering digunakan untuk mengedit HTML dan CSS untuk mengemas kini pengalaman pengguna secara dinamik. Ingat bahawa kod dokumen web biasanya dimuatkan dan berjalan mengikut tertib yang dipaparkan pada halaman. Jika JavaScript dimuatkan dan dijalankan sebelum HTML dan CSS, yang bermaksud pengubahsuaian sedang dibuat, ralat mungkin berlaku.

Bagaimana untuk menambah JavaScript pada halaman?

Sama seperti cara CSS digunakan pada halaman HTML, perkara yang sama berlaku untuk JavaScript. Walau bagaimanapun, JavaScript memerlukan teg HTML, iaitu <script>. </script>

Dalam contoh di bawah, kita akan melihat cara pengguna boleh membenamkan kod JavaScript ke dalam teg kepala menggunakan elemen skrip dalam fail HTML.

Contoh

Seperti yang ditunjukkan dalam contoh di bawah, kami membenamkan JavaScript dalam fail HTML untuk mengubah suai HTML. Di dalam teg skrip, kami menggunakan fungsi yang dipanggil "ParaChange". Kami mencipta butang "Klik Di Sini" di dalam teg badan. Fungsi ParaChange akan dipanggil oleh acara klik butang. Fungsi ini menggunakan document.getElementById() DOM untuk memanipulasi tag p dan menukar pernyataan.

<html>
<head>
   <script>
  
      // inside the head tag is a script tag.
      // The onclick event calls the parachange function
      function ParaChange() {
         document.getElementById("para").innerHTML = "The line has changed.";
      }
   </script>
</head>
<body>
   <h2>Including JavaScript in HTML document in <i>Head tag</i></h2>
   <p id="para">The is a line</p>
   <button type="button" onclick="ParaChange()">Click Here</button>
</body>
</html>

Salin selepas log masuk

Pengguna mungkin perasan bahawa baris perenggan di dalam tag p acara klik telah berubah disebabkan oleh klik butang. Ini kerana fungsi "ParaChange" yang ditulis dalam teg skrip teg kepala dipanggil semasa acara klik tersebut.

Dengan cara ini, kami boleh menggunakan JavaScript dalam HTML untuk mencipta halaman kami yang fleksibel dan dinamik dengan menulis kod yang kompleks.

Atas ialah kandungan terperinci Mengapa kami menggunakan JavaScript dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!