Topic outline

  • General

    Collapse all Expand all

    Ce cours vous permettra de maîtriser les bases de la programmation en JavaScript. Nous n'aborderons des sujets plus concrets, et appliqués au développement d'applications web modernes qu'à partir des chapitres suivant.


    Voici quelques liens intéressants, à garder en tête tout au long de votre apprentissage, et même après :


    Pour les élèves que j'ai en e-learning, vous pouvez rejoindre la visioconf en cliquant sur le lien ci-dessous.

  • Présentation

    Contrairement à HTML et CSS qui sont des langages de balisage et de style, Javascript est un langage de programmation. La différence est énorme, car en Javascript vous allez pouvoir faire des choses impossible à faire à l'aide du HTML ou CSS. Un langage de programmation vous permet de commander à votre ordinateur de :

    • faire des calculs (les ordinateurs dépassent largement l'humain dans cette tâche)
    • exécuter des instructions
    • écrire des algorithmes
    • et bien plus encore...!

    De la même manière qu'il y a plusieurs langages selon les différents peuples sur Terre, il y a aussi de nombreux langages qui existent en programmation logiciel. Ils ont tous une histoire et une raison d'être différentes. Par exemple les langages bas niveau permettent de programmer des éléments électroniques (puces, périphériques, etc... ex : le langage C). Ce sont les premiers langages à avoir vu le jour, car il fallait bien programmer les éléments de base des tous premiers ordinateurs (processeurs, mémoire, affichage, etc...). Dans ce cas, les problématiques sont proches du hardware, et de l'électronique. Voici un wiki complet sur l'histoire des langages informatique.

    Naissance du langage

    Quand on travail sur le web, on utilise donc un langage adapté aux problématiques du web. Et c'est la qu'intervient Javascript. Le web étant assez récent dans l'histoire de l'informatique, il n'y avait au début aucun langage qui permettait de faire de la programmation dans une page web. Une page web était  un document statique qui ne faisait rien d'autres qu'afficher du texte, une image, ou des liens. Mais avec l'explosion de l'usage du web, la nécessité de pouvoir mettre de la programmation dans les pages web s'est fait sentir de plus en plus. C'est donc en 1995, via le navigateur Netscape d'Apple que sont nées les premières moutures de Javascript.

    le web en 1995


    alert js

    Voici par exemple une des toutes premières fonctionnalités de JS, afficher une boîte de dialogue dans une page web :

    alert('Hello world');
    C'est moche, mais révolutionnaire ! Cliquez ici pour en voir un exemple. Un autre exemple : c'est grâce à Javascript si vous pouvez ouvrir ou fermer le menu de navigation du Moodle, en cliquant sur le bouton hamburger en haut à gauche de votre écran. Avant JS, ça n'était pas possible.

    javascript client side


    Une architecture web se compose généralement d'un client et d'un serveur, Internet est conçu de cette manière. Il y a des langages de programmation côté serveur, et des langages côté client. Javascript se positionne à la base comme un langage côté client (c'est à dire : dans le navigateur web). Ce qui veux dire que on va pouvoir rendre dynamique un document qui à la base est statique (par exemple : intégrer une petite calculatrice). On voit clairement la place du JS dans l'illustration ci-dessus. Au même titre que le CSS, le JS est envoyé "en plus", et "en même temps", que le document HTML. Javascript est intimement lié à votre page web et au code HTML.

    Evolution

    Au départ, Javascript était un petit langage utilitaire pour dépanner les webmasters. Mais avec l'explosion du web, et des attentes toujours plus grandes de la part des internautes, Javascript s'est grandement développé jusqu'à devenir un langage très puissant qui offre un réel atout à vos pages web (aujourd'hui ça n'est plus un atout, mais une condition sinequanone). Grâce à NodeJS, on peux maintenant exécuter du Javascript en dehors d'un navigateur web, ce qui en a bouleversé l'usage. De ce fait, JS est entrain de devenir un langage phare, tout domaine confondus. Il vous est donc impossible de passer à côté en tant que développeur web.

    Voici une frise chronologique illustrant différents outils et framework gravitant autour de JS qui reflète bien un usage de plus en plus intense et varié de JS :

    environnement frameworks outils Javascript


    Standardisation

    Au même titre qu'une langue vivante, tel que le français, un langage informatique "vivant" (donc, utilisé) doit régulièrement évoluer. Et oui, même en informatique, la perfection n'existe pas. Il y a toujours des modifications à apporter pour améliorer les langages, et les rendre plus en phase avec les besoins du moment. La syntaxe et les fonctionnalités de Javascript sont définies par un organisme qui s'appelle l'ECMA (European Computer Manufacturers Association), et qui construit et améliore le langage régulièrement afin qu'il soit en phase avec les attentes des développeurs.

    Voici les différentes versions de Javascript, depuis sa naissance jusqu'à aujourd'hui :

    javascript et ecma évolution

    On peux remarquer ici qu'il y a différentes versions majeures de JS :

    • ES3 : une des plus anciennes versions standardisée de JS
    • ES5 : la version la plus répandue jusqu'en 2015
    • ES6 : la version à utiliser aujourd'hui (normalement bien implémentée dans tous navigateurs récents)
    • ES7 / ES8 : versions utilisables aujourd'hui, mais pas directement dans les navigateurs
    • etc...


    Vous remarquerez par la suite qu'il y a de nombreuses façons d’écrire les même choses en JS. La syntaxe le permet, mais aussi les différentes versions de JS qui ont des styles différents. Donc pensez bien à utiliser les syntaxes les plus récentes quand vous codez en JS. Aujourd'hui, on vous demande de connaitre au minimum le ES6 en sortant de formation, et c'est très important car il y a de très grosses différences entre ES5 et ES6.

    Voici un exemple de déclaration de variable dans les deux syntaxes :

    var nom = 'Julien'; /*ES5 : utilisation du mot clé var et des guillemet simple*/
    let nom = `Julien`; /*ES6 : utilisation du mot clé let et des back-tick : `...` */


    Utilisation actuelle

    Même si vous pouvez théoriquement coder du JS en Vanilla pour votre page web, il est assez rare de ne pas utiliser un environnement minimal quand on développe quelque chose en Javascript. Nous n'entrerons pas dans les détails ici, mais sachez que certaines librairies ou framework sont quasiment incontournables en entreprises. 

    En voici quelques uns :

    • NodeJS (environnement)
    • Angular (framework front-end)
    • React (framework front-end)
    • Express (framework back-end)
    • JQuery (librairie populaire, mais en perte de vitesse)
    • Typescript (sur-ensemble de JS)
    • etc...


    Ça n'est qu'un bref aperçu des technos gravitant autour de JS. Vous n'avez pas besoin de toutes les maîtriser, mais Node devient de plus en plus incontournable que ce soit en front-end ou en back-end. Donc je vous encourage à vous entraîner à l'utiliser petit à petit. Nous ferons certainement un point sur Node en front-end au cours de la formation.

  • Javascript et HTML

    Comme nous venons de le voir, Javascript est fait à la base pour "améliorer" les pages web. Et les pages web : c'est du HTML ! Il y a donc une très forte connexion entre les deux langage. Voici comment ça se passe.


    Le DOM

    Dom exempleComme nous l'avons vu sur les cours précédents, quand un navigateur reçoit une page HTML, il ne l'affiche pas "telle quelle". Il décortique le code HTML reçu, et construit ce que l'on appel le DOM (pour Document Object Model). Et c'est le DOM qui sert de référence pour créer le rendu de votre page. 

    Le DOM est ce que nous appelons un objet, c'est à dire qu'il est créé selon une logique particulière, qui fait que les éléments qui le compose peuvent être créés, lus, modifiés ou supprimés si on sait lui parler et qu'on utilise la bonne méthode. Et Javascript sait faire ça. C'est à dire que Javascript dispose des éléments de langages pour venir discuter avec votre DOM, et faire des modifications dessus.

    => Inspecter la page du cours pour voir le DOM dans votre console. Rien de neuf, nous avons tous vu ça ensemble.

    Pour l'aspect POO (programmation orientée objet), nous verrons ça ensemble dans un des chapitres suivant. Ce que vous devez comprendre c'est que le DOM est entièrement modifiable via un langage de programmation tel que Javascript. Vous pouvez par exemple changer des couleurs, changer le contenu d'un texte, ajouter des lignes à un tableau, etc etc...

    Tous les éléments d'une page web correspondent à un objet du DOM. Dans l'image ci-contre, nous voyons que certains objets possèdent du texte, d'autres des attributs (tel que href), et d'autres contiennent simplement d'autres objets (c'est dû à l'imbrication du code HTML). Je ne vous ferai pas la liste de toutes les méthodes et attributs accessibles via le DOM car elle serai immensément longue. Mais sachez que TOUTE votre page web se trouve quelque part dans ces objets, à vous de rechercher les différentes méthodes selon vos besoins.


    Méthode d'accès aux DOM

    Même si on a pas encore vu les bases de JS, voici quelques exemples concrets d'utilisation du DOM.

    Script pour modifier le texte d'un élément :

    <body>
    <h1 id="monTitre">Salut julien</h1>
</body>
<script>
    document.getElementById('monTitre').innerHTML = 'Hola Julian';
</script>

    Décortiquons un peu cette instruction :

    • document : fait référence à l'objet document du DOM. Il y a d'autres objets de haut niveau dans le DOM, tels que window, ou location.
    • getElementById('monTitre') : c'est une méthode qui permet de sélectionner un des éléments du document en utilisant son attribut id. Ici l'id de l'élément que l'on souhaite modifier est monTitre
    • innerHTML : c'est une propriété qui permet d'accéder au contenu d'une balise précédemment sélectionnée. Ici, en rajoutant = 'Hola Julian', on va modifier le contenu de la balise (on pourrait aussi juste la lire par exemple)


    => Copiez ce code dans votre sandbox JS pour constater le résultat

    Voici un autre exemple pour lire le contenu d'une balise :

    <body>
    <h1 id="monTitre">Salut julien</h1>
    <h1 id="lecture">Je suis le titre 2</h1>
</body>
<script>
    document.getElementById('monTitre').innerHTML = 'Hola Julian';
    console.log(document.getElementById('lecture').innerHTML);
</script>

    Ici, on ne modifie pas le contenu de notre deuxième titre (id = lecture), mais on le lit simplement en JS. On pourra en faire ce que l'on veut par la suite. Et vu que JS est un langage de programmation, on pourra en faire à peu près ce que l'on souhaite.

    => Rajoutez ces éléments à votre page web, et constatez la différence.

    dom javascript manipulation example



    Modifier le style

    En JS, on peux aussi modifier le style d'une page via la même méthode :

    <body>
        <h1 id="monTitre">Salut julien</h1>
        <h1 id="lecture">Je suis le titre 2</h1>
    </body>
    <script>
        document.getElementById('monTitre').innerHTML = 'Hola Julian';
        console.log(document.getElementById('lecture').innerHTML);
        document.getElementById('monTitre').style.color = 'red';
        document.getElementById('lecture').style.border = 'solid 1px black';
    </script>

    Constatez la similitude avec la syntaxe de CSS. On retrouve bien nos propriétés color et border, et les valeurs sont les même qu'en CSS. C'est normal, car techniquement, on modifie réellement, et de manière dynamique et programmable les règles de style CSS de notre page. Attention toutefois, il y a parfois des différences d'écriture des propriétés CSS. En JS on utilise le camelCase, alors qu'en CSS, on rajoute un tiret entre chaque mot (background-color en CSS deviendra backgroundColor en vanillaJS).

    => Copiez ce code et voyez le résultat.

    Nous approfondirons la manipulation du DOM et des styles dans un autre chapitre.


    Mettre en place des événements

    javascript evenementsJe vais vous montrer une des possibilités qui mélange le HTML et le JS, mais cette méthode n'est plus bonne. Je vous la montre juste par principe. Javascript permet de mettre en place ce que l'on appel des écouteurs, et des événements. En gros, vous pouvez programmer une action sur un événement particulier. Pa exemple, vous souhaitez que lorsqu'un utilisateur clique sur un bouton, votre page lui affiche un message. Voici la "vieille" technique, donc à proscrire aujourd'hui, à part en cas d'absolue nécessité :

    <button onClick="alert('Vous avez cliqué sur le bouton');">Test event</button>

    Faites le test dans votre sandbox, cela fonctionne parfaitement. Voici comment se décompose ce code :

    • l'attribut onClick est interprété par votre navigateur. Il met donc en place un événement qui sera déclenché lorsque l'utilisateur cliquera sur ce bouton
    • le script alert('Vous avez cliqué sur le bouton'); est le javascript qui sera exécuté seulement lorsque l'événement sera déclenché (triggered)


    Cette méthode n'offre que peu de souplesse, et mélange votre structure (HTML) à votre programmation (JS). Donc à éviter. Mais ça à le mérite de vous faire découvrir les événements, qui sont une part très importantes de la programmation. Vous pouvez mettre en place des événements sur de très nombreux éléments, et qui répondent à de très nombreux types (passage de la souris, interaction avec le clavier, finalisation du chargement de la page....). Voici une syntaxe plus propre :

    <body>
    <button id="testEvent">Test event</button>
</body>
<script>
    document.getElementById('testEvent').addEventListener('click', function () {
        alert('Vous avez cliqué sur le bouton');
    });
</script>

    Nous verrons les événements plus en détails dans un autre chapitre.


    Note importante : toute cette syntaxe de la forme document.getElementById('monTitre').style.color = 'red', c'est de la programmation orientée objet. Vous y retrouvez des objets, des méthodes, une syntaxe d'accès aux méthodes (le point en l’occurrence), des paramètres, des attributs, etc etc... Javascript étant un langage orienté objet, c'est une notion clé que vous devrez absolument maîtriser à la fin de la formation.


    Bref, une image vaut mille mots

    modifier le dom en javascript

  • Syntaxe

    Avant de rentrer dans le code "dur", découvrons ensemble quelques généralités sur la syntaxe de Javascript.


    Appeler un script

    De la même manière qu'avec le CSS, il vous faudra à un moment ou à un autre "incorporer" votre JS à votre HTML. Ça n'est pas vraiment de la syntaxe à proprement parler, mais c'est une notion de base lorsque l'on travaille dans un environnement web.

    Il y a plusieurs possibilités, plus ou moins propres, les voici :

    Appeler un fichier exterieur à votre page :

    <script type="text/javascript" src="filename.js"></script>

    Cette balise doit être placée dans la balise <head> de votre page. Vous pouvez aussi la mettre dans la balise <body>, mais c'est moins "propre". L'attribut type correspond au type MIME de votre fichier (standard international pour les types de fichiers), et la balise src correspond au chemin du fichier que vous souhaitez charger.

    Ouvrir une simple balise de script :

    Comme la balise <style> de CSS, vous pouvez ouvrir une balise <script> directement dans votre page. 

    Exemple :

    <script>
        alert('Hello world !');
    </script>

    Simple et efficace, mais pas propre du tout en ce qui concerne les bonnes pratiques.


    Les point-virgules

    Les points virgules représentent la fin d'une instruction dans de nombreux langages de programmation. Ils sont optionnels en JS, mais je vous conseil de les mettre afin d'avoir un code plus carré, et plus dans les standards. Vous pouvez faire commencer vos fichiers de script par l'instruction 'use strict'; qui vous forcera à ne pas oublier ce genre de détails (et bien plus encore). 

    Exemple :

    alert('Hello world');
    alert('Bonjour le monde')

    Les deux syntaxes sont valables, à moins d'utiliser le paramètre use strict :

    "use strict";
alert('Hello world');
alert('Bonjour le monde')

    La, ça ne passe plus. L'interpréteur vous lèvera une erreur de syntaxe.


    Les commentaires

    En JS, les commentaires s'écrivent de deux manières. Soit vous ne souhaitez commenter qu'une seule ligne, et vous pouvez utiliser //. 

    Exemple :

    //alert('Hello world');     Cette ligne ne sera pas exécutée dans votre script

    Ou bien si vous souhaitez commenter un bloc, vous pouvez utiliser /* ....... */. 

    Exemple :

    /*
    alert('Hello world');
    alert('Bonjour le monde');
    Tout ce bloc ne sera pas exécuté
    */


    Prise en compte de la casse

    Javascript est sensible à la casse. Cela veux dire qu'un caractère en minuscule est interprété différemment que le même caractère en majuscule.

    Exemple :

    let prenom = 'julien a';
    let Prenom = 'julien b';
console.log(prenom); /* Affichera "julien a" */
console.log(Prenom); /* Affichera "julien b" */
console.log(PRENOM); /* Affichera une erreur car cette variable n'existe pas */

    Donc faites bien attention aux nommage de vos éléments.


    Les expressions réservées

    Nous allons voir au fil des cours que certains mots sont réservés par le langage lui même. Voici quelques exemple :

    • function : réservé à la définition d'une fonction
    • var / let / const : réservés pour la déclaration de variables / constantes
    • super / this / public : réservés pour la POO
    • if / else / for / while : réservés pour les structures conditionnels et itératives
    • etc....


    Vous verrez tout ces mots clés à l'usage, mais gardez bien en tête que certaines choses sont juste impossibles. Par exemple si vous souhaitez créer une variable qui contient un super texte, vous ne pouvez pas écrire :

    let super = 'Mon super texte'; /*Votre script plantera, et vous aurez un joli message d'erreur du type : Uncaught SyntaxError: Unexpected token super*/

    Mais plutôt :

    let superTexte = "Mon super texte";


    Style d'écriture

    On essaiera au maximum d'utiliser le camelCase (première lettre des mots en majuscule, sauf le premier mot) pour toutes les variables et fonctions :

    function affichePersonnage(nomFamille, prenomPrincipal, prenomSecondaire){
        console.log(`${prenomPrincipal} (${prenomSecondaire}) ${nomFamille}`);
    }

    Vous pouvez aussi utiliser les underscore "_" comme séparateur de mots. En revanche le tiret "-" est réservé aux soustractions, donc impossible à utiliser pour le nommage de vos éléments.


    Caractères valides

    Quand on code un logiciel, on essaye d'appliquer ce qu'on appel des "bonnes pratiques". Et on essaye de pas faire n'importe quoi. Sauf que dans certains cas, les langages vous autorisent à faire n'importe quoi, ce qui est souvent le cas de JS. Voici un exemple de chose à ne pas faire :

    let passé = 'past';
    let présent = 'present';
    let futurç = 'future';
    console.log(passé); /*Affiche "past"*/
    console.log(présent); /* Affiche "present"*/
    console.log(futurç); /* Affiche "future"*/

    On évitera au maximum tout ce qui est caractères spéciaux. Si vous codez un truc comme ça, et qu'un développeur anglophone ou germanophone reprend votre code, il ne saura même pas quelle touche de son clavier utiliser pour reproduire les accents et la cédille (ils n'existent tout simplement pas en anglais par exemple). Cela peut devenir très vite frustrant de galérer sur ce genre de détails, donc on respecte la profession en utilisant des standards reconnus par tout le monde. Certains langages vous interdirons clairement cette syntaxe. Voici une page intéressante sur le sujet.


    Pour conclure, vous devez retenir qu'il y a de nombreuses règles et conventions, plus ou moins strictes, lorsque l'on écrit des lignes de codes. Il vous faudra vous en imprégner au mieux, jusqu'à que celles-ci deviennent réflexes. Cela peut prendre un certains temps, mais c'est comme apprendre une nouvelle langue, on finit par s'y habituer.

  • La console

    Lorsque l'on fait du développement web front-end, il y a un outil qu'il faut absolument découvrir et maîtriser, c'est la console du navigateur. Elle contient toutes les informations techniques sur la page ou l'application web en cours d'exécution dans votre navigateur. Elle contient de nombreuses données, en voici quelques exemples :

    • le DOM
    • les logs émis par l'application : erreur, warning, debug, etc...
    • des informations sur le réseau (temps de chargement, qualité de la bande passante, etc...)
    • etc...


    En JS, nous utiliserons surtout la console afin d'afficher certaines informations, puis plus tard, comprendre ce qui se passe dans l'exécution d'un code JavaScript.

    Pour ouvrir la console, il suffit de faire un clic-droit >> Inspecter, ou bien appuyer sur la touche F12 (cela peut varier selon les navigateurs ou les OS).



    Dans cet exemple, on peut constater plusieurs types d'erreurs :

    • warning : en rouge, erreur "graves", bloquantes, ou de sécurité
    • notice : en bleu, erreur sans gros impact sur le fonctionnement de l'appli
    • log d'information : orange ou vert

    => note : voir console.table


    La console ne sert pas qu'au JavaScript. Comme vous pouvez le constater, des erreurs de plusieurs origines sont affichées dans la console. Vous pouvez d'ailleurs filtrer les informations affichées en utilisant les petites puces (Net, CSS, JS, etc...) présentes en haut de la console.


    Ces informations sont cruciales, car elles vous permettront de réparer des problèmes (débugguer) plus facilement. Et cela est vrai dans tous les langages de programmation. Mieux vous saurez lire les logs, plus vite vous comprendrez l'origine du problème.

  • Les algorithmes

    Important : l'initiation à Javascript se base sur des cours qui sont communs à d'autres langages. Les notions de base de la programmation sont communes à quasiment tous les langages, donc il vous faudra suivre les liens pointant vers d'autres cours au fur et à mesure des sections.

    JavaScript étant un langage de programmation, il obéit au sacro-saint concept de base partagé par tous les langages : l'algorithmie. Donc rendez-vous sur le cours suivant pour découvrir le concept d'algorithme.

    => Accédez au cours sur l'algorithmie.

  • Variables et constantes

    Au même titre que les algorithmes, les variables sont une notion partagée par tous les langages de programmation, donc rendez-vous sur le cours générique sur les variables et constantes.


    Voici une équation bien connue, représentée par une variable et une constante. Trop facile pour un programme informatique.



    Utilisation des variables en JS

    Même si le concept de variable et communs à tous les langages de programmation, ils ne l'implémentent pas tous exactement de la même manière. C'est un peu comme les différentes langues humaines, de nombreux pays ont des lettres en commun dans leur alphabet, mais ils ne la prononcent pas de la même manière. Il faut donc bien comprendre les différences entre les langages pour utiliser correctement les notions de base telles que les variables et constantes. Vous cernerez ça progressivement avec le temps. Mais rappelez-vous bien que les langages informatiques sont conçus par des humains, donc pas forcément "parfait" ou homogènes.


    Besoin >> Spécification >> Implémentation


    • Besoin : le besoin humain. Par exemple, je veux en langage de programmation pour coder le logiciel embarqué dans une fusée, dans un lave-linge, dans une console de jeu. Ou bien pour un site web, pour commander un processeur, suivre les cours de la bourse, ou encore faire de la 3D !
    • Spécification : le cahier des charges. Pour répondre à mon besoin, mon langage devra respecter telle ou telle autre règle (en terme de performance, de sécurité, de facilité d'apprentissage, etc...). Ce sont des grandes lignes techniques et théoriques vers lequel le langage doit tendre.
    • Implémentation : la concrétisation. C'est la partie qui permet de transformer les spécifications en code concret. Et donc c'est l'implémentation des spécifications qui donne naissance à un nouveau langage. Cela est vrai pour un langage, mais aussi pour une application.


    Par exemple, depuis ES6, les concepteurs de JavaScript on introduit 2 nouveaux mots-clés qui permettent d'initialiser une variable ou constante : ce sont let et const. Initialement, les variables étaient déclarées à l'aide du mot-clé var. Et il n'y a pas seulement le nom qui a changé, le fonctionnement interne de variables déclarées avec let ou const, et celles déclarées avec var est différent. La principale différence se joue dans la notion de scope, qui est aussi une notion de base de tous les langages, et que nous aborderons ensemble plus tard.


    Si tout cela vous semble encore flou - ce qui est normal, je vous rassure - voici quelques liens intéressants sur l'utilisation de ces mots clés :



  • Le typage

    Voir le cours générique sur le typage en programmation logiciel.


    A retenir concernant le JS

    Types disponibles :


    Javascript est un langage de typage faible, mais un autre langage proche de Javascript permet de faire du typage fort : Typescript. 

    Les variables se typent elle-même, en fonction de leur valeur. C'est que l'on appelle le typage dynamique. A contrario, le typage statique interdit de passer plusieurs types de données à une même variable. Cela conduirai à une erreur qui ferai planter le programme, contrairement au typage dynamique qui va quand même essayer de faire quelque chose avec le "nouveau" type.

  • Opérateurs

    Voir le cours générique sur les opérateurs.


    Voici quelques spécificités sur les opérateurs, propre à Javascript.

    Les template string

    La concaténation peut vite s'avérer illisible pour un humain avec les méthodes standard, croyez-moi. Donc JavaScript a incorporé une nouvelle syntaxe pour faire de la concaténation plus facilement, que je vous encourage très fortement à utiliser. Ce sont les template string. Ils permettent de se passer de l'opérateur + pour la concaténation.

    Exemple sans template string :

    let prenom = 'julien';
let age = 34;
let humeur = 'bonne';

console.log('Bonjour ' + prenom + ', vous avez ' + age + "ans, et vous êtes d'humeur : " + humeur); /* ouverture, fermeture, ouverture, fermeture....*/
console.log(`Bonjour ${prenom}, vous avez ${age} ans, et vous êtes d'humeur : ${humeur}`); /* template string => plus propre */

    La deuxième ligne, contenant le caractère `, est une template string. Elle est beaucoup plus facile à lire, et on risque de faire beaucoup moins de fautes de frappe. Le caractère ` (backtick, accent grave en français), se fait en faisant la combinaison de touches AltGr + 7 sur votre clavier (à part sur les Mac, évidemment). Il vous suffit alors de mettre vos variables entouré par ${...}, pour qu'elles se concatènent toutes seules avec le reste de la chaîne de caractère. C'est ce que l'on appelle l'interpolation.

    Note : double usage du caractère + en JS. Dépend des types de données.


    Voici quelques exercices simples qui permettent de travailler les différentes notions que nous avons vues ensemble jusqu'ici. Ils nécessitent tout de même quelques notions que nous n'avons pas encore vues, je vous donnerai des indices pour ne pas bloquer trop longtemps sur certains aspects des exercices, mais vous pouvez trouver tout ça très facilement sur Internet, si vous faites les bonnes requêtes sur votre moteur de recherche. 

    Important : Cet aspect de votre travail (rechercher correctement des informations présentent sur le web), est vital. Vous allez passer une bonne partie de votre temps à rechercher des informations sur Internet, donc autant faire ça bien ! J'insiste : c'est crucial, vital, important, nécessaire, et c'est tout un art ! Connaître les bons sites, écrire/lire l'anglais, savoir trier le vrai du faux, etc...

  • Structures conditionnelles

    Voir cours générique sur les structures conditionnelles.

    Il n'y a pas vraiment de particularités liées aux structures conditionnelles en JS en dehors des structures conditionnelles génériques (if, else, else if, ternaire, switch).

  • Structures itératives

    Avant de voir les boucles en JS, voir le cours générique sur les structures itératives.


    Le for...of

    Introduit en ES6, le for...of permet de parcourir et d'accéder aux valeurs d'un tableau de manière encore plus pratique. Plus besoin de gérer les index, for...in le fait pour vous. Il suffit juste de spécifier dans quel variable vous aller stocker les éléments pour chaque itération (ici : element), et de renseigner le tableau que vous souhaitez parcourir.

    Exemple :

    let eleve = [
    'julien',
    33,
    {
        'html': true,
        'css': true,
        'js': true,
        'php': true,
        'java': false
    }
];
for (let element of eleve) {
    console.log(element);
}

    Ce genre de syntaxes sont très pratiques car elles enlèvent du travail aux développeurs, et leur permettent de se concentrer sur des choses plus importantes (pas de besoin de déclarer de variable de compteur par exemple). En revanche, vous ne pourrez utiliser ce type de syntaxe seulement sur des tableaux, ou objets itérables (donc indexés). La syntaxe est aussi beaucoup plus digeste à lire, et donc la vérification du code est plus facile, et l'erreur humaine moins grande.


    Le for...in

    Idem que le for...of, mais est plus adaptés aux objets, qui eux n'ont pas d'index classiques.

    Exemple :

    let voiture = {
    'marque': 'Ferrari',
    'annee': 2003,
    'couleur': 'rouge',
    'vitesse_max': 280
};
for (let property in voiture) {
    console.log(`${property} : ${voiture[property]}`);
}

    Remarquez le nommage de la variable property. On essaiera toujours de coller à la réalité des choses que l'on manipule. On aurait pu écrire i par exemple, mais il vaut mieux utiliser des mots clairs au maximum. Note : dans le console.log, j'ai écrit voiture[property] au lieu de voiture.property. C'est un cas un peu bizarre. Si j'écrivais voiture.property, JS essaierai d'aller chercher la propriété qui s'appel property, et non la valeur que contient property. Et donc renverrai une erreur, car notre objet voiture n'a aucune clé "property". À discuter. Vous rencontrerez souvent le diminutif de property : prop (ou props).

    Attention : il me semble que le for...in va être supprimé de JS pour différentes raisons. En effet, on itère rarement sur un objet, et cela pourrait porter à confusion vis-à-vis des bonnes pratiques.


    Les itérateurs

    .forEach(), .map(), .reduce() : cours à faire

    doc : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array

  • Les fonctions

    Avant de parler des fonctions en JS, voir le cours générique sur les fonctions.


    Syntaxe en JS

    Voici la syntaxe de base d'une fonction :

    function somme(a, b){
        return a + b;
    }
    Donc on retrouve bien notre déclaration function, notre nom de fonction (identifiant) somme, nos paramètres (a et b, séparés par une virgule),  et notre bloc d'instructions avec le mot clé return. Dans ce cas-là la fonction va retourner la somme de a + b. 

    Retour de la fonction : le mot clé return se comporte comme un break, c’est-à-dire que lorsqu'il est exécuté, on "sort" de la fonction, même s’il reste du code en dessous. 

    Appel d'une fonction : pour appeler une fonction, on écrit simplement son nom, suivi des parenthèses et des paramètres s’il y en a.

    Portée : les paramètres sont accessibles seulement à l'intérieur de la fonction. On dit qu'ils ont un scope limité à la fonction. Cette notion est très importante, nous l'approfondirons plus tard.


    Voici un exemple d'utilisation :

    let premierChiffre = 5; /* on détermine les paramètres */
    let deuxiemeChiffre = 9;
    let resultat = somme(premierChiffre, deuxiemeChiffre); /* La variable resultat prendra la valeur retournée par la fonction somme() */
console.log(resultat); /* on affiche le résultat */

function somme(a, b) {
    return a + b;
}
    => Copiez ça dans votre sandbox, et testez différentes valeurs. Faites-moi la soustraction, la multiplication et la division, dans la même logique avec de nouvelles fonctions. N'hésitez pas à mettre de grands nombres, ou des nombres à virgule.
    Petit exercice simple : faites-moi une fonction isNegative(), qui vous dira si un nombre est négatif, ou pas. Ne faites pas de vérification de type, on admet que x est bien un nombre. On considèrera que zéro est positif. La fonction retourne soit true, soit false.


    Les fonctions anonymes, ou lambda

    Dans certains cas, on peut déclarer une fonction sans lui donner de nom. Elle sera déclenchée automatiquement dans certains cas, donc le nom n'a pas d'importance. 

    Voici un exemple avec un événement envoyé par le navigateur :

    <button id="monBouton">Clickez moi !</button>
<script>
  document.getElementById('monBouton').addEventListener('click', function(){  /* cette fonction n'a pas de nom*/
    console.log(`La fonction anonyme associée au click a bien été déclenchée.`);
  })
</script>


    Ce type de fonction est utilisée très régulièrement, dans divers cas divers et variés.


    Les callback

    Expliquer les callback (cours à faire)


    Les fonctions fléchées

    Une nouvelle syntaxe introduite en ES6, qui apporte aussi de nouvelles fonctionnalités, ce sont les fonctions fléchées. Je vous encourage à lire la doc du MDN à ce sujet, mais pour l'instant, ça ne change rien pour vous à part la syntaxe (qui est plus légère). 

    javascript fonctions fléchées

    Voici un exemple :

    let isPositive = (a) => {
      if (a > 0) {
        return true; /*La on sort de notre fonction*/
      }
      return false; /* la aussi */
    }

let isNull = (a) => (a == 0) ? true : false;   /* une seule instruction : pas d'accolades obligatoire (ici l'instruction est une simple condition ternaire) */

console.log(isPositive(1)); /* la fonction renverra true */
    console.log(isNull(0)); /* la fonction renverra true */

    La syntaxe est un peu moins lisible (notamment par l'absence du mot clé function), et cela peut être déroutant, mais c'est une question d'habitude. Vous allez croiser cette forme très souvent en JS moderne, donc autant vous y habituer. Je vous encourage d'ailleurs à utiliser la nouvelle syntaxe ES6 avec les fonctions fléchées car elles offrent d'autres fonctionnalités que nous verrons plus tard (notamment la gestion du this dans un contexte objet). 


    Exemple encore plus compact, car on aime ça, nous, les développeurs :) :

    let double = (a) => a * 2; /* return automatique si on ne met pas d'accolades*/
    console.log(double(10));

    A retenir :

    • on peut mettre une fonction dans une variable ou dans une constante
    • on peut ne pas nommer explicitement une fonction (on parle alors de fonction anonyme, ou lambda)
    • on peut enlever les accolades si on a une seule instruction (c'est le cas pour isNull)
    • les fonctions fléchées simples retournent automatiquement le résultat, pas besoin d'utiliser le mot clé return (c'est le cas pour double)


    Voici un lien très complet sur les fonctions fléchées.



    Voici un autre exemple d'une fonction anonyme (non-fléchée) :

    const displayError = function(str) {  /* cette fonction n'a pas de nom */
        console.error(str);
    }
    displayError("Appel d'une fonction anonyme.");


    Et voici la même, mais avec un nom (disp) :

    const displayError = function disp(str) { /*Peut être utile dans certains cas (trace en debugage, ou rappel en récursif)*/
    console.error(str);
}
displayError("Appel d'une fonction anonyme.");


    Bref, comme vous pouvez le constater, il y a 1001 manières d'utiliser des fonctions. Ne vous inquiétez pas, tout ça deviendra plus clair pour vous avec le temps. Retenez tout de même qu'il y a des syntaxes plus modernes que d'autres, et qu'il faut donc essayer de les utiliser le plus tôt et le plus souvent possible.


    Important : voici le lien de référence du MDN sur les fonctions. Très complet.

  • Fonctions natives

    Rendez-vous sur le cours générique sur les fonctions natives avant de continuer :)


    Maintenant que vous savez comment fonctionne une fonction utilisateur, vous allez vous rendre compte que de nombreuses fonctions natives sont déjà proposées par le langage. Vous en avez même déjà utilisé (prompt, isNaN, etc...). Il faut à tout prix les utiliser en priorités, car elles sont puissantes, et correctement codées. Par exemple, la fonction sort() (qui permet de trier les éléments d'un tableau) implémente un algorithme puissant, bien plus efficace et performant que ce que vous pourriez faire vous-même.


    Distinction entre fonction et méthode : ce stade, nous n'avons pas encore approfondi la notion d'objet, mais tout ce que vous devez savoir, c'est que certaines fonctions ne sont utilisables qu'à travers des objets spécifiques. Par exemple : Math.random() est une méthode de l'objet Math. Mais pour l'instant, dites-vous que cela fonctionne à peu près comme une fonction classique. Nous verrons les objets très prochainement dans les chapitres suivant.



    Présentation de quelques fonctions de JavaScript

    • sort : trier un tableau
    • toUpperCase : passer une chaîne en majuscule
    • getFullYear : récupérer l'année d'une date
    • floor : renvoit le nombre entier inférieur
    • etc... (il y en a des milliers)


    Comme vous pouvez le constater - mis en gras dans la liste - les fonctions s'appliquent souvent à un type (modifier un nombre, une chaîne, une date,etc...). Il y a quelques fonctions qui s'utilisent "seules", mais bien souvent, elles s'appliquent sur un type de données particulier. Pour l'instant concentrez-vous sur toutes ces petites fonctions qui vous seront bien utiles pour manipuler vos données standard.


    Toutes ces fonctions fonctionnent de la même manière que les fonctions utilisateurs.
    Vous trouverez sur ce lien toutes les fonctions et méthodes proposées nativement par Javascript.

  • Scope

    Voir cours sur la notion de scope en programmation.




    En JS les problématiques de scope sont à peu près les même que dans les autres langages. La principale avancée qu'il y a eu récemment, c'est l'intégration du mot clé let qui a changé le scope par défaut des anciennes variables var. var ne respectait pas les normes habituelles, tandis que let les respectent mieux.


    Le scope étant une notion assez abstraite au début, voici quelques images qui illustre bien le rôle et le fonctionnement du scope :



    Et voici un exemple d'exécution dans la console :


    Donc pensez-y sans arrêt, tout votre code est naturellement soumis à ce concept de scope. Vous aurez à coup sûr des erreurs de scope dans vos lignes de code, surtout à vos débuts. Donc pensez bien à cette éventualité lorsque vous rencontrez un bug, et pensez bien à respecter les règles de scope afin de ne pas mélanger toutes vos variables.
    Important : aujourd'hui vous devez prioriser absolument l'usage du let, qui implémente mieux la notion de scope. Vous risquez de croiser encore des var régulièrement, entre les vieux extraits de code sur Internet, et les développeurs qui ne se sont pas mis à jour dans leur pratique du métier... 

  • Exceptions

    Voir cours sur les concepts de base sur les exceptions.


    Exemple en JS :

    try {
        console.log('try');
        let result = double(2);
        console.log(result)
    } catch (error) {
        console.log('catch');
        console.error(error);
    }

  • Récursivité

    Voir le cours la récursivité dans la catégorie des concepts de la programmation.