JS

1 Les bases en JS

js5.png

1.1 Introduction à JS

  • JS : JavaScript
  • Langage impératif, fonctionnel, orienté objet… à prototype
  • Principalement utilisé coté client pour l'interactivité et le dynamisme des pages
  • Possibilité d'utilisation coté serveur avec Node.js
  • Ne pas confondre avec un autre langage de programmation : Java
  • Logo officiel : js.png
  • Logo js strict : js5.png

1.1.1 Historique

  • 1996 : JS 1.0 intégré à NetScape Navigator
  • 1998 : JS 1.3 basé sur les éditions 1 et 2 du Standard ECMA-262
  • 2000 : JS 1.5 édition 3 de ECMA-262 : expression rationnelles, exceptions try/catch
  • 2009 : édition 5 de ECMA-262 : support JSON, mode strict
  • 2012 : ECMAScript 5.1 (supporté par tous les navigateurs modernes)
  • juin 2015 : ECMAScript 2015, ECMAScript 6 ou ES6 : modules, classes, itérateurs, générateurs, promesses
  • juin 2018 : ECMAScript 2018 édition 9 de ECMA-262

1.1.2 Fonctionnalités

  • modifier/interagir avec le contenu de la page
  • réaliser/réagir à des actions (clic de souris, touche clavier)
  • interagir avec le support (GPS, caméra, orientation de l'écran, etc.)
  • afficher des pop-ups…
  • etc.
<button onclick="alert('pop-up');">pop-up</button>

1.2 Comment utiliser du JS dans une page HTML

1.2.1 Javascript dans le code HTML (Méthodes à éviter)

  • Directement dans les attributs d'une balise HTML
    • par exemple avec l'attribut onclick
  • Directement dans le HTML
    • code JS dans balise <script> dans <head> ou avant </body>
<button onclick="alert('pop-up-inline');">inline</button>
<button id="button-body">body</button>
<script>
  document.getElementById('button-body').onclick=function(){alert('pop-up-body');}
</script>

1.2.2 Javascript externe (Méthode recommandée)

  • En utilisant un fichier texte externe .js
    • balise <script> dans <head> ou avant </body>
<head>
  <script src="inc/js/js-file.js"></script>
</head>
<body>
    <button id="button-file">file</button>
</body>

Contenu du fichier js-file.js :

document.getElementById('button-file').onclick=function(){alert('pop-up-file');}

1.2.3 Les bonnes pratiques d'utilisation de JS

  • JS n'est pas implémenté de la même façon dans tous les navigateurs
  • En cas d'erreur le site peut devenir inaccessible
  • L'utilisateur peut empêcher l'exécution de JS
  • Le contenu généré par JS est souvent invisible pour les moteurs de recherche

Dans l'idéal JS doit être utilisé pour améliorer l'expérience utilisateur. Il faut éviter de l'utiliser pour ajouter de nouvelles fonctionnalités.

1.3 Règles de base

  • le langage JS est sensible à la casse
  • chaque instruction se termine par un point virgule ;
  • commentaires:
    • sur une ligne: // commentaire
    • sur plusieurs lignes: /* commentaire */

1.4 Les types de base

Type de données :

  • boolean
  • number
  • string
  • object
  • function

1.4.1 boolean

Pour les valeurs booléennes :

  • true
  • false

cast possible avec la fonction Boolean()

<script>
console.log(true)
console.log(false)
console.log(Boolean())
console.log(Boolean(1))
console.log(typeof true)
</script>

1.4.2 number

Pour les valeurs numériques : entiers, réels

cast possible avec la fonction Number()

<script>
console.log(12e3)
console.log(4.5)
console.log(Number())
console.log(Number(true))
console.log(Number(false))
console.log(Number("test"))
</script>

1.4.3 Fonctions pour les nombres

  • isNaN(val) : pour tester si val est NaN (Not a Number)
  • parseInt(string) : pour convertir une chaîne en entier
  • parseFloat(string) : pour convertir une chaîne en réel
<script>
console.log(parseInt("3.4a"))
console.log(parseFloat("3.4a"))
console.log(parseInt("a3.4"))
console.log(isNaN(parseFloat("a3.4")))
</script>

1.4.4 string

Pour les chaînes de caractères délimitées par ' ou "

cast possible avec la fonction String()

<script>
console.log("C'est super")
console.log('C\'est super')
console.log(String(2))
console.log('concat'+"énation")
</script>

1.4.5 Propriété des chaînes de caractères

  • length: Longueur d'une chaîne de caractères
<script>
console.log("C'est super".length)
</script>

1.4.6 Méthodes des chaînes de caractères

  • charAt(int n) : renvoie du n ème caractère
  • substring(int i, [int j]) : renvoie de la chaîne compris entre le i ème et le j ème caractère
    • si j n'est pas donné, renvoie la chaîne à partir du caractère i
  • toUpperCase() : conversion en MAJUSCULES
  • toLowerCase() : conversion en minuscules
  • indexOf(string souschaine, [int pos]) : renvoie l’indice de la 1ère occurence de souschaine dans la chaîne
  • lastIndexOf(string souschaine, [int pos]) : renvoie l’indice de la dernière occurrence de souschaine dans la chaîne.
    • L’option pos permet de n’effectuer la recherche qu’à partir d’une certaine position

Si souschaine n'est pas trouvée, indexOf et lastIndexOf renvoient -1

1.4.7 Méthodes des chaînes de caractères

<script>
console.log("C'est super".charAt(0))
console.log("C'est super".substring(2,5))
console.log("C'est super".substring(6))
console.log("C'est super".toUpperCase())
console.log("C'est super".toLowerCase())
console.log("C'est super".indexOf("super"))
console.log("C'est super".indexOf("super", 7))
console.log("C'est super".lastIndexOf("e"))
</script>

1.5 Les variables

  • var variable=valeur;
  • pas de typage obligatoire, détection automatique
  • Portée:
    • globale : déclaration en dehors d'une fonction
    • locale : dans une fonction/instruction
<script>
var variable = 2;
variable += 4;
console.log(variable);
variable = "entier"
variable += 4;
console.log(variable);   
</script>

1.6 Les type d'objets

Type d'objet :

  • Object
  • Date
  • Array

1.6.1 L'objet Object

Object correpond à l'objet générique en javascript.

Programmation fonctionnelle Programmation objet
variable propriété
fonction méthode

1.6.2 L'objet Date

La gestion des dates se fait avec l'objet Date

  • new Date() définit la date courante
  • new Date(chaine) converti la chaîne
  • new Date(année, [indexMois[, jour[, heures[, minutes[, secondes[, millisecondes]]]]]])
<script>
console.log(new Date());
console.log(new Date('1970-01-01 13:37:00.000'));
console.log(new Date(1970, 0, 1, 13, 37, 00, 0));
</script>

1.6.3 Méthodes de l'objet Date

<script>
var date=new Date();
console.log(date.getFullYear());
console.log(date.getYear());
console.log(date.getMonth());
console.log(date.getDate());
console.log(date.getDay());
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
console.log(date.getMilliseconds());
console.log(date.getTime());
</script>

1.6.4 L'objet Array

Les tableaux sont créés à partir de l'objet Array. Il est possible de donner le nombre d'éléments à la création du tableau. Ils peuvent contenir des éléments de types différents.

  • new Array(arrayLength)
  • new Array(element0, element1[, ...[, elementN]])
<script>
console.log(new Array(10));
console.log(new Array());
console.log([]);
var t = [1,"2",3.4,'c'];
console.log(t);
t[5]=6;
console.log(t);
</script>

Tableaux associatifs, Tableaux multi-dimensionnels, tableaux de types différents

1.6.5 Propriété de l'objet Array

  • length: nombre de cases dans le tableau.
<script>
var t = ["premier","dernier"];
console.log(t[0])
console.log(t[t.length-1])
</script>

1.6.6 Méthodes de l'objet Array

Mutateurs: modifient le tableau

  • push(elt) : ajoute à la fin du tableau l'élément elt
  • unshift(elt) : ajoute au début du tableau l'élément elt
  • pop() : supprime et retourne le dernier élément du tableau
  • shift() : supprime et retourne le premier élément du tableau
  • splice(int pos, int nb) : supprime et retourne nb éléments à partir de l'index pos
  • reverse(): renverse l'ordre des éléments du tableau
  • sort(): trie les éléments du tableau

1.6.7 Méthodes de l'objet Array

Accesseurs: ne modifient pas le tableau

  • indexOf(elt) : retourne l'index de l'élément elt dans le tableau ou -1
  • lastIndexOf(elt) : retourne le dernier index de l'élément elt dans le tableau ou -1
  • join([string s]): concatène tous les éléments du tableau en une chaîne de caractères séparés par s
  • slice([int debut, [int fin]]): extrait une portion du tableau de l'index debut à l'index fin

1.6.8 Méthodes de l'objet Array

<script>
var t = [2,3,4];
t.unshift(1); t.push(5); 
console.log(t);
t.pop(); t.shift();
console.log(t);
t.reverse(); console.log(t);
t.sort(); console.log(t);
console.log(t.indexOf(2));
console.log(t.join());
console.log(t.join('|-|'));
console.log(t.slice());
console.log(t.slice(0,1));
</script>

1.6.9 L'objet Math

Les propriétés et méthodes de l'objet Math sont statiques.

  • abs(x), acos(x), asin(x), atan(x), cos(x), exp(x), log(x), sin(x), sqrt(x), tan(x) : applique la fonction appropriée à x
  • round(x) : renvoie l'arrondi d'un nombre
  • ceil(x) : renvoie le plus petit entier supérieur ou égal à x
  • floor(x) : renvoie le plus grand entier inférieur ou égal à x
  • max(x,y) : renvoie la plus grande des valeurs de x et y
  • min(x,y) : renvoie la plus petite des valeurs de x et y
  • pow(x,y) : renvoie x à la puissance y
  • random() : retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclu)

1.6.10 L'objet Math

<script>
pi = Math.PI;
console.log(pi);
console.log(Math.round(pi));
console.log(Math.round(pi+0.5));
console.log(Math.ceil(pi));
console.log(Math.floor(pi));
console.log(Math.min(pi, 4.2));
console.log(Math.max(pi, 4.2));
console.log(Math.pow(3, 2));
console.log(Math.random());
</script>

1.7 undefined / null

  • null est une valeur qui ne correspond à aucune valeur
  • undefined correspond à une variable qui est définie mais qui n'a pas été initialisée
  • null et undefined correspondent à la valeur booléenne false
<script>
console.log(typeof null)
console.log(typeof undefined)
</script>

1.8 Les opérateurs arithmétiques

  • addition
  • soustraction
  • multiplication
  • division
  • modulo (reste de la division euclidienne)
  • ** exponentielle (ES6)
  • -- décrément
  • ++ incrément

1.9 Les opérateurs de comparaison

  • a == b  : égalité des valeurs
  • a != b  : différence
  • a <= b  : infériorité ou égalité
  • a >= b  : supériorité ou égalité
  • a  <  b : infériorité
  • a  >  b : supériorité
  • a === b : identité (égalité des valeurs et des types)
  • a !== b : non identité (différence des valeurs ou des types)
<script>
console.log(null == undefined)
console.log(null === undefined)
</script>

1.10 Structures de contrôle

  • structures conditionnelles
  • structures répétitives

1.10.1 Les structures conditionnelles (if, else, else if)

if (condition) {
  instructions; // si condition est évaluée à true
} 
if (condition) {
  instructions; // si condition est évaluée à true
} else {
  instructions; // si condition est évaluée à false
}
if (condition1) {
  instructions; // si condition1 est évaluée à true
} else if (condition2) {
  instructions; // si condition1 évaluée à false et condition2 évaluée à true
} else {
  instructions; // si condition1 et condition2 évaluées à false
}

1.10.2 Les structures conditionnelles (if, else, else if)

<script>
var valeur = Math.random();
if (valeur < 0.33) {
  valeur = "petite"
} else if (valeur < 0.66) {
  valeur = "moyenne"
} else {
  valeur = "grande"
}
console.log(valeur)
</script>

1.10.3 Les structures conditionnelles (switch)

switch(expression) {
  case x:
    // si expression == x
    break;
  case y:
    // si expression == y
    break;
  default: 
    // si expression != x et expression != y
} 

1.10.4 Les structures conditionnelles (switch)

<script>
var date = new Date(), day;
switch (date.getDay()) {
  case 6: // samedi
  case 0: // dimanche
    day = "week-end";
    break;
  case 1: // lundi
  case 2: // mardi
  case 3: // mercredi
  case 4: // jeudi
  case 5: // vendredi
    day = "semaine";
}
console.log(day);
</script>

1.10.5 Les structures répétitives (pour)

for (expr1; expr2; expr3) { // expr1 est exécutée une seule fois au début de la boucle
  instructions;             // exécuté tant que expr2 est évaluée à true
}                           // expr3 est exécutée à la fin de chaque itération

1.10.6 Les structures répétitives (tant que)

while (condition) {
  instructions; // exécutée si condition vaut true et répétée tant que condition vaut true
}
do {
  instructions; // exécutée puis répétée tant que condition vaut true
}
while (condition);

1.10.7 Exemple général sur les structures

<script>
var i = 0, tab = [1,2,3,4];
do {
  tab[i] = tab[i]%2;
  i++;
} while (i < tab.length);

for (i = 0; i < tab.length; i++) {
  console.log(tab[i]);
}
</script>

1.11 les fonctions

  • sont des blocs d'instructions que l'on peut répéter dans un programme
  • ne sont pas exécutées directement après leurs définitions
  • sont exécutées par un appel
<script>
function helloWorld() {
  console.log("Hello world!");
}

helloWorld();
</script>

1.11.1 Les arguments ou paramètres

  • Un argument est une variable, défini après le nom de la fonction entre paranthèses
  • Les arguments sont séparés par une virgule
<script>
function helloWorld(hello, world) {
  console.log(hello + ' ' + world);
}
helloWorld('Hello', 'world');
helloWorld('Bonjour', 'tous');
</script>

1.11.2 Les valeurs par défaut

  • Il est possible de définir une valeur par défaut à un argument
  • Les arguments qui ont une valeur par défaut sont définis en dernier
<script>
function helloWorld(hello, world = 'world') {
  console.log(hello + ' ' + world);
}

helloWorld('Bonjour', 'tous');
helloWorld('Hello');
</script>

1.11.3 Les retours

  • Tous les types de variables peuvent être retournés par une fonction
  • Si return est absent, undefined est retourné
<script>
function helloWorld() {
  return "Hello world!";
}

console.log(helloWorld());
</script>

2 Les événements en Javascript

  • Javascript peut interagir avec l'utilisateur grâce à des événements.

2.1 L'événement click

  • click : gestion du clic souris sur un élément
  • utilisation du préfixe on dans l'attribut d'une balise
  • this représente la balise associé à l'événement
<button onclick="console.log('button')" value="button1">button</button>
<button onclick="console.log(this.value)" value="button2">button</button>
<div onclick="console.log('div')">div</div>

2.2 Les événements généraux

  • load : la ressource (page, img, link, iframe, script) est chargée par le navigateur
  • unload : l'utilisateur quitte la page
  • keydown, keypress, keyup : gestion du clavier
  • mousedown, mouseover, mouseup, mouseleave, mouseenter, mousemove : gestion de la souris

2.3 Les événements et les formulaires

  • focus  : un élément reçoit le focus
  • blur   : un élément perd le focus
  • input  : la valeur d'un champ de formulaire est en cours de modification
  • change : la valeur d'un champ de formulaire est modifiée
  • reset  : quand les champs du formulaire sont réinitialisés
  • submit : quand le formulaire est soumis

2.4 Les événements dans le code JS

  • target : élément qui a déclenché l'événement
  • preventDefault() : permet d'annuler l'événement
<label>Click:<input id="click" type="checkbox" value="click"></label>
<label>Cancel:<input id="cancel" type="checkbox" value="cancel"></label>
<script>
  function gestionEvenement(evt) {
    var elt = evt.target;
    if (elt.value == 'cancel') {
      evt.preventDefault();
    }
  }
  document.getElementById('click').onclick = gestionEvenement;
  document.getElementById('cancel').onclick = gestionEvenement;
</script>

3 Modèle Objet de Document (DOM)

3.1 Représentation arborescente

le code html peut être représenté sous forme arborescente

html.png

3.2 Représentation globale

Javascript représente la page, l'onglet grâce à l'objet global window

dom.png

3.3 objet window (propriétés)

  • frames[] : tableau de frames
  • location : url de la page courante
  • history : historique de navigation de l'onglet courant
  • self : fenêtre courante
  • opener : la fenêtre (si elle existe) qui a ouvert la fenêtre courante
  • parent : parent de la fenêtre courante, si la fenêtre courante est une sous-partie d’un frameset
  • top : fenêtre principale (qui a crée toutes les fenêtres)
  • name : nom de la fenêtre

3.4 objet window (méthodes)

  • alert(string) : ouvre une boîte de dialogue avec le message passé en paramètre
  • prompt(string) : affiche une fenêtre de saisie
  • confirm(string) : ouvre une boîte de dialogue avec les boutons OK et cancel
  • blur() : enlève le focus de la fenêtre
  • focus() : donne le focus à la fenêtre
  • scroll(int x, int y) : positionnement aux coordonnées (x,y)
  • close() : ferme la fenêtre

3.5 objet window (méthode open)

open(URL, string name, string options) : ouvre une nouvelle fenêtre contenant le document identifié par l'URL

  • URL : adresse de la page à charger
  • nom : nom de la fenêtre (utilisable par TARGET)
  • options (séparées par des , ) :
    • toolbar = [yes|no] : affichage de la barre d’outils
    • location = [yes|no] : affichage de l’URL de la page
    • directories = [yes|no] : affichage de la barre le lien
    • status = [yes|no] : affichage de la barre d’état
    • menubar = [yes|no] : affichage de la barre de menus
    • scrollbars = [yes|no|auto] : affichage des ascenseurs
    • resizable = [yes|no] : fenêtre redimensionnable ou non
    • width = pixels, height = pixels : largeur et hauteur en pixels
    • top = pixels, left = pixels : positionnement vertical et horizontal
    • fullscreen = [yes|no] : affichage plein écran

3.6 objet window (exemple)

Il n'est pas obligatoire de préfixer par window

<script>
window.alert('alert');
console.log(window.prompt('prompt'));
console.log(window.confirm('confirm'));

// alert('alert');
// console.log(prompt('prompt'));
// console.log(confirm('confirm'));
</script>

3.7 objet window (exemple)

<script>
var target = open('https://duck.com', 'target', 'resizable=yes,width=420px,height=420px');
// target.close();
</script>

3.8 objet document (propriétés)

  • title : titre du document
  • location : URL du document
  • lastModified : date de dernière modification
  • referrer : URL de la page d’où arrive l'utilisateur
  • forms[] : tableaux des formulaires de la page
  • links[] : tableaux des liens de la page
  • images[] : tableaux des images
  • applets[] : tableaux des applets
  • plugins[] : tableaux plug-ins

3.9 objet document (méthodes)

  • getElementById(string) : retourne la balise à partir d'un identifiant
  • getElementsByTagName(string) : retourne les balises d'un type donné
  • querySelector(string) : retourne la première balise qui correspond à une sélection CSS
  • querySelectorAll(string) : retourne toutes les balises qui correspondent à une sélection CSS
  • write(string) : écrit une chaîne dans le document
  • writeln(string) : écrit une chaîne dans le document + caractère de fin de ligne

3.10 objet document (exemple)

<input type="text" id="input">
<button onclick="document.getElementById('input').value = 'value';">button</button>
<button onclick="document.write('write')">write</button>

3.11 Représentation DOM

Le document représente la page sous forme arborescente. Chaque nœud est caractérisé par:

  • nodeName : le nom (par exemple #text, div, span)
  • nodeType : valeur numérique souvent à comparer avec les constantes
    • Node.ELEMENT_NODE
    • Node.ATTRIBUTE_NODE
    • Node.TEXT_NODE
  • nodeValue : valeur associée au nœud (pour les formulaires)

3.12 Propriétés d'un nœud

Pour se déplacer dans l'arbre DOM, il existe:

  • parentNode : le nœud père
  • childnodes[] : les nœuds fils du nœud courant
  • firstChild : le premier nœud fils
  • lastChild : le dernier nœud
  • previousSibling : le nœud frère précèdent
  • nextSibling : le nœud frère suivant

3.13 Méthodes d'un nœud

  • appendChild(node) : nœud à ajouter à la fin des enfants du nœud parent
  • prepend(node) : nœud à ajouter au début des enfants du nœud parent
  • removeChild(node) : nœud à supprimer du nœud parent
  • replaceChild(newNode, oldNode) : remplace un nœud par un autre nœud

3.14 Création d'un nœud

  • document.createElement(tag) : création d'un nœud
  • document.createTextNode(text) : création d'un nœud textuel
<div id="div"><span>span1</span><span>span2</span></div>
<script>
var span = document.createElement('span');
span.appendChild(document.createTextNode('span3'));
document.getElementById('div').appendChild(span);
// document.getElementById('div').prepend(span);
</script>

3.15 Contenu d'un nœud

  • innerHTML : contenu HTML du nœud courant exclu
  • outerHTML : contenu HTML du nœud courant inclus
  • textContent : contenu textuel du nœud courant
<button onclick="console.log(this.innerHTML)">button</button>
<button onclick="console.log(this.outerHTML)">button</button>
<button onclick="console.log(this.textContent)">button</button>

3.16 Attributs d'un nœud

  • className : class associée au nœud
  • id : identifiant associé au nœud
  • getAttribute(name) : retourne la valeur associée à un attribut
  • setAttribute(name, value) : modifie la valeur associée à un attribut
  • removeAttribute(name) : supprime un attribut
<div id="div-id" class="div class"></div>
<script>
var elt = document.getElementById("div-id")
console.log(elt.id)
console.log(elt.getAttribute("class"))
elt.setAttribute("class", "class")
console.log(elt.className)   
</script>

3.17 objet form (propriétés)

  • name : nom (unique) du formulaire
  • method : méthode de soumission (get, post)
  • action : action déclenchée par la validation du formulaire
  • elements[] : tableau des éléments du formulaires
  • length : nombre d’éléments du formulaire

3.18 objet form (méthodes)

  • submit() : soumet le formulaire
  • reset() : ré-initialise le formulaire

3.19 objet form (événements)

  • submit : action à réaliser lorsque le formulaire est soumis
  • reset : action à réaliser lorsque le formulaire est ré-initialisé
<script>
function checkForm() {
  alert('form');
}
</script>
<form id="form-onsubmit" onsubmit="checkForm()">
  <input name="input" value="value">
  <input type="submit" value="submit">
</form>
  • appCodeName : nom de code interne du navigateur
  • appName : nom réel du navigateur
  • appVersion : version du navigateur
  • userAgent : chaîne représentation l'ensemble
  • plugins[] : tableau des plugins installés sur le navigateur

4 Les cookies

  • Pour stocker des informations côté client
  • Il ne faut jamais stocker des informations sensibles avec les cookies
  • Information accessible en javascript avec document.cookie