Historique du JavaScript

La première chose à comprendre sur le JavaScript (JS), c’est son histoire (pour les graphistes). Si au début (fin des années 90), le JavaScript servait de complément au HTML, on avait quelques possibilités, mais de grosses incompatibilités entre les navigateurs assez contraignantes. Quelques lignes de code permettaient de créer des effets de survols, chargements ou superflus (neige, curseur animé…). Un logiciel comme Dreamweaver proposait des comportements JS pour créer des pop-up, des menus déroulants, des accordéons, des slides…
Parallèlement au début des années 2000, Flash réinvente le web et décuple ses possibilités (typographie, animations, son, jeux, vidéos). Il intègre petit à petit son propre langage l’ActionScript, très proche du JS.
Sur la même période, le CSS est adopté, les librairies JavaScript (Mootools, jQuery…) se répandent sur le web et séduisent les web designers, le code se standardise, Flash meurt (code propriétaire, référencement complexe, failles, pas de lecteur sur iOS, lourdeur du player…) pour laisser place au HTML5, CSS et JS.

Aujourd’hui

Actuellement, le JS est présent dans la plupart de sites, d’applications (Brackets), jeux ou applications mobiles. Sur le web, il permet toujours de réaliser des choses complémentaires au HTML, notamment la mise à jour du contenu en temps réel (ex : Facebook) ou la manipulation du HTML. Néanmoins avant d’ajouter du JS, il faudra réfléchir à l’impact sur le site, les utilisateurs, le référencement et les mises à jour du site. Une solution facile consiste à mélanger CSS3 (animation, transition, 3D…) et JavaScript (ajouter une classe sur un bloc pour le transformer).

« Les bases ne servent à rien »

Il y a peu d’applications WOW ou Bling Bling avec les bases. Savoir uniquement que « 8 × 7 = 56 » ne vous sert pas tous les jours, mais l’ensemble des tables de multiplications vous permet d’aborder tous les cas concrets. Le code est similaire, il faut connaître quelques bases pour ensuite imaginer et créer ses propres applications.

Comme pour la plupart des apprentissages, vous aurez besoin de prérequis, de temps, d’entrainements et d’exercices pour franchir certaines étapes. La programmation fonctionne par couches et blocs, parfois on enchaine, superpose ou imbrique les choses, avec une maitrise partielle ou complète. Soyez patient, curieux et surtout échangez avec les autres.

Premières lignes

Dans la console

opera-console
la console du navigateur Opera

Ouvrez la console cmd+alt+j ou cmd+alt+i+onglet console et tapez :
alert("bonjour");

Dans le html

HTML et JS dans Brackets
HTML et JS dans Brackets

Créez un document html et ajoutez la balise <script>/* ici le code */</script>,

Dans un fichier sur votre site ou ailleurs sur le web

Créez un document html et ajoutez la balise <script src="main.js"></script> ou <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> si vous utilisez un script venant d’une librairie (jQuery, p5js…).

Sur CodePen

Voir plus bas 😉

Variables, listes, tableaux

Pour programmer une action simple, utiliser des variables est indispensable.
Une variable sert à stocker une information et interagir avec elle.
Trois mots servent à déclarer une variable : var, let, const.
var est à éviter dans l’écriture en JavaScript moderne (mais marche toujours).
let est utilisé pour déclarer une variable modifiable, le mot let venant de l’usage mathématiques, let x be arbitrary real number (Soit x un nombre réel quelconque.).
const est utilisé pour déclarer une variable constante.

Exemple :

let prixDuPainAuChocolat = 0.15;
let prixPourDouzePainAuChoco = 12 * prixDuPainAuChocolat;

Dans cet exemple let sert à déclarer une variable suivi de son nom sans espace, sans accent, de préférence en « CamelCase ». Notez aussi la présence du ; (semicolon in english) en fin de ligne. Le = peut se traduire par « contient ».

On peut stocker plusieurs types de contenu dans une variable, des chiffres, des chaînes de caractères ou des listes (ou tableaux)…

let year = 2016; // des chiffres
let president = "François H"; // des mots
let candidats = ["Pierre", "Paul", "Jacques"]; // une liste de noms
candidats[0]; // "Pierre"
candidats[1]; // "Paul"
let notes = [12,18,20]; // une liste de notes
notes[0]; // 12
Note : Pour l’instant, il est difficile de faire un programme avec ceci, il faut un peu patienter…

ES5, ES6, ES7…

Depuis plusieurs années le JavaScript évolue et respecte le standard ECMAScript (ES). Cette évolution s’accompagne de changement d’écriture, de nouvelles fonctionnalités.
La version ES6 (2015) change ajoute beaucoup de choses, des modifications importantes pour les nouveaux usages en s’inspirant des autres langages.

Pour les variables, le changement majeur est l’ajout de let et const en complément de var.

// (présentation de let et const simplifiée et incomplète)
let year = 2016; // des chiffres
/* … plus loin */
year = 2017; // OK
 
const year = 2016; // --> erreur year existe déjà
const yyyy; // erreur, il faut associer une chose à la const dès la déclaration
const yyyy = 2016; // hourra ! 
yyyy = 2017; //erreur, c'est une const ! on ne peut pas changer son contenu

CodePen

CodePen a sa propre console, mais il faut ouvrir le CodePen dans une fenêtre et cliquer sur le bouton console en bas de page : https://codepen.io/benoitwimart/pen/ybroLw/

See the Pen js by Benoît Wimart (@benoitwimart) on CodePen.

Des maths et de la logique

La plupart des opérations de calculs sont accessibles en JavaScript avec les mêmes règles qu’en mathématiques sur les priorités, les parenthèses ou la logique…
Les fonctions plus complexes s’appellent par l’objet Math, cette notion est un peu complexe à comprendre, mais l’utilisation reste très simple.

Les mathématiques ne sont pas votre tasse de thé, rien de grave, il ne s’agit pas de passer un examen scolaire ! En testant plusieurs fois, en bidouillant, en découpant votre code, ou en faisant une recherche sur le web, vous devriez trouver une solution. En cas d’échec et si cela vous bloque, envisager une autre approche, passer à une alternative ou poser votre question sur la plateforme de votre choix.

Exemples et tests

Dans la console (sous Chrome Mac : cmd + alt + j):

1+2*3
// 7
Math.cos(0);
// 1
Math.PI
// 3.141592653589793
1/0
// Infinity // et donc pas un chiffre
65%60
// 5 (! attention ce n'est pas un pourcentage mais un modulo, c'est à dire le reste d'une division) 
Math.random()
// 0 ou 0.8296270705040532 ou 0.9999999999999999 // un chiffre entre 0 inclus et 1 exclus
 
Math.round(0.9)
// 1
Math.round(0.5)
// 1
Math.round(0.49)
// 0
 
/* extrait de la doc mdn */
Math.floor( 45.95); //  45
Math.floor( 45.05); //  45
Math.floor(  4   ); //   4
Math.floor(-45.05); // -46 
Math.floor(-45.95); // -46
Les instructions d’une seule ligne n’ont pas besoins du point virgule en fin de ligne, celui-ci servant à séparer les instructions.

Avec des variables et dans la console :

a = 3
// 3
b = 2
// 2
a * b
// 6

Note : je n’ai pas déclaré a et b, c’est mal, JavaScript est très tolérant ; n’oubliez pas let a,b; dans votre scripte !

Raccourcis fréquents :

a++
// 3 // retourne la valeur de départ de a et lui ajoute 1
a
// 4
a--
// 4 // retourne la valeur de départ de a et lui soustrait 1
a
// 3
 
// plus rarement
++a
// 4 // retourne la valeur finale de a + 1
--a
// 3 // retourne la valeur finale de a - 1
 
// exemple stupide
a = a++
// 3 // retourne la valeur de départ et l'assigne à a

Les fonctions

Une fonction permet d’avoir un bloc de code capable d’exécuter des instructions avec la possibilité de lui passer des variables et de réutiliser celle-ci.
Cela permet d’avoir une écriture plus lisible du code et d’isoler certaines parties.

Petit exemple, je veux 4 valeurs de lancé de dès aléatoire, première écriture ligne par ligne :

let d1 = Math.floor(Math.random() * (6)) + 1;
let d2 = Math.floor(Math.random() * (6)) + 1;
let d3 = Math.floor(Math.random() * (6)) + 1;
let d4 = Math.floor(Math.random() * (6)) + 1;

réécriture avec une fonction trouvée sur le MDN

function getRandomArbitrary(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
let d1 = getRandomArbitrary(1, 7);
let d2 = getRandomArbitrary(1, 7);
let d3 = getRandomArbitrary(1, 7);
let d4 = getRandomArbitrary(1, 7);

La fonction getRandomArbitrary est relativement courte, mais pourrait être plus complexe et sur plusieurs lignes, elle prend deux paramètres min, max et return une valeur aléatoire entre min et max exclus.
L’avantage d’une fonction réside dans l’isolation du code, on peut par la suite la corriger ou l’améliorer. Il est aussi possible d’utiliser des librairies avec de nombreuses fonctions rendant l’écriture plus concise.

Avec la librairie p5.js il existe une fonction random

<!-- on charge p5.js 
************************************************* 
attention src="//…" ne marchera que sur un serveur et bascule en https ou http ! 
sans serveur src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js" 
************************************************* -->
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
<script>
  let d1 = random(1, 7);
  let d2 = random(1, 7);
  let d3 = random(1, 7);
  let d4 = random(1, 7);
</script>

Librairie ou pas

On parle de Vanilla JS quand le code n’utilise pas de librairie. Il existe un site qui explique par l’exemple comment faire sans jQuery : http://youmightnotneedjquery.com/

Points positifs des librairies

  • Les librairies sont là pour simplifier l’écriture, notamment pour la compatibilité entre navigateurs et certaines fonctions fréquentes.
  • Une librairie comme p5.js permet de faire du Processing avec une réécriture simplifié.
  • Une librairie comme gsap permet de faire de des animations complexes et optimisées.

Points négatifs des librairies

  • Petites usines à gaz, dans l’exemple précédent charger p5.js pour utiliser uniquement la fonction random alourdit inutilement le projet.
  • Les librairies ne sont pas magiques, comprendre le JavaScript permet de mieux les utiliser !

Les boucles

La boucle est un élément clé de l’écriture des algorithmes. On peut distinguer deux types de boucles, celles qui comptent ou décomptent et celles qui se basent sur le temps (toutes les secondes).
Pour faire des boucles en sachant le nombre de répétions, on utilisera la boucle for, voici sa structure :

/*
for ([initialisation]; [condition]; [expression_finale]){
   instruction
}
*/
for(let i=0; i<10; i=i+1){
  console.log(i);
}
// affiche 0,1,2,3,4,5,6,7,8,9

Voici un exemple plus concret :

See the Pen moyenne by Benoît Wimart (@benoitwimart) on CodePen.

Les conditions

Plusieurs façons existent pour écrire les conditions en JavaScript, la plus simple et proche de nombreux langages consiste à l’utilisation de « if ».

// si( cette condition ){ si la condition est vraie
// on fait ceci
// } sinon { 
// on fait cela
// } on ferme le bloc
if(3 > 2){
  console.log('3 est plus grand que 2 !');
}else{
  console.log('3 n’est pas plus grand que 2 !');
}

Cette exemple ci-dessus illustre le principe et n’a aucun usage, pour appliquer dans un cas plus concret, on passera par une ou des variables.

let x = 55; // on assigne une valeur à x
document.body.innerHTML+="---------<br>"; // on ajoute avec += ----- dans la page
if (x > 5) { // 1er test
  document.body.innerHTML+='x > 5 <br>'; // on ajoute cette phrase
} else if (x > 50) { //2e test seulement si le 1er est mauvais
  document.body.innerHTML+='x > 50 <br>'; // on ajoute cette phrase
} else { // si les if précédents sont faux
  document.body.innerHTML+='ni x>5, ni x>50 <br>'; // on ajoute cette phrase
}
 
document.body.innerHTML+="---------<br>"; // déco

voir sur jsbin

Double, triple…

Certains langages utilisent une flèche pour assigner une valeur à une variable (x => 3, ceci n’est pas du JS). JavaScript utilise le signe égal pour cette opération.
Si vous voulez tester une égalité, il faudra passer par le double ou le triple égal.
Le double égal == vérifie si l’égalité existe même si on a une chaine de caractères face à un nombre.
Le triple égal === vérifie si l’égalité existe et que les variables ont le même type (chaine, nombre…).

Le double égal est maléfique ! Il est fortement déconseillé !
x = 4 // 4  
4 == 4 // true
4 == '4' // true
'4' == 4 // true
'4' === 4 // false
4 === 4 // true
// Avec un if
if(4 === 4){
 //le nombre 4 est égale au nombre 4
}

Les autres

Pour ne pas alourdir ce cours, voici d’autres opérateurs à connaître (au moins l’existence).

>= supérieur ou égal à
<= inférieur ou égal à
!= différent maléfique déconseillé !
!== différent
&& et
|| ou

Boucles, conditions, fonctions, tout ensemble !

Ces quelques instructions sont plus ou moins simples individuellement. Le défi sera de les enchaîner ou imbriquer sans couac.
Trois règles :

  1. Beautify ton code et commentez/expliquez certaines lignes ;
  2. gardez un œil sur la console ;
  3. testez certaines lignes avant de les mettre dans des if, for, function et ajoute des console.log(‘fonction truc activée’).

Exemple sans application concrete :

for(let i=0; i<10 ; i++){
 if(i<5){
   if(i===3){
     console.log('rien');
   }else{
     console.log(i);
   }
 }
}
// affiche 0,1,2,rien,4

Que faire avec du JavaScript

Interagir avec un document HTML

Si vous savez créer un document HTML/CSS, sachez que toutes les propriétés sont manipulables en JavaScript. De même que créer, modifier ou supprimer un élément, son aspect comme son contenu ! Le style, les attributs (class, src…), le texte, la source d’une image, la position du scroll (défilement), la position de lecture d’un son ou d’une vidéo font partis des éléments manipulables.
Pour enrichir l’interaction, cette prise de contrôle peut s’associer à des événements, comme le clic, le survole, l’envoi d’un formulaire, une touche pressée ou un chargement d’élément… ou interagir avec le temps afin d’animer votre page.

flipper qui pourrait être codé en javascript
un objet interactif

JavaScript, analyser des images et autres

Une autre possibilité créative consiste à manipuler des fichiers ou les pixels d’une image pour créer ses outils de dessin. Quelques lignes permettent de réaliser des images en ASCII, des collages ou des effets personnels. Même si des logiciels comme Processing et P5JS sont plus simples, rien ne vous empêche de le faire en JavaScript pure via l’élément canvas. Tout ceci est valable aussi pour des fichiers de textes, de données et de musique.

Quelques librairies pour vos projets

La plus célèbre des librairies s’appelle jQuery, mais on peut facilement faire sans avec les dernières évolutions du JavaScript.
Pour les projets web :

Sans être une librairie, il existe aussi du JavaScript pour les logiciels d’Adobe : Illustrator Scripting.