Javascript

JAVASCRIPT
Javascript
# Langage de programmation
# Améliorer l’interactivité du site web
# Exécution en réponse à des événements
# Extension du fichier .js
# Langage orienté objet
Navigateur
# Il est exécuté par le navigateur
=> dans le contexte d’une page web Page web
=>coté client
Javascript
Insérer du javascript
# Code javascript dans un fichier externe
# Code javascript dans le fichier html

# Code javascript dans le fichier html
<!DOCTYPE html> <!DOCTYPE html>

<html> <html>
<head> <head>
<script> </head>
// code javascript <body>
</script> …
</head> <script>
<body> // code javascript
… </script>
</body> </body>
</html> </html>
<!DOCTYPE html>
<html>
<body>
<div onclick="code javascript"></div>
</body>
</html>
# Code javascript dans un fichier externe
<!DOCTYPE html>
<html>
<head>
<script src="chemin vers le fichier/nom_du_fichier.js "></script>
</head>
<body>
…
</body>
</html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
…
<script src="chemin vers le fichier/nom_du_fichier.js"></script>
</body>
</html>
Placer le code JS dans la page
# Où insérer le script js ?
# Son emplacement a des conséquences sur l’exécution de la page.
# Le code HTML, JS, CSS est lu de haut en bas par le navigateur
# Si on vaut agir sur un élément, il faut que le navigateur connaisse la

structure du HTML
# Plus les scripts sont longs plus la page mettra du temps à s’afficher
# => Placer le script en fin de document HTML ( généralement avant la fin

de la balise body)
LE LANGAGE JAVASCRIPT
Instruction
# On sépare les instructions par des ; ou des sauts de lignes
instruction;
instruction
instruction;
instruction; instruction;
# Exemple d’instruction
# Declarer une variable
# Affecter une valeur à une variable
# Déclarer et affecter une valeur à une variable

Commentaire
# // si le commentaire est sur une ligne
# /* commentaire */ si le commentaire est sur plusieurs lignes

LES VARIABLES
Variable
# Un espace de stockage sur l’ordinateur
# Déclarer une variable : réserver un espace de stockage
# Affecter une valeur à une variable : stocker des données dans la

variable
Variable
# Nom d’une variable
# Caractères alphanumériques ( A-Z, a-z, 0-9)
# _
# $
# Ne peut pas commencer par un chiffre
# Ne peut pas être des mots clés utilisés par Javascript ( let, function …)
Variable
# Déclarer une variable
let ma_variable;
let ma_variable2
let ma_variable3, mavariable4
let a ;
let nom, prenom;
Variable
# Javascript sensible à la casse
let maVariable ;
3 variables diﬀérentes
let mavariable ;
let MAVARIABLE ;
Variable
# Affectation d’une variable (donner une valeur à une variable)
let $nom_variable = VALEUR;
let nom_variable2;
nom_variable2 = VALEUR;
let nom = ‘Dupond’, prenom = ‘Jean’, adresse;

let age_majeur = age = 18;
let majeur = true;
Exemple
# let nom;
# let prenom = ‘’dasha’’ ;
# let age = 25
LES TYPES DE
VARIABLES
Javascript langage faiblement typé
Connaitre le type de la variable
# typeof
Les types de variables
# Numérique (number) : nombre
# Chaine de caractères (string) : texte
# Booléens ( boolean): true ou false
# Tableau (array)
# …
Numérique
# Écriture entier : number = 5;
# Ecriture décimal : number = 5.5;
# Ecriture hexadécimal : number = 0x391;
# Ecriture scientifique : number = 3.65e+5;

Opérateur arithmétiques
Chaine de caractères
# Entre guillemet double : texte = "mon texte" ;
# Si la chaine de caractère contient " on le préfixe avec \
# texte = " \"ceci est un guillemet "
# Entre guillemet simple : texte = ‘mon texte’;
# Si la chaine de caractère contient ‘ on le préfixe avec \
# texte = ‘ \’ceci est une apostrophe ‘
let texte = ‘ c\’est mon premier … ’

Concaténation
# Chaînes de caractères mises bout à bout
# let mavariable = ‘He’ + ‘L’+’Lo’; => ‘HeLLo’
Let nom = «Bernard»

Let prenom = «jean pierre»
Let nom_prenom = nom + « » + prenom ===> «Bernard jean pierre»
Conversion de type
# parseInt()
# La fonction parseInt() analyse une chaîne de caractère fournie en

argument et renvoie un entier
Tableau
# Déclarer et affecter un tableau
Let mon_tableau =[12,15,7];
mon_tableau_2 =[12,’hello’,157, true];
ìndice 0 1 2 3
Donnée 12 ‘hello’ 157 true

Tableau
# Accéder à un élément du tableau
mon_tableau[indice];
mon_tableau_2[0] => 12
mon_tableau_2[2] => 157
mon_tableau_2[3] => true
Les indices commencent à 0 jusqu’a la taille -1 du tableau
Indice 0 1 2 3 … N (= taille -1)
Taille d’un tableau = nombre d’élément dans le tableau

Tableau
# Parcourir un tableau
let mon_tableau =[12,15,7];
for(i=0;i<mon_tableau.lenght; i++){
mon_tableau[i]
}
• ++ : ajouter 1 : incrémentation
• - - : soustraire 1 : décrémentation
Objet
# Objet est une collection de propriétés et de méthodes
# Propriété = caractéristique
# Méthode = fonction
voiture.marque
Objet
# Pour accéder à une propriété d’un objet
objet.propriete
# Pour appeler une méthode d’un objet
objet.methode(argument)
LES CONDITIONS
Condition
# Sorte de test permettant de vérifier ou non une expression
Opérateurs de comparaison
# Comparer des valeurs
La condition if
if(condition){
// si la condition est vraie alors j’exécute les instructions entre accolades
instruction_1;
instruction_2;
}
instruction_3
var age = 18;
if(age == 18){
// instructions
}
1. instruction_0;
2. if(2 != 2){
3. // si la condition est vraie alors j’exécute les instructions entre accolades
4. instruction_1;
5. instruction_2;
6. }
7. instruction_3 ;
condition == true condition == false
let a = 2
1 let b = 5 1
2 ( 2==2 => vrai) let c 2 ( 2 !=2 ==> false)
4 let d = 2 7
5
7 a==b ==> non
a==d ==> oui
1. let a = 2, b = 2
2. if(a == b){
4. instruction_1;
5. instruction_2;
6. }
7. instruction_3 ;
1
La condition if else
if(condition){
// si la condition est vraie alors j’exécute les instructions entre accolades
instruction_1;
instruction_2;
}else{
// si la condition est fausse alors j’exécute les instructions entre accolades
instruction_3
}
instruction_4
var age = 18;
if(age == 18){
// instructions
}else if(age<18){
// instructions
}else{
// instructions
}
1. instruction_0;
2. if(condition){
4. instruction_1;
5. instruction_2;
6. }
7. instruction_3 ;
1. instruction_0;
2. if(condition){
4. instruction_1;
5. instruction_2;
6. }else{
7. instruction_3
8. instruction_4
9. }
10. instruction_5 ;
# Let age_utilisateur => demander âge a l’utilisateur
# if(age_utilisateur < 18){
# Afficher (« tu es mineur)
# }else{
# Afficher (« tu es majeur)
# }
# // age_utilisateur = 35 # if( age_utilisateur < 18){
# Affiche ( mineur)
# if( age_utilisateur < 18){
# }
# Affiche ( mineur)
# if(age_utilisateur == 18){
# }else if(age_utilisateur == 18){
# Affiche (Tu as 18 ans)
# Affiche (Tu as 18 ans)
# }
# }else{
# if(age_utilisteur > 18) {
# Affiche(« majeur)
# Affiche(« majeur)
# }
# }
LES BOUCLES
Une boucle
# Une boucle est une structure conditionnelle qui se répète jusqu’à
un point d’arrêt
# Itération = à chaque fois que la boucle se répète

La boucle while
while(condition){
// tant que la condition est vraie, on exécute les instructions
instruction_1;
instruction_2;
}
instruction_3;
1. instruction_0
2. let mavariable = 2
3. while(mavariable > 0){
4. // tant que la condition est vraie, on exécute les instructions
5. instruction_1;
6. instruction_2;
7. mavariable = mavariable + 1
8. }
9. instruction_3;
1. instruction_0
3. while(mavariable > 4){
5. instruction_1;
6. instruction_2;
8. }
9. instruction_3;
1. instruction_0
3. while(mavariable < 4){
5. instruction_1;
6. instruction_2;
8. }
9. instruction_3;
Boucle for
for(initialisation;condition; incrémentation){
// code
}
for(i=0; i<10;i=i+1){
//instructions
}
1.let mon_tableau =[12,15,7];
2.for(i=0;i<3; i=i+1){
3. afficher(mon_tableau[i])
4. }
5. instruction_2
ìndice 0 1 2
Donnée 12 15 7
LES FONCTIONS
Fonction
# Une fonction est un sous-programme qui effectue une
tâche ou un calcul et qui permet de renvoyer un résultat.
Dans la plupart des cas, elle contient des paramètres.
Des paramètres sont des informations qui seront
récupéré par la fonction et qui serviront à l'exécution de
la tâche ou du calcul.
# Bloc de code qui aura un nom et qui pourra être appelé

plusieurs fois
Fonction sans argument
# Déclaration d’une fonction sans argument
Exemple
function nom_fonction(){ function saluer(){

// instructions; console.log("Bonjour") ;
} }
# Appeler une fonction
nom_fonction(); saluer();
Fonction avec argument
# Déclaration d’une fonction avec argument
Exemple
function saluer(prenom){
function nom_fonction(arg1, ,argN){ // exemple d’instruction
// instructions; //alert(« Bonjour " +prenom) ;
}
}
Bonjour <valeur de prenom>

# Appeler une fonction
saluer("Jihane ");
saluer(" Tom ");
nom_fonction(param1,… ,paramN); let nom = "Dasha"

saluer(nom) === saluer("Dasha")
Bonjour Jihane
Bonjour Tom
Retourner les données d’une fonction
Exemple
function nom_fonction(arg1, ,argN){ function saluer(prenom){

return " Bonjour " +prenom ;
// instructions; return " Bonjour " +prenom ; // code mort
return result; }
}
Let s2
let s1 =saluer("Jihane" );
s2 = saluer("Pauline")
let phrase = nom_fonction(param1,… ,paramN);
console.log(s1);
function saluer(prenom){
Let resultat ;
if(prenom == « Jihane » ){
résultat = " Bonjour " +prenom ;
}
else{
résultat = prenom + prenom
}
return résultat;
}
Exemple d’exécution
1. function additionner(a,b,c){ 1. function additionner(a,b,c){
2. return a+b+c ; 2. return a+b+c ;
3. } 3. }
4. let result;
4. if( 1 == 1 ){ 5. if( 1 == 1 ){
5. instruction_1 6. additionner(1,2,3)
6. }else{ 7. }else{
7. instruction_2 8. result = additionner(4,5,7)
8. } 9. }
9.instruction_4 10.instruction_4
JS DANS LE NAVIGATEUR
alert()
prompt()
Console
# Pour afficher les alertes dans la console du navigateur
console.log("ceci est une alerte de type log");

console.info("ceci est une alerte de type info");
console.debug("ceci est une alerte de type debug");
console.error("ceci est une alerte de type error");
console.warn("ceci est une alerte de type warn");
document.write
Page web
document.write("Affichage de 5 nombres")
INTERAGIR AVEC
L'INTERFACE UTILISATEUR
Les événements
# Actions se produisent dans le système que vous programmez et
dont le système vous informe afin que vous puissiez y répondre
d'une manière ou d'une autre.
# Permettent de déclencher une fonction selon qu’une action s’est

produite ou non
# Exemple :
# Faire apparaître une popup au survole d’une zone de la fenêtre

Évènement
Évènement
(onmouseout)
Évènement
Evénements & JS
# 3 manières
# Attributs HTML de type évènement
# Propriétés JavaScript liées aux évènements
# Méthode addEventListener
Attributs HTML de type évènement
# Cette façon de faire est déconseillée mais elle est simple à mettre
en place pour un débutant
<element evenement="nom_fonction()">
Page HTML :
Element qui à un attribut événement correspondant à l’événement que l’on veut

capturer
On met comme valeur de l’attribut le nom de la fonction js ( qui fera un traitement)

<input type="button" onclick="BoutonClick()" value="MON BOUTON" />
Propriétés JavaScript liées aux évènements ;
1 1. récupérer l’élément
#
2 2. Appeler l’événement sur l’element ( onclick, …)

#
3a
# 3 Lui donner la référence de la fonction qui va être appelée au moment du click
3b
# 3 ou créer une fonction anonyme
2 3a
2
3b
Méthode addEventListener
1 1. récupérer l’élément
#
2 2. Appeler la méthode addEventListener sur l’element

#
3a
# 3 Lui passer en paramètre : le nom de l’événement et la référence de la fonction qui va être appelée
3b
# 3 Lui passer en paramètre : le nom de l’événement et une fonction anonyme
1
2
3a
2
3b
Evénements & JS
# Cette façon de faire est déconseillé mais elle est simple à mettre
en place pour un débutant
function nom_fonction(){
// code js;
}
Page JS :
Je crée la fonction avec le traitement
function BoutonClick() {
alert("Tu as cliqué sur le bouton");
}
Evénements & JS

<input type="button" onclick="BoutonClick()" value="MON BOUTON" />
function BoutonClick() {
alert("Tu as cliqué sur le bouton");
}
Evénements & JS

<input type="button" onclick="BoutonClick(109) " value="MON BOUTON" />
function BoutonClick(a) {
alert(" la valeur de a = "+a );
}
DOM
DOM
# Document Object Model
# C’est une recommandation du W3C qui décrit une interface

indépendante de tout langage de programmation et de toute
plate-forme, permettant à des programmes informatiques et à des
scripts d’accéder ou de mettre à jour le contenu, la structure ou le
style de documents XML.
DOM
# Création : par le navigateur lors du chargement d’une page web.
# Objectif : structurer, accéder et mettre à jour tous les éléments

d’un document HTML.
# Principe : considère tous les éléments HTML comme des objets

(propriétés & méthodes)
Objet JS
# Un objet est un élément possédant une collection de propriétés et
de méthodes
# Noeud est un objet JS

Noeud
# Tout élément d’un document HTML est un noeud :
# Le document entier est un noeud document
# Chaque balise est un noeud élément ( p, li, div …)
# Chaque attribut est un noeud attribut ( href, src …)
# Le texte entre balise est un noeud text
# …
Hiérarchisation des nœuds
# Relation parent/enfant
# Parent : nœud qui contient des nœuds
# Enfant : nœud qui est contenu dans un nœud
<p> Ceci est un texte</p>

P Parent
Ceci est un texte Enfant

Hiérarchisation des nœuds
# Page HTML = arborescence ( arbre du document)
# Les noeuds ne sont pas de même type
Document
<html>
<head> HTML
<title>Page Title</title>
<link src=a.css></link>
</head> Head Body
<body>
<h1>Titre de niveau 1</h1>

<div>Ceci est un texte</div> Title link H1 Div
</body>
</html>
Page Title Titre de niveau 1 Ceci est un texte
Objet document
# Il représente la page web ( la balise html)
# Permet d’accéder aux éléments HTML (et les modifier)
# Plusieurs méthodes pour accéder aux éléments
# getElementById()
# getElementsByTagName()
# getElementsByClassName()
# querySelector()
# querySelectorAll()
Accéder aux éléments
# Méthode javascript getElementById recherche dans le document
HTML un noeud unique qui a l’id spécifié en paramètre
<html>
<head>
<title>Page Title</title>
</head> document.getElementById("div1")
<body>
<h1>Titre de niveau 1</h1>

<div id=« div1 »>Ceci est une div</div>
</body>
</html> Renvoi le noeud « div »
let div1 = document.getElementById("div1")

getElementsByTagName
# getElementsByTagName(« balise ») recherche dans le document
HTML les éléments qui sont de type spécifié en paramètre et les
renvoie sous forme de tableau
# Pour accéder à un element : element[indice]
Let elements = document.getElementsByTagName("div");

elements[0]; => 1er element
elements[1]; => 2eme element
elements[elements.length -1]; => dernier element
// interdit => elements.innerText = "test"
elements[3].innerText = "test"
for(i = 0; i< elements.length; i++){

let case_c = elements[i];
case_c.innerText = "test"
// traitement, code …
//result.innerHTML += "l'element "+elements[i].id+" est de type div";
getElementsByClassName
# getElementsByClassName(«class »)
# recherche dans le document HTML les éléments qui ont la classe

spécifiée en paramètre
# renvoie les résultats sous forme de tableau
# Pour accéder à un element : element[indice]

let a = document.getElementById(« div »)
let elements = document.getElementsByClassName("b_yellow");
for( i = 0; i< elements.length; i++){

}
querySelector
# querySelector(« selecteur ») : sélectionne le premier élément
spécifié en paramètre
element = document.querySelector(« .container .t_green »);
element.syle.color = « red »
result.innerHTML += " <br> voici le 1er element identifié par le selecteur

querySelectorAll
# querySelectorAll(« selecteur ») : Sélectionne tous les éléments
spécifiés par le paramètre
elements = document.querySelectorAll("#container .t_green");
for( i = 0; i< elements.length; i++){

}
Accéder à un noeud enfant
# firstChild : accède au premier enfant d’un noeud
# lastChild : accède au dernier enfant d’un noeud
# firstElementChild : accède au premier enfant d’un noeud de type Element
# lastElementChild : accède au dernier enfant d’un noeud de type Element
element = document.getElementById("container");
result.innerHTML = " L'element container a "+element.childElementCount+" enfants";
result.innerHTML += " <br> le premier est "+element.firstElementChild.nodeName;
result.innerHTML += " <br> le dernier est "+element.lastElementChild.nodeName;
result.innerHTML += " <br> le premier est "+element.firstChild.nodeName;

result.innerHTML += " <br> le dernier est "+element.lastChild.nodeName;
Accéder à un noeud enfant
# childNodes : renvoie une liste de noeuds enfants de l’élément
# children : renvoie une liste de noeuds enfants de type Elément
var element = document.getElementById("container");
element.childNodes :
NodeList(9) [ #text, div#enfant_1.t_green, #text, div#enfant_2.t_green.b_yellow,

#text, div#enfant_3.t_pink.b_yellow, #text, a#enfant_4, #text ]
element.children :
HTMLCollection { 0: div#enfant_1.t_green, 1: div#enfant_2.t_green.b_yellow, 2:

div#enfant_3.t_pink.b_yellow, 3: a#enfant_4, length: 4, … }
Accéder à un noeud parent
# parentNode : renvoie le parent
element = document.querySelector("#enfant_4");
result.innerHTML = element.parentNode.id;
Accéder à un noeud suivant / précédent
# nextSibling :accéder au noeud suivant
# previousSibling : accéder au noeud précédent

Récupérer / Modifier un attribut d’un noeud
# <node>.getAttribute(« nom de l’attribut »)
# <node>.setAttribute(« nom de l’attribut », « valeur de l’attribut »)
result.innerHTML += "<br> avant le lien est "+element.getAttribute("href");

element.setAttribute("href","www.yahoo.fr");
result.innerHTML += "<br> apres le lien est "+element.getAttribute("href");
result.innerHTML += "<br> avant le lien est "+element.href;

element.href = "www.yahoo.fr";
result.innerHTML += "<br> apres le lien est "+element.href;
<h1 class=mon_titre> Titre </h1>
//let titre = document.getElementsByTagName(« h1 »)

let titre = document.getElementsByClassName(« mon_titre »)
titre[0].setAttribute(« id » , « id_h1 »)
titre[0].setAttribute(« lang », »fr »)
<h1 class=mon_titre id=« id_h1 » lang=« fr »> Titre </h1>

Création d’un noeud
# 1. Récupérer le parent du noeud qu’on veut créer
# document.getElementById(« id du parent »)
# 2. Créer le noeud ( avec du contenu)
# document.createElement(« balise html » )
# 3. Lier le parent au nouveau noeud
# <leparent>.appendChild( <enfant >)
let parent = document.getElementById("divPrincipal")

let new_element = document.createElement("p");
new_element.innerText = "Quis aute iure reprehenderit in voluptate velit esse.";
parent.appendChild(new_element);
Suppression d’un noeud
# 1. Récupérer le parent du noeud qu’on veut supprimer
# Parent = document.getElementById(« id »);
# 2. Récupérer le noeud qu’on veut supprimer
# enfant = document.getElementById(« id_enfant »); <div id=« div1 »>

<h1 id=« h1 »>Titre de niveau
# 3. Faire la suppression
1</h1>
</div>
# parent.removeChild(enfant);
let divP = document.getElementById(«div1 »)

let h1E = document.getElementById(«h1 »)
divP.removeChild(h1E)
Remplacer un noeud
# 1. Récupérer le parent du noeud
# Parent = document.getElementById(« id »); <div id=div1>

# 2. Créer le nouveau noeud
<h4 id=h4> titre2 </h4>
<h3> h3 </h3>
# new_node = document.createElement(« balise html » )
</div>
# 3. Récupérer l’enfant qui va être remplacé
# old_node = document.getElementById(« h4 »)
# 4. Remplacer le noeud
# parent.replaceChild(new_node, old_node);
let divP = document.getElementById(«div1 ») // récupérer le parent

let new_node = document.createElement(« h2 » ) // créer le nouvel element
let h4 = document.getElementById(« h4 ») // récupérer l’element à remplacer
divP.replaceChild(new_node,h4) // faire le remplacement
<div id=« div1 »>
<h2></h2>
<h3> h3 </h3>
</div>
DOM & javascript
# La propriété Element.innerHTML
# affiche tout le contenu de l’élément ciblé (texte, balise …)
# Modifie le contenu de l’élément ciblé
let titre = document.getElementById("id_h1")

document.write(titre.innerHTML)
titre.innerHTML = "nouveau titre <span> hello </span>"
document.write(titre.innerHTML)
DOM & javascript
# La propriété Element.innerText
# affiche que le contenu textuel
# Modifie le contenu de l’élément ciblé

document.write(titre.innerText)
titre.innerText = "nouveau titre"
document.write(titre.innerText)
Propriété d’un noeud
# Pour accéder à une propriété d’un noeud :
noeud.propriété
<a href="www.google.fr" id="lien1" > Cliquer ici </a>
var element = document.getElementById("lien1");

alert(element.href)
// sauf class, il faut utiliser className car le mot class est un mot-clé réservé en JS
# Pour modifier une propriété d’un noeud :
noeud.propriété = «nouvelle proprieté »
var element = document.getElementById(« lien1 »);

element.href = "www.yahoo.fr"
<a href=« www.yahoo.fr » id="lien1" > Cliquer ici </a>

# Pour accéder au style d’un noeud :
noeud.style.<NOM_DU_STYLE>
Let element = document.getElementById(« lien1 »);

alert(element.style.color)
# Pour modifier le style d’un noeud :
noeud.style.<NOM_DU_STYLE> = <VALEUR>
var element = document.getElementById("lien1");

element.style.color = "blue"
alert(element.style.color)
Pour changer la classe d’un noeud : element.className = « nom de la classe »

Exemple
<div id=div1> </div>
Let enfant = document.getElementById('div1');

enfant.innerHTML = "<h1>titre de niveau 1</h1>";
enfant.style.color = "green";
enfant.style.fontSize="12px";
Classe css d’un element
noeud.className
# Pour accéder a la classe d’un noeud :

alert(titre.className)
# Pour modifier la classe d’un noeud :

titre.className = "green"
Les Classes css d’un element
# retourne une collection de classe de l'élément
noeud.classList
# Pour ajouter une classe à un noeud : add

titre.classList.add("blue")
# Pour supprimer une classe à un noeud : Remove

titre.classList.remove("blue")
# Si la classe est présente : elle est supprimée, et si elle n’est pas présente elle est rajoutée : toggle

titre.classList.toggle("blue")
# Verifier si la classe existe dans un noeud
if(titre.classList.contains(« blue »)){
//
}else{
//
}

Javascript

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

Javascript

Transféré par

Droits d'auteur :

Formats disponibles

JAVASCRIPT

# Améliorer l’interactivité du site web

# Exécution en réponse à des événements

# Extension du fichier .js

# Langage orienté objet

# Code javascript dans le fichier html

<!DOCTYPE html> <!DOCTYPE html>

# Son emplacement a des conséquences sur l’exécution de la page.

# Le code HTML, JS, CSS est lu de haut en bas par le navigateur

# Si on vaut agir sur un élément, il faut que le navigateur connaisse la

# => Placer le script en fin de document HTML ( généralement avant la fin

# Declarer une variable

# Affecter une valeur à une variable

# Déclarer et affecter une valeur à une variable

# /* commentaire */ si le commentaire est sur plusieurs lignes

# Déclarer une variable : réserver un espace de stockage

# Affecter une valeur à une variable : stocker des données dans la

# Caractères alphanumériques ( A-Z, a-z, 0-9)

# Ne peut pas commencer par un chiffre

let $nom_variable = VALEUR;

let nom = ‘Dupond’, prenom = ‘Jean’, adresse;

# let prenom = ‘’dasha’’ ;

# Chaine de caractères (string) : texte

# Booléens ( boolean): true ou false

# Ecriture décimal : number = 5.5;

# Ecriture hexadécimal : number = 0x391;

# Ecriture scientifique : number = 3.65e+5;

# Si la chaine de caractère contient " on le préfixe avec \

# texte = " \"ceci est un guillemet "

# Entre guillemet simple : texte = ‘mon texte’;

# Si la chaine de caractère contient ‘ on le préfixe avec \

# texte = ‘ \’ceci est une apostrophe ‘

let texte = ‘ c\’est mon premier … ’

# let mavariable = ‘He’ + ‘L’+’Lo’; => ‘HeLLo’

Let nom = «Bernard»

# La fonction parseInt() analyse une chaîne de caractère fournie en

Let mon_tableau =[12,15,7];

mon_tableau_2 =[12,’hello’,157, true];

Donnée 12 ‘hello’ 157 true

Les indices commencent à 0 jusqu’a la taille -1 du tableau

Indice 0 1 2 3 … N (= taille -1)

Taille d’un tableau = nombre d’élément dans le tableau

let mon_tableau =[12,15,7];

# Pour appeler une méthode d’un objet

var age = 18;

condition == true condition == false

var age = 18;

# if(age_utilisateur < 18){

# Afficher (« tu es mineur)

# Afficher (« tu es majeur)

# // age_utilisateur = 35 # if( age_utilisateur < 18){

# Itération = à chaque fois que la boucle se répète

# Bloc de code qui aura un nom et qui pourra être appelé

function nom_fonction(){ function saluer(){

# Appeler une fonction

Bonjour <valeur de prenom>

nom_fonction(param1,… ,paramN); let nom = "Dasha"

function nom_fonction(arg1, ,argN){ function saluer(prenom){

console.log("ceci est une alerte de type log");

# Permettent de déclencher une fonction selon qu’une action s’est

# Faire apparaître une popup au survole d’une zone de la fenêtre

# Attributs HTML de type évènement

# Propriétés JavaScript liées aux évènements