Les bibliothèques logicielles (libraries en anglais) sont là pour aider le développeur à coder un site plus rapidement. Les libraries sont donc des facilitateurs de travail. En effet, elles permettent en très peu de lignes de code d’ajouter de multiples fonctions lors du développement d’un site (ou application) web.
Je vais donc vous faire une liste (non exhaustive) des différentes bibliothèques logicielles – basées sur JavaScript – que j’ai vu lors de la formation.
jQuery
Une des bibliothèques logicielles les plus connues pour JavaScript est jQuery. Et son slogan illustre très bien ce qu’une library apporte au développeur :
write less, do more
jQuery
Ajouter jQuery consiste à charger un script supplémentaire dans le fichier HTML. C’est un fichier qui a déjà plein de fonctions écrites et dont on pourra se servir pour nos propres scripts (on ajoute donc ce script avant le script de notre propre fichier JS).
Tout comme en JavaScript, jQuery permet de cibler des éléments du DOM pour leur ajouter une action (événement, modification du CSS, etc.). Il permet aussi d’ajouter des animations pré-construites permettant de dynamiser encore plus le site.
jQuery UI
Cette bibliothèque logicielle permet entre-autre de venir compléter jQuery. En effet, cette library apporte des interactions avec l’utilisateur, des widgets et des effets pré-construits qui ciblent plus particulièrement les formulaires (mais peuvent aussi être utilisées autrement !). Elle propose aussi des thèmes dont on peut s’inspirer.
Bootstrap
J’en ai déjà parlé, Boostrap est un framework CSS. Et c’est aussi une library JavaScript. Elle fonctionne avec les scripts jQuery et PoperJS et permet d’ajouter de nombreux components aux pages HTML. Ces derniers sont dynamiques, ils utilisent des classes spéciales ; ce qui évite donc d’ajouter des scripts perso.
FancyBox
Cette bibliothèque permet de créer un zoom en cliquant sur une image ou une vidéo et de faire un déroulé d’images. Elle fonctionne simplement : les images sur toute la page sont de basse qualité. Puis quand on clique dessus, un effet zoom se déclenche et ouvre une image de qualité supérieure. Cette library permet d’optimiser les temps de chargement des pages contenant de nombreux fichiers multimédias.
Masonry
Cette bibliothèque permet, lorsqu’il y a des images de tailles différentes, de réorganiser les éléments pour les placer de la meilleure façon. Cette library recalcule donc les tailles de toutes les images.
Isotope
C’est une bibliothèque qui permet de faire du tri visuel dans les éléments. (Elle permet aussi d’ajouter une mise en page d’images.)
Hammer.js
Cette bibliothèque permet de gérer des gestures tactiles : elle créée de nouveaux événements entièrement dédiés au tactile.
Autres librairies
Animate CSS et Anime JS Ces deux bibliothèques logicielles permettent d’ajouter des animations très poussées sur un site.
Leaflet C’est une library qui permet d’ajouter de la cartographie sur un site.
PixiJS Cette bibliothèque permet de faire de la gestion 2D pur les images, les jeux. C’est un moteur de rendus qui utilise les canvas. (elle est assez complexe à prendre en main, je la recommande à des développeur plus aguerris !).
AOS (Animate On Scroll) Comme son acronyme le mentionne, cette library permet d’ajouter des animations lors d’un scroll.
Container player C’est une bibliothèque qui permet d’ajouter des vidéos en background.
Progressively Cette library permet tout simplement de charger progressivement les images.
Voici donc un petit tour d’horizon des différentes libraries que j’ai pu voir lors de ma formation. Si vous en connaissez ou utilisez d’autres, venez les partager en commentaires ! 🙂
La manipulation du DOM est le sujet de la dernière partie du cours de JavaScript… J’ai alors pu voir plus en détail comment cibler des éléments pour les rendre dynamiques (en leur ajoutant un événement) !
Et dans un premier temps, faisons connaissance avec le DOM…
Le DOM, qu’est ce que c’est ?
D’après Wikipedia, le Document Object Modele (DOM) ou « modèle d’objets de document » concerne la page Web qui sera affichée dans le navigateur. Le DOM représente le document affiché par une structure en arbre, comportant des nœuds. La représentation suivante permet alors de mieux visualiser ce qu’est le DOM pour une page web :
DOM Model by Birger Eriksson / CC BY-SA (https://creativecommons.org/licenses/by-sa/3.0)
Affichage des éléments du DOM
L’affichage des différents éléments peut se faire grâce aux class : – ciblage.className affichera le nom des class – ciblage.classList affichera un tableau. Cela permet alors d’utiliser contains( ) qui va récupérer ce qui est contenu dans le tableau. Ce qui permettra ensuite de vérifier si oui ou non il possède déjà la class. Par exemple :
Il est aussi possible de récupérer l’attribut d’une balise HTML en utilisant getAttribute('attribute')
Les événements
Pour dynamiser encore plus les pages HTML, on va ajouter des événements. On appelle événement une action dynamique qui s’effectue par exemple lorsque l’on clique avec la souris, lors de l’utilisation du clavier, etc. Les événements peuvent ainsi se déclencher via la souris, le clavier, la fenêtre, le formulaire ou le document.
Ajouter un événement
Lorsque l’on souhaite ajouter un événement, on dit alors que l’on ajoute un événement d’écoute. En effet, la page va « écouter » ce que l’utilisateur fait avec .addEventListener. Pour cela, on va indiquer quel événement doit être « écouté » (un clic de souris, un scroll, etc.) et on indiquera ensuite dans une fonction quelle sera l’action à exécuter lors de cet événement.
maVariable.addEventListener('click', maFonction);
Pour faciliter la lecture, on va privilégier l’écriture de la fonction en fonction fléchée. Ce choix est d’autant plus pertinent que la fonction n’inclue aucun paramètre et qu’elle ne sera pas forcément utilisée ailleurs.
maVariable.addEventListener('click', () => {
//instructions de la fonction
})
Il est enfin possible de supprimer l’écoute d’un événement avec .removeEventListener. Dans ce cas, il faudra donc bien penser à externaliser la fonction !
Il existe de nombreux événements. Je vous liste ici les principaux événements que l’on peut ajouter sur une page HTML :
1. Souris – click – mouseenter : la souris entre dans l’élément – mouseleave : la souris sort de l’élément
2. Clavier – keydown : lorsque l’utilisateur appuie sur une touche – keyup : lorsque l’utilisateur relâche la touche Pour les événements clavier, chaque touche du clavier doit porter un numéro. Pour retrouver le numéro de la touche, il faut d’abord le chercher avec un événement d’écoute :
document.addEventListener('keydown', clavier);
function clavier(e) {
console.log(e.which);
}
Il faut aussi bien se souvenir que l’utilisateur ne pense pas à se servir de son clavier quand il va sur un site. Il faut donc bien le mentionner pour qu’il utilise son clavier !
3. Fenêtre L’écoute de l’événement doit donc cibler la fenêtre (window) – scroll : apparition d’un élément lors du scroll par exemple
window.addEventListener('scroll', maFonction);
– resize : l’élément se réadapte par rapport à la taille de l’écran
4. Formulaire – change : dédié aux input, select ou textarea, il est relié à une value. Cet événement est pris en compte uniquement lorsque l’utilisateur change de champs (dès qu’on est plus focus sur ce champs) – submit : relié à la balise <form> (donc au formulaire dans son ensemble). Il se déclenche au moment où l’on envoie le formulaire.
ciblage.addEventListener('submit', e => {
e.preventDefault( );
})
5. Document – DOM Content Loaded : s’exécute quand le document HTML est chargé et analysé (et pas lorsque les images et le CSS le sont). – load : s’exécute quand la page (ou ce qu’on a visé) est totalement chargée. On peut aussi le mettre sur la fenêtre pour vérifier que tout est bien chargé.
La gestion du temps
Lorsque l’on ajoute des événements sur une page HTML, il peut aussi être nécessaire de gérer le temps de ces événements. Pour cela, il existe différentes solutions.
setTimeout
Cette méthode est équivalente à un délai. L’inconvénient de cette méthode est qu’elle ne permet pas de faire un affichage/non affichage continuel car cela ferait alors une énorme boucle.
setTimeout(maFonction, temps);
Attention, le temps est alors exprimé en millisecondes (ms).
setInterval
Cette méthode permet les répétitions jusqu’à ce qu’on lui dise d’arrêter (c’est une boucle). Le temps est aussi exprimé en ms.
const repet = setInterval(maFonction, 1000);
Pour arrêter la boucle, on utilise alors clearInterval()
clearInterval(repet);
Date
Cette classe permet de récupérer des informations sur les dates, des informations générales sur le jour.
const maintenant = new Date();
maintenant.getDay(); // affiche le numéro du jour (Dimanche = 0)
maintenant.getDate(); // affiche le jour
maintenant.getMonth(); // affiche le numéro du mois (Janvier = 0)
maintenant.getFullYear(); // affiche toute l'année (2020 par exemple)
Mathématiques
Il existe enfin une fonctionnalité en JavaScript qui permet des opérations mathématiques : Math (il est défini comme un objet).
– Math.round() : créé un arrondi du chiffre. – Math.floor() : donne un arrondi du chiffre, à l’entier inférieur. – Math.ceil() : fait un arrondi du chiffre, à l’entier supérieur. – variable.toFixed(*digits*) : détermine le nombre de chiffre après la virgule (digits) pour arrondir un chiffre.
const nombre = 4.328;
nombre.toFixed(2); // affiche 4.33
– Math.random() donne un nombre aléatoirement entre 0 et 1.
Je vous mets ci-dessous une écriture qui permet alors d’être au plus juste par rapport aux probabilités :
Math.floor(Math.random() * (max + 1))
max est la valeur maximale à atteindre, auquel on ajoute 1 car sinon elle ne sera jamais obtenue. Par exemple, si on a un max de 10 et un nombre aléatoire de 0.999999, Math.floor(0.99999) donnerai 9 (et on n’aurait jamais 10).
– Math.isNaN() : ce n’est pas un nombre, c’est un booléen. – Number(nombre) : permet de convertir une valeur en numérique. – Math.min() : donne le minimum parmi les valeurs et Math.max() donne le maxi. Attention : si on a un tableau de valeurs, il faudra le convertir en liste en utilisant bien l’opérateur de décomposition « .. » .
Les cours de JavaScript suivis pendant ma formation prennent donc fin. Ils m’ont permis de découvrir comment dynamiser une page HTML. Maintenant, il va me falloir faire encore des exercices supplémentaires pour mieux maîtriser ce langage… Et je compte bien le faire en mettant au point mon portfolio (c’est le premier projet que je me suis fixé ! ).
Le cours de Javascript est intense et nous permet de voir quelques nouveautés. Et notamment certaines fonctions avancées qui permettront d’exécuter des instructions spécifiques.
Les fonctions
Une fonction ressemble à un mode opératoire avec des instructions à suivre dans un ordre donné. Ensuite, on se sert de la fonction uniquement lorsque l’on en a besoin dans le programme. En effet, tout ce qui est déclaré dans une fonction n’est pas actif tant que cette fonction n’est pas appelée.
A noter : on ne met jamais de point virgule après l’accolade de fermeture de la déclaration de la fonction.
Créer une fonction permet de l’utiliser plusieurs fois, de mettre du code en attente ou encore de combiner des actions.
Variables et fonctions
On peut attribuer une fonction à une variable :
const maFonction = function () {
// instructions;
}
Et depuis ES6, il est possible d’écrire une fonction en une fonction fléchée. J’avais rapidement abordé le sujet lors d’un précédent post sur JS. Cette notation est utilisée uniquement dans certains cas où l’on a besoin de déclarer une fonction à un endroit très précis sans qu’elle soit par la suite réutilisée.
const maFonction = () => {
// instructions;
}
Paramétrage d’une fonction
Lorsque l’on écrit une fonction, il est possible d’avoir besoin de différents paramètres dans les instructions. Ces paramètres sont alors modifiables lors de l’appel de la fonction. Ce qui permet de raccourcir le nombre de fois où l’on se répète !
// déclaration
function maFonction (param1, param2) {
// instructions incluant les paramètres param1, param2;
}
// appel
maFonction(att1, att2);
Il est alors possible d’attribuer des paramètres par défaut à la fonction. Ce qui lui permet d’avoir une valeur quoi qu’il arrive (ou qu’elle prenne cette valeur par défaut).
Par exemple :
// déclaration
function nouvelleConsole (x) {
console.log(x || 'valeur par défaut');
}
// appel
nouvelleConsole('bonjour'); // affiche "bonjour" dans la console
nouvelleConsole(); // affiche "valeur par défaut" dans la console
Les fonctions retour
Les fonctions retour servent à conserver des valeurs et à retourner de l’information pour pouvoir l’utiliser par la suite.
function retour (a, b) {
return a * b;
}
retour(2,4); // retournera 8 (2 x 4)
Les conditions
les comparateurs
Récapitulatif des comparateurs utilisés en JavaScript : > : supérieur, plus grand que >= : supérieur ou égal < : inférieur, plus petit que <= : inférieur ou égal == : égalité simple (vérifie que les valeurs sont similaires) != : différent (simple) === : strictement égal (vérifie que les valeurs et les types sont similaires) !== : strictement différent !(valeur) : pour les booléens, permet d’avoir l’inverse de la valeur && : et / permet de vérifier que plusieurs conditions sont toutes vérifiées || : ou / au moins une des conditions est vérifiée.
La condition IF
La condition if permet de vérifier différentes choses. Lorsque l’on écrit une condition if, on cherche à vérifier que la condition est vraie. S’il y a une possibilité que le résultats de cette condition soit faux, alors on ajoute des instructions dans un else à la suite du if.
Il est aussi possible de vérifier plusieurs conditions. Dans ce cas, on ajoutera un (ou plusieurs) else if après le if.
Attention, dès qu’une condition est vérifiée et vraie, la lecture s’arrête. Il est donc important de faire attention à l’ordonnancement de la recherche à exécuter.
if (maPosition == interieur) {
se_reposer();
} else if (maPosition == salleDeBain) {
brosser_dents();
} else {
promener_chien();
}
// l'instruction brosser_dents() ne sera jamais vérifiée car l'exécution de la condition s'arrêtera après avoir vérifié que maPosition est à l'intérieur (seule l'instruction se_reposer() sera exécutée).
A noter qu’il est aussi possible de mettre un if dans un autre if !
L’incrémentation
L’incrémentation permet d’augmenter la valeur d’une variable.
let Nombre = 4;
//
Nombre = Nombre + 1;
Nombre += 1; // écriture dédiée à l'incrémentation
Les opérateurs possibles sont les suivants : += : ajoute un chiffre -= : enlève un chiffre *= : multiplie un chiffre /= : divise un chiffre %= : modulo un chiffre
Il est également possible d’utiliser l’opérateur += pour ajouter du texte.
Variante ++ ajoute 1 et -- enlève 1
Attention, cette façon d’incrémenter n’est pas prise en compte tout de
suite. Elle l’est seulement après avoir déclaré la variable.
Les boucles FOR
La boucle for est principalement utilisée pour parcourir des tableaux. Et plus particulièrement lorsque l’on connait la fin (s’exécute un certain nombre de fois).
for (initialisation; condition; incrémentation) {
// instructions;
}
initialisation : c’est la valeur initiale de la variable utilisée pour la boucle. condition : qui permet de sortir de la boucle, elle est évaluée à chaque tour de boucle. incrémentation : c’est ce qui va se passer à chaque tour de boucle.
Par exemple :
for (let i = 0 ; i < 5 ; i++) {
console.log(i);
}
Boucle FOR et Tableaux
On peut aussi se servir d’une boucle for pour afficher toutes les valeurs contenue dans un tableau :
const table = ['val1', 'val2', 'val3'];
for (let i=0; i < table.lenght; i++) {
console.log(table[i]);
}
Pour parcourir un tableau, on a la possibilité d’utiliser 2 variantes de la boucle for : – for … in Cette boucle parcourt les index d’un tableau et donne les valeurs du tableau correspondant à l’index demandé.
const table = ['val1', 'val2', 'val3'];
for (let i in table) {
console.log(table[i]);
}
// affichera pour l'index 0 : 'val1'
// puis 'val2' puis 'val3'
– for … of Cette boucle parcourt le tableau lui même et donne chacune des valeurs de ses éléments (sans tenir compte de l’index).
const table = ['val1', 'val2', 'val3'];
for (let i of table) {
console.log(table[i]);
}
// affichera 'val1' puis 'val2' puis 'val3'
Boucle FOR et Tableau d’objets
Il est possible d’utiliser la boucle for pour parcourir un tableau d’objets. On s’en sert alors pour parcourir les clés du tableau d’objets. Pour cela, on utilisera la boucle for ... in .
Boucle FOR et Texte
Il est possible d’utiliser la boucle for pour parcourir une chaîne de caractères (notamment lorsque l’on fait un getElement). Il est alors important de transformer cette chaîne de caractère un un « vrai » tableau (pour éviter d’avoir des données supplémentaires inhérentes à la lecture par la console). Pour cela, on ajoutera trois petits points lors de la déclaration de la variable (avant le getElement) :
Les fonctions avancées permettent de réaliser différentes actions qui seront utiles lors de l’exécution du code. Lors de la suite de la formation, je vais apprendre à modifier le DOM (et répondre à la question : qu’est ce que le DOM ?).
Pour continuer l’apprentissage de JavaScript, nous allons voir les interactions entre JavaScript et HTML.
Pour rappel, une page HTML est un document contenant du texte et des balises structurantes. En JavaScript, il est possible de manipuler ce document grace aux interactions entre les fichiers JS et HTML.
Manipulation du document HTML
Depuis le fichier JavaScript, il est possible d’ajouter du texte directement sur la page (document) HTML. Pour cela, on utilisera la propriété .write :
document.write('Text');
document permet de cibler le document (page HTML) dans son ensemble.
Depuis le fichier JS, on peut aussi modifier ou récupérer du texte avec la propriété .innerText :
document.innerText; //permet de récupérer de l'information
document.innerText = 'Un texte'; //permet de modifier l'information
Il est aussi possible de manipuler le HTML (et ses balises) avec la propriété .innerHTML. Cela permet de rajouter, en plus du texte, les balises que l’on veut.
Toutes ces manipulations se font directement sur le document. Il est toutefois possible de modifier uniquement certaines parties de ce document. Pour cela, on va cibler spécifiquement ses éléments.
Ciblage par id
L’id est unique dans une page HTML. Il est donc facile de le cibler pour modifier le contenu de la balise identifiée. Pour cela, on utilisera la propriété getElementById( ) :
<p id="txt"> </p>
document.getElementById('txt').innerText = 'Texte à insérer';
Dans l’exemple ci-dessus, on a ciblé la balise contenant l’id ‘txt’ puis on a ajouté (ou modifié) du texte à l’intérieur.
Lorsque l’on code, il est possible que l’on répète plusieurs fois le même ciblage. Dans ce cas il est possible de créer une variable const. Cela permet de simplifier le code, de le rendre plus lisible. De plus, si l’id change, il sera plus facile de le modifier (on n’aura pas à parcourir toutes les lignes de code pour le changer !) :
const txt = document.getElementById('txt');
Ciblage par class
Le ciblage peut se faire en fonction des class ajoutées aux balises.
<p class="rouge"> </p>
document.getElementsByClassName('rouge');
Dans l’exemple ci-dessus, la class ‘rouge’ a été ciblée. Attention à l’écriture : il ne faut pas oublier le ‘s’ après ‘Element’. En effet, la console considère le résultat de la recherche par class comme un tableau. Il faudra aussi bien penser à indiquer l’indice visé entre crochets après le getElementsByClassName( ) .
Tout comme pour le ciblage par class, le résultat de la recherche par balise est considérée comme un tableau. Dans l’exemple ci-dessus, le texte sera donc ajouté au niveau de la 2ème balise <p> du document.
Autres ciblages
Il est possible de cibler plus généralement un élément. On utilisera querySelector :
querySelector('element') // ciblera le 1er élément désigné
querySelectorAll('element') // ciblera tous les éléments désignés (=> tableau)
A noter que l’écriture de l’élément se fait comme sur le fichier CSS. Ces ciblages sont à utiliser de préférence lorsqu’il n’y a pas la possibilité d’utiliser les autres ciblages.
Modification d’une source
Avec JavaScript, il est possible de modifier la source d’une image, d’un lien, etc. Pour cela, on va utiliser la propriété .src pour une image, .href pour un lien, etc. Par exemple, pour modifier la source d’une image :
JavaScript interprète le CSS comme un objet (alors qu’il considère le HTML comme un tableau). Lorsque l’on modifie le CSS en JS, on ne modifie pas le fichier CSS source. On vient juste inscrire les nouvelles règles de style dans le HTML (les modifications seront visibles uniquement depuis l’inspecteur !). Il faut alors écrire les propriétés CSS en camelCase. Par exemple :
Il est possible d’écrire plusieurs propriétés CSS (s’il y a de nombreuses modifications, il sera préférable de passer directement par le fichier CSS !) :
document.getElementsByClassName('rouge')[0].style.cssText = 'font-family: Arial, sans-serif ; color: red ;' ;
Voici un récapitulatif des interactions de base qu’il est possible d’avoir entre les fichiers JavaScript et HTML/CSS. La formation continuera sur des fonctions plus avancées en JavaScript…
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).
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.
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
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.
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…
Après avoir vu les basiques de la syntaxe du langage JavaScript (JS), je continue mon apprentissage : direction les conditions et les fonctions… Je continue donc de suivre le cours d’OpenClassrooms : Apprenez à coder avec JavaScript.
Là encore, le principe de réflexion est le même qu’en Python. Il me reste donc plus qu’à m’adapter à la syntaxe…
les opérateurs
En JavaScript, la syntaxe des opérateurs est différente de celle utilisée en Python. Je vous les liste ci-dessous les différences :
ET : && OU : || NON : !
ÉGAL : === DIFFÉRENT : !==
Il est préférable d’utiliser cette syntaxe (triple symbole) pour marquer une (in)égalité. Il faut toutefois garder à l’esprit que parfois un double symbole permet d’éviter un bug.
Les conditions
La condition « IF »
Il est bon de noter qu’en JS, les instructions de la condition « IF » s’exécutent quand la condition est vraie. Voici la syntaxe générale :
if (condition) {
//instructions exécutées lorsque la condition est vraie
} else {
//instructions s'il y a un "sinon"
}
Cas de nombreuses conditions
L’avantage en JavaScript, c’est qu’il est possible de regrouper sous un même code un groupe d’instructions permettant de répondre à différents cas de condition. On utilise alors des blocs d’opération pour traiter chaque cas.
const variable = prompt("blabla");
switch (expression) {
case valeur1 :
// instruction quand expression vaut valeur1
break; // si nécessaire
case valeur2 :
// instruction quand expression vaut valeur2
break; // si nécessaire
// ...
default :
// instruction quand expression vaut aucune des valeurs précédentes
}
Lorsque l’on utilise la condition « switch », lorsque l’on souhaite arrêter la vérification des conditions, il est important de ne pas oublier de mettre l’instruction « break ». En effet, elle permet de sortir du « switch » et évite de continuer à traiter les cas suivants (évite le passage d’un bloc à l’autre).
On notera toutefois que l’instruction « break » n’est pas utilisée lorsque l’on souhaite que le programme vérifie plusieurs conditions avant d’afficher le résultat demandé.
Les conditions en boucle
Tout comme en Python, il existe 2 types de boucles : « While » et For ». La boucle « while » est utilisée tant qu’une condition est vérifiée.
while (condition) {
// instructions exécutées tant que la condition est vérifiée
// NE PAS OUBLIER de mettre une fin de condition pour éviter la boucle infinie
}
La boucle « for »est à privilégier si l’on peut prévoir au préalable le nombre de tours de boucle à effectuer. La condition est donc basée sur une variable qui est modifiée dans le corps de la boucle. Elle prend en compte 3 paramètres qui constituent le compteur de boucle : – initialisation : c’est la valeur initiale de la variable compteur, principalement nommée « i ». Il est possible de la déclarer directement dans le compteur de boucle si elle n’est pas utilisée ailleurs (« let i = « ) ; – condition : elle est évaluée à chaque tour de boucle ; – étape : elle est réalisée à chaque fin de boucle.
for (initialisation ; condition ; étape) {
// instructions exécutées tant que la condition est vérifiée
}
Ci-dessous, voici un exemple concret :
for (let i = 0 ; i < 5 ; i++) {
console.log(i)
}
// le programme affichera 0 1 2 3 4
Les fonctions
Ici aussi, le raisonnement pour une fonction est le même qu’en Python. Voici donc la syntaxe générale :
function maFonction ( ) {
// instructions de la fonction
}
maFonction( ); // appel de la fonction
En JavaScript il existe aussi une autre syntaxe pour écrire une fonction. Il s’agit de la fonction fléchée dont voici un exemple général :
const maVariable = (parametre1, parametre2, ...) => {
// instructions pouvant utiliser chaque paramètre
}
//appel de la fonction où chaque paramètre reçoit la valeur d'un argument
maVariable(argument1, argument2, ...);
Le « FizzBuzz » est à l’origine un jeu pour apprendre aux enfants le principe de la division. Les enfants doivent énoncer les chiffres dans l’ordre et remplacer le nombre par « Fizz » s’il est divisible par 3 ou « Buzz » s’il est divisible par 5.
Et en quoi ça me concerne ?
Dans le monde des développeurs, ce jeu est repris sous forme de test. Lors d’un entretien d’embauche, ce test peut être proposé parmi d’autres tests techniques. Il permet à l’employeur de vérifier si, sous environ 15 minutes, le candidat est capable d’écrire ce programme dans le langage demandé.
L’énoncé est simple : Écrivez un programme qui affiche tous les nombres entre 1 et 100 avec les exceptions suivantes : Il affiche : – « Fizz » à la place du nombre si celui-ci est divisible par 3. – « Buzz » à la place du nombre si celui-ci est divisible par 5 et non par 3. – « FizzBuzz » à la place du nombre si celui-ci est divisible à la fois par 3 et par 5.
Pour réussir, il faut utiliser l’opérateur modulo « % » qui renvoie le reste de la division d’un entier par un autre. Plus simplement si un chiffre est divisible par un autre, le reste est nul :
10 % 2 => 0 (divisible)
alors que
5 % 2 => 1 (non divisible)
Je vous laisse chercher le programme en JavaScript… Avec un peu de recherche, je suis sure que vous allez trouver la solution !!! 😉
N’allez pas plus loin… Entraînez-vous avant !
Allez je partage avec vous ma solution en JavaScript…
let i=1;
while (i <= 100) {
if ((i % 3 === 0) && (i % 5 === 0)) {
console.log("FizzBuzz");
} else if (i % 3 === 0) {
console.log("Fizz");
} else if (i % 5 === 0) {
console.log("Buzz");
} else {
console.log(i);
}
i++;
}
Les langages HTML et CSS permettent d’obtenir une page web statique. Le langage CSS apporte la mise en forme (le visuel) de la page. Le langage JavaScript va ensuite permettre de dynamiser les pages web.
Mais qu’est ce que c’est ?
Le langage JavaScript a été inventé en 1995 et permet de dynamiser de façon simple les pages Web. En effet, ces dernières étaient jusqu’alors très simples (voire statiques). L’ampleur qu’a alors prise le langage Javacript est telle qu’il est devenu incontournable dans le développement de l’affichage des pages Web sur les navigateurs (c’est ce que l’on nomme développement front-end). Il est aussi très présent dans le développement côté serveur (ou développement back-end), côté mobile ou logiciels. La communauté autour de ce langage est aujourd’hui très importante, ce qui permet d’accéder à de nombreuses nouveautés (fonctionnalités, aides, etc.).
Après avoir étudié Python, JavaScript me semble très facile… C’est principalement la syntaxe qui change. Il va falloir que je me réhabitue ! 😉
Les changements par rapport à Python
La première nouveauté pour moi c’est que JavaScript utilise des blocs de code obligatoirement mis entre accolades » { } « .
Il faut aussi penser à mettre un point-virgule » ; » à la fin de chaque ligne définissant une consigne.
Concernant les variables, on peut déclarer 2 types de variables :
– les variables constantes : elles ne changent jamais tout au long du programme et ne s’affichent pas.
const variable ;
– les variables « standard » : leur valeur peut être modifiée au cours du programme.
let variable ;
Et il ne faut pas oublier que lors de la programmation, il est très important de déclarer une variable vide pour pouvoir ensuite l’incrémenter.
let variable = " " ;
// ... suite du programme
variable = variable + 1 ;
// ... suite du programme
L’affichage des variables est aussi différent.
Pour exprimer une chaîne de caractère avec une variable à l’intérieur, la syntaxe se fait avec des accents graves » ` ` » puis la variable est mise sous la forme « ${variable} « .
const country = "France" ;
console.log(`Je vis en ${country}`);
Autre grande différence avec Python : JavaScript permet d’affichage d’une boite de dialogue dans un navigateur web.
Il existe des instructions spécifiques pour le faire : « prompt( ) » et « alert( ) ».