主頁 > 前端設計 > JavaScript教程帶你快速入門

JavaScript教程帶你快速入門

2021-09-04 07:41:06 前端設計

JavaScript 簡介

JavaScript（簡稱“JS”） 是一種具有函式優先的輕量級，解釋型或即時編譯型的高級編程語言，

JavaScript 是基于原型編程、多范式的動態腳本語言，并且支持面向物件、命令式和宣告式（如函式式編程）風格，

JavaScript 用法

HTML 中的腳本必須位于 標簽之間，

腳本可被放置在 HTML 頁面的 和 部分中，

<script>標簽

<script> 和 </script> 會告訴 JavaScript 在何處開始和結束，

<script> 和 </script> 之間的代碼行包含了 JavaScript:

<script>
alert("我的第一個 JavaScript");
</script>

<body> 中的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        alert("我的第一個 JavaScript");
    </script>
</body>
</html>

JavaScript 函式和事件

上面代碼中的 JavaScript 陳述句，會在頁面加載時執行，如果我們把 JavaScript 代碼放入函式中，就可以在事件發生時呼叫該函式，如：用戶點擊按鈕時執行代碼，

<head> 中的 JavaScript 函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function myFunction() {
            alert("我的第一個 JavaScript函式");
        }
    </script>
</head>
<body>
    <button type="button" onclick="myFunction()">按鈕</button>
</body>
</html>

點擊按鈕時呼叫JavaScript函式如下圖
在這里插入圖片描述
<body> 中的 JavaScript 函式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" onclick="myFunction()">按鈕</button>
    <script>
        function myFunction() {
            alert("我的第一個 JavaScript函式");
        }
    </script>
</body>
</html>

效果一樣如下圖
在這里插入圖片描述
外部的 JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="firstScript.js"></script>
</head>
<body>
    <button type="button" onclick="myFunction()">按鈕</button>
</body>
</html>

firstScript.js代碼如下

function myFunction(){
    alert("我的第一個 JavaScript函式");
}

JavaScript 輸出

  • window.alert() 彈出警告框，
  • document.write() 方法將內容寫到 HTML 檔案中，
  • innerHTML 寫入到 HTML 元素，
  • console.log() 寫入到瀏覽器的控制臺，

使用 window.alert()彈出警告框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.alert('彈出警告框');
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述
使用document.write() 將內容寫到 HTML 檔案

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write('將內容到HTML檔案中');
    </script>
</head>
<body>

</body>
</html>

使用innerHTML 寫入到 HTML 元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">我的第一個段落</p>
    <script>
        document.getElementById("demo").innerHTML = "寫入HTML元素";
    </script>
</body>
</html>

在這里插入圖片描述
使用console.log() 寫入到瀏覽器的控制臺

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log("寫入控制臺")
    </script>
</head>
<body>

</body>
</html>

在這里插入圖片描述

JavaScript 語法

JavaScript 是一個腳本語言，是一個輕量級，但功能強大的編程語言，

JavaScript 字面量

數字（Number）字面量 可以是整數或者是小數，或者是科學計數(e)：

3
3.14
3.1415926e5

字串（String）字面量 可以使用單引號或雙引號：

‘Demo’
“Demo”

運算式字面量 用于計算：

3+9
3*9

陣列（Array）字面量 定義一個陣列：

[1, 2, 3, 4, 5]

物件（Object）字面量 定義一個物件：

{Name:“OIqng”, age:18}

JavaScript 變數

JavaScript 使用關鍵字 var 來定義變數， 使用等號來為變數賦值：

var x = 4

JavaScript 運算子

型別實體
賦值，算術和位運算子= + - * /
條件，比較及邏輯運算子== != < >

JavaScript 陳述句

x = 4 + 5;

JavaScript 關鍵字

abstractelseinstanceof
booleanenumint
breakexportinterface
byteextendslet
casefalselong
catchfinalnative
charfinallynew
classfloatnull
constforpackage
continuefunctionprivate
debuggergotoprotected
defaultifpublic
deleteimplementsreturn
doimportshort
doubleinstatic

JavaScript 注釋

雙斜杠 // 后的內容將會被瀏覽器忽略：

// 這是一個注釋

JavaScript 資料型別

JavaScript 有多種資料型別：數字，字串，陣列，物件等等：

var x = 3; // Number 通過數字字面量賦值
var y = x * 10; // Number 通過運算式字面量賦值
var Name = “OIqng”; // String 通過字串字面量賦值
var a = [1, 2, 3]; // Array 通過陣列字面量賦值
var person = {Name:“OIqng”, age:18}; // Object 通過物件字面量賦值

JavaScript 函式

參考一個函式 = 呼叫函式(執行函式內的陳述句)，

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

JavaScript 字母大小寫

JavaScript 對大小寫是敏感的，常見的是駝峰法的命名規則，

lastName

JavaScript 陳述句

分號 ;

分號用于分隔 JavaScript 陳述句

a = 4;
b = 5;
c = a + b;

JavaScript 代碼

document.getElementById("demo").innerHTML("你好");

JavaScript 代碼塊

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

function myFunction() {
	document.getElementById("demo").innerHTML("你好")
}

JavaScript 陳述句識別符號

陳述句描述
break用于跳出回圈
catch陳述句塊，在 try 陳述句塊執行出錯時執行 catch 陳述句塊
continue跳過回圈中的一個迭代
do … while執行一個陳述句塊，在條件陳述句為 true 時繼續執行該陳述句塊
for在條件陳述句為 true 時，可以將代碼塊執行指定的次數
for … in用于遍歷陣列或者物件的屬性（對陣列或者物件的屬性進行回圈操作）
function定義一個函式
if … else用于基于不同的條件來執行不同的動作
return退出函式
switch用于基于不同的條件來執行不同的動作
throw拋出（生成）錯誤
try實作錯誤處理，與 catch 一同使用
var宣告一個變數
while當條件陳述句為 true 時，執行陳述句塊

空格

JavaScript 會忽略多余的空格，您可以向腳本添加空格，來提高其可讀性，下面的兩行代碼是等效的：

var name=“OIqng”;
var name = “OIqng”;

對代碼行進行折行

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

<script>
        document.write("Hell\
        World!");
</script>

JavaScript 注釋

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

單行注釋以 // 開頭：

// 這是個注釋

JavaScript 多行注釋

/*
這是
一個
多行注釋
*/

JavaScript 變數

變數是用于存盤資訊的"容器"，

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

  • 變數必須以字母開頭
  • 變數也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
  • 變數名稱對大小寫敏感（y 和 Y 是不同的變數）

一條陳述句，多個變數

var name=“OIqng”, age=18;

也可跨行宣告

var name=“OIqng”,
age=18;

Value = undefined

在計算機程式中，經常會宣告無值的變數，未使用值來宣告的變數，其值實際上是 undefined，

var x;

JavaScript 資料型別

值型別(基本型別)：字串（String）、數字(Number)、布爾(Boolean)、空（Null）、未定義（Undefined）、Symbol，

參考資料型別：物件(Object)、陣列(Array)、函式(Function)，

JavaScript 擁有動態型別

意味著在JavaScript中相同的變數可用作不同的型別：

 <script>
        var x;
        x = 5;
        console.log(x)
        x = "OIqng"
        console.log(x)
 </script>

在這里插入圖片描述

JavaScript 字串

字串是存盤字符的變數，可以是單引號或雙引號中的任意文本：

<script>
    var answer;
    answer = "He is called 'OIqng'";
    console.log(answer);
    answer = 'He is called "OIqng"';
    console.log(answer);
</script>

在這里插入圖片描述
JavaScript 數字

JavaScript 只有一種數字型別

<script>
    var x = 3.00;
    console.log(x);
    x = 3;
    console.log(x);
    x = 3.14e2;
    console.log(x);
    x = 3.14e-2;
    console.log(x);
</script>

在這里插入圖片描述
JavaScript 布爾

布爾（邏輯）只能有兩個值：true 或 false，

<script>
        var x = true;
        console.log(x);
        var y = false;
        console.log(y);
    </script>

在這里插入圖片描述
JavaScript 陣列

<script>
        var a = new Array();
        a[0] = 1;
        a[1] = 2;
        console.log(a);
</script>

在這里插入圖片描述
JavaScript 物件

JavaScript 物件由花括號分隔，在括號內部，物件的屬性以名稱和值對的形式 (name : value) 來定義，屬性由逗號分隔：

<script>
        var person = {
            name : "OIqng",
            age : 18
        }
        console.log(person);
</script>

在這里插入圖片描述
Undefined 和 Null

Undefined 這個值表示變數不含有值，可以通過將變數的值設定為 null 來清空變數，

<script>
        var x;
        console.log(x);
        x = null;
        console.log(x);
</script>

在這里插入圖片描述

JavaScript 物件

JavaScript 物件是擁有屬性和方法的資料，

真實生活中的物件，屬性和方法

物件屬性方法
在這里插入圖片描述car.name =BMW
car.color=Quantum blue		car.start()
car.stop()

所有汽車都有這些屬性，但是每款車的屬性都不盡相同，所有汽車都擁有這些方法，但是它們被執行的時間都不相同，

JavaScript 物件

在 JavaScript中，幾乎所有的事物都是物件，物件也是一個變數，但物件可以包含多個值（多個變數）

var car = "BMW";

var car = {
            type:"BMW",
            color:"Quantum blue"
}

物件屬性

JavaScript 物件是鍵值對的容器

物件鍵值對的寫法類似于：

  • PHP 中的關聯陣列
  • Python 中的字典
  • C 語言中的哈希表
  • Java 中的哈希映射
  • Ruby 和 Perl 中的哈希表

訪問物件屬性

var car = {
            type:"BMW",
            color:"Quantum blue"
}
console.log(car.color)
console.log(car["color"])

在這里插入圖片描述

JavaScript 函式

函式是由事件驅動的或者當它被呼叫時執行的可重復使用的代碼塊，

JavaScript 函式語法

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

function functionname() {
            
}

呼叫帶引數的函式

在呼叫函式時，您可以向其傳遞值，這些值被稱為引數，這些引數可以在函式中使用，您可以發送任意多的引數，由逗號 (,) 分隔：

myFunction(argument1,argument2)

帶有回傳值的函式

有時，我們會希望函式將值回傳呼叫它的地方，通過使用 return 陳述句就可以實作，

在使用 return 陳述句時，函式會停止執行，并回傳指定的值，

function myFunction() {
            var x = 3;
            return x;
}

區域 JavaScript 變數

在 JavaScript 函式內部宣告的變數（使用 var）是區域變數，所以只能在函式內部訪問它，（該變數的作用域是區域的）,只要函式運行完畢，區域變數就會被洗掉，

全域 JavaScript 變數

在函式外宣告的變數是全域變數，網頁上的所有腳本和函式都能訪問它，

JavaScript 變數的生存期

JavaScript 變數的生命期從它們被宣告的時間開始,區域變數會在函式運行以后被洗掉,全域變數會在頁面關閉后被洗掉，

<script>
    var x = 1; // 不可配置全域屬性
    y = 2; // 可配置全域屬性
    console.log(this.x); // 1
    console.log(window.x); // 1

    delete x; // 無法洗掉
    console.log(x); //1

    delete y; 
    console.log(delete y); // true
    console.log(y); // 已經洗掉 報錯變數未定義
</script>

JavaScript 作用域

在 JavaScript 中, 作用域為可訪問變數，物件，函式的集合，

JavaScript 區域作用域

變數在函式內宣告，變數為區域作用域，

function myFunction() {
            var x = 3; // 函式內可呼叫x變數
}

JavaScript 全域變數

變數在函式外定義，即為全域變數，

		var x = 3; 
        function myFunction() {
            // 函式內可呼叫x變數
}

JavaScript 事件

HTML 事件是發生在 HTML 元素上的事情，

HTML 事件

HTML 事件可以是瀏覽器行為，也可以是用戶行為，

常見的HTML事件

事件描述
onchangeHTML 元素改變
onclick用戶點擊 HTML 元素
onmouseover用戶在一個HTML元素上移動滑鼠
onmouseout用戶從一個HTML元素上移開滑鼠
onkeydown用戶按下鍵盤按鍵
onload瀏覽器已完成頁面的加載

事件可以用于處理表單驗證，用戶輸入，用戶行為及瀏覽器動作:

  • 頁面加載時觸發事件
  • 頁面關閉時觸發事件
  • 用戶點擊按鈕執行動作
  • 驗證用戶輸入內容的合法性
  • …

JavaScript 字串

JavaScript 字串用于存盤和處理文本，

字串長度

使用內置屬性 length 來計算字串的長度：

var sentence = "Its better to be alone than to be with someone youre not happy to be with";
console.log(sentence.length)

在這里插入圖片描述
特殊字符

代碼輸出
\’單引號
\"雙引號
\\反斜杠
\n換行
\r回車
\ttab(制表符)
\b退格符
\f換頁符

字串可以是物件

我們也可以使用 new 關鍵字將字串定義為一個物件

var name1 = "OIqng";
console.log(typeof name1);
var name2 = new String("OIqng");
console.log(typeof name2);

在這里插入圖片描述
字串屬性和方法

字串屬性

屬性描述
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 算術運算子

下面的表格解釋了這些算術運算子：

運算子描述
+加法
-減法
*乘法
/除法
%取余數
++自增
–自減

JavaScript 賦值運算子

賦值運算子用于給 JavaScript 變數賦值，

運算子例子等同于
=x=y
+=x+=yx=x+y
-=x-=yx=x-y
*=x*=yx=x*y
/=x/=yx=x/y
%=x%=yx=x%y

用于字串的 + 運算子

+ 運算子用于把文本值或字串變數加起來（連接起來），

var name1 = "My name is ";
var name2 = "OIqng";
console.log(name1 + name2);

在這里插入圖片描述
對字串和數字進行加法運算

var x = 5 + 4;
console.log(x);
var y = "5" + 4;
console.log(y);

在這里插入圖片描述

JavaScript 比較符

比較運算子

運算子描述
==等于
===絕對等于（值和型別均相等）
!=不等于
!==不絕對等于（值和型別有一個不相等，或兩個都不相等）
>大于
<小于
>=大于或等于
<=小于或等于

邏輯運算子

運算子描述
&&and
!not

條件運算子

variablename=(condition)?value1:value2

JavaScript 條件陳述句

  • if 陳述句 - 只有當指定條件為 true 時，使用該陳述句來執行代碼
  • if…else 陳述句 - 當條件為 true 時執行代碼，當條件為 false 時執行其他代碼
  • if…else if…else 陳述句- 使用該陳述句來選擇多個代碼塊之一來執行
  • switch 陳述句 - 使用該陳述句來選擇多個代碼塊之一來執行

if 陳述句

if (condition)
{
    // 當條件為 true 時執行的代碼
}

if…else 陳述句

if (condition)
{
    // 當條件為 true 時執行的代碼
}
else
{
    // 當條件不為 true 時執行的代碼
}

if…else if…else 陳述句

if (condition1)
{
    // 當條件 1 為 true 時執行的代碼
}
else if (condition2)
{
    // 當條件 2 為 true 時執行的代碼
}
else
{
  // 當條件 1 和 條件 2 都不為 true 時執行的代碼
}

JavaScript switch 陳述句

switch(n)
{
    case 1:
        // 執行代碼塊 1
        break;
    case 2:
        // 執行代碼塊 2
        break;
    default:
        // 當 case 1 和 case 2 條件不滿足時執行的代碼
}

JavaScript 回圈

  • for - 回圈代碼塊一定的次數
  • for/in - 回圈遍歷物件的屬性
  • while - 當指定的條件為 true 時回圈指定的代碼塊
  • do/while - 同樣當指定的條件為 true 時回圈指定的代碼塊

For 回圈

for (var i = 0; i < 5; i++) {
            console.log(i);
}

在這里插入圖片描述
For/In 回圈

var person = {
    name:"OIqng",
    age:18
}
for (i in person) {
    console.log(person[i]);
}

在這里插入圖片描述

JavaScript while 回圈

while 回圈

while (condition)
{
   // 需要執行的代碼
}

do/while 回圈

do
{
    // 需要執行的代碼
}
while (condition);

JavaScript break 和 continue 陳述句

break 陳述句用于跳出回圈，continue 用于跳過回圈中的一個迭代，

break 陳述句

for (var i = 0; i < 5; i++) {
            if (i == 3) {
                break;
            }
            console.log(i);
}

在這里插入圖片描述
continue 陳述句

for (var i = 0; i < 5; i++) {
            if (i == 3) {
                continue;
            }
            console.log(i);
}

JavaScript typeof

typeof 運算子

使用 typeof 運算子來檢測變數的資料型別，

console.log(typeof "OIqng");
console.log(typeof 3);
console.log(typeof true);
console.log(typeof [3]);
console.log(typeof {name:"OIqng"});

在這里插入圖片描述
null

null是一個值為空的特殊型別，表示一個空物件參考，

var x = null;
console.log(x);
console.log(typeof x);

在這里插入圖片描述
undefined

在 JavaScript 中, undefined 是一個沒有設定值的變數，typeof 一個沒有值的變數會回傳 undefined，

x = undefined;
console.log(x);
console.log(typeof x);

在這里插入圖片描述
undefined 和 null 的區別

null 和 undefined 的值相等，但型別不等：

var x = null;
var y = undefined;
console.log(x == y);
console.log(x === y);

在這里插入圖片描述

JavaScript 型別轉換

Number() 轉換為數字， String() 轉換為字串， Boolean() 轉化為布林值，

JavaScript 資料型別

在 JavaScript 中有 6 種不同的資料型別：

  • string
  • number
  • boolean
  • object
  • function
  • symbol

3 種物件型別：

  • Object
  • Date
  • Array

2 個不包含任何值的資料型別：

  • null
  • undefined

constructor 屬性

constructor 屬性回傳所有 JavaScript 變數的建構式，

document.write("OIqng".constructor + "<br>");              
document.write((3.14).constructor + "<br>");                 
document.write(true.constructor + "<br>");                 
document.write([1].constructor + "<br>");             
document.write(new Date().constructor + "<br>");

在這里插入圖片描述
JavaScript 型別轉換

  • 通過使用 JavaScript 函式
  • 通過 JavaScript 自身自動轉換

將數字轉換為字串

全域方法 String() 可以將數字轉換為字串，

console.log(typeof String(1));      
console.log(typeof String(1 + 2));

在這里插入圖片描述
Number 方法 toString() 也是有同樣的效果

var x = 3;
console.log(typeof x.toString());

在這里插入圖片描述
數字轉換為字串的方法：

方法描述
toExponential()把物件的值轉換為指數計數法
toFixed()把數字轉換為字串，結果的小數點后有指定位數的數字
toPrecision()把數字格式化為指定的長度

將布林值轉換為字串

console.log(typeof String(true)); // 全域方法 String() 可以將布林值轉換為字串      
console.log(typeof true.toString()); // Boolean 方法 toString()

將日期轉換為字串

console.log(typeof Date()); // Date() 回傳字串，   
console.log(typeof String(new Date())); // 全域方法 String() 可以將日期物件轉換為字串

Date 方法 toString()也可以將日期物件轉換為字串

a = new Date()
console.log(typeof a.toString());

日期轉換為字串的函式：

方法描述
getDate()從 Date 物件回傳一個月中的某一天 (1 ~ 31)
getDay()從 Date 物件回傳一周中的某一天 (0 ~ 6)
getFullYear()從 Date 物件以四位數字回傳年份
getHours()回傳 Date 物件的小時 (0 ~ 23)
getMilliseconds()回傳 Date 物件的毫秒(0 ~ 999)
getMinutes()回傳 Date 物件的分鐘 (0 ~ 59)
getMonth()從 Date 物件回傳月份 (0 ~ 11)
getSeconds()回傳 Date 物件的秒數 (0 ~ 59)
getTime()回傳 1970 年 1 月 1 日至今的毫秒數

將字串轉換為數字

全域方法 Number() 可以將字串轉換為數字，

console.log(Number("3"));
console.log(Number(""));    
console.log(Number(" "));

在這里插入圖片描述
字串轉為數字的方法：

方法描述
parseFloat()決議一個字串，并回傳一個浮點數
parseInt()決議一個字串，并回傳一個整數

+ 可用于將變數轉換為數字，如果變數不能轉換，它仍然會是一個數字，但值為 NaN

var x = "3";
var y = + x;
console.log(y);
x = "OIqng";
y = + x;
console.log(y);

在這里插入圖片描述
將布林值轉換為數字

console.log(Number(true));

在這里插入圖片描述
將日期轉換為數字

a = new Date();
console.log(Number(a)); // 全域方法 Number() 可將日期轉換為數字
console.log(a.getTime()); // 日期方法 getTime()

自動轉換型別

當 JavaScript 嘗試操作一個 “錯誤” 的資料型別時，會自動轉換為 “正確” 的資料型別

JavaScript 正則運算式

正則運算式（英文：Regular Expression，在代碼中常簡寫為regex、regexp或RE）使用單個字串來描述、匹配一系列符合某個句法規則的字串搜索模式，

搜索模式可用于文本搜索和文本替換，

/正則運算式主體/修飾符(可選)

使用字串方法

search() 方法 用于檢索字串中指定的子字串，或檢索與正則運算式相匹配的子字串，并回傳子串的起始位置，

replace() 方法 用于在字串中用一些字符替換另一些字符，或替換一個與正則運算式匹配的子串，

search() 方法使用正則運算式

var str = "Visit OIqng!";
var n = str.search(/OIqng/i);
console.log(n);

search() 方法使用字串

var str = "Visit OIqng!";
var n = str.search("OIqng");
console.log(n);

在這里插入圖片描述
replace() 方法使用正則運算式

使用正則運算式且不區分大小寫將字串中的name替換為 OIqng:

var str = "Visit name!";
var n = str.replace(/name/i, "OIqng");
console.log(n);

在這里插入圖片描述
replace() 方法使用字串

var str = "Visit name!";
var n = str.replace("name", "OIqng");
console.log(n);

在這里插入圖片描述
正則運算式修飾符

修飾符 可以在全域搜索中不區分大小寫:

修飾符描述
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，

console.log(/e/.test("the best thing is learning knowledge"));

在這里插入圖片描述
使用 exec()

exec() 方法用于檢索字串中的正則運算式的匹配，該函式回傳一個陣列，其中存放匹配的結果，如果未找到匹配，則回傳值為 null，

console.log(/e/.exec("the best thing is learning knowledge"));

在這里插入圖片描述

JavaScript 錯誤

try 陳述句測驗代碼塊的錯誤，
catch 陳述句處理錯誤，
throw 陳述句創建自定義錯誤，
finally 陳述句在 try 和 catch 陳述句之后，無論是否有觸發例外，該陳述句都會執行，

JavaScript 拋出（throw）錯誤

當錯誤發生時，當事情出問題時，JavaScript 引擎通常會停止，并生成一個錯誤訊息，

描述這種情況的技術術語是：JavaScript 將拋出一個錯誤，

JavaScript try 和 catch

try 陳述句允許我們定義在執行時進行錯誤測驗的代碼塊，catch 陳述句允許我們定義當 try 代碼塊發生錯誤時，所執行的代碼塊，JavaScript 陳述句 try 和 catch 是成對出現的，

try {
    ...    // 例外的拋出
} catch(err) {
    ...    // 例外的捕獲與處理
} finally {
    ...    // 結束處理
}

Throw 陳述句

throw 陳述句允許我們創建自定義錯誤，正確的技術術語是：創建或拋出例外（exception），如果把 throw 與 try 和 catch 一起使用，那么您能夠控制程式流，并生成自定義的錯誤訊息，

throw exception

JavaScript 除錯

console.log() 方法

在除錯視窗上列印 JavaScript 值

設定斷點

在除錯視窗中，你可以設定 JavaScript 代碼的斷點，在每個斷點上，都會停止執行 JavaScript 代碼，以便于我們檢查 JavaScript 變數的值，

debugger 關鍵字

debugger 關鍵字用于停止執行 JavaScript，并呼叫除錯函式，

JavaScript 變數提升

在JavaScript 中，函式及變數的宣告都將被提升到函式的最頂部，

在JavaScript 中，變數可以在使用后宣告，也就是變數可以先使用再宣告，

變數提升：函式宣告和變數宣告總是會被解釋器悄悄地被"提升"到方法體的最頂部，

x = 3;
console.log(x);
var x;

在這里插入圖片描述

var x;
x = 3;
console.log(x);

在這里插入圖片描述
JavaScript 初始化不會提升

JavaScript 只有宣告的變數會提升，初始化的不會，

var x = 3;
var y = 5;
console.log("x = " + x + " y = " + y);

在這里插入圖片描述

var x = 3;
console.log("x = " + x + " y = " + y);
var y = 5;

在這里插入圖片描述

JavaScript 嚴格模式

JavaScript 嚴格模式（strict mode）即在嚴格的條件下運行，

使用 “use strict” 指令

“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增，嚴格模式下你不能使用未宣告的變數，

嚴格模式宣告

嚴格模式通過在腳本或函式的頭部添加 “use strict”; 運算式來宣告，

 <script>    
        "use strict";
</script>

<script>    
    "use strict";
    x = 3;
</script>

在這里插入圖片描述

嚴格模式的限制

  • 不允許使用未宣告的變數
  • 不允許洗掉變數或物件
  • 不允許洗掉變數或物件
  • 不允許洗掉函式
  • 不允許變數重名
  • 不允許使用八進制
  • 不允許使用轉義字符
  • 不允許對只讀屬性賦值
  • 不允許對一個使用getter方法讀取的屬性進行賦值
  • 不允許洗掉一個不允許洗掉的屬性
  • 變數名不能使用 “eval” 字串
  • 變數名不能使用 “arguments” 字串
  • 在作用域 eval() 創建的變數不能被呼叫
  • 禁止this關鍵字指向全域物件

保留關鍵字

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

JavaScript 表單

HTML 表單自動驗證

如果表單欄位 (fname) 的值為空, required 屬性會阻止表單提交

 <input type="text" name="fname" required="required">

資料驗證

服務端資料驗證是在資料提交到服務器上后再驗證，

客戶端資料驗證是在資料發送到服務器前，在瀏覽器上完成驗證，

HTML 約束驗證

  • HTML 輸入屬性
  • CSS 偽類選擇器
  • DOM 屬性和方法

約束驗證 HTML 輸入屬性

屬性描述
disabled規定輸入的元素不可用
max規定輸入元素的最大值
min規定輸入元素的最小值
pattern規定輸入元素值的模式
required規定輸入元素欄位是必需的
type規定輸入元素的型別

約束驗證 CSS 偽類選擇器

選擇器描述
:disabled選取屬性為 “disabled” 屬性的 input 元素
:invalid選取無效的 input 元素
:optional選擇沒有"required"屬性的 input 元素
:required選擇有"required"屬性的 input 元素
:valid選取有效值的 input 元素

JavaScript 驗證 API

約束驗證 DOM 方法

PropertyDescription
checkValidity()如果 input 元素中的資料是合法的回傳 true
setCustomValidity()設定 input 元素的 validationMessage 屬性，用于自定義錯誤提示資訊的方法，
使用 setCustomValidity 設定了自定義提示后，validity.customError 就會變成true，則 checkValidity 總是會回傳false，
如果要重新判斷需要取消自定義提示，方式如下：setCustomValidity(’’)
setCustomValidity(null)
setCustomValidity(undefined)

約束驗證 DOM 屬性

屬性描述
validity布爾屬性值，回傳 input 輸入值是否合法
validationMessage瀏覽器錯誤提示資訊
willValidate指定 input 是否需要驗證
Validity屬性
input元素的 validity 屬性包含一系列關于 validity 資料屬性
屬性描述
customError設定為 true, 如果設定了自定義的 validity 資訊
patternMismatch設定為 true, 如果元素的值不匹配它的模式屬性
rangeOverflow設定為 true, 如果元素的值大于設定的最大值
rangeUnderflow設定為 true, 如果元素的值小于它的最小值
stepMismatch設定為 true, 如果元素的值不是按照規定的 step 屬性設定
tooLong設定為 true, 如果元素的值超過了 maxLength 屬性設定的長度
typeMismatch設定為 true, 如果元素的值不是預期相匹配的型別
valueMissing設定為 true，如果元素 (required 屬性) 沒有值
valid設定為 true，如果元素的值是合法的

JavaScript 保留關鍵字

JavaScript 標準

ECMAScript 5（ES5，2009 年發布），是 JavaScript 最新的官方版本，

JavaScript 保留關鍵字

Javascript 的保留關鍵字不可以用作變數、標簽或者函式名，有些保留關鍵字是作為 Javascript 以后擴展使用，

abstractargumentsbooleanbreakbyte
casecatchcharclass*const
continuedebuggerdefaultdeletedo
doubleelseenum*evalexport*
extends*falsefinalfinallyfloat
forfunctiongotoifimplements
import*ininstanceofintinterface
letlongnativenewnull
packageprivateprotectedpublicreturn
shortstaticsuper*switchsynchronized
thisthrowthrowstransienttrue
trytypeofvarvoidvolatile
whilewithyield

* 標記的關鍵字是 ECMAScript5 中新添加的，

JavaScript 物件、屬性和方法

您也應該避免使用 JavaScript 內置的物件、屬性和方法的名稱作為 Javascript 的變數或函式名：

ArrayDateevalfunctionhasOwnProperty
InfinityisFiniteisNaNisPrototypeOflength
MathNaNnameNumberObject
prototypeStringtoStringundefinedvalueOf

Java 保留關鍵字

JavaScript 經常與 Java 一起使用，您應該避免使用一些 Java 物件和屬性作為 JavaScript 識別符號：

getClassjavaJavaArrayjavaClass
JavaObjectJavaPackage

Windows 保留關鍵字

在 HTML 中，您必須（為了可移植性，您也應該這么做）避免使用 HTML 和 Windows 物件和屬性的名稱作為 Javascript 的變數及函式名：

alertallanchoranchorsarea
assignblurbuttoncheckboxclearInterval
clearTimeoutclientInformationcloseclosedconfirm
constructorcryptodecodeURIdecodeURIComponentdefaultStatus
documentelementelementsembedembeds
encodeURIencodeURIComponentescapeeventfileUpload
focusform formsframeinnerHeight
innerWidthlayerlayerslinklocation
mimeTypesnavigatenavigatorframesframeRate
hiddenhistoryimageimagesoffscreenBuffering
openopeneroptionouterHeightouterWidth
packagespageXOffsetpageYOffsetparentparseFloat
parseIntpasswordpkcs11pluginprompt
propertyIsEnumradioresetscreenXscreenY
scrollsecureselectselfsetInterval
setTimeoutstatussubmittainttext
textareatopunescapeuntaintwindow

HTML 事件句柄

除此之外，您還應該避免使用 HTML 事件句柄的名稱作為 Javascript 的變數及函式名，

onbluronclickonerroronfocus
onkeydownonkeypressonkeyuponmouseover
onloadonmouseuponmousedownonsubmit

JavaScript this

面向物件語言中 this 表示當前物件的一個參考，

但在 JavaScript 中 this 不是固定不變的，它會隨著執行環境的改變而改變，

  • 在方法中，this 表示該方法所屬的物件
  • 如果單獨使用，this 表示全域物件，
  • 在函式中，this 表示全域物件，
  • 在函式中，在嚴格模式下，this 是未定義的(undefined)，
  • 在事件中，this 表示接收事件的元素，
  • 類似 call() 和 apply() 方法可以將 this 參考到任何物件，

方法中的 this

在物件方法中， this 指向呼叫它所在方法的物件，

單獨使用 this

單獨使用 this，則它指向全域(Global)物件，

在瀏覽器中，window 就是該全域物件為 [object Window]

var x = this;
console.log(x);

在這里插入圖片描述

嚴格模式下，如果單獨使用，this 也是指向全域(Global)物件，

"use strict";
var x = this;
console.log(x);

在這里插入圖片描述
函式中使用 this（默認）

在函式中，函式的所屬者默認系結到 this 上，而在瀏覽器中，window 就是該全域物件為 [object Window]:

function myFunction() {
    return this;
}
console.log(myFunction());

在這里插入圖片描述
函式中使用 this（嚴格模式）

嚴格模式下函式是沒有系結到 this 上，這時候 this 是 undefined，

"use strict";
function myFunction() {
    return this;
}
console.log(myFunction());

在這里插入圖片描述
事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

<butto onclick="this.style.display='none'">點完就消失</button>

JavaScript let 和 const

ECMAScript 2015(ECMAScript 6)

ES2015(ES6) 新增加了兩個重要的 JavaScript 關鍵字: let 和 const，

  • let 宣告的變數只在 let 命令所在的代碼塊內有效，
  • const 宣告一個只讀的常量，一旦宣告，常量的值就不能改變，

let關鍵字

let 宣告的變數只在 let 命令所在的代碼塊 {} 內有效，在 {} 之外不能訪問，

{ 
    let x = 2;
}
// 這里不能使用 x 變數

重新定義變數

var x = 3;
console.log(x);
{
    let x = 5;
    console.log(x);
}
console.log(x);

使用 let 關鍵字宣告的全域作用域變數不屬于 window 物件:

let personName = "OIqng";
console.log(window.personName);

在這里插入圖片描述
在相同的作用域或塊級作用域中：

  • 不能使用 let 關鍵字來重置 var 關鍵字宣告的變數
  • 不能使用 let 關鍵字來重置 let 關鍵字宣告的變數
  • 不能使用 var 關鍵字來重置 let 關鍵字宣告的變數:

let 關鍵字定義的變數則不可以在使用后宣告，也就是變數需要先宣告再使用，

const 關鍵字

const 用于宣告一個或多個常量，宣告時必須進行初始化，且初始化后值不可再修改

const PI = 3.14;
PI = 3.1415926;

const定義常量與使用let 定義的變數相似：

  • 二者都是塊級作用域
  • 都不能和它所在作用域內的其他變數或函式擁有相同的名稱

兩者還有以下兩點區別：

  • const宣告的常量必須初始化，而let宣告的變數不用
  • const 定義常量的值不能通過再賦值修改，也不能再次宣告，而 let 定義的變數值可以修改，

在這里插入圖片描述
并非真正的常量

const 的本質: const 定義的變數并非常量，并非不可變，它定義了一個常量參考一個值，使用 const 定義的物件或者陣列，其實是可變的，

const car = {
    type:"BMW",
    color:"Quantum blue"
};
car.color = "Alpine White";
console.log(car);

在這里插入圖片描述
const 關鍵字定義的變數則不可以在使用后宣告，也就是變數需要先宣告再使用，

在相同的作用域或塊級作用域中：

  • 不能使用 const 關鍵字來重置 var 和 let關鍵字宣告的變數
  • 不能使用 const 關鍵字來重置 const 關鍵字宣告的變數

JavaScript JSON

JSON 是用于存盤和傳輸資料的格式，通常用于服務端向網頁傳遞資料 ，

  • JSON 英文全稱 JavaScript Object Notation
  • JSON 是一種輕量級的資料交換格式，
  • JSON是獨立的語言 （JSON 使用 JavaScript 語法，但是 JSON 格式僅僅是一個文本）
  • JSON 易于理解，

JSON 語法規則

  • 資料為 鍵/值 對，
  • 資料由逗號分隔，
  • 大括號保存物件
  • 方括號保存陣列

JSON 資料 ：一個名稱對應一個值

JSON 資料格式為 鍵/值 對，就像 JavaScript 物件屬性，

“name”:“OIqng”

JSON 字串轉換為 JavaScript 物件

var text = '{ "person" : [' +
    '{ "name":"OIqng"} ]}';    
obj = JSON.parse(text);
console.log(obj.person[0].name);

在這里插入圖片描述
相關函式

函式描述
JSON.parse()用于將一個 JSON 字串轉換為 JavaScript 物件
JSON.stringify()用于將 JavaScript 值轉換為 JSON 字串

JavaScript void

void 是 JavaScript 中非常重要的關鍵字，該運算子指定要計算一個運算式但是不回傳值，

void func()
javascript:void func()

href="#"與href="javascript:void(0)"的區別

# 包含了一個位置資訊，javascript:void(0), 僅僅表示一個死鏈接，

JavaScript 代碼規范

  • 變數和函式的命名規則
  • 空格，縮進，注釋的使用規則，
  • 其他常用規范……

變數名

變數名推薦使用駝峰法來命名(camelCase):

firstName

空格與運算子

通常運算子 ( = + - * / ) 前后需要添加空格:

var x = 1 + 3;

代碼縮進

通常使用 4 個空格符號來縮進代碼塊

陳述句規則

  • 陳述句通常以分號作為結束符
  • 將左花括號放在第一行的結尾，
  • 左花括號前添加一空格，
  • 將右花括號獨立放在一行，
  • 不要以分號結束一個復雜的宣告

物件規則

  • 將左花括號與類名放在同一行，
  • 冒號與屬性值間有個空格，
  • 字串使用雙引號，數字不需要，
  • 最后一個屬性-值對后面不要添加逗號，
  • 將右花括號獨立放在一行，并以分號作為結束符號

每行代碼字符小于 80

命名規則

  • 變數和函式為小駝峰法標識, 即除第一個單詞之外，其他單詞首字母大寫（ lowerCamelCase）
  • 全域變數為大寫 (UPPERCASE )
  • 常量 (如 PI) 為大寫 (UPPERCASE )

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

標籤：其他

上一篇：Vue2組件間通信---子傳父值自定義事件

下一篇：HTML+CSS+JS實作 ??新型冠狀病毒射擊小游戲??

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • vue移動端上拉加載

    可能做得過于簡單或者比較low，請各位大佬留情，一起探討技術 ......

    uj5u.com 2020-09-10 04:38:07 more
  • 優美網站首頁，頂部多層導航

    一個個人用的瀏覽器首頁，可以把一下常用的網站放在這里，平常打開會比較方便。 第一步，HTML代碼 <script src=https://www.cnblogs.com/szharf/p/"js/jquery-3.4.1.min.js"></script> <div id="navigate"> <ul> <li class="labels labels_1"> ......

    uj5u.com 2020-09-10 04:38:47 more
  • 頁面為要加<!DOCTYPE html>

    最近因為寫一個js函式，需要用到$(window).height(); 由于手寫demo的時候，過于自信，其實對前端方面的認識也不夠體系，用文本檔案直接敲出來的html代碼，第一行沒有加上<!DOCTYPE html> 導致了$(window).height();的結果直接是整個document的高 ......

    uj5u.com 2020-09-10 04:38:52 more
  • WordPress網站程式手動升級要做好資料備份

    WordPress博客網站程式在進行升級前，必須要做好網站資料的備份，這個問題良家佐言是遇見過的；在剛開始接觸WordPress博客程式的時候，因為升級問題和博客網站的修改的一些嘗試，良家佐言是吃盡了苦頭。因為購買的是西部數碼的空間和域名，每當佐言把自己的WordPress博客網站搞到一塌糊涂的時候 ......

    uj5u.com 2020-09-10 04:39:30 more
  • WordPress程式不能升級為5.4.2版本的原因

    WordPress是一款個人博客系統，受到英文博客愛好者和中文博客愛好者的追捧，并逐步演化成一款內容管理系統軟體；它是使用PHP語言和MySQL資料庫開發的,用戶可以在支持PHP和MySQL資料庫的服務器上使用自己的博客。每一次WordPress程式的更新，就會牽動無數WordPress愛好者的心， ......

    uj5u.com 2020-09-10 04:39:49 more
  • 使用CSS3的偽元素進行首字母下沉和首行改變樣式

    網頁中常見的一種效果，首字改變樣式或者首行改變樣式，效果如下圖。 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ......

    uj5u.com 2020-09-10 04:40:09 more
  • 關于a標簽的講解

    什么是a標簽？ <a> 標簽定義超鏈接，用于從一個頁面鏈接到另一個頁面。 <a> 元素最重要的屬性是 href 屬性，它指定鏈接的目標。 a標簽的語法格式：<a href=https://www.cnblogs.com/summerxbc/p/"指定要跳轉的目標界面的鏈接">需要展示給用戶看見的內容</a> a標簽 在所有瀏覽器中，鏈接的默認外觀如下： 未被訪問的鏈接帶 ......

    uj5u.com 2020-09-10 04:40:11 more
  • 前端輪播圖

    在需要輪播的頁面是引入swiper.min.js和swiper.min.css swiper.min.js地址： 鏈接：https://pan.baidu.com/s/15Uh516YHa4CV3X-RyjEIWw 提取碼：4aks swiper.min.css地址 鏈接：https://pan.b ......

    uj5u.com 2020-09-10 04:40:13 more
  • 如何設定html中的背景圖片（全屏顯示，且不拉伸）

    1 <style>2 body{background-image:url(https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture); 3 background-size:cover;background ......

    uj5u.com 2020-09-10 04:40:16 more
  • Java學習——HTML詳解（上）

    HTML詳解 初識HTML Hyper Text Markup Language（超文本標記語言） 1 <!--DOCTYPE:告訴瀏覽器我們要使用什么規范--> 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <!--meta 描述性的標簽，描述一些 ......

    uj5u.com 2020-09-10 04:40:33 more
最新发布
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 07:59:23 more
  • 生產事故-走近科學之消失的JWT

    入職多年，面對生產環境，盡管都是小心翼翼，慎之又慎，還是難免捅出簍子。輕則滿頭大汗，面紅耳赤。重則系統停擺，損失資金。每一個生產事故的背后，都是寶貴的經驗和教訓，都是專案成員的血淚史。為了更好地防范和遏制今后的各類事故，特開此專題，長期更新和記錄大大小小的各類事故。有些是親身經歷，有些是經人耳傳口授 ......

    uj5u.com 2023-04-18 07:55:04 more
  • 記錄--Canvas實作打飛字游戲

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 打開游戲界面，看到一個畫面簡潔、卻又富有挑戰性的游戲。螢屏上，有一個白色的矩形框，里面不斷下落著各種單詞，而我需要迅速地輸入這些單詞。如果我輸入的單詞與螢屏上的單詞匹配，那么我就可以獲得得分；如果我輸入的單詞錯誤或者時間過長，那么我就會輸 ......

    uj5u.com 2023-04-04 08:35:30 more
  • 了解 HTTP 看這一篇就夠

    在學習網路之前，了解它的歷史能夠幫助我們明白為何它會發展為如今這個樣子，引發探究網路的興趣。下面的這張圖片就展示了“互聯網”誕生至今的發展歷程。 ......

    uj5u.com 2023-03-16 11:00:15 more
  • 藍牙-低功耗中心設備

    //11.開啟藍牙配接器 openBluetoothAdapter //21.開始搜索藍牙設備 startBluetoothDevicesDiscovery //31.開啟監聽搜索藍牙設備 onBluetoothDeviceFound //30.停止監聽搜索藍牙設備 offBluetoothDevi ......

    uj5u.com 2023-03-15 09:06:45 more
  • canvas畫板（滑鼠和觸摸）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canves</title> <style> #canvas { cursor:url(../images/pen.png),crosshair; } #canvasdiv{ bo ......

    uj5u.com 2023-02-15 08:56:31 more
  • 手機端H5 實作自定義拍照界面

    手機端 H5 實作自定義拍照界面也可以使用 MediaDevices API 和 <video> 標簽來實作，和在桌面端做法基本一致。 首先，使用 MediaDevices.getUserMedia() 方法獲取攝像頭媒體流，并將其傳遞給 <video> 標簽進行渲染。 接著，使用 HTML 的 < ......

    uj5u.com 2023-01-12 07:58:22 more
  • 記錄--短視頻滑動播放在 H5 下的實作

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 短視頻已經無數不在了，但是主體還是使用 app 來承載的。本文講述 H5 如何實作 app 的視頻滑動體驗。 無聲勝有聲，一圖頂百辯，且看下圖： 網址鏈接（需在微信或者手Q中瀏覽） 從上圖可以看到，我們主要實作的功能也是本文要講解的有： ......

    uj5u.com 2023-01-04 07:29:05 more
  • 一文讀懂 HTTP/1 HTTP/2 HTTP/3

    從 1989 年萬維網（www）誕生，HTTP（HyperText Transfer Protocol）經歷了眾多版本迭代，WebSocket 也在期間萌芽。1991 年 HTTP0.9 被發明。1996 年出現了 HTTP1.0。2015 年 HTTP2 正式發布。2020 年 HTTP3 或能正... ......

    uj5u.com 2022-12-24 06:56:02 more
  • 【HTML基礎篇002】HTML之form表單超詳解

    ??一、form表單是什么

    ??二、form表單的屬性

    ??三、input中的各種Type屬性值

    ??四、標簽 ......

    uj5u.com 2022-12-18 07:17:06 more

Copyright © 2010-2020 有解無憂