HTML et JavaScript
Donc, vous avez un ordinateur. Sur cet ordinateur, vous avez un navigateur web. Grâce à celui-ci, vous pouvez lire ce texte. Formidable! Le navigateur, par contre, doit aussi pouvoir lire ce texte, mais d'une façon un peu différente. Il doit pouvoir lire comment afficher le texte, et avec quelle couleur, police de caractères, taille, alignement et plus encore. Quelle importance doit-il accorder à telle ou telle partie du texte? Comment peut-il avoir accès à toute cette information?
HTML!
Plus précisément HTML et CSS, mais je vais seulement parler d'HTML pour l'instant. HTML (Hypertext Markup Language) est un langage de balises, appelé en anglais un markup language. Les fichiers .html servent à afficher le contenu des pages web. Chaque élément dans un fichier .html suit le format suivant :
<balise attribut="valeur">contenu</balise>
Le navigateur web affiche seulement le texte blanc sur l'écran, le reste sert à la structure. Le texte rose indique le type d'élément ainsi qu'un attribut de l'élément, qui comprend une valeur de couleure verte. Chaque élément a une balise d'ouverture et une balise de fermeture. Pour donner un exemple, le paragraphe que vous êtes en train de lire est entouré des balises <p>
et </p>
, voulant dire paragraphe. Il a aussi un attribut id="banane"
, cela lui assigne l'identifiant banane. Un identifiant permet de modifier l'élément en question sans affecter le reste des éléments p
.
Avec JavaScript, il est possible de modifier le contenu d'éléments HTML directement dans le navigateur. Pour faire cela, il vous faudra accéder à la console JavaScript en faisant Ctrl-Shift-J (Windows/Linux) ou Cmd+Opt+J (Mac). Notez que la console ne sera pas assessible si vous utilisez un téléphone intelligent. Une fois là, entrez le texte suivant dans la console :
document.getElementById("banane").innerHTML = "Vous pouvez changer ce texte si vous voulez."
Si bien écrite, cette commande devrait changer le paragraphe précédent par le texte que vous avez mis entre guillemets. document
est le nom donné au fichier .html (En d'autres mots, la page web). getElementById
est une fonction qui requiert une valeur afin de donner un résultat. La valeur dans ce cas-là est "banane"
, et le résultat de la fonction est l'élément ayant l'identifiant "banane". Finalement, innerHTML
permet d'accéder au contenu de l'élément. Si vous entrez la commande sans le signe d'égalité et le texte de droite, la console vous renvoie le contenu de l'élément.
Ce bouton fonctionne de la même manière. Il a un attribut onclick
dont la valeur est une fonction JavaScript. Lorsque le bouton est appuyé, cette fonction replace le paragraphe avec le texte original. En utilisant JavaScript, il est possible de rendre une page web plus dynamique et interactive. Voici un autre exemple de son utilisation :
Toutefois, avant de pouvoir faire cela et plus encore, il vous faudra apprendre les bases de JavaScript.
Valeurs et variables
Il existe différents types de valeurs dans JavaScript, qui décrivent différents sortes d'information. Pour du texte, on utilise des chaînes de caractères, une série de symboles avec des guillemets au début et à la fin.
"Paul mangeait une pomme."
Ces guillemets peuvent être simples ou doubles, mais doivent être pareils. La console envoie une erreur s'ils sont différents. Les valeurs numériques sont affichés par des nombres positifs, négatifs ou décimaux.
-2.71828182845904523536
JavaScript permet aussi d'afficher des booléens, des valeurs pouvant seulement être vrais ou fausses.
true
false
Si vous écrivez ces valeurs dans la console, elle vous les renvoie, ne sachant pas quoi faire avec. Les valeurs ne sont pas mémorisés par l'ordinateur, il faut pour cela utiliser des variables.
var texte = "Bla bla bla";
Dans le cas du haut, l'ordinateur aurait créé avec la déclaration var une variable appelé texte
qui a comme valeur "Bla bla bla"
. Le symbole =
est un opérateur d'assignation, il permet d'assigner une valeur à un variable. Pour accéder à cette valeur, il suffit d'entrer l'identifant de la variable dans la console. Le symbole //
est utilisé pour laisser des commentaires qui n'affecteront pas le code. /*
et */
sont utilisés pour laisser des commentaires sur plusieurs lignes.
texte;
//L'ordinateur envoie "Bla bla bla" comme réponse.
Après qu'une variable a été créé, elle peut être modifiée avec l'opérateur d'assignation. L'identifiant d'une variable ne peut pas commencer par un chiffre ou avoir des espaces. Il existe 3 types de déclarations de variables dans JavaScript : var
, let
et const
. var
déclare une variable pouvant être modifiée et accessible partout dans le code.let
déclare une varable pouvant être modifiée, mais dont l'accès est restreint au bloc où elle a été créée. Cela sera expliqué plus amplement plus tard.const
déclare une variable non modifiable auquelle l'accès est également restreint au bloc où elle a été créée.
En guise d'exercice, vous pouvez essayer de créer quelques variables avec la console et d'assigner une variable à une autre.
Les opérateurs
Javascript est capable de résoudre plusieurs types d'opérations, incluant les opérations d'arithmétique :
var x = 2;
var y = 3;
//Opération d'addition
x + x; //4
//Il est également possible d'addditionner des chaînes de caractères ensemble
"Bonjour, " + "individu.";
//"Bonjour, individu."
//Opération de soustraction
x - x; //0
//Opération de multiplication
x * y; //6
//Opération de division
y / x; //1.5
0 / 0; //NaN (Not a Number)
//Opération d'incrémentation (ajout d'une unité)
1++; //2
//Opération de décrémentation (soustraction d'une unité)
1--; //0
//Opération exponentielle
2 ** 3; //8
Il existe un autre opérateur arithmétique dans JavaScript, l'opérateur de reste. Il renvoie le restant d'une division entière entre 2 opérandes (valeurs sur lesquelles l'opération est exécutée).
7 % 2;
//2 est entièrement divisible dans 7 3 fois. Il reste une unité à la fin, la console revoie donc 1.
//Autres exemples :
14 % 3; //2
30 % 10; //0
42 % 13; //3
2 autres types d'opérateurs seront présentés dans cette section, les opérateurs d'assignation et les opérateurs de comparaison. Tous les opérateurs d'assignation utilisent le symbole d'assignation =
dans leur syntaxe, et comme mentionné précédement, permettent d'assigner une valeur à une variable. En voiçi quelque uns :
x += y; //Fait l'assignation suivante : x = x + y
x -= y; //Fait l'assignation suivante : x = x - y
x *= y; //Fait l'assignation suivante : x = x * y
x /= y; //Fait l'assignation suivante : x = x / y
x %= y; //Fait l'assignation suivante : x = x % y
x **= y; //Fait l'assignation suivante : x = x ** y
Les opérateurs de comparaison servent à, comme leur nom l'indique, comparer des opérandes. Il en existe 8, et ils retournent toujours un booléen comme réponse.
3 == "3"; //true
/*Opérateur d'égalité souple, renvoie true si les opérandes sont égaux.
Il ne tiens pas compte du type de valeur.*/
3 != "3"; //false
/*Opérateur d'inégalité souple, renvoie true si les opérandes ne sont pas égaux.
Il ne tient également pas compte du type de valeur.*/
3 === 3; //true
/*Opérateur d'égalité stricte, renvoie true si les opérandes
sont égaux et les valeurs de même type.*/
3 !== "2"; //true
/*Opérateur d'inégalité stricte, renvoie true si les opérandes
ne sont pas égaux ou les valeurs de types différents.*/
3 > 2; //true
/*Opérateur de supériorité stricte. Pour des valeurs de même type,
renvoie true si l'opérande de gauche est supérieur à l'opérande de droit.*/
3 >= 3; //true
/*Opérateur de supériorité ou d'égalité stricte. Pour des valeurs de même type,
renvoie true si l'opérande de gauche est inférieur à l'opérande de droit.*/
3 < 2; //false
/*Opérateur d'infériorité stricte. Pour des valeurs de même type,
renvoie true si l'opérande de gauche est supérieur ou égal à l'opérande de droit.*/
3 <= "3"; //false
/*Opérateur d'infériorité ou d'égalité stricte. Pour des valeurs de même type,
renvoie true si l'opérande de gauche est inférieur ou égal à l'opérande de droit.*/
0
, ""
, NaN
, null
et undefined
sont considérés comme false
, si transformés en booléen. L'opérateur ! renvoie le contraire d'une valeur booléenne.
Objets et fonctions
Un objet, c'est comme un dossier sur votre ordinateur contenant plusieurs fichiers, sauf que les fichiers et le dossier sont des variables. Disons qu'il existe un objet nommé Arbre
qui contient les variables fruit
, taille
et âge
. Voici comment vous pouvez accéder à leurs valeurs:
Arbre.fruit; //Pomme
Arbre.tailleEnMètres; //10
Arbre.âge; //50
Un objet est un type de valeur, il est donc déclaré de la même façon que le reste. On utilise des {}
pour indiquer que c'est un objet et pour déclarer ses variables.
var objet = {
Propriété1: Valeur1,
Propriété2: Valeur2,
Propriété3: Valeur3
};
Il existe d'autres propriétés des objets qui seront expliqués bientôt, mais il faut d'abord faire un détour par les fonctions. En mathématique, une fonction sert à faire des opération précises sur une valeur. C'est la même chose en programmation, mais avec beaucoup plus de possibilités.
alert("Bonjour!"); //Cette fonction fera apparaitre une alerte qui dira Bonjour!
prompt("Quel est votre nom?"); //Celle-ci peut prendre de l'information sur l'usager
Si vous exécutez ces exemples (ce que je vous conseille de faire), vous verrez que alert()
retourne undefined
et prompt()
retourne la valeur que vous avez entrée. Une fonction peut retourner une valeur, comme le résultat d'une opération, ou juste effectuer une action (ou les deux!). La plupart du temps, elle a besoin d'arguments fournis entre des parenthèses pour faire quelque chose. Voici la syntaxe de déclaration d'une fonction:
function Addition(Arg1, Arg2) {
var Arg3 = Arg1 + Arg2; //Déclare une variable
return Arg3; //Retourne la variable
}
Cette fonction prends les 2 valeurs fournis entre parenthèses et retourne le résultat de leur addition.
Addition(1, 3); //Retourne 4
Dans cet exemple, une variable a été créée avec la fonction, et on y a accès partout dans le programme. Si la fonction avait utilisé let
comme déclarateur de variable, l'accès à la variable aurait été restreint au bloc de code où elle a été créé, délimité par des accolades. Il est possible de créer des fonctions plus complexes avec des conditionnels et des boucles, qui seront expliqué dans la prochaine section.
Un objet peut contenir une fonction, de la même façon qu'il peut contenir n'importe quel autre type de valeur, y compris un autre objet. La syntaxe de l'objet reste la même.
let Arbre = {
fruit: "Pomme",
tailleEnMètres: 10,
âge: 50,
nom: function() {
alert("Le nom de l'arbre est Arbre 1.");
}
};
Arbre.nom(); //Une alerte apparaît
La console contient déjà plusieurs fonctions et objets prêts à être utilisés, comme console.log()
ou setInterval()
.
console.log("Hello, World!");
//Imprime Hello, World! dans la console
function HW() {
console.log("Hello, World!");
}
setInterval(HW , 1000);
//Imprime Hello, World! à chaque seconde (100 millisecondes)
Voici une série d'exercices à faire afin de tester les connaissances acquises jusqu'à présent.
//Écrivez une fonction qui imprime une chaîne de charactères en rajoutant "!!!" à la fin.
Fonction("Exemple"); //"Exemple!!!"
//Quel sera le résultat de ces comparaisons/opérations?
"3" == 3;
"0" == false;
"aha" < "a";
(2 + (1/3 + 2) * 3) - 3**2 == !true;
3 * 3 === 8.9999999999999999999999999999999999999999999999999;
"true" === true;
!!"true" === true;
"abc" * 2;
Conditionnels et boucles
Imaginez que vous avez une feuille avec des instructions dessus. Les instructions vont comme suit:
# -Si vous êtes droitier, faites un pas vers la droite.
# -Sinon, si vous êtes gaucher, faites un pas vers la gauche.
# -Dans tous les autres cas, faites un pas vers l'arrière.
Dans chacune des étapes, une condition doit être vraie pour permettre l'exécution d'une action. En programmation, il existe des conditionnels qui exécutent ou non des actions si quelque chose est vrai ou faux.
if(Écriture == "d") {
console.log("Faites un pas vers la droite.");
} else if(Écriture == "g") {
console.log("Faites un pas vers la gauche.");
} else {
console.log("Faites un pas vers l'arrière.");
}
if
, else if
et else
sont ces conditionnels. Ils peuvent parfois utiliser dans leurs conditions les symboles &&
et ||
(ET et OU, respectivement).
let foo = 4;
if(foo == 4 && foo >= 3) {
let fooo = 2;
}
console.log(fooo);
Analysons cet exemple afin de mieux comprendre les conditionnels...
* Une variable globale foo
est déclarée, ayant comme valeur 4
.
* Une déclaration if va exécuter son code seulement si foo
est égale à 4
ET foo
est plus grand que 3
. Ces 2 conditions sont vraies, donc le code est exécuté et la nouvelle variable fooo est déclarée, ayant une valeur de 2
.
* console.log()
essaye d'imprimer la valeur de fooo
dans la console.
* Aha! console.log()
n'a pas accès à fooo
, parce que fooo
est une variable locale, auquelle l'accès est restreint au bloc de code où elle a été créé (à cause de la déclaration let
).
* Uncaught ReferenceError: fooo is not defined
, fin du programme.
Une boucle fonctionne de la même manière qu'un conditionnel, seulement que le code à l'intérieur de la boucle continuera d'exécuter tant que la condition sera vraie.
while(true) {
//code
}
var xx = 0;
while(xx < 10) {
console.log(xx);
xx++;
}
//tous les chiffres naturels existants seront imprimés
Une variante de cette boucle est la boucle do/while
, où le code est exécuté la première fois avant que la condition ne soit verifiée.
do {
console.log("Cette phrase est fausse.");
} while(false);
Dans cet exemple, la phrase sera imprimée lors de la première itération, la condition n'étant vérifiée que seulement après.
Une forme de boucle plus complexe, mais beaucoup plus efficace, est la boucle for
. Elle fonctionne à partir d'une série de trois déclarations/conditions, séparés par des points-virgules. La première déclare une variable qui servira de compteur pour la boucle, la deuxième regarde si une condition concernant cette variable est respectée afin de continuer la boucle et la troisième effectue une opération sur la varaible.
for(let x = 0; //déclaration du conmpteur
x < 10; //condition à respecter
x++) //opération effectué après chaque itération
{
console.log(x)
}
//Version condensée
for(let x = 0 ; x < 10 ; x++) {
console.log(x);
}
Avant de passer à la dernière section, vous devriez avoir une connaissance passive des termes suivant: valeur, variable , déclaration, opérateur, opérande, objet, fonction, conditionnel et boucle. Si vous êtes encore incertain du sens de certains de ces termes, vous pouvez relire à votre guise les sections précédentes après avois pris ou non une pause. Rien ne presse.
CSS et le DOM
Vous souvenez-vous de la mention passante de CSS au début de ce document? Il est venu temps d'en parler plus en détail.
CSS (Cascading Style Sheets) est un langage de style, qui sert à modifier l'apparence d'éléments sur une page web. Voici la syntaxe CSS à utiliser pour changer la couleur de tout les paragraphes en vert:
p {
color:#00ff00;
}
Cette règle est composée d'un sélecteur et d'une déclaration. Le sélecteur spécifie l'élément(s) sur lequel (lesquels) le style sera appliqué (dans ce cas, tous les éléments p
). La déclaration est composée d'une propriété et d'une valeur. Chaque élément HTML a des propriétés qui régissent son apparence. En changeant la valeur de certaines propriétés, on change non seulement l'apparence, mais aussi le comportement des éléments associés.
CSS utilise la notation hexadécimal pour identifier les couleurs. Chaque couleur a une valeur, représentée par une série de 6 chiffres et lettres allant de a à f. Ces unités sont séparés en trois paires de 2 unités, représentant les teints rouge, verts et bleus de la couleur. #000000
est la couleur noire et #ffffff
est la couleur blanche. #ff0000
, #00ff00
et #0000ff
sont rouge, vert et bleu respectivement.
Il existe des sélécteurs plus précis pour les éléments HTML ayant un identifiant et/ou une classe (une classe est définie par l'attibut class = "valeur"
, et peut être partagée par plusieurs éléments). Le sélecteur d'une classe texte
est .texte {}
et le sélecteur d'un identifiant titre
est #titre {}
. Il y a beaucoup d'autres types de déclarations CSS, comme size = 16px;
(grandeur du texte), background-color = #00f;
(couleur de l'arrière-plan) ou font-family = monospace
(police de caractères). Une règle CSS peut être écrite de telle sorte qu'elle ne soit appliquée que lorsque l'élément associé est dans un état spécifique.
#banane:hover {
color : red;
}
/*Cette règle sera appliquée que lorsque la souris est directement
au dessus de l'élément avec l'id banane.*/
JavaScript comme langage est assez limité, c'est pourquoi il lui faut utiliser le DOM (Document objet Model) pour interagir avec les pages web. Le DOM est un API (Application Programming Interface), une série de fonctions qui permettent à JavaScript d'intéragir avec une page web, en représentant la page web sous forme de l'objet document
. Voici quelques fonctions fournis par le DOM:
//fonctions pouvant être mises dans une variable
document.getElementById("id");
document.getElementsByClassName("nomDeClass");
//ces fonction retournent le ou les élément(s) associé(s) avec le sélécteur.
document.addEventListener("action", fonction);
/*cette fonction active une autre fonction lorsque qu'une action est faite.
Liste d'actions courantes:
"mouseover" : Activée lorsque la souris est sur l'élément.
"mouseout" : Activée lorsque la souris est à l'extérieur de l'élément.
"mousemove" : Activée lorsque la souris bouge.
"click" : Activée lorsque l'élément est cliqué.
"scroll" : Activée lorsque la page défile.
*/
Pour finir, je vais vous présenter un programme JavaScript qui utilise le DOM pour changer la couleur d'un paragraphe.
let egg = document.getElementById("eggs");
//L'élément eggs (le paragraphe en dessous) est mis dans la variable eggs.
eggs.addEventListener("click", function() {
//Une fonction est activé lorsque eggs est cliqué.
let réponse = prompt("Entrez une couleur parmi les suivantes : cyan ou violet");
//Une fenête pop-up vous demande une couleur, le choix est mis dans la variable réponse.
if(réponse === "cyan") {
eggs.style.color = "#00ffff";
//La couleur du texte sera cyan si réponse est égal à "cyan".
} else if(réponse === "violet") {
eggs.style.color = "#ff00ff";
//La couleur du texte sera violet si réponse est égal à "violet".
} else alert("Vous n'avez pas entré une couleur valide.");
//Pour toute les autres valeurs de réponse, donner une alerte.
});
Cliquez sur ce paragraphe pour en changer la couleur!
Bravo! Vous avez désormais fini de lire toutes les sections! Ci-dessous sont des sites qui permettront d'approfondir vos connaissances, ainsi qu'une série de défis qui peuvent les tester.
La documentation officielle de JavaScript, par Mozilla (en anglais)
Un site qui apprend à programmer des sites gratuitement (en anglais)
Une bibliothèque JavaScript pour coder des graphiques 2D et 3D (en anglais)
Défis
En dessous de l'éditeur est un paragraphe avec l'identifiant patate
. Ce paragraphe contient du texte de remplissage qui ne veut rien dire. Vous devez accomplir les défis suivants avec JavaScript :
- Aggrandir le texte à 24 pixels et changer le fontFamily à arial
- À chaque 2 clics, la couleur du texte change selon une couleur entrée par l'utilisateur
- Imprimer les nombres de 0 à 100, en replaçant les multiples de 3 par
fizz
, les multiples de 5 parbuzz
et les multiples de 3 et 5 parfizzbuzz
- À l'aide de
setInterval()
, changer la couleur du texte à chaque 5 secondes