JS

Table des matières

1. Les bases en JS
2. Les événements en Javascript
3. Modèle Objet de Document (DOM)
4. Les cookies

1 Les bases en JS

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 :
Logo js strict :

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

3.2 Représentation globale

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

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>

3.20 objet navigator (propriétés)

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

<script>
function setCookie(name,value,days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
console.log("Cookie : "+document.cookie);
setCookie('cookie','value',1);
console.log("Cookie : "+document.cookie);
</script>

<script>
function getCookie(cname) {
  var name = cname + "=";
  var decodedCookie = decodeURIComponent(document.cookie);
  var ca = decodedCookie.split(';');
  for(var i = 0; i <ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
console.log("Cookie : "+document.cookie);
console.log(getCookie("cookie"));
</script>

<script>
function setCookie(name,value,days) {
  var expires = "";
  if (days) {
    var date = new Date();
    date.setTime(date.getTime() + (days*24*60*60*1000));
    expires = "; expires=" + date.toUTCString();
  }
  document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}
setCookie('cookie','value',-1);
console.log("Cookie : "+document.cookie);
</script>

JS