Développement web avancé
Introduction - JS
2526 · Dekens Antoine
Avant propos
Outils
- Visual Studio Code
- Codepen.io : un éditeur d'HTML / CSS / JS en ligne, gratuit et facile d'accès pour tester rapidement du code.
JavaScript
C'est quoi ?
Ce langage permet de créer des intéractions avec l'HTML, capable de modifier le CSS et dynamiser l'expérience web, comme définir une action à réaliser au clic d'un élément. À la base c'est un langage côté client, mais qui prend de plus en plus de place côté serveur avec l'environnement node.js.
⚠️ Évitez de raccourcir JavaScript par Java, ce sont 2 langages différents. JS est un diminutif accepté.Comment ?
C'est un langage interprété qui peut être exécuté directement. Autrement dit, notre navigateur peut l'exécuter sans devoir le compiler au préalable contrairement à d'autres langages.
Le JS est orienté objet et utilise le concept de class, à ne pas confondre avec les classes en CSS101
Dans le vocabulaire anglophone nord-américain familier, une façon de désigner un cours universitaire introductif à une matière donnée, ou la base fondamentale à savoir sur un sujet donné.Quelques règles
Il est important de garder en tête que le JavaScript est sensible à la casse (fait la différence entre majuscule et minuscule), que le code est interprété du haut vers le bas ce qui implique que l'ordre de votre code à son importance et que chaque instruction est séparée par des ; .
Balise script
Pour lier un fichier JavaScript nous avons besoin d'utiliser une balise script que nous allons placer dans la balise head et lui passer 2 attributs :
- src : qui est le chemin vers notre fichier .js
- defer : indique à notre script de s'éxécuter une fois le document analysé par le navigateur.
<script src="/path/to/my/script.js" defer></script>
Déclaration de variables
En JavaScript nous allons manipuler des données et de différents types que nous pouvons stockées dans des variables. Elles se définissent par un mot clé suivi d'un nom arbitraire laissé à notre choix. Il existe 3 mots clés différents :
- var : ancienne méthode, permet de rédéfinir la valeur de la variable.
- let : méthode moderne, permet de rédéfinir la valeur de la variable avec notion de portée.
- const : méthode moderne, permet de définir une constante (équivalent de define en PHP).
Affectation
Comme en PHP, nous pouvons affecter une valeur via le symbole = :
var myVariableA = 10;
let myVariableB = 20;
const myVariableC = 30;
// Équivalent en PHP
$myVariableA = 10;
$myVariableB = 20;
define( 'myVariableC', 30 );
Types
Les valeurs que nous stockons dans nos variables ont un type :
- null : variable définie mais de valeur null (sans valeur)
- string : chaîne de caractères
- number : nombres entiers et décimaux
- boolean : vrai ou faux (true / false)
string
Le type string permet d'enregistrer des chaînes de texte. Ce type de valeur est toujours entre simples ou doubles guillemets :
// pokemonA contient une valeur de type string avec des doubles guillemets.
const pokemonA = "Pikachu";
// pokemonB contient une valeur de type string avec de simples guillemets.
const pokemonB = 'Salamèche';
number
Le type number enregistre des valeurs chiffrées sans guillements. Les nombres peuvent être entiers ou décimaux :
// pokeballsCount contient le nombre entier 14
const pokeballsCount = 14;
// pokedollars contient le nombre décimal 1250,50
const pokedollars = 1250.50;
// Attention il possible d'avoir des nombres entre guillemets
// mais le type reste une chaîne de caractères.
const pokedollars2 = "1250.50";
boolean
Le type boolean peut être une de ces 2 valeurs: true ou false :
const pokemonCanEvolve = true;
const pokemonCantEvolve = false;
Gérer les erreurs
Contrairement à PHP, le JS est exécuté côté client sur le navigateur de l'utilisateur (Chrome, Safari, Firefox, etc.). Pour pouvoir monitorer les erreurs, nous devons passer par la console. Tout les navigateurs y ont accès facilement en faisant un clic droit sur votre page et en sélectionnant inspecter et en activant l'onglet console :
Afficher un message dans la console
const message = 'Que la puissance céleste soit avec vous';
// Demande d'afficher la valeur
// de notre variable 'message' dans la console.
console.log( message );
Opérations arithmétiques
Nous pouvons réaliser des opérations mathématiques, il suffit d'utiliser le bon symbole :
- + pour une addition entre deux valeurs
- - pour une soustraction entre deux valeurs
- * pour une multiplication entre deux valeurs
- / pour une division entre deux valeurs
// la variable "a" contient le résulat de l'addition entre 10 et 5 = 15
const a = 10 + 5;
// on réutilise la variable
const b = a + 10;
Les tableaux
Les bases
Définition
Les tableaux (ou array) permettent de stocker sous forme de liste des valeurs de tout types.
Création
On peut créer un tableau vide ou déjà rempli d'autres éléments, dans les 2 cas il faudra utiliser des crochets [ ]. Les éléments d'un tableau doivent toujours être séparées par des virgules :
Il est possible d'avoir des valeurs de différents types dans un même tableau, mais cela est a éviter.// Création d'un tableau vide
const pokedexA = [];
// Création d'un tableau avec différentes valeurs
const pokedexB = [ 'pikachu', 'carapuce', 'onix' ];
Ajouter un élément
La méthode push( ) des tableaux permet d'ajouter un ou plusieurs élement à la suite des autres.
Si plusieurs élément sont ajoutés, ils sont séparés par des virgules.// Création d'un tableau
const pokedex = [ 'pikachu' ];
// On ajoute deux valeurs de type 'string'
// "bulbizarre" et "margicarpe"
pokedex.push( 'bulbizarre', 'magicarpe' );
// Affiche [ 'pikachu', 'bulbizarre', 'magicarpe' ]
console.log( pokedex );
Retirer un élément
La méthode pop( ) des tableaux permet de retirer le dernier élément :
Ceci modifie la longueur de notre tableau.// Création d'un tableau
const pokedex = [ 'pikachu', 'bulbizarre', 'magicarpe' ];
// Retire le dernière élément de notre tableau => 'magicarpe'
pokedex.pop();
// Affiche [ 'pikachu', 'bulbizarre' ]
console.log( pokedex );
Cibler un élément
Pour cibler un élement précis d'un tableau, nous devons préciser entre crochets sa position : on parle d'indice. Une fois ciblé, on peut lire ou modifier la valeur de cet élément.
On commence toujours à compter à partir de 0.// Indices: 0 1 2
const pokedex = [ 'pikachu', 'bulbizarre', 'magicarpe' ];
console.log( pokedex[ 0 ] ) // affiche 'pikachu'
console.log( pokedex[ 2 ] ) // affiche 'magicarpe'
// Modifie la valeur de l'indice 1 pour 'carapuce'
pokedex[ 1 ] = 'carapuce';
Longueur d'un tableau
Il est possible de récupérer la longueur de notre tableau via sa propriété length :
// Indices: 0 1 2
const pokedex = [ 'pikachu', 'bulbizarre', 'magicarpe' ];
// Stocke la longueur de notre tableau
const length = pokedex.length;
// Affiche 3
console.log( length );
Parcourir un tableau
Dans de nombreux cas, nous voudrons réaliser des opérations sur chaque élément de notre tableau. Nous allons découvrir un nouveau type de boucle, la for…of :
const pokedex = [ 'pikachu', 'bulbizarre', 'onix' ];
// "Pour chaque pokemon de mon tableau pokedex
// éxécute le code entre accolade"
// La constante pokemon contiendra la valeur
// de chacun des élements de notre tableau
// jusqu'à atteindre le dernier élement.
for( const pokemon of pokedex ){
// Affiche d'abord "pikachu", ensuite "bulbizarre" et enfin "onix"
console.log(pokemon);
}
Les fonctions
Les bases
Définition
Les fonctions permettent d'éxécuter une tâche précise à un moment précis. Cela permet d'améliorer le lisibilité du code, et de ne pas devoir se répéter.
On parle de méthode quand une fonction est une propriété d'un objet.ex: Math.random( ), document.querySelector( )
Fonction nommée
Les fonctions nommées sont très similaires à celle de PHP, on commence par le mot clé function suivi d'un nom arbitraire, de parenthèdes et ensuite d'accolades :
// Une fonction nommée 'appear'
function appear = (){
// Affiche dans la console "Un pokemon sauvage apparaît"
console.log( "Un pokemon sauvage apparaît" );
};
Fonction fléchée
Nous allons voir comment écrire une fonction fléchée que l'on va stockée dans une constante et ceci pour valeur ( ) => { }. Entre parenthèses peuvent se situer des paramètres, et du code à éxécuter entre les accolades.
Il existe des fonctions nommées.// Une fonction stockée dans la constante 'appear'
const appear = () => {
// Affiche dans la console "Un pokemon sauvage apparaît"
console.log( "Un pokemon sauvage apparaît" );
};
Appeler une fonction
Nous avons défini une fonction, mais elle ne fera rien tant qu'on ne lui aura pas demandé de se lancer. Pour se faire, il suffit de noter son nom de variable directement suivi de parenthèses :
// Une fonction stockée dans la constante 'appear'
const appear = () => {
// Affiche dans la console "Un pokemon sauvage apparaît"
console.log( "Un pokemon sauvage apparaît" );
};
// Lance notre fonction "appear"
appear();
Paramètre(s)
Une fonction peut attendre un ou plusieurs paramètres, ce sont des valeurs que l'on passe à notre fonction lors de l'appel pour qu'elle puisse les utiliser ensuite dans le code situé entre ses accolades.
Il faudre prévoir ces paramètres à la définition de la fonction.
// Une fonction stockée dans la constante 'appear'
// qui attend un paramètre "pokemon"
const appear = ( pokemon ) => {
// On utilise le paramètre dans une concaténation
// pour dynamiser notre phrase.
console.log( "Un " + pokemon + " sauvage apparaît" );
};
// Affiche "Un Bulbizarre sauvage apparaît"
appear( "Bulbizarre" );
// Affiche "Un Pikachu sauvage apparaît"
appear( "Pikachu" );
Données de formulaire
Objectif
Récupérer les informations d'un formulaire depuis JavaScript et voir les différentes notions nécessaires.
Les étapes
- Cibler notre champ quantité
- Afficher les changements de valeur du champ
- Récupérer cette valeur au clic du bouton
- Retranscrire les informations
Notre exemple
Voici l'exemple sur lequel nous nous baserons :
Un élément important est que nous utilisons une balise button avec un attribut type="button" dans notre formulaire. Cela empêche l'exécution de la méthode, et donc de gérer cela dynamiquement en JS.
Cibler notre champ
Pour cibler notre champ, nous allons avoir besoin de définir ce qu'est le DOM et de découvrir comment intéragir avec ce dernier.
DOM
Le Document Object Model est une interface de programmation pour les documents web. Il représente la page de façon à ce que des programmes puissent modifier la structure, le style et le contenu du document. Le DOM représente le document sous forme de nœuds et d'objets.
C'est une représentation de notre HTML qui permet au JS d'intéragir avec lui.querySelector
document.querySelector() retourne le premier élément du document qui correspond au sélecteur CSS spécifié entre parenthèse :
<h1 class="title" id="mainTitle">Mon titre principal</h1>// Voici 3 façons de récupérer notre élément <h1>
// Par son tag
const titleFromTag = document.querySelector( 'h1' );
// Par sa classe
const titleFromClass = document.querySelector( '.title' );
// Par son id
const titleFromId = document.querySelector( '#mainTitle' );querySelectorAll
document.querySelectorAll() retourne tous les éléments du document qui correspondent au sélecteur CSS spécifié entre parenthèse :
Les éléments sont retournés dans une liste de type NodeList, traversable comme un tableau.<h1 class="title" id="mainTitle">Mon titre principal</h1>
<p>Un premier paragraphe</p>
<h2 class="title">Mon titre secondaire</h2>
<p>Un second paragraphe</p>// Retourne tous les éléments qui ont la classe .title
const titles = document.querySelectorAll( '.title' );
// Retourne tous les éléments avec le tag 'p'
const texts = document.querySelectorAll( 'p' );
// Retourne tous les éléments avec le tag 'h2'
// Dans ce cas ci notre liste ne contient qu'un seul élément.
const secondTitles = document.querySelectorAll( 'h2' );
Essayons maintenant de récupérer notre select :
<select id="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> const select = document.querySelector( 'select' );
console.log(select);
Afficher les changements de valeur
Maintenant que nous avons notre select accessible via une variable, on va pouvoir écouter les changements effectués par l'utilisateur. Cela passe par l'ajout d'un évènement.
Ajouter un évènement
Pour ajouter un évènement, on utilise la méthode addEventListener suivi de parenthèses attendant au minimum 2 paramètres :
- type : le type d'évènement à écouter
- listener : Une fonction à appeler avec les informations de l'évènement
Types d'évènements
Il existe une longue liste d'évènements possible, chacun ayant un contexte particulier dans lequel il peut être utilisé. Voici quelques exemples :
- click : évènement au clic
- change: quand un champ perd le focus et change de valeur
- input: quand un champ change de valeur en temps réel
- keydown: quand une touche du clavier est enfoncée
Nous allons créer une fonction onChange qui attend un paramètre event et qui l'affiche dans la console. Ensuite nous allons ajouter un évènement change sur notre select pour écouter les changements en lui passant notre fonction onChange :
<select id="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> const select = document.querySelector( 'select' );
function onChange( event ) {
console.log(event);
};
select.addEventListener( 'change', onChange );
L'objet event
L'objet event contient énormément d'informations qu'on appelle des propriétés. Elles auront des valeurs différentes qui dépendront du type d'évènement et de son contexte. Dans notre cas nous voulons afficher la nouvelle valeur de notre champ select.
Nous allon ciblé la propriété target qui représente notre champ, et ensuite ciblé la propriété value pour l'affiché dans notre console :
<select id="quantity" name="quantity">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select> const select = document.querySelector( 'select' );
function onChange( event ) {
console.log( event.target.value );
};
select.addEventListener( 'change', onChange );Récupération au clic
Prochaine étape : récupérer la valeur de notre formulaire quand on clic sur le bouton ajouter au panier. Commençons par récupérer notre button avec un querySelecto via une id btnAddToBasket que nous allons lui rajouter :
<button id="btnAddToBasket" class="button" type="button">Ajouter au panier</button>const btnAddToBAsket = document.querySelector( '#btnAddToBAsket' );On crée une fonction onClick qui affiche la target dans la console et on ajoute un évènement click via addEventListener en lui passant notre fonction :
<button id="btnAddToBasket" class="button" type="button">Ajouter au panier</button>const btnAddToBAsket = document.querySelector( '#btnAddToBasket' );
function onClick( event ) {
console.log( event.target );
};
btnAddToBAsket.addEventListener( 'click', onClick );
FormData
Dernière étape : demander à récupérer toute les données de notre formulaire via le constructeur FormData qui attend au moins un paramètre qui est le formulaire :
<form id="formAddToBasket" class="form" action="POST" method="">
…
<button id="btnAddToBasket" class="button" type="button">Ajouter au panier</button>
</form>const basketForm = document.querySelector( '#formAddToBasket' );
const btnAddToBAsket = document.querySelector( '#btnAddToBasket' );
function onClick( event ) {
// Récupère toute les données du formulaire
const data = new FormData( basketForm );
};
btnAddToBAsket.addEventListener( 'click', onClick );