佳明公司第二季度收入超 13 億美元,戶外智慧手錶銷售良好
JavaScript 介紹
JavaScript 是網際網路上最流行的指令碼語言,這門語言可用於 HTML 和 web,更可廣泛用於伺服器、PC、膝上型電腦、平板電腦和智慧手機等裝置。
- JavaScript 是一種輕量級的程式語言。
- JavaScript 是可插入 HTML 頁面的程式設計程式碼。
- JavaScript 插入 HTML 頁面後,可由所有的現代瀏覽器執行。
- JavaScript 很容易學習。
JavaScript 用法
- HTML 中的指令碼必須位於
<script>
與</script>
標籤之間。 - 指令碼可被放置在 HTML 頁面的
<body>
<head>
部分中。
書寫位置
- 內嵌式:理論上js可以書寫在頁面的任意位置。
<script>alert("內嵌式");</script>
- 外鏈式:首先新建一個檔案型別為.js的檔案,然後在該檔案中寫js語句,通過script標籤對引入到html頁面中。
<script src="js檔案路徑地址">這裡不能寫js語句</script>
- 行內式:直接書寫在標籤身上,是一個簡寫的事件,所以又稱之為事件屬性。
<button onclick="alert('啦啦啦~');">點我</button>
JavaScript 輸出
- 使用 window.alert() 彈出警告框。
- 使用 document.write() 方法將內容寫到 HTML 文件中。
- 使用 innerHTML 寫入到 HTML 元素。
- 使用 console.log() 寫入到瀏覽器的控制檯。
JavaScript 關鍵字
JavaScript 關鍵字用於標識要執行的操作。
abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
JavaScript 註釋
JavaScript 註釋可用於提高程式碼的可讀性。
- 單行註釋以 // 開頭。
- 多行註釋以 /* 開始,以 */ 結尾。
JavaScript 變數
變數是用於儲存資訊的"容器"。
- 變數必須以字母開頭
- 變數也能以 $ 和 _ 符號開頭(不推薦這麼做)
- 變數名稱對大小寫敏感(y 和 Y 是不同的變數)
宣告變數
在 JavaScript 中建立變數通常稱為"宣告"變數。
// 使用var關鍵詞來宣告變數
var name;
// 賦值
name = "zhangsan";
// 宣告且賦值
var age = 25;
// 一條語句,多個變數
var name = "zhangsan", age = 25;
// 也可以這樣
var name = "zhangsan",
age = 18;
// 一條語句中宣告的多個變數不可以同時賦同一個值
var x,y,z = 1;
// x,y為 undefined,z為1
// 重新宣告變數,該變數的值不會丟失
var name = "zhangsan";
var name;
console.log(name); // zhangsan
JavaScript let 和 const
- let 宣告的變數只在 let 命令所在的程式碼塊內有效。
- const 宣告一個只讀的常量,一旦宣告,常量的值就不能改變。
JavaScript 資料型別
基本型別:
- 字串(String)
- 數字(Number)
- 布林(Boolean)
- 空(Null)
- 未定義(Undefined)
- Symbol
引用資料型別:
- 物件(Object)
- 陣列(Array)
- 函式(Function)
JavaScript 動態型別
意味著相同的變數可用作不同的型別
var x; // Undefined
var x = 5; // Number
var x = "Hello"; // String
宣告變數型別
使用關鍵詞 "new" 來宣告其型別:
var name = new String;
var age = new Number;
var status = new Boolean;
var cars = new Array;
var person = new Object;
JavaScript 字串
JavaScript 字串用於儲存和處理文字。
- 單引號或雙引號都可以
var name = "zhangsan";
var name = 'zhangsan';
- 可以在字串中使用引號,只要不匹配包圍字串的引號即可
var remarks = "My name is 'zhangsan'";
- 也可以在字串新增轉義字元來使用引號
var remarks = "My name is \"zhangsan\"";
- 可以使用索引位置來訪問字串中的每個字元:
var name = "zhangsan";
console.log(name[3]); // n
- 可以使用內建屬性 length 來計算字串的長度
var name = "zhangsan";
console.log(name.length); // 8
- 反斜槓是一個轉義字元。 轉義字元將特殊字元轉換為字串字元
\' 單引號
\" 雙引號
\\ 反斜槓
\n 換行
\r 回車
\t tab(製表符)
\b 退格符
\f 換頁符
- 可以使用 new 關鍵字將字串定義為一個物件
var name1 = "ZhangSan";
var name2 = new String("ZhangSan");
console.log(typeof name1); // string
console.log(typeof name2); // object
字串屬性
- constructor 返回建立字串屬性的函式
- length 返回字串的長度
- prototype 允許您向物件新增屬性和方法
字串方法
- charAt() 返回指定索引位置的字元
- charCodeAt() 返回指定索引位置字元的 Unicode 值
- concat() 連線兩個或多個字串,返回連線後的字串
- fromCharCode() 將 Unicode 轉換為字串
- indexOf() 返回字串中檢索指定字元第一次出現的位置
- lastIndexOf() 返回字串中檢索指定字元最後一次出現的位置
- localeCompare() 用本地特定的順序來比較兩個字串
- match() 找到一個或多個正則表示式的匹配
- replace() 替換與正則表示式匹配的子串
- search() 檢索與正則表示式相匹配的值
- slice() 提取字串的片斷,並在新的字串中返回被提取的部分
- split() 把字串分割為子字串陣列
- substr() 從起始索引號提取字串中指定數目的字元
- substring() 提取字串中兩個指定的索引號之間的字元
- toLocaleLowerCase() 根據主機的語言環境把字串轉換為小寫,只有幾種語言(如土耳其語)具有地方特有的大小寫對映
- toLocaleUpperCase() 根據主機的語言環境把字串轉換為大寫,只有幾種語言(如土耳其語)具有地方特有的大小寫對映
- toLowerCase() 把字串轉換為小寫
- toString() 返回字串物件值
- toUpperCase() 把字串轉換為大寫
- trim() 移除字串首尾空白
- valueOf() 返回某個字串物件的原始值
JavaScript 數字
- JavaScript 只有一種數字型別。數字可以帶小數點,也可以不帶
var x = 3.14;
var y = 34;
- 極大或極小的數字可以通過科學(指數)計數法來書寫
var x = 123e5;
var y = 123e-5;
JavaScript 布林
布林(邏輯)只能有兩個值:true 或 false。
Null
表示一個空物件引用。
Undefined
表示變數不含有值。
Symbol
Symbol 是 ES6 引入了一種新的原始資料型別,表示獨一無二的值
JavaScript 物件
JavaScript 物件是屬性和方法的容器。
物件定義
- 使用字元來定義和建立JavaScript物件
var person = {name:"zhangsan",sex:"男",age:25};
- 定義JavaScript物件可以跨越多行,空格跟換行不是必須的
var person = {
name:"zhangsan",
sex:"男",
age:25
};
物件屬性
- JavaScript 物件是鍵值對的容器
- 鍵值對通常寫法為 name : value (鍵與值以冒號分割)
- 鍵值對在 JavaScript 物件通常稱為 物件屬性。
訪問物件屬性
var person = {name:"zhangsan",sex:"男",age:25};
// 1. 物件.屬性
console.log(person.name);
// 2. 物件[屬性]
console.log(person["name"]);
物件方法
- 物件的方法定義了一個函式,並作為物件的屬性儲存。
- 物件方法通過新增 () 呼叫 (作為一個函式)。
訪問物件方法
var person = {
name:"zhangsan",
sex:"男",
age:25,
getAge:function(){
return this.age;
}
};
// 加括號,作為物件的一個方法,返回25
console.log(person.getAge());
// 不加括號,作為物件的一個屬性,返回函式的定義
console.log(person.getAge);
JavaScript 陣列
以下3種方式都可以建立陣列
var cars = new Array();
cars[0] = 20;
cars[1] = 14;
cars[2] = 31;
var cars = new Array( 20, 14, 31);
var cars = [ 20, 14, 31];
JavaScript 函式
函式是由事件驅動的或者當它被呼叫時執行的可重複使用的程式碼塊。
JavaScript 函式語法
function functionname(){
// 執行程式碼
}
呼叫帶引數的函式
- 在呼叫函式時,可以向其傳遞值,這些值被稱為引數。
- 引數可以在函式中使用,可以傳送任意多的引數,由逗號(,)分隔
- 變數和引數必須以一致的順序出現。第一個變數就是第一個被傳遞的引數的給定的值,以此類推。
function myFunction(var1,var2){
// 程式碼
}
帶有返回值的函式
function myFunction(){
var x=5;
return x;
}
JavaScript 作用域
作用域為可訪問變數,物件,函式的集合。
區域性變數
- 變數在函式內宣告,變數為區域性變數。
- 區域性變數:只能在函式內部訪問。
- 因為區域性變數只作用於函式內,所以不同的函式可以使用相同名稱的變數。
- 區域性變數在函式開始執行時建立,函式執行完後區域性變數會自動銷燬。
- 函式引數只在函式內起作用,是區域性變數。
全域性變數
- 變數在函式外定義,即為全域性變數。
- 全域性變數有 全域性作用域: 網頁中所有指令碼和函式均可使用。
- 如果變數在函式內沒有宣告(沒有使用 var 關鍵字),該變數為全域性變數。
- 全域性變數是 window 物件: 所有資料變數都屬於 window 物件。
變數生命週期
- JavaScript 變數生命週期在它宣告時初始化。
- 區域性變數在函式執行完畢後銷燬。
- 全域性變數在頁面關閉後銷燬。
JavaScript 事件
HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時, JavaScript 可以觸發這些事件。
常見HTML事件
- onchange:HTML 元素改變
- onclick:使用者點選 HTML 元素
- onmouseover:使用者在一個HTML元素上移動滑鼠
- onmouseout:使用者從一個HTML元素上移開滑鼠
- onkeydown:使用者按下鍵盤按鍵
- onload:瀏覽器已完成頁面的載入
JavaScript 運算子
算術運算子
+
加法-
減法*
乘法/
除法%
取模++
自增--
自減
賦值運算子
=
x=y+=
x+=y x=x+y-=
x-=y x=x-y*=
x=y x=xy/=
x/=y x=x/y%=
x%=y x=x%y
比較運算子
==
等於===
絕對等於!=
不等於!==
不絕等於>
大於<
小於>=
大於或等於<=
小於或等於
邏輯運算子
&&
and||
or!
not
條件運算子
- age > 18 ? true : false
JavaScript 條件語句
條件語句用於基於不同的條件來執行不同的動作。
if 語句
只有當指定條件為 true 時,使用該語句來執行程式碼
- 語法
if (condition)
{
當條件為 true 時執行的程式碼
}
if...else 語句
當條件為 true 時執行程式碼,當條件為 false 時執行其他程式碼
- 語法
if (condition)
{
當條件為 true 時執行的程式碼
}
else
{
當條件不為 true 時執行的程式碼
}
if...else if....else 語句
使用該語句來選擇多個程式碼塊之一來執行
- 語法
if (condition1)
{
當條件 1 為 true 時執行的程式碼
}
else if (condition2)
{
當條件 2 為 true 時執行的程式碼
}
else
{
當條件 1 和 條件 2 都不為 true 時執行的程式碼
}
switch 語句
使用該語句來選擇多個程式碼塊之一來執行
- 語法
switch(n)
{
case 1:
執行程式碼塊 1
break;
case 2:
執行程式碼塊 2
break;
default:
與 case 1 和 case 2 不同時執行的程式碼
}
- 工作原理:首先設定表示式 n(通常是一個變數)。隨後表示式的值會與結構中的每個 case 的值做比較。如果存在匹配,則與該 case 關聯的程式碼塊會被執行。請使用 break 來阻止程式碼自動地向下一個 case 執行。
- default 關鍵詞:使用 default 關鍵詞來規定匹配不存在時做的事情:
JavaScript 迴圈
迴圈可以將程式碼塊執行指定的次數。
for
迴圈程式碼塊一定的次數
- 語法
for (語句 1; 語句 2; 語句 3)
{
被執行的程式碼塊
}
語句 1 (程式碼塊)開始前執行
語句 2 定義執行迴圈(程式碼塊)的條件
語句 3 在迴圈(程式碼塊)已被執行之後執行
for (var i = 0; i < 10; i++){
console.log(i);
}
// 省略語句1,在迴圈開始前設定值
var i = 2;
for (; i < 10; i++){
console.log(i);
}
// 在語句1中初始化多個值
for (var i = 0,len=arr.length; i < len; i++){
console.log(i);
}
// 省略語句3
for (var i = 0; i < 10;){
console.log(i);
i++;
}
for/in
迴圈遍歷物件的屬性
var person = {fname:"Yang",lname:"TwoShuai",age:25};
for (x in person){
console.log(person[x]);
}
while
當指定的條件為true時迴圈指定的程式碼塊
- 語法
while (條件){
需要執行的程式碼
}
var i = 0;
while(i < 10) {
console.log(i);
i++;
}
do/while
該迴圈是 while 迴圈的變體。會在檢查條件是否為真之前執行一次程式碼塊,然後如果條件為真的話,就會重複這個迴圈
- 語法
do {
需要執行的程式碼
} while (條件);
var i = 0;
do {
console.log(i);
i++;
} while(i < 10);
JavaScript break和continue語句
- break 語句用於跳出迴圈。
// 僅會列印:0 1 2,當i=3的時候迴圈停止執行
for (var i = 0; i < 10; i++){
if (i == 3){
break;
}
console.log(i);
}
- continue 用於跳過迴圈中的一個迭代。
// 不會列印:3,當i=3的時候會直接執行下次迴圈
for (var i = 0; i < 10; i++){
if (i == 3){
continue;
}
console.log(i);
}
- JavaScript標籤 可以使用break和continue在多層迴圈的時候控制外層迴圈
outerloop:
for (var i = 0; i < 10; i++) {
innerloop:
for (var j = 0; j < 10; j++) {
if (j > 3) {
break;
}
if (i == 2) {
break innerloop;
}
if (i == 4) {
break outerloop;
}
console.log("i = " + i + " j = " + j);
}
}
JavaScript typeof
使用 typeof 操作符來檢測變數的資料型別。
JavaScript 型別轉換
- Number() 轉換為數字
- String() 轉換為字串
- Boolean() 轉換為布林值
JavaScript 正則表示式
正則表示式(英語:Regular Expression,在程式碼中常簡寫為regex、regexp或RE)使用單個字串來描述、匹配一系列符合某個句法規則的字串搜尋模式。
語法
/正則表示式主體/修飾符(可選)
使用字串方法
- search() 方法 用於檢索字串中指定的子字串,或檢索與正則表示式相匹配的子字串,並返回子串的起始位置。
var name = "zhangsan";
console.log(name.search("san"));
console.log(name.search(/San/i));
- replace() 方法 用於在字串中用一些字元替換另一些字元,或替換一個與正則表示式匹配的子串。
var str = "zhangsan";
var txt = str.replace(/san/i,"shan");
txt.replace("shan","san");
正則表示式修飾符
i:執行對大小寫不敏感的匹配
g:執行全域性匹配,查詢所有匹配而非在找到第一個匹配後停止
m:執行多行匹配
正則表示式模式
-
方括號用於查詢某個範圍內的字元
- [ABC] 查詢方括號之間的任何字元。
- [0-9] 查詢任何從 0 至 9 的數字。
- (X|Y) 查詢任何以 | 分隔的選項。
-
元字元是擁有特殊含義的字元
- \d 查詢數字。
- \s 查詢空白字元。
- \b 匹配單詞邊界。
- \uxxxx 查詢以十六進位制數 xxxx 規定的 Unicode 字元。
-
量詞
- n+ 匹配任何包含至少一個 n 的字串。
- n* 匹配任何包含零個或多個 n 的字串。
- n? 匹配任何包含零個或一個 n 的字串。
使用RegExp物件
在 JavaScript 中,RegExp 物件是一個預定義了屬性和方法的正則表示式物件。
- 使用 test()
test() 方法用於檢測一個字串是否匹配某個模式,如果字串中含有匹配的文字,則返回 true,否則返回 false。
var patt = /e/;
patt.test("The best things in life are free!");
/e/.test("The best things in life are free!");
- 使用 exec()
exec() 方法用於檢索字串中的正則表示式的匹配。該函式返回一個數組,其中存放匹配的結果。如果未找到匹配,則返回值為 null。
/e/.exec("The best things in life are free!");
JavaScript 錯誤
- try 語句測試程式碼塊的錯誤。
- catch 語句處理錯誤。
- throw 語句建立自定義錯誤。
- finally 語句在 try 和 catch 語句之後,無論是否有觸發異常,該語句都會執行。
try {
... // 異常的丟擲
} catch(e) {
... // 異常的捕獲與處理
} finally {
... // 結束處理
}
JavaScript 變數提升
- JavaScript 中,函式及變數的宣告都將被提升到函式的最頂部。
- JavaScript 中,變數可以在使用後宣告,也就是變數可以先使用再宣告。
x = 5;
console.log(x); // 5
var x;
初始化不會提升
JavaScript 只有宣告的變數會提升,初始化的不會。
console.log(x); // undefined
var x = 5;
JavaScript 嚴格模式
JavaScript 嚴格模式(strict mode)即在嚴格的條件下執行。
嚴格模式宣告
嚴格模式通過在指令碼或函式的頭部新增 "use strict";表示式來宣告。
嚴格模式的意義
- 消除Javascript語法的一些不合理、不嚴謹之處,減少一些怪異行為;
- 消除程式碼執行的一些不安全之處,保證程式碼執行的安全;
- 提高編譯器效率,增加執行速度;
- 為未來新版本的Javascript做好鋪墊。
嚴格模式的限制
- 不允許使用未宣告的變數
- 不允許刪除變數或物件
- 不允許刪除函式
- 不允許變數充滿
- 不允許使用八進位制
- 不允許使用轉義字元
- 不允許對只讀屬性賦值
- 不允許對一個使用getter方法讀取的屬性進行賦值
- 不允許刪除一個不允許刪除的屬性
- 變數名不能使用"eval"字串
- 變數名不能使用"arguments"字串
- 不允許使用以下這種語句:
"use strict";
with (Math){x = cos(2)}; // 報錯
- 由於一些安全原因,在作用域 eval() 建立的變數不能被呼叫:
"use strict";
eval ("var x = 2");
alert (x); // 報錯
- 禁止this關鍵字指向全域性物件
保留關鍵字
為了向將來Javascript的新版本過渡,嚴格模式新增了一些保留關鍵字
- implements
- interface
- let
- package
- private
- protected
- public
- static
- yield
JavaScript this
面嚮物件語言中 this 表示當前物件的一個引用。
但在 JavaScript 中 this 不是固定不變的,它會隨著執行環境的改變而改變。
- 在方法中,this 表示該方法所屬的物件。
- 如果單獨使用,this 表示全域性物件。
- 在函式中,this 表示全域性物件。
- 在函式中,在嚴格模式下,this 是未定義的(undefined)。
- 在事件中,this 表示接收事件的元素。
- 類似 call() 和 apply() 方法可以將 this 引用到任何物件。
var person = {
id : 1,
name : "zhangsan",
age : 25,
fullName : function() {
return this.name;
}
};
JavaScript JSON
JSON 是用於儲存和傳輸資料的格式。通常用於服務端向網頁傳遞資料 。
- JSON 英文全稱 JavaScript Object Notation(JavaScript 物件表示法)
- JSON 是一種輕量級的資料交換格式。
- JSON 是獨立的語言 *
- JSON 易於理解。
{"person" : [
{ "name":"zhangsan" ,"age":25},
{ "name":"lisi" , "age":30 },
{ "name":"wangwu" , "age":41 }
]}
JSON 語法規則
- 資料為 鍵/值 對。
- 資料由逗號分隔。
- 大括號儲存物件
- 方括號儲存陣列
JSON 物件
JSON 物件儲存在大括號內。
{"name":"zhangsan" ,"age":25}
JSON 陣列
JSON 陣列儲存在中括號內。
{ "person" : [
{ "name":"zhangsan" ,"age":25},
{ "name":"lisi" , "age":30 },
{ "name":"wangwu" , "age":41 }
]}
JSON.parse()
JSON.parse() 方法用於將字串轉換為 JavaScript 物件
var text = '{ "person" : [
{ "name":"zhangsan" ,"age":25},
{ "name":"lisi" , "age":30 },
{ "name":"wangwu" , "age":41 }
]}';
var obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.person[1].name + " " + obj.person[1].age;
JSON.stringify()
JSON.stringify() 方法用於將 JavaScript 值轉換為 JSON 字串
var str = {
"name":"zhangsan",
"age":25
}
jsonStr = JSON.stringify(str)
console.log(jsonStr);
JavaScript void
void 是 JavaScript 中非常重要的關鍵字,該操作符指定要計算一個表示式但是不返回值。
- 語法
void func()
javascript:void func()
或者
void(func())
javascript:void(func())
<a href="javascript:void(0)">單擊此處什麼也不會發生</a>
href="#"
與href="javascript:void(0)"
的區別
#
包含了一個位置資訊,預設的錨是#top
也就是網頁的上端。- 而
javascript:void(0)
, 僅僅表示一個死連結。
<a href="javascript:void(0);">點我沒有反應的!</a>
<a href="#pos">點我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位點</p>
- 在頁面很長的時候會使用 # 來定位頁面的具體位置,格式為:# + id。
- 如果要定義一個死連結請使用 javascript:void(0) 。
JavaScript 程式碼規範
所有的 JavaScript 專案適用同一種規範。
變數名
變數名推薦使用駝峰法來命名(camelCase)
var firstName = "zhangsan"
空格與運算子
通常運算子 ( = + - * / ) 前後需要新增空格
var x = 1 + 1;
程式碼縮排
通常使用 4 個空格符號來縮排程式碼塊
function add(x,y){
return x + y;
}
語句規則
- 簡單語句的通用規則:
- 一條語句通常以分號作為結束符。
var values = ["Volvo", "Saab", "Fiat"];
- 複雜語句的通用規則:
- 將左花括號放在第一行的結尾。
- 左花括號前新增一空格。
- 將右花括號獨立放在一行。
- 不要以分號結束一個複雜的宣告。
function add(x,y) {
return x + y;
}
物件規則
- 將左花括號與類名放在同一行。
- 冒號與屬性值間有個空格。
- 字串使用雙引號,數字不需要。
- 最後一個屬性-值對後面不要新增逗號。
- 將右花括號獨立放在一行,並以分號作為結束符號。
var person = {
firstName: "John",
lastName: "Doe",
age: 18,
eyeColor: "blue"
};
每行程式碼字元小於 80
- 為了便於閱讀每行字元建議小於數 80 個。
- 如果一個 JavaScript 語句超過了 80 個字元,建議在運算子或者逗號後換行。
document.getElementById("demo").innerHTML =
"Hello JavaScript.";
命名規則
- 變數和函式為小駝峰法標識, 即除第一個單詞之外,其他單詞首字母大寫(lowerCamelCase)
- 全域性變數為大寫(UPPERCASE)
- 常量(如 PI)為大寫(UPPERCASE)
HTML 載入外部 JavaScript 檔案
使用簡潔的格式載入JavaScript檔案(type屬性不是必須的)
<script src="myscript.js">
副檔名
- HTML 檔案字尾可以是 .html (或 .htm)。
- CSS 檔案字尾是 .css 。
- JavaScript 檔案字尾是 .js 。
使用小寫檔名
- 大多 Web 伺服器 (Apache, Unix) 對大小寫敏感: london.jpg 不能通過 London.jpg 訪問。
- 其他 Web 伺服器 (Microsoft, IIS) 對大小寫不敏感: london.jpg 可以通過 London.jpg 或 london.jpg 訪問。
- 必須保持統一的風格,建議統一使用小寫的檔名。