Aller au contenu

Le langage Javascript⚓︎

Contrairement à HTML et CSS, le Javascript est un vrai langage de programmation, comme Python. Il permet l'exécution de programmes directement dans le navigateur (donc côté "client"), assurant ainsi une partie de l'interactivité entre l'humain et le Web (quand le CSS ne suffit plus).

L'objectif de cette partie n'est pas de maîtriser ce langage, ce qui vous demanderait plusieurs semaines, mais seulement d'en découvrir les grands principes.

Emplacement du code Javascript⚓︎

Comme pour le CSS, le code Javascript peut être placé :

  • directement au niveau de l'élément concerné, par exemple : <button onclick="alert('Hello !');">Cliquez ici</button> ;
  • dans le fichier (dans <head></head> ou dans <body></body>), par exemple <script>alert('Hello !');</script> ;
  • dans un fichier externe, nommé par exemple script.js. Nous choisirons cette troisième possibilité. Il suffira alors dans la page HTML d'écrire <script src="script.js"></script>.

Exercice 1

Dans jsfiddle, testez les codes suivants :

JavaScript
1
2
3
4
5
function changercouleur() {
  texte = document.querySelector("#montexte");
  texte.style.color = 'red'; // ou #f00 ou rgb(255,0,0)
  texte.innerHTML = 'Bravo !'
}
Code HTML
<span id="montexte">Juste un texte !</span>
<button onclick="changercouleur();">Cliquez ici</button>

Remarques

  • Nous définissons une fonction en Javascript avec le mot clé function, pas avec def.
  • Cette fonction est executée quand l'événement onclick de l'élément <button> se produit (c'est à dire quand vous cliquez sur le bouton). Il y a beaucoup d'autres événements en Javascript.
  • Remarquez l'utilisation d'un identifiant pour spécifier l'élément sur lequel nous voulons intervenir.
  • À la ligne 3, nous pouvons spécifier des couleurs de différentes façons.
  • Les commentaires se font avec // en Javascript, pas avec # comme en Python. En HTML, il faut utiliser <!-- et --> et en CSS avec /* un commentaire */.
  • Normalement il faut spécifier dans le HTML l'emplacement du fichier contenant le code Javascript ; dans jsfiddle ce n'est pas nécessaire.
querySelector vs getElementById

Vous trouverez sur le Web de nombreux scripts utilisant document.getElementById(), par exemple ici j'aurais pu écrire
texte = document.getElementById("montexte");

L'intérêt de document.querySelector() est qu'il permet d'utiliser des spécificateurs CSS (id, class, name, etc.).

Par exemple pour sélectionner un élément <p name="toto">...</p>, nous pouvons utiliser document.querySelector('[name="toto"]')

Plus d'infos ici

Et pour sélectionner plusieurs éléments ??

Il suffit d'utiliser document.querySelectorAll() au lieu de document.querySelector(); ainsi pour agir sur tous les éléments d'une classe appelée important :

JavaScript
var importants = document.querySelectorAll('.important');
for (var i = 0; i < importants.length; i++) {
    importants[i].style.backgroundColor = 'yellow';
    }

Quelques instructions utiles en Javascript⚓︎

Vous pouvez testez ces fonctions en les ajoutant dans la fonction changercouleur ou en créant d'autres fonctions, d'autres boutons, etc.

  • console.log("Un test") : affiche un message dans la console du navigateur (accessible avec F12) ;
  • alert("C'est gagné !") : ouvre une fenêtre avec un message ;
  • let var = 5; : pour définir une variable ;
  • document.write('texte') : pour écrire un texte dans la page
  • for (i = 1; i < 10 ; i++){ ... } : pour faire une boucle
  • prompt("message", "Texte par défaut") : c'est l'équivalent du input de Python ;
  • confirm("message") : renvoie un booléen, ce qui permet de tester un choix de l'utilisateur.

Exercice 2

Dans jsfiddle, testez les codes suivants.

Code HTML
<script> 
for (i = 1; i < 10; i++){ document.write("<p>Salut ", i, " fois</p>"); } 
</script>
JavaScript
rep = prompt("Quel est ton prénom", "Astérix")
coul = prompt("Quelle est ta couleur préférée", "jaune, rouge ou surprise")
if (coul == "jaune")
    {
    codeCouleur = "yellow"
    }
else if (coul == "rouge")
    {
    codeCouleur = "red"
    }
else
    {
    codeCouleur = "Chocolate"
    document.write("<p>La couleur surprise est... chocolat !</p>")
    }
document.write("<p><span style='background-color:", codeCouleur, "'>Salut ", rep, "</span></p>");
JavaScript
rep = confirm("Voulez-vous du vert ?\nCliquez sur Annuler si vous n'en voulez pas.")

if (rep)// sous-entendu si rep vaut true
    {
    codeCouleur = "green"
    }
else
    {
    codeCouleur = "chocolate"
    }

document.write("<p><span style='background-color:", codeCouleur, "'>Du texte en couleur</span></p>");
C'est quoi ce \n ?

Vous l'aurez sûrement compris, il permet d'insérer un retour à la ligne (\n comme nouvelle ligne) dans une chaîne de caractères.

JavaScript
var heureActuelle = new Date();
document.write("Il est ", heureActuelle.getHours(), " h ",heureActuelle.getMinutes(), " min et ", heureActuelle.getSeconds(), " sec");

Projet (fin)

Agrémentez votre projet d'un peu de Javascript.

Quand vous aurez fini, créez une archive zip de votre projet complet (HTML, images, CSS et JS) et envoyez-le moi.