JavaScript:

Les variables permettent de garder en mémoire une valeur lors de

l'éxécution d'un script. Elles sont essentielles au bon fonctionnement de
nos algorithme.

Une fonction est un type d’objet.

Ecriture
Une variable peut être déclarée à l'aide du mot clef var et ne doivent pas
contenir de caractères spéciaux à l'exception des _.
var a = 2
var une_variable_plus_longue = "Ma super chaine"

Contrairement à d'autres langages de programmation il n'est pas

nécessaire de mettre un ; à la fin des lignes en JavaScript (mais si vous
voulez, vous pouvez ^^). L'interpréteur (ce qui va faire fonctionner notre
code) va automatiquement détecter les fins de lignes et comprendre quand
arréter une instruction.

Enfin, une variable peut changer de valeur et de type au cours de

l'éxécution de notre algorithme.
var a = 2
a = "Je suis une chaine maintenant !"

Les types de variables

Il est possible de stocker différents types d'information dans une variable.

Les nombres
var a = 2
var b = 3.4123
var c = -509
var d = 1/3

Attention dans le cas des réels, on utilise un . pour marquer la partie

décimale.

Les chaines de caractère

Les chaines de caractères permettent de stocker des mots / phrases. On
les entoure de ' ou de "
var a = "Salut les gens"
var b = 'Re-Salut les gens'

Il n'y a pas de réel différence entre les simples et doubles quotes sauf si
notre chaine de caractère contient des ' ou "
var a = "Ceci n'est pas poblématique"
var b = 'Ceci n\'est pas problématique'

Les booléens
Les booléens permettent de stocker une information qui sera soit vraie soit
fausse
var vrai = true
var je_suis_faux = false

Les tableaux
Les tableaux permettent de stocker une liste d'information. Cette liste peut
contenir n'importe quel autre type de variable (un tableau peut même
contenir un autre tableau).
var eleves = ['Jean', 'Marc', 'Marion']
var demo = [true, 10, 'Marc']

Ensuite il est possible de récupérer un élément dans un tableau en utilisant

la notation [i] où i est un nombre représentant l'index de l'élément à
récupérer (cet index commence par 0)
eleves[0] // Jean
eleves[2] // Marion
demo[1] // 10
demo[18] // undefined

Les objets
Les objets permettent de stocker des informations plus complexes qu'une
simple liste. Pour le moment, vous pouvez imaginer les objets comme une
liste avec des index nommés.
var eleve = {
clef: 'valeur',
nom: 'Jean',
age: 18,
 notes: [10, 4, 18]
}

Dans un objet les "clefs" sont appellés des propriétés. Pour récupérer une
valeur associée à une propriété il y a 2 notations possibles.
eleve.nom // Jean
eleve.notes // [10, 4, 18]
eleve.notes[1] // 4
// On peut aussi utiliser une notation proche de celle des tableaux
eleve['notes'] // [10, 4, 18]

De la même manière, les objets peuvent contenir des objets en valeur.

var eleve = {
notes: {
math: 18,
francais: 14
}
}
// Pour récupérer la note de math de l'élève on peut alors faire
eleve.notes.math // 18
eleves.nom // undefined

Types spéciaux
Enfin, lors de votre découverte du javaascript vous allez rencontrer
certaines variables qui correspondent à certains cas spécifiques
undefined // quand on essaie d'accéder à
null //
NaN // 'not a number'

Typage faible
En javascript le typage est faible, suivant les opérations les variables
peuvent changer implicitement de type.
var a = '1'
var b = 1
a + b = '11'
// b est convertit en chaine de caractère implicitement
a * b = 1
// a est convertit en nombre de manière implicite
"Salut" * 3 // NaN, Not a number
// Attention aux opérations qui n'ont pas de sens :)
"43" > 1000 // false, 1000 est convertit en chaine implicitement et il
compare l'ordre alphabétique

De manière générale on essaiera tant que possible de ne pas se reposer

sur cette conversion implicite. Elle est plus souvent source de problèmes
qu'autre chose.
Lorsque l'on souhaite écrire des algorithmes Il est important d'être capable
de tester si une valeur est bien celle attendue. On va donc découvrir
maintenant les conditions.

Les conditions s'écrivent de la manière suivante

if (<booleen>) {
<code si vrai>
}

Si par exemple on souhaite afficher à l'utilisateur une phrase si un nombre

est pair :
// % donne le reste de la division de $nombre par 2
if (nombre % 2 == 0) {
“Bravo !”
}

Il est aussi possible de mettre un code à exécuter si la condition n'est pas

remplie
if (<booleen>) {
<code si vrai>
} else {
<code si faux>
}

Enfin on est parfois amené à utiliser des conditions multiples

if (<booleen>) {
<code si vrai>
} else if (<booleen>) {
<code>
} else {
<code>
}

Opérateur de comparaison
Parfois on souhaitera tester si une variable est bien celle attendue, ou faire
une condition plus complexes. Dans ce cas là il faudra utiliser les
opérateurs de comparaison
a == b // a égale à b
a === b // a == b et a est de même "type" que b
a >= b // a supérieur OU égal à b
a > b // a strictement supérieur à b
a <= b // a inférieur OU égal à b
a < b // a strictement inférieur à b
On pourra aussi utiliser les opérateurs booléens, qui nous permettront de
combiner plusieurs conditions ensembles
// && ET
true && true // true
true && false // false
false && true // false
false && false // false

// || OU
true || true // true
true || false // true
false || true // true
false || false // false

// ! NON
!true # false
!false # true

Le switch / case
Le switch case permet d'effectuer une opération suivant la valeur que
prendra une expression.
switch (expression) {
case valeur1:
// Instructions à exécuter lorsque le résultat
// de l'expression correspond à valeur1
instructions1
break
case valeur2:
// Instructions à exécuter lorsque le résultat
// de l'expression correspond à valeur2
break
default:
// Instructions à exécuter lorsqu'aucune des valeurs
// ne correspond
break
}

C'est une notation qui est plus spécifique que les conditions avec
les if et else mais qui peut s'avérer plus simple à écrire dans certains cas
spécifiques

Le ternaire
Le ternaire, ou opérateur conditionnel est un outil qui permet de racourcir
une condition en une seul ligne
// condition ? <expression si vrai> : <expression si faux>
age = 19
"Je suis " + (age >= 18 ? "majeur" : "mineur")
Dans ce nouveau chapitre nous allons parler des boucles. Les boucles
permettent de répéter une certaine logique suivant une condition précise.
Il existe plusieurs manières de créer des boucles :

La boucle While
La boucle while permet d'exécuter un code tant que la condition passée en
paramètre n'est pas satisfaite
while (<condition>) {
// ....
}

Il faudra faire attention avec l'utilisation de cette boucle à ce que la

condition devienne fausse à un moment donné au risque de voir la boucle
se dérouler de manière infinie. Si on le souhaite, il existe aussi la
boucle until qui permet de faire la même chose sauf que la condition
d'arrêt est inversée.
var i = 0
while (i < 3) {
"Je compte " + i
i = i + 1 // peut aussi s'écrire i++
}

Il est possible de forcer la sortie de la boucle à l'aide du mot clef break

var i = 0
while (i < 3) {
"Je compte " + i
if (i == 1) {
break
}
i++
}

La boucle For
La boucle for permet d'exécuter un code un certain nombre de fois en
précisant manuellement l'intervalle pour lequel on souhaite faire la boucle.
Elle présente une notation plus concise que le while :
var i = 0
for (var i = 0; i < 3; i++) {
"Je compte " + i
}
Cette boucle s'avèrera très utile lorsqu'il s'agira de parcourir un tableau
var eleves = ['Jean', 'Marc', 'Marie']
for (var i = 0; i < eleves.length; i++) {
eleve[i] // vaudra alternativement : Jean, Marc, Marie
}

Ecrire le code "comme il arrive" est suffisant pour un algorithme simple

mais on va être très rapidement amené à répéter une même logique
plusieurs fois. Pour remédier à ce problème, il est possible d'écrire
des fonctions.
Syntaxe
Les fonctions permettent de stocker en mémoire une certaine logique que
l'on pourra utiliser à plusieurs reprises dans la suite de notre code. Elles
prennent en général des paramètres et retournent un résultat particulier.
function saluer (nom) {
return "Salut " + nom
}
// On appel ensuite notre fonction avec
saluer('Marc') // Salut Marc

Les fonctions en JavaScript sont un type de variable particulier, il est donc

aussi possible de ne pas leur donner de nom, mais de les stocker dans une
variable de manière classique.
var saluer = function (nom) {
return "Salut " + nom
}

Nous verrons la différence entre ces 2 notations dans un prochain chapitre.

Il est cependant important de noter quelques points importants concernant
les fonctions :

 Si la fonction ne return rien à la fin de son éxécution alors elle

renverra automatiquement la valeur undefined.
 Si on appelle la fonction en omettant certains paramètres, ils
prendront la valeur undefined.
var demo = function (nom) {
return "Salut " + nom
}
demo() // nom aura la valeur undefined dans la fonction

Exemple
Si on souhaite convertir un nombre de secondes en nombre de minutes on
pourra se créer une fonction convert_to_min
var convert_to_min = function (secondes)
return secondes / 60
}

convert_to_min(3600) // 60

Si on souhaite rendre le paramètre optionel et lui assigner la valeur 0 par

défaut, il nous suffira de rajouter une condition
var convert_to_min = function (secondes)
if (secondes === undefined) {
secondes = 0
}
return secondes / 60
}

convert_to_min(3600) // 60
convert_to_min() // 0

Les méthodes
Une fonction peut être stockée dans la propriété d'un objet.
var eleve = {
nom: 'Marc',
note: 14,
present: function () {
return 'Je suis présent'
}
}

eleve.present() // 'Je suis présent'

Une fonction utilisée sur un objet est appéllé méthode. Les méthodes sont
d'ailleurs utilisés sur les types d'objet natifs du JavaScript comme les
chaines de caractères ou les entiers.
"Salut".toUpperCase() // SALUT
"Comment ça va ?".split(' ') // ['Comment', 'ça', 'va', '?']
1.toString() // '1'
1.1312312312.toFixed(2) // '1.13'

Si vous souhaitez obtenir plus d'informations sur les méthodes disponibles,

vous pouvez consulter la documentation JavaScript disponible sur le MDN
(mozilla developer network) , https://devdocs.io/

Prototype ?
Sur la documentation vous verrez parfois le mot clef prototype. Nous ne
rentrerons pas de suite dans les détails, mais une méthode disponible sur
le prototype est une méthode disponible sur les objets du type en question
:
// fromCharCode() est disponible directement sur String
String.fromCharCode(65) // "A"
// toLowerCase() est disponible sur le prototype
// String.prototype.toLowerCase()
// La méthode s'utilise donc sur une chaine
"Salut".toLowerCase // "salut"

Nous n'allons rien apprendre de nouveau aujourd'hui mais nous allons faire
le point sur une notion importante : La portée des variables (scope en
anglais).

Les variables ont une portée limitée lorsqu'elles sont déclarées dans une
fonction :
var a = function () {
var b = 3
}
a()
b // ERREUR, b is not defined

Les fonctions ont une portée locale mais il est possible de faire appel à des
variables externes à la fonction
var exterieur = "Salut"
var maFonction = function () {
exterieur
var interieur = 3
}
maFonction() // Dans cet appel exterieur vaudra "Salut"
interieur // ERREUR, interieur is not defined

Par contre il faut faire attention car si une fonction fait appel à une variable
extérieur, elle utilisera la valeur au moment de l'éxécution d'une fonction.
C'est ce que l'on appel le contexte, le code à l'intérieur de la fonction
disposera des variables disponible lors de son éxécution.
var a = "Salut"
var maFonction = function () {
return a
}
maFonction() // "Salut"
a = "Test"
maFonction() // "Test"

Enfin il est aussi important de noter qu'un même nom de variable peut être
utilisé dans les différentes portées.
var a = "Salut" // portée globale
var maFonction = function () {
var a = "demo" // portée locale
return a
}
maFonction() // demo
a // salut
// La variable a définie dans la fonction
// n'est pas la même que la variable définie
// dans la fonction

Les blocs (for, if...) n'ont pas de portée particulière, ainsi une variable
définie dans un for ou un if est disponible en dehors de la boucle /
condition.
for (var i = 0; i < 10; i++) {

}
i // 10

L'Hoisting
Le Javascript a une manière particulière de traiter les variables. Par défaut
il déplace les déclarations de en haut du contexte courant (fonction
courante ou fichier courant)

Ainsi il est possible d'écrire le code suivant sans obtenir d'erreurs :

a // undefined
var a = 3

En lisant ce code on s'attendrait à obtenir une erreur car la variable n'est

pas définie au moment de son appel. Le code est en fait compris de la
manière suivante :
var a // La déclaration est déplacée en haut
a // undefined
a = 3

Ce comportement permet par la même occasion d'expliquer la différence

entre l'assignation de fonction et la déclaration de fonction.
maFonction() // 3
function maFonction () {
return 3
}

La fonction est appellable même si elle n'est déclaré que plus tard dans le
script. L'hoisting déplace les déclarations de fonction en haut
// Le code est en fait compris de la manière suivante
// La déclaration est placée au dessus
function maFonction () {
 return 3
}
// L'appel de la fonction ne pose du coup aucun souci
maFonction() // 3

En revanche si on utilise une assignation on obtient une erreur

maFonction() // ERREUR : maFonction is not a function
var maFonction = function () {
return 3
}

Dans ce cas là l'hoisting bouge la déclaration de la variable mais laisse la

fonction à sa place
// La variable maFOnction est "hoistée"
var maFonction
maFonction() // maFonction est undefined donc erreur
// L'assignation reste à sa place (après l'appel)
maFonction = function () {
return 3
}

C'est pour cela que l'on préférera généralement créer des fonction en
utilisant une assignation de variable afin d'éviter les problèmes qui peuvent
être causés par l'hoisting.

L'opérateur this est une sorte de super variable qui prendra différentes
valeurs suivant le contexte dans lequelle elle est utilisée.

Par défaut this prend comme valeur la variable globale (window sur le
navigateur, global sur nodejs) mais sa valeur peut changer dans une
fonction suivant comment elle est appellée.
var maFonction (a) {
return this
}
var eleve = {
maFonction: function () {
return this
}
}
maFonction() // window
eleve.maFonction() // eleve {}
maFonction.call('Salut', 'argument1') // 'Salut'

Ce qu'il faut retenir :

 this prend comme valeur l'objet global par défaut

 Si une méthode est appellée depuis un objet, this prendra comme
valeur l'objet
  On peut appeller une méthode en changeant la valeur de this gràce à
la méthode call()

On reviendra plus tard sur cet opérateur dans des exemples plus concret.

Dans ce chapitre nous allons faire le point sur le fonctionnement interne

des objets en JavaScript et on va parler de la notion de prototype.
Prototype ?
Si vous inspectez une variable avec votre navigateur vous remarquerez
qu'il y a une propriété particulière __proto__. Cette propriété est un objet
qui contient aussi des propriété et des méthodes.
var a = 1
a.__proto__
/*
{
constructor: function Number()
toExponential: function toExponential()
toFixed: function toFixed()
toLocaleString: function toLocaleString()
toPrecision: function toPrecision()
toString: function toString()
valueOf: function valueOf()
__proto__: Object
}
*/

Lorsque l'on fait appel à une propriété sur un objet, le JavaScript va

chercher si la propriété est présente sur l'objet puis sur son prototype, puis
sur le prototype de son prototype (et ainsi de suite...). C'est ce système qui
est utilisé en interne pour faire fonctionner les variables de bases.

Par exemple un objet vide (qui n'a aucune propriétés) dispose quand
même de certaines méthodes. Cet méthodes sont en fait placées dans le
prototype de l'objet.
var a = {} // L'objet est vide
a.toString() // Pourtant il a une méthode toString()
console.log(a) // Si on regarde le prototype __proto__ on trouve bien la
méthode toString()

On peut utiliser ce système pour créer des nouveau types de variables par
exemple :
// On crée l'objet qui contient les méthodes que l'on souhaite rendre
disponible sur tous nos objet de type "Eleve"
var Eleve = {
moyenne: function () {
var somme = 0
 for (var i = 0; i < this.notes.length; i++) {
somme += this.notes[i]
}
return somme / this.notes.length
}
}

var jean = {notes: [10, 12]} // On crée un eleve en utilisant un objet

jean.__proto__ = Eleve // On change le prototype
jean.moyenne() // 11, La méthode moyenne est disponible sur le prototype et
peut donc être appellée

Object.create()
La méthode montrée plus haut n'a rien d'officiel et ne sera jamais utilisé.
Lorsque l'on souhaite créer un objet on pourra utiliser la
méthode create() sur l'objet Object. Ainsi le code écrit au dessus peut être
simplifié :
// On écriera jamais ça
var jean = {notes: [10, 12]} // On crée un eleve en utilisant un objet
jean.__proto__ = Eleve // On change le prototype
jean.moyenne() // 11, La méthode moyenne est disponible sur le prototype et
peut donc être appellée

// On peut utiliser Object.create()

var jean = Object.create(Eleve) // Crée un objet qui aura comme prototype
Eleve
jean.notes = [10, 12]
jean.moyenne() // 11

De la même façon, pour accéder au prototype d'un obet on utilisera la

méthode getPrototypeOf().
Object.getPrototypeOf(1) // Number {}

Le constructeur
Object.create() est une méthode relativement récente pour créer des
objets. Par défaut on utilise un constructeur.
// La fonction sera utilisé pour "construire" un objet
var Eleve = function (nom) {
this.nom = nom // On ajoutera une propriété "nom"
}

var jean = new Eleve('Jean') // On crée une nouvelle "instance" de l'objet

Eleve
jean // {nom: 'Jean'}

Ce constructeur a la particularité de donner un prototype particulier aux

instances qui sont crées. En effet si on fait
Object.getPrototypeOf(jean) === Eleve.prototype /// true
En résumé, les objets créés à partie d'un constructeur ont comme
prototype la propriété prototype de la fonction. Si on souhaite créer une
méthode moyenne disponible pour tous les élèves on pourra faire :
// La fonction sera utilisé pour "construire" un objet
var Eleve = function (nom) {
this.nom = nom // On ajoutera une propriété "nom"
}

Eleve.prototype.moyenne = function () {
var somme = 0
for (var i = 0; i < this.notes.length; i++) {
somme += this.notes[i]
}
return somme / this.notes.length
}

var jean = new Eleve('Jean')

jean.notes = [10, 12]
jean.moyenne() // 11

Dans ce chapitre nous allons voir comment capturer les erreurs de nos
scripts en JavaScript.

Try Catch
Parfois un code peut renvoyer une erreur (souvent appellée exception).
var o = {}
o.maMethode() // Uncaught TypeError: o.maMethode is not a function

Ces erreurs bloquent l'éxécution de notre script et empèche l'éxécution de

la suite de notre code. Aussi il est important de les capturer afin de pouvoir
gérer les éventuels problèmes et informer l'utilisateur sur ce qu'il se passe.
try {
var o = {}
o.maMethode()
} catch (e) {
// Le code ici ne s'éxécutera qu'en cas d'erreur
console.log('Une erreur à eu lieu : ' + e);
} finally {
// Ici le code s'éxécutera qu'il y ai eu une erreur ou non
}

Throw
Il est aussi possible d'utiliser ce mécanisme d'erreur pour renvoyer une
erreur si on obtient quelque chose d'inattendu.
function double(nombre) {
 if (!Number.isInteger(nombre) {
throw new Error('Impossible de doubler un nombre qui ne soit pas un
entier');
}
}

double('aze') // ERROR : Impossible de doubler un nombre qui ne soit pas un

entier

Ce système s'avère particulièrement utile lorsque l'on partagera notre code.

Il permet à l'utilisateur final de la fonction de comprendre plus clairement
les problèmes.

La documentation
Si vous avez besoin de plus d'informations ou d'exemples rendez vous sur
la documentation

Nous allons maintenant voir comment écrire du JavaScript côté navigateur.

Le navigateur ne change pas notre manière d'écrire le code, mais donne
accès à de nouveaux objets qui permettent d'intéragir avec l'utilisateur ou
le navigateur.

L'objet window
Sur le navigateur l'objet global est l'objet window. Cet objet contient un
ensemble de méthode et de propriétés utiles comme par
exemple window.innerWidth qui renvoie la largeur de la fenêtre.
var a = 0 // Toutes variables définies globalement sont stocké dans l'objet
window
window.a // 0

Ce détail peut sembler insignifiant mais il faudra faire attention lorsque

vous déclarer des variables globalement. En effet, ces variables peuvent
être écrasées par inadvertance dans un autre script inclue dans la page.

alert, prompt, confirm

window.alert('Ooops') // Affiche une alerte
var a = window.confirm('Sûr de sûr ?') // Affiche une fenêtre de
confirmation et renvoie un booleen
var nom = window.prompt('Entrez votre nom') // Affiche un champs qui permet
de rentrer une valeur

Timers
L'objet window contient aussi 2 méthodes qui seront très utiles pour créer
des timers. Ces fonctions prennent en paramètre un callback (fonction) qui
sera appellé au bout d'un certain temps (indiqué en ms)
window.setInterval(function () {
// Ce code sera appellé toutes les secondes (1000ms)C’est un call-back
}, 1000)

window.setTimeout(function () {
// Ce code sera éxécuté une fois au bout de 3 secondes (3000ms)
}, 3000)

Ces 2 fonctions renvoient un ID qui peut ensuite être utilisé pour stopper le
timer
var i = 0
var timer = window.setInterval(function () {
i++
if (i == 10) {
window.clearInterval(timer) // On utilise l'ID timer pour stopper
le timer
}
}, 1000)

En plus de l'objet window on a aussi accès à un objet document qui permet

de récupérer des éléments HTML et de les manipuler.

On partira systématiquement de cet objet afin de sélectionner nos

éléments.
// Pour sélectionner un élément
document.body // Récupère l'élément body
document.getElementById('demo') // Sélectionne l'élément avec l'id demo
document.querySelector('.demo') // Sélectionne le premier élément
correspondant au sélecteur CSS

// Pour sélectionner plusieurs éléments

document.getElementsByClassName('demo') // Sélectionne les éléments avec la
class démo
document.getElementsByTagName('p') // Sélectionne les éléments <p>
var elements = document.querySelectorAll('.demo') // Sélectionne les
éléments correspondant au sélecteur CSS
// Ces méthodes renvoient un objet NodeList enumerable
// On peut parcourir cette liste d'éléments comme un tableau
for (var i = 0; i < elements.length; ++i) {
var element = elements[i] // objet de type Element
}

Une fois que l'on obtient un élément il est possible d'obtenir différentes
informations.
element.getAttribute('attribut') // Permet de récupérer la valeur d'un
attribut
element.style // Permet de récupérer les styles associés à l'élément
element.classList // Permet de récupérer la liste des classes associées à
un élément
element.offsetHeight // Donne la hauteur réel de l'élément

Mais on peut aussi modifier un élément

element.setAttribute('href', 'http://grafikart.fr')
element.style.fontSize = '24px'
element.classList.add('red') // Ajoute une class à l'élément

Traverser le DOM
Un document HTML n'est au final qu'un arbre d'éléments HTML et texte
qu'il est possible de parcourir de différentes manières. Cet arbre est appellé
le DOM.

Quand on récupère un élément dans la page on récupère en fait un noeud

dans le DOM. Il est possible de naviguer dans l'arbre à partir d'un élément
préalablement récupéré.
element.childNodes // Renvoie tous les noeuds enfant (même les noeuds
textes)
element.children // Renvoie tous les noeuds éléments
element.firstChild // Récupère le premier enfant
element.firstElementChild // Récupère le premier enfant de type element
element.previousElementSibling
element.nextElementSibling

Modifier le DOM
On peut aussi créer et modifier des éléments gràce à différentes méthodes
element.appendChild(enfant) // ajoute un élément à un autre
element.removeChild(enfant) // supprime un enfant
element.textContent = 'Salut' // Change la valeur du noeud texte
element.innerHTML // Renvoie le contenu HTML de l'élément
parentElement.insertBefore(nouvelElement, refElement)

Read the doc

Encore une fois je ne vous ai présenté qu'un nombre limité de méthodes.
Pour plus d'informations n'hésitez pas à vous rendre sur la documentation
sur l'objet Node.

Jusqu'à maintenant nous avons créé des scripts qui se déroulent dès le
chargement de la page. La pluspart du temps on attendra un évènements
pour effectuer une action. Par exemple, nous allons déclencher une action
lors d'un clic sur un élément particulier. Pour faire cela on va avoir besoin
d'utiliser un écouteur d'évènement gràce à la méthode addEventListener.
Créer un écouter
element.addEventListener("Type d'évènement", callback)
// Par exemple pour détecter un clic sur un lien
element.addEventListener('click', function () {
window.alert('Vous avez cliqué sur le lien')
})

L'ensemble des évènements écoutables sont listés sur la documentation.

L'évènement
Le callback passé en second paramètre prend en paramètre l'évènement
(le type de la variable dépendra de l'évènement écouté).
// Par exemple pour détecter un clic sur un lien
element.addEventListener('click', function (e) {
e.preventDefault() // Annule l'évènement
e.stopPropagation() // Empèche l'évènement de remonter vers les
éléments parents
e.target // contient l'élément sur lequel on a cliqué
e.currentTarget // contient l'élément sur lequel on a greffé l'écouteur
})

Cet évènement peut aussi permettre d'obtenir plus d'informations suivant

les cas (la touche sur laquelle on a appuyé, la position de la souris...)

This
Lorsqu'un écouteur est appellé la variable this fera systématiquement
référence à l'élément sur lequel on écoute l'évènement (équivalent à
currentTarget).

Supprimer un évènement
Il est aussi possible de supprimer un écouteur d'évènement à l'aide de la
méthode removeEventListener. Cette méthode prendra les mêmes
paramètres que la méthode addEventListener.
var next = function () {
this.classList.add('red')
this.removeEventListener('click', next)
}
element.addEventListener('click', next)

Si vous commencez à faire des recherches en ligne sur le JavaScript il y a

de fortes chance que vous tombiez sur des questions concernant la
librairie jQuery. Cette librairie est extrèmement populaire, au point qu'il est
difficile de trouver un plugin qui ne l'utilise pas.

Je vous propose aujourd'hui de découvrir une librairie plutôt sympa

: Lodash. Lodash est une collection de fonctions utilitaires pour le
Javascript. Afin de ne pas "polluer" l'espace global la librairie crée une
variable _ qui va contenir toutes les méthodes proposées.

Pour connaitre l'ensemble des méthodes disponibles je vous invite à vous

rendre sur la documentation

Qu'est ce que jQuery ?

Comme son slogan l'indique jQuery est une librairie qui permet de
simplifier l'écriture de code JavaScript gràce à l'utilisation de nombreuses
méthodes.

Write less, do more

Par exemple si je souhaite écouter le clic sur plusieurs liens et changer la
couleur des liens
var elements = document.querySelectorAll('.tabs a')
for (var i = 0; i < elements.length; i++) {
var element = elements[i]
element.addEventListener('click', function (e) {
e.preventDefault()
alert('Ne me quitte pas !')
})
element.style.color = "#FF0000"
}

En utilisant jQuery ce code peut être simplifié :

$('.tabs a').click(function (e) {
e.preventDefault()
alert('Ne me quitte pas !')
}).css('color', '#FF0000')

L'autre point intéréssant concerne la compatibilité des navigateurs (oui

Internet Explorer je pense à toi ;)). L'ensemble des méthodes proposées
sont testées sur la pluspart des navigateurs modernes. SI vous voulez
supporter les dinosaures (Internet explorer 6 à 8) vous pouvez utiliser la
version version 1.12.

Vous n'en avez peut être pas besoin

Si vous n'êtes pas intéréssé par la compatibilité avec les anciens
navigateurs alors ne vous jettez pas forcément sur cette librairie. En effet,
le JavaScript côté navigateur s'est grandement simplifié et dans beaucoup
de cas maintenant le code "natif" est aussi court que le code avec jQuery.
Par exemple pour ajouter une class à un élément il fallait faire (IE9-) :
var cls = 'active'
var element = document.getElementsByClassName('#menu')
if (element.className.length == 0){
element.className = cls;
} else if (rows.className.indexOf(cls) < 0) {
element.className += ' ' + cls;
}

Ce que jQuery simplifie grandement

$('#menu').addClass('active')

Si on décide de ne supporter qu'Internet explorer 10+ on arrive à un code

qui est tout aussi simple.
document.querySelector('#menu').classList.add('active')
Donc avant de rajouter 90k de JavaScript dans votre application
réfléchissez bien à vos besoins.