Paragraphe 1
Paragraphe 2
===== Variable =====
== Déclaration, type et fonction ==
let nomberOfCats = 2; // Premiere méthode, variable local dont la porté est le bloc. au dela elle est détruite
var nombreOfCats = 2; // Deuxième méthode, variable local dont la porté est la fonction.
const nombreOfCats = 2; //Déclaration d'une constante local
void ... // Ne retourne rien, déclaration obligatoire pour les pseudo url javascript: sinon l'instruction retourne une valeur qui remplace la page en question.
with(navigator) //Permet de simplifier la référence aux propriétés et méthodes des objets en précédant un bloc d'instruction dans lequel un objet devient implicite.
{
alert(appName + " " + appVersion);
} // équivalent à :
alert(navigator.appName + " " +navigator.appVersion);
function ma_fonction()
{
alert("Je suis exécuté dans ma_fonction");
}
=== Type de variable et objet pédéfinis ===
*int
*float
*String
*char
*boolean
*Object
*[[JavaScript#window|Window]]
*[[JavaScript#document|document]]
*[[JavaScript#navigator|navigator]]
*[[JavaScript#Array|Array (tableaux)]]
*[[JavaScript#Date|Date]]
*[[JavaScript#Erro|Error]]
*[[JavaScript#Function|Function]]
*[[JavaScript#Image|Image]]
*[[JavaScript#Math|Math]]
*[[JavaScript#Number|Number]]
*RegExp
=== window ===
== Propriété ==
* '''closed '''
fenêtre fermée
* '''defaultStatus '''
affichage normal dans la barre d'état
* '''innerHeight '''
hauteur du domaine d'affichage
* '''innerWidth '''
largeur du domaine d'affichage
* '''locationbar '''
barre d'adresse
* '''menubar '''
barre de menus
* '''name '''
nom de fenêtre
* '''outerHeight '''
hauteur de la fenêtre globale
* '''outerWidth '''
largeur de la fenêtre globale
* '''pageXOffset '''
position de départ de la fenêtre à partir de la gauche
* '''pageYOffset '''
position de départ de la fenêtre à partir du haut
* '''personalbar '''
barre pour les adresses favorites
* '''scrollbars '''
barres de défilement
* '''statusbar '''
barre d'état
* '''status '''
Contenu de la barre d'état
* '''toolbar '''
barre d'outils
== Méthodes ==
* '''alert()'''
boite de dialogue avec infos
* '''back()'''
page précédente
* '''blur()'''
quitter la fenêtre
* '''captureEvents()'''
surveiller les événements
* '''clearInterval()'''
interrompre la suite d'instructions sans fin
* '''clearTimeout()'''
interrompre le compte à rebours
* '''close()'''
fermer la fenêtre
* '''confirm()'''
boite de dialogue pour confirmer
* '''disableExternalCapture()'''
empêcher une surveillance extérieure
* '''enableExternalCapture()'''
permettre une surveillance extérieure
* '''find()'''
chercher du texte
* '''focus()'''
activer la fenêtre
* '''forward()'''
page suivante
* '''handleEvent()'''
renvoyer l'événement
* '''home()'''
appeler la page d'accueil
* '''moveBy()'''
se mouvoir avec des mentions relatives
* '''moveTo()'''
se mouvoir avec des mentions absolues
* '''open()'''
ouvrir une nouvelle fenêtre
* '''print()'''
imprimer
* '''prompt()'''
fenêtre de dialogue pour la saisie de valeur
* '''releaseEvents()'''
fermer un événement
* '''resizeBy()'''
modifier la taille avec des mentions relatives
* '''resizeTo()'''
modifier la taille avec des mentions absolues
* '''routeEvent()'''
parcourir la hiérarchie des gestionnaires d'événement
* '''scrollBy()'''
défiler un certain nombre de pixels
* '''scrollTo()'''
défiler jusqu'à la position
* '''setInterval()'''
établir une liste d'instructions planifiées
* '''setTimeout()'''
entamer le compte à rebours
* '''stop()'''
interrompre
=== document ===
== Propriétés ==
* '''alinkColor '''
couleur des liens lorsqu'ils sont cliqués
* '''bgColor '''
couleur d'arrière plan
* '''charset '''
jeu de caractères utilisés
* '''cookie '''
chaîne de caractères pouvant être sauvegardée chez l'utilisateur
* '''defaultCharset '''
jeu de caractères normal
* '''fgColor '''
couleur pour le texte
* '''lastModified '''
dernière modification du document
* '''linkColor '''
couleur pour les liens
* '''referrer '''
pages déjà visitées
* '''title '''
titre du fichier
* '''URL '''
adresse URL du fichier
* '''vlinkColor '''
couleur pour les liens à des cibles visitées
== Méthodes ==
* '''captureEvents()'''
surveiller les événements
* '''close()'''
fermer
* '''createAttribute()'''
créer un nœud d'attributs
* '''createElement()'''
créer un nœud d'éléments
* '''createTextNode()'''
créer un nœud de texte
* '''getElementById()'''
Accès à l'élément HTML par l'attribut Id
* '''getElementsByName()'''
Accès à l'élément HTML par l'attribut name
* '''getElementsByTagName()'''
Accès à l'élément HTML par liste d'éléments
* '''getSelection()'''
texte sélectionné
* '''handleEvent()'''
traiter les événements
* '''open()'''
ouvrir le document
* '''releaseEvents()'''
fermer des événements
* '''routeEvent()'''
parcourir la hiérarchie des gestionnaires d'événement
* '''write()'''
écrire dans la fenêtre du document
* '''writeln()'''
écrire ligne par ligne
=== navigator ===
== Propriétés ==
*'''appCodeName'''
surnom du navigateur
*'''appName'''
nom officiel du navigateur
*'''appVersion'''
version du navigateur
*'''cookieEnabled'''
Cookies permis
*'''language'''
langue du navigateur
*'''platform'''
plate-forme sur laquelle tourne le navigateur
*'''userAgent'''
identification HTTP du navigateur
== Méthodes ==
*'''javaEnabled()'''
vérifier la disponibilité Java
=== Array ===
== Propriétés ==
*'''length()'''
retourne la taille du tableau (entier)
== Methodes ==
Modification du contenu
^ Méthode ^ Description ^ Exemple ^
| Création| Génère un tableau | let monTableau = []; |
| pop() | Supprime et retourne le dernier élément | mon_tableau.pop() |
| push() | Ajoute un ou plusieurs éléments à la fin | mon_tableau.push("nouveau","deuxième nouveau") |
| shift() | Supprime le premier élément | mon_tableau.shift() |
| unshift() | Ajoute des éléments au début | mon_tableau.unshift("nouveau1","nouveau2") |
| splice() | Insère des éléments | mon_tableau.splice(ou, 2,"nouveau1","nouveau2") |
| reverse() | Réorganise le tableau de la fin ver le début | mon_tableau.reverse() |
| concat() | Concaténer plusieurs tableaux | mon_tableau.concat(tableau1,tableau2) |
Obtenir des données
| join() | Extrait les données dans une chaîne avec le délimiteur donné en paramètre | mon_tableau.join(" ") |
| slice() | Renvoie un tableau contenant 'nombre' cellules à partir de 'début' | mon_tableau.slice(debut,nombre) |
Trier
| sort() | Trier le tableau | mon_tableau.sort() |
Méthodes héritées
| toString() | Renvoyer le contenu de l'objet sous forme de chaîne | s = mon_tableau.toString() |
| toLocaleSting() | Renvoyer le contenu de l'objet sous forme de chaîne | s= mon_tableau.toLocaleString() |
Manipulation:
*Instanciation:
mon_tableau = new Array(); // Simple et direct
mon_tableau = new Array(10); // Imposition de dix cases vides, (de 0 à 9) length vaut 10
// Note : rien n'empèche immédiatement après de faire mon_tableau[11] (dynamisme)
mon_tableau = new Array("Elément 1", "Elément 2"); // Remplissage à la déclaration.
*Adressage d'un élément
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments
t["nom"] = "contenu de 'nom'";
alert(t[0]); // Affiche 'null'
alert(t[3]); // Affiche "Contenu de trois";
alert(t["nom"]); // Affiche "contenu de 'nom'"
alert(t[4]); // Affiche "undefined"
=== Lecture de la propriété length ===
t = new Array(null,null,null,"Contenu de trois"); // Création avec 4 éléments
var nb_elements = t.length; // Lecture de length dans une variable
alert("Le tableau a " + t.length + " éléments"); // Affiche "le tableau a 4 éléments"
for(i = 0; i < t.length; i++)
alert("contenu de : " + i + t[i]);
// Affiche "null", puis "null", "null" et "Contenu de trois"
* Utilisation d'une méthode:
t = new Array("Premier","Deuxieme","Troisieme");
t.sort(); // Invocation de la méthode sort()
alert(t); // Affiche "Deuxieme,Premier,Troisieme", soit le contenu par ordre alphabétique
=== Date ===
== Méthode ==
* '''getDate()'''
renvoie le jour du mois
* '''getDay()'''
renvoie le jour de la semaine
* '''getFullYear()'''
renvoie l'année complète
* '''getHours()'''
renvoie la partie heures de l'heure
* '''getMilliseconds()'''
renvoie les millièmes de secondes
* '''getMinutes()'''
renvoie la partie minutes de l'heure
* '''getMonth()'''
renvoie le mois
* '''getSeconds()'''
renvoie la partie secondes de l'heure
* '''getTime()'''
renvoie l'heure
* '''getTimezoneOffset()'''
renvoie le décalage horaire de l'heure locale
* '''getUTCDate()'''
renvoie le jour du mois de l'heure UTC ({{w|temps universel coordonné}})
* '''getUTCDay()'''
renvoie le jour de la semaine de l'heure UTC
* '''getUTCFullYear()'''
renvoie l'année complète de l'heure UTC
* '''getUTCHours()'''
renvoie la partie heures de l'heure UTC
* '''getUTCMilliseconds()'''
renvoie les millièmes de secondes de l'heure UTC
* '''getUTCMinutes()'''
renvoie la partie minutes de l'heure UTC
* '''getUTCMonth()'''
renvoie le mois de l'heure UTC
* '''getUTCSeconds()'''
renvoie la partie secondes de l'heure UTC
* '''getYear()'''
renvoie l'année
* '''parse()'''
renvoie le nombre de millièmes de secondes depuis le 1/1/1970
* '''setDate()'''
change le jour du mois de l'objet
* '''setFullYear()'''
change l'année complète de l'objet
* '''setHours()'''
change la partie heures de l'heure de l'objet
* '''setMilliseconds()'''
change la partie millièmes de seconde de l'heure de l'objet
* '''setMinutes()'''
change la partie minutes de l'heure de l'objet
* '''setMonth()'''
change la partie mois de la date de l'objet
* '''setSeconds()'''
change la partie secondes de l'heure de l'objet
* '''setTime()'''
change la date et l'heure de l'objet
* '''setUTCDate()'''
change le jour du mois de l'heure UTC de l'objet
* '''setUTCDay()'''
change le jour de la semaine de l'heure UTC de l'objet
* '''setUTCFullYear()'''
change l'année complète de l'heure UTC de l'objet
* '''setUTCHours()'''
change la partie heures de l'heure UTC de l'objet
* '''setUTCMilliseconds()'''
change la partie millièmes de seconde de l'heure UTC de l'objet
* '''setUTCMinutes()'''
change la partie minutes de l'heure UTC de l'objet
* '''setUTCMonth()'''
change le mois de l'heure UTC de l'objet
* '''setUTCSeconds()'''
change la partie secondes de l'heure UTC de l'objet
* '''setYear()'''
change la date et l'heure de l'objet
* '''toGMTString()'''
convertir la date et l'heure au format GMT
* '''toLocaleString()'''
convertir la date et l'heure au format local
* '''UTC()'''
renvoie le nombre de millièmes de secondes entre le 1/1/1970 et un moment donné
=== Error ===
Les exceptions renvoient des objets de type Error, ou qui en héritent.
var myError = new Error('Message');
=== Function ===
== Propriétés ==
* **arguments**
tableau de noms d'arguments
* **arity**
nombre d'arguments
* **caller**
nom de la fonction qui appelle
=== Image ===
== Propriétés ==
== Méthode ==
=== Math ===
== Propriétés ==
* '''E'''
constante d'Euler
* '''LN2'''
logarithme naturel de 2
* '''LN10'''
logarithme naturel de 10
* '''LOG2E'''
logarithme constant de 2
* '''LOG10E'''
logarithme constant de 10
* '''PI'''
constante PI
* '''SQRT1_2'''
constante pour racine carrée de 0,5
* '''SQRT2'''
constante pour racine carrée de 2
== Méthode ==
* '''abs()'''
valeur positive
* '''acos()'''
arc cosinus
* '''asin()'''
arc sinus
* '''atan()'''
arc tangente
* '''ceil()'''
nombre entier supérieur le plus proche
* '''cos()'''
cosinus
* '''exp()'''
valeur exponentielle
* '''floor()'''
nombre entier inférieur le plus proche
* '''log()'''
utilisation du logarithme naturel
* '''max()'''
le plus grand de deux chiffres
* '''min()'''
le plus petit de deux chiffres
* '''pow()'''
nombre puissance exposant
* '''random()'''
0 ou 1 aléatoire
* '''round()'''
arrondi commercial d'un nombre
* '''sin()'''
sinus
* '''sqrt()'''
racine carrée
* '''tan()'''
tangente
=== Number ===
== Propriétés ==
*'''MAX_VALUE'''
plus grand nombre pouvant être sauvegardé
*'''MIN_VALUE'''
plus petit nombre pouvant être sauvegardé
*'''NaN'''
nombre non valable
*'''NEGATIVE_INFINITY'''
nombre trop petit
*'''POSITIVE_INFINITY'''
nombre trop grand
== Méthode ==
*'''toExponential()'''
*'''toFixed()'''
*'''toPrecision()'''
*'''toString()'''
=== Opérateurs arithmétiques ===
== Addition et soustraction ==
let totalCDs = 67;
let totalVinyls = 34;
let totalMusic = totalCDs + totalVinyls;
let cookiesInJar = 10;
let cookiesRemoved = 2;
let cookiesLeftInJar = cookiesInJar - cookiesRemoved;
let cookiesInJar = 10;
/* manger deux cookies */
cookiesInJar -= 2; //il reste 8 cookies
/* cuisson d'un nouveau lot de cookies */
cookiesInJar += 12; // il y a maintenant 20 cookies dans la boîte
let numberOfLikes = 10;
numberOfLikes++; // cela fait 11
numberOfLikes--; // et on revient à 10...qui n'a pas aimé mon article ?
== Multiplication et division ==
let costPerProduct = 20;
let numberOfProducts = 5;
let totalCost = costPerProduct * numberOfProducts;
let averageCostPerProduct = totalCost / numberOfProducts;
let numberOfCats = 2;
numberOfCats *= 6; // numberOfCats vaut maintenant 2*6 = 12;
numberOfCats /= 3; // numberOfCats vaut maintenant 12/3 = 4;
== Mutabilité des variables ==
Les variables sont soit mutable, c'est a dire que l'on peut modifier leur affectation, soit Constante, une fois initialisé elle ne peuvent plus être modifier.
const nombrePostParPage = 20;
nombrePostParPage = 30; // Retournera une erreur dans la console car on ne peut plus changer sa valeur
===== Structure de contrôle =====
=== Return ===
Employé dans une fonction, provoque le retour au programme appelant avec renvoi facultatif d'un résultat.
function ma_fonction(aparam)
{
s = "";
if (aparam == "")
return; // Sortie sans renvoyer de résultat
else
s = "Le résultat";
return s; // Renvoie le contenu de s
}
=== if ===
Permet de définir l'exécution conditionnelle d'instructions ou d'un bloc d'instructions. Peut-être utilisé conjointement à else.
a = 5;
if (a==5)
alert("la condition est remplie");
=== else ===
Utilisé conjointement à if, permet d'exécuter des instructions alternativement au résultat de la condition spécifiée par if.
a = 5
if (a==5)
alert("a est égal à 5");
else
alert("a est différent de 5");
=== switch ===
Utilisé conjointement à case, permet d'implanter un sélecteur de cas
function test(condition)
{
switch(condition)
{
case "1":
alert("condition='1'");
break;
case "3":
alert("condition='3'");
break;
case "5":
alert("condition='5'");
break;
}
}
=== case ===
Utilisé à l'intérieur d'un bloc switch, constitue un des choix du selecteur.
=== break===
Utilisé à l'intérieur d'un bloc switch, permet de sortir du sélecteur sans procéder tests suivants. Utilisé à l'intérieur d'une boucle telle un bloc switch, permet de quitter la boucle immédiatement.
=== default ===
Utilisé à l'intérieur d'un bloc switch, constitue l'option par défaut du sélecteur.
=== for ===
Introduit une boucle itérative deterministe.
for (i=0;i<5;i++)
{
alert(i);
}
For each : "for ...in ..." ou "for ... of ..."
var array = [1, 2, 3];
for (line in array)
{
alert(line);
}
for(i in array)
{
console.log(array[i].toString();
}
for(arrayItem of array)
{
console.log(arrayItem);
}
En tableau associatif :
var array = { "a" : 1, "b" : 2, "c": 3 };
for (line in array)
{
alert('Clé : ' + line + ', valeur : ' + array[line]);
}
=== do ===
Introduit une boucle itérative indeterministe conditionnelle avec test effectué à chaque tour par "while" :
i=0
do
{
i++
alert(i); // Affichera 1, puis 2, puis 3, puis 4, puis 5
}
while(i<5);
=== while ===
Introduit une boucle itérative indeterministe conditionnelle:
i=0
while(i<5)
{
i++; // Incrémenter i
alert(i); // Affiche 1, puis 2, puis 3, puis 4, puis 5
}
=== continue ===
Utilisé dans une boucle "for", "while" et "do", permet de sauter un tour.
for (i=-2;i<=2;i++)
{
if (i==0) continue; // Si i == 0, on passe directement à 1
alert(5/i); // On évite ainsi la division par zéro.
}
===== Gestion des erreurs =====
=== throw ===
Provoque une erreur personnalisée.
throw new Error("votre erreur");// a le même effet visuel que alert("votre erreur");
=== try ... catch ... finally ===
Évalue un bloc (try) en capturant les erreurs, tente de les gérer (catch) si elles se produisent, et quoiqu'il arrive, évalue un dernier bloc (finally).
===== Opérateur =====
=== in ===
Opérateur qui détermine l'appartenance à un objet. Dans une boucle for... in, permet de répéter des instructions pour chaque propriété d'un objet.
=== new ===
Opérateur qui permet l'instanciation d'un objet.
var mon_tableau = new Array();
=== instanceof ===
Cet opérateur permet de tester si une valeur est une instance d'un objet :
t = new Array();
alert(t instanceof Array); // Affiche true
alert(t instanceof Date); // Affiche false
=== typeof ===
Cet opérateur renvoie le type de la variable placée à droite.
Les valeurs renvoyées par typeof correspondent aux types de variables JavaScript, soit : boolean string number function object undefined.
=== delete ===
Cet opérateur permet de supprimer une propriété.
===== Valeurs spéciales =====
=== this ===
Dans le constructeur ou une méthode d'un objet, c'est une référence à l'objet. Hors de ce contexte, this référence l'objet global window.
=== true ===
Valeur booléenne "vrai".
if (true)
{
alert("Je m'affiche toujours");
}
=== false ===
Valeur booléenne "faux".
if (true)
{
if (ma_bool == false)
alert("C'est pas vrai...")
}
=== null ===
Valeur de type "object" qui ne référence rien.
=== undefined ===
C'est la valeur de toutes les variables inexistantes ou supprimées.
===== Fonctions prédéfinies =====
* decodeURL()
* décode une url codée
* decodeURLComponent()
* décode une URl codée - II
* encodeURL()
* coder une URL
* encodeURLComponent()
* code une URL - II
* eval()
* transforme une expression
* escape()
* transforme des signes ASCII en nombres
* isFinite()
* vérifie le domaine numérique de valeurs
* isNaN()
* vérifie si la valeur n'est pas un nombre
* parseFloat()
* transform en nombre avec décimales
* parseInt()
* transform en nombre entier
* Number()
* transforme un objet en nombre
* String()
* transforme le contenu d'un objet en une chaine de caractères
* unescape()
* transforme des nombres en caractères ASCII
===== Programmation avancée =====
=== Paradigme de programmation classe/objet ===
Premier exemple:
/**
* Modélisation d'une voiture
*
* @class Voiture
*/
var Voiture = (function () {
//'use strict';
Voiture.couleur = "verte";
// methode de classe
Voiture.construire = function (marque) {
return new Voiture(marque);
};
// constructeur
function Voiture(marque) {
this.marque = marque;
}
// méthodes d'instance
Voiture.prototype = {
rouler: function (direction) {
document.write("la voiture roule");
},
getMarque: function (){
return this.marque;
}
};
return Voiture;
}());
// ->
var saab = new Voiture('Saab');
var chrysler = Voiture.construire('Chrysler');
chrysler.rouler();
alert(saab.getMarque());
Deuxième exemple:
var article = new Object();
article.nom = "Livre";
article.prix_unitaire = 21.99;
article.quantite = 2;
Variante:
function Article(nom, prix_unitaire, quantite)
{
this.nom = nom;
this.prix_unitaire = prix_unitaire;
this.quantite = quantite;
this.resume = function(){
return this.nom+" x "+this.quantite+" à "+this.prix_unitaire+
" l'unité coûte(nt) "+( this.quantite*this.prix_unitaire );
}
return this;
}
var article = new Article( "Livre", 21.99, 2);
Troisième exemple:
var article = {
"nom" : "Livre",
"prix_unitaire" : 21.99,
"quantite" : 2,
"resume" : function(){
return this.nom+" x "+this.quantite+" à "+this.prix_unitaire+
" l'unité coûte(nt) "+( this.quantite*this.prix_unitaire );
}
};
Quatrième exemple avec Imbrications:
var commandes = [
{ "client": "Jean",
"articles": [
{ "nom": "Livre", "quantite": 2, "prix_unitaire": 21.99 } ,
{ "nom": "Stylo", "quantite": 4, "prix_unitaire": 0.79 }
],
"mode_paiement": "chèque"
},
{ "client": "Pierre",
"articles": [
{ "nom": "Livre", "quantite": 1, "prix_unitaire": 21.99 } ,
{ "nom": "Trombones", "quantite": 50, "prix_unitaire": 0.05 }
],
"mode_paiement": "espèces"
}
];
Création d'une classe:
class Book {
constructor(title, author, pages){
this.title = title;
this.author = author;
this.pages = pages;
}
} //création de la classe avec son constructeur.
var myBook = new Book("l'Histoire de Tao", "Will Alexander", 250);
// instanciation d'un objet book par le constructeur.
=== Methode de classe ===
Comme en Java classique: les méthodes créer dans une classe sont accessible depuis n'importe quel objet instancier de cette classe.
class BankAccount {
constructor(owner, balance) {
this.owner = owner;
this.balance = balance;
}
//Ici création de la méthode dite d'instance.
showBalance() {
console.log("Solde: " + this.balance + " EUR");
}
}
const newAccount = new BankAccount("Will Alexander", 500); //Instanciation d'un objet de la classe BankAccount.
newAccount.showBalance(); // Invocation de la méthode instance, imprime "Solde: 500 EUR" à la console.
Il y a également les méthode Static, invocable depuis l'évocation de la classe elle même sans avoir à l'instancier.
class BePolite {
static sayHello() {
console.log("Hello!");
}
static sayHelloTo(name) {
console.log("Hello " + name + "!");
}
static add(firstNumber, secondNumber) {
return firstNumber + secondNumber;
}
}
BePolite.sayHello(); // imprime "Hello!""
BePolite.sayHelloTo("Will"); // imprime "Hello Will!""
const sum = BePolite.add(2, 3); // sum = 5
===== Frameworks =====
==== Visual Studio Code ====
==== Dojo ====
==== jQuery====
==== Node.js====
==== React.js====
===== Développement Web avec js =====
==== DOM ====
Le DOM: Document Object Model 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 modifier avec le langage JavaScript.
Il faut voir le DOM comme un arbre ou chaque éléments peut avoir zero ou plusieurs enfants:
{{wiki:dom.png?300}}
==== Le document et accès à ses éléments ====
Le document est l'objet réprésentant notre page, auquel on a directement acces avec JavaScript il est le point de départ du DOM.
Principales fonctions de recherche d'éléments du DOM:
document.getElementByld()
Recherche un élément grâce à son " id ". On rappel qu'il n'y a qu'un seul élément avec un " id " donné.
Exemple:
Si on a dans notre page HTML la l'élément suivant:
My content
On aura pour accéder à cet élément avec js:
const myAnchor = document.getElementById('My-anchor');
document.getElementsByClassName()
Recherche un élément grâce à sa " Classe ". On rappel qu'il peut y avoir plusieurs éléments avec un " nom de classe " donné. Il renverra la liste des éléments des cette classe.
Exemple:
Si on a dans notre page HTML la l'élément suivant:
Contenu 1
Contenu 2
Contenu 3
On aura pour accéder à cet élément avec js:
const contents = document.getElementsByClassName('content');
const firstContent = contents[0];
document.getElementsByTagName()
Recherche un élément grâce à son " Tag name " soit son " nom de balise " donné. Il renverra la liste des éléments correspondants.
Exemple:
Si on a dans notre page HTML la l'élément suivant:
Contenu 1
Contenu 2
Contenu 3
On aura pour accéder à cet élément avec js:
const articles= document.getElementsByTagName('article');
const thirdArticle = contents[2];
document.querySelector()
Recherche un élément grâce à un selecteur qui permet de cibler certains éléments.
Exemple:
document.querySelector("#myId p.article > a")
fera une recherche dans l'élément ayant pour id = "#myId", mes éléments de type
* elt.parentElement nous retournera la "div" qui à l'id "parent".
* elt.nextElementSibling Nous retournera l'élément qui à l'"id" "next"
* elt.previousElementSibling nous retournera l'élément qui à l'id "previous.
==== Modifier le contenu d'un élément ====
Pour modifier le contenue d'un élément: deux fonction principale.
* innerHTML
* textContent
Attention ces deux fonction remplace directement le contenu actuel de l'élément par celui que vous précisez.
=== innerHTML ===
innerHTML demande à ce que vous entriez du texte représentant un contenu HTML:
Exemple:
let element = document.getElementById('main');
element.innerHTML = "- Elément 1
- Elément 2
";
L'élément qui à l'id 'main' aura un nouveau contenu: le HTML deviendra donc:
- Elément 1
- Elément 2
=== textContent ===
textContent , quant à elle, demande un simple texte qui ne sera pas interprété comme étant du HTML, le texte prendra la place du contenue de l'élément tel quel sans mise en forme.
=== Modifier des classes ===
Il est possible d'accéder directement à la liste des classes d'un élément avec la propriété:
classList
Cette propriété fournit aussi une série de fonctions permettant de modifier cette liste de classes. En voici quelques-unes:
* add(, [,...]) ajoute la ou les classes spécifiées.
* remove(, [,...] supprime la ou les classes spécifiées.
* contains() vérifie si la classe spécifiée est contenue par cet élément.
* replace (, ) remplace l'ancienne classe par la nouvelle classe.
Exemple:
element.classList.add("nouvelleClasse"); // Ajoute la classe nouvelleClasse à l'élément
element.classList.remove("nouvelleClasse"); // Supprime la classe nouvelleClasse que l'on venait d'ajouter
element.classList.contains("nouvelleClasse"); // Retournera false car on vient de la supprimer
element.classList.replace("oldClass", "newClass"): // Remplacera oldClass par newClass si oldClass était présente sur l'élément
=== Changer les styles d'un élément ===
Avec la propriété style, on peut récupérer et modifier les différents styles d'un élément.
style est un objet qui a une propriété pour chaque style existant.
Exemple:
element.style.color = "#fff"; // Change la couleur du texte de l'élément à blanche
element.style.backgroundColor = "#000"; // Change la couleur de fond de l'élément en noir
element.style.fontWeight = "bold"; // Met le texte de l'élément en gras
==== Modifier les attributs ====
Pour définir ou remplacer les attributs d'un élément, vous pouvez utiliser la fonction setAttribute .
element.setAttribute(, ) prend en paramètres le nom de l'attribut et sa valeur et ne retourne rien.
On peut également utiliser les fonctions:
getAttribute
removeAttribute
pour avoir accès à plus de contrôle sur les attributs.
Exemple:
element.setAttribute("type", "password"); // Change le type de l'input en un type password
element.setAttribute("name", "my-password"); // Change le nom de l'input en my-password
element.getAttribute("name"); // Retourne my-password
==== Créez de nouveaux éléments ====
=== Création d'un nouveau élément ===
C'est la fonction document.createElement() qui va permettre de créez de nouveaux éléments puis nous l'insérerons dans le DOM.
document.createElement()
prend en paramètre le nom de la balise de notre élément et nous renvoie l'élément nouvellement créé.
const newElement = document.createElement("div");
Un élément créé avec cette fonction ne fait pas encore partie du document, vous ne le verrez donc pas sur votre page. Pour le voir, il va d'abord falloir l'ajouter en tant qu'enfant à un élément.
=== Ajoutez des enfants ===
La façon la plus connue pour ajouter un élément dans notre page est appendChild
Cette fonction permet d'ajouter un élément à la liste des enfants du parent depuis lequel la fonction est appelée.
parentNode.appenChild() prend en paramètre l'élément à ajouter en tant qu'enfant. L'élément depuis lequel on appelle cette fonction devient donc le parent de notre élément.
Exemple:
const newElt = document.createElement("div");
let elt = document.getElementById("main");
element.appendChild(newElt);
Avec le code ci-dessous, nous venons de créer un nouvel élément de type, mais qui n'est pas encore rattaché au DOM. Nous avons ensuite récupéré l'élément ayant pour id main. Enfin, nous avons ajouté notre nouvel élément dans les enfants de l'élément #main .
=== Ajoutez des enfants ===
Il existe les fonctions removeChild et replaceChild, afin de respectivement supprimer et remplacer un élément.
prentNode.removeChild() prend en paramètre l'élément à supprimer du parent et retourne cet élément.
parentNode.replaceChild(, ) prend en paramètres le nouvel élément ainsi que l'élément à remplacer, et retourne ce dernier.
Exemple:
const newElt = document.createElement("div");
let elt = document.getElementById("main");
elt.appendChild(newElt);
elt.removeChild(newElt); // Supprime l'élément newElt de l'élément elt
elt.replaceChild(document.createElement("article"), newElt); // Remplace l'élément newElt par un nouvel élément de type article
==== Ecoutez des événements ====
Un événement est une réaction à une action émise par l'utilisateur, comme le clic sur un bouton ou la saisie d'un texte dans un formulaire.
Un événement en JavaScript est représenté par un nom ( "click" , "mousemove" ...) et une fonction que l'on nomme une "collback".
Un événement est par défaut propagé, c'est à dire que si nous n'indiquons pas à l'événement que nous le traitons, il sera transmis à l'élément parent, et ainsi de suite jusqu'à l'élément racine.
Cette fonction "callback", c'est nous qui allons la spécifier. Elle sera appelée à chaque fois que l'action que l'on désire suivre est exécutée. Cela signifie que si l'on désire suivre le clic sur un élément, notre fonction sera appelée à chaque fois que l'utilisateur cliquera sur cet élément.
=== Réagir lors d'un clic sur un élément ===
Ecouter un événement:
addEventListener()
Cette fonction nous permet d'écouter tous types d'événements (pas que le clic).
addEventListener(,) prend en paramètres le nom de l'événement à écouter:
Tableau des événement à écouter:
^Type événement ^ Description ^ Documentation ^
| Animation | Liés à lAPI web Animation | Événements d'animation déclenchés sur Document https://developer.mozilla.org/fr/docs/Web/API/Document#animation_events, Window https://developer.mozilla.org/fr/docs/Web/API/Window#animation_events, HTMLElement https://developer.mozilla.org/fr/docs/Web/API/HTMLElement#animation_events. |
| Récupération asynchrone des données | Événements liés à l'extraction des données. | Événements déclenchés sur AbortSignal https://developer.mozilla.org/fr/docs/Web/API/AbortSignal#events, XMLHttpRequest https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest#events, FileReader https://developer.mozilla.org/fr/docs/Web/API/FileReader#events. |
| Presse-papiers | Les événements liés à l'API Clipboard API. Utilisé pour notifier lorsque le contenu est coupé, copié ou collé. https://developer.mozilla.org/fr/docs/Web/API/Clipboard_API | Événements déclenchés sur Document, Element, Window. |
| Composition | Événements liés à la composition ; saisie "indirecte" du texte (au lieu d'utiliser les touches normales du clavier).Par exemple, un texte saisi via un moteur de conversion de la parole en texte, ou l'utilisation de combinaisons de touches spéciales qui modifient les pressions sur le clavier pour représenter de nouveaux caractères dans une autre langue. | Événements déclenchés sur Element. |
| Transition CSS | Événements liés aux Transitions CSS. Fournit des événements de notification lorsque les transitions CSS commencent, s'arrêtent, sont annulées, etc. https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Transitions | Événements déclenchés sur Document, HTMLElement, Window. |
| Base de données | Événements liés aux opérations de la base de données : ouverture, fermeture, transactions, erreurs, etc. | Événements déclenchés sur IDBDatabase https://developer.mozilla.org/fr/docs/Web/API/IDBDatabase#events, IDBOpenDBRequest https://developer.mozilla.org/fr/docs/Web/API/IDBOpenDBRequest#events, IDBRequest https://developer.mozilla.org/fr/docs/Web/API/IDBRequest#events, IDBTransaction https://developer.mozilla.org/fr/docs/Web/API/IDBTransaction#events |
| Glisser/Déposer, Roue | Les événements liés à l'utilisation de l'API Glisser/Déposer https://developer.mozilla.org/fr/docs/Web/API/HTML_Drag_and_Drop_API et WheelEvent https://developer.mozilla.org/fr/docs/Web/API/WheelEvent. | Les événements de Glisser/Déposer déclenchés sur Document, Les événements de la Roue déclenchés sur Document (en-US) et Element (en-US) |
| Focus | Les événements liés aux éléments qui gagnent et perdent le focus. | Événements déclenchés sur Element, Window. |
| Formulaire | Événements liés à la construction, la réinitialisation et la soumission de formulaires. | Événements déclenchés sur HTMLFormElement. |
| Plein écran | Evénements relatifs à l'API Fullscreen API https://developer.mozilla.org/fr/docs/Web/API/Fullscreen_API. | Événements déclenchés sur Document, Element. |
| Manette de jeu | Evénements relatifs à l'API Gamepad API. https://developer.mozilla.org/fr/docs/Web/API/Gamepad_API | Événements déclenchés sur Window. |
| Historique | Les événements liés à l'API de Manipulation de l'historique du navigateur. https://developer.mozilla.org/fr/docs/Web/API/History_API | Événements déclenchés sur Window. |
| Gestion de l'affichage du contenu des éléments HTML | Événements liés à la modification de l'état d'un élément d'affichage ou textuel. | Événements déclenchés sur HTMLDetailsElement (en-US), HTMLDialogElement, HTMLSlotElement (en-US). https://developer.mozilla.org/fr/docs/Web/API/HTMLDialogElement#events |
| Entrées | Événements liés aux éléments d'entrée HTML, par ex. ,