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 une grosse incompatibilités entre les navigateurs assez contraignantes. Quelques lignes de code permettaient de créer des effets de survol, chargements ou effets 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 beaucoup 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 déplacer).

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 ajouter la balise <script>/* ici le code */</script>,

Dans un fichier sur votre site ou ailleurs sur le web

Créez un document html et ajouter 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.
Exemple :

var prixDuPainAuChocolat = 0.15;
var prixPourDouzePainAuChoco = 12 * prixDuPainAuChocolat;

Dans cet exemple var 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)…

var year = 2016; // des chiffres
var president = "François H"; // des mots
var candidats = ["Pierre", "Paul", "Jacques"]; // une liste de noms
candidats[0]; // "Pierre"
candidats[1]; // "Paul"
var 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…

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.0

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

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 :

var d1 = Math.floor(Math.random() * (6)) + 1;
var d2 = Math.floor(Math.random() * (6)) + 1;
var d3 = Math.floor(Math.random() * (6)) + 1;
var 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;
}
var d1 = getRandomArbitrary(1, 7);
var d2 = getRandomArbitrary(1, 7);
var d3 = getRandomArbitrary(1, 7);
var 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>
  var d1 = random(1, 7);
  var d2 = random(1, 7);
  var d3 = random(1, 7);
  var 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(var 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.0

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.

var 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(var 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 manipulable 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