天天看點
傳回

【JavaScript總結】JavaScript簡介JavaScript 輸出JavaScript 文法JavaScript 對象數組ArrayJavaScript 閉包

JavaScript總結

  • JavaScript簡介
  • JavaScript 輸出
    • 使用 window.alert()
    • 操作 HTML 元素
    • 寫到 HTML 文檔
    • 寫到控制台
  • JavaScript 文法
    • JavaScript 字面量
    • JavaScript 變量
    • JavaScript 注釋
    • JavaScript 操作符
    • JavaScript 資料類型
    • 資料類型的概念
    • JavaScript 函數
    • JavaScript 字母大小寫
    • JavaScript 字元集
  • JavaScript 對象
    • 對象定義
    • 對象屬性
    • 通路對象屬性
    • 對象方法
    • 通路對象方法
  • 數組Array
  • JavaScript 閉包
    • 全局變量
    • JavaScript 内嵌函數

JavaScript簡介

JavaScript 是腳本語言

  • JavaScript 是一種輕量級的程式設計語言。
  • JavaScript 是可插入 HTML 頁面的程式設計代碼。
  • JavaScript 插入 HTML 頁面後，可由所有的現代浏覽器執行。
  • JavaScript 很容易學習。

JavaScript 輸出

JavaScript 沒有任何列印或者輸出的函數。

JavaScript 顯示資料

JavaScript 可以通過不同的方式來輸出資料：

  • 使用 window.alert() 彈出警告框。
  • 使用 document.write() 方法将内容寫到 HTML 文檔中。
  • 使用 innerHTML 寫入到 HTML 元素。
  • 使用 console.log() 寫入到浏覽器的控制台。

使用 window.alert()

執行個體

<!DOCTYPE html>
<html>
<body>
<h1>我的第一個頁面</h1>
<p>我的第一個段落。</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

操作 HTML 元素

如需從 JavaScript 通路某個 HTML 元素，可以使用 document.getElementById(id) 方法。

請使用 “id” 屬性來辨別 HTML 元素，并 innerHTML 來擷取或插入元素内容：

執行個體

<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p id="demo">我的第一個段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>

以上 JavaScript 語句（在 < scrip t> 标簽中）可以在 web 浏覽器中執行：

document.getElementById(“demo”) 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。

innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代碼。

寫到 HTML 文檔

将JavaScript直接寫在HTML 文檔中：

執行個體

<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<p>我的第一個段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>

使用 document.write() 僅僅向文檔輸出寫内容。

如果在文檔已完成加載後執行 document.write，整個 HTML 頁面将被覆寫。

寫到控制台

如果您的浏覽器支援調試，你可以使用 console.log() 方法在浏覽器中顯示 JavaScript 值。

浏覽器中使用 F12 來啟用調試模式， 在調試視窗中點選 “Console” 菜單。

執行個體

<!DOCTYPE html>
<html>
<body>
<h1>我的第一個 Web 頁面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

JavaScript 文法

JavaScript 是一個腳本語言。

它是一個輕量級，但功能強大的程式設計語言。

JavaScript 字面量

在程式設計語言中，一般固定值稱為字面量，如 3.14。

  1. 數字（Number) 字面量 可以是整數或者是小數，或者是科學計數(e)。
  2. 字元串(String) 字面量 可以使用單引号或雙引号:“John Doe” 、‘John Doe’。
  3. 表達式字面量 用于計算。
  4. 數組（Array） 字面量 定義一個數組：[40, 100, 1, 5, 25, 10]。
  5. 對象（Object） 字面量 定義一個對象{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}
  6. 函數（Function） 字面量 定義一個函數：function myFunction(a, b) { return a * b;}

JavaScript 變量

在程式設計語言中，變量用于存儲資料值。

JavaScript 使用關鍵字 var 來定義變量， 使用等号來為變量指派：

var x, length
x = 5
length = 6

ECMAScript 的變量是松散類型的，所謂松散類型就是可以用來儲存任何類型（如： String、Number、Boolean以及Object等）的資料。換句話說，每個變量僅僅是一個用于儲存值的占位符而已。

定義變量時要使用 var 操作符，後跟變量名（即一個辨別符），如下所示： var message; 這行代碼定義了一個名為 message 的變量，該變量可以用來儲存任何值。

與代數一樣，JavaScript 變量可用于存放值（比如 x=5）和表達式（比如 z=x+y）。

變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。

  • 變量必須以字母開頭
  • 變量也能以 $ 和 _ 符号開頭（不過我們不推薦這麼做）
  • 變量名稱對大小寫敏感（y 和 Y 是不同的變量）
有一點必須注意 ，即用 var 操作符定義的變量将成為定義該變量的作用域中的局部變量。也就是說，如果在函數中使用 var 定義一個變量，那麼這個變量在函數退出後就會被銷毀，例如： 
function test(){
    var message = "hi"; // 局部變量，去掉var即為全局變量
}
test();
alert(message); // 錯誤！

JavaScript 注釋

不是所有的 JavaScript 語句都是"指令"。雙斜杠 // 後的内容将會被浏覽器忽略：

// 我不會執行

多行注釋以 結尾。

JavaScript 操作符

  1. 一進制操作符 ++ –
  2. 布爾操作符 && || ！

除下列值為假外其餘皆為真： false、null、undefined、‘’、0、NaN

&&和||都屬于 短路操作！

  1. 算術操作符 + - * / %
JavaScript使用 算術運算符 來計算值:(5 + 6) * 10
  1. 關系操作符 <> <=>= == === != !==
注意: ===稱為全等（值和類型）。 
var x = 5;
console.log(x == 5);
console.log(x == '5');
console.log(x === 5);
console.log(x === '5');

  1. 條件（問号）操作符 ? :

    能有效的簡潔代碼

var max = (num1 > num2) ? num1 : num2;
  1. 指派操作符 = += -+ *= /= %=

JavaScript 資料類型

【JavaScript總結】JavaScript簡介JavaScript 輸出JavaScript 文法JavaScript 對象數組ArrayJavaScript 閉包

JavaScript 有多種資料類型：數字，字元串，數組，對象等等：

var length = 16;                                  // Number 通過數字字面量指派
var points = x * 10;                              // Number 通過表達式字面量指派
var lastName = "Johnson";                         // String 通過字元串字面量指派
var cars = ["Saab", "Volvo", "BMW"];              // Array  通過數組字面量指派
var person = {firstName:"John", lastName:"Doe"};  // Object 通過對象字面量指派

資料類型的概念

程式設計語言中，資料類型是一個非常重要的内容。

為了可以操作變量，了解資料類型的概念非常重要。

如果沒有使用資料類型，以下執行個體将無法執行：

16 + "Volvo"

JavaScript 函數

JavaScript 語句可以寫在函數内，函數可以重複引用：

引用一個函數 = 調用函數(執行函數内的語句)。

function myFunction(a, b) {
    return a * b;                                // 傳回 a 乘以 b 的結果
}

ECMAScript 中的函數在定義時不必指定是否傳回值。實際上，任何函數在任何時候都可以通過 return 語句後跟要傳回的值來實作傳回值。請看下面的例子:

function sum(num1, num2) {
    return num1 + num2;
}
var result = sum(3, 2);
console.log(result);

ECMAScript 函數不介意傳遞進來多少個參數，也不在乎傳進來參數是什麼資料類型。

如果在 ECMAScript中定義了兩個名字相同的函數，則該名字隻屬于後定義的函數。請看下面的例子:

function addSomeNumber(num){
    return num + 100;
}
function addSomeNumber(num) {
    return num + 200;
}
console.log(addSomeNumber(100)); //300

JavaScript 字母大小寫

JavaScript 對大小寫是敏感的。

當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。

函數 getElementById 與 getElementbyID 是不同的。

同樣，變量 myVariable 與 MyVariable 也是不同的。

JavaScript 字元集

JavaScript 使用 Unicode 字元集。

Unicode 覆寫了所有的字元，包含标點等字元。

JavaScript 對象

在 JavaScript中，幾乎所有的事物都是對象。

對象定義

你可以使用字元來定義和建立 JavaScript 對象:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

對象屬性

可以說 “JavaScript 對象是變量的容器”。

但是，我們通常認為 “JavaScript 對象是鍵值對的容器”。

鍵值對通常寫法為 name : value (鍵與值以冒号分割)。

鍵值對在 JavaScript 對象通常稱為 對象屬性。

通路對象屬性

可以通過兩種方式通路對象屬性:

  1. person.lastName;
  2. person[“lastName”];

對象方法

對象的方法定義了一個函數，并作為對象的屬性存儲。

  • 對象方法通過添加 () 調用 (作為一個函數)。like this:name = person.fullName();

  • 如果你要通路 person 對象的 fullName 屬性，它将作為一個定義函數的字元串傳回:

    name = person.fullName;

通路對象方法

可以使用以下文法建立對象方法：

methodName : function() {
    // 代碼 
}

也可以使用以下文法通路對象方法：

objectName.methodName()

通常 fullName() 是作為 person 對象的一個方法， fullName 是作為一個屬性。

如果使用 fullName 屬性，不添加 (), 它會傳回函數的定義：

objectName.methodName

數組Array

  • JavaScript 數組的每一項 可以儲存任何類型的資料.

  • JavaScript 數組的大小是可以動态調整的

    建立數組有以下兩種方法，我們常用第二種:

//方式一new
var colors = new Array('red', 'blue', 'green');
//方式二字面量
var colors = ['red', 'blue', 'green']; // 建立一個包含 3 個字元串的數組
console.log(colors[1]);
colors[3] = 'brown';
console.log(colors.length);
var names = []; // 建立一個空數組
var hyBird = [1, 2, 'haha', {firstName: 'Yong', lastName: 'Wang'}]; //不推薦！
console.log(hyBird[3].firstName);

常用的數組方法如下：

  • 元素聯合: 
var colors = ['red', 'green', 'blue'];
console.log(colors.join(',')); //red,green,blue
console.log(colors.join('||')); //red||green||blue

  • 堆棧方法

    ECMAScript 為數組專門提供了 push() 和 pop() 方法，以便實作類似棧的行為。

var colors = []; // 建立一個數組
var count = colors.push('red', 'green'); // 末尾推入兩項
console.log(count); //2
colors.push('black'); // 末尾推入另一項
console.log(colors); //3
var item = colors.pop(); // 末尾彈出最後一項
console.log(item); //'black'
console.log(colors); //2

  • 隊列方法

    隊列在清單的末端添加項，從清單的前端移除項。

var colors = new Array(); //建立一個數組
colors.push('red', 'green'); //推入兩項
console.log(colors); //2
count = colors.push('black'); //推入另一項
console.log(colors); //3
var item = colors.shift(); // 前端彈出第一項
console.log(item); //'red'
console.log(colors);

總結:

由上可知， push、pop操作在數組末，而 unshift、shift操作在數組頭；push、unshift壓入而pop、shift彈出。

  • 反轉數組項 
var values = [1, 2, 3, 4, 5];
values.reverse();
console.log(values); //5,4,3,2,1
  • 連結方法 
var colors1 = ['red', 'green', 'blue'];
var colors2 = ['yellow', 'black'];
console.log(colors1.concat(colors2));
console.log(colors2.concat(colors1));
console.log(colors2.concat('brown'));
console.log(color2)//注意：concat傳回一個新數組，原數組沒改變
  • splice方法(最強大的數組方法)
    • 删除：可以删除任意數量的項，隻需指定 2 個參數。
    • 插入：可以向指定位置插入任意數量的項，隻需提供 3 個參數：起始位置、0（要删除的項數） 和要插入的項 。
    • 替換：可以向指定位置插入任意數量的項，且同時删除任意數量的項，隻需指定 3 個參數：起 始位置、要删除的項數和要插入的任意數量的項。插入的項數不必與删除的項數相等。 
var colors = ['red', 'green', 'blue'];
var removed = colors.splice(0,1); // 删除第一項
console.log(colors); // green,blue
console.log(removed); // red，傳回的數組中隻包含一項
removed = colors.splice(1, 0, 'yellow', 'orange'); // 從位置 1 開始插入兩項
console.log(colors); // green,yellow,orange,blue
console.log(removed); // 傳回的是一個空數組
removed = colors.splice(1, 1, 'red', 'purple'); // 插入兩項，删除一項
console.log(colors); // green,red,purple,orange,blue
console.log(removed); // yellow，傳回的數組中隻包含一項

JavaScript 閉包

JavaScript 變量可以是局部變量或全局變量。

私有變量可以用到閉包。

簡而言之，閉包就是：

函數的局部變量集合，隻是這些局部變量在函數傳回後會繼續存在。

全局變量

函數可以通路由函數内部定義的變量，如：

function myFunction() {
    var a = 4;
    return a * a;
}

JavaScript 内嵌函數

所有函數都能通路全局變量。

實際上，在 JavaScript 中，所有函數都能通路它們上一層的作用域。

JavaScript 支援嵌套函數。嵌套函數可以通路上一層的函數變量。

該執行個體中，内嵌函數 plus() 可以通路父函數的 counter 變量：

執行個體

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}
javascript 前端 html
上一篇: Trees in a Wood. UVA - 10214 歐拉函數表
下一篇: 建立BIO多人聊天室 接收資料時：要将換行符丢棄。 2台以上裝置如何互動資料？  1.用戶端：2.對 tcp服務端 類的分析： 伺服器性能分析：伺服器優化：

繼續閱讀