Programmation
front-end
JavaScript
PHP
HTML – CSS - JavaScript
Section 1:
Javascript DOM
JEE
HTML – CSS - JavaScript
Programmation web
Introduction
Le modèle d'objet de document (DOM) est la représentation
d’objets qui composent la structure et le contenu d'un document
sur le Web.
C'est une interface de programmation pour les documents HTML. Il
représente la page afin que les programmes puissent modifier la
structure, le style et le contenu du document.
Le DOM est construit sous la forme d'un arbre et représente le
document sous forme de nœuds et d'objets.
⤇ De cette façon, il peut être modifié avec un langage de script tel
que JavaScript.
.3
Programmation web
Introduction
JavaScript est un langage que le navigateur lit et utilise. Mais c'est
dans le DOM que tout cela se passe.
Par exemple, nous pouvons écrire du JavaScript qui surveille un
événement d'entrée de la souris sur un élément. Mais cet
"élément" est en réalité un nœud DOM. Nous attachons cet
écouteur via une propriété DOM sur ce nœud DOM. Lorsque cet
événement se produit, c'est le nœud DOM qui émet cet
évènement.
.4
Programmation web
Accès au DOM: Préface
Vous n'avez rien à faire de spécial pour commencer à utiliser le DOM. Les différents navigateurs ont
différentes implémentations du DOM, chaque navigateur Web utilise un modèle d'objet de document
pour rendre les pages Web accessibles via JavaScript.
Lorsque vous créez un script, qu'il soit en ligne dans un élément <script> ou inclus dans la page Web au
moyen d'une instruction de chargement de script, vous pouvez immédiatement commencer à utiliser
l'API pour le document ou les éléments de fenêtre pour manipuler le document lui-même ou pour
accéder aux enfants de ce document, qui sont les différents éléments de la page Web.
.5
Programmation web
Représentation DOM:
Chaque élément de votre page HTML a un nœud d'élément associé dans le modèle d'objet de
document, ou DOM. Le DOM est accessible en utilisant Javascript via l'objet document.
Le document se comporte comme n'importe quel autre objet Javascript, et possède de nombreuses
propriétés et méthodes qui sont utiles pour accéder aux nœuds dans le DOM.
L'interface Document représente toute page Web
chargée dans le navigateur et sert de point
d'entrée dans le contenu de la page Web, qui est
l'arborescence DOM. L'arborescence DOM
comprend des éléments tels que <body> et
<table>,etc...
.6
Programmation web
[Link]():
Dans cette partie, nous allons nous intéresser à « [Link] ()» qui est
une fonction qui prend un sélecteur d'élément comme argument. Ces sélecteurs sont les
mêmes que ceux utilisés pour appliquer des styles CSS aux éléments HTML.
[Link] () retournera le premier élément qu'il trouve avec le sélecteur
fourni. Si aucun élément n'est trouvé à l'aide de ce sélecteur particulier, la fonction
renverra « null ».
.7
Programmation web
[Link]():
Dans le code ci-dessous, nous stockons le nœud d'élément associé à l'élément <h1>
dans une variable nommée h1. Cependant, comme vous l'avez peut-être remarqué, cela
n'entraîne rien de significatif lorsque vous exécutez le code.
HTML JavaScript
.8
Programmation web
[Link]():
Il existe également des fonctions qui nous permettent d'accéder à une collection de
nœuds d'élément: [Link] (sélecteur)
Supposons que nous ayons une liste non ordonnée de choses à faire. Nous pourrions
stocker tous les éléments de la liste dans une variable en utilisant
[Link] ().
Une fois que nous avons stocké les nœuds d'élément, ils sont accessibles comme les
éléments d'un tableau.
.9
Programmation web
[Link]():
let todoItems =
[Link]('#todos > li’);
<html>
for(let i = 0; i < [Link]; i++) {
<head>
todoItems[i].innerHTML = "Todo Item #" +
<title>Accessing Multiple Element
(i+1);
Nodes</title>
}
</head>
// this will change the rendered list in our web
<body>
page to
<h1>To-Do Items</h1>
// To-Do Items
<ul id="todos">
// • Todo Item #1
<li>Get groceries</li>
// • Todo Item #2
<li>Go for a run</li>
// • Todo Item #3
<li>Learn web development</li>
</ul>
</body>
.10
Programmation web
[Link]():
Si un élément a un attribut id, nous pouvons y accéder en utilisant la fonction
« [Link] () ».
Nous pourrions également utiliser un sélecteur d'identifiant avec
[Link] (#insertIdHere) pour obtenir le même
let mainHeading =
<html>
[Link](‘logo’);
<head>
[Link] = "Access an
<title>Accessing an Element
element with an id attribute using
Node using ID's</title>
<code>[Link]()</c
</head>
ode>";
<body>
// This will change the rendered title in
<h1 id="logo">Learn DOM
the web page to:
Manipulation with
// Access an element with an id
Javascript</h1>
attribute using
</body>
[Link]()
</html>
.11
Programmation web
Modification des éléments HTML
Le nœud d'élément h1 est également un objet Javascript, ce qui signifie que nous
pouvons modifier les propriétés de l'objet pour modifier dynamiquement le HTML de
notre page.
Dans l’exemple, la propriété innerHTML stocke le contenu HTML stocké entre les balises
<h1> d'ouverture et </h1> de fermeture:
HTML letJavaScript
h1 =
<html>
<head> [Link]('h1’);
<title>Capturing DOM Nodes with [Link] = "We just modified
querySelector</title> HTML using Javascript!";
</head> // This will change the title in the
<body> rendered web page from “Hello,
<h1>Hello, World!</h1> World!” to “We just modified HTML
</body>
using Javascript!”
</html> .12
Programmation web
[Link]
[Link] renvoie une valeur de type chaîne qui contient à la fois le contenu
de l'élément HTML et ses balises d'ouverture / fermeture.
HTML JavaScript
<html> let h1 = [Link]('h1’);
<head> [Link]("h1 element:",
<title>Capturing DOM Nodes with [Link]);
querySelector</title> // This will print to the console:
</head> // h1 element: <h1 id="logo">Learn DOM
<body> Manipulation with Javascript</h1>
<h1>Learn DOM Manipulation with
Javascript</h1>
</body>
</html>
.13
Programmation web
Obtention des attributs d'élément:
Ici, nous utiliserons [Link] pour renvoyer la valeur de l'attribut id du nœud de
l’élément.
Remarquez la notation par points ici, nous apportons cet exemple pour souligner la
nature objet de ces éléments DOM.
HTML let h1 =JavaScript
<html>
[Link]('h1’);
<head>
[Link]("h1 element's id value:",
<title>Capturing DOM Nodes with
[Link]);
querySelector</title>
// This will print to the console:
</head>
// h1 element's id value: logo
<body>
<h1 id="logo" >Learn DOM Manipulation with
Javascript</h1>
</body>
</html>
.14
Programmation web
[Link](element)
Vous pouvez créer un nouvel élément à l'aide de « [Link] () », avec
l'élément argument, qui est le nom de l'élément.
Il s'avère que le code est très bien. La variable h1 stocke un nœud d'élément qui
représente l'élément HTML que nous voulons ajouter. Pour l'ajouter à la page HTML, nous
devons attacher l'élément en tant qu'enfant d'un autre élément HTML.
<html> let h1 = [Link]('h1’);
<head> [Link] = "A new HTML
<title>Creating New element!";
Elements</title>
</head>
<body>
</body>
</html>
.15
Programmation web
[Link](element_node)
Nous pouvons utiliser « [Link] (element_node) » pour attacher un nœud
d'élément à un autre nœud d'élément en tant qu'enfant. Par exemple, nous pouvons
ajouter h1 en tant qu'élément enfant de l'élément <div> existant.
Voilà, maintenant l'élément <h1> nouvellement créé apparaît dans la sortie puisque
nous l'avons ajouté en tant qu'élément enfant du conteneur content <div>.
<html>
<head> let h1 = [Link]('h1’);
<title>Creating New Elements</title> [Link] = "A new HTML element!";
</head> let content =
<body> [Link]('#content’);
<div id="content"></div> [Link](h1);
</body>
</html>
.16
Programmation web
[Link](element_node)
Nous pouvons également utiliser [Link]() pour supprimer un enfant d'un
élément
<html> parent dans le document HTML. La fonction retournera l'élément supprimé.
var content = [Link]('#content’);
<head>
var contentParagraph =
<title>Removing HTML
[Link]('#content >p’);
Elements</title>
var oldElement =
</head>
[Link](contentParagraph);
<body>
[Link]([Link]);
<div id="content">
<h1>Removing an HTML
Element</h1>
<p>This element will be
removed.</p>
</div>
</body>
</html>
.17
Programmation web
[Link]()
Nous utilisons la fonction [Link]() pour obtenir un tableau
contenant
<html> les noms des attributs de l'élément HTML.
<head>
<title>Javascript + HTML
Attributes</title>
</head>
<body> let input =
<h1 id="logo">Learn DOM [Link]('input[type=text]’);
Manipulation with Javascript</h1> [Link]("input attributes:",
<label for="question">What do you [Link]());
want to learn about the // will print to the console: // input attributes: [
DOM?</label> 'type', 'name', 'id', 'placeholder' ]
<input type="text" name="question"
id="question" placeholder="Insert
Question Here">
</body>
.18
</html>
Programmation web
[Link](name)
Nous pouvons maintenant accéder à la valeur d'un attribut spécifique dans un élément
HTML en utilisant [Link] () et en passant le nom de l'attribut comme
argument
<html> de chaîne.
<head>
<title>Javascript + HTML
Attributes</title>
</head>
<body> var input =
<h1 id="logo">Learn DOM Manipulation [Link]('input[type=text]’);
with Javascript</h1> [Link]("input type:",
<label for="question">What do you [Link]('type'));
want to learn about the DOM?</label> // this will print to the console:
<input type="text" name="question" // input type: text
id="question" placeholder="Insert
Question Here">
</body>
.19
</html>
Programmation web
[Link](name, value) & [Link](name)
Nous pouvons changer la valeur d'un attribut en utilisant la fonction setAttribute(). De
plus, vous pouvez supprimer des attributs à l'aide de la fonction removeAttribute()
<html>
let input =
<head>
[Link]('input[type=text]
<title>Javascript + HTML
’);
Attributes</title>
[Link]('type', "checkbox");
</head>
//will change the value of the type
<body>
attribute from text to checkbox
<h1 id="logo">Learn DOM Manipulation
[Link]('placeholder’);
with Javascript</h1>
[Link]([Link]());
<label for="question">What do you want
// this will print to the console: // [ 'type',
to learn about the DOM?</label>
'name', 'id' ]
<input type="text" name="question"
id="question" placeholder="Insert
Question Here">
</body>
</html> .20
Programmation web
Ecouteurs d’événements
Lorsqu'un utilisateur visite votre page, chaque interaction qu'il a avec la page (par
exemple, un clic de souris, un défilement, un redimensionnement de la fenêtre, etc.) est
enregistrée comme une série d'événements.
En tant que programmeurs, nous pouvons utiliser ces événements pour lier le code
Javascript à des interactions utilisateur spécifiques.
.21
Programmation web
Ecouteurs d’événements
Dans le code suivant:
le bouton variable stocke un objet nœud d'élément qui représente le bouton HTML.
puisque le bouton est un objet, nous pouvons définir la propriété « onclick » qui agit
comme un écouteur d'événement: onclick est défini comme une fonction, et cette
fonction s'exécutera chaque fois qu'un événement click se produit sur l'élément
<button>.
<html> let button = [Link]('button’);
<head> [Link] = function() {
<title>First Javascript Code</title> alert("Hello, World!");
</head> }
<body> // Will display an alert box with the text “Hello,
<button type="button">Click Me!</button> World!” when the button is clicked
</body>
</html>
.22
Programmation web
Événements du souris
Il existe de nombreux types d'événements différents qui se produisent dans le
navigateur.
Quelques exemples incluent: Événements de souris: événements qui se produisent avec
la souris d'un utilisateur
ondblclick: se produit lorsqu'un élément est double-cliqué
onmouseenter: se produit lorsque le pointeur de la souris se déplace sur un élément
onmouseleave: se produit lorsque le pointeur de la souris s'éloigne d'un élément
.23
Programmation web
Ecouteurs d’événements
<html> let button = [Link]('button’);
<head> [Link] = function(){
<title>Exercise: DOM manipulations using [Link] = "Mouse entered!";
onclick event listener</title> }
</head> [Link] = function(){
<body> [Link] = "Mouse left!";
<button type="button">Click Me!</button> }
</body> [Link] = function(){
</html> [Link] = "Double clicked!!";
}
.24
Programmation web
Événements du clavier
Les événements liés aux pressions sur les touches du clavier de l'utilisateur
onkeypress: se produit lorsqu'une touche est enfoncée sur le clavier de l'utilisateur
onkeydown: se produit lorsqu'un utilisateur appuie sur une touche
onkeyup: se produit lorsqu'un utilisateur relâche une touche
<html>
<head> let h1 =
<title>Keyboard [Link](
Events</title> 'h1’);
</head> [Link] =
<body> function(event){
<p>Click into the window and [Link] = "Key
press a key.</p> Down: " + [Link];
<h1>Key Down:</h1> }
</body>
</html>
.25
Programmation web
Modification CSS
Le moyen le plus simple de modifier les styles CSS sur un élément HTML à l'aide de
Javascript est d'accéder aux styles individuels dans la propriété « [Link] ».
Puisque « [Link] » est également un objet, il existe de nombreuses sous-
propriétés qui ciblent des propriétés CSS spécifiques. Par exemple, nous pourrions
ajouter une bordure à un élément en utilisant « [Link] ».
<html>
<head>
let h1 = [Link]('h1’);
<title>Modifying CSS with [Link]</title>
[Link] = "3px dashed black";
</head>
// gives a border to h1
<body>
<h1>This element should have a border.</h1>
</body>
</html>
.26
Programmation web
Les formulaires en JavaScript
Les formulaires améliorent les pages Web en permettant aux utilisateurs de saisir des
informations via des champs de texte, des cases à cocher, des menus déroulants, etc.
À l'intérieur d'une page Web, un formulaire est défini avec une balise HTML <form>, et
dans cette balise, vous avez vos différentes balises <input>, <select> ou <textarea>.
D'accord, c'est tout du HTML, mais qu'en est-il de la gestion des formulaires avec
JavaScript:
Les données saisies dans un formulaire par les utilisateurs sont normalement envoyées via
un réseau à un serveur Web qui traite et envoie une réponse au navigateur en tant que
nouvelle page Web. Pour ce faire, les serveurs Web utilisent des langages de
programmation backend comme PHP ou Ruby.
Grâce à JavaScript, vous pouvez gérer les formulaires (et leurs données) directement dans
le navigateur avant de les envoyer vers un serveur externe. Vous pouvez informer les
utilisateurs des données d'entrée incorrectes, faire des suggestions sur ce qu'ils saisissent,.27
Programmation web
Gestion des formulaires en JavaScript
Un formulaire sera soumis lorsqu'un utilisateur cliquera sur le bouton d'envoi, qui aura une
balise <input type = "submit">.
Lorsqu'un utilisateur soumet un formulaire, le comportement par défaut du navigateur est
de contacter un serveur Web et de demander la ressource identifiée par l'attribut d'action
de la balise <form>, en envoyant les données du formulaire en cours de route.
Auparavant, un événement de soumission est déclenché sur l'élément DOM correspondant
au formulaire.
.28
Programmation web
Validation instantanée
La validation pendant qu'un utilisateur saisit des informations est basée sur des
événements d'entrée, qui sont déclenchés sur une zone d'entrée chaque fois que sa valeur
change.
L'exemple de code suivant ajoute un gestionnaire d'événements d'entrée sur le champ de
mot de passe. Ce gestionnaire vérifie la longueur (nombre de caractères) du mot de passe
saisi et affiche un message à l'utilisateur avec un contenu et une couleur spécifique.
.29
Programmation web
Validation post-entrée
L'entrée d'une zone de texte est considérée comme terminée une fois que le focus est
perdu sur la zone, ce qui déclenche un événement de flou que vous pouvez utiliser pour
déclencher la validation. Imaginons que vous souhaitiez valider la présence d’un caractère
«@» dans l’adresse e-mail saisie par un utilisateur. Voici le code JavaScript qui montre
cette validation.
.30
Programmation web
Validation post-entrée
<html>
<head> // Validate password length // Checking an email
</head> address once it's entered
<body> [Link]("emailAddress").addEventLi
<form> stener("blur", e => { let emailAddressValidity = "";
<label if ([Link]("@") === -1) {
for="email">Email</label>: // the email address doesn't contain @
<input type="text" emailAddressValidity = "Invalid address";
name="emailAddress" }
id="emailAddress" required> [Link]("emailHelp").textContent =
<br> emailAddressValidity;
<label for="emailHelp" id = });
"emailHelp" > </label>
</form>
</body>
</html>
.31
Programmation web
Définition de formulaire (1/2)
Un formulaire est un moyen très adapté pour réaliser une attractivité entre le visiteur et le site en
question.
Les informations saisies par l’internaute sont récupérées et envoyées pour être traitées.
On définit un formulaire avec la balise form
<form method="GET/POST" action=“fichierCible">….</form>
.32
Programmation web
Input : Texte
.33
Programmation web
Formulaires contenant « Select »
On utilise la balise <select> à laquelle on donne un nom (dans l’exemple :« choix »).
Ici, une variable $_GET['choix']sera créée, et elle contiendra le choix qu'a fait l'utilisateur.
.34
Programmation web
Formulaires contenant « Chechbox»
.35
Programmation web
Formulaires contenant « Radio »
.36