Home >Web Front-end >Front-end Q&A >How to set up a web page with javascript
How to set up a web page with javascript
- 王林Original
- 2023-05-12 11:40:371143browse
With the popularity of the Internet, more and more people are trying to build their own websites. As a commonly used programming language, JavaScript can be used to set various interactive effects and dynamic displays for web pages. This article explains how to use JavaScript to set up web pages.
1. Understand the basic knowledge of javascript
JavaScript is an interpreted language that can be run directly in the browser, so it does not need to be compiled into machine language like other languages. JavaScript can be used to handle form validation, dynamic content updates, interactive effects, and more.
2. How to embed JavaScript in a web page
There are two ways to reference JavaScript in a web page:
1. Directly write the JavaScript code in the HTML file 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript设置网页</title>
</head>
<body>
<h1>这是一个使用JavaScript设置网页的例子</h1>
<script>
alert("Hello,World!");
</script>
</body>
</html>In the above code, we use the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag in the 6c04bd5ca3fcae76e30b72ad730ca86d tag and wrap the alert() function in it. The alert() function is a commonly used function in JavaScript. It is used to pop up a prompt box on the page and is usually used for testing and debugging.
2. Write the JavaScript code in an external js file, and then reference it in the HTML file.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用JavaScript设置网页</title>
<script src="test.js"></script>
</head>
<body>
<h1>这是一个使用JavaScript设置网页的例子</h1>
</body>
</html>In the above code, we created a new JavaScript file named test.js and referenced the file in HTML. In the test.js file, we can write the code that needs to be executed.
3. Use JavaScript to set the webpage
1. Change the title of the webpage
document.title = "新标题";
In the above code, we use the document.title attribute to change the title of the webpage. Just fill in the new title you need in the part to the right of the equal sign.
2. Get the element and change the element content
<!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>In the above code, we set a paragraph in HTML with the id demo. In JavaScript, we get the element through the document.getElementById() method and then use the innerHTML attribute to change the content of the element.
3. Change the style of the element
<!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>In the above code, we set the font size and color of the demo element in the style tag. In JavaScript, we use element.style.property to change the style properties of an element. Where element refers to the element we want to change the style of, and property refers to the style attributes to be changed, such as fontSize and color.
4. Replace the image
<!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>In the above code, we set an image in HTML and obtain the image through the id. In JavaScript, we define a changeImage function that changes the src attribute of the image when the button is clicked, thereby replacing the image.
The above are some basic methods of setting up web pages using JavaScript. Due to the powerful functions of JavaScript, we can also implement advanced functions such as form validation, Ajax data interaction, canvas drawing, etc. through JavaScript. I hope this article will be helpful to readers and add richer interactive effects to your web pages.
The above is the detailed content of How to set up a web page with javascript. For more information, please follow other related articles on the PHP Chinese website!