Javascript est un des 3 langages que les dévellopeurs Web doivent connaitre :
Ce tutoriel est sur Javascript et comment Javascript fonctionne avec HTML et CSS.
Javascript a été inventé par Brendan Eich en 1995. Attention même si leur nom est proche, Javascript et Java sont des langages totalement différents.
Javascript peut modifier dynamiquement le contenu du HTML et/ou du CSS. Il est donc très utilisé dans les pages WEB. Il s'écrit directement dans le code HTML dans une balise spéciale. A l'inverse de PHP, le JavaScript est exécuté par le navigateur de l'ordinateur client et non pas par le serveur WEB.
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<script>
document.write('Mon premier code JavaScript!');
</script>
Enregistrer ce fichier sous le nom "javascript_01.html" et l'ouvrir avec un navigateur Web. Visualiser le code source de la page.
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Deuxième code JavaScript</title>
</head>
<body>
<p>Bonjour, nous sommes le
<script>
let d = new Date(); // Création d'un nouvel objet date nommé d
document.write(d.toLocaleDateString() + ', il est ' + d.toLocaleTimeString());
</script>
.</p>
</body>
</html>
Enregistrer ce fichier sous le nom "javascript_02.html" et l'ouvrir avec un navigateur Web.
Rechercher le nom de la méthode qui permet d'obtenir le timestamp d'une date (Le TimeStamp est le nombre de millisecondes écoulées depuis le premier janvier 1970, 00:00:00 UTC).
Tester cette méthode de manière à afficher le timestamp dans le navigateur.
Comme dans tous les langages de programmation, JavaScript permet de réaliser des tests et des boucles.
La syntaxe est très proche (voir identique au php, au Java, au C,...).
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Troisième code JavaScript</title>
</head>
<body>
<p>
<script>
let d = new Date(); // Création d'un nouvel objet date nommé d
let heure = d.getHours();
if (heure >= 0 && heure < 17)
{
document.write('Bonjour');
}
else
{
document.write('Bonsoir');
}
document.write(', nous sommes le ' + d.toLocaleDateString() + ', il est ' + d.toLocaleTimeString());
</script>
.</p>
</body>
</html>
Enregistrer ce fichier sous le nom "javascript_03.html" et l'ouvrir avec un navigateur Web.
document.write(`, nous sommes le ${d.toLocaleDateString()}, il est ${d.toLocaleTimeString()}`);
Attention : il faut utiliser les guillemets "backticks" : touches ALT-GR + 7
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Troisième code JavaScript (bis)</title>
</head>
<body>
<p>
<script>
document.write('<pre>');
// Boucle pour les lignes
for(i = 1 ; i < 11 ; i++) // Les boucles en Javascript utilisent la même syntaxe qu'en Langage C
{
// Boucle pour les étoiles *
for(j = 0 ; j < i ; j++)
document.write('*');
document.write('<br>');
}
document.write('</pre>');
</script>
.</p>
</body>
</html>
Enregistrer ce fichier sous le nom "javascript_03_bis.html" et l'ouvrir avec un navigateur Web.
Modifier le code Javascript de manière à obtenir l'affichage ci-dessous dans le navigateur :
Comme dans tous les langages de programmation, JavaScript permet de créer ses propres fonctions.
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Quatrième code JavaScript</title>
<script>
/**
* Renvoie VRAI si l'heure passée en paramètre est comprise
* entre 0 et 17.
* @author SD
* @param heureATester (entier) : heure à tester
* @return (booleen) : VRAI ou FAUX selon l'heure passée en paramètre
*/
function estLaJournee(heureATester)
{
return (heureATester >= 0) && (heureATester < 17);
}
</script>
</head>
<body>
<p>
<script>
let d = new Date(); // Création d'un nouvel objet date nommé d
let heure = d.getHours();
if (estLaJournee(heure)) // Affiche "Bonjour" ou "Bonsoir" selon l'horaire
{
document.write('Bonjour');
}
else
{
document.write('Bonsoir');
}
document.write(', nous sommes le ' + d.toLocaleDateString() + ', il est ' + d.toLocaleTimeString());
</script>
.</p>
</body>
</html>
Enregistrer ce fichier sous le nom "javascript_04.html" et l'ouvrir avec un navigateur Web.
Il est possible d'exécuter du code Javascript en fonction des différents évènements qui peuvent se produire dans une page HTML (clic de souris, appuie sur une touche du clavier,...).
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Cinquième code JavaScript</title>
</head>
<body>
<button onclick="maFonction()">Clic sur moi !</button>
<p id="demo"></p>
<script>
/**
* Recherche sur la page l'élément ayant pour id "demo"
* et y insère le texte "Bonjour"
* @author SD
* @param : aucun
* @return : aucun
*/
function maFonction() {
document.getElementById("demo").innerHTML = "Bonjour";
}
</script>
</body>
</html>
Enregistrer ce fichier sous le nom "javascript_05.html" et l'ouvrir avec un navigateur Web.
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Sixième code JavaScript</title>
</head>
<body>
<p onclick="fonctionCouleur(this, 'red')">Cliquer pour changer la couleur du texte du paragraphe 1.</p>
<p onclick="fonctionCouleur(this, '#0000FF')">Cliquer pour changer la couleur du texte du paragraphe 2.</p>
<p onclick="fonctionCacher(this)">Cliquer pour cacher le paragraphe 3.</p>
<button onclick="rechargerPage()">Reset</button>
<script>
function fonctionCouleur(elt,couleur) {
elt.style.color = couleur;
}
function fonctionCacher(elt) {
elt.style.display = "none";
}
function rechargerPage() {
location.reload();
}
</script>
</body>
</html>
Enregistrer ce fichier sous le nom "javascript_06.html" et l'ouvrir avec un navigateur Web.
Le but de cet exercice est de créer dynamiquement un échiquer sur une page Web.
Le code ci-dessous dessine un mini échiquier de 2x2 cases :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>JavaScript - Echiquier</title>
<style>
div .caseEchiquier {
display:inline-block;
width: 60px;
height: 60px;
max-width: 60px;
max-height: 60px;
}
div .caseBlanche {
background-color: beige;
}
div .caseNoire {
background-color: black;
}
</style>
</head>
<body>
<div id="echiquier">
<div> <!-- Ligne 1 de l'échiquier -->
<div class="caseEchiquier caseBlanche"></div><div class="caseEchiquier caseNoire"></div>
</div>
<div> <!-- Ligne 2 de l'échiquier -->
<div class="caseEchiquier caseNoire"></div><div class="caseEchiquier caseBlanche"></div>
</div>
</div>
</body>
</html>
Dans un éditeur de texte, créer un nouveau fichier et taper le code ci-dessus. Enregistrer ce fichier sous le nom "javascript_echiquier.html".
Supprimer le code HTML contenu dans la balise DIV dont l'id est "echiquier".
Ajouter à la page un script Javascript qui va créer dynamiquement à l'intérieur de la balise DIV dont l'id est "echiquier" un échiquier de 8x8 cases.
Rendu dans un navigateur :
Rendu dans la console après exécution du code Javascript :
Jusqu'à maintenant nous avons écrit le code Javascript directement dans le HTML. Afin de mieux structurer le code il est recommandé d'écrire le code Javascript dans un fichier séparé (comme pour le CSS). Les fichiers Javascript portent l'extension ".js".
L'exemple précédent serait alors composé de deux fichiers :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Sixième code JavaScript avec Javascript séparé !</title>
<script src="script.js"></script>
</head>
<body>
<p onclick="fonctionCouleur(this, 'red')">Cliquer pour changer la couleur du texte du paragraphe 1.</p>
<p onclick="fonctionCouleur(this, '#0000FF')">Cliquer pour changer la couleur du texte du paragraphe 2.</p>
<p onclick="fonctionCacher(this)">Cliquer pour cacher le paragraphe 3.</p>
<button onclick="rechargerPage()">Reset</button>
</body>
</html>
function fonctionCouleur(elt,couleur) {
elt.style.color = couleur;
}
function fonctionCacher(elt) {
elt.style.display = "none";
}
function rechargerPage() {
location.reload();
}
Tester.
Dans le TP sur l'utilisation de Bootstrap vous avez utilisé un fichier Javascript nécessaire au fonctionnement de Bootstrap :
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Si vous ouvrez ce fichier, vous pouvez constater qu'il est quasiment illisible. En effet, pour optimiser la taille des fichiers et ainsi accélérer le chargement des pages Web par le navigateur, tous les caractères "inutiles" (sauts de lignes, espaces,...) ont été supprimés.
C'est ce qu'on appelle des fichiers minifiés.
Il existe de nombreux convertisseurs en ligne pour minifier les fichiers (https://www.minifier.org/ par exemple).
Il est possible de minifier également les fichiers CSS.
Dans un éditeur de texte, créer un nouveau fichier et taper le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mini-projet N°1 : Balle rebondissante</title>
<style type="text/css">
div#balle {
position: absolute;
left: 1px;
top: 1px;
}
</style>
<script>
const DIAMETRE_BALLE = 103; // Diamètre de la balle en pixels, on ajoute 3 pixels pour éviter l'apparition des barres de scroll
function deplaceBalle() {
let maBalle = document.getElementById("balle");
let posx = maBalle.offsetLeft + 1;
let posy = maBalle.offsetTop + 1;
// Si on touche le bord bas OU le bord droit de la fenêtre
if ((posy > (window.innerHeight - DIAMETRE_BALLE)) || (posx >= (document.body.offsetWidth - DIAMETRE_BALLE))) {
posx = 0; // La balle revient en haut à gauche de la fenêtre
posy = 0;
}
maBalle.style.left = posx + "px";
maBalle.style.top = posy + "px";
}
</script>
</head>
<body>
<p>Faire rebondir une balle sur les parois de la fenêtre du navigateur.
Écrire pour cela une fonction qui calcule si la balle touche le bord de la fenêtre ou non,
une autre qui calcule sa position suivante selon qu’elle rebondit sur le bord ou non.
On pourra prendre en compte la gravité.</p>
<div id="balle"><img src="balle.png"></div>
<script>
alert("width : " + document.body.offsetWidth + " Height : " + window.innerHeight);
setInterval(deplaceBalle,10); // Appel la fonction deplaceBalle toutes les 10 ms
</script>
</body>
</html>
Télécharger l'image à utiliser (source : https://openmoji.org).
Enregistrer ce fichier sous le nom "javascript_07.html" et l'ouvrir avec un navigateur Web.
Le travail à faire pour ce mini-projet est détaillé dans le code ci-dessus.
Vous proposerez une version du code avec des fichiers .js et .css séparés et minifiés.
Vous remplacerez l'utilisation de la fonction "alert" par "console.log". Vous utiliserez également "console.log" au début de toutes les fonction que vous allez créer afin d'afficher dans la console le nom de la fonction ainsi que, le cas échéant, la ou les valeurs de ses paramètres.
Les remarques ci-dessous peuvent vous aider.
Voici une vidéo du résultat attendu pour ce mini-projet :
Ajouter une deuxième balle et détecter les colisions entre les deux balles. En cas de collision, les balles repartent en sens opposé.
Les critères de qualité de votre code seront :
Présenter sur papier au professeur la structures de votre programme (algorithme des différentes fonctions).
Vous pouvez télécharger le code complet de l'exemple ci-dessous à cette adresse : javascript_07.html
Ouvrir le fichier dans un navigateur Web. Tester et observer le fonctionnement.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Mini-projet N°2 : Tri d'un tableau</title>
<style>
table
{
border-collapse:collapse;
color:#008000;
}
td
{
border:1px solid #666;
padding:1px 10px 1px 10px;
}
</style>
<script>
function sortArray()
{
let liste= new Array(); // Création d'une liste
alltr = document.getElementById('listeATrier').getElementsByTagName('tr');
for (i=0;i<alltr.length;i++) // Insertion de tous les éléments dans la liste
{
liste[i]=new Array(); // Chaque élément de la liste est un tableau
let cells=alltr[i].getElementsByTagName('td');
liste[i][0]=cells[2].innerHTML;
liste[i][1]=cells[1].innerHTML;
liste[i][2]=cells[0].innerHTML;
}
liste=liste.sort();// Tri de la liste
for(i=0;i<alltr.length;i++) // Ré-insertion des éléments triés dans la page web
{
alltr[i].innerHTML='<td>'+liste[i][2]+'</td><td>'+liste[i][1]+'</td><td>'+liste[i][0]+'</td>';
}
}
</script>
</head>
<body>
<h1>Les sommets de France</h1>
<input type="button" onclick="sortArray()" value="Classer par altitudes" /><br/>
<table id="listeATrier" border=1>
<tr><td>Alpes</td><td>Mont Blanc</td><td>4810</td></tr>
<tr><td>Alpes</td><td>Dôme du Goûter</td><td>4304</td></tr>
...
<tr><td>Corse</td><td>Monte Renoo</td><td>2352</td></tr>
<tr><td>Corse</td><td>Incudine</td><td>2134</td></tr>
</table>
</body>
</html>
Article connexe : Premiers pas en HTML