JavaScript系列--基礎語法

前言

1、今天是2021.9.30號晚上9點半
2、明天是國慶節，國慶節會更新JS內容和一個綜合案例
3、參考尚硅谷Java版本學習一遍，發布所有相關內容
4、參考C Primer Plus學習一遍，發布所有相關的內容
5、以上內容全部10.7號發布

1、簡述

概念：一門客戶端腳本語言

? 運行在客戶端瀏覽器中的，每一個瀏覽器都有JS的決議殷勤

? 腳本語言：不需要編譯，直接就可以被瀏覽器決議執行了

功能：

? 可以來增強user與html的互動程序，可以來控制html元素,

簡而言之就是讓頁面動起來!

發展史：

? 聽了好久，就是JS起來的很艱辛，略過了…D

只需要知道這個即可

Javascript = ECMAscript + JavaScript自己特有的（BOM+DOM）

2、基礎語法

與html結合的方式

內部JS

? 上一個代碼來解釋，通過定義script標簽來寫內部js代碼

<script>
    alert("Hello World!");
</script>

外部JS

<script src="../JS/a.js"></script>

路徑要寫對

注意點

3、注釋

單行注釋

//注釋內容

多行注釋

/* 注釋內容 */

可以看出和Java的注釋是一樣的

4、資料型別

原始資料型別（基本資料型別）

• number：數字/小數/NaN（Not a number：一個不是數字的數字型別）
• string：字串，字符/字串 “abc” “a” ‘abc’
• boolean: true和false
• null:一個物件為空的占位符
• undefined:未定義，如果一個變數沒給初始化值，則會被默認賦值為undefined

參考資料型別（物件）

5、變數

變數：一小塊存盤資料的記憶體空間

Java語言是強型別語言，而JS是弱型別

? 強型別就是定義變數的資料型別，只能存盤固定型別的資料

? 弱型別就是不定義變數的資料型別，可以存放任意型別的資料

6、運算子

JS里的運算子和Java中的使用很相似，可以類比進行學習

一元運算子

只有一個運算元的運算子

++ ,-- ,+(正號)

在JS中，如果運算元不是運算子所要求的型別，那么js引擎會自動的將運算元進行型別轉換

? String轉number，按照字面值轉換，如果字面值不是數字，則轉為NaN（不是數字的數字型別）

var str = +"123";
document.write(typeof (str)+ "<br>");
document.write(str + 1)
結果為
number
124

? boolean轉number：true轉為1，false轉為0

var flag = +true;
document.write(typeof (flag) + "<br>");
document.write(flag);

結果為
number
1

算數運算子

? + - * / %

比較簡單，看例子
var a = 3;
var b = 5;
document.write(a+b+ "<br>");
document.write(a-b+ "<br>");
document.write(a*b+ "<br>");
document.write(a/b+ "<br>");
document.write(a%b+ "<br>");

8
-2
15
0.6
3

賦值運算子

= += -+

和Java一致，不在演示，會在后面的實體中用到

比較運算子

> < >= <= == ===(全等于)

比較方式：

? 型別相同：直接比較

? 型別不同，先轉換后比較

document.write((2 > 6) + "<br>");
document.write(("4" < 6) + "<br>");
document.write(("abc" > "abd") + "<br>");
document.write(("123" === 123) + "<br>");

false
true
false
false

字符跟字符比較是按照字典排序進行比的誰在后面誰大

這里著重提下===，全等于，在比較之前，先判斷型別，如果型別不一樣直接回傳false

邏輯運算子

&& || ！

類比java中的用法

三元運算子

? :

判斷運算式的值，如果為true回傳1，為false回傳0
<script>
    var a = 3;
    var b = 4;
    
var c = a > b ? 1 : 0;
alert(c)

</script>

特殊語法

JS代碼可以不帶分號也可以執行

定義變數的時候，加var的是區域變數，不加var的是全域變數

7、流程控制陳述句

if…else…

和java一樣

switch

在java中，switch可以接受的資料型別：byte、int、shor，列舉，String（1.7）

在JS中，switch可以接受任意型別

<script>
    var a;
    switch (a) {
        case 1:
            alert("number");
            break;
        case "abc":
            alert("String");
            break;
        case true:
            alert(true);
            break;
        case null:
            alert("null");
            break;
        case undefined:
            alert("undefined");
            break;
    }
</script>

a=什么，網頁就彈出什么

while

var sum = 0;
var num = 1;

while (num <= 100){
    sum += num++;
}

alert(sum);

5050

do…while

和java一樣

for

for回圈中，和Java不同的是變數是var定義的不在是int了

var sum = 0;
for (var i = 0; i <= 100;i++){
    sum += i;
}
alert(sum);

for回圈嵌套表格

<style>
    td{
        border: 1px solid;
    }
</style>

<script>
    document.write("<table align='center'>");
    // 第一層控制行，第二層控制列
    for (var i = 1; i < 10; i++) {
        document.write("<tr>");
        for (var j = 1; j <=i; j++) {
            document.write("<td>");

            document.write(i + "*" + j + "=" + i*j+"&nbsp");

            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>