Après avoir revu les bases de HTML, CSS et découvert Bootstrap, les cours se poursuivent avec JavaScript !
C’est l’occasion de revoir les bases que j’avais déjà abordé avec Openclassrooms… Et de découvrir comment JavaScript fonctionne avec les pages web.
Comment JavaScript fonctionne ?
Pour intégrer du JavaScript dans les pages web, il faut l’ajouter au fichier HTML.
JS est un script que l’on peut ajouter de trois façons différentes.
- Soit directement sur un élément.
Par ex:
<button onclick = 'codeJS'> OK </button>
ici, onclick indique que le code JS sera actif uniquement lorsqu’il y aura un clic que le bouton.
- Soit à l’aide des balises
<script> </script>que l’on ajoute juste avant la fermeture du<body>.
Ici deux cas de figure se présentent :
– Soit en écrivant complètement le code JS dans le fichier HTML
<script> CodeJS à écrire </script>
– Soit en externalisant le fichier
<script scr = "js/scripts.js"> </script>
C’est cette dernière méthode que nous favoriserons.
Tous les scripts s’exécutent dans l’ordre dans lesquels on les a écrits. La seule façon d’afficher un message à l’infini (sans recharger la page) est de lier directement le script à un élément.
En JavaScript, on écrit toujours avec des guillemets simples. Cela évite des confusions si le code est écrit directement dans la page html (le code ajouté serait alors considéré comme un attribut !).
Message d’alerte
Nous l’avons déjà vu, il est possible d’ajouter des messages d’alerte qui s’affichent sur la page. Ces derniers sont utilisés uniquement lorsque l’on met au point une page. Ils sont ensuite à supprimer avant de mettre en production le code !
window.alert('...');
window sert à cibler la fenêtre,.alert donne l’action à réaliser, c’est à dire afficher un message dans une fenêtre « popup ». On ajoute ensuite le contenu du message (ou de la variable) à récupérer.
Le point virgule permet de passer à l’instruction suivante.
Attention : le message d’alerte est spécifique à window. Il est donc possible d’écrire le message d’alerte sans cibler la fenêtre :
alert('...');
La console
Lors de la rédaction de scripts pour les pages HTML, il est plus facile d’utiliser la console qui est disponible dans le navigateur pour vérifier leurs exécutions. Pour mémoire, la console est disponible lorsque l’on utilise l’inspecteur du navigateur (son raccourci clavier est la touche F12).
On peut voir apparaître différents types de messages :
– ceux qu’on s’envoie à soi même
– les warning
– et les erreurs
La communication avec la console se fait directement en intégrant dans le code JS :
console.log('test'); // affiche un texte
console.log(test); // affiche une variable
Les principales erreurs rencontrées sont :ReferenceError => la variable n’existe pas, il y a une erreur de référence.SyntaxError => il y a une erreur de syntaxe dans le code JS, quelque chose a mal été noté.
Bien qu’on utilise la plupart du temps console.log pour vérifier notre code, il est aussi possible de simuler des problèmes.
On peut alors utiliser différentes lignes de code dans le fichier JavaScript :
console.info('...');
console.warn('...'); // avertissement qu’il serait mieux de corriger
console.error('...'); // erreur réelle (non simulée), la suite du code ne sera pas lue
Les variables
Petit rappel sur les variables ! Elles permettent de stocker des informations. Une variable est une définition à un instant T.
Il y a 3 façons de déclarer les variables :
– avant ES6, on utilisait var
– depuis ES6, on utilise 2 types de déclaration :
° const pour déclarer une variable uniquement disponible en lecture, qui ne sera jamais modifiée. C’est l’abréviation de constante.
° let pour une variable qui est amenée à être modifiée.
La déclaration des variables se fait uniquement avec des caractères alphanumériques (majuscules ou minuscules), le underscore et le tiret. On ne met pas de caractères spéciaux, ni de chiffre seul et on ne
commence jamais avec un chiffre.
Caractères autorisés : a -> z A -> Z 0 -> 9 _ et –
let numero1 = 'un'; // variable qui sera modifiée const numero2 = 'deux'; // constante 'string' const vrai = true; // booleen const numeroTrois = 3; // constante numérique
A noter : JavaScript est « Case Sensitive ». C’est à dire que c’est un langage sensible à la casse. Il est donc impératif de faire attention à l’écriture des variables !
Conventions de nommage :
camelCase : on met une majuscule à chaque début de mot (sauf pour le premier) et tout est attaché
snake_case : on ajoute un underscore entre chaque mot (sans majuscules)
kebab-case : on met des tirets entre les mots (sans majuscules)
Enfin, on peut définir une variable let en début de document et lui attribuer une valeur plus tard dans le code.
let numero1; // // déroulé du code // numéro1 = 'un'; // suite du code et utilisation de la variable
La concaténation en JavaScript
La définition sur Wikipédia nous indique que la concaténation désigne l’action de mettre bout à bout au moins deux chaines de caractères.
Il y a différentes façons de concaténer plusieurs valeurs entre-elles :
– Le plus simple est d’utiliser le + car il permet d’associer les valeurs. Attention : si les variables ne sont que des chiffres, alors c’est une addition qui s’effectuera.
– On peut aussi utiliser une virgule. Dans ce cas, les chiffres s’ajoutent les uns à côté des autres. La virgule créé alors un espace entre les deux.
– Toutefois, on privilégiera la méthode mise en place depuis ES6 qui permet d’écrire à la fois du texte et des variables. Tout est écrit entre des ‘faux-accents’ : `` , et les variables sont écrites avec ${ } (tout le
reste est alors considéré comme du texte).
console.log(variable1 + variable2); // variable1variable2
console.log(variable1 , variable2); // variable1 variable2
console.log(`${variable1} + ${variable2}`); // variable1 + variable2
Les tableaux (Array)
Les tableaux sont des listes qui permettent de stocker des valeurs. L’écriture des tableaux se fait avec des crochets :
const slides = ['image1.png', 'image2.jpg', 'image3.png'];
Naviguer dans un tableau
Pour appeler une valeur dans un tableau, on utilise son index. IMPORTANT : les index d’un tableau commencent toujours par 0 !
const slides = ['image1.png', 'image2.jpg', 'image3.png']; console.log(slides[1]); // affichera image2.jpg
Taille d’un tableau
Lorsque l’on ne connait pas la taille d’un tableau, il est possible de l’afficher. On utilise alors .length. On peut alors utiliser cette propriété pour afficher un élément d’un tableau.
const slides = ['image1.png', 'image2.jpg', 'image3.png']; console.log(slides.length); // affichera 3 console.log(slides[slides.length - 1]); // affichera image3.png
Manipulation de tableau
Il est aussi possible de modifier un tableau pour :
- ajouter un élément à la fin d’un tableau avec
.push
nomVariable.push('nouvelleValeur')
- modifier la valeur d’un élément du tableau grâce à son index.
table[0] = 'nouvelleValeur' // modifie l'élément situé à l'index 0
- supprimer ou ajouter un élément à l’endroit que l’on souhaite avec
.slice. Il faut alors ajouter 3 paramètres :
– l’index où se situer pour commencer
– le nombre d’index à supprimer (si on souhaite ajouter un élément cette valeur sera égale à zéro)
– la nouvelle valeur à ajouter
array.splice(index, combien); // suppression array.splice(index, combien, valeur); // ajout
Les objets (ou tableaux d’objets)
Les objets sont stockés sous forme de tableaux et sont définis par leurs déférentes clés. L’écriture d’objets se fait avec des accolades :
const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};
Naviguer dans un tableau d’objet
Pour parcourir un tableau d’objet, on utilise un point (index textuel).
const etudiant = {prenom: 'Jean', nom: 'Dupont', note:'15'};
console.log(etudiant.prenom); // affichera Jean
Autres généralités sur les tableaux
Un tableau peut contenir différents objets. Pour améliorer la lisibilité, il est alors possible d’écrire les tableaux et les objets sur plusieurs lignes.
const etudiant1 = {prenom: 'Jean', nom: 'Dupont', note:'15'};
const etudiant2 = {prenom: 'Piere', nom: 'Dupond', note:'16'};
// const etudiants = [etudiant1, etudiant2];
const etudiants = [
{
prenom: 'Jean',
nom: 'Dupont',
note:'15'
}, {
prenom: 'Piere',
nom: 'Dupond',
note:'16'
}
];
console.log(etudiants); // affichera le détail des 2 objets etudiant1 et etudiant2
Il est aussi possible qu’un objet ait pour valeur des tableaux :
const frigo = {
fruit: ["banane", "mangue", "cerise"],
legume: ["courgette", "tomate", "poireau"]
};
console.log(frigo.fruit[0]); // affichera banane
C’est donc une mise à plat (et un peu d’approfondissement) que j’ai fait lors de mon cours.
La suite est à venir, avec beaucoup plus d’interaction avec la page HTML…