FORMATION À L'UTILISATION ET AU DÉVELOPPEMENT DES LANGAGES JAVASCRIPT ET JQUERY

Ce cours abordera principalement le lien entrenu entre le Javacript et la conception de sites web. Il s'inspire très largement de formations présentent en ligne sur le sujet.

1 - Composition type d'un site web

Métaphore des sites web et du corps humain

HTML

<p>Hello world</p>

CSS

.class{ color:blue;}

JAVASCRIPT

function f (){ alert(hello); }

PHP

<?php echo 'hello' ?>

—

Attention soyez vigilant !

Dans le monde du code et particulièrement du javascript chaque caractère compte, une virgule ou une majuscule oubliées et c'est le bug assuré

Vous êtes prévenus

—

2 - Un programme informatique c'est quoi ?

Un programme est une suite d'informations qu'une machine va lire du début à la fin en éxécutant ce qui lui est dit par le programme.

On peut comparer ça à une recette de cuisine ou à une partition de piano pour nous autres les humains.

3 - Pourquoi le Javascript ?

Car aujourd'hui le Javacript est présent de partout dans le monde digital, (sites web, applications, smartphones jeux) Les dévellopeurs sont nombreux et l'apprentissage relativement simple.

Enfin on peut presque tout faire avec le javascript en terme de création, d'interactivité et de design digital la seul limite c'est l'imaginaire.

Quelques exemples de programme, réalisés avec la librairie Javascript P5.JS

4 - Comment on fait ?

Le code, c'est avant tout du texte qui est lu par la machine, donc on peut faire un programme à partir de n'importe quel éditeur de texte.

4.1 Télécharger et installer un éditeur web

Cependant certains éditeur de texte sont spécialisés dans l'écriture du code iformatique, c'est le cas notamment de Atom que vous allez télécharger :

4.2 Ouvrez l'éditeur et créez votre programme web

Pour pouvoir tester notre Javascript nous allons créer une page web basique en HTML, en utilisant le code suivant :

Copiez ce code dans un nouveau fichier vide dans Atom
Enregistrez ce fichier avec le nom et l'extension index.html
Ouvrez ce fichier dans le navigateur Google Chrome

Et là vous pouvez voir une merveilleuse page blanche !

C'est normal la seule chose que fasse notre programme c'est initialiser une page web et lui donner un titre pour le navigateur.

4.3 Mais où est le Javascript ?

Pour le moment pas de Javascript il n'y a que du HTML, il est temps d'ajouter notre Javascirpt à l'intérieur de celui-ci grâce à la balise <script>

Pour commencer en douceur nous demandons juste d'afficher un message dans la console du navigateur. copiez ce code dans Atom et rafraichissez la page dans Google chrome :

Ok, super, la page est toujours blanche !

C'est toujours normal, pour le moment nous parlons en Javascript avec le navigateur. Nous sommes seulement dans les loges et sur le devant de la scène il ne se passe rien pour le moment. La console nous sert à vérifier que notre code s'exécute bien. Si il y a une erreur dans la console qu'il s'affichera.

4.4 Elle est où la console ?

La console est présente dans tous les navigateurs web, mais il faut aller la chercher !

Avec Google Chrome c'est relativement simple, il suffit de :

Faire un clic droit sur la page web que l'on souhaite examiner
Séléctionner inspecter l'élément
Aller dans l'onglet console de la fenêtre d'inspection

Et si vous avez bien travaillé, le premier Bonjour en Javascript de votre vie s'affiche ici. ( émotion)

Retrospective en image :

4.5 Actionner le navigateur

C'est gentil d'afficher des petits messages dans la console, mais il y un moment où on veut que les choses sérieuses commencent. On clôturera donc cette partie par notre première : Alerte Javascirpt

L'alerte est une fonctionnalité de base du Javascript reconnue par les navigateurs elle permet d'afficher un message à l'utilisateur. Pour la démonstration nous allons créer un bouton et quand l'utilisateur cliquera sur le bouton notre alerte s'affichera.

1 - Tout d'abord, créons notre bouton dans le code HTML :

Vérifiez sur votre page que le bouton s'affiche. Rien ne se passe quand vous cliquez dessus ? C'est normal vous n'avez fait qu'un tier du travail !

2 - Il faut maintenant créer la fonction Javascript charger de faire apparaitre notre fenêtre et choisir le texte que nous allons inscrire à l'intérieur.

Ce code est une fonction Javascript standard toutes les fonctions fonctionne selon le même schéma de base :

On dit que c'est une fonction en écrivant function
On donne un nom à notre fonction qui nous permettra de la retrouver et de l'identifier : myFunction()
Entre les accolades { ... } on écrit ce que cette fonction fait.

⚠️ Attention ⚠️ ce code doit être collé juste avant la fermeture de la balise </body>, sans détailler précisemment pourquoi c'est lié à l'optimisation du temps de chargement des pages web.

Vérifiez que tout s'affiche sur votre page et qu'il n'y a pas d'erreurs dans la console. Rien ne se passe ? C'est normal vous n'avez fait que deux tier du travail !

3 - Il va maintenant falloir relier notre bouton et notre fonction, afin de créer notre première interaction homme/machine en Javascript !

Pour ce faire il faut que notre fonction se déclenche quand l'utilisateur clic sur le bouton. On va donc appeler la fonction au moment du clic grâce à l'attribut onclick que l'on utilise ainsi :

Sans vous spoiler, it's done !

3 - Il va maintenant falloir relier notre bouton et notre fonction, afin de créer notre première interaction homme/machine en Javascript !

5 - Les valeurs

Une valeur est un morceau d'information utilisé dans un programme informatique. Les valeurs existent sous différentes formes, appelées des types. Le type d'une valeur détermine son rôle et les opérations qui lui sont applicables.

Chaque langage informatique dispose d'une panoplie de types qui lui est propre. Nous allons étudier deux des principaux types disponibles en JavaScript.

Le type nombre
Une valeur de type nombre (number) représente une valeur numérique, autrement dit une quantité. Comme en mathématiques, on distingue les valeurs entières (ou entiers) 0, 1, 2, 3... et les valeurs réelles (ou réels) auxquelles on ajoute des chiffres après la virgule pour plus de précision.

La virgule s'exprime en informatique sous la forme d'un point :3.14 et non 3,14 !

Avec les nombres on peut faire toutes les opérations classiques comme : + - * /

Le type chaîne
Une valeur de type chaîne de caractères (en abrégé chaîne, ou encore stringen anglais) représente un texte. Ces valeurs sont délimitées par une paire de guillemets doubles :"Ceci est une chaîne".

Tester le code suivant pour comprendre les différences entre les différents type de valeur.

6 - Structure d'un programme

Nous avons précédemment défini un programme informatique comme étant une liste d'ordres indiquant à un ordinateur ce qu'il doit faire. Ces ordres sont écrits sous forme de texte dans un ou plusieurs fichiers et forment ce qu'on appelle le code source du programme. Les lignes de texte dans un fichier de code source s'appellent des lignes de code.

Le code source peut comporter des lignes vides : celles-ci seront ignorées lors de l'exécution du programme.

Instructions
Chaque ordre inclus dans un programme est appelée une instruction. Une instruction est délimitée par un point virgule. Un programme est constitué d'une suite d'instructions.

Le plus souvent, on n'écrit qu'une seule instruction par ligne, mais ce n'est pas une obligation.

Commentaires

Par défaut, chaque ligne de texte dans les fichiers source d'un programme est considérée comme une instruction à exécuter. Il est possible d'exclure certaines lignes de l'exécution en les préfixant par une double barre oblique//. Ce faisant, on transforme ces lignes en commentaires.

Les commentaires servent à donner des informations sur le programme et sont destinés au programmeur, non à la machine.

Il existe une autre manière de créer des commentaires en entourant une ou plusieurs lignes par les caractères /* et */.

Exercices :

1 -Ecrivez un programme qui affiche votre nom, puis votre âge.

2 -Ecrivez un programme qui calcule et affiche le résultat de l'addition, de la soustraction, de la multiplication et de la division de 6 par 3.

7 - Rôle des variables

Un programme informatique mémorise des données en utilisant des variables. Une variable est une zone de stockage d'information. On peut l'imaginer comme une boîte dans laquelle on range des choses.

Propriétés d'une variable

Une variable possède trois grandes propriétés :

Son nom, qui permet de l'identifier. Un nom de variable peut contenir des lettres majuscules ou minuscules, des chiffres (sauf en première position) et certains caractères comme le dollar ($) ou le tiret bas, appelé underscore (_).

Sa valeur, qui est la donnée actuellement mémorisée dans cette variable.
Son type, qui détermine le rôle et les opérations applicables à cette variable.

Déclarer une variable
Avant de pouvoir stocker des informations dans une variable, il faut la créer. Cette opération s'appelle la déclaration de la variable. Au niveau de l'ordinateur, déclarer une variable déclenche la réservation d'une zone de la mémoire attribuée à cette variable. Le programme peut ensuite lire ou écrire des données dans cette zone mémoire en manipulant la variable.

Voici un exemple de code qui déclare une variable puis affiche sa valeur :

let a;
console.log(a);

Affecter une valeur à une variable
Au cours du déroulement du programme, la valeur stockée dans une variable peut changer. Pour donner une nouvelle valeur à une variable, on utilise l'opérateur=, appelé opérateur d'affectation.

let a;
a = 3.14;
console.log(a);

La valeur de la variable a été modifiée par l'opération d'affectation. La ligne a = 3.14 se lit "a reçoit la valeur 3,14".

Déclarer une variable constante
Si la valeur initiale d'une variable ne changera jamais au cours de l'exécution du programme, cette variable est ce qu'on appelle une constante. Il vaut alors mieux la déclarer avec le mot-clé const plutôt qu'avec let. Cela rend le programme plus facile à comprendre, et cela permet aussi de détecter des erreurs.

const a = 3.14; // Création d'une variable constante
a = 6.28; // Impossible : a ne peut pas changer de valeur !

Incrémenter une variable de type nombre

Il est également possible d'augmenter ou de diminuer la valeur d'un nombre avec les opérateurs+= et++. Ce dernier est appelé opérateur d'incrémentation, car il permet d'incrémenter (augmenter de 1) la valeur d'une variable.

let b = 0; // b contient 0
b += 1; // b contient 1
b++; // b contient 2
console.log(b); // 2

Portée d'une variable

On appelle portée (scope) d'une variable la portion du code source dans laquelle cette variable est visible et donc utilisable. Les variables déclarées avec let et const ont une portée de type bloc : elles ne sont visibles qu'au sein du bloc de code dans lequel elles sont déclarées (ainsi que dans tous les sous-blocs éventuels).

En JavaScript et dans de nombreux autres langages, un bloc de code est délimité par une paire d'accolades ouvrante et fermante. Un programme JavaScript correspond par défaut à un unique bloc de code.

La notion d'expression

Une expression est un morceau de code qui produit une valeur. On crée une expression en combinant des variables, des valeurs et des opérateurs. Toute expression produit une valeur et correspond à un certain type. Le calcul de la valeur d'une expression s'appelle l'évaluation. Lors de l'évaluation d'une expression, les variables sont remplacées par leur valeur.

Ok les variables c'est sympa mais comment je les mixe dans du contenu d'affichage ?

Le langage JavaScript permet d'inclure des expressions dans une chaîne de caractères lorsque cette chaîne est délimitée par une paire d'accents graves seuls ou backticks ( `...` ). Une telle chaîne est appelée un modèle de libellé ou template literal. A l'intérieur, les expressions sont indiquées par la syntaxe ${expression}.

On utilise souvent cette possibilité pour créer des chaînes intégrant des valeurs de variables.

8 - Interaction Homme/Machine

Il est temps d'utiliser les variables pour interagir sérieusement avec l'utilisateur, pour lui demander des actions et utiliser le résultat de ces actions

Explications

La valeur saisie dans la première boîte de dialogue est stockée dans une variable de type chaîne nomméeprenom. Ensuite, l'instruction alert() déclenché l'affichage de la seconde boîte, contenant le résultat de la concaténation de la chaîne "Bonjour" avec la valeur de la variable prenom.

9 - Je te donne cette variable si tu es sage !

Jusqu'à présent, toutes les instructions de nos programmes (à part les commentaires) étaient systématiquement exécutées. Nous allons voir comment enrichir nos programmes en y ajoutant des possibilités d'exécution conditionnelle.

Ceci est le premier programme conditionnel que vous allez écrire :

Saisir un nombre
Si ce nombre est positif
Afficher un message

Notez bien

Ici la méthode Number() sert à transformer l'information entrée par l'utilisateur en variable numérique, de sorte à ce que l'on puisse ensuite l'utiliser dans notre condition.

Les booléenes

Une condition est une expression dont l'évaluation produit une valeur soit vraie, soit fausse : on parle de valeur booléenne.

Nous avons déjà étudié les types nombre et chaîne : le type booléen fait également partie des types supportés par le langage JavaScript. Ce type n'a que deux valeurs possibles :true (vrai) et false (faux).

Toute expression produisant une valeur booléenne (donc soit vraie, soit fausse) peut être utilisée comme condition dans une instruction if. Si la valeur de cette expression est true, le bloc de code associé au if sera exécuté.

On peut créer des expressions booléennes en utilisant les opérateurs de comparaison regroupés dans le tableau suivant :

Opérateur	Signification
===	Egal à
!==	Différent de
<	Inférieur à
<=	Inférieur ou égal à
>	Supérieur à
>=	Supérieur ou égal à

Offrir une alternative

Dans un programme, on souhaite fréquemment agir différemment selon que la condition soit vraie ou fausse.

L'instruction else

Enrichissons notre programme d'exemple pour qu'il affiche un message adapté au nombre saisi par l'utilisateur.

Exercices :

1 -Ecrivez un programme qui pose une question à l'utilisateur et qui adapte son message en fonction de la réponse.

Exemple : un programme qui demande la température et qui adapte son message en fonction de la réponse.

Attention votre créativité est évaluée ici, merci de mettre votre fichier sur le Trello dans une carte dédiée à cette exercice que vous intitulerez "Exercice JS booléenne"

Des conditions, dans des conditions, dans des conditions...

C'est maintenant qu'il faut faire appel à votre sens logique pour le comprendre. Si le premier bloc else est exécuté, c'est que le nombre saisi est soit négatif, soit nul, puisque la condition (nombre > 0) du premier if n'a dans ce cas pas été vérifiée. A l'intérieur de ce bloc else, on vérifie si le nombre est strictement négatif avec la condition (nombre < 0). Si cette condition est fausse, alors le nombre est forcément égal à 0. Et Bam !

Et pour gagner encore plus de temps l'ingénieur Javascript créa le else if

Si je veux moins de travail ET plus d'argent, je fais quoi ?

Supposons qu'on souhaite vérifier qu'un nombre est compris entre 0 et 100. Cela signifie que le nombre doit être à la fois supérieur à 0 et inférieur à 100. La condition "nombre compris entre 0 et 100" peut s'exprimer sous la forme de deux sous-conditions "nombre supérieur ou égal à 0" et "nombre inférieur ou égal à 100". Il faut que l'une ET l'autre de ces sous-conditions soient vérifiées.

La traduction en JavaScript de cette condition donne le résultat suivant, pour tester ce code il vous suffit de remplacer le if du code précédent par celui-ci :

Je te propose de prendre la porte OU de te taire !

Imaginons maintenant qu'on souhaite vérifier qu'un nombre est en dehors de l'intervalle [0, 100]. Pour satisfaire à cette condition, ce nombre doit être inférieur à 0 OU supérieur à 100.

La traduction en JavaScript de cette condition donne le résultat suivant, pour tester ce code il vous suffit de remplacer le if du code précédent par celui-ci :

NON tu feras exactement l'inverse !

Il existe un troisième opérateur logique qui permet d'inverser la valeur d'une condition : l'opérateur NON. Il s'écrit en JavaScript sous la forme d'un point d'exclamation (!).

La traduction en JavaScript de cette condition donne le résultat suivant, pour tester ce code il vous suffit de remplacer le if du code précédent par celui-ci :

Les choix multiplent

Essayons d'écrire un programme qui conseille l'utilisateur sur la tenue à porter en fonction de la météo actuelle. Une première solution consiste à utiliser des instructions if/else.

Les choix multiplent

Lorsqu'un programme consiste à déclencher un bloc d'opérations parmi plusieurs selon la valeur d'une expression, on peut l'écrire en utilisant l'instruction JavaScriptswitch. Voici le programme précédent, réécrit en utilisant un switch.

Test 1

Complétez ce programme pour qu'il affiche le jour suivant le jour actuel.

Testez-le en modifiant la valeur de la variable jourActuel. Le programme doit afficher un message en cas de jour inconnu.

Solution | Test 1

Faire travailler les machines pour nous

L'objectif est d'apprendre comment ajouter à nos programmes des possibilités d'exécution répétitive.

Essayons d'écrire un programme qui affiche tous les nombres entre 1 et 5. Voici ce que nous pouvons écrire avec nos connaissances actuelles.

On pourrait faire comme ça :

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Sauf que dans ce cas là nous sommes les esclaves de la machine

Pour cela, le langage JavaScript offre la possibilité de répéter l'exécution d'un ensemble d'instructions en plaçant ces instructions à l'intérieur d'une boucle. Le nombre de répétitions peut être connu à l'avance ou dépendre de l'évaluation d'une condition. A chaque répétition, les instructions contenues dans la boucle sont exécutées. C'est ce qu'on appelle un tour de boucle ou encore une itération.

La boucle while

La boucle while permet de répéter des instructions tant qu'une condition est vérifiée.

Voici l'exemple réécrit pour les fainéants.

Exercice

Reprenez le code précédent et réalisez dans la console exactement ce que l'on voit sur l'illustration de Bart Simpson.

Merci de mettre votre fichier sur le Trello dans une carte dédiée à cette exercice que vous intitulerez "Exercice Bart Simpson"

La boucle for

On a fréquemment besoin d'écrire des boucles dont la condition est basée sur la valeur d'une variable qui est modifiée dans le corps de la boucle, comme dans notre exemple. Pour répondre à ce besoin, JavaScript et la plupart des autres langages disposent d'un autre type de boucle : le for.

Test 1

Complétez ce programme pour qu'il fasse 10 tours de manège en affichant le numéro du tour à chaque tour :

Le manège démarre
C'est le tour numéro 1
C'est le tour numéro 2
...
C'est le tour numéro 10
Le manège s'arrête