nicot3m

Commencer

Prérequis avant de commencer

Environnement

Windows 10 et le navigateur

Nous pouvons utiliser la console intéractive (touche F12) du navigateur Chrome pour tester du code simple.

Ma première commande

Hello world

La méthode console.log

Elle permet d'afficher un message dans la console Web.
👍 Une bonne pratique est d'ajouter un point-virgule après chaque instruction.

						
> console.log("Hello world!");
Hello world!

La méthode windows.alert

Elle permet d'afficher une boite de dialogue dans le navigateur.

```
						
> window.alert("Hello world!");
```

```
						
Hello world!
 OK 
```

Les commentaires

Il y a deux moyens pour rajouter des commentaires.

Une ligne de commentaires

Avec les doubles slash

```
>  // Une ligne de commentaire
```

Plusieurs lignes de commentaires

Avec slash étoile


> /* Plusieurs lignes 
  de commentaires */

Les variables

Une variable est un conteneur pour stocker une valeur.

Dans ce chapitre, nous allons voir les déclarations de variables, les différents types et comment les utiliser.

Déclaration

La déclaration permet de nommer une variable.

Pour déclarer une variable on utilise le mot clé var, let ou const.
L'initialisation est l'action d'assigner une valeur pour la première fois à une variable.
Il est possible de déclarer et d'initialiser une variable en même temps.

L'instruction var

Elle permet de déclarer une variable et éventuellement d'initialiser sa valeur.

						
> var age = 44;
> console.log(age);
44

L'instruction let

C'est un autre moyen de déclarer une variable et d'initialiser sa valeur.
Sa portée est limitée au bloc courant.
Un bloc est délimité par une paire d'accolades.

						
> let age = 44;
> console.log(age);
44

L'instruction const

Elle permet de créer une constante.
Il n'est pas possible de lui affecter ensuite une nouvelle valeur, ie que sa valeur ne peut pas être modifiée.

						
> const pi = 3.14;
> console.log(pi);
44

Les types de variables

Python est un langage avec un typage dynamique fort.

Le type est automatiquement déterminé lors de l'initialisation.
Il peut aussi changer lors de l'affectation d'une nouvelle valeur.

Le tableau suivant présentes les différents types de variables.

Type	Détail
number	nombres réels
BigInt	grands entiers
string	chaîne de caractères
boolean	booléen true ou false
null	valeur null
undefined	sans valeur
symbol	valeur symbole
object	dictionnaire et tableau

L'opérateur typeof

Il permet de connaitre le type d'une variable.

						
> let age = 44;
> console.log(typeof(age));
number

Les nombres

Les nombres sont de type number.

Les nombres peuvent êtres positifs ou négatifs, des entiers ou des réels.
Voici un exemple de déclaration.

```
						
> let note = 18;
```

Opérations arythmétiques

Voyons les différentes opérations possibles.

L'addition

```
						
> 2+3;
5
```

La soustraction

```
						
> 5-2;
3
```

La multiplication

```
						
> 2*3;
6
```

La division

```
						
> 6/2;
3
```

Le reste

```
						
> 5%2;
1
```

Les puissances

```
						
> 3**2;
9
```

Le texte

Le texte est de type string.

Une chaîne de caractères s'écrit entre apostrophes (simple quotes) ' ' ou entre guillements (double quotes) " ".
Voici un exemple de déclaration.

						
> let nom = 'toto';
> console.log(nom);
toto

La concaténation

Le signe + permet de contacténer plusieurs chaines de caractères.

						
> let mon_texte = "Hello " + nom + "!";
> console.log(mon_texte);
Hello toto!

Longueur d'une chaine

La propriété length permet d'obtenir la longueur d'une chaine.

						
> console.log(mon_texte.length);
11

Accéder à un caractère de la chaine

Les crochets permettent d'accéder au rang n de la chaine.
⚠️ La premier caractère est est de rang 0.

```
						
> console.log(mon_texte.[1]);
e
```

La méthode indexOf

La méthode indexOf permet de vérifier si une sous-chaine est présente dans une chaine.
Elle renvoie la position de la sous-chaine dans la chaine.
La valeur -1 est retournée si la sous-chaine n'est pas présente.

						
> console.log(mon_texte.indexOf("toto"));
6
> console.log(mon_texte.indexOf("titi"));
-1

La méthode replace

La méthode replace permet de remplacer une sous-chaine par une autre.

						
> mon_texte = mon_texte.replace("toto", "titi");
> console.log(mon_texte);
Hello titi!

Les booléens

Un booléen peut prendre la valeur true ou false.

Une chaîne de caractères est entre apostrophes (simple quotes) ' ' ou entre guillements (double quotes) " ".
Voici un exemple de déclaration.

						
> let choix = true;
> console.log(choix);
true

Les objets

Un objet est de type object.

Un objet possède un ensemble de propriétés définisant ses caractéristiques.
En fait, une propriété a un nom, la clé et une valeur.
Un objet javascript est similaire à un dictionnaire en python.
L'ensembles des propriétés est entre accolades {}.
Voici un exemple de déclaration.

						
> let ma_voiture = {marque: "renault", couleur: "bleu", année:"2010", moteur:"essence"};

Les propriétés

Ajout, modification, accès

Pour accéder à une propriété, on écrit mon_objet.sa_propriété.
Pour ajouter ou modifier une propriété, on écrit mon_objet.sa_propriété = nouvelle_valeur.


> ma_voiture.nom = "Megane";			
> console.log(ma_voiture.nom);
'Megane'
> ma_voiture.nom = "Laguna";
> console.log(ma_voiture.nom);
Laguna

Les tableaux

Un tableau est un objet de haut-niveau.

Il permet de stocker des éléments de façon ordonnée.
L'ensemble des éléments est entre crochets [].
Un tableau javascript est similaire à une liste en python.
Voici un exemple de déclaration.

						
> let mes_animes_préférés = ["One Piece", "One Punch Man", "Hunter x Hunter", "Naruto"];

Eléments du tableau

Accès, ajout, modification

L'index d'un élément est sa position, l'index 0 désignant le premier élément le plus à gauche.
Pour accéder à un élément du tableau, on écrit mon_tableau[index].
Pour modifier la valeur d'un élément ou en ajouter, on écrit mon_tableau[index] = nouvelle_valeur.

			
> console.log(mes_animes_préférés[1]);
One Punch Man
> mes_animes_préférés[4] = "Slam Dunk"
> console.log(mes_animes_préférés);
(5) ['One Piece', 'One Punch Man', 'Hunter x Hunter', 'Naruto', 'Slam Dunk']

La méthode push

La méthode push permet d'ajouter un élément à la fin du tableau.

			
> mes_animes_préférés.push("Ippo");
5
> console.log(mes_animes_préférés);
(6) ['One Piece', 'One Punch Man', 'Hunter x Hunter', 'Naruto', 'Slam Dunk', "Ippo"]

La méthode pop

La méthode pop permet de supprimer le dernier élément.

			
> mes_animes_préférés.pop();
'Ippo'
> console.log(mes_animes_préférés);
(5) ['One Piece', 'One Punch Man', 'Hunter x Hunter', 'Naruto', 'Slam Dunk']

Nombre d'éléments d'un tableau

La propriété length permet d'obtenir le nombre d'éléments d'un tableau.

						
> console.log(mes_animes_préférés.length);
5

Boites de dialogue

Pour intéragir avec l'utilisateur

Dans ce chapitre, nous allons voir le prompt.

Le prompt

La méthode prompt affiche une boîte de dialogue avec un message et une zone de saisie.

Elle s'écrit texte_saisi = prompt("instruction")

			
let nom_utilisateur = prompt("Nom :");
console.log(nom_utilisateur);

Prompt d'un entier

Grâce à la fonction parseInt

Comme le prompt renvoie du texte, l'associer à la fonction parseInt permet de récupérer un entier.

			
let choix = parseInt(prompt("1 ou 2:"));

Les structures de contrôle

Pour organiser et contrôler l'ordre d'exécution du code

Dans ce chapitre, nous allons voir les conditions, les boucles et les fonctions.

Les blocs

Les accolades { } permettent de définir un bloc de code.

Les instructions que l'on veut grouper sont placées entre les accolades.

			
{
    const first_name = "nico";
    window.alert( "Welcome " + first_name);
}

Les conditions

Les conditions if et switch

L'instruction if

On l'utilise en général avec else if et else.

La structure conditionnelle s'écrit if (condition){instruction} else if {instruction} else {instruction}

			
let nombre = 10;
if (nombre > 0) {
    console.log("Le nombre est positif");
} else if (nombre < 0) {
    console.log("Le nombre est négatif");
} else  {
    console.log("Le nombre est 0");
}

Les opérateurs de comparaisons

Ils permettent de faire les tests conditionnels.

Le tableau suivant présente les opérateurs de comparaisons.

Opérateur	Signification
<	Inférieur
<=	Inférieur égal
>	Supérieur
>=	Supérieur égal
===	Egal
!==	Différent

L'instruction switch

Elle permet de tester une expression parmis plusieurs choix.

La structure conditionnelle switch s'écrit switch (expression){case valeur_1: instruction; break; case valeur_n: instruction; break; default: instruction;}

		
let commentaire;
let star = parseInt(prompt("Noter ce film entre 1 et 4: "));
switch (star){
    case 1:
        commentaire = "mauvais!";
        break;
	case 2:
        commentaire = "moyen.";
        break;
    case 3:
        commentaire = "bon.";
        break;
    case 4:
        commentaire = "à ne pas manquer!";
        break;
    default:
        commentaire = "indéfini. Nombre d'étoiles non valide.";
}
window.alert("Ce film est "+ commentaire);

Les boucles

Les boucles for et while

La boucle for

La boucle for est utilisée pour un nombre connu d'itérations.

Elle s'écrit for (let compteur = valeur_initiale; condition; incrémentation) {instruction}

			
for (let i = 0; i < 3; i++) {
    console.log(i);
}

La boucle while

La boucle while est utilisée pour un nombre inconnu d'itérations.

Elle s'écrit while (condition) {instruction}

			
let i = 0;
while (i < 3) {
    console.log(i);
    i++;
}

Les fonctions

Une fonction permet de réutiliser des blocs de code.

Elle peut accepter des paramètres en entrée et renvoyer une valeur en sortie.
Une fonction s'écrit function ma_fonction(mon_paramètre) {instructions; return ma_sortie}
L'exemple suivant présente la fonction calcul_carre avec entier en paramètre et resultat en sortie.

			
let entier = parseInt(prompt("Nombre entier: "));
function calcul_carre(entier) {
    let resultat = entier * entier;
    return = resultat;
}
let resultat = calcul_carre(entier);
window.alert("Le carré de " + entier + " vaut " + resultat);

Intéractions

Grâce au DOM (Document Object Model)

Le script intéragit avec le DOM pour modifier le contenu de la page web.
Dans ce chapitre, nous allons voir les méthodes getElementById.

Sélection d'un élément avec son id

La méthode getElementById permet de sélectionner un élément avec son id.

Elle s'écrit document.getElementById("mon_id").
Dans l'exemple suivant, on affiche la balise ayant l'id first_div.


let balise_first_div = document.getElementById("first_div");
console.log(balise_first_div);

Sélection d'éléments grâce aux sélecteurs css

Un sélecteur CSS est une chaine de caractères permettant de cibler des éléments HTML pour leur appliquer un style css.

La méthode querySelector

Elle permet de sélectionner le premier élément correpondant à un sélecteur CSS.

Elle s'écrit document.querySelector("mon_sélecteur").
Dans l'exemple suivant, on affiche le premier élément correspondant au sélecteur strong de l'id first_div.


let balise_first_strong = document.querySelector("#first_div strong"");
console.log(balise_first_strong);

La méthode querySelectorAll

Elle permet de sélectionner tous les éléments correpondant à un sélecteur CSS.

Elle s'écrit document.querySelectorAll("mon_sélecteur").
Dans l'exemple suivant, on affiche tous les éléments de type h2.


let titres_h2 = document.querySelectorAll("h2");
console.log(titres_h2);

Boucler sur les éléments trouvés

Avec la boucle for

On va boucler sur les titres h2 trouvés précédemment.

			
for (let i = 0; i < titres_h2.length; i++) {
    console.log(titres_h2[i]);
}

Sélectionner du texte d'une balise

Les propriétés innerText et textContent

Elles permettent d'accéder et de modifier le texte à l'intérieur de la balise sélectionnée.

La propriété innerText

Dans l'exemple suivant, on modifie le texte de balise_first_div.

			
balise_first_div.innerText  = "Texte modifié";

La propriété textContent

Dans l'exemple suivant, on ajoute du texte à la balise nouveau_paragraphe.


nouveau_paragraphe.textContent = "Ceci est un nouveau paragraphe";

Modifier un attribut

La méthode setAttribute permet de modifier un attribut pour un élément spécifié.

Elle s'écrit élément_sélectionné.setAttribute("nom_attribute", "nouvelle_valeur").
Dans l'exemple suivant, on sélectionne l'élément html avec l'id first_id et on remplace sa classe blue par la classe red.


let first_id_element = document.getElementById("first_id");
first_id.setAttribute("class", "red");

Sélection des classes

La propriété classList permet de lister les classes d'un élément.

Elle s'écrit élément_sélectionné.classList.
Associée aux méthodes add, remove et replace elle permet d'ajouter, supprimer et remplacer une classe d'un élément.
Pour ajouter un élément, on écrira par exemple, élément_sélectionné.classList.add("nouvelle_classe").

```
first_id.classList.add("big_font");
```

Ajouter une balise

Créer une balise puis l'ajouter à un noeud parent

La méthode CreateElement

La méthode CreateElement permet de créer une balise html.


let nouveau_paragraphe = document.createElement("p");

La méthode appendChild

Elle permet d'ajouter un noeud à un noeud parent.

Dans l'exemple suivant, on ajoute le nouveau paragaphe à balise_first_div.


balise_first_div.appendChild(nouveau_paragraphe);

Contenu HTML

Le contenu de l'élément est l'ensemble de l'élément, balises et texte inclus.

La propriété innerHTML

Elle permet de sélectionner ou définir le contenu d'un élément HTML.


dernier_paragraphe.innerHTML = "<p>Ceci est le dernier paragraphe.</p>";

Les backquotes

Ils permettent d'ajouter du code dans un élément HTML.

Pour insérer le contenu d'une variable dans un élément HTML, il faut remplacer les doubles quotes " " par des backquotes ` ` et écrire ${ma_variable}.
Remarque: Cela fonctionne aussi avec innerText.


let rang = "dernier"
dernier_paragraphe.innerHTML = `<p>Ceci est le <strong>${rang}</strong> paragraphe.</p>`;

Les évènements

Un évènement est un signal envoyé suite à une action sur la page web.

Dans ce chapitre, nous allons voir la méthode addEventListener et les principaux types d'évènements.

Ecouter un évènement

La méthode addEventListener permet d'écouter si un évènement se produit et d'éxécuter une action.

Elle s'écrit mon_élément.addEventListener("mon_évènement, function() {action}


let mon_bouton = document.getElementById("mon_bouton");
mon_bouton.addEventListener("click", function () {
    window.alert("Click bien reçu");
});

La fonction fléchée

Elle permet un appel simplifié de la fonction.


mon_bouton.addEventListener("click", () => {
    window.alert("Click bien reçu");
});

La variable event

Elle permet de récupérer les informations de l'évènement.

Associée à la méthode addEventListener, elle s'écrit mon_élément.addEventListener("mon_évènement, function() {action}

Le tableau suivant présente les principaux événements.

Evènement	Description
change	La valeur d'un élément de formulaire a changé.
click	Un élément est cliqué.
DOMContentLoaded	Le DOM de la page est entièrement chargé.
keypress	Une touche du clavier est appuyée.
mouseover	La souris est sur un élément.
submit	Le formulaire est envoyé.

Associées à l'évènement click, la propriété target fournit l’élément HTML qui a déclenché l’événement et
les propriétés clientX et clientY fournissent les coordonnées de la souris.
Associée à l'évènement keypress, la propriété key fournit la touche clavier appuyée.


document.addEventListener("keypress", (event) => {
    console.log(event.key);
});

Les formulaires

Les formulaires permettent de recueillir des informations auprès des utilisateurs.

Un formulaire contient un ensemble de champs dans lequel l'utilisateur peut saisir des données.

Formulaire texte

La propriété value permet de récupérer la donnée.

Dans l'exemple suivant, on vient chercher la balise input grâce à son id nom.
Puis on écoute si sa valeur change avec la méthode addEventListen et l'évènement change.
Ensuite on récupère la valeur rentrée grâce à la propriété value.
Enfin, on affiche sa valeur dans la console.

html


<form>
    <label for="nom">Entrez votre nom:</label>
    <input type="nom" id="nom" name="nom" placeholder="Votre nom" required>
</form>

javascript


let champ_nom = document.getElementById("nom");
champ_nom.addEventListener("change", () => {
    let nom = champ_nom.value;
    console.log("Votre nom est : " + nom);
});

Formulaire de cases à cocher

La propriété checked permet de savoir si la case est cochée.

Dans l'exemple suivant, on vient chercher la balise input grâce à son id daccord.
Puis on écoute si sa valeur change avec la méthode addEventListen et l'évènement change.
Ensuite on récupère la valeur rentrée grâce à la propriété checked.
Enfin, on affiche sa valeur true ou false dans la console.

html


<form>
    <label for="daccord">Cochez la case si vous êtes d'accord:</label>
    <input type="checkbox" id="daccord">
</form>

javascript


let champ_daccord = document.getElementById("daccord");
champ_daccord.addEventListener("change", () => {
    let daccord = champ_nom.checked;
    console.log("La case daccord vaut: " + daccord);
});

Formulaire de boutons radio

Boucle sur l'ensemble des boutons

Dans l'exemple suivant on sélectionne l'ensemble des boutons grâce à la méthode querySelectorAll et la propriété name equipe.
Ensuite on boucle sur les équipes et on récupère l'équipe sélectionnée grâce aux propriétés checked et value.

html


<form>
    <label Equipe:</label>
    <input type="radio" id="france" name="equipe" value="france" checked>
    <label for="france">France</label>
    <input type="radio" id="allemagne" name="equipe" value="allemagne">
    <label for="allemagne">Allemagne</label>
</form>

javascript


let champ_equipes = document.querySelectorAll('input[name="equipe"]');
let equipe = "";
for (leti = 0; i < champ_equipes.length; i++) {
    champ_equipes[i].addEventListener("change", () => {
    if (champ_equipes[i].checked) {
        equipe = champ_equipes[i].value;
        console.log("L'équipe " + equipe + " est sélectionnée.");
        }
    })
};

Le bouton submit

Il permet de soumettre un formulaire.

Par défaut, le bouton submit entraine un rechargement automatique de la page.
Il faut donc utiliser la méthode preventDefault pour emêcher le rechargement automatique.

html


<form id="form_ville">
    <label for="ville">Entrez votre ville:</label>
    <input type="text" id="ville" name="ville" placeholder="Votre ville" required>
    <button>Envoyer</button>
</form>

javascript


let form_ville = document.getElementById("form_ville");
form_ville.addEventListener("submit", (event) => {
    event.preventDefault();
    let ville = document.getElementById("ville").value;
    console.log("Votre ville est :" + ville);
};

Les scripts

Un script est un fichier.js contenant le code javascript.

Dans ce chapitre, nous allons voir les scripts javascript et comment les utiliser.

Utilisation

La balise <script> permet d'appeler le script dans le html.

Elle s'écrit <script src="mon_script.js" > </script>
Il faut mieux placer la balise <script> dans la section <head> pour que le script soit chargé avant l'affichage de la page.
Remarque: Pour plus de modularité, il est possible de créer plusieurs fichiers .js.
Dans l'exemple suivant, la page index.html appelle le script main.js et la boite de dialogue "Welcome!" est affichée.

index.html


<!DOCTYPE HTML>				
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>
</body>
</html>

main.js

```
			
window.alert("Welcome!");
```

L'atribut defer

Il permet d'éxécuter le script une fois tout le document analysé.

Il se place dans la balise script

			
 <script src="main.js" defer></script>

Le langage JavaScript

Commencer

Environnement

Ma première commande

Les commentaires

Les variables

Déclaration

Les types de variables

Les nombres

Le texte

Les booléens

Les objets

Les tableaux

Boites de dialogue

Le prompt

Les structures de contrôle

Les blocs

Les conditions

Les boucles

Les fonctions

Intéractions

Sélection d'un élément avec son id

Sélection d'éléments grâce aux sélecteurs css

Sélectionner du texte d'une balise

Modifier un attribut

Sélection des classes

Ajouter une balise

Contenu HTML

Les évènements

Ecouter un évènement

La variable event

Les formulaires

Formulaire texte

Formulaire de cases à cocher

Formulaire de boutons radio

Le bouton submit

Les scripts

Utilisation