Esddggh

html signifie:hiper tex markup language
Le langage de balisage est utilisé pour définir le document texte dans une balise,
qui détermine la structure des pages Web.
Ils utilisent différentes tailles de police pour indiquer différentes sections du

texte, comme les en-têtes, les paragraphes de corps, les pieds de page, la table
des matières, les légendes, etc.
les objet en
js---------------------------------------------------------------------------------
---------------------------
Introduction aux objets

Les objets en JavaScript sont des entités autonomes qui peuvent être comparées à
des objets dans la vie réelle. Par exemple, un livre peut être représenté comme un
objet dans JS. Vous le décririez par son titre, son auteur, son nombre de pages et
son genre. De même, une voiture peut être un objet que vous décririez par sa
couleur, son fabricant, son modèle et sa puissance.
Les objets sont une partie intégrante et cruciale de la plupart des programmes
JavaScript. Par exemple, un objet de compte d’utilisateur peut contenir des données
telles que des noms d’utilisateur, des mots de passe et des adresses de messagerie.
Une autre utilisation courante est le panier d’achat d’une plate-forme de commerce
électronique qui pourrait consister en un tableau de nombreux objets contenant
toutes les informations pertinentes pour chaque article, telles que le nom, le
prix, le poids et les informations d’expédition. Une liste de tâches est une autre
application courante qui peut consister en des objets.
-----------------------------------------------------------------------------------
-----------------------------------------------------------------------------------
--------------------
Accès aux propriétés de l’objet

Il existe deux façons d’accéder aux propriétés d’un objet :
Notation par points : .

Dans notre exemple, si nous voulons récupérer la valeur de propriété de l’arme,
nous pouvons le faire avec la notation des points de l’objet en tapant le nom de la
variable de l’objet suivi d’un point (.) et du nom de la propriété ou de la
méthode.
Notation entre parenthèses: [ ]
Nous pouvons récupérer les mêmes données avec la notation entre crochets d’objet.
Comme vous pouvez indexer et accéder à une chaîne, la syntaxe de la notation entre
crochets est constituée de deux crochets ([ ]) englobant le nom de la propriété.
// Initializing a gimli object
var gimli = {
name: "Gimli",
race: "dwarf",
weapon: "axe",
greet: function() {
return `Hi, my name is ${this.name}!`;
},
};
// Retrieving the value of the weapon property using the dot notation
console.log(gimli.weapon); // prints “axe”
// Retrieving the value of the weapon property using the bracket notation
console.log(gimli["weapon"]); // prints “axe”
CHAPITRE DOM
-----------------------------------------------------------------------------------
----------------------------------
Qu’est-ce que DOM en JavaScript ?

JavaScript peut accéder à tous les éléments d’une page Web à l’aide du modèle DOM
(Document Object Model).
En fait, le navigateur Web crée un DOM de la page Web lorsque la page est chargée.
L’utilisation de DOM JavaScript peut effectuer plusieurs tâches telles que:
Créer de nouveaux éléments et attributs

Manipuler et accéder aux éléments et attributs existants
Supprimez les éléments et attributs existants.
Réagir aux événements existants
Créer de nouveaux événements dans la page
POUUR CIBLER UN ELEMENT DANS

DOM-----------------------------------------------------------------------
ON UTILISE LA METODE QUERI SELECTOR:

EXEMPLE:
Document
querySelector()
La méthode de document querySelector() renvoie le premier élément du document qui
correspond au sélecteur ou au groupe de sélecteurs spécifié. Si aucune
correspondance n’est trouvée, null est renvoyé.
Syntaxe : element = document.querySelector(selectors)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<h1>Hello from Mars!</h1>
<script>
var el = document.querySelector('h1');
console.log('el:', el);
</script>
</body>
</html>
Sortie
POUR SELETIONER UNE SECTION ,ON UTULISE LA METHODE:
querySelectorAll()
EXEMPLE:
querySelectorAll()
La méthode de document querySelectorAll() renvoie un NodeList statique (non actif)
représentant une liste des éléments du document qui correspondent au groupe de
sélecteurs spécifié.
Syntaxe : elementList = parentNode.querySelectorAll(selectors)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quos
eveniet.
</span>
<span id="middleSpan">
Quisquam veritatis, quam velit quos eligendi perferendis fugiat eveniet
</span>
<span>
sapiente ratione assumenda iste repudiandae quidem dicta aliquid.
Voluptatibus, error?
</span>
<script>
var el = document.querySelectorAll('span');
</script>
</body>
</html>
Sortie
POUR CIBLER UN ELEMENT ,ON ITULISE LA METHODE

getElementById()-------------------------------------------------------------------
------------------------------------------------------------
EXEMPLE: getElementById()
La méthode de document getElementById() renvoie un objet représentant l’élément
dont la propriété ID correspond à la chaîne spécifiée. Étant donné que les ID
d’élément doivent être uniques s’ils sont spécifiés, ils constituent un moyen utile
d’accéder rapidement à un élément spécifique.
Syntaxe : element = document.getElementById(id)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quos
eveniet.
</span>
<span id="middleSpan">
</span>
<span>
</span>
<script>
var el = document.getElementById('middleSpan');
</script>
</body>
</html>
Sortie
POUR SELECTIONNER UN
CLASS------------------------------------------------------------------------------
------
ON ITULISE LS METHODE getElementsByClassName()
EXEMPLE:
La méthode getElementsByClassName de l’interface de document retourne un objet de

type tableau de tous les éléments enfants qui ont tous leurs noms de classe
affectés.
Lorsqu’il est appelé sur l’objet document, le document complet est recherché (y
compris le nœud racine). Vous pouvez appeler getElementsByClassName() sur n’importe
quel élément et il ne retournera que les éléments qui sont les descendants de
l’élément racine spécifié avec le(s) nom(s) de classe donné(s).
Syntaxe : elementList = document.getElementsByClassName(names)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<span class="text-desc">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quos
eveniet.
</span>
</span>
<span>
</span>
<script>
var el = document.getElementsByClassName('text-desc');
</script>
</body>
</html>
Sortie
POUR APPELER UNE BALISEPAR SON

NOM--------------------------------------------------------------------------------
-------------------------------------
ON UTILISE LA METHODE getElementsByTagName()
EXEMPLE:
La méthode getElementsByTagName de l’interface de document renvoie une interaction

HTMLCollection d’éléments avec le nom de balise affecté. Le document complet est
recherché, y compris le nœud racine. La HTMLcollection renvoyée est active, ce qui
signifie qu’elle se met à jour automatiquement pour rester synchronisée avec
l’arborescence DOM sans avoir à appeler à nouveau document.getElementsByTagName().
Syntaxe : elementList = document.getElementsByTagName(name)
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
eveniet.
</span>
</span>
<span>
</span>
<script>
var el = document.getElementsByTagName('span');
</script>
</body>
</html>
Sortie
C EST QUOI UN ATTRIBUT

DOM--------------------------------------------------------------------------------
-------
Que sont les attributs DOM ?

Les attributs sont des mots spéciaux utilisés à l’intérieur de la balise start d’un
élément HTML pour contrôler le comportement de la balise ou fournir des
informations supplémentaires sur la balise.
JavaScript fournit plusieurs méthodes pour ajouter, supprimer ou modifier
l’attribut d’un élément HTML. Dans les sections suivantes, nous en apprendrons
davantage sur ces méthodes en détail.
POUR OBTENIR LA VALEUR D UN

ELEMENT----------------------------------------------------------------------------
ON UTILISE LA METHODE :
GET ATTRIBUTE
EXEMPLE:
Obtenir la valeur d’attribut d’un élément

La méthode est utilisée pour obtenir la valeur actuelle de l’attribut d’un
élément.getAttribute()
Si l’attribut spécifié n’existe pas sur l’élément, il renvoie . Voici un exemple

:null
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<span class="text-desc" id="main-paragraph">
eveniet.
</span>
</span>
<span id="without-style">
</span>
<script>
var mainEl = document.getElementById('main-paragraph');
console.log('el:', mainEl);
var elClassName = mainEl.getAttribute('class');

console.log('elClassName:', elClassName);
var withoutStyleEl = document.getElementById('without-style');

console.log('el:', withoutStyleEl);
var withoutStyleElClassName = withoutStyleEl.getAttribute('class');

console.log('withoutStyleElClassName:', withoutStyleElClassName);
</script>
</body>
</html>
Sortie
STYLISER DES ELEMENTS DE

DOM--------------------------------------------------------------------------------
-----------------------
Nous pouvons également appliquer du style aux éléments HTML pour modifier la
présentation visuelle du HTML avec l’utilisation dynamique de JavaScript.
Nous pouvons définir tous les styles pour les éléments, y compris les polices, les
couleurs, les marges, les bordures, les images d’arrière-plan, l’alignement du
texte, la largeur et la hauteur, la position, etc.
<body>
<p id="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<script>
// Selecting element
var elem = document.getElementById('intro');
// Appling styles on element

elem.style.color = 'blue';
elem.style.fontSize = '18px';
elem.style.fontWeight = 'bold';
console.log('elem:', elem);
</script>
</body>
Sortie
POUR CREE DES NOUVEAUX ELEMENTS

-----------------------------------------------------------------------------------
-------------------------------------------------------
ON UTULISE LA METHODE :createelement()
exemple:
Ajout d’éléments
Nous pouvons créer explicitement de nouveaux éléments dans un document HTML à
l’aide de la méthode document.createElement().
Cette méthode crée un nouvel élément, mais elle ne l’ajoute pas au DOM.
Nous allons le faire dans une étape distincte, comme indiqué dans l’exemple suivant
:
<body>
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Creating a new div element
var newDiv = document.createElement('div');
// Creating a text node
var newContent = document.createTextNode('Hi, how are you doing?');
// Adding the text node to the newly created div
newDiv.appendChild(newContent);
// Adding the newly created element and its content into the DOM
var currentDiv = document.getElementById('main');
document.body.appendChild(newDiv, currentDiv);
</script>
</body>
___________________________________________________________________________________
_____________________________________________
pour savoir le contenu d une balise html on utilise la methode inner.html
exmple:
Obtention ou définition de contenu HTML sur DOM

Nous pouvons obtenir ou définir le contenu des éléments HTML facilement avec la
propriété innerHTML.
Cette propriété définit ou obtient le balisage HTML contenu dans l’élément
(c’est-à-dire le contenu entre ses balises d’ouverture et de fermeture). Consultez
l’exemple suivant pour voir comment cela fonctionne :
<body>
<div id="main">
<h1 id="title">Hello World!</h1>
<p id="hint">This is a simple paragraph.</p>
</div>
<script>
// Getting inner HTML conents
var contents = document.getElementById('main').innerHTML;
console.log('contents', contents);
// Setting inner HTML contents

var mainDiv = document.getElementById('main');
mainDiv.innerHTML = '<p>This is <em>newly inserted</em> paragraph.</p>';
</script>
</body>
Sortie
POUR AJOUTER DES

EVENEMENTS-------------------------------------------------------------------------
------------------------
Ajouter des événements
Les événements sont des actions qui se produisent à la suite de l’action de
l’utilisateur ou à la suite d’un changement d’état des éléments d’une arborescence
DOM. Par exemple : , , et . Ce sont tous des événements qui nous aident à réagir
avec JavaScript.
Nous pouvons assigner des fonctions JS pour écouter ces événements dans les
éléments et réagir ou répondre lorsque l’événement se
produit.clickloadfocusinfocusout
Voici une liste d’événements. Il existe trois façons d’affecter une fonction à un
certain événement.
Si foo() est une fonction personnalisée, vous pouvez l’enregistrer en tant
qu’écouteur d’événements click (il sera appelé lorsque vous cliquerez sur l’élément
button) de trois manières :
// first way
<button onclick=foo>Alert</button>
// the second way
<div id="main">
<button>Alert</button>
</div>
<script>
// Getting the button
var btn = document.querySelector('button');
btn.onclick=foo;
</script>
// the third way
<div id="main">
<button >Alert</button>
</div>
<script>
var btn = document.querySelector('button');
btn.addEventListener('click', foo);
</script>
POUR SUPRIMES DES EVENEMENTS on utilise la metode
Supprimer des événements:
exmple:
Supprimer des événements
La méthode removeEventListener() détache un écouteur d’événement (qui a été
précédemment ajouté avec la méthode addEventListener()) de l’événement qu’il
écoute.
<div id="main">
<button onclick="foo">Alert</button>
</div>
<script>
let btn = document.querySelector('button');
// Remove the event listener
btn.removeEventListener('click',foo);
</script>
les type d evenement dans

dom--------------------------------------------------------------------------------
-----------------------------------------
Types d’événements
Le navigateur déclenche de nombreux événements. Une liste complète est disponible
dans MDN, mais voici quelques-uns des types d’événements et des noms d’événements
les plus courants :
Événements de souris (MouseEvent) : , , , et

mousedownmouseupclickdblclickmousemovemouseovermousewheelmouseoutcontextmenu
Événements de clavier (KeyboardEvent) : , et keydownkeypresskeyup
Événements de formulaire : , , et focusblurchangesubmit
Événements de fenêtre : , , , et scrollresizehashchangeloadunload
Exemple
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="">
<meta name="viewport" content="width=, initial-scale=">
<title></title>
</head>
validation de
formulair--------------------------------------------------------------------------
-----------------------------------------------------------------------------------
--------------------------------------------------------
Validation du formulaire
Le processus de validation du formulaire se compose généralement de deux parties :
la validation des champs obligatoires, qui est effectuée pour s’assurer que tous
les champs obligatoires sont remplis, et la validation du format des données, qui
est effectuée pour s’assurer que le type et le format des données saisies dans le
formulaire sont valides.
Allons droit au but et voyons comment cela fonctionne réellement.
.HTML
<form name="loginForm" onsubmit="return validateForm(event) ">
<label for="Name">Name:</label>
<input type="text" name="name" placeholder="example@example.com" />
<label for="password">Password:</label>
<input type="password" name="password" placeholder="*********" />
<button type="submit">Login</button>
<button type="reset">cancel</button>
</form>
</body>
JavaScript
function validateForm(e) {
e.preventDefault()
var name = document.loginForm.name.value
var password = document.loginForm.password.value
if (name.length==0)
return alert(`name is required`)
if (password.length<5)
return alert(`password length should more than 5`)
}

Esddggh

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

Esddggh

Transféré par

Droits d'auteur :

Formats disponibles

html signifie:hiper tex markup language

Ils utilisent différentes tailles de police pour indiquer différentes sections du

Introduction aux objets

Accès aux propriétés de l’objet

Notation par points : .

Qu’est-ce que DOM en JavaScript ?

L’utilisation de DOM JavaScript peut effectuer plusieurs tâches telles que:

Créer de nouveaux éléments et attributs

POUUR CIBLER UN ELEMENT DANS

ON UTILISE LA METODE QUERI SELECTOR:

POUR SELETIONER UNE SECTION ,ON UTULISE LA METHODE:

POUR CIBLER UN ELEMENT ,ON ITULISE LA METHODE

ON ITULISE LS METHODE getElementsByClassName()

La méthode getElementsByClassName de l’interface de document retourne un objet de

Syntaxe : elementList = document.getElementsByClassName(names)

POUR APPELER UNE BALISEPAR SON

ON UTILISE LA METHODE getElementsByTagName()

La méthode getElementsByTagName de l’interface de document renvoie une interaction

C EST QUOI UN ATTRIBUT

Que sont les attributs DOM ?

POUR OBTENIR LA VALEUR D UN

Obtenir la valeur d’attribut d’un élément

Si l’attribut spécifié n’existe pas sur l’élément, il renvoie . Voici un exemple

var elClassName = mainEl.getAttribute('class');

var withoutStyleEl = document.getElementById('without-style');

var withoutStyleElClassName = withoutStyleEl.getAttribute('class');

STYLISER DES ELEMENTS DE

// Appling styles on element

POUR CREE DES NOUVEAUX ELEMENTS

ON UTULISE LA METHODE :createelement()

pour savoir le contenu d une balise html on utilise la methode inner.html

Obtention ou définition de contenu HTML sur DOM

// Setting inner HTML contents

POUR AJOUTER DES

POUR SUPRIMES DES EVENEMENTS on utilise la metode

Supprimer des événements:

les type d evenement dans

Événements de souris (MouseEvent) : , , , et

Vous aimerez peut-être aussi