Notes du premier jour sur les bases de JavaScript

Bases de JavaScript - Jour 1

Comprenez les concepts de base tels que les variables, les types de données et les opérateurs, soyez capable de convertir les types de données et apprenez à programmer en fonction des quatre opérations arithmétiques.

Comprendre la relation entre les objets du monde réel et les ordinateurs
Comprendre ce que sont les données et connaître leur classification
Comprendre le « conteneur » dans lequel les variables stockent les données
Maîtriser l'utilisation des opérateurs courants et comprendre les relations de préséance
Connaître les caractéristiques de la conversion implicite des types de données JavaScript

introduire

Maîtriser la méthode d'introduction de JavaScript et comprendre dans un premier temps le rôle de JavaScript

Méthode d'introduction

Un programme JavaScript ne peut pas s'exécuter indépendamment, il doit être intégré au HTML avant que le navigateur puisse exécuter le code JavaScript. scriptIl existe deux manières d'introduire du code JavaScript dans HTML via des balises :

voie interne

scriptEnveloppez le code JavaScript avec des balises

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>
</html>

forme externe

Généralement, le code JavaScript est écrit dans un fichier séparé se terminant par .js, puis introduit via l'attribut scriptde la balise.src

// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js"></script>
</body>
</html>

Si une balise de script utilise l'attribut src pour introduire un fichier .js, le code de la balise sera ignoré ! ! ! Comme indiqué dans le code suivant :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

Commentaires et terminateurs

Vous pouvez bloquer l'exécution de code ou ajouter des informations de commentaire via des commentaires. JavaScript prend en charge deux formes de syntaxe de commentaire :

Commentaires sur une seule ligne

Utiliser // pour commenter une seule ligne de code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    // 这种是单行注释的语法
    // 一次只能注释一行
    // 可以重复注释
    document.write('嗨，欢迎来传智播学习前端技术！');
  </script>
</body>
</html>

Commentaires sur plusieurs lignes

Utiliser /* */pour commenter plusieurs lignes de code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 注释</title>
</head>
<body>
  
  <script>
    /* 这种的是多行注释的语法 */
    /*
    	更常见的多行注释是这种写法
    	在些可以任意换行
    	多少行都可以
      */
    document.write('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>
</html>

Remarque : La touche de raccourci pour les commentaires sur une seule ligne dans l'éditeur estctrl + /

terminateur

En JavaScript, ;il représente la fin d'un morceau de code. Dans la plupart des cas, il peut être omis et ;remplacé par un retour chariot (entrée).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 结束符</title>
</head>
<body>
  
  <script> 
    alert(1);
    alert(2);
    alert(1)
    alert(2)
  </script>
</body>
</html>

Dans le développement réel, de nombreuses personnes préconisent d'omettre le terminateur lors de l'écriture du code JavaScript.;

entrée et sortie

La sortie et l'entrée peuvent également être comprises comme l'interaction entre les personnes et les ordinateurs. L'utilisateur entre des informations dans l'ordinateur via le clavier, la souris, etc., et l'ordinateur traite les informations puis affiche les résultats à l'utilisateur. Il s'agit d'un processus d’entrée et de sortie.

Par exemple : Si vous appuyez sur les touches de direction du clavier, les touches haut/bas peuvent faire défiler la page. L'action d'appuyer sur les touches haut/bas est appelée entrée, et le défilement de la page est appelé sortie.

sortir

JavaScript peut recevoir les entrées de l'utilisateur, puis afficher les résultats d'entrée :

alert()、document.wirte()

Prenons l'exemple des nombres. Si vous entrez un nombre dans alert()ou , il sera affiché (sortie) à l'utilisateur sous la forme d'une fenêtre contextuelle.document.write()

entrer

La saisie de n'importe quel contenu apparaîtra prompt()dans le navigateur sous la forme d'une fenêtre contextuelle, invitant généralement l'utilisateur à saisir du contenu.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 输入输出</title>
</head>
<body>
  
  <script> 
    // 1. 输入的任意数字，都会以弹窗形式展示
    document.write('要输出的内容')
    alert('要输出的内容');

    // 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
    prompt('请输入您的姓名:')
  </script>
</body>
</html>

variable

Comprendre que les variables sont des « conteneurs » pour le stockage informatique des données et maîtriser comment déclarer des variables

Les variables sont des "conteneurs" utilisés dans les ordinateurs pour stocker des données. Elles permettent aux ordinateurs d'avoir des mémoires. La compréhension populaire des variables est d'utiliser [un certain symbole] pour représenter [une valeur spécifique] (données)

<script>
  // x 符号代表了 5 这个数值
  x = 5
  // y 符号代表了 6 这个数值
  y = 6
    
  //举例： 在 JavaScript 中使用变量可以将某个数据（数值）记录下来！

  // 将用户输入的内容保存在 num 这个变量（容器）中
  num = prompt('请输入一数字!')

  // 通过 num 变量（容器）将用户输入的内容输出出来
  alert(num)
  document.write(num)
</script>

déclaration

Déclarer (définir) une variable se compose de deux parties : le mot-clé de déclaration et le nom de la variable (identification)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // let 变量名
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
  </script>
</body>
</html>

Les mots clés sont des mots anglais (mots ou abréviations) intégrés dans JavaScript. Ils représentent certaines significations spécifiques. Par exemple, la letsignification de est de déclarer des variables. Après avoir vu , letvous pouvez penser que cette ligne de code signifie déclarer des variables, telles quelet age;

letet varsont tous deux des mots-clés pour déclarer des variables en JavaScript. Il est recommandé d'utiliser letpour déclarer des variables ! ! !

Affectation

Déclarer (définir) une variable équivaut à créer un « conteneur » vide et à ajouter des données à ce conteneur par affectation.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
  
  <script> 
    // 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
    // let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
    // age 即变量的名称，也叫标识符
    let age
    // 赋值，将 18 这个数据存入了 age 这个“容器”中
    age = 18
    // 这样 age 的值就成了 18
    document.write(age)
    
    // 也可以声明和赋值同时进行
    let str = 'hello world!'
    alert(str);
  </script>
</body>
</html>

Mots clés

JavaScript utilise des mots-clés spéciaux letet varpour déclarer (définir) des variables. Vous devez faire attention à certains détails lorsque vous les utilisez :

Voici les letpoints à noter lors de l'utilisation :

Autoriser la déclaration et l'affectation à se produire simultanément
Les déclarations en double ne sont pas autorisées
Permet de déclarer et d'attribuer des valeurs à plusieurs variables en même temps
Certains mots-clés intégrés à JavaScript ne peuvent pas être utilisés comme noms de variables

Voici les varpoints à noter lors de l'utilisation :

Autoriser la déclaration et l'affectation à se produire simultanément
Déclarations en double autorisées
Permet de déclarer et d'attribuer des valeurs à plusieurs variables en même temps

letIl n'y a pas beaucoup de différence entre utiliser et dans la plupart des cas var, mais letc'est varplus rigoureux que utiliser , il est donc recommandé d'utiliser let. La différence entre les deux sera présentée plus en détail plus tard.

Règles de dénomination des noms de variables

Il existe une série de règles qui doivent être suivies concernant les noms de variables (identifiants) :

Il ne peut s'agir que de lettres, de chiffres, de traits de soulignement, de $ et ne peut pas commencer par un chiffre.
Les lettres sont sensibles à la casse, par exemple l'âge et l'âge sont des variables différentes
Les mots JavaScript occupés en interne (mots-clés ou mots réservés) ne sont pas autorisés
Essayez de vous assurer que les variables ont une certaine sémantique et vous pourrez en connaître la signification en regardant les mots.

Remarque : Les mots-clés font référence à des mots utilisés en interne dans JavaScript, tels que letet var, et les mots réservés font référence à des mots qui ne sont pas actuellement utilisés dans JavaScript, mais qui pourraient l'être à l'avenir.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 变量名命名规则</title>
</head>
<body>
  
  <script> 
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    // let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    // let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字
  </script>
</body>
</html>

constante

Concept : Les variables déclarées à l'aide de const sont appelées « constantes ».

Scénario d'utilisation : lorsqu'une variable ne changera jamais, vous pouvez utiliser const pour la déclarer au lieu de let.

Convention de dénomination : cohérente avec les variables

const PI = 3.14

Remarque : Les constantes ne peuvent pas être réaffectées et doivent être affectées (initialisées) lorsqu'elles sont déclarées.

type de données

Dans le monde informatique, tout est constitué de données.

Les programmes informatiques peuvent traiter de grandes quantités de données. Afin de faciliter la gestion des données, les données sont divisées en différents types :

Remarque : Détecter le type de données via le mot-clé typeof

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>

Type numérique

Autrement dit, les nombres que nous apprenons en mathématiques peuvent être des nombres entiers, décimaux, des nombres positifs ou des nombres négatifs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let score = 100 // 正整数
    let price = 12.345 // 小数
    let temperature = -40 // 负数

    document.write(typeof score) // 结果为 number
    document.write(typeof price) // 结果为 number
    document.write(typeof temperature) // 结果为 number
  </script>
</body>
</html>

Les types numériques en JavaScript sont les mêmes que les nombres en mathématiques, divisés en nombres positifs, nombres négatifs, décimaux, etc.

type de chaîne

Les données entourées de guillemets simples ( ''), de guillemets doubles ( "") ou de guillemets doubles sont appelées des chaînes. Il n'y a pas de différence essentielle entre les guillemets simples et les guillemets doubles. Il est recommandé d'utiliser des guillemets simples.

Précautions:

Si les guillemets simples ou doubles doivent être utilisés par paires
Les guillemets simples/doubles peuvent être imbriqués les uns dans les autres, mais pas entre eux.
Vous pouvez utiliser des caractères d'échappement si nécessaire \pour afficher des guillemets simples ou doubles.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    let user_name = '小明' // 使用单引号
    let gender = "男" // 使用双引号
    let str = '123' // 看上去是数字，但是用引号包裹了就成了字符串了
    let str1 = '' // 这种情况叫空字符串
		
    documeent.write(typeof user_name) // 结果为 string
    documeent.write(typeof gender) // 结果为 string
    documeent.write(typeof str) // 结果为 string
  </script>
</body>
</html>

Type booléen

Lors de l'expression d'une affirmation ou d'une négation, l'ordinateur correspond à des données de type booléen, qui ont deux valeurs fixes trueet false, qui sont utilisées pour représenter des données positives trueet pour représenter des données négatives false.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    //  pink老师帅不帅？回答 是 或 否
    let isCool = true // 是的，摔死了！
    isCool = false // 不，套马杆的汉子！

    document.write(typeof isCool) // 结果为 boolean
  </script>
</body>
</html>

indéfini

Indéfini est un type spécial. Il n'a qu'une seule valeur indéfinie et déclare uniquement la variable. Si aucune valeur n'est affectée, la valeur par défaut de la variable est indéfinie. En général, il est rare d'attribuer [directement] undéfini à une variable.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined
  </script>
</body>
</html>

Remarque : La valeur d'une variable en JavaScript détermine le type de données de la variable.

conversion de types

Comprendre les caractéristiques des langages faiblement typés et maîtriser la méthode de conversion de type explicite

En JavaScript, les données sont divisées en différents types, tels que les valeurs numériques, les chaînes, les valeurs booléennes et les valeurs indéfinies. Dans le processus de programmation réel, il existe une relation de conversion entre les différents types de données.

conversion implicite

Lorsque certains opérateurs sont exécutés, le système convertit automatiquement le type de données en interne. Cette conversion est appelée conversion implicite.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

Remarque : La conversion implicite des types de données est une fonctionnalité de JavaScript et sera rencontrée dans les études ultérieures. Pour l'instant, vous devez comprendre ce qu'est la conversion implicite.

Introduction supplémentaire à l'utilisation de l'épissage de chaînes de modèles

conversion explicite

Il n'est pas strictement interdit de trop s'appuyer sur des conversions implicites au sein du système lors de l'écriture de programmes, car les règles des conversions implicites ne sont pas claires et sont principalement basées sur l'expérience. Afin d'éviter les problèmes causés par la conversion implicite, la logique racine nécessite généralement une conversion explicite des données.

Nombre

En Numberconvertissant explicitement en un type numérique, lorsque la conversion échoue, le résultat est NaN(Pas un nombre), c'est-à-dire qu'il ne s'agit pas d'un nombre.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12'
    let f = 8

    // 显式将字符串 12 转换成数值 12
    t = Number(t)

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f) // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello'
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str))
  </script>
</body>
</html>