Maîtriser la syntaxe JavaScript et ses notions fondamentales

Leçon 1

Les variables

Déclarer des variables

let prenom = "Hassan";        // chaîne de caractères
let age = 34;                 // nombre entier
let moyenne = 14.5;           // nombre réel
let admis = true;             // booléen
let ville;                    // déclarée sans valeur : undefined

age = 35;                     // let : on peut réaffecter
let a = 2, b = "mon texte";   // plusieurs variables sur une ligne

const PI = 3.141592653589793; // const : doit être initialisée
PI = 3.14;                    // TypeError: Assignment to constant variable.

Les règles de nommage

Identifiant	Valide ?	Remarque
`nomComplet`	oui	convention camelCase, la norme en JavaScript
`_total`, `$prix`	oui	autorisé
`2emeNote`	non	commence par un chiffre
`nom-complet`	non	le tiret est l'opérateur moins
`class`	non	mot réservé

Vidéo · À regarder

Tutoriel JavaScript en 1 HEURE | Comprendre l'ESSENTIEL pour Débutant

Melvynx · YouTube

Regarde de 15:21 à 21:456 min 24 s

Ouvrir sur YouTube à 15:21

Portée	Déclarée…	Accessible…
bloc	avec `let` ou `const` dans `{ }`	seulement dans ce bloc
fonction	dans une fonction (`let`, `const`, `var`)	seulement dans cette fonction
globale	en dehors de toute fonction	partout dans le programme

Vidéo · À regarder

JavaScript Full Course for free

Bro Code · YouTube

Regarde de 12:32 à 25:2012 min 48 s

Ouvrir sur YouTube à 12:32

Leçon 2

Les expressions et opérateurs

Opérateur	Rôle	Exemple	Résultat
`+` `-` `*` `/`	addition, soustraction, multiplication, division	`7 / 2`	`3.5`
`%`	modulo : reste de la division entière	`7 % 2`	`1`
`**`	puissance

Leçon 3

Lire et écrire

Méthode	Où ?	Usage
`console.log(valeur)`	la console du navigateur	débogage : c'est la méthode que tu utiliseras le plus
`alert(message)`	une boîte de dialogue	message bloquant pour l'utilisateur
`document.write(html)`	dans la page	tests uniquement : appelée après le chargement, elle efface toute la page
`element.textContent = ...`

Leçon 4

Les types primitifs et la conversion

Famille	Types	Exemples
primitifs (valeurs simples)	`string`, `number`, `boolean`, `undefined`, `null`, `bigint`, `symbol`	`"Hassan"`, `3.14`, `true`
objets (valeurs structurées)	`Object`, `Array`, `Date`, `Function`…	`{ nom: "Hassan" }`, `[1, 2, 3]`

Travaux pratiques

Le ticket de caisse

Exercices

Exercice 4.1

Choisis la bonne réponse

1Quelle déclaration provoque une erreur ?
2"5" + 2 vaut…
35 === "5" vaut…
4typeof null renvoie…
517 % 5 vaut…
6Number("12abc") vaut…
7Une variable déclarée avec let dans un if est accessible…
8L'identifiant valide est…

0/8 répondues

Exercice 4.2

Prédis l'affichage

Exercice 4.3

Le convertisseur de température

L'essentiel du chapitre

À retenir

const par défaut, let si la valeur change, plus jamais var ni de déclaration implicite.
Identifiants : lettres, chiffres, _, $, pas de chiffre au début, sensible à la casse, camelCase.
Portées : bloc (let, const), fonction, globale.
Opérateurs : + - * / % **, += -= …, === / !==, && || !, typeof, instanceof.
+ concatène les chaînes ; préfère les gabarits `${x}`.
Sorties : console.log, alert, textContent ; entrées : prompt (toujours une chaîne), input.value.
Conversions : Number(), parseInt(), String(), toFixed() ; une conversion ratée donne NaN.

Opérateur	Équivaut à	Exemple (`let x = 10;`)	Résultat
`=`	`x = y`	`x = 5`	5
`+=`	`x = x + y`	`x += 5`	15
`-=`	`x = x - y`	`x -= 5`	5
`*=`	`x = x * y`	`x *= 5`	50
`/=`	`x = x / y`	`x /= 5`	2
`%=`	`x = x % y`	`x %= 5`	0
`**=`	`x = x ** y`	`x **= 2`	100

Opérateur	Signification	Exemple (`x = 5`, `y = "5"`)	Résultat
`==`	égal en valeur (avec conversion)	`x == y`	`true`
`===`	égal en valeur et en type	`x === y`	`false`
`!=`	différent en valeur	`x != 5`	`false`
`!==`	différent en valeur ou en type	`x !== y`	`true`
`>` `<` `>=` `<=`	supérieur, inférieur…	`x >= 5`	`true`

Opérateur	Signification	Exemple	Résultat
`&&`	ET : vrai si les deux sont vrais	`age >= 18 && admis`	dépend des deux
OU (deux barres verticales)	OU : vrai si au moins un est vrai	voir ci-dessous
`!`	NON : inverse	`!admis`	l'inverse de admis
`typeof`	renvoie le type d'une valeur	`typeof 5`	`"number"`
`instanceof`	teste si un objet est une instance d'une classe	`[1, 2] instanceof Array`	`true`

Les trois portées

let globale = "visible partout";       // portée GLOBALE

function test() {
  let locale = "visible dans test()";  // portée de FONCTION
  if (true) {
    let bloc = "visible dans le if";   // portée de BLOC (let, const)
    var fuite = "visible dans test()"; // var ignore le bloc !
    console.log(globale, locale, bloc);
  }
  console.log(fuite);                  // fonctionne avec var
  console.log(bloc);                   // ReferenceError: bloc is not defined
}
test();
console.log(locale);                   // ReferenceError : locale n'existe pas ici

L'opérateur typeof

typeof "Hassan"              // "string"
typeof 3.14                  // "number"
typeof NaN                   // "number" (NaN = Not a Number, mais de type number !)
typeof true                  // "boolean"
typeof x                     // "undefined" (si x n'a pas de valeur)
typeof { nom: "Hassan" }     // "object"
typeof [1, 2, 3]             // "object" (un tableau est un objet)
typeof null                  // "object" (une erreur historique du langage)
typeof function f() {}       // "function"

let a = 10;
let b = "3";
console.log(a + b);
console.log(a - b);
console.log(a * b);
console.log(a > b);
console.log(a == "10", a === "10");
console.log(typeof (a + b));
let c;
console.log(c, typeof c);

Concaténation et gabarits

let texte1 = "OFPPT";
texte1 += " ";
let texte2 = "en force";
let texte3 = texte1 + texte2;          // "OFPPT en force"

let x = 1 + 1;                         // 2 (nombre)
let y = "5" + 1;                       // "51" (chaîne) : le nombre est converti
let z = "5" - 1;                       // 4 : le - convertit la chaîne en nombre

let nom = "Ali", age = 20;
console.log(`${nom} a ${age} ans`);    // gabarit (template literal) : "Ali a 20 ans"

Afficher un résultat dans la page

html

<p id="resultat"></p>
<button onclick="window.print()">Imprimer cette page</button>
<script>
  console.log(5 + 6);                                         // 11 dans la console
  document.getElementById("resultat").textContent = 5 + 6;    // 11 dans la page
</script>

prompt et champ de formulaire

html

<input type="text" id="prenom" placeholder="Ton prénom">
<button onclick="alert(document.getElementById('prenom').value)">Afficher</button>
<script>
  let ville = prompt("Quelle est ta ville ?", "Casablanca");  // valeur par défaut
  console.log(ville);       // la valeur saisie, ou null si on clique sur Annuler
</script>

chaîne → nombre	`Number(ch)`	`Number("3.14")`	`3.14`
		`Number("")`, `Number(" ")`	`0`
		`Number("99 88")`	`NaN`
	`+ch` (plus unaire)	`+"5"`	`5`
	`parseInt(ch)`, `parseFloat(ch)`	`parseInt("12px")`	`12`
nombre → chaîne	`String(n)` ou `n.toString()`	`String(123)`	`"123"`
	`n.toFixed(d)`	`(14.567).toFixed(2)`	`"14.57"`
date → nombre	`Number(d)` ou `d.getTime()`	`new Date().getTime()`	millisecondes depuis 1970
date → chaîne	`String(d)` ou `d.toString()`	`new Date().toString()`	la date complète en texte