Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyediakan halaman web dengan javascript
Bagaimana untuk menyediakan halaman web dengan javascript
- 王林asal
- 2023-05-12 11:40:371080semak imbas
Dengan populariti Internet, semakin ramai orang cuba membina tapak web mereka sendiri. Sebagai bahasa pengaturcaraan yang biasa digunakan, JavaScript boleh digunakan untuk menetapkan pelbagai kesan interaktif dan paparan dinamik untuk halaman web. Artikel ini menerangkan cara menggunakan JavaScript untuk menyediakan halaman web.
1. Fahami asas JavaScript
JavaScript ialah bahasa tafsiran yang boleh dijalankan terus dalam penyemak imbas, jadi ia tidak perlu dikompilasi ke dalam bahasa mesin seperti bahasa lain. JavaScript boleh digunakan untuk mengendalikan pengesahan borang, kemas kini kandungan dinamik, kesan interaktif dan banyak lagi.
2. Cara membenamkan JavaScript dalam halaman web
Terdapat dua cara untuk merujuk JavaScript dalam halaman web:
1 Tulis kod JavaScript secara langsung fail 855348821b2e8f2cc4b633bf98f064df
Kod sampel adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript设置网页</title>
</head>
<body>
<h1>这是一个使用JavaScript设置网页的例子</h1>
<script>
alert("Hello,World!");
</script>
</body>
</html>Dalam kod di atas, kami menggunakan teg 855348821b2e8f2cc4b633bf98f064df dalam teg 6c04bd5ca3fcae76e30b72ad730ca86d Fungsi alert() ialah fungsi yang biasa digunakan dalam JavaScript, yang digunakan untuk memunculkan kotak gesaan pada halaman dan biasanya digunakan untuk ujian dan penyahpepijatan.
2. Tulis kod JavaScript dalam fail js luaran dan kemudian rujuknya dalam fail HTML.
Kod sampel adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript设置网页</title>
<script src="test.js"></script>
</head>
<body>
<h1>这是一个使用JavaScript设置网页的例子</h1>
</body>
</html>Dalam kod di atas, kami mencipta fail JavaScript baharu bernama test.js dan merujuk fail tersebut dalam HTML. Dalam fail test.js, kita boleh menulis kod yang perlu dilaksanakan.
3. Gunakan JavaScript untuk menyediakan halaman web
1. Tukar tajuk halaman web
document.title = "新标题";
Dalam kod di atas, kami menggunakan atribut document.title. untuk menukar tajuk halaman web. Hanya isikan tajuk baharu yang anda perlukan di bahagian di sebelah kanan tanda sama.
2. Dapatkan elemen dan tukar kandungan elemen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript设置网页</title>
</head>
<body>
<h1>这是一个使用JavaScript设置网页的例子</h1>
<p id="demo">这是一个段落</p>
<button onclick="myFunction()">点击更改</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落内容已更改";
}
</script>
</body>
</html>Dalam kod di atas, kami menetapkan perenggan dalam HTML dengan demo id. Dalam JavaScript, kami mendapatkan elemen melalui kaedah document.getElementById() dan kemudian menggunakan atribut innerHTML untuk menukar kandungan elemen.
3. Tukar gaya elemen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript设置网页</title>
<style>
#demo {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<h1>这是一个使用JavaScript设置网页的例子</h1>
<p id="demo">这是一个段落</p>
<button onclick="myFunction()">点击更改</button>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "40px";
document.getElementById("demo").style.color = "blue";
}
</script>
</body>
</html>Dalam kod di atas, kami menetapkan saiz fon dan warna elemen demo dalam teg gaya. Dalam JavaScript, kami menggunakan element.style.property untuk menukar sifat gaya sesuatu elemen. Antaranya, elemen merujuk kepada elemen yang gayanya ingin kita ubah, dan sifat merujuk kepada atribut gaya yang akan diubah, seperti Saiz fon dan warna.
4. Gantikan imej
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript设置网页</title>
</head>
<body>
<h1>这是一个使用JavaScript设置网页的例子</h1>
<img id="myImage" src="flower.jpg" width="250" height="200">
<button onclick="changeImage()">切换图片</button>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("flower")) {
image.src = "bird.jpg";
} else {
image.src = "flower.jpg";
}
}
</script>
</body>
</html>Dalam kod di atas, kami menetapkan imej dalam HTML dan mendapatkan imej dengan id. Dalam JavaScript, kami mentakrifkan fungsi changeImage yang mengubah atribut src imej apabila butang diklik, sekali gus menggantikan imej.
Di atas ialah beberapa kaedah asas untuk menyediakan halaman web menggunakan JavaScript. Disebabkan oleh fungsi JavaScript yang berkuasa, kami juga boleh melaksanakan fungsi lanjutan seperti pengesahan borang, interaksi data Ajax, lukisan kanvas, dsb. melalui JavaScript. Saya harap artikel ini akan membantu pembaca dan menambah kesan interaktif yang lebih kaya pada halaman web anda.
Atas ialah kandungan terperinci Bagaimana untuk menyediakan halaman web dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!