JS Tutorial For TrySky IT Center (Operation and Maintenance Center)

Written by Zhang Zhihong in 2021

GO NOW

01 Introduction

HTML是一种标记语言，用来结构化我们的网页内容并赋予内容含义，例如定义段落、标题和数据表，或在页面中嵌入图片和视频。

CSS 是一种样式规则语言，可将样式应用于 HTML 内容，例如设置背景颜色和字体，在多个列中布局内容。

JavaScript 是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。（好吧，虽然它不是万能的，但可以通过简短的代码来实现神奇的功能。）

there are three ways to use the javascript：

在网页中使用<script>标签的方式插入JavaScript
直接在html元素标签中嵌入JavaScript
引入外部JavaScript文件

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的<body>和<head> 部分中。

02 First JS program

Here will show that how js work in html ,as you can seem, usually you need a “document” to start you code, you can think of it as an object.(It’s easy to understand if you learn an object-oriented programming language like Java.)
If you’re so confused, use it as a tool that you can use to run JavaScript statements.

//1.0
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("now,I want to write a js program for my html");
        document.write("<h1>now,I want to write a js program for my html in h1</h1>");
    </script>
</head>

<body>
    <h1>now,I write a normal h1 in html</h1>
</body>

</html>

In the code above, “document.write” was used to write sentences into web page, it is not different from which write in html. But it depend on JavaScript.

So, now you have learn how to use JS in first way: “1.在网页中使用<script>标签的方式插入JavaScript”

Here placed <script> lable in <head>, in fect, you can placed <script> lable in <head> or </body>, in most time, I suggest you write <script> lable in </body>, and put it at the bottom! If you use Link, keep it at the bottom!

（As for the bottom problem, you can see in the code below, When you put the <script> lable at the bottom, it will be the last to be interpreted.Sometimes you can put a few <script> lable in front, but if you have <script> lable that use ID, it’s a good idea to put the <script> lable at the bottom. Once you learn how to use ID in JS, you will understand it more deeply. ）

//2.0
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <h1>now,I write a normal h1 in html</h1>
    <script>
        document.write("now,I want to write a js program for my html");
        document.write("<h1>now,I want to write a js program for my html in h1</h1>");
    </script>
</body>
</html>

what about second way, I don’t think it is a good way to code, if you are intersted, you can learn it in Internet.

Now I would like to tell you third way: “3.引入外部JavaScript文件”
It is nothing different from CSS, just link it !

//3.0
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>I am a html sentence</p>
</body>
<script src="poem1.js"></script>
</html>

As you can see, we don’t use the “link” like CSS but “src” in <script> lable, and my external JS file named “poem1.js”, so I link it like what in code. Here is the code for my JS file.

//3.0
document.write("<p>I am an external JS file</p>")

And output is:

I am a html sentence

I am an external JS file

Now I add some code for my js file “poem1.js”: I add a “function”, it’s name is “myFunction”, and the content of this function is " document.getElementById(“poem”).innerHTML = "I am an external JS file by id "; "

The last sentence “myFunction()” means that I call（use） this function.

//4.0
document.write("<p>I am an external JS file</p>")

function myFunction() {
    document.getElementById("poem").innerHTML = "I am an external JS file by id";
}

myFunction()

What it mean is that put the sentence “I am an external JS file” in html, write it out. But the problem is where it put ?

hh you guess it! Writing it at where have ID named “poem”.
So, my html file is:

//4.0
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="poem"></p>
</body>
<script src="poem1.js"></script>

</html>

Output is:

As I mentioned earlier, if the ID is used but the <script> label is not placed at the bottom, then the following happens:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="poem1.js"></script>
</head>
<body>
    <p id="poem"></p>
</body>

</html>

And the output is:

JS doesn’t work！ Why?

Because HTML files are interpreted sequentially, when a <script> label is interpreted earlier (at which point the ID has not yet been seen by the interpreter), the interpreter will skip the JS statement because it cannot find the ID. So by putting JS at the bottom, you can make sure that you’ve explained all the ID before you run JS（<script> label）.

This is the end. Thank.

2021.1.13.by zhang

本文地址：https://blog.csdn.net/weixin_45726854/article/details/112574454