JavaScript usage

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>
alert("My first JavaScript ");
</script>

You don't need to understand the above code. Just understand that the browser interprets and executes the JavaScript code between <script> and </script>.

##<body> JavaScript

in In this example, JavaScript will write text to the <body> of the HTML when the page loads:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文網(wǎng)(php.cn)</title>
</head>
<body>
<p>
    JavaScript 能夠直接寫入 HTML 輸出流中：
</p>
<script>
    document.write("<h1>這是一個(gè)標(biāo)題</h1>");
    document.write("<p>這是一個(gè)段落。</p>");
</script>
<p>
    您只能在 HTML 輸出流中使用 <strong>document.write</strong>。
    如果您在文檔已加載后使用它（比如在函數(shù)中），會覆蓋整個(gè)文檔。
</p>
</body>
</html>

Run the program to try it

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 clicks a button.

If we put JavaScript code into a function, we can call the function when the event occurs.

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> portion of the HTML page.

This function will be called when the button is clicked:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>PHP中文網(wǎng)(php.cn)</title>
    <script>
        function myFunction(){
            document.getElementById("demo").innerHTML="我的第一個(gè) JavaScript 函數(shù)";
        }
    </script>
</head>
<body>
<h1>我的 Web 頁面</h1>
<p id="demo">一個(gè)段落。</p>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
</body>
</html>

Run the program to try it

<body> JavaScript function in
In this example, we place a JavaScript function in the < of the HTML page ;body> section.

This function will be called when the button is clicked:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文網(wǎng)(php.cn)</title> 
</head>
<body>
<h1>我的第一個(gè) Web 頁面</h1>
<p id="demo">一個(gè)段落。</p>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
<script>
function myFunction(){
document.getElementById("demo").innerHTML="我的第一個(gè) JavaScript 函數(shù)";
}
</script>
</body>
</html>

Run the program to try it

External JavaScript
You 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 <script> tag:

Example

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>PHP中文網(wǎng)（php.cn）</title> 
</head>
<body>
<h1>我的 Web 頁面</h1>
<p id="demo">一個(gè)段落。</p>
<button type="button" onclick="myFunction()">點(diǎn)擊這里</button>
<p><b>注釋：</b>myFunction 保存在名為 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
</body>
</html>

You can place the script in <head> or <body> and the actual effect will be exactly the same as if you wrote the script in the <script> tag.

myScript.js file code is as follows:

function myFunction(){
document.getElementById("demo").innerHTML="My first JavaScript function";
}

Note: External scripts cannot contain <script> tags.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <script> function myFunction(){ document.getElementById("demo").innerHTML="你好，我是你的第一個(gè) JavaScript 函數(shù)哦"; } </script> </head> <body> <h1>JavaScript</h1> <p id="demo">我是一個(gè)段落哦</p> <button type="button" onclick="myFunction()">點(diǎn)擊這里</button> </body> </html>

submit Reset Code

Automatic operation