前端三劍客—–>JavaScript(基礎語法)

目錄

一,JavaScript基礎概念

1.JavaScript是什麼

2.JavaScript作用

3.JavaScript的應用場景

4.JavaScript運行過程

5.JavaScript 的組成

二,JavaScript的基礎語法

1.JavaScript的書寫形式

1)行內式

2)內嵌式

3)外部式

4)註釋

2.輸入輸出 

1)輸入(prompt)

2)輸出(alert)

3)輸出(console.log)

4)補充解釋

 三,語法概覽

1.變量的使用

1)基本用法

2)理解動態類型數組

2.基本數據類型

1)js中內置的幾種類型

2)number數字類型

3)string字符串類型

4)Boolean佈爾類型

5)undefined未定義數據類型

6)null空值類型

3.運算符

四,條件語句

1.if語句

1)基本語法

2)三目運算符

3)Switch

2.循環語句

1)while循環

2)for循環

3)continue

4)break

五,數組

1.創建數組

2.獲取數組元素

3.新增數組元素

1)通過修改length新增

2)通過下標新增

3)使用push進行追加元素

4.刪除數組元素

六,函數

1.語法格式

2.關於參數個數

3.函數表達式

4.作用域

var和let的區別 

5.作用域鏈

七,對象

1.創建對象

1)使用字面量創建對象【常用】

2)使用new Object創建對象

3)使用構造函數創建對象

4)調用對象屬性和方法


一,JavaScript基礎概念 1.JavaScript是什麼
  • JavaScript (簡稱 JS)
  • 是世界上最流行的編程語言之一
  • 是一個腳本語言, 通過解釋器運行
  • 主要在客戶端(瀏覽器)上運行, 現在也可以基於 node.js 在服務器端運行

2.JavaScript作用

用於web(基於http,https協議)的網頁用戶交互的動作

3.JavaScript的應用場景

  • 網頁開發(更復雜的特效和用戶交互)
  • 網頁遊戲開發
  • 服務器開發(node.js)
  • 桌面程序開發(Electron, VSCode 就是這麼來的)
  • 手機 app 開發 

4.JavaScript運行過程

  1. 編寫的代碼是保存在文件中的, 也就是存儲在硬盤(外存上).
  2. 雙擊 .html 文件瀏覽器(應用程序)就會讀取文件, 把文件內容加載到內存中(數據流向: 硬盤 => 內存)
  3. 瀏覽器會解析用戶編寫的代碼, 把代碼翻譯成二進制的, 能讓計算機識別的指令(解釋器的工作)
  4. 得到的二進制指令會被 CPU 加載並執行(數據流向: 內存 => CPU)

 

瀏覽器分成渲染引擎 + JS 引擎

  • 渲染引擎: 解析 html + CSS, 俗稱 “內核”
  • JS 引擎: 也就是 JS 解釋器. 典型的就是 Chrome 中內置的 V8
  • JS 引擎逐行讀取 JS 代碼內容, 然後解析成二進制指令, 再執行

5.JavaScript 的組成

  1. ECMAScript(簡稱 ES): JavaScript 語法(es規定瞭js的語法,es有很多版本)
  2. DOM: 頁面文檔對象模型, 對頁面中的元素進行操作(用戶交互,動態的操作頁面元素)
  3. BOM: 瀏覽器對象模型, 對瀏覽器窗口進行操作(對瀏覽器的頁面進行操作,如刷新前進)

二,JavaScript的基礎語法 1.JavaScript的書寫形式 1)行內式

2)內嵌式

3)外部式

alert("hehe");

4)註釋

註釋的寫法和Java一模一樣(註釋不能嵌套)

2.輸入輸出  1)輸入(prompt)

// 彈出一個輸入框prompt("請輸入您的姓名:");

2)輸出(alert)

// 彈出一個輸出框alert("hello");

3)輸出(console.log)

// 向控制臺輸出日志console.log("這是一條日志");

4)補充解釋

重要概念: 

  • console 是一個 js 中的 “對象”
  • . 表示取對象中的某個屬性或者方法. 可以直觀理解成 “的”
  • console.log 就可以理解成: 使用 “控制臺” 對象 “的” log 方法(有點類似於Java中的println)
    


 三,語法概覽 1.變量的使用 1)基本用法

創建變量:

var = 'zhangsan';var = 20;
  • var 是 JS 中的關鍵字, 表示這是一個變量.
  • = 在 JS 中表示 “賦值”, 相當於把數據放到內存的盒子中. = 兩側建議有一個空格
  • 每個語句最後帶有一個 ; 結尾. JS 中可以省略 ; 但是建議還是加上.
  • 註意, 此處的 ; 為英文分號. JS 中所有的標點都是英文標點.
  • 初始化的值如果是字符串, 那麼就要使用單引號或者雙引號引起來 
  • 初始化的值如果是數字, 那麼直接賦值即可

使用變量:

console.log(age); // 讀取變量內容age = 30;

代碼示例:

2)理解動態類型數組

JS 的變量類型是程序運行過程中才確定的(運行到 = 語句才會確定類型)

var a = 10; // 數字var b = "hehe"; // 字符串

 隨著程序運行, 變量的類型可能會發生改變

var a = 10; // 數字a = "hehe"; // 字符串

 這一點和Java,c等靜態類型語言差異較大

2.基本數據類型 1)js中內置的幾種類型

  • number: 數字. 不區分整數和小數
  • boolean: true 真, false 假
  • string: 字符串類型
  • undefined: 隻有唯一的值 undefined. 表示未定義的值
  • null: 隻有唯一的值 null. 表示空值

2)number數字類型

基本語法:

var a = 07; // 八進制整數, 以 0 開頭var b = 0xa; // 十六進制整數, 以 0x 開頭var c = 0b10; // 二進制整數, 以 0b 開頭

特殊的數字值 :

  • Infinity: 無窮大, 大於任何數字. 表示數字已經超過瞭 JS 能表示的范圍.
  • -Infinity: 負無窮大, 小於任何數字. 表示數字已經超過瞭 JS 能表示的范圍.
  • NaN: 表示當前的結果不是一個數字
var max = Number.MAX_VALUE;// 得到 Infinityconsole.log(max * 2);// 得到 -Infinityconsole.log(-max * 2);// 得到 NaNconsole.log('hehe' - 10);

 註意:

在得到NaN時,不能使用+號連接(因為使用+表示字符串拼接會得到hehe10)

3)string字符串類型

基本語法:字符串字面值需要使用引號引起來, 單引號雙引號均可

var a = "haha";var b = 'hehe';var c = hehe; // 運行出錯

包含引號時的寫法:

var msg = "My name is "zhangsan""; // 出錯var msg = "My name is \"zhangsan\""; // 正確, 使用轉義字符. \" 來表示字符串內部的引號.var msg = "My name is 'zhangsan'"; // 正確, 搭配使用單雙引號var msg = 'My name is "zhangsan"'; // 正確, 搭配使用單雙引號
有些字符不方便直接輸入, 於是要通過一些特殊方式來表示.\n\\\'\"\t

求長度:和Java中一樣使用.length

 字符串拼接:和Java一樣使用+拼接(這裡可以拼接數值和字符串)

4)Boolean佈爾類型

表示真和假,參與運算時,true被當成1,false被當成0

5)undefined未定義數據類型

 如果一個變量沒有被初始化過, 結果就是 undefined, 是 undefined 類型

var a;console.log(a)

undefined 和字符串進行相加, 結果進行字符串拼接

console.log(a + "10"); // undefined10

undefined 和數字進行相加, 結果為 NaN

console.log(a + 10); //NaN

6)null空值類型

null 表示當前的變量是一個 “空值”

var b = null;console.log(b + 10); // 10console.log(b + "10"); // null10

註意:

  • null 和 undefined 都表示取值非法的情況, 但是側重點不同.
  • null 表示當前的值為空. (相當於有一個空的盒子)
  • undefined 表示當前的變量未定義. (相當於連盒子都沒有)

3.運算符

一切運算和Java中一樣,不做描述

四,條件語句 1.if語句 1)基本語法

// 形式1if (條件) {語句}// 形式2if (條件) {語句1} else {語句2}// 形式3if (條件1) {語句1} else if (條件2) {語句2} else if .... {語句...} else {語句N}

示例:

2)三目運算符

var n = 10;var s = (n > 0) ? "yes" : "no" ;console.log(s);

3)Switch

switch (表達式) {case 值1:語句1;break;case 值2:語句2:break;default:語句N;}

2.循環語句 1)while循環

while (條件) {循環體;}

執行過程:

  • 先執行條件語句
  • 條件為 true, 執行循環體代碼.
  • 條件為 false, 直接結束循環

2)for循環

for (表達式1; 表達式2; 表達式3) {循環體}
  • 表達式1: 用於初始化循環變量.
  • 表達式2: 循環條件
  • 表達式3: 更新循環變量

執行過程:

  • 先執行表達式1, 初始化循環變量
  • 再執行表達式2, 判定循環條件
  • 如果條件為 false, 結束循環
  • 如果條件為 true, 則執行循環體代碼.
  • 執行表達式3 更新循環變量

示例:

3)continue

結束這次循環

4)break

結束整個循環

五,數組 1.創建數組

使用 new 關鍵字創建

// Array 的 A 要大寫var arr = new Array();

使用字面量方式創建 [常用]

var arr = [];var arr2 = [1, 2, 'haha', false]; // 數組中保存的內容稱為 "元素"

2.獲取數組元素

var arr = ['小豬佩奇', '小豬喬治', '小羊蘇西'];console.log(arr);console.log(arr[0]);console.log(arr[1]);console.log(arr[2]);arr[2] = '小貓凱迪';console.log(arr);

註意:

  • 如果下標超出范圍讀取元素, 則結果為 undefined
  • 不要給數組名直接賦值, 此時數組中的所有元素都沒瞭.
  • 相當於本來 arr 是一個數組, 重新賦值後變成字符串瞭

3.新增數組元素 1)通過修改length新增

相當於在末尾新增元素. 新增的元素默認值為 undefined

var arr = [9, 5, 2, 7];arr.length = 6;console.log(arr);console.log(arr[4], arr[5]);

  

2)通過下標新增

  • 如果下標超出范圍賦值元素, 則會給指定位置插入新元素
  • 此時這個數組的 [0] 和 [1] 都是 undefined 
var arr = [];arr[2] = 10;console.log(arr)

3)使用push進行追加元素

給定一個數組, 把數組中的奇數放到一個 newArr 中

var arr = [9, 5, 2, 7, 3, 6, 8];var newArr = [];for (var i = 0; i < arr.length; i++) {if (arr[i] % 2 != 0) {newArr.push(arr[i]);}}console.log(newArr);

4.刪除數組元素

使用 splice 方法刪除元素

var arr = [9, 5, 2, 7];// 第一個參數表示從下表為 2 的位置開始刪除. 第二個參數表示要刪除的元素個數是 1 個arr.splice(2, 1);console.log(arr);// 結果[9, 5, 7]

六,函數 1.語法格式

// 創建函數/函數聲明/函數定義function 函數名(形參列表) {函數體return 返回值;}// 函數調用函數名(實參列表) // 不考慮返回值返回值 = 函數名(實參列表) // 考慮返回值

函數定義並不會執行函數體內容, 必須要調用才會執行. 調用幾次就會執行幾次

function hello() {console.log("hello");}// 如果不調用函數, 則沒有執行打印語句hello();
  • 調用函數的時候進入函數內部執行, 函數結束時回到調用位置繼續執行. 可以借助調試器來觀察.
  • 函數的定義和調用的先後順序沒有要求. (這一點和變量不同, 變量必須先定義再使用)
// 調用函數hello();// 定義函數function hello() {console.log("hello");}

2.關於參數個數

實參和形參之間的個數可以不匹配. 但是實際開發一般要求形參和實參個數要匹配

1) 如果實參個數比形參個數多, 則多出的參數不參與函數運算

sum(10, 20, 30); // 30

2) 如果實參個數比形參個數少, 則此時多出來的形參值為 undefined

sum(10); // NaN, 相當於 num2 為 undefined.

3.函數表達式

function() {var sum = 0;for (var i = 0; i < arguments.length; i++) {sum += arguments[i];}return sum;}console.log(add(10, 20)); // 30console.log(add(1, 2, 3, 4)); // 10

4.作用域

某個標識符名字在代碼中的有效范圍,在 ES6 標準之前, 作用域主要分成兩個

  • 全局作用域: 在整個 script 標簽中, 或者單獨的 js 文件中生效.
  • 局部作用域/函數作用域: 在函數內部生效
  •  創建變量時如果不寫 var, 則得到一個全局變量
  • 如果變量名相同,在使用時,優先使用函數內部的同名變量的值

var和let的區別 

  • 在函數內定義var和let,外部不可見
  • 在循環,條件控制語句中,var外部可見
  • 在循環,條件控制語句中,let外部不可見
  • let作用域隻在本花括號內

5.作用域鏈

背景:

  • 函數可以定義在函數內部
  • 內層函數可以訪問外層函數的局部變量.
  • 內部函數可以訪問外部函數的變量. 采取的是鏈式查找的方式. 從內到外依次進行查找.

七,對象 1.創建對象 1)使用字面量創建對象【常用】

使用 { } 創建對象

  • 屬性和方法使用鍵值對的形式來組織.
  • 鍵值對之間使用 , 分割. 最後一個屬性後面的 , 可有可無
  • 鍵和值之間使用 : 分割.
  • 方法的值是一個匿名函數

基本語法:

2)使用new Object創建對象

3)使用構造函數創建對象

4)調用對象屬性和方法

 // 1.使用.的方式來獲取屬性,即“的”    console.log(stu1.name);    // 2.使用[字符串]    console.log(stu1["name"]);    // 3.修改屬性,使用“=”    stu1.name = "王五";    console.log(stu1.name);