2. How to use JavaScript

The role of frequency teaching is limited to students who need to get started with 0 basics. Later bloggers will plan other courses

If you don't understand the video or have any questions, please contact me directly

You can also join the self-study study group, learn with peers, and communicate more conveniently

Vx search official account [front-end new weather] has my WeChat, please be sure to fill in the remarks, otherwise it will not be approved

Courseware code address GitHub - haojiey/js-Introductory-courseware: JavaScript zero-based introductory courseware

what can be learned

How to import js
The import location of js
How to write js

JavaScript import method

Embed JavaScript code in HTML

Embedding JavaScript scripts in HTML pages requires the use of the <script> tag, and writing JavaScript code directly in the <script> tag

Create a new HTML document
Write a <script> tag inside the <body> tag
Add an attribute type="text/javascript" to the <script> tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
     <script type="text/javascript">
        document.write('hello 小木')
    </script>
</body>
</html>

document.write() is an output method, which will be mentioned later, here is only for viewing the js embedding effect

Introducing JavaScript scripts into HTML

JavaScript can be placed directly in the HTML document or in a JavaScript script file. JavaScript script files are text files with a .js extension that can be edited with any text editor.

Introduce scripts through the src attribute of the <script> tag

Create a new js script
Write a <script> tag inside the <body> tag in html
Add an attribute type="text/javascript" to the <script> tag
Introduce the script in the src attribute of the <script> tag

html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript" src="./index.js"></script>
</body>
</html>

js file

document.write('hello 小木')

JavaScript code location

When a browser parses an HTML document, the document flow is parsed in a top-down manner. The execution order of JavaScript scripts is also determined according to the position of the <script> tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write('1')
    </script>
</head>
<body>
    <script>
        document.write('2')
    </script>
    <script type="text/javascript" src="./index.js"></script>
    <script>
        document.write('3')
    </script>
</body>
</html>
<script>
    document.write('4')
</script>

My suggestion to everyone is to write the js code at the end of the html code, because js needs to operate label elements, and top-down execution will cause some unobtainable tags to appear in js question