Javascript

2024/05/31 00:00:00·2026/05/19 10:23:00

编程前端·64 min read

JavaScript 前端编程语言

参考

介绍

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

基本特性

大小写敏感
动态类型
支持函数式编程
支持面向对象编程
支持事件驱动编程
支持Ajax
支持JSON
支持Web 正则表达式
支持WebAssembly

安装

下载安装包
手动安装
使用CDN

如何使用

HTML中
- 放在<script> 与 </script> 标签之间。
- 通过src属性引入外部script

输出

console.log(“Hello World”); 建议方法，输出到控制台
window.alert(“Hello World”); 弹出对话框
window.prompt(“Enter your name:”,””); 弹出输入框
window.confirm(“Are you sure?”); 弹出确认框
innerHTML 修改HTML内容来输出
document.write(Date()); 直接在HTML文档中输出当前日期

注释

// 单行注释
/ / 多行注释

调试

console.log()
debugger 断点调试

严格模式

use strict 启用严格模式
严格模式下，不能使用未声明的变量
严格模式下，不允许删除变量或对象属性，不允许删除函数
严格模式下，不允许使用转义字符
严格模式下，不能使用八进制字面量
严格模式下，不能使用函数名和变量名相同的情况
严格模式下，不能使用 with 语句
严格模式下，不能使用 eval() 函数
严格模式下，不能使用 arguments.callee
严格模式下，不能使用 arguments.caller
严格模式下，不能使用 arguments[i] 访问参数
严格模式下，不能使用 arguments.length 修改参数长度
严格模式下，不能使用 arguments[i] = value 修改参数值
严格模式下，不能使用 this 关键字指向全局对象。因此，使用构造函数时，如果忘了加new，this不再指向全局对象，而是报错。
...

常见错误

比较运算符常见错误

var x = 10;
var y = "10";
if (x = y) // true, and now x is "10"
if (x == y) // true
if (x === y) // false

加法与连接

加法运算符 + 用于数字相加，字符串拼接，对象合并。
连接运算符 + 用于字符串拼接，数字转字符串。

var x = 10;
var y = 5;
var z = x + y;           
// z 的结果为 15
var x = 10;
var y = "5";
var z = x + y;           
// z 的结果为 "105"

var a = "Hello " + "World"; // "Hello World"
var b = "Hello " + 10; // "Hello 10"

精度问题

runoob

 var x = 0.1;
var y = 0.2;
var z = x + y            // z 的结果为 0.30000000000000004
if (z == 0.3)            // 返回 false

解决方法：

使用 toFixed() 方法将浮点数转换为字符串，并指定小数点后的精度。
使用 Number.EPSILON 属性，它表示 JavaScript 引擎认为的最小的正浮点数。

var x = 0.1;
var y = 0.2;
var z = (x + y).toFixed(2); // z 的结果为 "0.30"
if (z == "0.30") // 返回 true


var x = 0.1;
var y = 0.2;
if (Math.abs(x + y - 0.3) < Number.EPSILON) // 返回 true

return使用

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

返回undefined，因为return默认本行结尾，所以return后面的代码不会执行。

keywords

var 声明变量
let 声明块级作用域变量
const 声明常量,const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。使用 const 定义的对象或者数组，其实是可变的。
function 定义函数
if 条件语句
else 条件语句
switch 多分支条件语句
for 循环语句
while 循环语句
do-while 循环语句
break 跳出循环语句
continue 跳过当前循环
return 退出函数
typeof 检查数据类型
instanceof 检查对象类型
this 指向当前对象
Array 数组
Object 对象
String 字符串
Number 数字
Boolean 布尔值
Math 数学函数
Date 日期对象
RegExp 正则表达式
JSON 对象表示法
Map 映射对象
Set 集合对象
typeof 检查数据类型
instanceof 检查对象类型
this 指向当前对象

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

this

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。（在浏览器中，全局对象是 window 对象）
在函数中，this 表示全局对象。（[object Window]，严格模式下，this 是 undefined）
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法:

var person1 = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

var person2 = {
  firstName: "Jane",
  lastName: "Doe"
};

person1.fullName.apply(person2); // Output: "Jane Doe"

作用域

JavaScript 有两种作用域：全局作用域和函数作用域。

全局作用域：在函数外部定义的变量拥有全局作用域，它可以被所有函数访问和修改。

函数作用域：在函数内部定义的变量拥有函数作用域，它只能被该函数内部访问和修改。

// 全局作用域
var x = 10;

function myFunction() {
  // 函数作用域
  var y = 20;

## Les variables

变量必须以字母或下划线开头，不能以数字开头。

```js
var x = 10;
var y = "Hello World";
var _z = true;

可以在一条语句中声明多个变量，并用逗号分隔，可以同时初始化：

var x, y, z;
x = 10;
y = "Hello World";
z = true;

var x=10, y="Hello World", z=true;

变量类型

分为值类型（基本类型）和引用类型（对象类型）。

值类型：

字符串（String）
数字（Number）
布尔值（Boolean）
#null et undefined

引用类型：

数组（Array）
对象（Object）
函数（Function）

变量声明提升

JavaScript 引擎在执行代码时，会先扫描代码，将变量声明移动到函数的最前面，然后再执行代码。

但是赋值操作不会被提升，所以如果变量声明和赋值分开写，变量声明不会被提升，而变量的值会被覆盖。

let 关键字定义的变量不可以在使用后声明，也就是变量需要先声明再使用。

x = 10;
console.log(x); // Output: 10
var x;

Les mots clés

Il n'existe pas le mot clé "static" en javascript.
Les variables non déclarées à l’intérieur des fonctions sont GLOBALE
var permet de déclarer une variable locale à la fonction.
let permet de déclarer une variable locale à la portée d'un bloc.
const permet de déclarer une variable locale à la portée d'un bloc et ne peut être modifiée.
typeof permet de vérifier le type d'une variable.
instanceof permet de vérifier si un objet est une instance d'une classe.
this permet de référencer l'objet actuellement en cours d&39;exécution.

Si je donne une variable sans le mot clé var, elle sera considérée comme une propriété de l'objet global window.

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

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); // 已经删除 报错变量未定义

// Déclaration d'une variable globale
name = "John";

// Déclaration d'une variable locale à la fonction
function greet() {
  name = "Mike";
  console.log("Hello, my name is " + name);
}


// Déclaration d'une variable locale à la portée d'un bloc
if (true) {
  let age = 30;
  console.log("I am " + age + " years old.");
}

// Déclaration d'une variable locale à la portée d'un bloc et ne peut être modifiée
const PI = 3.14159265359;

// Vérification du type d'une variable
console.log(typeof name); // Output: "string"
console.log(typeof age); // Output: "undefined"
console.log(typeof PI); // Output: "number"

// Vérification de l'instance d'une classe
const person = new Object();
console.log(person instanceof Object); // Output: true
console.log(person instanceof Array); // Output: false

global and local variables

在 JavaScript 中，函数内部的局部变量通常不可以直接被外部作用域访问，但有几种方式可以将函数内的局部变量暴露给外部作用域，具体如下：

通过全局对象：在函数内部，可以通过将局部变量赋值给 window 对象的属性来使其成为全局可访问的。例如，使用 window.a = a; 语句，可以在函数外部通过 window.a 访问到这个局部变量的值。
通过闭包：在函数内部，可以通过闭包的方式将局部变量暴露给外部作用域。闭包是一个函数，它可以访问函数外部的变量，并且返回一个函数。闭包的典型用法是创建一个私有变量，该变量只能在函数内部访问。例如，可以定义一个函数，该函数返回另一个函数，该函数可以访问私有变量，并返回该变量的值。

// 全局变量
var name = "John";


// 局部变量
function greet() {
  var name = "Mike";
  console.log("Hello, my name is " + name);
}

greet(); // Output: "Hello, my name is Mike"
console.log(name); // Output: "John"

// 通过全局对象暴露局部变量
function greet() {
  var name = "Mike";
  window.myName = name;
  console.log("Hello, my name is " + window.myName);
}

greet(); // Output: "Hello, my name is Mike"
console.log(name); // Output: "John"
console.log(window.myName); // Output: "Mike"

// 通过闭包暴露局部变量
function greet() {
  var name = "Mike";
  return function() {
    console.log("Hello, my name is " + name);
  }
}

var greetFunc = greet();
greetFunc(); // Output: "Hello, my name is Mike"

Life cycle of a variable

Creation: When a variable is declared, it is created in memory.
Initialization: When a variable is assigned a value, it is initialized.
Assignment: When a variable is assigned a new value, it is reassigned.
Deletion
- local: When a variable is declared with the var keyword, it is deleted when the function is completed.
- global: When a variable is declared without the var keyword, it is a property of the global object and can be deleted using the delete operator.

var x = 10; // Creation and initialization
console.log(x); // Output: 10

x = 20; // Reassignment
console.log(x); // Output: 20

delete x; // Deletion, return false because x is declared with var
console.log(x); // Output: 20

z = 40; // Creation and initialization
console.log(z); // Output: 40

delete z; // Deletion, return true because z is declared without var
console.log(z); // Output: undefined

number

var x = 10;
var y = 20.5;
var z = -30;
var a = 3.14159265359;

也可以使用科学计数法表示：

var x = 1e3; // 1000
var y = 2.5e6; // 2500000
var z = -3e2; // -300

string

var str = "Hello World";
var str2 = 'Hello World';
var str3 = "I'm a \"teacher\".";
var str4 = 'I\'m a "teacher".';

string object:

creation:

var str = new String("Hello World"); or var str = String("Hello World");

accessing properties:

str.length
str.constructor

constructor returns the function that created the object.

var str = "Hello World";
console.log(str.length); // Output: 11
console.log(str.constructor); // Output: function String() { [native code] }

methods:

str.charAt(index)
str.concat(str2)
str.indexOf(str2)
str.lastIndexOf(str2)
str.localeCompare(str2)
str.match(regex)
str.replace(regex,str2)
str.search(regex)
str.slice(start,end)
str.split(separator)
str.substring(start,end)
str.toLowerCase()
str.toUpperCase()
str.trim()

模板字符串

模板字符串使用反引号 `` 作为字符串的定界符分隔的字面量。

模板字面量是用反引号（`）分隔的字面量，允许多行字符串、带嵌入表达式的字符串插值和一种叫带标签的模板的特殊结构。

var name = "John";
var age = 30;
var message = `Hello, my name is ${name} and I'm ${age} years old.`;
console.log(message); // Output: "Hello, my name is John and I'm 30 years old."

字符串转换

转化为string的方法：

String(value)
number.toString()
number.toLocaleString()
Boolean.toString()
Array.toString()
Object.toString()

var num = 10;
var str = String(num);
console.log(str); // Output: "10"


var num2 = 1234.56;
var str2 = num2.toString();
console.log(str2); // Output: "1234.56"

var num3 = 1234.56;
var str3 = num3.toLocaleString();
console.log(str3); // Output: "1,234.56"

转化为number的方法：

Number(value)
parseInt(value)
parseFloat(value)

var str = "10";
var num = Number(str);
console.log(num); // Output: 10


var str2 = "1234.56";
var num2 = parseFloat(str2);
console.log(num2); // Output: 1234.56

var str3 = "1,234.56";
var num3 = parseInt(str3);
console.log(num3); // Output: 1234

一元运算符+和-可以用于将字符串转换为数字。

var str = "10";
var num = +str;
console.log(num); // Output: 10

var str2 = "1234.56";
var num2 = +str2;
console.log(num2); // Output: 1234.56

var str3 = "1,234.56";
var num3 = +str3;
console.log(num3); // Output: 1234

boolean

var bool = true;
var bool2 = false;

null et Undefined

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

在 JavaScript 中, null 用于对象, undefined 用于变量，属性和方法。

对象只有被定义才有可能为 null，否则为 undefined。

var nullVar = null;
var undefinedVar;

object

var obj = {name: "John", age: 30, city: "New York"};
var obj2 = new Object();
obj2.name = "John";
obj2.age = 30;
obj2.city = "New York";

accessing object properties:

obj.name
obj["age"]

accessing object methods:

obj.toString()
obj.hasOwnProperty("name")

you can also consider methods as properties of an object:

var obj = {
  name: "John",
  age: 30,
  city: "New York",
  sayHello: function() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
};

obj.sayHello(); // Output: "Hello, my name is John and I'm 30 years old."
obj.sayHello; //Output: function(){console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");}
//不加括号，调用sayHello方法，输出函数体，也即函数的定义表达式。

array

var arr = [1, 2, "John", true];
var arr2 = new Array(1, 2, "John", true);
arr2[0] = 100;
arr2[1] = 200;
arr2[2] = "Mike";
arr2[3] = false;

Les opérateurs

+ addition
- soustraction
* multiplication
/ division
% modulo
++ increment
-- decrement
= assignement
+= addition assignement
-= soustraction assignement
*= multiplication assignement
/= division assignement
%= modulo assignement
== equal
= strict equal
!= not equal
! strict not equal
> greater than
< less than
>= greater than or equal
<= less than or equal
&& and
|| or
! not
? ternary operator
: colon operator
, comma operator

Les opérateurs de strings

+ concatenation
+= concatenation assignement
. access to properties
[] access to characters
() call a function

var str = "Hello";
var str2 = "World";
var str3 = str + " " + str2;
console.log(str3); // Output: "Hello World"

str += " ";
str += str2;
console.log(str); // Output: "Hello World"


var str4 = "Hello World";
console.log(str4.charAt(0)); // Output: "H"
console.log(str4.charAt(6)); // Output: "W"
console.log(str4.charAt(7)); // Output: undefined (index out of range)
console.log(str4.charAt(str4.length - 1)); // Output: "d"
console.log(str4.charAt(str4.length)); // Output: undefined (index out of range)

console.log(str4.concat("!!!")); // Output: "Hello World!!!"

console.log(str4.indexOf("l")); // Output: 2
console.log(str4.indexOf("z")); // Output: -1 (not found)
console.log(str4.lastIndexOf("l")); // Output: 9
console.log(str4.lastIndexOf("z")); // Output: -1 (not found)


var str5 = "Hello World";
console.log(str5.localeCompare("Hello")); // Output: 1 (str5 > "Hello")
console.log(str5.localeCompare("World")); // Output: -1 (str5 < "World")
console.log(str5.localeCompare("hello")); // Output: 1 (str5 > "hello")
console.log(str5.localeCompare("world")); // Output: -1 (str5 < "world")

console.log(str5.match(/l/g)); // Output: ["l", "l"]
console.log(str5.match(/z/g)); // Output: null (not found)

console.log(str5.replace(/l/g, "X")); // Output: "HeXXo WorXd"
console.log(str5.replace(/z/g, "X")); // Output: "Hello World"

console.log(str5.search(/l/)); // Output: 2
console.log(str5.search(/z/)); // Output: -1 (not found)


console.log(str5.slice(0, 5)); // Output: "Hello"
console.log(str5.slice(6)); // Output: "World"
console.log(str5.slice(7)); // Output: "" (empty string)

console.log(str5.split(" ")); // Output: ["Hello", "World"]
console.log(str5.split("l")); // Output: ["He", "lo Wor", "o Wor", " Worl", "d"]


console.log(str5.substring(0, 5)); // Output: "Hello"
console.log(str5.substring(6)); // Output: "World"
console.log(str5.substring(7)); // Output: "World"

console.log(str5.toLowerCase()); // Output: "hello world"
console.log(str5.toUpperCase()); // Output: "HELLO WORLD"


console.log(str5.trim()); // Output: "Hello World"

Les opérateurs de comparaison

== loose equal
= strict equal
!= loose not equal
! strict not equal
< less than
> greater than
<= less than or equal
>= greater than or equal

var x = 10;
var y = "10";

console.log(x == y); // Output: true
console.log(x === y); // Output: false
console.log(x!= y); // Output: false
console.log(x !== y); // Output: true


var a = 10;
var b = 20;

console.log(a < b); // Output: true
console.log(a > b); // Output: false
console.log(a <= b); // Output: true
console.log(a >= b); // Output: false

Les opérateurs logiques

&& and
|| or
! not

var a = true;
var b = false;

console.log(a && b); // Output: false
console.log(a || b); // Output: true
console.log(!a); // Output: false
console.log(!b); // Output: true

?: ternary operator

var a = true;
var b = false;
var c = a? "Hello" : "Goodbye";
console.log(c); // Output: "Hello"

Les opérateurs arithmétiques

+ addition
- soustraction
* multiplication
/ division
% modulo
++ increment
-- decrement

var x = 10;
var y = 5;

console.log(x + y); // Output: 15
console.log(x - y); // Output: 5
console.log(x * y); // Output: 50
console.log(x / y); // Output: 2
console.log(x % y); // Output: 0

var z = 10;
z++; // increment
console.log(z); // Output: 11
z--; // decrement
console.log(z); // Output: 10

Les structures de contrôle

Les conditions

if

if (condition) {
  // code to be executed if condition is true
} else if (condition2) {
  // code to be executed if condition2 is true and condition is false
} else {
  // code to be executed if both condition and condition2 are false
}

switch

switch (expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

Boncles

for

for (initialization; condition; increment/decrement) {
  // code to be executed
}

for/In loop

for (var i in object) {
  // code to be executed for each property of the object
}

for/of loop

for (var value of iterable) {
  // code to be executed for each value of the iterable
}

while

while (condition) {
  // code to be executed
}

do-while

do {
  // code to be executed
} while (condition);

error handling

try {
  // code to be executed
} catch (error) {
  // code to be executed if an error occurs
} finally {
  // code to be executed regardless of whether an error occurred or not
}

example:

try {
  var x = 10;
  var y = 0;
  var z = x / y;
  console.log(z);
} catch (error) {
  console.log("Error: " + error.message);
} finally {
  console.log("The try block is finished.");
}

抛出异常:

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}

Fonction

function bonjour(NOM) {
var Bnom="bonjour"+NOM;
return Bnom; // facultatif
}

function myFunction() {console.log("Hello World");}
var myFunction2 = function() {console.log("Hello World");};
var myFunction3 = function(x, y) {return x + y;};

Fonction est un objet

function mkTrace() {
 var compteur_interne=0;
 return function(s){
  console.log(compteur_interne + " " + s);
  compteur_interne++;
 }
}

// Chaque appel à la fonction mkTrace génère un scope qui ne disparaît pas après la fin de l'exécution de la fonction. 

var trace2 = mkTrace(); 
var trace3 = mkTrace();

trace2 et trace3 sont deux objets de fonction, elles ont chacune un compteur_interne

On peut même les mettre dans un dict !!!

function mkDebug2(compteur_max){
 //faire renvoyer une fonction debug permettant d'afficher compteur_max fois
 var compteur_interne = 1;

 var o = {
  "print": function(s){
   if(compteur_interne<=compteur_max){
    trace(compteur_interne++ + " " + s);
   }
  },
  "getCompteur" : function (){ return compteur_interne;},
  "setCompteur" : function(v){compteur_interne=v;},
  "resetCompteur" : function(){compteur_interne=1;},
  "setMax": function(m){compteur_max=m;},
  "getMax": function(){return compteur_max;},
 }

 return o;
}
var oDbg1 = mkDebug2(3);
oDbg1.print("coucou");

Les fonctions importantes

interactions

console.log(“Placer des traces d’exécution”);
alert()
prompt()
confirm()

Gestion d'événement

onclick
- onclick='fonction(this)&39; this传入被点击的元素
- onclick='fonction(event)&39; event传入事件对象
oumouseover
onkeypress

Événement	Description
Abort	L'utilisateur interrompt le chargement de l&39;image
Blur	L'élément perd le focus
Change	L'utilisateur modifie le contenu d&39;un champ de données
Click	L'utilisateur clique sur l&39;élément
Dblclick	L'utilisateur double-clique sur l&39;élément
Dragdrop	L'utilisateur effectue un glisser-déposer sur la fenêtre du navigateur
Error	Une erreur apparaît durant le chargement de la page
Focus	L'utilisateur donne le focus à un élément
Keydown	L'utilisateur appuie sur une touche de son clavier
Keypress	L'utilisateur maintient une touche du clavier enfoncée
Keyup	L'utilisateur relâche une touche du clavier préalablement enfoncée
Load	Le navigateur a fini de charger la page en cours
MouseOver	L'utilisateur positionne le curseur de la souris au-dessus d&39;un élément
MouseOut	Le curseur de la souris quitte un élément
Reset	L'utilisateur efface les données d&39;un formulaire à l'aide du bouton Reset
Resize	L'utilisateur redimensionne la fenêtre du navigateur
Select	L'utilisateur sélectionne un texte dans un champ de type "text" ou "textarea"
Submit	L'utilisateur clique sur le bouton de soumission d&39;un formulaire
Unload	Le navigateur de l'utilisateur quitte la page en cours

Propriété	Description
altKey	Returns whether or not the "ALT" key was pressed
ctrlKey	Returns whether or not the "CTRL" key was pressed
metaKey	Returns whether or not the "meta" key was pressed
shiftKey	Returns whether or not the "SHIFT" key was pressed
clientX	Returns the horizontal coordinate of the mouse pointer
clientY	Returns the vertical coordinate of the mouse pointer
keyCode	Code ASCII
srcElement	Élément à l’origine de l’événement

Accès au DOM

var ref = document.getElementById("identifiant");
CSS
- ref.style.color = "red";
- ref.className = "affiche";
champs de formulaire
- ref.value = "valeur";
ref.innerHTML = "contenu";

函数与局部变量

function myFunction() {
  var x = 10;
  console.log(x);
}

myFunction(); // Output: 10

函数内部声明的变量，只在函数内部有效，函数执行完毕后，变量也就消失了。

function myFunction() {
  var x = 10;
  console.log(x);
  x = 20;
  console.log(x);
}

myFunction(); // Output: 10 20

函数外部声明的变量，是全局变量，可以在函数内部修改，外部也可以访问到。

function myFunction() {
  var x = 10;
  console.log(x);
  x = 20;
  console.log(x);
}

var y = 30;
myFunction(); // Output: 10 20
console.log(y); // Output: 30

事件与函数

<!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>

以上代码允许函数在事件click发生时执行。

事件参考html#事件。

箭头函数

var myFunc = (x, y) => {
  return x + y;
}

console.log(myFunc(2, 3)); // Output: 5

箭头函数没有自己的 this，它会捕获其所在作用域的 this 值。

var obj = {
  x: 10,
  y: 20,
  myFunc: function() {
    var self = this;
    setTimeout(function() {
      console.log(self.x + self.y);
    }, 1000);
  }
}

obj.myFunc(); // Output: 30 (after 1 second)

箭头函数不能使用 arguments 对象，如果需要的话，可以用 rest 参数代替。

var myFunc = (x, y,...args) => {
  return x + y + args.reduce((acc, cur) => acc + cur, 0);
}

console.log(myFunc(2, 3, 4, 5)); // Output: 14

闭包

function myFunc() {
  var x = 10;
  return function() {
    return x;
  }
}

var myClosure = myFunc();
console.log(myClosure()); // Output: 10

闭包可以访问函数内部的变量，即使函数执行完毕后，变量也不会被销毁。

function myFunc() {
  var x = 10;
  return function() {
    return x;
  }
}

var myClosure = myFunc();
console.log(myClosure()); // Output: 10
myFunc = null;
console.log(myClosure()); // Output: 10

Default parameters and arguments

function myFunc(x = 10) {
  return x;
}

x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

Librairie

Définition d'une librairie

<script src="lib.js">
// rien ici !
// le fichier lib.js 
// ne contiendra 
// pas les balises 
</script>

Math

Math.PI
Math.E
Math.pow(x,y)
Math.sqrt(x)
Math.floor(x)
Math.ceil(x)
Math.round(x)
Math.random()

Date

var date = new Date();
var date2 = new Date(2021, 0, 1);
var date3 = new Date("2021-01-01");
var date4 = new Date(date3);
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDate();
var hours = date.getHours();

正则表达式

修饰符

i : 忽略大小写
g : 全局匹配
m : 多行匹配

匹配模式

. : 匹配任意字符
* : 匹配零个或多个字符
+ : 匹配一个或多个字符
? : 匹配零个或一个字符
^ : 匹配字符串的开始
$ : 匹配字符串的结束
[abc] : 匹配a、b或c
[^abc] : 匹配除了a、b、c之外的字符
[a-z] : 匹配任何小写字母
[^a-z] : 匹配任何非小写字母

量词：

a+ : 匹配一个或多个a
a* : 匹配零个或多个a
a? : 匹配零个或一个a
a{n} : 匹配n个a
a{n,} : 匹配n个或更多个a
a{n,m} : 匹配n到m个a

元字符：

\ : 转义字符
| : 或
() : 分组
[] : 字符类
\d : 匹配数字
\w : 匹配字母、数字或下划线
\s : 匹配空白字符

例子

普通：

var str = "Hello World";
var regex = /World/;
var result = str.match(regex);
console.log(result); // Output: ["World"]

忽略大小写：

var str = "Hello World";
var regex = /world/i;
var result = str.match(regex);
console.log(result); // Output: ["World"]

匹配字符串的开始：

var str = "Hello World";
var regex = /^Hello/;
var result = str.match(regex);
console.log(result); // Output: ["Hello"]

匹配字符串的结束且忽略大小写：

var str = "Hello World";
var regex = /world$/i;
var result = str.match(regex);
console.log(result); // Output: ["World"]

匹配任意小写字母：

var str = "Hello World";
var regex = /[a-z]/;
var result = str.match(regex);
console.log(result); // Output: ["H", "e", "l", "l", "o", " ", "W", "o", "r", "l", "d"]

匹配除了a-z之外的字符：

var str = "Hello World";
var regex = /[^a-z]/;
var result = str.match(regex);
console.log(result); // Output: ["H"]

匹配数字：

var str = "Hello World 1";
var regex = /\d/;
var result = str.match(regex);
console.log(result); // Output: ["1"]

匹配字母、数字或下划线：

var str = "Hello World";
var regex = /\w/;
var result = str.match(regex);
console.log(result); // Output: ["H", "e", "l", "l", "o", "W", "r", "d"]

匹配空白字符：

var str = "Hello World";
var regex = /\s/;
var result = str.match(regex);
console.log(result); // Output: [" "]

var str = "Hello World";
var regex = /Hello\sWorld/;
var result = str.match(regex);
console.log(result); // Output: ["Hello World"]

var str = "Hello World";
var regex = /Hello\s\w+/;
var result = str.match(regex);
console.log(result); // Output: ["Hello World"]

var str = "Hello World";
var regex = /Hello\s\w+/g;
var result = str.match(regex);
console.log(result); // Output: ["Hello World"]

Search方法

var str = "Hello World";
var regex = /World/;
var result = str.search(regex);
console.log(result); // Output: 6

Replace方法

var str = "Hello World";
var regex = /World/g;
var result = str.replace(regex, "Universe");
console.log(result); // Output: "Hello Universe"

不区分大小写：

var str = "Hello World";
var regex = /world/gi;
var result = str.replace(regex, "Universe");
console.log(result); // Output: "Hello Universe"

Test方法

var str = "Hello World";
var regex = /World/;
var result = regex.test(str);
console.log(result); // Output: true

exec方法

var str = "Hello World";
var regex = /World/;
var result = regex.exec(str);
console.log(result); // Output: ["World"]

JavaScript表单验证

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

CSS伪类选择器：

Selector	Description
:disabled	Selects input elements with the "disabled" attribute
:invalid	Selects invalid input elements
:optional	Selects input elements without the "optional" attribute
:required	Selects input elements with the "required" attribute
:valid	Selects input elements with valid values

JSON

JavaScript Object Notation，是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。

JSON 格式是纯文本，易于人阅读和编写，同时也易于机器解析和生成。

语法：JSON 格式的语法与 JavaScript 语法类似，但是一些细微的差别。
类型：JSON 不支持函数类型，也不支持 undefined 类型。
大小：JSON 格式的大小受限于浏览器的本地存储空间。
性能：JSON 格式的解析速度很快，比 XML 格式的解析速度快很多。

{
  "name": "John Smith",
  "age": 30,
  "city": "New York"
}

解析 JSON

var text = '{"name": "John Smith", "age": 30, "city": "New York"}';

var obj = JSON.parse(text);

console.log(obj.name); // Output: "John Smith"
console.log(obj.age); // Output: 30
console.log(obj.city); // Output: "New York"

序列化 JSON

将 JavaScript 值转换为 JSON 字符串。

var obj = {
  "name": "John Smith",
  "age": 30,
  "city": "New York"
};

var text = JSON.stringify(obj);

console.log(text); // Output: {"name":"John Smith","age":30,"city":"New York"}

异步编程

setTimeOut

window.setTimeout(traitement,duree_ms,[arg1_de_traitement,arg2,...])
window.setInterval(...) Traitement périodique

jQuery

runoob

主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。

jQuery 允许您通过 CSS 选择器来选取元素。

function myFunction()
{
    var obj=document.getElementById("h01");
    obj.innerHTML="Hello jQuery";
}
onload=myFunction;

等价于jQuery的：

function myFunction()
{
    $("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);