Home >Web Front-end >JS Tutorial >Detailed explanation of the combination of JavaScript and HTML_javascript skills

Detailed explanation of the combination of JavaScript and HTML_javascript skills

WBOYOriginal: 2016-05-16 15:30:291403browse

JavaScript scripts in HTML must be placed between the 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 tags. JavaScript scripts can be placed in the 6c04bd5ca3fcae76e30b72ad730ca86d tags and 93f0f5c25f18dab9d176bd4f6de5d30e tags of the HTML page, depending on the situation. It depends, usually placed within the 93f0f5c25f18dab9d176bd4f6de5d30e tag.
1. 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag
If you need to insert the JavaScript script on the HTML page, use & lt; script & gt; label. 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 will tell JavaScript where to start
and end. The line between 3f1c4e4b6b16bbbd69b2ee476dc4f83a and 2cacc6d41bbb37262a98f745aa00fbf0 contains 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
Older instances may use type="text/javascript" in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. This is no longer necessary. JavaScript is present in all modern browsers
And the default scripting language in HTML5. For those who have just learned the JavaScript language, you can use it!
2. JavaScript in 6c04bd5ca3fcae76e30b72ad730ca86d
In this example, JavaScript writes text to the HTML's 6c04bd5ca3fcae76e30b72ad730ca86d when the page loads:
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 results first:

3. JavaScript functions and events
The JavaScript statement in the above example will be executed when the page is loaded. Usually, we need to execute code when an event occurs, such as when the user
When the button is clicked. 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 your HTML document. Scripts can be in the 6c04bd5ca3fcae76e30b72ad730ca86d or 93f0f5c25f18dab9d176bd4f6de5d30e sections of HTML, or both in
in two parts. A common practice is to put functions in the 93f0f5c25f18dab9d176bd4f6de5d30e section, or at the bottom of the page. This way they can be placed in the same location,
Does not interfere with the content of the page.

5. JavaScript functions in 93f0f5c25f18dab9d176bd4f6de5d30e
In this example, we place a JavaScript function into the 93f0f5c25f18dab9d176bd4f6de5d30e section 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 result of running is:

The effect after clicking the button is:

6. JavaScript function in 6c04bd5ca3fcae76e30b72ad730ca86d
In this example, we place a JavaScript function into the 6c04bd5ca3fcae76e30b72ad730ca86d section 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>  
</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 running 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. File extension for external JavaScript files
The exhibition name 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 lot of JavaScript code, I
We advocate the use of external JavaScript methods, and generally we also use a separate method to connect to HTML documents.
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!
Tip: in the & lt; head or & lt; body & gt; The actual running effect is exactly the same as when you write the script in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag. 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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple example demonstration of jquery implementation of form validation_jqueryNext article：Simple example demonstration of jquery implementation of form validation_jquery

See more

Detailed explanation of the combination of JavaScript and HTML_javascript skills

Related articles