Detailed explanation of the combination of JavaScript and HTML

Home

Web Front-end

JS Tutorial

Detailed explanation of the combination of JavaScript and HTML_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:30 PM

htmljavascript

JavaScript scripts in HTML must be placed between the <script> and </script> tags. JavaScript scripts can be placed in the

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

<!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 id="This-is-a-heading">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 or
You can put an unlimited number of scripts in your HTML document. Scripts can be in the

or sections of HTML, or both in
in two parts. A common practice is to put functions in the 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
In this example, we place a JavaScript function into the

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 id="My-Web-Page">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
In this example, we place a JavaScript function into the

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 id="My-First-Web-Page">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

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 <script> tag. If there is a lot of JavaScript code, I <br /> We advocate the use of external JavaScript methods, and generally we also use a separate method to connect to HTML documents. <br /> Example<br /> HTML code: <br /> </script>

<!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 id="My-Web-Page">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 <script> tag. </script> External scripts cannot contain <script> tags. <br /> </script>

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