[Go to site: main page, start]
Scribd
Importer
3 vues57 pages

Cours5 JavaScript

Ce document présente une introduction au langage JavaScript avec un accent sur la manipulation du DOM (Document Object Model) en HTML. Il couvre les méthodes de sélection d'éléments, la modification de leurs propriétés, ainsi que la création et la manipulation d'éléments dans une page web. Des exemples pratiques illustrent comment utiliser JavaScript pour interagir avec le DOM et gérer des événements.

Transféré par

yousrasenouci668
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
3 vues57 pages

Cours5 JavaScript

Ce document présente une introduction au langage JavaScript avec un accent sur la manipulation du DOM (Document Object Model) en HTML. Il couvre les méthodes de sélection d'éléments, la modification de leurs propriétés, ainsi que la création et la manipulation d'éléments dans une page web. Des exemples pratiques illustrent comment utiliser JavaScript pour interagir avec le DOM et gérer des événements.

Transféré par

yousrasenouci668
Copyright
© All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

3ème Année Ingénieur Informatique

Programmation WEB

Introduction au langage JavaScript

Badr Benmammar
[Link]@[Link]
Plan
 Présentation du DOM HTML
 Structure du DOM HTML
 Sélectionner les éléments du DOM
 [Link]("id")
 [Link]("balise")
 [Link]("classe")
 [Link]("name")
 Modifier les paramètres d’un élément
 Créer et manipuler des éléments
 createElement
 appendChild
 removeChild
 replaceChild
 before
 after
2
Présentation du DOM HTML
 Quand un navigateur charge une page HTML, il analyse le code et
construit une représentation en forme d’arbre appelée DOM
(Document Object Model).

 Chaque balise HTML devient un nœud dans cet arbre.

3
Présentation du DOM HTML
 Quand un navigateur charge une page HTML, il analyse le code et
construit une représentation en forme d’arbre appelée DOM
(Document Object Model).

 Chaque balise HTML devient un nœud dans cet arbre.

 Le DOM est un outil qui donne à JavaScript la possibilité de manipuler


les éléments d’une page HTML.
 Sélectionner un élément HTML spécifique. Une fois sélectionné,
on peut accéder à ses propriétés et les modifier.
 Naviguer dans le DOM : se déplacer entre les éléments (parent,
enfant, voisin).
 Créer, insérer, supprimer, modifier des éléments dans le DOM.
 Écouter des évènements produits par des éléments dans le DOM.

4
Structure du DOM HTML
 Le DOM organise les éléments dans une structure arborescente :

 Document : le nœud racine de l'arbre DOM, représentant la page


entière.

 Éléments : les balises HTML (<html>, <head>, <body>, etc.)


sont représentées comme des nœuds.

 Attributs : les attributs des éléments HTML, comme id, class,


src, etc., sont également accessibles dans le DOM.

 Texte : les nœuds de texte représentent le contenu à l'intérieur


des balises.

5
Structure du DOM HTML
<!DOCTYPE html>
<html>
<head>
document
……
</head>
<body>
html <h1 id="titre">Bonjour, DOM !</h1>
<p class="texte">Ceci est un paragraphe.</p>
</body>
head body
</html>

h1 p

id text class text

6
Sélectionner les éléments du DOM

 [Link]("id")
 Retourne le nœud (unique) dont l’identifiant est id.

7
Sélectionner les éléments du DOM

 [Link]("id")
 Retourne le nœud (unique) dont l’identifiant est id.

 [Link]("balise")
 Retourne les nœuds dont la balise est balise.

8
Sélectionner les éléments du DOM

 [Link]("id")
 Retourne le nœud (unique) dont l’identifiant est id.

 [Link]("balise")
 Retourne les nœuds dont la balise est balise.

 [Link]("classe")
 Retourne les nœuds dont la classe est classe.

9
Sélectionner les éléments du DOM

 [Link]("id")
 Retourne le nœud (unique) dont l’identifiant est id.

 [Link]("balise")
 Retourne les nœuds dont la balise est balise.

 [Link]("classe")
 Retourne les nœuds dont la classe est classe.

 [Link]("name")
 Retourne les nœuds ayant l’attribut name égal à "name".

10
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

11
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

 Quelques propriétés :
 textContent : est utilisé pour récupérer ou modifier le texte d’un
élément HTML.

12
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur

 Quelques propriétés :
 textContent : est utilisé pour récupérer ou modifier le texte d’un
élément HTML.
<!DOCTYPE html>
<html>
<body>
<p id="1">Bonjour</p>
<button le texte</button>
</body>
</html>

13
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

 Quelques propriétés :
 textContent : est utilisé pour récupérer ou modifier le texte d’un
élément HTML.
<!DOCTYPE html>
<html>
<body>
<p id="1">Bonjour</p>
<button le texte</button>
<script>
function changerTexte() {
[Link]("1").textContent = "Bienvenue";
}
</script>
</body>
14
</html>
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

 Quelques propriétés :
 textContent : est utilisé pour récupérer ou modifier le texte d’un
élément HTML.

15
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

 Quelques propriétés :

 innerText : pareil que textContent sauf qu’elle tient compte du style


CSS et ne renvoie que le texte réellement visible à l’utilisateur.

16
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

 Quelques propriétés :

 innerText : pareil que textContent sauf qu’elle tient compte du style


CSS et ne renvoie que le texte réellement visible à l’utilisateur.

masquer un élément
<div id="id">Texte visible <span style="display:none;">Texte caché</span></div>

17
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

 Quelques propriétés :

 innerText : pareil que textContent sauf qu’elle tient compte du style


CSS et ne renvoie que le texte réellement visible à l’utilisateur.

<div id="id">Texte visible <span style="display:none;">Texte caché</span></div>


<script>
[Link]([Link]("id").innerText); // Affiche : "Texte visible"  tient
compte du CSS
[Link]([Link]("id").textContent); // Affiche : "Texte visible Texte
caché"  ignore le CSS
</script>

18
Modifier les paramètres d’un élément
 [Link]("id").propriété=valeur;

 Quelques propriétés :

 value : la valeur actuelle d’un élément de formulaire HTML (comme


un champ de saisie <input>).

19
Modifier les paramètres d’un élément
<!DOCTYPE html>
<html>
<body>
<input id="nom">
<button > <p id="resultat"></p>
</body>
</html>

20
Modifier les paramètres d’un élément
<!DOCTYPE html>
<html>
<body>
<input id="nom">
<button > <p id="resultat"></p>
</body>
</html>

21
Modifier les paramètres d’un élément
<!DOCTYPE html>
<html>
<body>
<input id="nom">
<button > <p id="resultat"></p>
<script>
function afficherValeur() {
let valeur = [Link]("nom").value;
[Link]("resultat").textContent = "Vous avez saisi : " +
valeur;
}
</script>
</body>
</html>

22
Modifier les paramètres d’un élément
 Méthode : [Link]("id_element").propriété=valeur

 Quelques propriétés :
 [Link] : la couleur du texte.
 [Link] : la couleur de la bordure.
 [Link] : le style de la bordure.
 [Link] : la couleur du fond.
 [Link] : la largeur de l’élément.
 [Link] : la hauteur de l’élément.
 [Link] : la police du texte.
 [Link] : l’alignement du texte.
 innerHTML: retourne le code HTML du contenu de l’élément.

23
24
25
26
27
28
29
Création du formulaire

30
Création du formulaire

input id = pwd1

input id = pwd2

label id = message
td
input id = valider
id = colonne

Utilisation de 5 IDs

31
<table> Exécute le code à chaque modification
instantanée du champ.
<tr>
<td><label><b>Mot de passe</b></label></td>
<td><input type="password" id="pwd1" ></tr>
<tr>
<td><label><b>Retapez le mot de passe</b></label></td>
<td><input type="password" id="pwd2" ></tr>
<tr>
<td colspan="2" align="center" style="border-style: solid;" id="colonne">
<label id="message">Validation de mots de passe</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Validez" disabled="true" id="valider">
</td>
</tr>
Utilisation de 5 IDs 32
</table>
Modifier les paramètres d’un élément
<script>
function verification() {
if([Link]("pwd1").value===[Link]("pwd2").value){

}
else{

}
}
</script>
33
Modifier les paramètres d’un élément
<script>
function verification() {
if([Link]("pwd1").value===[Link]("pwd2").value){

== : égalité avec conversion


5 == "5"  true
} != : différence avec conversion
else{ 5 != "5"  false

=== : égalité stricte


5 === "5"  false
!== : différence stricte
} 5 !== "5"  true
}
</script>
34
Modifier les paramètres d’un élément
<script>
function verification() {
if([Link]("pwd1").value===[Link]("pwd2").value){
[Link]("message").textContent='Mots de passes identiques';
[Link]("message").[Link]='green';
[Link]("colonne").[Link]='green';
[Link]("valider").disabled=false; // Activer le bouton
}
else{

}
}
</script>
35
Modifier les paramètres d’un élément
<script>

}
else{
[Link]("message").textContent='Erreur de mots de passe';
[Link]("message").[Link]='red';
[Link]("colonne").[Link]='red';
[Link]("valider").disabled=true; // Désactiver le bouton
}
}
</script>
36
Modifier les paramètres d’un élément
<script>
function verification() {
if([Link]("pwd1").value===[Link]("pwd2").value){
[Link]("message").textContent='Mots de passes identiques';
[Link]("message").[Link]='green';
[Link]("colonne").[Link]='green';
[Link]("valider").disabled=false; // Activer le bouton
}
else{
[Link]("message").textContent='Erreur de mots de passe';
[Link]("message").[Link]='red';
[Link]("colonne").[Link]='red';
[Link]("valider").disabled=true; // Désactiver le bouton
}
}
</script>
37
38
innerHTM
<body>
<div id="1">
<p>Paragraphe 1</p> retourne le code HTML du
<p>Paragraphe 2</p> contenu de l’élément
</div>
<script>
alert([Link]("1").innerHTML);
</script>
</body

39
innerHTM

40
innerHTM

Ajouter une zones de texte


<input type="text">

41
innerHTM

<body>
<fieldset id="1">
<legend>&Eacute;tudiants :</legend>
<input type="text"> <br>
</fieldset>
<input type="button" value="Ajouter un autre &eacute;tudiant" ></body>

42
innerHTM

<body>
<fieldset id="1">
<legend>&Eacute;tudiants :</legend>
<input type="text"> <br>
</fieldset>
<input type="button" value="Ajouter un autre &eacute;tudiant" ></body>

<script>
function ajouter() {
var b = [Link]("1");
[Link] += '<br><input type="text"><br>';
}
</script>

43
innerHTM

44
innerHTM

+
45
innerHTM

46
innerHTM
<body>
<form>
<fieldset id="1">
Souhaitez-vous vous abonner à notre cha&icirc;ne TV ?
<input type="radio" name="abonnement" value="Oui" Oui
<input type="radio" name="abonnement" value="Non" Non
</fieldset>
<br>
<fieldset id="2">
</fieldset>
</form>

47
<script>
function choix() {
var choix = [Link]("abonnement");
if (choix[0].checked) {
chaine();
} else {
contact();
}
}
function chaine() {
[Link]("2").innerHTML =
"<legend>Abonnement</legend>" +
"<table>" +
"<tr><td>Nom</td><td><input type='text'></td></tr>" +
"<tr><td>Email</td><td><input type='email'></td></tr>" +
"<tr><td colspan='2' align='center'>" +
"<input type='submit' value='Envoyer'></td>" +
"</tr>" +
"</table>";
} 48
<script>
function choix() {
var choix = [Link]("abonnement");
if (choix[0].checked) {
chaine();
} else {
contact();
}
function contact() {
}
[Link]("2").innerHTML =
"<legend>Contactez notre service client</legend>" +
"<table>" +
"<tr><td>Nom</td><td><input type='text'></td></tr>" +
"<tr><td>Email</td><td><input type='email'></td></tr>" +
"<tr><td>Message</td><td><textarea></textarea></td></tr>" +
"<tr><td colspan='2' align='center'>" +
"<input type='submit' value='Envoyer'></td>" +
"</tr>" +
"</table>";
}
</script> 49
</body>
appendChild et createElement

createElement : crée un nouvel


élément.
appendChild : ajoute un nouvel
élément comme dernier fils d’un
élément existant. S’applique sur
l’élément père.

50
appendChild et createElement
<!DOCTYPE html>
<html>
<body>
<button un paragraphe</button>
<div id="1"></div>
</body>
</html>

51
appendChild et createElement
<!DOCTYPE html>
<html>
<body>
<button un paragraphe</button>
<div id="1"></div>
<script>
function ajouterParagraphe() {
let nouveauParagraphe = [Link]("p");
[Link] = "Un nouveau paragraphe.";
[Link]("1").appendChild(nouveauParagraphe);
}
</script>
</body>
</html>

52
appendChild et createElement

53
removeChild

<body>
<div id="1">
<p id="p1">Paragraphe 1</p>
<p id="p2">Paragraphe 2</p>
</div>
<input type="button" value="Supprimer" ></body>
<script>
function Supprimer(){

[Link]("1").removeChild([Link]("p2"));
} parent enfant
</script>

54
replaceChild

<body>
<div id="1">
<p id="p1">Paragraphe 1</p>
<p id="p2">Paragraphe 2</p>
</div>
<input type="button" value="Remplacer" ></body>
<script>
function Remplacer(){
var nouveau_parag = [Link]("p") ;
nouveau_parag.textContent = "Paragraphe 3" ;

[Link]("1").replaceChild(nouveau_parag,
[Link]("p2"));
}
parent nouvel enfant ancien enfant
</script> 55
before et after

56
before et after
<body>
<ol id="liste_1">
<li id="item_1">Élément 1</li>
<li id="item_3">Élément 3</li>
</ol>
<input type="button" value="Ajouter un élément avant" > <input type="button" value="Ajouter un élément après" > <script>
function ajouterAvant() {
let nouvelItem = [Link]("li");
[Link] = "Élément 2";
let itemReference = [Link]("item_3");
[Link](nouvelItem);
 before(): insère avant
}
l’élément ciblé.
function ajouterApres() {
let nouvelItem = [Link]("li");
[Link] = "Élément 4";
 after(): insère après
let itemReference = [Link]("item_1"); l’élément ciblé.
[Link](nouvelItem);
}  Plus besoin de récupérer le
</script> parent.
</body>
57

Vous aimerez peut-être aussi