JavaScript Usage
Scripts in HTML must be located between the <script> and </script> tags.
Scripts can be placed in the <body> and <head> sections of the HTML page.
<script> tag
To insert JavaScript into an HTML page, use the <script> tag.
<script> and </script> tell JavaScript where to start and end.
The lines between <script> and </script> contain JavaScript:
<script>
alert("我的第一个 JavaScript");
</script>You don’t need to understand the code above. Just understand that the browser interprets and executes the JavaScript code between <script> and </script>
## Older examples may use type="text/javascript" in the <script> tag. This is no longer necessary. JavaScript is the default scripting language in all modern browsers as well as in HTML5.
JavaScript in<body>
In this example, JavaScript writes text to the HTML's <body> when the page loads:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a title</h1>");
document.write("<p>This is a paragraph</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html> JavaScript functions and events
The JavaScript statements 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 clicks a button.
If we put JavaScript code into a function, we can call the function when the event occurs.
You will learn more about JavaScript functions and events in later chapters.
JavaScript in <head> or <body>
You can put an unlimited number of scripts in your HTML document.
The script can be in the <body> or <head> section of the HTML, or both.
The usual approach is to put the function in the <head> section, or at the bottom of the page. This allows them to be placed in the same location without interfering with the content of the page.
JavaScript function in<head>
In this example, we place a JavaScript function in the <head> of the HTML page ; part.
This function will be called when the button is clicked:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>
##JavaScript function in<body>
In this example, we place a JavaScript function into the <body> section of the HTML page.
This function will be called when the button is clicked:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>My first web</h1>
<p id="demo">This is a paragraph</p>
<button type="button" onclick="myFunction()">点击这里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>External JavaScript
You can also save the script to in 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 <script> tag:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
</body>
</html>
Next Section
