Page d'accueil>Tutoriel de conception de sites Web>Tutoriel Javascript

Offres spéciales JavaScript

Auteur：Eve Cole Date de mise à jour：2025-01-07 17:39:30

Ce chapitre récapitule brièvement les fonctionnalités de JavaScript que nous avons apprises jusqu'à présent, en accordant une attention particulière aux moments subtils.

Structure du code

Les instructions sont délimitées par un point-virgule :

 alert('Bonjour'); alert('Monde');

Habituellement, un saut de ligne est également traité comme un délimiteur, donc cela fonctionnerait également :

 alerte('Bonjour')
alerte('Monde')

C'est ce qu'on appelle « l'insertion automatique d'un point-virgule ». Parfois, cela ne fonctionne pas, par exemple :

 alert("Il y aura une erreur après ce message")

[1, 2].forEach (alerte)

La plupart des guides de style de code conviennent que nous devrions mettre un point-virgule après chaque instruction.

Les points-virgules ne sont pas requis après les blocs de code {...} et les constructions syntaxiques avec eux comme des boucles :

 fonction f() {
  // aucun point-virgule n'est nécessaire après la déclaration de la fonction
}

pour(;;) {
  // aucun point-virgule n'est nécessaire après la boucle
}

…Mais même si on peut mettre un point-virgule « supplémentaire » quelque part, ce n'est pas une erreur. Il sera ignoré.

Plus dans : Structure du code.

Mode strict

Pour activer pleinement toutes les fonctionnalités du JavaScript moderne, nous devons démarrer les scripts avec "use strict" .

 « utiliser strict » ;

...

La directive doit être en haut d'un script ou au début du corps d'une fonction.

Sans "use strict" , tout fonctionne toujours, mais certaines fonctionnalités se comportent de manière démodée et "compatible". Nous préférerions généralement le comportement moderne.

Certaines fonctionnalités modernes du langage (comme les classes que nous étudierons dans le futur) activent implicitement le mode strict.

Plus dans : Le mode moderne, "use strict".

Variables

Peut être déclaré en utilisant :

  • let

  • const (constant, ne peut pas être modifié)

  • var (à l'ancienne, on verra plus tard)

Un nom de variable peut inclure :

  • Lettres et chiffres, mais le premier caractère ne peut pas être un chiffre.

  • Les caractères $ et _ sont normaux, à égalité avec les lettres.

  • Les alphabets et hiéroglyphes non latins sont également autorisés, mais ne sont généralement pas utilisés.

Les variables sont typées dynamiquement. Ils peuvent stocker n'importe quelle valeur :

 soit x = 5 ;
x = « Jean » ;

Il existe 8 types de données :

  • number pour les nombres à virgule flottante et entiers,

  • bigint pour les nombres entiers de longueur arbitraire,

  • string pour chaînes,

  • boolean pour les valeurs logiques : true/false ,

  • null – un type avec une seule valeur null , signifiant « vide » ou « n'existe pas »,

  • undefined – un type avec une seule valeur undefined , signifiant « non attribué »,

  • object et symbol – pour les structures de données complexes et les identifiants uniques, nous ne les avons pas encore appris.

L'opérateur typeof renvoie le type d'une valeur, à deux exceptions près :

 typeof null == "object" // erreur dans le langage
typeof function(){} == "function" // les fonctions sont traitées spécialement

Plus dans : Variables et types de données.

Interaction

Nous utilisons un navigateur comme environnement de travail, les fonctions de base de l'interface utilisateur seront donc :

  • prompt(question, [default])

  • Posez une question et renvoyez soit ce que le visiteur a saisi, soit null s'il a cliqué sur « annuler ».

  • confirm(question)

  • Posez une question et suggérez de choisir entre Ok et Annuler. Le choix est renvoyé sous la forme true/false .

  • alert(message)

  • Afficher un message .

Toutes ces fonctions sont modales , elles suspendent l'exécution du code et empêchent le visiteur d'interagir avec la page jusqu'à ce qu'il réponde.

Par exemple:

 let userName = prompt("Votre nom ?", "Alice");
let isTeaWanted = confirm("Voulez-vous du thé ?");

alert( "Visiteur : " + nom d'utilisateur ); //Alice
alert( "Thé recherché : " + isTeaWanted ); // vrai

Plus dans : Interaction : alerte, invite, confirmation.

Opérateurs

JavaScript prend en charge les opérateurs suivants :

  • Arithmétique

  • Régulier : * + - / , également % pour le reste et ** pour la puissance d'un nombre.

    Le binaire plus + concatène les chaînes. Et si l’un des opérandes est une chaîne, l’autre est également converti en chaîne :

     alerte( '1' + 2 ); // '12', chaîne
alerte( 1 + '2' ); // '12', chaîne

  • Missions

  • Il existe une affectation simple : a = b et des affectations combinées comme a *= 2 .

  • Au niveau du bit

  • Les opérateurs au niveau du bit fonctionnent avec des entiers de 32 bits au niveau de bit le plus bas : consultez la documentation lorsqu'ils sont nécessaires.

  • Conditionnel

  • Le seul opérateur avec trois paramètres : cond ? resultA : resultB . Si cond est vrai, renvoie resultA , sinon resultB .

  • Opérateurs logiques

  • ET logique && et OU || effectuer une évaluation de court-circuit, puis renvoyer la valeur là où il s'est arrêté (pas nécessaire true / false ). Logique NON ! convertit l'opérande en type booléen et renvoie la valeur inverse.

  • Opérateur de coalescence nul

  • Le ?? L’opérateur fournit un moyen de choisir une valeur définie dans une liste de variables. Le résultat d' a ?? b est a sauf s'il est null/undefined , alors b .

  • Comparaisons

  • Le contrôle d'égalité == pour les valeurs de types différents les convertit en nombre (sauf null et undefined qui sont égaux et rien d'autre), donc ceux-ci sont égaux :

     alerte( 0 == faux ); // vrai
alerte( 0 == '' ); // vrai

    D'autres comparaisons sont également converties en nombre.

    L'opérateur d'égalité stricte === n'effectue pas la conversion : différents types signifient toujours des valeurs différentes.

    Les valeurs null et undefined sont spéciales : elles sont égales == et n'égalent rien d'autre.

    Les comparaisons plus/moins comparent les chaînes caractère par caractère, les autres types sont convertis en nombre.

  • Autres opérateurs

  • Il y en a quelques autres, comme un opérateur virgule.

Plus dans : Opérateurs de base, mathématiques, comparaisons, opérateurs logiques, opérateur de coalescence nul '??'.

Boucles

  • Nous avons couvert 3 types de boucles :

     // 1
tandis que (condition) {
  ...
}

// 2
faire {
  ...
} while (condition);

// 3
pour(soit i = 0; i < 10; i++) {
  ...
}

  • La variable déclarée dans la boucle for(let...) n'est visible qu'à l'intérieur de la boucle. Mais on peut aussi omettre let et réutiliser une variable existante.

  • Les directives break/continue permettent de quitter toute la boucle/itération en cours. Utilisez des étiquettes pour briser les boucles imbriquées.

Détails dans : Boucles : while et for.

Plus tard, nous étudierons d'autres types de boucles pour gérer les objets.

La construction « switch »

La construction « switch » peut remplacer plusieurs vérifications if . Il utilise === (égalité stricte) pour les comparaisons.

Par exemple:

 let age = prompt('Votre âge ?', 18);

changer (âge) {
  cas 18 :
    alert("Ça ne marchera pas"); // le résultat de l'invite est une chaîne, pas un nombre
    casser;

  cas "18":
    alert("Ça marche !");
    casser;

  défaut:
    alert("Toute valeur différente de celle ci-dessus");
}

Détails dans : L'instruction "switch".

Fonctions

Nous avons abordé trois façons de créer une fonction en JavaScript :

  1. Déclaration de fonction : la fonction dans le flux de code principal

     fonction somme(a, b) {
  soit le résultat = a + b ;

  renvoyer le résultat ;
}

  2. Expression de fonction : la fonction dans le contexte d'une expression

     soit somme = fonction (a, b) {
  soit le résultat = a + b ;

  renvoyer le résultat ;
} ;

  3. Fonctions des flèches :

     // expression du côté droit
soit somme = (a, b) => a + b;

// ou syntaxe multiligne avec { ... }, doit être renvoyé ici :
soit somme = (a, b) => {
  //...
  renvoyer a + b ;
}

// sans arguments
let sayHi = () => alert("Bonjour");

// avec un seul argument
soit double = n => n * 2 ;

  • Les fonctions peuvent avoir des variables locales : celles déclarées dans son corps ou dans sa liste de paramètres. Ces variables ne sont visibles qu’à l’intérieur de la fonction.

  • Les paramètres peuvent avoir des valeurs par défaut : function sum(a = 1, b = 2) {...} .

  • Les fonctions renvoient toujours quelque chose. S'il n'y a pas d'instruction return , alors le résultat est undefined .

Détails : voir Fonctions, Fonctions flèches, les bases.

Plus à venir

C'était une brève liste de fonctionnalités JavaScript. Pour l'instant, nous n'avons étudié que les bases. Plus loin dans le didacticiel, vous trouverez davantage de fonctionnalités spéciales et avancées de JavaScript.

Articles connexes