Rumah > Artikel > hujung hadapan web > Cara menggunakan kod javascript dalam html
Cara menggunakan kod javascript dalam html
- PHPzasal
- 2023-04-24 10:53:382245semak imbas
HTML ialah bahasa asas untuk reka bentuk web Menggunakan JavaScript dalam halaman web boleh meningkatkan interaktiviti, dinamik dan kepraktisannya. Artikel ini akan memberikan pengenalan yang mendalam tentang cara HTML menggunakan kod JavaScript.
1. Pengenalan kod JavaScript
Menggunakan kod JavaScript dalam halaman HTML memerlukan teg skrip sederhana. Secara amnya, teg skrip terletak di bahagian kepala atau badan fail HTML. Berikut ialah contoh mudah:
<!DOCTYPE html> <html> <head> <title>使用JavaScript代码</title> <script type="text/javascript"> //JavaScript代码在这里 </script> </head> <body> <!-- HTML页面中的其他内容 --> </body> </html>
Dalam kod di atas, kami menggunakan teg skrip dalam teg kepala untuk memperkenalkan kod JavaScript dan menulis beberapa kod JavaScript di dalamnya. Dalam pembangunan sebenar, kami mungkin menulis kod JavaScript dalam fail .js yang berasingan dan kemudian memperkenalkannya melalui teg skrip.
<!DOCTYPE html> <html> <head> <title>使用JavaScript代码</title> <script type="text/javascript" src="myscript.js"></script> </head> <body> <!-- HTML页面中的其他内容 --> </body> </html>
Dalam kod di atas, kami memperkenalkan fail bernama myscript.js melalui atribut src, yang mengandungi kod JavaScript.
2. Lokasi kod JavaScript
Kod JavaScript boleh diletakkan dalam pelbagai bahagian fail HTML, seperti kepala, badan dan pelbagai teg halaman HTML. Meletakkan kod JavaScript di lokasi yang berbeza akan menjejaskan masa pelaksanaan dan skop pelaksanaan kod.
- Diletakkan dalam teg kepala
Kod JavaScript yang diletakkan dalam teg kepala biasanya digunakan untuk memulakan pembolehubah global, mentakrifkan objek dan fungsi. Memandangkan kod dalam teg kepala akan dilaksanakan serta-merta selepas halaman dimuatkan, beberapa fungsi prapemprosesan boleh disediakan untuk halaman sebelum halaman dipaparkan.
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript代码</title>
<script type="text/javascript">
var myVar = "Hello, World!";
function myFunction() {
alert(myVar);
}
</script>
</head>
<body>
<!-- HTML页面中的其他内容 -->
</body>
</html>
Dalam kod di atas, kami mentakrifkan pembolehubah bernama myVar dan fungsi bernama myFunction. Kod ini akan dilaksanakan serta-merta selepas halaman dimuatkan dan boleh menyediakan beberapa fungsi pra-pemprosesan untuk halaman sebelum dipaparkan.
- Diletakkan dalam teg badan
Kod JavaScript yang diletakkan dalam teg badan biasanya digunakan untuk mengendalikan interaksi halaman dan pengendalian acara. Memandangkan kod dalam teg badan akan dilaksanakan selepas halaman dimuatkan, ia boleh memberikan lebih interaktiviti dan dinamik kepada halaman selepas halaman itu dipaparkan.
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript代码</title>
</head>
<body>
<h1>我的网页</h1>
<button onclick="myFunction()">点击这里</button>
<script type="text/javascript">
function myFunction() {
alert("你点击了这个按钮！");
}
</script>
</body>
</html>
Dalam kod di atas, kami mentakrifkan butang dan fungsi JavaScript bernama myFunction dalam teg badan. Apabila pengguna mengklik butang, fungsi myFunction akan dicetuskan dan kotak gesaan akan muncul.
- Letak dalam pelbagai teg
Kod JavaScript yang diletakkan dalam pelbagai teg HTML biasanya digunakan untuk mengemas kini kandungan dan gaya secara dinamik berdasarkan interaksi pengguna. Sebagai contoh, kita boleh menulis kod JavaScript terus dalam atribut onclick atau onmouseover bagi teg tertentu, supaya apabila pengguna berinteraksi dengan teg, kandungan atau gaya halaman akan diubah.
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript代码</title>
<style>
.myDiv {
background-color: yellow;
}
</style>
</head>
<body>
<h1>我的网页</h1>
<div class="myDiv" onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='yellow'">
<p>这个div会改变颜色！</p>
</div>
</body>
</html>
Dalam kod di atas, kami mentakrifkan teg div bernama myDiv dan menambahkan kod JavaScript pada atribut onmouseover dan onmouseoutnya. Apabila pengguna menggerakkan tetikus ke atas myDiv, warna latar belakang div akan bertukar kepada merah apabila pengguna menjauhkan tetikus, warna latar belakang div akan bertukar kembali kepada kuning.
3. Penggunaan kod JavaScript
Apabila menggunakan kod JavaScript dalam halaman HTML, anda perlu mempertimbangkan aspek berikut:
- Pembolehubah dan jenis data
Dalam JavaScript, pembolehubah boleh menyimpan data dan nama pembolehubah adalah sensitif huruf besar-besaran. JavaScript menyokong pelbagai jenis data, termasuk nombor, rentetan, nilai Boolean, tatasusunan, objek dan banyak lagi.
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript代码</title>
</head>
<body>
<h1>我的网页</h1>
<script type="text/javascript">
var myNum = 123;
var myStr = "Hello, World!";
var myBool = true;
var myArr = [1,2,3,4,5];
var myObj = {name:"John", age:30, city:"New York"};
document.write(myNum); // 输出 123
document.write("<br>");
document.write(myStr); // 输出 Hello, World!
document.write("<br>");
document.write(myBool); // 输出 true
document.write("<br>");
document.write(myArr[0]); // 输出 1
document.write("<br>");
document.write(myObj.name); // 输出 John
document.write("<br>");
</script>
</body>
</html>
Dalam kod di atas, kami mentakrifkan 5 pembolehubah berbeza dan menggunakan fungsi document.write() untuk mengeluarkan nilainya pada halaman. Kami juga menunjukkan cara untuk mengakses elemen dalam tatasusunan dan objek.
- Fungsi dan acara
Fungsi dalam JavaScript ialah sekeping kod boleh guna semula yang boleh dipanggil dan dilaksanakan melalui nama fungsi. Fungsi boleh menerima parameter dan boleh mempunyai nilai pulangan. Dalam halaman HTML, fungsi biasanya digunakan untuk mengendalikan acara pengguna, mengesahkan input, dsb.
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript代码</title>
</head>
<body>
<h1>我的网页</h1>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction() {
document.getElementById("demo").innerHTML = "你点击了这个按钮！";
}
</script>
</body>
</html>
Dalam kod di atas, kami mentakrifkan fungsi bernama myFunction dan mengikatnya pada acara onclick pada butang. Apabila pengguna mengklik butang, fungsi myFunction akan mengubah suai atribut innerHTML tag p dan menetapkan kandungan teks kepada "Anda mengklik butang ini!"
- operasi DOM
DOM (Document Object Model) ialah antara muka pengaturcaraan untuk dokumen HTML, yang membenarkan kod JavaScript mengakses mana-mana elemen dalam dokumen dan mengubah suai kandungan, atribut, gaya, dsb. Dalam halaman HTML, operasi DOM biasanya digunakan untuk menukar kandungan dan gaya halaman secara dinamik.
<!DOCTYPE html>
<html>
<head>
<title>使用JavaScript代码</title>
<style>
.myDiv {
background-color: yellow;
}
</style>
</head>
<body>
<h1>我的网页</h1>
<div id="myDiv">
<p>这里是一个div。</p>
</div>
<button onclick="myFunction()">点击这里</button>
<script type="text/javascript">
function myFunction() {
var myDiv = document.getElementById("myDiv");
myDiv.style.backgroundColor = "red";
}
</script>
</body>
</html>
Dalam kod di atas, kami mentakrifkan teg div bernama myDiv dan fungsi bernama myFunction. Apabila pengguna mengklik butang, fungsi myFunction akan mengubah suai warna latar belakang label myDiv melalui operasi DOM.
4. Ringkasan
Menggunakan kod JavaScript dalam halaman HTML boleh meningkatkan interaktiviti, dinamik dan kepraktisan halaman. Artikel ini memperkenalkan cara menggunakan teg skrip untuk memperkenalkan kod JavaScript, tempat untuk meletakkan kod JavaScript dalam halaman HTML, pembolehubah JavaScript, jenis data, fungsi dan acara serta operasi DOM. Dengan mempelajari dan menguasai mata pengetahuan ini secara mendalam, kami boleh menggunakan JavaScript dengan lebih baik untuk menambahkan lebih banyak fungsi dan keindahan pada halaman web kami.
Atas ialah kandungan terperinci Cara menggunakan kod javascript dalam html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!