How to import JavaScript into html-Front-end Q&A-php.cn

Table of Contents

PHP中文网：https://www.php.cn/

PHP Chinese website: https ://www.php.cn/

Home

Web Front-end

Front-end Q&A

How to import JavaScript into html

青灯夜游

Oct 14, 2021 pm 01:54 PM

html javascript

There are two ways to import JavaScript into html: 1. Use the "<script>js code</script>" statement to embed JavaScript code in the HTML page; 2. In HTML, use the src of the script tag Properties are imported into external JavaScript script files.

How to import JavaScript into html

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to import JavaScript into HTML documents

1. Embed JavaScript code in HTML documents

Embedding JavaScript scripts in HTML pages requires the use of the <script> tag. Users can directly write JavaScript code in the <script> tag. The specific steps are as follows. </script>

Step 1, create a new HTML document and save it as test.html.

Step 2, insert a <script> tag inside the <head> tag. </script>

Step 3, set the type="text/javascript" attribute for the <script> tag. </script>

The default script type of the <script> tag in modern browsers is JavaScript, so the type attribute can be omitted; if compatibility with earlier versions of browsers is considered, the type attribute needs to be set. </script>

Step 4. Enter the JavaScript code in the <script> tag</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript程序</title>
    <script type="text/javascript">
        document.write("<h1 id="PHP中文网-https-www-php-cn">PHP中文网：https://www.php.cn/</h1>");
    </script>
</head>
<body></body>
</html>

Copy after login

Step 5. Save the web page document and preview it in the browser. The display effect is as shown in the figure. In JavaScript scripts, document represents a web page document object; document.write() represents calling the write() method of the Document object to write an HTML string in the current web page source code."<h1 id="PHP-Chinese-website-https-www-php-cn">PHP Chinese website: https ://www.php.cn/</h1>".

How to import JavaScript into html

2. Introducing external JavaScript code script files into HTML documents

JavaScript programs can not only be placed directly in HTML documents, It can also be placed in a JavaScript script file. JavaScript script files are text files with a .js extension that can be edited using any text editor.

Commonly used text editors include Notepad in Windows systems, Vim, Sublime Text, Notepad, etc. in Linux systems. For beginners, it is recommended to use a text editor to write JavaScript code first, which will help us remember JavaScript syntax, keywords, functions, etc. When it comes to the actual development stage, you can choose some more professional code editors, such as Visual Studio Code (referred to as "VS Code"), WebStorm (paid), Atom, etc., which can improve development efficiency.

The steps to create a new JavaScript file are as follows.

Step 1, create a new text file and save it as test.js. Note that the extension is .js, which indicates that the text file is a JavaScript type file.

Step 2, open the test.js file and write the following JavaScript code in it.

alert("PHP中文网：https://www.php.cn/");

Copy after login

Step 3, save the JavaScript file. It is recommended to put JavaScript files and web page files in the same directory. In the above code, alert() represents the method of the Window object. Calling this method will pop up a prompt dialog box displaying the parameter string "Hi, JavaScript!".

JavaScript files cannot run independently and need to be imported into the web page and executed through the browser. JavaScript files can be imported using the <script> tag. </p><p>Step 4, create a new HTML document and save it as test.html. </p><p>Step 5, insert a <script> tag inside the <head> tag. Define the src attribute and set the attribute value to a URL string pointing to an external JavaScript file. The code is as follows: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script type="text/javascript" src="test.js"></script></pre><div class="contentsignin">Copy after login</div></div><p> Step 6. Save the web page document and preview it in the browser. The display effect is as shown in the figure. Note: When using the <script> tag to include external JavaScript files, the default file type is Javascript. Therefore, regardless of whether the loaded file has a .js extension or not, the browser will parse it as a JavaScript script. </script>

How to import JavaScript into html

The <script> tag that defines the src attribute should no longer contain JavaScript code. If the code is embedded, only the external JavaScript file will be downloaded and executed, and the embedded code will be ignored. </script>

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to import JavaScript into html. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

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