JavaScript 基礎

HTML JavaScript
JavaScript與PHP不同
HTML <.script> 標簽
JavaScript 輸出
- 使用 innerHTML 寫入 HTML 元素
- 使用 document.write()
- 使用 window.alert()
JavaScript 陳述句
JavaScript 語法
JavaScript 注釋
JavaScript 關鍵詞
JavaScript 識別符號
JavaScript 字串運算子
JavaScript 資料
- JavaScript 擁有動態型別
- 您可以在字串內使用引號
- JavaScript 資料型別
- JavaScript 陣列
- JavaScript 物件
- typeof 運算子
- Undefined
- 空值
- NULL
- Undefined 與 Null 的區別
- 原始資料
- 復雜資料
JavaScript 函式
JavaScript 物件
- 物件屬性
- 物件方法
- this 關鍵詞
- 訪問物件屬性
- 訪問物件方法
JavaScript 事件
JavaScript 日期
- 創建 Date 物件
- 日期獲取方式
- 日期設定方式
Math物件方法
JavaScript 隨機
- Math.random()
- JavaScript 隨機整數
- 一個適當的隨機函式
For/In 回圈
JavaScript 標簽的break和continue
JavaScript 表單
- document.getElementById("numb").value
- document.getElementById("demo").innerHTML = text

HTML JavaScript

JavaScript 使 HTML 頁面更具動態性和互動性

JavaScript與PHP不同

服務器與客戶端
在前端和后端的基礎上這兩種語言是不同的，JavaScript腳本語言是一種前端語言（除Node.js之外），而PHP是一種服務器端語言

HTML <.script> 標簽

HTML <script> 標簽用于定義客戶端腳本（JavaScript）
<script> 元素即可包含腳本陳述句，也可通過 src 屬性指向外部腳本檔案，

JavaScript 輸出

JavaScript 不提供任何內建的列印或顯示函式，
JavaScript 能夠以不同方式“顯示”資料：
使用 window.alert() 寫入警告框
使用 document.write() 寫入 HTML 輸出
使用 innerHTML 寫入 HTML 元素
使用 console.log() 寫入瀏覽器控制臺

使用 innerHTML 寫入 HTML 元素

如需訪問 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法，
id 屬性定義 HTML 元素，innerHTML 屬性定義 HTML 內容：

<p id="demo"></p>
<script>
 document.getElementById("demo").innerHTML = 5 + 6;
</script>

在屬性為id的段落里顯示11
更改 HTML 元素的 innerHTML 屬性是在 HTML 中顯示資料的常用方法，

使用 document.write()

<script>
document.write(5 + 6);
</script>

在這里插入圖片描述
注意：在 HTML 檔案完全加載后使用 document.write() 將洗掉所有已有的 HTML

<!DOCTYPE html>
<html>
<body>

<h1>我的第一張網頁</h1>

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

<button onclick="document.write(5 + 6)">試一試</button>

</body>
</html>

在這里插入圖片描述
點擊試一試之后將只顯示11

使用 window.alert()

<script>
window.alert(5 + 6);
</script>

也可以使用alert(5+6);

JavaScript 陳述句

document.getElementById("demo").innerHTML = "Hello Kitty.";

JavaScript 陳述句由以下構成：

值、運算子、運算式、關鍵詞和注釋，

這條陳述句告訴瀏覽器在 id=“demo” 的 HTML 元素中輸出 “Hello Kitty.”

JavaScript 語法

JavaScript 對大小寫敏感
所有 JavaScript 識別符號對大小寫敏感，

JavaScript 注釋

并非所有 JavaScript 陳述句都被“執行”，
雙斜杠 // 或 /* 與 */ 之間的代碼被視為注釋，

JavaScript 關鍵詞

JavaScript 關鍵詞用于標識被執行的動作，
var 關鍵詞告知瀏覽器創建新的變數

JavaScript 識別符號

識別符號是名稱，

在 JavaScript 中，識別符號用于命名變數（以及關鍵詞、函式和標簽），
在大多數編程語言中，合法名稱的規則大多相同，
在 JavaScript 中，首字符必須是字母、下劃線（-）或美元符號（$），
連串的字符可以是字母、數字、下劃線或美元符號，
提示：數值不可以作為首字符，這樣，JavaScript 就能輕松區分識別符號和數值，
注意：JavaScript 中不能使用連字符，它是為減法預留的，

JavaScript 字串運算子

+運算子也可用于對字串進行相加（concatenate，級聯）

txt1 = "Bill";
txt2 = "Gates";
txt3 = txt1 + " " + txt2;

結果
Bill Gates
也可以這樣

txt1 = 1;
txt2 = "Gates";
txt3 = txt1 + " " + txt2;

結果
1 Gates

字串和數字的相加
相加兩個數字，將回傳和，但對一個數字和一個字串相加將回傳一個字串，

如果是1+2+‘3’回傳33

JavaScript 資料

JavaScript 從左向右計算運算式，不同的次序會產生不同的結果：

var x = "Porsche" + 911 + 7;

結果為Porsche9117

JavaScript 擁有動態型別

JavaScript 擁有動態型別，這意味著相同變數可用作不同型別，與php一樣，是弱型別

您可以在字串內使用引號

如果匹配到最外面的引號導致語法錯誤，可以將里面的引號轉義掉即可

JavaScript 資料型別

JavaScript 變數能夠保存多種資料型別：數值、字串值、陣列、物件等等，無int，float之類的型別

var y = 123e5;
var z = 123e-5;

表現為
在這里插入圖片描述

JavaScript 陣列

var cars = ["Porsche", "Volvo", "BMW"];

JavaScript 物件

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

typeof 運算子

您可使用 JavaScript 的 typeof 來確定 JavaScript 變數的型別，typeof 運算子回傳變數或運算式的型別，

Undefined

在 JavaScript 中，沒有值的變數，其值是 undefined，typeof 也回傳 undefined，
任何變數均可通過設定值為 undefined 進行清空，其型別也將是 undefined，

空值

空值與 undefined 不是一回事，
空的字串變數既有值也有型別，

NULL

NULL在C語言中用于指標和物件
在PHP中被賦予空值的情況有三種
尚未被賦值
被賦值為 NULL
被unset()函式處理過的變數
在 JavaScript 中，null 是 “nothing”，它被看做不存在的事物，
不幸的是，在 JavaScript 中，null 的資料型別是物件，
您可以把 null 在 JavaScript 中是物件理解為一個 bug，它本應是 null，
您可以通過設定值為 null 清空物件，您也可以通過設定值為 undefined 清空物件，

Undefined 與 Null 的區別

Undefined 與 null 的值相等，但型別不相等，
null的型別是物件，Undefined的型別是Undefined

原始資料

原始資料值是一種沒有額外屬性和方法的單一簡單資料值，
typeof 運算子可回傳以下原始型別之一：
string
number
boolean
undefined

復雜資料

typeof 運算子可回傳以下兩種型別之一：
function
object
typeof 運算子把物件、陣列或 null 回傳 object，
typeof 運算子不會把函式回傳 object，
typeof 運算子把陣列回傳為 “object”，因為在 JavaScript 中陣列即物件，

JavaScript 函式

var x = myFunction(7, 8);        // 呼叫函式，回傳值被賦值給 x

function myFunction(a, b) {
    return a * b;                // 函式回傳 a 和 b 的乘積
}

myFunction 參考的是函式物件，而 myFunction() 參考的是函式結果，

區域變數
在 JavaScript 函式中宣告的變數，會成為函式的區域變數，
區域變數只能在函式內訪問，

JavaScript 物件

在這里插入圖片描述

物件屬性

在這里插入圖片描述

物件方法

在這里插入圖片描述
實體

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 關鍵詞

在函式定義中，this 參考該函式的“擁有者”，
在上面的例子中，this 指的是“擁有” fullName 函式的 person 物件，
換言之，this.firstName 的意思是 this 物件的 firstName 屬性，
實體

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript 物件創建</h1>

<p id="demo"></p>

<script>
// 創建物件：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

// 顯示物件中的資料：
document.getElementById("demo").innerHTML =
person.firstName + " 已經 " + person.age + " 歲了，";
</script>

</body>
</html>

在這里插入圖片描述

訪問物件屬性

您能夠以兩種方式訪問屬性：
objectName.propertyName或者
objectName[“propertyName”]

訪問物件方法

您能夠通過如下語法訪問物件方法：
objectName.methodName()
HTML 事件
HTML 事件可以是瀏覽器或用戶做的某些事情，

JavaScript 事件

下面是 HTML 事件的一些例子：

HTML 網頁完成加載
HTML 輸入欄位被修改
HTML 按鈕被點擊
通常，當事件發生時，用戶會希望做某件事，

JavaScript 允許您在事件被偵測到時執行代碼，

通過 JavaScript 代碼，HTML 允許您向 HTML 元素添加事件處理程式，
點擊后id為demo的元素顯示時間

<button onclick='document.getElementById("demo").innerHTML=Date()'>現在的時間是？</button>

在上面的例子中，JavaScript 代碼改變了 id=“demo” 的元素的內容，
在接下來的例子中，代碼（使用 this.innerHTML）改變了其自身元素的內容：

<button onclick="this.innerHTML=Date()">現在的時間是？</button>

JavaScript 代碼通常有很多行，事件屬性呼叫函式更為常見：

<button onclick="displayDate()">現在的時間是？</button>

常見的 HTML 事件
下面是一些常見的 HTML 事件：
在這里插入圖片描述
JavaScript 能夠做什么？
事件處理程式可用于處理、驗證用戶輸入、用戶動作和瀏覽器動作：

每當頁面加載時應該做的事情
當頁面被關閉時應該做的事情
當用戶點擊按鈕時應該被執行的動作
當用戶輸入資料時應該被驗證的內容

等等
讓 JavaScript 處理事件的不同方法有很多：

HTML 事件屬性可執行 JavaScript 代碼
HTML 事件屬性能夠呼叫 JavaScript 函式
您能夠向 HTML 元素分配自己的事件處理函式
您能夠阻止事件被發送或被處理

JavaScript 日期

var d = new Date();

創建 Date 物件

Date 物件由新的 Date() 建構式創建，

有 4 種方法創建新的日期物件：

new Date()
new Date(year, month, day, hours, minutes, seconds, milliseconds)
new Date(milliseconds)
new Date(date string)

日期獲取方式

在這里插入圖片描述

日期設定方式

在這里插入圖片描述

Math物件方法

在這里插入圖片描述

JavaScript 隨機

Math.random()

Math.random() 回傳 0（包括）至 1（不包括）之間的亂數：

JavaScript 隨機整數

Math.random() 與 Math.floor() 一起使用用于回傳隨機整數，

Math.floor(Math.random() * 10);		// 回傳 0 至 9 之間的數

一個適當的隨機函式

正如你從上面的例子看到的，創建一個隨機函式用于生成所有隨機整數是一個好主意，

這個 JavaScript 函式始侄訓傳介于 min（包括）和 max（不包括）之間的亂數：

function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
}

For/In 回圈

JavaScript for/in 陳述句遍歷物件的屬性：

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

JavaScript 標簽的break和continue

語法

break labelname;
continue labelname;

continue 陳述句（不論有無標簽參考）只能用于跳過一個迭代，
break 陳述句，如果沒有標簽參考，只能用于跳出一個回圈或一個 switch，
如果有標簽參考，則 break 陳述句可用于跳出任意代碼塊：
實體：

var  cars = ["BMW", "Volvo", "Saab", "Ford"];
list: {
    text += cars[0] + "<br>"; 
    text += cars[1] + "<br>"; 
    text += cars[2] + "<br>"; 
    break list;
    text += cars[3] + "<br>"; 
    text += cars[4] + "<br>"; 
    text += cars[5] + "<br>"; 
}

效果：
在這里插入圖片描述

JavaScript 表單

Html表單實體：

<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必須填寫姓名！");
    return false;
  }
}
</script>
</head>
<body>

<form name="myForm" action="/demo/html/action_page.php" onsubmit="return validateForm()" method="post">
  姓名：<input type="text" name="fname">
  <input type="submit" value="提交">
</form>

</body>
</html>

如果不填寫資訊，點擊提交將會跳出彈窗提示必須填寫姓名
在這里插入圖片描述

document.getElementById(“numb”).value

獲取id為numb的值

document.getElementById(“demo”).innerHTML = text

賦值text給id為demo的元素

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/294493.html

標籤：其他

上一篇：【Electron】使用Electron將web專案打包成桌面應用程式

下一篇：JavaScript介紹 this 指向的各種情況（必會）