JavaScript Intro For Trysky.OMC
技術標籤：TrySkyhtmljavascriptjshtml5
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.)
//1.0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 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