Javascript

Documentation

https://developer.mozilla.org/fr/docs/Web/JavaScript

Fiche Memo

Un grand merci à Clément (promo 2021) pour cette fiche mémo indispensable.

/*
Le JavaScript est en langage très permissif :
- Les types sont interchangeables
- Les types ne sont pas stricts
- Le None peut se traduire par :
   undefined pour une valeur inconnue 
   null pour une valeur vide
*/

// Il y a deux options pour afficher du texte rapidement :
window.alert('Le JavaScript est intéressant !') // Le window est implicite
console.log("Ce texte s'affichera dans la console du navigateur.")

// Les conditions s'entourent de parenthèses et les blocs d'accolades :
if (5 < 9) {
    // Condition vraie
} else {
    // Condition fausse
}

// Opérateurs logiques
console.log(false || true) // OU
console.log(false && true) // ET
console.log(!false) // NOT

// Pour tester l'égalité, on privilégiera le triple égal qui vérifie le type en plus de tester l'égalité :
console.log(9 === 9) // true
console.log(5 === '5') // false
console.log(0 === '') // false
// Sinon...
console.log(5 == '5') // true
console.log(0 == '') // true
console.log(false == []) // true

// Les déclarations de variable doivent être précédées de l'instruction var, let ou const.
// On privilégiera le mot clé let la plupart du temps.
let mois = 2
let mois_str = 'Février'

// Le JavaScript agissant sur la page, il dispose d'événèments que l'on peut venir écouter :
window.onload = function () {
    console.log('Cette fonction sera appelée lorsque la page est chargée.')
}

// On récupère l'élément de la page avec l'id 'bouton'.
const bouton = document.querySelector('#bouton')

if (bouton) {
    bouton.addEventListener('click', function () {
        window.alert('Préparation du labyrinthe !')
    })
} else {
    console.error("Le bouton n'a pas été trouvé sur la page...")
}


// Quelques élements de syntaxe :
for (let i = 0; i < 5; i++) { // for i in range(5):
    console.log(i)
}

const tab = ['A', 'B', 'C'] // Une liste de chaînes de caractères
for (let i in tab) { // for i in range(len(tab)):
    console.log(tab[i])
}
for (let lettre of tab) { // for i in tab:
    console.log(lettre)
}

// Deux conventions pour écrire des fonctions :
function factorielle (n) {
    let resultat = 1
    for (let i = 2; i <= n; i++) { // for i in range(2, n+1):
        resultat *= i
    }
    return resultat
}

const racines = function (a, b = 0, c = 0) { // Ces arguments sont optionels, mais pas nommés comme en Python
    let discriminant = b**2 - 4*a*c
    let racineDiscriminant = Math.sqrt(discriminant)
    return [
        (-b - racineDiscriminant) / (2 * a),
        (-b + racineDiscriminant) / (2 * a)
    ]
}

// Les objets permettent de lier une clé (chaîne de caractère uniquement) à une valeur :
const POINTS = {
    a: 10,
    b: 4,
    test: function () {
        alert('Une fonction dans un objet.')
    }
}
console.log(POINTS.b) // 4
POINTS.test() // Affiche une alerte

const velo = {
    guidon: 1,
    roue: 2,
    vitesse: 6
}
let vitesse = 20
if (velo.hasOwnProperty('moteur')) {
    vitesse *= velo.moteur + 1
}

// Il est possible de créer des pseudo-classes (en réalité du sucre syntaxique)
class Labyrinthe {
    
    constructor(largeur, hauteur) {
        this.largeur = largeur
        this.hauteur = hauteur
    }
    
    dessiner(canevas) {
        // Une méthode qui dessine...
    }
}
const maze = new Labyrinthe(400, 300)
console.log(maze.largeur)
maze.dessiner(document.querySelector('canvas'))

// Les fichiers JavaScript peuvent s'importer :

// fichierA.js
export const NOMBRE_MOIS = 12
export const estMultipleDeux = function(n) {
    return n % 2 === 0
}

// fichierB.js
import { NOMBRE_MOIS } from 'fichierA.js'
console.log((new Date().getMonth() + 1) / NOMBRE_MOIS)

//


// On peut stocker un ensemble de valeurs uniques de n'importe quel type dans un Set :
const set = new Set([1, 2, 3, 4, 5])
set.add(9).add(16)
console.log(set.has(10)) // false

const map = new Map()
map.set(1, 2)
map.set(2, 4)
map.set(4, 8)
console.log(map.size) // 3

// Faire des piles avec des tableaux...
const pile = []
pile.push(3)
pile.push(5)
console.log(pile.pop()) // 5

// ...et des files
const file = []
file.push(3)
file.push(5)
console.log(pile.shift()) // 3

// L'undefined, une valeur inconnue...
// JavaScript ne lève pas d'erreur lorsque l'on accède à un élément hors de portée ou si les paramètres sont invalides :
console.log({ a: 5 }.b) // undefined
console.log([1, 2][-1]) // undefined
console.log(6 / 0) // Number.Infinity
console.log(Math.sqrt(-2)) // NaN
console.log(undefined || 5) // 5

// Erreurs (https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Errors)
console.log(null.msg) // TypeError: null has no properties
new Array(Number.MAX_VALUE + 1) // Initialiser un tableau trop grand - RangeError: invalid array length
console.log('fff' |) // SyntaxError: expected expression, got ')'



// Var, let et const
while (true) {
    var x = 5.9;
    break;
}
console.log(x) // 5.9

while (true) {
    let n = 4;
    break;
}
console.log(n) // ReferenceError: n is not defined