est l'un des langages de programmation les plus populaires au monde
est un langage de script qui passe par un interpréteur
Il s'exécute principalement sur le client ( navigateur ) , et maintenant il peut également s'exécuter sur le serveur basé sur node.js

JavaScript n'était à l'origine utilisé que pour effectuer une validation de formulaire simple (vérifier la validité des données), mais il est devenu populaire plus tard accidentellement.

Actuellement, JavaScript est devenu un langage de programmation à usage général

Ce que JavaScript peut faire :

Développement Web ( effets spéciaux plus complexes et interaction utilisateur )
Développement de jeux Web
Développement serveur (node.js)
Développement de programmes de bureau (Electron, VSCode est comme ça )
développement d'applications mobiles

Historique du développement

Brendan Eich, père de JavaScript

En 1995, il a fallu 10 jours pour terminer la conception de JS (en raison du temps de conception court, certains détails du langage n'ont pas été soigneusement pris en compte, ce qui a conduit au chaos du programme écrit en Javascript pendant longtemps plus tard)

A l'origine chez Netscape, nommé LiveScript,

On pense généralement que Netscape a nommé LiveScript JavaScript parce que Java était le langage de programmation le plus populaire à l'époque et que le nom "Java" a aidé à diffuser le nouveau langage.

En fait, le style de syntaxe entre Java et JavaScript est très différent.

La relation entre JavaScript et HTML et CSS

HTML : la structure d'une page Web ( Bone )
CSS : performances des pages Web ( habillage )
JavaScript : comportement des pages Web ( Soul )

Processus d'exécution JavaScript

Le code écrit est enregistré dans le fichier , c'est-à-dire stocké sur le disque dur ( stockage externe ).
Double-cliquez sur le navigateur de fichiers .html ( application ) pour lire le fichier et charger le contenu du fichier en mémoire ( sens du flux de données : disque dur => mémoire )
Le navigateur analysera le code écrit par l'utilisateur et traduira le code en instructions binaires pouvant être reconnues par l'ordinateur ( le travail de l'interpréteur )
Les instructions binaires obtenues seront chargées et exécutées par le CPU ( sens du flux de données : mémoire => CPU)

Le navigateur est divisé en moteur de rendu + moteur JS .

Moteur de rendu : parse html + CSS, communément appelé " kernel "
Moteur JS : c'est-à-dire l' interpréteur JS . Typique est le V8 intégré dans Chrome

La composition de JavaScript

ECMAScript ( ES en abrégé ) : syntaxe JavaScript
DOM : Page Document Object Model , qui agit sur les éléments de la page
BOM : modèle d'objet du navigateur , pour opérer sur la fenêtre du navigateur

Avec la syntaxe JS seule, seuls certains processus logiques de base peuvent être écrits.

Mais pour accomplir des tâches plus complexes et compléter l'interaction avec les navigateurs et les pages, l'API DOM et l'API BOM sont nécessaires depuis longtemps.

Concepts clés : ECMAScript

Il s'agit d'un ensemble de "normes", quel que soit le type de moteur JS, il doit se conformer à cette norme.

Pré-connaissance

<script>
    alert("你好!");
</script>

Le code JavaScript peut être intégré dans des balises de script HTML.

Forme écrite de JavaScript

1. En ligne

Intégrer directement à l'intérieur de l' élément html

<input type="button" value="点我一下" onclick="alert('haha')">

Avis

Les constantes de chaîne dans JS peuvent être exprimées entre guillemets simples ou doubles .
Les guillemets doubles sont recommandés en HTML , et les guillemets simples sont recommandés en JS .

2. Intégré

écrire dans la balise de script

<script>
    alert("haha");
</script>

3. Formule externe

Écrire dans un fichier .js séparé

<script src="hello.js"></script>

alert("hehe");

Dans ce cas, le code ne peut pas être écrit au milieu de la balise script, il doit être vide (le code ne sera pas exécuté s'il est écrit).

note

Commentaires sur une seule ligne // [recommandé]

Commentaire multi-lignes /* */

Utilisez ctrl + / pour basculer les commentaires .
Les commentaires multilignes ne peuvent pas être imbriqués .

entrée sortie

entrée : invite

faire apparaître une boîte de saisie

// 弹出一个输入框
prompt("请输入您的姓名:");

Sortie : alerte

Ouvrez une boîte de dialogue d'avertissement , affichez le résultat

// 弹出一个输出框
alert("hello");

+ indique la concaténation de chaînes , c'est-à-dire que deux chaînes sont connectées bout à bout pour former une chaîne .
\n signifie nouvelle ligne

Boîte de sélection : valider

Une boîte de dialogue de sélection apparaît, confirmez ou annulez

// 弹出选择框
confirm("确认删除吗？");

Sortie : console.log

Imprimer un journal sur la console ( pour que les programmeurs puissent le voir )

// 向控制台输出日志
console.log("这是一条日志");

Entrez "log" directement dans VSCode et appuyez sur la touche de tabulation pour entrer rapidement dans console.log

Vous devez ouvrir les outils de développement du navigateur (F12) => onglet Console pour voir les résultats.

Concepts clés : journalisation

Les journaux sont un moyen important pour les programmeurs de déboguer les programmes

Notions importantes : .

console est un " objet " en js

.Indique de prendre une certaine propriété ou méthode dans l'objet . Il peut être intuitivement compris comme " de "

console.log peut être compris comme : utilise la " méthode log " de l' objet " console " .

Aperçu de la grammaire

Bien que certains concepts de conception de JavaScript soient éloignés de Java, il existe encore des similitudes au niveau de la grammaire de base.Avec les bases de Java, il est facile de comprendre certaines grammaires de base de JavaScript.

utilisation de variables

utilisation de base

Créer des variables (définition de variable/déclaration de variable/initialisation de variable)

var name = 'zhangsan';
var age = 20;

var est un mot-clé dans JS , indiquant qu'il s'agit d'une variable .
= signifie " affectation " en JS , ce qui équivaut à mettre des données dans une boîte mémoire . Un espace est recommandé de part et d' autre de =
Chaque instruction se termine par un ; à la fin . Elle peut être omise dans JS ; mais il est recommandé de l'ajouter .
Notez que le ; ici est un point - virgule anglais . Toute ponctuation dans JS est une ponctuation anglaise .
Si la valeur initialisée est une chaîne , elle doit être entourée de guillemets simples ou doubles .
Si la valeur initialisée est un nombre , alors elle peut être affectée directement .

utiliser des variables

console.log(age); // 读取变量内容
age = 30;         // 修改变量内容

Comprendre le typage dynamique

1) Le type de variable de JS est déterminé lors de l'exécution du programme ( le type ne sera déterminé que lorsque l'instruction = est exécutée )

var a = 10;     // 数字
var b = "hehe"; // 字符串

2) Au cours de l'exécution du programme , le type de la variable peut changer .

var a = 10;    // 数字
a = "hehe";    // 字符串

type de données de base

Plusieurs types intégrés à JS

nombre : nombre . Les nombres entiers et décimaux ne sont pas distingués .
booléen : vrai vrai , faux faux .
chaîne : type de chaîne .
undefined : seule la valeur unique undefined. Indique une valeur indéfinie .
null : seule la valeur unique null. Indique une valeur nulle .

nombreType de numéro

JS ne fait pas de distinction entre les nombres entiers et les nombres à virgule flottante et utilise des "types de nombres" pour les représenter de manière uniforme.

représentation numérique

var a = 07;      // 八进制整数, 以 0 开头
var b = 0xa;     // 十六进制整数, 以 0x 开头
var c = 0b10;    // 二进制整数, 以 0b 开头

Remarque :

Un chiffre octal correspond à trois chiffres binaires
Un chiffre hexadécimal correspond à quatre chiffres binaires ( Deux chiffres hexadécimaux correspondent à un octet )

valeur numérique spéciale

Infini : Infini , supérieur à tout nombre . Cela signifie que le nombre a dépassé la plage que JS peut représenter .
-Infinity : Infini négatif , inférieur à n'importe quel nombre . Cela signifie que le nombre a dépassé la plage que JS peut exprimer .
NaN : indique que le résultat actuel n'est pas un nombre .

var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);

Remarque :

Infini négatif et infinitésimal ne sont pas la même chose Infini petit signifie approche infinie de 0, la valeur est 1 / Infini
Le résultat de 'hehe' + 10 n'est pas NaN, mais 'hehe10', qui convertira implicitement le nombre en une chaîne , puis concaténera la chaîne .
Vous pouvez utiliser la fonction isNaN pour déterminer s'il s'agit d'un non-nombre .

type de chaîne de caractères

règles de base

Les littéraux de chaîne doivent être placés entre guillemets, soit des guillemets simples, soit des guillemets doubles.

Si la chaîne contient déjà des guillemets, des caractères d'échappement doivent être utilisés.

caractère d'échappement

Certains caractères ne sont pas pratiques à saisir directement , ils doivent donc être exprimés de manière spéciale .

Trouver la longueur

Utiliser la propriété length de String

concaténation de chaînes

Utilisez + pour épisser
Les nombres et les chaînes peuvent également être concaténés

booléen Type booléen

Indique "vrai" et "faux"

Lorsque Boolean participe aux opérations, il est traité comme 1 et 0 .

type de données non défini

Si une variable n'a pas été initialisée , le résultat est undefined , qui est de type undefined

var a;
console.log(a)

Ajoutez undefined et string , et le résultat est une concaténation de chaînes

console.log(a + "10");  // undefined10

Undefined est ajouté à un nombre , et le résultat est NaN

console.log(a + 10);

type de valeur vide vide

null indique que la variable courante est une « valeur nulle ».

var b = null;
console.log(b + 10);    // 10
console.log(b + "10");  // null10

Remarque :

null et undefined indiquent des valeurs illégales , mais l'emphase est différente .
Null signifie que la valeur actuelle est vide ( équivaut à avoir une case vide )
indéfini signifie que la variable actuelle est indéfinie ( équivaut à ne même pas avoir de boîte )

opérateur

Les opérateurs en JavaScript sont fondamentalement les mêmes qu'en Java

opérateur arithmétique

Opérateurs d'affectation et opérateurs d'affectation composés

Opérateurs d'incrémentation et de décrémentation

++ : incrément de 1
-- : décrémenter de 1

opérateur de comparaison

<
>
<=
>=
== compare égal ( effectuera une conversion de type implicite )
!=
=== compare égal ( pas de conversion de type implicite )
!==

Opérateurs logiques

Utilisé pour évaluer plusieurs expressions booléennes .

&& et : un faux est faux
|| ou : un vrai est vrai
! Non

opération de bit

& ET au niveau du bit
| au niveau du bit ou
~ négation au niveau du bit
^ XOR au niveau du bit

opération de décalage

<< décaler vers la gauche
>> décalage à droite signé ( décalage à droite arithmétique )
>>> Décalage à droite non signé ( décalage à droite logique )

Expressions conditionnelles

si déclaration

format de grammaire de base

Si l'expression conditionnelle est vraie, exécutez le code dans { } de if

// 形式1
if (条件) {
    语句
}
// 形式2
if (条件) {
    语句1
} else {
    语句2
}
// 形式3
if (条件1) {
    语句1
} else if (条件2) {
    语句2   
} else if .... {
    语句...
} else {
    语句N
}

expression ternaire

C'est une manière simplifiée d'écrire if else .

条件 ? 表达式1 : 表达式2

Si la condition est vraie , renvoie la valeur de expression1 . Si la condition est fausse , renvoie la valeur de expression2

changer

Plus adapté aux scénarios multi-succursales

switch (表达式) {
    case 值1:
        语句1;
        break;
    case 值2:
        语句2:
        break;
    default:
        语句N;
}

instruction de boucle

répéter certaines déclarations

boucle while

while (条件) {
    循环体;
}

Processus d'exécution :

déclaration conditionnelle
Si la condition est vraie, exécutez le code du corps de la boucle .
Si la condition est fausse, la boucle se termine directement

continuer

terminer cette boucle

casser

terminer toute la boucle

pour la boucle

for (表达式1; 表达式2; 表达式3) {
 循环体
}

Expression 1 : utilisée pour initialiser la variable de boucle .
Expression 2 : condition de boucle
Expression 3 : mettre à jour la variable de boucle

Processus d'exécution :

Exécutez d'abord l'expression 1, initialisez la variable de boucle
Exécutez à nouveau l'expression 2 pour déterminer la condition de la boucle
Si la condition est fausse, terminer la boucle
Si la condition est vraie, exécutez le code du corps de la boucle .
Exécutez l'expression 3 pour mettre à jour la variable de boucle

déployer

créer un tableau

Créé à l'aide du nouveau mot-clé

// Array 的 A 要大写
var arr = new Array();

Utiliser la méthode littérale pour créer [ couramment utilisé ]

var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

Les tableaux JS ne nécessitent pas que les éléments soient du même type

obtenir un élément de tableau

Accéder aux éléments du tableau à l'aide d'indices ( à partir de 0 )
Si l'indice est hors de portée pour lire l'élément , le résultat est indéfini

Ajouter un nouvel élément de tableau

1. Ajouté en modifiant la longueur

Cela équivaut à ajouter un élément à la fin . La valeur par défaut de l'élément nouvellement ajouté est indéfinie

2. Ajouter par indice

Si l'indice dépasse la plage de l'élément assigné , un nouvel élément sera inséré à la position spécifiée

3. Utilisez push pour ajouter des éléments

var arr = [9, 5, 2, 7, 3, 6, 8];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
   newArr.push(arr[i]);
}

supprimer un élément dans un tableau

Supprimer des éléments à l'aide de la méthode splice

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

fonction

format grammatical

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}
// 函数调用
函数名(实参列表)           // 不考虑返回值
返回值 = 函数名(实参列表)   // 考虑返回值

La définition de la fonction n'exécute pas le contenu du corps de la fonction , elle doit être appelée avant d'être exécutée , elle sera exécutée plusieurs fois après avoir été appelée plusieurs fois .
Lorsque la fonction est appelée, elle entre dans l'exécution interne de la fonction , et lorsque la fonction se termine, elle retourne à l'emplacement d'appel et continue de s'exécuter Cela peut être observé à l'aide d'un débogueur .
Il n'y a aucune exigence pour l'ordre de définition et d'appel de la fonction ( ceci est différent des variables , les variables doivent être définies avant utilisation )

À propos du nombre de paramètres

Le nombre de paramètres réels et de paramètres formels peut ne pas correspondre. Cependant, le développement réel nécessite généralement que le nombre de paramètres formels et les paramètres réels correspondent.

1) Si le nombre de paramètres réels est supérieur au nombre de paramètres formels , les paramètres supplémentaires ne participeront pas à l'opération de la fonction
2) Si le nombre de paramètres réels est inférieur au nombre de paramètres formels , la valeur des paramètres formels supplémentaires à ce moment est indéfinie

expression de fonction

Une autre façon de définir une fonction

var add = function() {
 var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
   }
    return sum;
}
console.log(add(10, 20));            // 30
console.log(add(1, 2, 3, 4));        // 10
console.log(typeof add);             // function

Une formulation telle que function() { } définit une fonction anonyme , puis représente la fonction anonyme avec une variable .

portée

Portée valide d'un nom d'identifiant dans le code.

Avant la norme ES6, le périmètre était principalement divisé en deux

Portée globale : elle prend effet dans l'ensemble de la balise de script ou dans un fichier js séparé .
Portée locale / portée de la fonction : prend effet à l'intérieur de la fonction .

chaîne de portée

Contexte :

Les fonctions peuvent être définies à l'intérieur des fonctions
Les fonctions internes peuvent accéder aux variables locales des fonctions externes .

objet

concept de base

l'objet fait référence à une chose spécifique

Dans JS, les chaînes, les nombres, les tableaux et les fonctions sont tous des objets.

Chaque objet contient plusieurs propriétés et méthodes .

Attributs : caractéristiques des choses .
Méthode : le comportement des choses .

Le concept d'objets JavaScript et d'objets Java est fondamentalement le même , c'est juste que les entrées spécifiques de la table de syntaxe sont assez différentes .

1. Utilisez des littéraux pour créer des objets [ couramment utilisés ]

Créer des objets à l'aide de { }

Créer des objets à l'aide de { }
Les propriétés et les méthodes sont organisées en paires clé-valeur .
Utilisé entre les paires clé-valeur , split . Après le dernier attribut , facultatif
Utilisation : partage entre clés et valeurs .
La valeur de la méthode est une fonction anonyme

2. Utilisez un nouvel objet pour créer des objets

var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
    console.log("hello");
}

3. Créer des objets à l'aide de constructeurs

La méthode précédente de création d'un objet ne peut créer qu'un seul objet. L'utilisation du constructeur peut facilement créer plusieurs objets

function 构造函数名(形参) {
    this.属性 = 值;
    this.方法 = function...
}
    
var obj = new 构造函数名(实参);