Development Web : Front-End

JavaScript (JS) : Partie III

Mohammed KABBAJ
Avant de commencer

N ous volons créer un programme qui

permet à un vendeur de gérer son stock
facilement et avec UNE INTERFACE
 DOM
Dé nition

L e DOM, qui signi e Document Object

Model (c'est-à-dire "modèle d'objet de
document", en français), est une interface de
programmation qui est une représentation du
HTML d'une page web et qui permet
d'accéder aux éléments de cette page web
et de les modi er avec le langage
JavaScript.
fi
fi
fi
DOM
Syntax : sélection par TagName, ClasseName et Id

// document.getElementsByTagName(balise) : Retourne une liste avec tout les elements

de la même balise
var toutLesDiv = document.getElementsByTagName("div");

// document.getElementsByClassName(class) : Retourne une liste avec tout les elements

qui la même class
var toutLesClass = document.getElementsByClassName("ma_class");

// document.getElementById(id) : Retourne un seul element

var elementId = document.getElementById("mon_id")
DOM
Syntax : sélection avec querySelector et querySelectorAll

// Pour le querySelectorAll et querySelector nous utilisons "#" pour les Id et "." pour
les class

// document.querySelector(selector) : Retourne le premier élément sélectionné

var monElement1 = document.querySelector(".ma_class");
var monElement2 = document.querySelector("div.ma_class");
var monElement3 = document.querySelector("#mon_id");

// document.querySelectorAll(selector) : Retourne une liste avec tout les éléments

var maSelection1 = document.querySelectorAll(".ma_class");
var maSelection2 = document.querySelectorAll("div.ma_class");
var maSelection3 = document.querySelectorAll("#mon_id");
DOM
Syntax : Créer, Ajouter, Remplacer et Supprimer

// document.createElement(balise) : Permet de créer un nouveau element

var nouveauElement = document.createElement("div");

// appendChild(element) : Permet d'ajouter un nouveau element dans un autre element

elementPere.appendChild(nouveauElement);

//replaceChild(ancien,nouveau) : Permet de remplacer un ancien element par un nouveau

element
elementPere.replaceChild(ancienElement,nouveauElement);

//removeChild(element) : Permet de supprimer element

elementPere.removeChild(nouveauElement);
DOM
Syntax : Gestion des className

// classList : Retourne une liste avec tout les className dans un element
var listClass = element.classList

// classList.add(className) : Ajouter un className à un element

element.classList.add("nouveauClass");

// classList.replace(ancien,nouveau) : Remplacer un className par un autre

element.classList.replace("ancienclass","nouvelleClass");

// classList.remove(ancien,nouveau) : Supprimer un className

element.classList.remove("nouvelleClass");

// classList.contains(className) : Retourne 'true' si le className

exist sinon 'false'
element.classList.contains("maClass");
DOM
Syntax : Gestion des attribues

// setAttribute : permet d'ajouter un attribute à notre balise HTML

element.setAttribute('attributes','value');

// getAttribute : permet de retourner la valeur d'attribute

var value = element.getAttribute('attributes');

// removeAttribute : permet de supprimer un attribute à notre balise HTML

element.removeAttribute('attributes');

// hasAttribute : permet de verifier si un attribute exist

var hasAttribute = element.hasAttribute('attributes');
 Les Fonctions

N otre programme doit gérer plusieurs

tache
• Ajouter un produit
• Modi er un produit
• Supprimer un produit
• Calculer le gain
• ...
fi
 Les Fonctions
De nition

L es fonctions font partie des briques fondamentales de JavaScript. Une fonction est
une procédure JavaScript, un ensemble d'instructions effectuant une tâche ou calculant
une valeur. A n d'utiliser une fonction, il est nécessaire de l'avoir auparavant dé nie au
sein de la portée dans laquelle on souhaite l'appeler.
fi
fi
fi
Les Fonctions
Syntax : Déclaration

// declaration d'une fonction

function ma_fonction1(){
// le code js
}
// Exécution de la fonction
ma_fonction1()

// declaration d'une fonction avec des arguments ou des propriétés

function ma_fonction2(arguments1, arguments2){
// le code js
}
// Exécution de la fonction
ma_fonction2(arguments1, arguments2)

// declaration d'une fonction avec avec un ou plusieurs arguments initialiser

function ma_fonction3(arguments1, arguments2 = 0){
// le code js
}
// Exécution de la fonction
ma_fonction3(arguments1)

// declaration d'une fonction qui permet de retourner une valeur

function ma_fonction3(){
// le code js
return value;
}
// Exécution de la fonction
let data = ma_fonction3()
 Event
De nition

L es événements sont des actions ou des occurrences qui se produisent dans le

système que vous programmez et dont le système vous informe a n que vous puissiez
y répondre d'une manière ou d'une autre si vous le souhaitez. Par exemple, si
l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action
en af chant une boîte d'information. Dans cet article, nous allons discuter de quelques
concepts importants concernant les événements, et regarder comment ils fonctionnent
dans les navigateurs. Ce ne sera pas une étude exhaustive; mais seulement ce que
vous devez savoir à ce stade.

.
fi
fi
fi
 Event
De nition

J S à plusieurs Event voici quelque un :

• Click : déclencher une fonction au moment du click
• Change : déclencher une fonction si un élément HTML est changé
• Keyup : déclencher une fonction si une touche de clavier est cliquée
• Load : déclencher une fonction quand un element est bien chargé
Pour plus d'event voici un lien qui contient les tout : https://www.w3schools.com/jsref/
dom_obj_event.asp
fi
Event
Syntax

<div onclick="ma_fonction"></div>
<script>
function ma_fonction(){
//Mon Code JS
}
</script>
<div id="monDiv"></div>
<script>
document.getElementById('monDiv').addEventListener("click",()=>{
// Mon code js
})
</script>
<div id="monDiv2"></div>
<script>
document.getElementById('monDiv').onclick = ma_fonction2;
function ma_fonction2(){
//Mon Code JS
}
</script>