天天看點
傳回

JavaScript 學習筆記 DAY1

JavaScript 教程

  • JavaScript 是 Web 的程式設計語言。
  • 所有現代的 HTML 頁面都使用 JavaScript。

為什麼學習 JavaScript?

JavaScript web 開發人員必須學習的 3 門語言中的一門：

  • HTML 定義了網頁的内容
  • CSS 描述了網頁的布局
  • JavaScript 網頁的行為

JavaScript 内置對象

  • Browser 對象
  • HTML DOM 對象
  • HTML/CSS/JS 線上工具

JavaScript 簡介

JavaScript 是網際網路上最流行的腳本語言，這門語言可用于 HTML 和 web，更可廣泛用于伺服器、PC、筆記本電腦、平闆電腦和智能手機等裝置。

JavaScript 是腳本語言

JavaScript 是一種輕量級的程式設計語言。

JavaScript 是可插入 HTML 頁面的程式設計代碼。

JavaScript 插入 HTML 頁面後，可由所有的現代浏覽器執行。

JavaScript：直接寫入 HTML 輸出流

document.write("<h1>這是一個标題</h1>");
document.write("<p>這是一個段落。</p>");

JavaScript：對事件的反應

<button type="button" οnclick="alert('歡迎!')">點我!</button>

alert() 函數在 JavaScript 中并不常用，但它對于代碼測試非常友善。

onclick 事件隻是您即将在本教程中學到的衆多事件之一。

JavaScript：改變 HTML 内容

使用 JavaScript 來處理 HTML 内容是非常強大的功能。

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改變内容
DOM (Document Object Model)（文檔對象模型）是用于通路 HTML 元素的正式 W3C 标準。

您将在本教程的多個章節中學到有關 HTML DOM 的知識。

JavaScript：改變 HTML 圖像

<script>
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
JavaScript 能夠改變任意 HTML 元素的大多數屬性，而不僅僅是圖檔。

JavaScript：改變 HTML 樣式

改變 HTML 元素的樣式，屬于改變 HTML 屬性的變種。 
x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改變樣式

JavaScript：驗證輸入

JavaScript 常用于驗證使用者的輸入。 
if isNaN(x) {
    alert("不是數字");
}
JavaScript 與 Java 是兩種完全不同的語言，無論在概念上還是設計上。

JavaScript 用法

HTML 中的腳本必須位于

<script>

 與

</script>

 标簽之間。
腳本可被放置在 HTML 頁面的 和 部分中。

<script>

标簽

  • 如需在 HTML 頁面中插入 JavaScript，使用

    <script>

     标簽。

  • <script>

     和

    </script>

     會告訴 JavaScript 在何處開始和結束。

  • <script>

     和

    </script>

     之間的代碼行包含了 JavaScript: 
<script>
alert("我的第一個 JavaScript");
</script>

<body>

中的 JavaScript

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>這是一個标題</h1>");
document.write("<p>這是一個段落</p>");
</script>
.
.
</body>
</html>

JavaScript 函數和事件

上面例子中的 JavaScript 語句，會在頁面加載時執行。

通常，我們需要在某個事件發生時執行代碼，比如當使用者點選按鈕時。

如果我們把 JavaScript 代碼放入函數中，就可以在事件發生時調用該函數。

在

<head>

或者

<body>

的JavaScript

  • 可以在 HTML 文檔中放入不限數量的腳本。
  • 腳本可位于 HTML 的

    <body>

     或

    <head>

     部分中，或者同時存在于兩個部分中。
  • 通常的做法是把函數放入

    <head>

     部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會幹擾頁面的内容。

<head>

中的 JavaScript 函數

我們把一個 JavaScript 函數放置到 HTML 頁面的

<head>

部分。該函數會在點選按鈕時被調用：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";
}
</script>
</head>
<body>
<h1>我的 Web 頁面</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">嘗試一下</button>
</body>
</html>

<body>

中的 JavaScript 函數

在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的

<body>

部分。該函數會在點選按鈕時被調用：

執行個體

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 頁面</h1>
<p id="demo">一個段落</p>
<button type="button" onclick="myFunction()">嘗試一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";
}
</script>
</body>
</html>

外部的 JavaScript

也可以把腳本儲存到外部檔案中。外部檔案通常包含被多個網頁使用的代碼。

外部 JavaScript 檔案的檔案擴充名是 .js。
如需使用外部檔案，請在

<script>

 标簽的 “src” 屬性中設定該 .js 檔案： 
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

你可以将腳本放置于

<head>

或者

<body>

中，放在

<script>

标簽中的腳本與外部引用的腳本運作效果完全一緻。

myScript.js 檔案代碼如下：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一個 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>
document.getElementById(“demo”) 是使用 id 屬性來查找 HTML 元素的 JavaScript 代碼 。
innerHTML = “段落已修改。” 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代碼。
  • 請使用 document.write() 僅僅向文檔輸出寫内容。
  • 如果在文檔已完成加載後執行 document.write，整個 HTML 頁面将被覆寫。 
<!DOCTYPE html>
<html>
<body>

<h1>我的第一個 Web 頁面</h1>

<p>我的第一個段落。</p>

<button onclick="myFunction()">點我</button>

<script>
function myFunction() {
    document.write(Date());
}
</script>

</body>
</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 學習筆記 DAY1

JavaScript 文法

JavaScript 是一個程式語言。文法規則定義了語言結構。

JavaScript 文法

JavaScript 是一個腳本語言。

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

JavaScript 字面量

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

  • 數字（Number）字面量 可以是整數或者是小數，或者是科學計數(e)。
  • 字元串（String）字面量 可以使用單引号或雙引号:

  • 表達式字面量 用于計算：

    5 + 6

    5 * 10

  • 數組（Array）字面量 定義一個數組：

    [40, 100, 1, 5, 25, 10]

    對象（Object）字面量 定義一個對象：

  • 函數（Function）字面量 定義一個函數：

  • JavaScript 變量

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

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

x = 5

length = 6
變量可以通過變量名通路。在指令式語言中，變量通常是可變的。字面量是一個恒定的值。
  • Note 變量是一個名稱。
  • 字面量是一個值。

JavaScript 操作符

  • JavaScript使用算術運算符 來計算值:
  • JavaScript使用指派運算符給變量指派： 
x = 5
y = 6
z = (x + y) * 10

JavaScript語言有多種類型的運算符：

指派，算術和位運算符 = + - * / 在 JS 運算符中描述

條件，比較及邏輯運算符 == != < > 在 JS 比較運算符中描述

JavaScript 語句

在 HTML 中，JavaScript 語句向浏覽器發出的指令。

語句是用分号分隔：

JavaScript 關鍵字

JavaScript 關鍵字用于辨別要執行的操作。

和其他任何程式設計語言一樣，JavaScript 保留了一些關鍵字為自己所用。

var 關鍵字告訴浏覽器建立一個新的變量：

var x = 5 + 6;

var y = x * 10;

  • 以下是 JavaScript 中最​​重要的保留字（按字母順序）：
JavaScript 學習筆記 DAY1

JavaScript 注釋

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

// 我不會執行
JavaScript 資料類型
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 通過對象字面量指派

資料類型的概念

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

JavaScript 函數

JavaScript 語句可以寫在函數内，函數可以重複引用
引用一個函數 = 調用函數(執行函數内的語句)。 
function myFunction(a, b) {
    return a * b;                                // 傳回 a 乘以 b 的結果
}

JavaScript 字母大小寫

JavaScript 對大小寫是敏感的。

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

JavaScript 字元集

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

JavaScript 語句

JavaScript 語句向浏覽器發出的指令。語句的作用是告訴浏覽器該做什麼。

JavaScript 語句

JavaScript 語句是發給浏覽器的指令。

下面的 JavaScript 語句向 id=“demo” 的 HTML 元素輸出文本 “你好 Dolly” ：

分号 ;

分号用于分隔 JavaScript 語句。

通常我們在每條可執行的語句結尾添加分号。

使用分号的另一用處是在一行中編寫多條語句。

在 JavaScript 中，用分号來結束語句是可選的。

JavaScript 代碼

JavaScript 代碼是 JavaScript 語句的序列。
浏覽器按照編寫順序依次執行每條語句。

本例向網頁輸出一個标題和兩個段落：

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎麼樣?";

JavaScript 代碼塊

JavaScript 可以分批地組合起來。

代碼塊以左花括号開始，以右花括号結束。

代碼塊的作用是一并地執行語句序列。

function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎麼樣?";
}

JavaScript 語句辨別符

JavaScript 語句通常以一個 語句辨別符 為開始，并執行該語句。
語句辨別符是保留關鍵字不能作為變量名使用。
JavaScript 學習筆記 DAY1

空格

JavaScript 會忽略多餘的空格。您可以向腳本添加空格，來提高其可讀性。

下面的兩行代碼是等效的：

var person="runoob";
var person = "runoob";

對代碼行進行折行

可以在文本字元串中使用反斜杠對代碼行進行換行。

下面的例子會正确地顯示：

document.write("你好 \
世界!");
知識點：JavaScript 是腳本語言，浏覽器會在讀取代碼時，逐行地執行腳本代碼。而對于傳統程式設計來說，會在執行前對所有代碼進行編譯。

JavaScript 注釋

JavaScript 注釋

JavaScript 注釋可用于提高代碼的可讀性。
JavaScript 不會執行注釋。

我們可以添加注釋來對 JavaScript 進行解釋，或者提高代碼的可讀性。

單行注釋以 // 開頭。 
// 輸出标題：
document.getElementById("myH1").innerHTML="歡迎來到我的首頁";
// 輸出段落：
document.getElementById("myP").innerHTML="這是我的第一個段落。";

JavaScript 多行注釋

多行注釋以 結尾。 
/*
下面的這些代碼會輸出
一個标題和一個段落
并将代表首頁的開始
*/
document.getElementById("myH1").innerHTML="歡迎來到我的首頁";
document.getElementById("myP").innerHTML="這是我的第一個段落。";

使用注釋來阻止執行

// document.getElementById("myH1").innerHTML="歡迎來到我的首頁";
document.getElementById("myP").innerHTML="這是我的第一個段落。";

在下面的例子中，注釋用于阻止代碼塊的執行（可用于調試）：

/*
document.getElementById("myH1").innerHTML="歡迎來到我的首頁";
document.getElementById("myP").innerHTML="這是我的第一個段落。";
*/

在行末使用注釋

在下面的例子中，我們把注釋放到代碼行的結尾處：

var x=5;    // 聲明 x 并把 5 指派給它
var y=x+2;  // 聲明 y 并把 x+2 指派給它

JavaScript 變量

變量是用于存儲資訊的"容器"。 
var x=5;
var y=6;
var z=x+y;

在 JavaScript 中，可以把變量看做存儲資料的容器。

JavaScript 變量

與代數一樣，JavaScript 變量可用于存放值（比如 x=5）和表達式（比如 z=x+y）。
變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱

變量必須以字母開頭

變量也能以 $ 和 _ 符号開頭（不過我們不推薦這麼做） 變量名稱對大小寫敏感（y 和 Y 是不同的變量）

JavaScript 資料類型

JavaScript 變量還能儲存其他資料類型，比如文本值 (name=“Bill Gates”)。
在 JavaScript 中，類似 “Bill Gates” 這樣一條文本被稱為字元串。
當向變量配置設定文本值時，應該用雙引号或單引号包圍這個值。
當向變量賦的值是數值時，不要使用引号。如果您用引号包圍數值，該值會被作為文本來處理。 
var pi=3.14;
var person="John Doe";
var answer='Yes I am!';

聲明（建立） JavaScript 變量

在 JavaScript 中建立變量通常稱為"聲明"變量。
我們使用 var 關鍵詞來聲明變量
  • 變量聲明之後，該變量是空的（它沒有值）。
  • 如需向變量指派便使用等号

  • 也可以在聲明變量時對其指派：

    var carname=“Volvo”;

在下面的例子中，我們建立了名為 carname 的變量，并向其指派 “Volvo”，然後把它放入 id=“demo” 的 HTML 段落中：

var carname="Volvo";
document.getElementById("demo").innerHTML=carname;

一條語句，多個變量

可以在一條語句中聲明很多變量。該語句以 var 開頭，并使用逗号分隔變量即可
聲明也可橫跨多行： 
var lastname="Doe",
age=30,
job="carpenter";
一條語句中聲明的多個不可以賦同一個值:

Value = undefined

在計算機程式中，經常會聲明無值的變量。未使用值來聲明的變量，其值實際上是 undefined。

在執行過以下語句後，變量 carname 的值将是 undefined：

重新聲明 JavaScript 變量

如果重新聲明 JavaScript 變量，該變量的值不會丢失：

在以下兩條語句執行後，變量 carname 的值依然是 “Volvo”：

var carname="Volvo";
var carname;

JavaScript 算數

您可以通過 JavaScript 變量來做算數，使用的是 = 和 + 這類運算符： 
y=5;
x=y+2;

JavaScript 資料類型

值類型(基本類型)：字元串（String）、數字(Number)、布爾(Boolean)、對空（Null）、未定義（Undefined）、Symbol。
引用資料類型：對象(Object)、數組(Array)、函數(Function)。
注：Symbol 是 ES6 引入了一種新的原始資料類型，表示獨一無二的值。

JavaScript 擁有動态類型

JavaScript 擁有動态類型。

這意味着相同的變量可用作不同的類型

var x;               // x 為 undefined
var x = 5;           // 現在 x 為數字
var x = "John";      // 現在 x 為字元串

JavaScript 字元串

字元串是存儲字元（比如 “Bill Gates”）的變量。
字元串可以是引号中的任意文本。您可以使用單引号或雙引号： 
var carname="Volvo XC60";
var carname='Volvo XC60';
您可以在字元串中使用引号，隻要不比對包圍字元串的引号即可 
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

JavaScript 數字

JavaScript 隻有一種數字類型。數字可以帶小數點，也可以不帶 
var x1=34.00;      //使用小數點來寫
var x2=34;         //不使用小數點來寫
極大或極小的數字可以通過科學（指數）計數法來書寫 
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布爾

布爾（邏輯）隻能有兩個值：true 或 false。 
var x=true;
var y=false;
布爾常用在條件測試中。您将在本教程稍後的章節中學到更多關于條件測試的知識。

JavaScript 數組

下面的代碼建立名為 cars 的數組：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//或者 (condensed array):

var cars=new Array("Saab","Volvo","BMW");
//或者 (literal array):
數組下标是基于零的，是以第一個項目是 [0]，第二個是 [1]，以此類推。

JavaScript 對象

對象由花括号分隔。在括号内部，對象的屬性以名稱和值對的形式 (name : value) 來定義。屬性由逗号分隔： 
var person={firstname:"John", lastname:"Doe", id:5566};
上面例子中的對象 (person) 有三個屬性：firstname、lastname 以及 id。
空格和折行無關緊要。聲明可橫跨多行： 
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};
對象屬性有兩種尋址方式： 
name=person.lastname;
name=person["lastname"];

Undefined 和 Null

Undefined 這個值表示變量不含有值。
可以通過将變量的值設定為 null 來清空變量。 
cars=null;
person=null;

聲明變量類型

當您聲明新變量時，可以使用關鍵詞 “new” 來聲明其類型： 
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;
JavaScript 變量均為對象。當您聲明一個變量時，就建立了一個新的對象。

JavaScript 對象

JavaScript 對象是擁有屬性和方法的資料。

JavaScript 對象

在 JavaScript中，幾乎所有的事物都是對象。
在 JavaScript 中，對象是非常重要的，當你了解了對象，就可以了解 JavaScript 。

以下代碼為變量 car 設定值為 “Fiat” :

對象也是一個變量，但對象可以包含多個值（多個變量）。
JavaScript 對象是變量的容器。

對象定義

你可以使用字元來定義和建立 JavaScript 對象:
定義 JavaScript 對象可以跨越多行，空格跟換行不是必須的： 
var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

對象屬性

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

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

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

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

JavaScript 對象是屬性變量的容器。

對象鍵值對的寫法類似于：
  • PHP 中的關聯數組
  • Python 中的字典
  • C 語言中的哈希表
  • Java 中的哈希映射
  • Ruby 和 Perl 中的哈希表

通路對象屬性

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

對象方法

  • 對象的方法定義了一個函數，并作為對象的屬性存儲。
  • 對象方法通過添加 () 調用 (作為一個函數)。

該執行個體通路了 person 對象的 fullName() 方法:

如果你要通路 person 對象的 fullName 屬性，它将作為一個定義函數的字元串傳回
JavaScript 對象是屬性和方法的容器。

通路對象方法

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

methodName : function() {
    // 代碼 
}

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

通常 fullName() 是作為 person 對象的一個方法， fullName 是作為一個屬性。
如果使用 fullName 屬性，不添加 (), 它會傳回函數的定義： 
objectName.methodName
有多種方式可以建立，使用和修改 JavaScript 對象。
同樣也有多種方式用來建立，使用和修改屬性和方法。

JavaScript 函數

函數是由事件驅動的或者當它被調用時執行的可重複使用的代碼塊。 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>測試執行個體</title>
<script>
function myFunction()
{
    alert("Hello World!");
}
</script>
</head>
 
<body>
<button onclick="myFunction()">點我</button>
</body>
</html>

JavaScript 函數文法

函數就是包裹在花括号中的代碼塊，前面使用了關鍵詞 function

function functionname()
{
    // 執行代碼
}
當調用該函數時，會執行函數内的代碼。
可以在某事件發生時直接調用函數（比如當使用者點選按鈕時），并且可由 JavaScript 在任何位置進行調用。
JavaScript 對大小寫敏感。關鍵詞 function 必須是小寫的，并且必須以與函數名稱相同的大小寫來調用函數。

調用帶參數的函數

在調用函數時，您可以向其傳遞值，這些值被稱為參數。

當您聲明函數時，須把參數作為變量來聲明

function myFunction(var1,var2)
{
	代碼
}
變量和參數必須以一緻的順序出現。第一個變量就是第一個被傳遞的參數的給定的值，以此類推。 
<p>點選這個按鈕，來調用帶參數的函數。</p>
<button onclick="myFunction('Harry Potter','Wizard')">點選這裡</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

上面的函數在按鈕被點選時會提示 “Welcome Harry Potter, the Wizard”。

函數很靈活，您可以使用不同的參數來調用該函數，這樣就會給出不同的消息：

點選這裡

根據您點選的不同的按鈕，上面的例子會提示 “Welcome Harry Potter, the Wizard” 或 “Welcome Bob, the Builder”。

帶有傳回值的函數

通過使用 return 語句就可以實作函數将值傳回調用它的地方。
在使用 return 語句時，函數會停止執行，并傳回指定的值 
function myFunction()
{
    var x=5;
    return x;
}

上面的函數會傳回值 5。

注意： 整個 JavaScript 并不會停止執行，僅僅是函數。JavaScript 将繼續執行代碼，從調用函數的地方。
函數調用将被傳回值取代：

“demo” 元素的 innerHTML 将成為 5，也就是函數 “myFunction()” 所傳回的值。

您可以使傳回值基于傳遞到函數中的參數：

計算兩個數字的乘積，并傳回結果：

function myFunction(a,b)
{
    return a*b;
}
在僅僅希望退出函數時 ，也可使用 return 語句。傳回值是可選的： 
function myFunction(a,b)
{
    if (a>b)
    {
        return;
    }
    x=a+b
}

如果 a 大于 b，則上面的代碼将退出函數，并不會計算 a 和 b 的總和。

局部 JavaScript 變量

在 JavaScript 函數内部聲明的變量（使用 var）是局部變量，是以隻能在函數内部通路它。（該變量的作用域是局部的）。
可以在不同的函數中使用名稱相同的局部變量，因為隻有聲明過該變量的函數才能識别出該變量。
隻要函數運作完畢，本地變量就會被删除。

全局 JavaScript 變量

在函數外聲明的變量是全局變量，網頁上的所有腳本和函數都能通路它。

JavaScript 變量的生存期

  • JavaScript 變量的生命期從它們被聲明的時間開始。
  • 局部變量會在函數運作以後被删除。
  • 全局變量會在頁面關閉後被删除。

向未聲明的 JavaScript 變量配置設定值

如果您把值賦給尚未聲明的變量，該變量将被自動作為 window 的一個屬性。

将聲明 window 的一個屬性 carname。

非嚴格模式下給未聲明變量指派建立的全局變量，是全局對象的可配置屬性，可以删除。 
var var1 = 1; // 不可配置全局屬性
var2 = 2; // 沒有使用 var 聲明，可配置全局屬性

console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2

delete var1; // false 無法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已經删除 報錯變量未定義

JavaScript 作用域

作用域是可通路變量的集合。

JavaScript 作用域

在 JavaScript 中, 對象和函數同樣也是變量。
在 JavaScript 中, 作用域為可通路變量，對象，函數的集合。
JavaScript 函數作用域: 作用域在函數内修改。

JavaScript 局部作用域

變量在函數内聲明，變量為局部作用域。
局部變量：隻能在函數内部通路。 
// 此處不能調用 carName 變量
function myFunction() {
    var carName = "Volvo";
    // 函數内可調用 carName 變量
}
因為局部變量隻作用于函數内，是以不同的函數可以使用相同名稱的變量。
局部變量在函數開始執行時建立，函數執行完後局部變量會自動銷毀。

JavaScript 全局變量

變量在函數外定義，即為全局變量。
全局變量有 全局作用域: 網頁中所有腳本和函數均可使用。 
var carName = " Volvo";
 
// 此處可調用 carName 變量
function myFunction() {
    // 函數内可調用 carName 變量
}
如果變量在函數内沒有聲明（沒有使用 var 關鍵字），該變量為全局變量。

以下例子中 carName 在函數内，但是為全局變量。

// 此處可調用 carName 變量
 
function myFunction() {
    carName = "Volvo";
    // 此處可調用 carName 變量
}

JavaScript 變量生命周期

JavaScript 變量生命周期在它聲明時初始化。
局部變量在函數執行完畢後銷毀。
全局變量在頁面關閉後銷毀。

函數參數

函數參數隻在函數内起作用，是局部變量。

HTML 中的全局變量

在 HTML 中, 全局變量是 window 對象: 所有資料變量都屬于 window 對象。 
//此處可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}

JavaScript 事件

HTML 事件是發生在 HTML 元素上的事情。
當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。

HTML 事件

HTML 事件可以是浏覽器行為，也可以是使用者行為。

以下是 HTML 事件的執行個體：

  • HTML 頁面完成加載
  • HTML input 字段改變時
  • HTML 按鈕被點選

通常，當事件發生時，你可以做些事情。

  • 在事件觸發時 JavaScript 可以執行一些代碼。
  • HTML 元素中可以添加事件屬性，使用 JavaScript 代碼來添加 HTML 元素。

單引号:

雙引号:

以上執行個體中，JavaScript 代碼将修改 id=“demo” 元素的内容。

在下一個執行個體中，代碼将修改自身元素的内容 (使用 this.innerHTML):

JavaScript代碼通常是幾行代碼。比較常見的是通過事件屬性來調用

常見的HTML事件

下面是一些常見的HTML事件的清單:

JavaScript 學習筆記 DAY1

JavaScript 可以做什麼?

事件可以用于處理表單驗證，使用者輸入，使用者行為及浏覽器動作:
  • 頁面加載時觸發事件
  • 頁面關閉時觸發事件
  • 使用者點選按鈕執行動作
  • 驗證使用者輸入内容的合法性

可以使用多種方法來執行 JavaScript 事件代碼：

  • HTML 事件屬性可以直接執行 JavaScript 代碼
  • HTML 事件屬性可以調用 JavaScript 函數

JavaScript 字元串

JavaScript 字元串用于存儲和處理文本。

JavaScript 字元串

字元串可以是插入到引号中的任何字元。你可以使用單引号或雙引号 
var carname = "Volvo XC60";
var carname = 'Volvo XC60';
可以使用索引位置來通路字元串中的每個字元

字元串的索引從 0 開始，這意味着第一個字元索引值為 [0],第二個為 [1], 以此類推。

你可以在字元串中使用引号，字元串中的引号不要與字元串的引号相同:

var answer = "It's alright";
var answer = "He is called 'Johnny'";
var answer = 'He is called "Johnny"';

也可以在字元串添加轉義字元來使用引号：

var x = 'It\'s alright';
var y = "He is called \"Johnny\"";

字元串長度

可以使用内置屬性 length 來計算字元串的長度 
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

特殊字元

在 JavaScript 中，字元串寫在單引号或雙引号中。

反斜杠是一個轉義字元。 轉義字元将特殊字元轉換為字元串字元：

轉義字元 () 可以用于轉義撇号，換行，引号，等其他特殊字元。

下表中列舉了在字元串中可以使用轉義字元轉義的特殊字元：

JavaScript 學習筆記 DAY1

字元串可以是對象

通常， JavaScript 字元串是原始值，可以使用字元建立

但我們也可以使用 new 關鍵字将字元串定義為一個對象

var x = "John";
var y = new String("John");
typeof x // 傳回 String
typeof y // 傳回 Object
不要建立 String 對象。它會拖慢執行速度，并可能産生其他副作用 
var x = "John";             
var y = new String("John");

(x === y) // 結果為 false，因為 x 是字元串，y 是對象

=== 為絕對相等，即資料類型與值都必須相等。

字元串屬性和方法

原始值字元串，如 “John”, 沒有屬性和方法(因為他們不是對象)。
原始值可以使用 JavaScript 的屬性和方法，因為 JavaScript 在執行方法和屬性時可以把原始值當作對象。

字元串屬性

JavaScript 學習筆記 DAY1

字元串方法

JavaScript 學習筆記 DAY1

JavaScript 運算符

運算符 = 用于指派。

運算符 + 用于加值。

運算符 = 用于給 JavaScript 變量指派。

算術運算符 + 用于把值加起來。

JavaScript 算術運算符

JavaScript 學習筆記 DAY1

JavaScript 指派運算符

指派運算符用于給 JavaScript 變量指派。
JavaScript 學習筆記 DAY1

用于字元串的 + 運算符

+運算符用于把文本值或字元串變量加起來（連接配接起來）。

要想在兩個字元串之間增加空格，需要把空格插入一個字元串之中：

或者把空格插入表達式中

對字元串和數字進行加法運算

兩個數字相加，傳回數字相加的和，如果數字與字元串相加，傳回字元串 
x=5+5;
y="5"+5;
z="Hello"+5;

JavaScript 比較 和 邏輯運算符

比較和邏輯運算符用于測試 true 或者 false。

比較運算符

比較運算符在邏輯語句中使用，以測定變量或值是否相等。
JavaScript 學習筆記 DAY1

邏輯運算符

邏輯運算符用于測定變量或值之間的邏輯。
JavaScript 學習筆記 DAY1

條件運算符

JavaScript 還包含了基于某些條件對變量進行指派的條件運算符。

學習筆記 javascript
上一篇: vim編輯器常用指令vim編輯器常用指令
下一篇: JAVA學習筆記 day1簡介

繼續閱讀