JavaScript

Présentation

  • Développeur web freelance depuis 5 ans

  • http://www.boxydev.com

  • Expérience en agence web, E-Commerce (annonceur)

  • Formation Informatique et Autodidacte

  • Formateur et fan des OSS, contributeur à mes heures perdues

  • Solutions phares : Wordpress, Symfony, Magento, Prestashop, Angular

  • Langages : PHP, MySQL, HTML, CSS, JS

  • Outils : Git, Docker, Vagrant, Trello
  • Stack: ArchLinux, Gentoo, Mac OS (Unix addict)

Sommaire

  • Introduction
  • Historique
  • Pourquoi ?
  • Comment ?
  • Outil console
  • Variables
  • Types de variables
  • Instructions et commentaires
  • Opérations et concaténation
  • Les tableaux
  • Les objets
  • Les tableaux (avancés)
  • Les erreurs
  • Les conditions
  • Incrémentation
  • Les boucles
  • Les fonctions
  • Portée des variables
  • Le DOM
  • Manipulation HTML
  • Manipulation CSS
  • Evénements
  • Gestion du temps

Introduction

- Langage de programmation de scripts

- Exécuté dans un navigateur web

- Permet de dynamiser les pages web

- Manipulation HTML/CSS

- Ne surtout pas confondre avec Java

Historique

Créé en 1995 par NetScape

LiveScript devient JavaScript (!= Java)

 

Standard ECMAScript

ES1 : 1997 - ES2 : 1998

ES3 : 1999 - ES5 : 2009

ES6 : 2015 - ES7 : 2016

ES8 : 2017

Guide officiel du JS : https://developer.mozilla.org/fr/docs/Web/JavaScript

Pourquoi ?

Côté client (90%) :

Interactions avec le navigateur

Animations (Slider), Événements (Souris)

Single Page Application (Spotify)

AJAX (WebServices)

 

Côté serveur (10%) :

NodeJS

Comment ?

  • HTML dans un fichier .html
  • CSS dans un fichier .css
  • JavaScript dans un fichier... .js
  • Faciliter la maintenance et performances

<!DOCTYPE html>
<html>
    <head>
        <link href="css/style.css" />
    </head>
    <body>
        <!-- Le JavaScript toujours avant la fermeture de body -->
        <script src="js/script.js"></script>
    </body>
</html>

Outil console

  • Intégré dans tous les navigateurs (Inspecteur)
  • Permet d'écrire/tester rapidement du JS
  • Permet de faire du debug  sur le code JS

console.log('Affiche quelque chose');
alert('Affiche quelque chose');
prompt('Demande quelque chose');

Les variables


var age; // Initialise une variable
var age = 26; // Initialise une variable et lui affecte la valeur 26
var mon_age = 26; // Underscore
var monAge = 26; // lowerCamelCase

Une variable est une boîte avec une étiquette contenant une donnée.

  • Par convention, choisir un nom de variable compréhensible.
  • Eviter les accents, caractères spéciaux
  • Ne doit pas commencer par un chiffre
  • CamelCase ou under_score

Types de variables

  • String
  • Number (Integer, Float)
  • Boolean
  • Array
  • Object

var string = 'Une chaine de caractères'; // ""
var number = 10; // integer
var float = 10.321; // float
var boolean = true;
var array = [1, 2, "Toto"];
var object = {key: "valeur"};

Attention au typage faible !

Instructions

  • Un code JavaScript contient plusieurs instructions
  • Exécuté dans l'ordre de haut en bas
  • Se termine par un ; (ou pas...)
  • Commentaire sur une seule ligne //
  • Sur plusieurs lignes /* */

var prenom = "Matthieu"; // Je déclare et initialise la variable prenom
console.log(prenom); // J'affiche la variable prenom dans la console
alert(prenom); // J'affiche une boite avec le contenu de la variable prénom
// Commentaire sur une seule ligne
/*
Commentaire sur plusieurs lignes
*/

Exercice simple

Exercice simple:

  • 1. Créer un fichier html
  • 2. Lier un fichier CSS
  • 3. Lier un fichier JavaScript
  • 4. Demander à l'utilisateur son age
  • 5. Stocker l'age dans une variable
  • 6. Afficher l'age dans la console

Opérations et concaténation

Concaténakwa ?

Les opérations les plus basiques :


var a = 10;
a + 30; // Addition 40
10 - 5; // Soustraction 5
3 * 2; // Multiplication 6
a = 3 + 3; // on peut modifier une variable en cours de route
a / 2; // Division 3 car a vaut 6
10 % 3; // Modulo (Reste de la division) 1

La concaténation


var concat = 'Hello ' + 'world !';

var prenom = 'Matthieu';
console.log('Hello ' + prenom);

Les tableaux

//             0  1  2     3
var tableau = [1, 3, 5, 'toto'];
console.log(tableau[0]); // Affiche 1 

console.log(tableau[1] + tableau[2]); // Affiche 8

console.log(tableau[3] + tableau[0]); // Affiche toto1
  • Contient plusieurs valeurs de différents types
  • Chaque valeur est associé à un index/clé numérique de 0 à n

Les objets

  • Contient plusieurs valeurs de différents types
  • Chaque valeur est associé à un index/clé associatif

var personn = {
    nom: 'Mota',
    prenom: 'Matthieu',
    birthday: [18, 11, 1991]
};
console.log(personn.nom); // Affiche Mota

console.log('Né en ' + personn.birthday[2]);
// Né en 1991

En JS, tout est objet !

Les erreurs

  • Le JavaScript est parfois difficile à debug
  • Profiter des outils à disposition
  • SyntaxError : Problème de syntaxe
  • ReferenceError : Variable n'existe pas

Les conditions

  • Les conditions s'écrivent grâce à l'instruction if et des opérateurs de comparaison ou logiques


if (age > 18) {
    console.log('Tu peux voir le fil... Plutôt voter :)');
}

10 > 5; // Plus grand que
1 < 0; // Plus petit que
18 >= 18 // Plus grand ou égal
10 <= 11; // Plus petit ou égal à
'bonjour' == 'bonjour'; // Égal à
'bonjour' != 'au revoir'; // Différent de 
45 === 45;
// Strictement égal à (compare la valeur et aussi le type de donnée)
'bonjour' !== 2; // Strictement différent de 

// false && false;
1 > 2 && 1 > 3; // ET
age > 18 || age == 18; // OU

!false == true; // Renvoie ... ?

Les conditions 2



var quelquechose = true;

if (quelquechose) { // quelquechose est idem que quelquechose == true
    // Si quelquechose est à true
} else {
    // Sera toujours executé si quelquechose renvoie false
}

if (quelquechose === false) { // !quelquechose est idem que quelquechose == false
    // Si quelquechose est à false
} else if (quelquechose === true) {
    // Si quelque chose est true
} else {
    // Sera executé dans quel cas ?
}
  • On peut exprimer plusieurs alternatives avec la structure if else ou if else if else if ... else

Exercices

1. Reprendre le script de l'âge.
Si l'utilisateur a moins de 13 ans : Afficher "Interdit"
Si l'utilisateur a entre 13 et 17 ans : Afficher "Bientôt"
Si l'utilisateur a 18 ans ou plus : Afficher "Autoriser"

2. Imaginons un frigo (qui pourrait être un objet JS). Mon frigo contient 3 tomates, 4 oeufs, 1 pain, 2 jambons, 1 poulet et 1 fromage.
Ce soir, je veux manger quelque chose. Je peux faire 1 sandwich
SI j'ai un 1 pain ET 1 jambon ET une tomate OU un fromage. Attention, dans cette condition il faut absolument un pain ET un jambon et soit une tomate OU un fromage.
SINON, SI j'ai un poulet, je peux manger le poulet.
SINON,
    Si j'ai 3 oeufs, je peux manger une omelette
    SINON je mange des chips.

3. BONUS (boucles) : Ecrire l'algorithme du PGCD en JavaScript.
Procéder par étape, on a d'abord 2 nombres (Soit 2 variables).
On peut les définir directement dans le JS ou alors les demander à l'utilisateur grâce à prompt.

Incrémentation

  • Raccourci utile en développement

var i = 1;
i++; // Equivaut à i = i + 1 et renvoie 1, mais i vaut 2
++i; // Equivaut à i = i + 1 et renvoie 3, et i vaut 3

// Fonctionne aussi avec les autres opérateurs
heure = 5;
heure++; // heure devient 6
heure += 2; // heure devient 8
heure /= 2; // heure devient 4
heure %= 3; // heure devient 1

Les boucles

  • On peut répéter une ou plusieurs lignes de code grâce à for et while.

for (var i = 0; i < 5; i++) {
    console.log(i);
}

personn = ['Théo', 'Jean', 'Eric'];
for (var i = 0; i < personn.length; i++) {
    console.log(personn[i]);
}

var i = 0;
while (i < 5) {
    console.log(i++);
}

personn = {
    name: 'Matthieu',
    age: 26
}
for (key in personn) {
   console.log(personn[key]);
}

Exercices

1. Grâce à la boucle for, écrire les nombres de 1 à 10.
2. Grâce à la boucle for, écrire les nombres de 10 à 2.
3. Grâce à la boucle for, afficher les nombres de 1 à 100 mais uniquement les nombres pairs.
4. Grâce au while, demandez à l'utilisateur s'il veut continuer sur le site, il doit répondre "oui", "non", "o" ou "n". Tant qu'il ne répond pas une de ces valeurs, lui reposer la question.

Exercices

On veut créer un jeu du "C'est plus, c'est moins."

Le principe est simple.

L'utilisateur arrive sur la page web, on lui demande de saisir un nombre entre 1 et 100. Il doit trouver le bon nombre, tant qu'il ne l'a pas trouvé, on lui indique si le nombre à trouver est plus grand ou plus petit que celui qu'il a saisi.

S'il trouve le bon nombre, la partie s'arrête.

S'il retourne sur la page, le nombre doit changer.

Distributeur de boissons

On veut simuler un distributeur de boisson qui propose du thé, du café ou du chocolat. Chaque boisson peut être non sucrée, sucrée ou très sucrée avec une option de lait.

- Le café et le thé coûtent 40 centimes, le chocolat 60 centimes

- Une portion de sucre coûte 5 centimes (sucrée = 1 portion, très sucrée = 2 portions)

- Le lait coûte 15 centimes

L'utilisateur doit entrer caf, cho ou the (insensible à la casse) pour choisir sa boisson. Tant qu'il ne choisit pas une boisson valable, on lui repose la question. Il doit ensuite choisir la dose de sucre (0, 1 ou 2) et le lait (0 ou 1). Il ne pourra pas choisir de lait s'il a pris un chocolat.

On affichera ensuite les phrases suivantes :

- Vous devez payer 50 centimes.

- Votre café très sucré sans lait est prêt.

Distributeur de boissons - 2

- Ajouter un bouton qui permet de lancer l'action de distribuer une boisson

- Créer un objet distributeur qui contiendra la monnaie du distributeur, les doses de café / thé / chocolat ainsi que les doses de sucre

- Chaque distribution réduira le nombre de doses (café, thé, chocolat et sucre) mais augmentera la tirelire

- Ajouter une action permettant de voir le montant dans la tirelire

- Ajouter une action permettant de remplir la machine, on demandera au technicien ce qu'il souhaite ajouter (café, thé, chocolat ou sucre) ainsi que la quantité

- Panne aléatoire: La machine tombe en panne aléatoirement (entre 15 et 20 distributions). Si c'est le cas, on ne peut plus se servir mais on ajoutera une action permettant de réparer la machine (Il faudra un booléen ? Et une valeur aléatoire ?)

Distributeur de billets

On veut simuler un distributeur de billets qui propose des billets de 500, 200, 100, 50, 20, 10 et 5 euros. Il peut également donner des pièces de 2 ou 1 euro(s).

 

L'utilisateur doit saisir un montant puis le distributeur doit lui donner le bon compte de billets. On s'assurera que le montant soit bien un entier. Par exemple, si l'utilisateur veut retirer 1389 euros, on affichera :

- 2 billets de 500 euros - 1 billet de 200 euros

- 1 billet de 100 euros - 1 billet de 50 euros - 1 billet de 20 euros

- 1 billet de 10 euros - 1 billet de 5 euros - 2 pièces de 2 euros

 

N'oubliez pas le fameux modulo...

Distributeur de billets - 2

- Ajouter un bouton qui permet de lancer l'action de retirer de l'argent

- Ajouter la possibilité de choisir les coupures à retirer (uniquement 200, 50...)

- Ajouter un stock au distributeur (uniquement par le montant), une fois le stock atteint, on ne pourra plus retirer. Ajouter un bouton permettant de remplir le distributeur.

- Ajouter un stock pour chaque billet. Si un billet n'est pas disponible, on essaye de faire la distribution avec d'autres billets. Sinon, on ne peut pas faire la distribution.

Rendu de monnaie

- Créer un bouton achat, l'utilisateur saisit un montant. Ce montant s'ajoute dans un objet. Chaque action sur le bouton augmente le montant.

- On peut maintenant ajouter un bouton commander, on affiche le montant total à payer par l'utilisateur. S'il donne le montant exact, tout est ok. S'il donne moins, on lui demande le restant jusqu'à la somme exacte. S'il donne plus, on doit lui rendre la monnaie.

 

Exemple: Achat de 50 euros, Achat de 100 euros, Achat de 100 euros.

L'utilisateur doit payer 250 euros. S'il donne 200, on lui demande 50. S'il donne 100, on lui rend 5 fois 10 euros. On ne peut lui rendre que 10 euros, 5 euros ou 1 euro.

Les tableaux (avancés)

  • Plusieurs niveaux d'imbrications
  • Manipulation d'éléments
var tableau = [
    ['X', 'X', 'O'],
    ['X', 'O', 'X'],
    ['O', 'X', 'X']
];

console.log(tableau[1][1]);  // Affiche O
console.log(tableau[0][2]);  // Affiche O
console.log(tableau[2][1]);  // Affiche X

var alphabet = ['d', 'e', 'f'];
alphabet.push('g'); // Ajoute g à la suite du tableau
alphabet.pop(); // Enlève g ou le dernier élément du tableau
alphabet.unshift('c'); // Ajoute c devant d
alphabet.shift(); // Enlève c

var numbers = [1, 2, 3];
numbers.map(function (n) {
  return n * 2;
}); // Renvoie [2, 4, 6]
numbers.filter(function (n) {
  return n > 2;
}); // Renvoie [4, 6]

Exercices

  • Créer un tableau avec les jours de la semaine sans lundi et vendredi. Ajouter lundi et vendredi (pas dans le tableau initial). Afficher le 3ème jour de la semaine. Combien y-a-t-il de jours ?
  • Créer un tableau avec des aliments: Poulet, Frites, Chocolat. Demander à l'utilisateur ce qu'il veut manger. Nous vérifierons que l'aliment est présent ou non dans le tableau. On affichera un message et on l'enlève du tableau s'il est présent.
  • Ecrire un script qui demande à l'utilisateur de taper 5 nombres. Une fois terminé, on affichera les nombres en précisant s'ils sont pairs ou impairs (On remplira un tableau avec chaque saisie).
  • Créer un tableau avec une liste de notes (10, 14, 18, 2, 10). Calculer la moyenne. Afficher la note la plus haute et la plus basse. Demander ensuite à l'utilisateur de remplir la liste de notes.

Exercices

  • A partir du tableau suivant [5, 10, 15], renvoyez un tableau contenant chaque nombre fois lui-même. (map)
  • A partir du tableau ['aa', 'bb', 'c'], ne renvoyez que les chaines contenant une seule lettre. (filter)
  • A partir d'un tableau de prénoms en minuscule, renvoyer un tableau de ces mêmes prénoms avec une majuscule en première lettre
  • A partir d'un code, créer un tableau que l'on va remplir avec entre 10 et 15 nombres aléatoires.
  • Stocker un ou plusieurs objets contenant un prénom et un nom dans un tableau [{ firstname: 'Fiorella', name: 'Mota' }]. Transformer ensuite ce tableau d'objet en tableau de chaine ['Fiorella Mota'].

Exercices

  • Créer un tableau avec les nombres de 1 à 10. Parcourir le tableau et ajouter après chaque nombre pair, sa valeur au carré. 

    [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    [1, 2, 4, 3, 4, 16, 5, 6, 36, 7, 8, 64, 9, 10, 100]

  • Vous demanderez à l'utilisateur un nombre (5 par exemple). De ce nombre, vous allez remplir un tableau de couleurs aléatoires (5 couleurs) parmi rouge, jaune et bleu.

    On aura par exemple :
    - rouge, rouge, jaune, bleu, jaune ---> rouge et jaune
    - rouge, rouge, bleu, jaune, rouge ---> rouge

    Vous afficherez alors les 2 couleurs étant apparues le plus de fois (au moins 2 fois) ou une s'il n'y en a qu'une.

Les fonctions

  • Bloc exécutable contenant des instructions
  • Peut être vu comme un moule
  • Doit être courte, lisible pour la maintenance
  • Ne pas hésiter à commenter

// Cette fonction attend un ingrédient comme paramètre et le transforme en farine
function moulin (ingredient) {
    return 'Je transforme le ' + ingredient + ' en superbe farine !';
}

moulin('blé');

var addition = function (n1, n2) { // Plusieurs paramètres
    return n1 + n2;
}

var resultat = addition(1, 3);
console.log(resultat); // Affiche 4

La portée des variables

  • Une variable a une visibilité ou portée
  • Locale ou globale

var globale = 'Je suis accessible de partout';

function myPreetyFunction () {
    var locale = 'Je ne suis accessible que dans la fonction';
    globale2 = 'Je serais accessible en dehors de la fonction';
    console.log(globale); // Fonctionne
}

console.log(globale2); // Ne fonctionne pas
myPreetyFunction();
console.log(globale); // Fonctionne
console.log(locale); // Ne fonctionne pas
console.log(globale2); // Fonctionne

Exercices

  • 1. Créer une fonction qui calcule le carré d'un nombre
  • 2. Créer une fonction qui convertit une valeur en euros en bitcoins, et qui peut faire l'inverse.
  • 3. Créer une fonction qui calcule le PGCD de 2 nombres
  • 4. Créer une fonction qui permet de savoir si un nombre est pair
  • 5. Créer une fonction qui permet de savoir si un nombre est premier
  • 6. Créer une fonction qui permet de calculer la suite de fibonacci

Exercices

  • 1. Créer une fonction qui génère un tableau de N nombres.
  • 2. Créer une fonction qui génère un tableau de N nombres aléatoires entre MIN et MAX.
  • 3. Créer une fonction qui permet de trier un tableau par ordre ascendant.
  • 4. Créer une fonction qui génère un code couleur aléatoire.
  • 5. Créer une fonction qui permet de savoir si un nombre est un palindrome et un autre pour un anagramme.

Exercice Morpion

  • On va essayer de créer un jeu de Morpion en Algo.
  • On va commencer avec un tableau qui contiendra 3 tableaux avec chacun 3 valeurs _.
  • Créer une fonction qui permet d'afficher dans la console le contenu du tableau.
  • Créer une fonction permettant de jouer un coup prenant 2 paramètres, le joueur et la position (de 0 à 9). Si on met O et 4 dans la fonction, le second tableau aura sa première valeur qui devient O au lieu de _.
  • Dans cette fonction, on appellera une fonction qui parcourt le tableau afin de vérifier si le joueur a gagné. Il faudra vérifier toutes les combinaisons d'indexes possibles (0, 4, 8 sont gagnants par exemple).
  • On appellera également la fonction qui affiche le contenu actuel du Morpion pour suivre son avancé dans la console.
  • Créer un bouton pour jouer et demander à l'utilisateur de saisir les 2 paramètres.

Le DOM

  • Document Object Model
  • C'est le code HTML mis en forme dans un objet JS stocké dans la variable document
  • Toutes les variables sont stockées dans la variable window

// Récupére le body
document.body;

// Récupère l'élément qui a l'id #header
document.getElementById('header');

// Récupère les éléments qui ont la class .container (tableau)
document.getElementsByClassName('container');

// Récupère toutes les div
document.getElementsByTagName('div');

Manipulation HTML


// <div id="div" class="Classe">Contenu</div>

var div = document.getElementById('div'); // Je récupére la div #div

console.log(div.className); // Affiche la classe de la div
console.log(div.id); // Affiche l'id de la div
console.log(div.textContent); // Affiche le contenu de la div
div.textContent = 'Nouveau contenu'; // Change le contenu de la div avec du texte
div.innerHTML = '<p>Nouveau contenu</p>'; // Change le contenu de la div avec du HTML

// Créer un élément HTML en JS
var p = document.createElement('p');
p.textContent = 'Super p en javascript';

document.body.appendChild(p); // J'ajoute le p dans body

On peut manipuler le HTML

Manipulation HTML


// <div id="div" class="Classe">Contenu</div>

var div = document.querySelector('#div'); // Je récupére la div #div
var sameDiv = document.querySelector('.Classe'); // Je récupére la div .Classe

// <span>A</span><span>B</span><span>C</span>

var spans = document.querySelectorAll('span');

for (span of spans) {
  console.log(span.textContent);
}

On peut manipuler le HTML avec une alternative qui ressemble au CSS

Exercices

1. Créer une variable title où on va stocker le h1 qui a l'id #title
Modifier le contenu du h1 par "Hey, j'ai changé mon titre en JavaScript"
2. Créer une balise p en JavaScript, ajouter dans son contenu "Un super paragraphe en JS". Ajouter la balise p dans la première div qui a la classe .container. Ajouter un id sur le p.

3. Créer 3 divs avec les nombres 1, 2 et 3 dans chacune des divs. Remplacer ce nombre par son carré.

Manipulation CSS


// <div id="div" class="Classe">Contenu</div>

// On prend la première div de celles qui ont la classe .Classe
var div = document.getElementsByClassName('Classe')[0];

div.style.fontSize = '18px'; // Je modifier la font-size à 18px
div.style.backgroundColor = '#000'; // Je change le fond en noir

console.log(div.style.backgroundColor); // Affiche rgb(0, 0, 0)
  • On peut facilement changer le CSS des éléments HTML

Exercices

1. Changer la couleur de fond de body avec #d5b9b9 en JavaScript
2. Augmenter la taille des paragraphes à 21px
3. Créer une balise a, ajouter un lien via l'attribut href (en js) vers https://developer.mozilla.org/
4. Changer la couleur du a en couleur #ffffff et non souligné (en js)
BONUS: créer une fonction qui génére un code couleur aléatoire.

Exercices

  • On va essayer de trouver un certain mot dans un p
  • Si on cherche "Lorem" par exemple, on va devoir remplacer tous les mots "Lorem" par "<span style="color: green">Lorem</span>"
  • Pour faire ça, on doit récupérer le contenu du p, on doit transformer la chaine en tableau où chaque mot est un élément de ce tableau (.split() ?).
  • A partir de là, on peut parcourir le tableau et trouver le mot en question puis le remplacer dans le tableau.
  • A la fin, on remplace le contenu du p par le tableau modifié qui sera d'abord transformé en chaine (.join() ?).

Evénements

On peut intercepter les événements se produisant sur une page web et exécuter une fonction à ce moment.

  • click : Clique sur un élément
  • mouseenter : Survol sur un élément
  • mouseleave : Quitte le survol
  • keydown : Touche du clavier enfoncée
  • keyup : Touche du clavier relachée
  • scroll : défilement de la fenêtre
  • resize : redimensionnement
  • change : input, select, textarea
  • submit : Envoi d'un formulaire
  • DOMContentLoaded : Quand la page HTML est chargée

Evénements 2

Comment écouter un événement ? Avec un écouteur !


// Ancienne syntaxe - DOM-0
elementHTML.onclick = function () {
    console.log('Je clique');
}

// Nouvelle syntaxe - DOM-2
elementHTML.addEventListener('click', function () {
    console.log('Je clique');
});

elementHTML.addEventListener('mouseenter', function () {
    console.log('Je survol');
});

elementHTML.addEventListener('keydown', function (event) {
    // L'action par défaut ne sera pas exécutée
    // (pour un lien ou un formulaire par exemple)
    event.preventDefault();

    console.log(event.key); // Affiche la touche enfoncée
});

Exercices

1. Créer une page HTML, ajouter une balise img avec une image. Au survol, sur l'image, changer le src de l'image par une autre image.

2. Ajouter une balise h1, lors du click sur celle-ci, changer la couleur du h1.

3. Ajouter un bouton. Lors du click sur celui-ci, changer le background color du body

4. Créer un formulaire avec un input text et un bouton. Lors du clic sur le bouton, faire une alerte avec la valeur saisie dans le input

Exercice Bonus

 

  • Créer un formulaire avec un champ
  • On saisit une valeur dans ce champ et à chaque fois qu'elle change, on doit la récupérer et l'ajouter dans le contenu d'un h1 qu'on ajoutera dynamiquement dans le DOM

Exercice Compteur

 

  • Créer un bouton - et un bouton +
  • Afficher une valeur à 0 entre les 2.
  • Au clic sur le bouton -, décrementer la valeur et la mettre à jour dans le DOM.
  • Au clic sur le bouton +, incrementer la valeur et la mettre à jour dans le DOM.
  • Vérifier que la valeur ne puisse pas être négative (Désactiver le bouton par exemple) et qu'elle ne puisse pas dépasser 10.

Exercice Bonus

 

  • Créer un formulaire avec deux champs
  • Ajouter un bouton calculer qui va prendre les deux valeurs, les additionner et afficher le résultat dans le DOM
  • On pourra vérifier que les deux valeurs saisies ne soient pas vides et soient des nombres valides

Exercice Souris

 

  • L'événement mousemove permet d'écouter le déplacement de la souris.
  • On va récupérer la position sur X et Y avec event.pageX et event.pageY.
  • On va ensuite créer une div (carré ou cercle) en position absolute
  • On va ensuite configurer le top et le left de la div en fonction de la position de la souris et la div devrait suivre simplement la souris.
  • BONUS: Si on clique sur le cercle, le cercle se déplace. Si on double clique, le cercle arrête de se déplacer. On utilisera une variable en booléen pour cela et on vérifiera s'il est vrai ou non.
  • BONUS: Faites en sorte que la souris soit centré sur la div lors du déplacement

Manipulation classes HTML


// <div id="div" class="a b">Contenu</div>

var div = document.querySelector('#div'); // Je récupére la div #div
console.log(div.classList); // On voit toutes les classes de la div

div.classList.add('c'); // Ajoute la classe c à la div
div.classList.remove('b'); // Retire la classe b à la div
div.classList.add('d', 'e'); // Ajoute les classes d et e à la div

// Ajoute ou retire la classe foo en fonction de sa présence
div.classList.toggle('foo');

// Renvoie true si la div contient la classe foo
console.log(div.classList.contains('foo'));

// Remplace la classe foo par la classe bar
div.classList.replace('foo', 'bar');

On peut manipuler facilement les classes HTML

Exercices

1. Créer 3 cartes en HTML / CSS avec une bordure grise

2. Au clic sur l'une des cartes, ajouter une classe "selected" sur cette carte. Appliquer le CSS suivant à cette classe : bordure noire, ombre et fond gris.

3. Si on clique sur une nouvelle carte, on doit retirer la classe "selected" de toutes les autres cartes avant de l'ajouter sur cette carte.

4. On doit pouvoir désélectionner une carte.

Exercices

1. Reprendre l'exercice du paragraphe avec le mot en vert (Slide 43).

2. Ajouter un input où on va pouvoir saisir le mot. Par défaut, ce sera Lorem.

3. On ajoute un bouton "Filtrer", au clic, on va donc chercher le mot qui a été saisi et c'est lui que l'on affichera en vert.

4. Modifier le code existant pour que cela fonctionne. Il faut un écouteur d'événement et il faut remplacer le "lorem" par quelque chose.

Gestion du temps

  • setTimeout permet d'exécuter une fonction au bout d'un certain temps
  • setInterval permet de répéter une fonction toutes les x millisecondes
let t = setTimeout(function () {
  alert('Je m\'affiche dans 3 secondes');
}, 3000);

let i = setInterval(function () {
  alert('Je m\'affiche toutes les 1 secondes');
}, 1000);

// On peut arrêter le setTimeout ou le setInterval
// en les stockant dans des variables
clearTimeout(t);
clearInterval(i);

Exercices

  • 1. Ecrire un script qui change le contenu d'un h1 toutes les 5 secondes avec les valeurs suivantes: Intégrateur, Développeur, Administrateur système.

    2. Ecrire un script qui change la couleur de fond du body au bout de 5 secondes avec une transition

    3. Renseignez vous sur la classe Date et essayez d'afficher l'heure sur une page au format HH:MM:SS

  • Exemple : new Date().getFullYear()

    4. Rafraichir la valeur de l'heure toutes les secondes

     

Exercice Chronomètre

  • Nous allons créer un chronomètre. On aura un bouton pour démarrer, arrêter ou remettre à zéro le chronomètre.

  • Le bouton démarrer lancera le chrono, il faudra incrémenter de 1 une variable sec. On devra répéter cela toutes les secondes. Bien sûr, arrivé à 60, on devra remettre sec à 0 et incrémenter min. On fera la même chose pour les heures.

  • Le bouton arrêter devra stopper le chronomètre mais le temps écoulé restera. Il faudra trouver un moyen d'arrêter la répétition chaque seconde.

Exercice Chronomètre 2

  • Le bouton reset remettra à zéro toutes les variables et arrêtera l'incrémentation des variables.

  • On ajoutera des raccourcis clavier. La touche espace permettra de lancer ou de stopper le chronomètre en fonction de son état actuel. La touche R permettra de remettre à zéro le chronomètre

  • On ajoutera un mode précision sur le chronomètre qui permettra d'avoir les millisecondes.

Objet Date

  • Permet de retrouver la date actuelle
  • Basé sur le timestamp comme toujours
var today = new Date();

// Thu May 19 2022 10:07:25 GMT+0200 (heure d’été d’Europe centrale)
console.log(today);

today.getDay(); // 3
today.getMonth(); // May
today.getFullYear(); // 2022
today.getTime(); // 1652948630799 = Timestamp en millisecondes

Date.now(); // 1652948630799 = Timestamp en millisecondes
Math.floor(Date.now() / 1000); // 1652948630 = Timestamp

var birthday = new Date('November 18, 1991 23:15:24');
birthday.getFullYear(); // 1991

// 690502524000 = Timestamp en millisecondes
Date.parse('November 18, 1991 23:15:24');

Exercice Anniversaire

  • Afficher le jour de votre anniversaire dans un h1 en utilisant l'objet Date en JS. N'oubliez pas que 0 correspond à dimanche, 1 à lundi... jusque samedi = 6

  • Récupérer l'année actuelle et la soustraire à votre année de naissance pour déterminer à peu près votre âge.

  • Soustraire le timestamp de votre date de naissance et de maintenant, vous obtenez le nombre de millisecondes entre les 2 dates.

  • On va maintenant transformer les millisecondes en affichage simple. Exemple: 123000 devient 2m3s
    On va donc faire 123 000 / 1000
    Ensuite on utilise le modulo pour extraire les 3 secondes
    On divise ensuite 120 par 60 (le nombre ne tombe pas toujours juste donc on devra arrondir et faire un modulo 60 derrière). On fait pareil avec les heures et les jours.
    Vous savez maintenant combien il reste de jours avant votre anniversaire.

Exercice Tic Tac Toe

  • On va essayer de créer un jeu de Morpion / Tic Tac Toe en JS.
  • Voici la maquette du jeu
  • La première étape va être de faire la partie HTML. A vous de vous amuser avec le flex et les bordures. Pour les O et les X, j'ai simplement utilisé la police Permanent Marker.
  • Faites déjà la partie HTML et non JS.

Exercice Tic Tac Toe 2

  • On va commencer par écouter le clic sur chacune des 9 cases. Faites un console log du numéro de case cliqué (On peut utiliser l'attribut data pour stocker le numéro de la cellulle : data-cell="8")
  • On va définir un tableau contenant l' "état" du jeu (9 cases vides). Si on clique sur la cellule 8, on met à jour l'index 8 avec X ou O. Tout cela si la cellule n'est pas vide. On mettra également à jour la div de la cellule avec le bon texte.
  • Le X ou O peut être stocké dans une variable "current". Cette variable doit changer si une cellule se remplit bien.
  • A chaque ajout dans une case, on devra vérifier si le joueur actuel a gagné ou non. Pour cela, il faudra vérifier toutes les combinaisons possibles (0, 4 et 8 sont gagnants s'ils sont identiques par exemple). On affichera donc un message avec le joueur qui a gagné ou si personne n'a gagné.
  • BONUS: Ajouter une phrase qui indique à qui est le tour de jouer et la mettre à jour à chaque tour
  • BONUS: Ajouter un bouton permettant de redémarrer la partie, on vide le tableau d'état ainsi que toutes les cases ?

Exercice Tâche

  • On va créer un système de tâche se déclenchant à une date donnée

  • On aura un formulaire où on entre heures, minutes et secondes

  • On lance l'exécution à 11h45m01s par exemple et il est 11h30m00s, on affiche "L'opération sera lancée dans 901 secondes"

  • On utilisera le setTimeOut pour ensuite afficher "Le moment est venu" dès qu'une tâche se réalise

  • On pourra créer plusieurs tâches

Horloge Binaire (BONUS)

  • Renseignez-vous sur le fonctionnement d'une horloge binaire
  • On doit avoir 3 colonnes : heures, minutes, secondes
  • Chaque colonne contient elle-même 2 colonnes : dizaine et unité
  • Dans chaque colonne on a au maximum 4 lumières représentant 1, 2, 4 et 8
  • S'il est 23h59m43s alors on allume :
    Colonne 1 : Lumière 2 et Lumière 1 + 2
    Colonne 2 : Lumière 4 + 1 et Lumière 1 + 8
    Colonne 3 : Lumière 4 et Lumière 1 + 2
  • Chaque seconde, on devra prendre les secondes (exemple 43) et en retirer la dizaine 4 et l'unité 3 puis les transformer en 2^n. On aura donc 2^2 et 2^0 + 2^1. 0, 1, 2, 3 correspondent à 1, 2, 4 et 8. On fera la même chose avec les heures et les minutes.

Slider (BONUS)

  • On va essayer de réaliser un slider (Sans Bootstrap).
  • Il nous faudra trois images. On aura également deux flèches (droite et gauche).
  • On affiche la première image. On clique (souris) sur la flèche de droite, on change cette image par la seconde et ainsi de suite. Quand on est sur la troisième image, on arrive sur la première image. On peut faire pareil avec la flèche gauche.
  • BONUS 1: Il faudrait qu'en appuyant sur la flèche droite ou gauche (clavier), on puisse faire défiler le slider (Utiliser un événement et détecter la touche pressée).
  • BONUS 2: Il faudrait obtenir une transition entre les slides (effet tapisserie ou d'opacité).
  • BONUS 3: Avoir un défilement automatique toutes les 5 secondes.

Exercices

  • Ici, je vous donne quelques exercices sur le DOM avec les fichiers HTML pré-faits.

Formulaires

On peut valider les données des formulaires en JavaScript. Attention, il faudra toujours valider les données en PHP ou côté back end.

<form action="" method="post" id="form">
    <div id="errors"></div>
    <input type="text" id="firstname" placeholder="Prénom">
    <label for="uppercase">
    	<input type="checkbox" id="uppercase">
        En majuscule ?
    </label>
    <select id="gender">
    	<option value="fille">Fille</option>
    	<option value="garcon">Garçon</option>
   	</select>
    <button>Afficher</button>
</form>

<div id="result"></div>

let firstname = document.getElementById('firstname');
let uppercase = document.getElementById('uppercase');
let gender = document.getElementById('gender');
let errors = document.getElementById('errors');
let result = document.getElementById('result');

document.getElementById('form').addEventListener('submit', function (event) {
  // On évite d'envoyer le formulaire au serveur
  event.preventDefault();

  errors.innerHTML = ''; // On vide les erreurs
  result.innerHTML = '';

  if (firstname.value.length <= 0) {
    firstname.style.border = '1px solid red';
    errors.innerHTML += '<p style="color: red">Le prénom est trop court</p>';
  }

  if (!errors.hasChildNodes()) {
    firstname.style.border = '1px solid green';

    let name = uppercase.checked ? firstname.value.toUpperCase() : firstname.value;
    let type = gender.options[gender.selectedIndex];

    if (type.value == 'fille') {
      type = 'une fille 👩';
    } else {
      type = 'un garçon 🧑';
    }

    result.innerHTML = `<h1>${name}, tu es ${type}</h1>`;
  }
});
firstname.addEventListener('keyup', function () {
  // this équivaut à l'objet firstname
  let name = uppercase.checked ? this.value.toUpperCase() : this.value;

  result.innerHTML = `<h1>${name}</h1>`;
});

uppercase.addEventListener('change', function () {
  let name = this.checked ? firstname.value.toUpperCase() : firstname.value.toLowerCase();
  firstname.value = name;

  result.innerHTML = `<h1>${name}</h1>`;
});

Variante où on affiche la valeur saisie en temps réel

Exercices

  • Créer le formulaire suivant
  • Libre à vous d'améliorer le CSS du formulaire
  • Au clic sur le bouton calculer, on vérifiera que les champs taxes, quantité et prix HT sont bien remplis.
  • La quantité doit être supérieure à 0 et le prix supérieur ou égal à 10.
  • On calculera le montant HT (quantité * prix HT) et le Total TTC (montant HT * taxe) et on affichera leur valeur dans les champ concernés (en lecture seule).
  • Un bouton effacer permettra de vider les champs

Local Storage

Permet de stocker des données en local sur le navigateur.

// Stocke la valeur Fiorella dans la clé contact
localStorage.setItem('contact', 'Fiorella');

// Retourne l'item qui a la clé contact
localStorage.getItem('contact');

// Supprime l'item qui a la clé contact
localStorage.removeItem('contact');

// Efface toutes les données
localStorage.clear();

// Retourne le nombre de données
localStorage.length;

// Retourne l'élément à la position 1
localStorage.key(1);

On peut également utiliser sessionStorage où le stockage est temporaire.

Exercices

  • Créer un champ "clé" et "valeur"
  • Créer un bouton ajouter, au clic sur le bouton, on ajoutera la valeur du champ "valeur" dans le local storage avec la clé "clé"
  • Un bouton effacer permettra de vider le local storage
  • En arrivant sur la page, on affichera la liste des données présentes dans le local storage (boucle ?)
  • On ajoutera un bouton supprimer permettant de supprimer une clé en la saisissant dans le champ "clé"

JavaScript

By Matthieu Mota

Made with Slides.com

JavaScript

  • 1,337

More from Matthieu Mota