Js

JS
1
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
2
Les bases en JS
3
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 :
4
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
5
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>
6
Comment utiliser du JS dans une page HTML
7
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>
8
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');}
9
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
10
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.
10
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 */
11
Les types de base
Type de données :
boolean
number
string
object
function
12
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>
13
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>
14
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>
15
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>
16
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>
17
Méthodes des chaînes de caractères
18
charAt(int n) : renvoie du n ème caractère
18
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
18
toUpperCase() : conversion en MAJUSCULES
18
toLowerCase() : conversion en minuscules
18
indexOf(string souschaine, [int pos]) : renvoie l’indice de la 1ère occurence de
souschaine dans la chaîne
18
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
18
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
18
<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>
19
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>
20
Les type d'objets
Type d'objet :
Object
Date
Array
21
L'objet Object
Object correpond à l'objet générique en javascript.
Programmation fonctionnelle Programmation objet

variable propriété
fonction méthode
22
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>
23
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>
24
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
25
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>
26
Méthodes de l'objet Array
Mutateurs: modifient le tableau
27
push(elt) : ajoute à la fin du tableau l'élément elt
27
unshift(elt) : ajoute au début du tableau l'élément elt
27
pop() : supprime et retourne le dernier élément du tableau
27
shift() : supprime et retourne le premier élément du tableau
27
splice(int pos, int nb) : supprime et retourne nb éléments à partir de l'index pos
27
reverse(): renverse l'ordre des éléments du tableau
27
reverse(): renverse l'ordre des éléments du tableau
sort(): trie les éléments du tableau
27
Accesseurs: ne modifient pas le tableau
28
indexOf(elt) : retourne l'index de l'élément elt dans le tableau ou -1
28
lastIndexOf(elt) : retourne le dernier index de l'élément elt dans le tableau ou -1
28
join([string s]): concatène tous les éléments du tableau en une chaîne de caractères séparés par s
28
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
28
<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>
29
L'objet Math
Les propriétés et méthodes de l'objet Math sont statiques.
30
L'objet Math
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
30
L'objet Math
round(x) : renvoie l'arrondi d'un nombre
30
L'objet Math
ceil(x) : renvoie le plus petit entier supérieur ou égal à x
30
L'objet Math
floor(x) : renvoie le plus grand entier inférieur ou égal à x
30
L'objet Math
max(x,y) : renvoie la plus grande des valeurs de x et y
30
L'objet Math
min(x,y) : renvoie la plus petite des valeurs de x et y
30
L'objet Math
pow(x,y) : renvoie x à la puissance y
30
L'objet Math
pow(x,y) : renvoie x à la puissance y
random() : retourne un nombre pseudo-aléatoire compris entre 0 (inclus) et 1 (exclu)
30
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>
31
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>
32
Les opérateurs arithmétiques
+ addition
- soustraction
* multiplication
/ division
% modulo (reste de la division euclidienne)
** exponentielle (ES6)
-- décrément
++ incrément
33
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>
34
Structures de contrôle
structures conditionnelles
structures répétitives
35
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
}
36
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>
37
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
}
38
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>
39
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
40
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);
41
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>
42
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>
43
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>
44
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>
45
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>
46
Les événements en Javascript
Javascript peut interagir avec l'utilisateur grâce à des événements.
47
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>
48
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
49
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
50
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>
51
Modèle Objet de Document (DOM)
52
Représentation arborescente
le code html peut être représenté sous forme arborescente
53
Représentation globale
Javascript représente la page, l'onglet grâce à l'objet global window
54
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
55
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
56
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
57
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>
58
objet window (exemple)
<script>
var target = open('https://duck.com', 'target', 'resizable=yes,width=420px,height=420px');
// target.close();
</script>
59
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
60
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
61
objet document (exemple)
<input type="text" id="input">
<button onclick="document.getElementById('input').value = 'value';">button</button>
<button onclick="document.write('write')">write</button>
62
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)
63
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
64
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
65
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>
66
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>
67
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>
68
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
69
objet form (méthodes)
submit() : soumet le formulaire
reset() : ré-initialise le formulaire
70
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>
71
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
72
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
73
Ajouter un 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);
</script>
74
Voir un cookie
<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(getCookie("cookie"));
</script>
75
Supprimer un 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=/";
}
setCookie('cookie','value',-1);
</script>
76

Js

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Js

Transféré par

Droits d'auteur :

Formats disponibles

JS

Contenu du fichier js-file.js :

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

Programmation fonctionnelle Programmation objet

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

for (i = 0; i < tab.length; i++) {

Vous aimerez peut-être aussi