owned this note
owned this note
Published
Linked with GitHub
---
title: Les bases de la programmation Javascript
tags: support, javascript
robots: noindex, nofollow
author: Julien Noyer
---
# Communiquer avec un robot
*Les bases de la programmation Javascript*
JavaScript est un langage de programmation de scripts principalement employé dans les pages web interactives mais aussi pour les serveurs avec l’utilisation (par exemple) de Node.js. C’est un langage orienté objet à prototype, c’est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes, mais qui sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d’en créer des objets héritiers personnalisés.
<br><br>
## Utiliser la balise script
Comme avec le code CSS, il est possible d’intégrer du Javascript de différentes façons dans une page web. Pour améliorer les performances d’affichage de votre page, il est recommandé de placer le Javascript dans un fichier .js extérieur au document principal (comme pour les fichiers .Css). Les fichiers Javascript sont ensuite intégrés dans une balise `let users = ["Frédérique", "Pascal", "Matthieu"];<script>…</script>` juste avant la balise `</body>`.
```htmlmixed=
<script type="text/javascript">
alert("Hello World!");
</script>
```
### Définition des éléments
- `<script>…</script>` : La propriété `type=“…”` permet de spécifier la nature du script (option)
- `alert()` : La commande alert() affiche une boîte de dialogue en JavaScript
<br><br>
## Importer un fichier JS
Le Javascript est un language de programmation orienté objet, c’est-à-dire qu’il permet de créer des boîtes virtuelles qui contiennent différentes caractéristiques. Ces boîtes et leurs caractéristiques sont ensuite utilisées pour construire des programmes, comme des Legos. La particularité de Javascript est d’être activée une fois que le rendu de la page est terminé, c’est pourquoi le code Javascript doit être écrit à la fin du document.
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8” />
<title>Bonjour le monde</title>
</head>
<body>
<h1>Hello World!</h1>
<script src="js/script.js"></script>
</body>
</html>
```
### Définition des éléments
- `src=“…” `: attribut permettant de spécifier l’adresse du script
> L’importation du fichier .js ce fait avant le balise `</body>` car il doit s’exécuter une fois la page chargée
<br><br>
## Définition d'une variable
Comme vu précédemment, le JavaScript utilise le principe des boîtes, que nous appellerons des variables, pour y associer des caractéristiques. Ces variables sont stockées dans la mémoire de l’ordinateur client, il est alors possible de les réutiliser, de les associer à des actions et bien plus encore. Les variables sont composées de deux éléments-clefs : le nom de la variable et la valeur de la variable.
<br><br>
## Stocker une variable dans la mémoire vive (RAM)
Le Javascript s’exécutant une fois la page entièrement chargée, nous pouvons enregistrer les actions de l’utilisateur pour déclencher des scripts qui répondront à ses actions. Les scripts utiliseront donc la mémoire de l’ordinateur client pour enregistrer ces réponses et agir en conséquence.
```javascript=
// Création d’une variable qui stock une réponse
let leNom = prompt(“Quel est ton nom ?”);
// La réponse est affichée dans la console
console.log("Bonjour " + leNom);
```
### Définition des éléments
- `//` : Commentaire JavaScript : //, /* */
- `let` : Déclaration d’une variable : let, const, var (ES5)
- `prompt()` : Commande permettant d’afficher un boîte de dialogue avec un champs de texte
- `console.log()` : Commande permettant d’afficher le résultat dans l’outil de développement
- `“Bonjour” + leNom` : Concaténation d’une string et d’une variables
<br><br>
## Les variables primitives
Pour réaliser un code, JavaScript dispose de trois types de variables de base (dit type primitive) : String, Number et Boolean.
```javascript=
let string = “Julien Noyer“;
let integer = 1638;
let float = 2.345;
let boolean = true;
```
### Définition des éléments
- `string` : Variable de type texte ayant pour valeur une chaîne de caractères, la valeur est écrite entre guillemets
- `integer` : Variable de type entier ayant pour valeur un ou plusieurs chiffres entiers, la valeur est écrite sans guillemets
- `float` : Variable de type nombre flottant ayant pour valeur un ou plusieurs chiffres avec virgule, la valeur est écrite sans guillemets
- `boolean` : Variable représentant une réponse vraie ou fausse les valeurs sont true ou false
---
<br><br><br><br><br><br>
# Manipuler les données en Javascript
*Savoir travailler avec des informations*
## Les opéateurs élémentaires en Javascript
JavaScript possède différents types d’opérateurs qui permettent de réaliser des opérations plus ou moins complexes avec des variables. Le premier opérateur que nous avons utilisé et l’opérateur d’affectation qui permet de définir le contenu d’une variable et l’opérateur d’addition qui permet de concaténer des variables ou de les additionner.
- `let number = 10;` : La variable number vaut 10
- `number++;` : La variable number vaut maintenant 11
- `number–;` : La variable number vaut maintenant 10
- `let addition = 5 + 5;` : La variable addition vaut 10
- `let soustraction = 15 - 5;` : La variable soustraction vaut 10
- `let multiplication = 5 * 5;` : La variable multiplication vaut 25
- `let division = 10 / 5;` : La variable division vaut 2
- `let modulo = 23 % 5;` : La variable modulo vaut 3 (reste d’une division)
- `let x = 10;` : La variable x vaut 10
- `let y = 15;` : La variable y vaut 15
- `x += y;` : La variable x vaut maintenant 25 (x + y)
- `y -= x;` : La variable y vaut maintenant -10 (y - x)
- `let firstName = “Julien”;` : La variable firstName contient “Julien”
- `let lastName = “Noyer”;` : La variable lastName contient “Noyer”
- `let fullName = firstName + " " + lastName;` : La variable fullName contient “Julien Noyer”
<br><br>
## Les tableaux en Javascript
Les tableaux (array en anglais) sont des variables qui ont pour particularité de pouvoir recevoir plusieurs valeurs et de différents types. Pour reprendre le principe des boîtes, une variable de type array serait un conteneur pour plusieurs boîtes. Les tableaux sont très utiles car ils permettent d’inclure dans une seule variable plusieurs entrées contenant elles-même des variables.
```javascript=
let userName = "Julien Noyer";
let myArray = ["Some text", 2391, false, userName];
// Afficher les éléments du tableau
console.log(myArray[0]); // Affiche "Some text"
console.log(myArray[1]); // Affiche 2391
console.log(myArray[2]); // Affiche false
console.log(myArray[3]); // Affiche "Julien Noyer"
// Connaître la taille d’un tableau
console.log(myArray.length); // Affiche 4
```
### Définition des éléments
- `[…]` : Les items - ou index - d’un tableau sont écrits entre crochets et séparés par une virgule
- `myArray[…]` : En language de programmation, la numérotation d’un tableau commence par la valeur zéro, pour afficher une valeur il faut mettre entre crochets le numéro de la valeur
- `length` : Propriété d’un tableau permettant d’en connaitre la taille
<br><br>
## Manipuler les données d'un tableau en Javascript
Comme pour les autres variables, le contenu d’un tableau peut être modifié après sa déclaration. Pour ce faire, il faut utiliser la commande .push(…) pour ajouter une nouvelle entrée au tableau. Il est également possible de remplacer une entrée dans le tableau en utilisant la commande .splice(…). La gestion des tableaux représente un principe important dans la programmation orientée objet.
```javascript=
let users = ["Frédérique", "Pascal", "Matthieu", "Julien"];
let newUser = prompt("Quel est ton prénom ?");
users.push(newUser);
console.log(users);
let removed = users.splice(1, 2, "Jacques", "Paul");
console.log(removed);
console.log(users);
```
### Définition des éléments
- `push()` : Fonction permettant d’ajouter des données dans un tableau
- `splice()` : Fonction permettant de supprimer une entrée depuis l’index d’un tableau et de la remplacer ou non par une autre
---
<br><br><br><br><br><br>
# Programmer en Javascript
*Coomprendre l'utilisation des fonctions*
## Effectuer un calcule simple
En effectuant des opérations simples, il est possible d’afficher un message personnalisé à l’utilisateur qui prendra en compte les paramètres qu’il aura renseignés dans la fenêtre prompt().
```javascript=
let currentYear = 2015;
// Trois questions sont posées à l’utilisateur
let firstName = prompt("Quel est ton prénom ?");
let lastName = prompt("Quel est ton nom ?");
let age = prompt("Quel est ton âge ?");
// Calcul de la date de naissance de l’utilisateur
let birthYear = currentYear - parseInt(age);
console.log("Bonjour " + firstName + " " + lastName + ", ton année de naissance est : " + birthYear);
```
### Définition des éléments
- `parseInt()` : Commande permettant de transformer une chaîne de caractères en chiffres
<br><br>
## Ecrire une fonction Javascript
Les fonctions font partie des briques fondamentales de JavaScript, une fonction est un ensemble d’instructions JavaScript effectuant une ou plusieurs tâches. Pour utiliser une fonction, il faut d’abord définir ces instructions avant de l’appeler avec ou sans paramètre. Les fonctions sont très utiles pour réaliser des instructions à plusieurs reprises sans avoir à les écrire plusieurs fois.
```javascript=
function helloWorld() {
return "Hello World!";
}
helloWorld(); // Affiche la string "Hello World!”
function fullName(firstName, lastName) {
return "Hello World " + firstName + " " + lastName;
}
fullName("Julien", "Noyer"); // Affiche la string "Hello World Julien Noyer"
```
### Définition des éléments
- `function` : le mot clés function permet de déclarer une fonction en Javascript
- `helloWorld()` : Fonction sans paramètre
- `fullName(firstName, lastName)` : Fonction avec paramètre, les paramètres sont ajoutés à l’appel de la fonction
> Le mot-clé `return` permet de renvoyer les donnés récupérés par la fonction
<br><br>
## La programmation orientée objet
Créée en 1960 par Ole-Johan Dahl et Kristen Nygaard, la programmation orientée objet applique aux langages de programmation le principe des objets physiques tel qu’une voiture, un jouet ou-bien un immeuble. Comme dans le monde réel, un objet JavaScript possède des propriétés et des comportements qui définissent leur type.
<br><br>
## Les objets en Javascript
Les objets JavaScript sont les variables les plus puissantes, ils combinent un ensemble de propriétés, comprenant noms et valeurs associées, et peuvent également contenir des fonctions entières. La structure dun objet est assez proche de celle d’un tableau, l’avantage d’un objet est qu’il permet de labelliser les valeurs qu’il contient.
```javascript=
let julien = {
firstName: "Julien",
lastName: "Noyer",
pays: "France",
age: 36
}
console.log(julien.firstName); // Affiche "Julien"
console.log(julien.pays); // Affiche "France"
console.log(julien.age); // Affiche 36
julien.pays = "Italie";
console.log(julien.pays); // Affiche maintenant "Italie"
```
### Définition des éléments
- `{…}` : Les propriétés de l’objet sont écrits entre accolades et séparées par une virgule
- `julien.firstName` : L’appel des propriétés ce fait avec un point après le nom de l’objet suivit de la propriété
- `julien.pays = “…”` : Pour modifier une propriété il suffi de l’appeler pour lui affecter une nouvelle valeur
<br><br>
## Ajouter une fonction à un objet
Il est possible d’ajouter directement une fonction en paramètre d’un objet pour, par exemple, définir automatiquement le nom complet d’un utilisateur. Pour cela, il suffit de passer en paramètre de l’objet, une fonction qui prendra en référence les paramètres de l’objet.
```javascript=
let julien = {
firstName: "Julien",
lastName: "Noyer",
pays: "France",
age: 36
// Ajout d’une fonction qui calcule le nom complet
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
console.log(julien.fullName()); // Affiche "Julien Noyer"
```
### Définition des éléments
- `fullName: function(){…}` : Pour pouvoir accéder aux paramètres de l’objet il faut ajouter l’opérateur this avant des les appeler
- `julien.fullName()` : L’appel de la function() ce fait de la même façon qu’un paramètre d’objet classique mais suivi par les parenthèses
<br><br>
## Créer un type d'objet (constructor)
La programmation orientée objet nous permet de créer nos propres types d’objets pour ensuite créer des objets par type. Un type d’objet s’écrit en UpperCamelCase et possède des propriétés et des fonctionnements qui sont automatiquement associés aux nouveaux objets. Il faut donc dans un premier temps définir le type d’objet, ses propriétés et ses fonctions pour ensuite créer des objets du type défini
```javascript=
function Users (firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
};
Users.prototype.fullName = function() {
return this.firstName + " " + this.lastName;
};
let julien = new Users("Julien", "Noyer");
let chuck = new Users("Chuck", "Norris");
console.log(julien.fullName()); // Affiche "Julien Noyer"
console.log(chuck.fullName()); // Affiche "Chuck Norris"
```
### Définition des éléments
- `function Users(){…}`: Un type d’objet - ou constructor - est une fonction qui prend en paramètres les propriétés du type d’objet, le mot-clé this. fait référence au type d’objet
- `Users.prototype`: Pour ajouter une fonction à un objet ilfaut utilier la propriété prototype
- `new Users(…)`: La création d’une variable issue d’un objet se fait avec l’opérateur new
- `julien.fullName()`: La fonction s’applique à tous les objets créés
---
<br><br><br><br><br><br>
# Manipuler un Robot
*Comprendre les conditons et la manupulation du DOM*
Avec les technologies HTML et CSS, JavaScript est parfois considéré comme l’une des technologies cœur du World Wide Web. Le langage JavaScript permet des page webs interactives, et à ce titre est une partie essentielle des application web. Une gande majorité des site web l’utilisent, et la majorité des navigateur web disposent d’un moteur JavaScript dédié pour l’interpréter, indépendament des considérations de sécurité qui peuvent se poser le cas échéant.
<br><br>
## Les opérateurs d'affectation
Un opérateur d’affectation permet de modifier la valeur d’une variable. L’opérateur que nous avons déjà utilisé et l’opérateur égale (=) qui permet de définir la valeur d’une variable mais il est possible de la modifier ensuite avec l’utilisation d’autres opérateurs.
### Définition des opérateurs d'affectation
| Nom | Opérateur | Signification |
| --- | --- | --- |
| Affectation | x = y | __x <- y__
| Affectation après addition | x += y | __x <- x + y__
| Affectation après soustraction | x -= y | __x <- x - y__
| Affectation après multiplication | x *= y | __x <- x * y__
| Affectation après division | x /= y | __x <- x / y__
| Affectation du reste | x %= y | __x <- x % y__
| Affectation après exponentiation | x **= y | __x <- x ** y__
| Affectation après décalage à gauche | x <<= y | __x <- x << y__
| Affectation après décalage à droite | x >>= y | __x <- x >> y__
| Affectation après décalage à droite non-signé | x >>>= y | __x <- x >>> y__
| Affectation après ET binaire | x &= y | __x <- x & y__
| Affectation après OU exclusif binaire | x ^= y | __x <- x ^ y__
| Affectation après OU binaire | x \|= y | __x <- x \| y__
> Retrouver la liste complète des opérateurs d’affectation sur le site de MDN
<br><br>
## Les opérateurs de comparaison
Les [opérateurs de comparaisons](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison) permettent de vérifier la similitude ou non-similitude entre plusieurs valeurs. Ils sont utilisé pour effectuer des comparaisons au sein d’un programme pour réaliser des actions spécifiques.
```js
let number = 15;
number == 15; // true
number == "15"; // true
number != 20; // true
number != "15"; // false
number != 15; // false
number === 15; // true
number === "15"; // false
number !== 15; // false
number !== "15"; // true
number > 15; // false
number < 16; // true
number >= 15; // true
number <= 16; // true
```
### Définition des opérateurs de comparaison
- `==` : Egallité simple
- `!=` : Inégallité simple
- `===` : Egallité strict
- `!==` : Inégallité strict
- `< / >` : Inférieur / supérieur à
- `<= / >=` : Inférieur / supérieur ou égal à
> Retrouver la liste complète des opérateurs de comparaison sur le site de [MDN](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison)
<br><br>
## Les opérateurs logique
Principalement utilisés sur des valeurs bollean, [les opérateurs logiques](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques) permettent de comparer deux valeurs pour effectuer des opérations quand la logique est respectée (true) ou non (false). Certains opérateurs peuvent renvoyer des valeurs non boolean s’ils sont utilisés sur des variables de type number ou string.
```javascript=
let number1 = 10, number2 = 10, number3 = 5;
number1 == 10 && number2 == 10; // Renvoi true
number1 == 10 && number3 == 10; // Renvoi false
number2 == 5 && number3 == 5; // Renvoi false
number1 == 10 || number2 == 10; // Renvoi true
number1 == 10 || number3 == 10; // Renvoi true
number2 == 5 || number3 == 5; // Renvoi true
console.log(!true); // Affiche false
console.log(!false); // affiche true
```
### Définition des opérateurs logiques
- `&&` : Est logique
- `||` : Ou logique
- `!` : Inverser une valeur boolean
> Les [opérateurs logiques](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques) permettent de comparer des variables comme les [opérateurs de comparaisons](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison) mais de façon logique
---
<br><br><br><br><br><br>
# Affiner le comportement d'un robot
*Comprendre les conditions*
## Les instructions if, else if et else
La [condition if](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else) exécute une commande si une condition vérifiée est vraie, il est suivi d’une condition else qui exécute une commande si la condition vérifiée est fausse. Il est possible de définir plusieurs conditions avec l’opérateur [else if](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else) pour décliner les commande à effectuer.
```javascript=
let userChoice = prompt("Quelle couleur veux-tu traduire en anglais ?");
if (userChoice === "rouge") {
console.log("Rouge se dit Red en anglais.");
} else if (userChoice === "vert"){
console.log("Vert ce dit Green an anglais.");
}
} else {
console.log("Je ne connais pas cette couleur...");
}
```
### Définition des instructions
- `if(…){…}` : L’instruction if vérifi la condition entre parenthèses
- `else if(…){…}` : L’instruction else if permet de vérifier plusieurs conditions au sein d’une condition if
- `else{…}` : L’instruction else permet de définir une réponse quand les conditions ne sont pas respectées
<br><br>
## Le switch, un alternative au if, else if et else
La condition if exécute une commande si une condition vérifiée est vraie, il est suivi d’une condition else qui exécute une commande si la condition vérifiée est fausse. Il est possible de définir plusieurs conditions avec l’[instruction switch](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch) pour décliner les commande à effectuer.
```javascript=
let userChoice = prompt("Quelle couleur veux-tu traduire en anglais ?");
switch (userChoice) {
case "rouge":
console.log("Rouge se dit Red en anglais.");
break;
case "vert":
console.log("Rouge se dit Red en anglais.");
break;
case "bleu":
console.log("Rouge se dit Red en anglais.");
break;
default:
console.log("Je ne connais pas cette couleur...");
break;
}
```
### Définition des instructions
- `switch(...)` : Inspecter la valeur de la variable
- `case "..."` : Définition des cas
- `break;` : Terminer le cas
- `default:` : Définir le cas par défaut
---
<br><br><br><br><br><br>
# Faire réfléchir un robot
*Comprendre le fonctionnement des boucles*
## Les tableaux et les boucles
Une fois que le [tableau](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) contient plusieurs entrées, il est possible d’effectuer des actions sur toutes les entrées du tableau. Le principe en programmation est de ne jamais répéter une ligne de code, c’est pour cette raison qu’il faut créer des boucles sur les tableaux plutôt que de répéter le même code pour chaque entrée du tableau. Il existe deux types de boucle : while et for qui doivent respecter une orthographe stricte.
### Boucle while()
```javascript=
let users = ["Frédérique", "Pascal", "Matthieu"];
// Initialisation de la boucle
let i = 0;
// Lancement de la boucle while
while (i < users.length) {
console.log(users[i]);
i++;
}
```
Pour lancer une [boucle while(...)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while) il faut initier une __variable i valant zéro__, la boucle se lit ensuite de la façon suivante : à chaque fois que __i est inférieure au nombre d’entrée__ du tableau users, exécute __une action__ et__ incrémente i de un__. La [boucle while(...)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while) __s’arrête quand i n’est plus inférieur au nombre d’entrées__ du tableau, la boucle ci-dessus affichera dans la console chacun des prénoms et se stoppera.
### Boucle for()
```javascript=
let users = ["Frédérique", "Pascal", "Matthieu"];
// Lancement de la boucle for
for (var i = 0; i < users.length; i++) {
console.log(users[i]);
}
```
Dans une [boucle for(...)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for), __la variable i est initiée et incrémentée directement dans la boucle__, l’action à faire est ensuite placée entre accolades. La [boucle for(...)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for) ce __stop quand i n’est plus inférieur au nombre d'entrée__ du tableau.
> La variable i est primordiale dans l’utilisation des deux boucles : il faut __absolument incrémenter i à la fin de la boucle__ pour ne pas exécuter des boucles infinies. Car si __i vaut toujours zéro__, alors il ne sera __jamais égale au nombre d’entrées__ du tableau.
<br><br>
## Les objets et les boucles
Tout comme un [tableau](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array), il est possible d’effectuer une boucle sur un [objet](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object) pour effectuer une opération similaire sur chaque propriété de l’objet. Javascript a prévu une boucle particulière pour les objets qui s’appelle [for...in](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...in).
```javascript=
let julien = {
firstName: "Julien",
lastName: "Noyer",
age: 36
};
for (var prop in julien) {
console.log(prop + " = " + julien[prop]);
}
// Affiche dans la console :
// firstName = Julien
// lastName = Noyer
// age = 36
```
> Le mot-clef __prop__ permet de récupérer la propriété de l’objet et __julien[prop]__ permet de récupérer la valeur de la propriété
---
<br><br><br><br><br><br>
# Manipulation du DOM
*Comprendre la modification du HTML en JavaScript*
Le [Document Object Model (DOM)](https://fr.wikipedia.org/wiki/Document_Object_Model) est une interface de programmation normalisée par le [W3C](https://www.w3.org), qui permet à des scripts d'examiner et de modifier le contenu du navigateur web1. Par le DOM, la composition d'un document HTML ou XML est représentée sous forme d'un jeu d'objets – lesquels peuvent représenter une fenêtre, une phrase ou un style, par exemple – reliés selon une structure en arbre1. À l'aide du DOM, un script peut modifier le document présent dans le navigateur en ajoutant ou en supprimant des nœuds de l'arbre1.
<br><br>
## Ajouter du HTML en JavaScript
Javascript permet de manipuler le DOM (ou arbre du document HTML) pour réaliser des pages HTML dynamiques. Il existe différentes façons d’ajouter des balises HTML dont voici la version la plus simple.
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
```
```javascript=
document.write("<p>Une balise de texte en JavaScript</p>");
```
### Résultat
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<script type=”text/javascript” src=”js/script.js”></script>
<p>Une balise de texte en JavaScript</p>
</body>
</html>
```
> La fonction [write(...)](https://developer.mozilla.org/fr/docs/Web/API/Document/write) permet d'ajouter une bbalise HTML après la balise de `<script>`.
<br><br>
## Sélectionner une balise du DOM
Il est possible de modifier une balise déjà présente sur la page HTML en l’identifiant par son ID, sa class ou son type. Une fois sélectionnée, il est possible d’y ajouter du contenu ou du style.
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1 id=”title” class=”hello”>Titre principal</h1>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
```
```javascript=
let title = document.getElementById('title');
let hello = document.getElementsByClassName('hello');
let mainTitle = document.getElementsByTagName('h1');
let tag = document.querySelector('h1');
let tags = document.querySelectorAll('h1');
```
> C'est différentes méthodes permettent de sélectionner une balise selon sont type.
<br><br>
## Modifier le texte d'une balise
Lorsqu’elle est sélectionnée, il est possible de modifier le contenu d’une balise avec la [propriété textContent](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent)
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<section id="mySection">Ceci est un <span>exemple de</span> texte</div>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
```
```javascript=
let text = document.getElementById("mySection").textContent;
document.getElementById("mySection").textContent = "Un autre texte";
```
### Résultat
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<section id="mySection">"Un autre texte</div>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
```
> Pour modifier le contenu HTML de l abalise il faut utiliser la [propriété innerHTML](https://developer.mozilla.org/fr/docs/Web/API/Element/innertHTML)
<br><br>
## Manipuler les class d'une balise
La [propriété classList](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) permet d’ajouter ou de supprimer une class sur une balise HTML.
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<section id="mySection" class="sectionClass"></div>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
```
```javascript=
let element = document.getElementById("mySection").textContent;
element.classList.remove("sectionClass");
element.classList.add("visible");
element.classList.toggle("visible");
```
> Une fois la [propriété classList](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) invoqué il est possible d'ajouter, de supprimer ou d'inverser des class
<br><br>
## Ajouter un enfant dans le DOM
Comme pour la commande [document.write](https://developer.mozilla.org/fr/docs/Web/API/Document/write), il existe une façon plus solide d’ajouter des balises dans une page HTML..
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<header></header>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
```
```javascript=
let title = document.createElement("h1");
title.textContent = "Hello World!";
document.querySelector('header').appendChild(title);
```
> La méthode [appendChild()](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) permet de définir l'endroit où ajouter la balise HTML
<br><br>
## Modifier le style d'un balise
Le style d’une balise peut être modifié en JavaScript grâce à la commande [style](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/style).
```htmlmixed=
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<p id=myPara>Un texte sans style CSS</p>
<script type=”text/javascript” src=”js/script.js”></script>
</body>
</html>
```
```javascript=
let paraTag = document.getElementById(“monID”);
paraTag.style.color = "red"; // Le texte sera de couleur rouge
```
> Pour la bonne syntaxe des styles il est important de se référer au site de [MDN]((https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/style))
---
<br><br><br><br><br><br>
# Ressources
## Liens utiles
La liste ci-dessous contient les liens utiles vers des supprots de cours :
- [Attribut src](https://www.w3schools.com/tags/att_script_src.asp) _Ajouter un script_
- [Les variables](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/var) _Définition_
- [Les fonctions](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions) _Définition_
- [Les objets](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object) _Définition_
- [Le constructor](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/constructor) _Définition_
- [Commande Prompt](https://developer.mozilla.org/fr/docs/Web/API/Window/prompt) _Ouvrir une fenêtre surgissante_
- [Les propriétés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Fonctions/arguments) _Définition_
- [Commande Console](https://developer.mozilla.org/fr/docs/Web/API/Console) _Visualiser les retours_
- [Variable primitive](https://developer.mozilla.org/fr/docs/Glossaire/Primitive) _Définition_
- [Types d’opérateurs](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs) _Effectuer des calcules_
- [Expressions et Opérateurs](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Opérateurs) _Définition_
- [Les tableaux](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array) _Définition_
- [Propriété Lenght](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/length) _Connaitre la taille d'un tableau_
- [Fonction push()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/push) _Ajouter une donnée dans un tableau_
- [Fonction splice()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/splice) _Modifier les items d'un tableau_
- [Fonction parseInt()](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/parseInt) _Changer une string en number_
- [Mot clef return](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/return) _Définition_
- [L'opérateur this](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/L_opérateur_this) _Définition_
- [Opérateur d’affectation](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation) _Définir des variables_
- [Opérateur de comparaison](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison) _Comparer des variables_
- [Opérateur logique](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques) _Définition_
- [Condition if...else](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/if...else) _Gérer des conditions 1_
- [Instruction switch](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/switch) _Gérer des conditions 2_
- [Boucle while(...)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/while) _Gérer des boucles 1_
- [Boucle for(...)](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for) _Gérer des boucles 2_
- [Boucle for...in](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/for...in) _Gérer des boucles sur une objet_
- [Fonction write(...)](https://developer.mozilla.org/fr/docs/Web/API/Document/write) _Ecrire des balises HTML_
- [Propriété textContent](https://developer.mozilla.org/fr/docs/Web/API/Node/textContent) _Modifier le texte d'une balise_
- [Propriété innerHTML](https://developer.mozilla.org/fr/docs/Web/API/Element/innertHTML) _Modifier le HTML d'une balise_
- [Propriété classList](https://developer.mozilla.org/fr/docs/Web/API/Element/classList) _Modifier les class d'une balise_
- [Fonction appendChild()](https://developer.mozilla.org/fr/docs/Web/API/Node/appendChild) _Ajouter une balise HTML dans une autre_
Google Drive
Gist
Clipboard
Sign in with Wallet
