Home > Article > Web Front-end > Detailed explanation of the combination of JavaScript and HTML
Detailed explanation of the combination of JavaScript and HTML
- 不言Original
- 2018-05-07 15:51:182204browse
This article mainly introduces the method of combining JavaScript and HTML. It uses examples to introduce to you how to combine JavaScript and HTML. The content is very detailed. Interested friends can refer to
HTML The JavaScript script must be placed between the 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 tags. JavaScript scripts can be placed in the 6c04bd5ca3fcae76e30b72ad730ca86d tag and 93f0f5c25f18dab9d176bd4f6de5d30e tag of the HTML page. This depends on the situation. Generally, Within the 93f0f5c25f18dab9d176bd4f6de5d30e tag.
1. 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag
If you need to insert JavaScript script into an HTML page, please use the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 tell JavaScript where to start
and end. The lines of code between 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 contain JavaScript:
<span style="font-size:18px;"><script type="text/javascript">
alert("欢迎来到JavaScript世界！！！");
</script></span> You don’t need to understand the above code. Just understand that browsers interpret and execute the JavaScript between 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0. Those old
old instances may use type="text/javascript" in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. This is no longer necessary. JavaScript is the default scripting language in all modern browsers
as well as HTML5. For those who have just learned the JavaScript language, you can use it!
2. JavaScript in 6c04bd5ca3fcae76e30b72ad730ca86d
In this example, JavaScript will write text to the 6c04bd5ca3fcae76e30b72ad730ca86d of HTML when the page is loaded:
Example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript脚本语言</title>
>
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>We don’t care about how to write and run the JavaScript code, let’s look at the running results first:
3. JavaScript functions and events
The JavaScript statement in the above example will be executed when the page is loaded. Often, we need to execute code when an event occurs, such as when the user
clicks a button. If we put the JavaScript code inside a function, we can call that function when an event occurs.
4. JavaScript in 93f0f5c25f18dab9d176bd4f6de5d30e or 6c04bd5ca3fcae76e30b72ad730ca86d
You can put an unlimited number of scripts in the HTML document. The script can be in the 6c04bd5ca3fcae76e30b72ad730ca86d or 93f0f5c25f18dab9d176bd4f6de5d30e section of HTML, or both. A common practice is to put functions in the 93f0f5c25f18dab9d176bd4f6de5d30e section, or at the bottom of the page. In this way, they can be placed in the same position without
interfering with the content of the page.
5. JavaScript function in 93f0f5c25f18dab9d176bd4f6de5d30eIn this example, we place a JavaScript function in the 93f0f5c25f18dab9d176bd4f6de5d30e part of the HTML page. This function will be called when the button is clicked:
Example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript脚本语言</title>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>The running result is:
In this example, we place a JavaScript function into the < of the HTML page ;body> section. This function will be called when the button is clicked: Example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript脚本语言</title>
</head>
<body>
<h1>My First Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script type="text/javascript">
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>The result of the operation is the same as the result of the above five!
Tip: We put the JavaScript at the bottom of the page code, so that we can ensure that the script is executed after the e388a4556c0f65e1904146cc1a846bee element is created. 7. External JavaScript
We can also save the script to an external file. External files often contain code used by multiple web pages. The file extension for external JavaScript files is .js. If you need to use an external file, please set the .js file in the "src" attribute of the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. If there is a large amount of JavaScript code, we advocate using the external JavaScript method, and generally we also use separate way to connect to the HTML document.
Example
HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript脚本语言</title> <script type="text/javascript" src="/js/myScript.js"></script> </head> <body> <h1>My Web Page</h1> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">点击这里</button> <p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p> </body> </html>
myScript.js code:
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
} The running result is consistent with the above!
Tips:
It is possible to reference script files in External scripts cannot contain 3f1c4e4b6b16bbbd69b2ee476dc4f83a tags. The above is the method of combining JavaScript and HTML. I hope it will be helpful to everyone's learning.
The difference between HTML and JavaScript links
Introduction to how JavaScript and html5 implement canvas drawing circular patterns
The above is the detailed content of Detailed explanation of the combination of JavaScript and HTML. For more information, please follow other related articles on the PHP Chinese website!