第09章-前端核心技術-JavaScript基礎語法
學習目標
-
掌握JavaScript基礎語法的使用
-
掌握JavaScript注釋的使用
-
掌握JavaScript變量的使用
重點 -
掌握JavaScript變量的類型和定義和使用
-
掌握JavaScript運算符的使用
重點難點 -
掌握JavaScript函數的簡單使用
重點
JavaScript引入
外部樣式
使用<script></script>標簽引入外部文件
<script src="/js.js" type="text/javascript" charset="utf-8"></script>
內部引入
使用<script></script>標簽直接寫代碼
1
2
3
<script type="text/javascript" charset="utf-8"> // 代碼 </script>
JavaScript 語句
單行注釋
單行注釋以 // 開頭。//后面的同一行的內容全部變成注釋，注釋會被瀏覽器忽略掉，而不執行，一般起解釋說明的作用
如：
1
2
3
4
5
<script type="text/javascript"> //單行注釋 //下面這條語句在瀏覽器中輸出並顯示“你好”兩個字 document.write("你好"); </script>
多行注釋
多行注釋以 /*開始，以 */結尾。
如：
1
2
3
4
5
6
7
<script type="text/javascript"> /** * 多行注釋 * 下面這條語句在瀏覽器中輸出並顯示“你好”兩個字 */ document.write("你好"); </script>
JavaScript 變量
變量是用於存儲信息的“容器”。作用就是用於存儲代碼中使用到的數據。
就像代數那樣
x=5
y=6
z=x+y
變量命名規則：
- 變量只能包含
字母、數字、_、$ - 變量必須不能以
數字開頭，因為大多數瀏覽器不支持 - 變量名稱對大小寫敏感（y 和 Y 是不同的變量）
變量創建
創建（聲明）變量，可使用var 關鍵詞來聲明變量，var可以省略
如：
var carname;
變量聲明之后，該變量是空的（它沒有值）。
變量賦值
賦值就是存儲，將某個值存儲這個變量中存儲起來，而且可以對一個變量反復賦值。
如：
1
2
name = "張三"; // 賦值： 將"張三"存入變量中
name = "李四"; // 賦值： 將"李四"存入變量中
最終變量name的值是最后一次存儲的值“你好”
注：也可以在聲明變量時對其賦值：
var name = "張三";
給name這個變量設置之為 “張三” ，也可以理解為把 “張三” 這個文字保存在 name 變量中。
變量使用
使用變量可以通過變量的名稱直接使用，可以用於計算、輸出顯示等
變量數據類型
JavaScript 數據類型有以下幾種
-
字符串（String）
-
數字(Number)
-
布爾(Boolean)
-
數組(Array)
-
對象(Object)
-
空（Null）
-
未定義（未賦值）（Undefined）
字符串
字符串用來存儲字符和文字的變量。使用**單引號**或**雙引號**：
如：
1
2
var name="阿百川";
var name='兵工廠';
您可以在字符串中嵌套使用單雙引號，只要不匹配包圍字符串的引號即可：
如：
1
2
3
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
數字
數字類型**只能**用來保存數字：
如：
1
2
var x1=34.00; //使用小數點來寫
var x2=34; //不使用小數點來寫
極大或**極小**的數字可以通過科學（指數）計數法來書寫：
如：
1
2
var y=123e5; // 12300000
var z=123e-5; // 0.00123
布爾
布爾常用於判斷或者設置狀態，布爾（邏輯）只能有兩個值：true 或 false。布爾類型可以轉換成0、1、‘0’、“1”等
如：
1
2
var x=true; // 1
var y=false; // 0
數組
數組用於保存多個數據，如會員的姓名、用戶名、密碼、手機號等等。
下面的代碼創建名為 user 的數組：
1
2
3
4
5
var user = new Array();
user[0]="張三";
user[1]="zhang";
user[2]="123456";
user[3]="13592769132";
或者
var user = new Array("張三"," zhang ","123456","13592769132");
或者
var user = ["張三"," zhang ","123456","13592769132"];
數組下標從0開始，所以第一個是 [0]，第二個是 [1]，以此類推。
對象
對象不僅可以保存普通數據，還可以保存代碼操作功能。
1
2
3
4
5
6
class studennt{
constructor(x,y){
this.x = x;
this.y = y;
}
}
Undefined 和 Null
Undefined 表示基本數據類型不含有值。
null 表示引用 數據類型沒有值。
JavaScript 運算符
賦值運算符
假設 y = 5;，x = 10
| 運算符 | 例子 | 等同於 | 運算結果 |
|---|---|---|---|
= |
x=y |
x=5 |
|
+= |
x+=y |
x=x+y |
x=15 |
-= |
x-=y |
x=x-y |
x=5 |
*= |
x*=y |
x=x*y |
x=50 |
/= |
x/=y |
x=x/y |
x=2 |
%= |
x%=y |
x=x%y |
x=0 |
算術運算符
假設 y = 5;
| 運算符 | 描述 | 例子 | x 運算結果 | y 運算結果 |
|---|---|---|---|---|
+ |
加法 | x=y+2 |
7 | 5 |
- |
減法 | x=y-2 |
3 | 5 |
* |
乘法 | x=y*2 |
10 | 5 |
/ |
除法（商） | x=y/2 |
2.5 | 5 |
% |
取模（求余數） | x=y%2 |
1 | 5 |
++ |
自增 | x=++y |
6 | 6 |
x=y++ |
5 | 6 | ||
-- |
自減 | x=--y |
4 | 4 |
x=y-- |
5 | 4 |
比較運算符
| 運算符 | 描述 | 比較 | 返回值 |
|---|---|---|---|
== |
等於（**值**） | x==8 |
false |
x==5 |
true | ||
=== |
絕對等於（**值**和**類型**均相等） | x==="5" |
false |
x===5 |
true | ||
!= |
不等於 | x!=8 |
true |
!== |
不絕對等於（值和類型有一個不相等，或兩個都不相等） | x!=="5" |
true |
x!==5 |
false | ||
> |
大於 | x>8 |
false |
< |
小於 | x<8 |
true |
>= |
大於或等於 | x>=8 |
false |
<= |
小於或等於 | x<=8 |
true |
邏輯運算符
| 運算符 | 描述 | 例子 |
|---|---|---|
&& |
And 與 | (x < 10 && y > 1)為 true |
|| |
Or 或 | (x==5 \|\| y==5) 為 false |
! |
Not 非 | !(x==y) 為 true |
條件運算符
條件運算符可以用於艱簡單的判斷
語法
var name = condition ? value1 : value2;
如：
如果變量 age 中的值小於 18，則向變量 voteable 賦值 “年齡太小”，否則賦值 “年齡已達到”。
var teable = ( age <18 ) ? "年齡太小" : "年齡已達到";
| 運算類型 | 運算符 |
|---|---|
| 圓括號 | ( ) |
| 成員訪問 | . |
| 需計算的成員訪問 | [ ] |
new (帶參數列表) |
new ( ) |
| 函數調用 | ( ) |
new (無參數列表) |
new |
| 后置遞增(運算符在后) | a++ |
| 后置遞減(運算符在后) | a-- |
| 邏輯非 | ! |
| 前置遞增 | ++a |
| 前置遞減 | --a |
typeof |
typeof |
void |
void |
delete |
delete |
await |
await |
| 冪 | ** |
| 乘法 | * |
| 除法 | / |
| 取模 | % |
| 加法 | + |
| 減法 | - |
| 按位左移 | << |
| 按位右移 | >> |
| 無符號右移 | >>> |
| 小於 | < |
| 小於等於 | <= |
| 大於 | > |
| 大於等於 | >= |
in |
in |
instanceof |
instanceof |
| 等號 | == |
| 非等號 | ~= |
| 全等號 | === |
| 非全等號 | !== |
| 按位與 | & |
| 按位異或 | ^ |
| 按位或 | | |
| 邏輯與 | && |
| 邏輯或 | || |
| 條件運算符 | ? : |
| 賦值 | = |
+= |
+= |
-= |
-= |
*= |
*= |
/= |
/= |
%= |
%= |
<<= |
<<= |
>>= |
>>= |
>>>= |
>>>= |
&= |
&= |
^= |
^= |
|= |
|= |
yield |
yield |
yield* |
yield* |
| 展開運算符 | ... |
| 逗號 | , |
如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//1、定義（申明）變量
var a;
var b;
var c;
var t;
//2、賦值
a = "1";//string
b = 45;//number
c = true;//1
//3、使用
// 1
t = (!c || a > 100) || b < 100 && b > a || a >= 6 && b !== a;
document.write(t);//true
//2
t = c && (a != c && b < 100 || b > 1 && (!c || a == c) && a === c)?a++ - --b:!c;
document.write(t);//false
JavaScript 函數基礎
函數就是包裹在花括號中的**代碼塊**，使用了關鍵詞 function：關鍵詞 function 必須是小寫的
1
2
3
function functionname(){
執行代碼
}
函數的使用，通過方法名+括號來使用方法，如：
functionname();
這句代碼就是使用方法名為**functionname**的方法，必須加上(),()是函數的標志，不可不寫。
方法最簡單的功能就是將一部分代碼放到一起，組成一個代碼快，在需要的時候直接執行。因此，方法在寫好后是不會自動執行的，除非使用方法，方法里面的代碼才會被執行
可以在HTML元素的點擊事件中使用方法，HTML的點擊事件就是onclick屬性。如：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在onclick屬性中使用方法-->
<button onclick="sum()">點擊可計算10+20的結果</button>
</body>
<script type="text/javascript"> //通過關鍵字function來定義方法，方法名后面必須跟（） function sum(){ var a = 10; var b = 20; var c = a + b; alert(c) } </script>
</html>
效果圖
JavaScript與HTML
JavaScript只有配合HTML才能發揮其最大的作用，而document對象就是JavaScript和HTML相互結合的關鍵點。通過document對象可以獲取和設置HTML元素，實現各種功能。如：
通過ID屬性獲取HTML元素，只能獲取第一個：
var e = document.getElementById('name');
如果是表單輸入元素，使用value屬性來獲取和設置元素的值：
1
2
var v = document.getElementById('name').value;
document.getElementById('name').value ='張三465';
如果是普通雙標簽，則使用innerHTML或者innerText來獲取和設置元素的內容
1
2
var v = document.getElementById('name').innerHTML;
document.getElementById('name').innerHTML = '張三';
或者
1
2
var v = document.getElementById('name').innerText;
document.getElementById('name').innerText = '張三';
作業
實現如下效果
點擊添加后將上面輸入框的文字**追加**到下面的文本域中
實現如下效果
點擊上面的按鈕，將按鈕上的文字添加到下面的園內顯示
判斷下面的輸出結果
求商
求前面這個數除以后面那個數的余數，alert彈窗輸出結果
</article>