JS Script

Identification

Infoforall

4 - Rajouter du javascript


Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser Atom produit par Githhub, aujourd'hui possédé par Google, ou Notepad ++ (Notepadqq sur Linux). Sublim Text est également une alternative de qualité.

Evaluation ✎ : 5-6-14 pendant l'activité elle-même en demandant à l'enseignant de valider.

Documents de cours : open document ou pdf

Résumé : Version HTML ou imprimable ou PDF (couleur ou gris)

1 - Intégration du javascript

Pour programmer en Javascript, il vous faudra comme pour HTML et CSS un simple éditeur de texte.

Notepad++ ou Atom vont être très utiles, mais pas indispensables.

Balise script

Pour intégrer votre code javascript, nous allons utiliser la balise <script>. A l'aide de cette balise, nous allons donner le nom et la position du script à lancer.

Trois possibiiltés pour utiliser un script javascript :

  • Option A : le placer directement dans la page HTML.
  • Option B : indiquer la localisation du fichier javascript via une balise <script> en fin de fichier HTML.
  • Option C : indiquer la localisation du fichier javascript via via une balise <script> dans la balise <head>.

Option A (rapide mais pas propre) : directement dans le html

Cette méthode est simple mais ne sert que pour faire un prototype rapide ou vérifier que le navigateur parvient bien à interprèter javascript.

Il suffit de placer votre code entre la balise d'ouverture <script> et de fermeture </script>.

01° Créer une page HTML en utilisant le code suivant.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Intégration js</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <main> <h1>Premiers tests avec javascript</h1> </main> <script> alert("Hello World !"); </script> </body> </html>

En le lançant, vous devriez constater l'apparition d'une fenêtre pop-up dès l'activation de la fenêtre.

Questions :

  1. Comment se nomme la fonction JAVASCRIPT qui permet de demander d'ouvrir une fenêtre pop-up ?
  2. Que trouve-t-on en fin de ligne d'instruction ? (contrairement à Python où on ne place rien, à part en fin de déclaration des mots-clés for while if def)

...CORRECTION...

Il suffit de regarder en ligne 17.

17
alert("Hello World !");

La fonction se nomme alert(), et c'est donc l'équivalent du print() Python dans la console.

En Javascript, on place un point-virgule à la fin de chaque ligne d'instruction.

On sait maintenant (normalement !) que votre navigateur reconnait le javascript. Passons à la gestion du code dans un fichier indépendant.

Option B (pratique mais pas propre) : un fichier à part et une balise script en fin de code html

Dans cette partie, nous allons créer un fichier d'extension .js et le placer dans le même répertoire que notre fichier .html.

📁 mon_site

📄 index.html

📄 mes_scripts.js

Il suffit alors de donner à la balise script l'adresse relative du fichier JAVASCRIPT par rapport à la localisation du fichier HTML. Comme les deux fichiers sont dans le même répertoire, il suffit de donner le nom du fichier.

<script src="mes_scripts.js"></script>

Le navigateur exécute le code-source HTML au fur et à mesure qu'il le lit.

Il ne va donc faire la demande du fichier JAVASCRIPT qu'après être tombé sur la ligne contenant la balise script.

Pour que le script ne se lance qu'une fois la page totalement chargée, il suffit donc de placer la balise <script> juste avant la balise de fermeture </body>.

02° Créer le fichier HTML et le fichier JS à l'aide des deux codes ci-dessous. Tester pour vérifier que votre HTML détecte bien le javascript. Si ça ne marche pas :

  • Vérifier le nom de votre fichier js : il doit se nommer mes_scripts.js.
  • Vérifier l'extension de votre fichier js : .js et pas .txt
  • Vérifier l'arborescence de vos deux fichiers : le HTML et le JS doivent être situés dans le même répertoire.

Le fichier HTML : son nom n'a pas d'importance.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Intégration js</title> <link rel="stylesheet" href="style_1.css" /> </head> <body> <main> <h1>Premiers tests avec javascript</h1> </main> <script src="mes_scripts.js"></script> </body> </html>

Le fichier JS : il faut l'enregistrer en le nommmant mes_scripts.js. Il ne contient qu'une seule instruction pour le moment.

1
alert("Hello World !");

Vous devriez voir le même effet mais avec un script javascript totalement déporté dans un fichier à part du HTML.

Option C (propre) : un fichier à part et une balise script dans la balise head

La balise script se place normalement dans la balise head. Le script va donc s'activer dès qu'on rencontrera la balise

Le problème ? Les images ne seront pas nécessairement encore chargées si la demande d'images est en dessous dans le HTML. Le script pourrait donc agir sur des balises qui ne sont pas encore apparues !

Lorsqu'on place cette balise script dans le head, on doit donc rajouter quelques lignes d'instructions javascript pour indiquer d'attendre le chargement total de la page avant de travailler.

03° Modifier et enregistrer le fichier HTML et le fichier JS à l'aide des deux codes ci-dessous.

Le fichier HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8" /> <title>Intégration js</title> <link rel="stylesheet" href="style_1.css" /> <script src="mes_scripts.js"></script> </head> <body> <main> <h1>Premiers tests avec javascript</h1> </main> </body> </html>

Le fichier JS nommé mes_scripts.js

1 2 3 4 5
function demarrage() { alert("Hello World !"); } window.addEventListener("load",demarrage);
Fonctionnement de addEventListener

L'utilisation de addEventListener permet de signaler au gestionnaire d'événements de surveiller un événement et de lancer automatiquement un appel de fonction lorsque l'événement survient.

5
window.addEventListener("load",demarrage);

On signale ici de lancer la fonction demarrage() lorsque l'événement "load" apparaît.

"load" ? Cela veut dire chargement en anglais. Cet événement correspond au chargement complet des fichiers demandés dans le fichier HTML.

Le navigateur Web va donc lancer automatiquement demarrage() après que la page et tous les fichiers demandés par cette page seront chargés en mémoire.

Regardons les premières différences entre Python et Javascript.

Différences et similitudes entre Python et Javascript

On remarque que

  • Chaque instruction finit nécessairement par un point-virgule (ligne 2 et ligne 5)
  • On déclare les fonctions avec le mot-clé function plutôt que def
  • Ce n'est pas la tabulation qui indique où se trouve les instructions de la fonction mais l'accolade d'ouverture { et l'accolade de fermeture }.

2 - Variables et Calculs avec Javascript

Nous allons pouvoir créer des variables et faire des calculs avec Javascript , comme avec Python. C'est la syntaxe qui change, c'est tout.

Nous allons faire quelques calculs à l'aide des fonctions de façon à voir comment réaliser les calculs de base.

Déclaration de variables avec var

La portée des variables est différente entre Python et Javascript.

Affecter une variable inexistante pour le moment sans la faire précéder du mot-clé var rend la variable globale dans Javascript. Même si elle est déclarée depuis une fonction ! Elle serait alors modifiable depuis n'importe où... Il suffit qu'une fonction utilise ce même alias pour autre chose et ça peut causer de gros problèmes de modifications de valeurs non voulues.

Si on place var, la portée de la variable n'est pas globale et ressemble à celle du Python :

  • la portée est limitée à la fonction si elle est définie dans une fonction.
  • la portée est globale si la variable est définie dans le corps du script.

Seule exception : les paramètres des fonctions, qui sont des variables locales sans avoir quoi que ce soit à rajouter.

04° Modifier juste le fichier JS à l'aide des deux codes ci-dessous. Je considère ici que le fichier HTML est celui de la question 3. Ce script vous permet juste de voir comment réaliser des fonctions avec paramètres et réponse dans Javascript.

Le fichier JS nommé mes_scripts.js

1 2 3 4 5 6 7 8 9 10 11
function calcul(a, b) { var reponse = a + b; return reponse } function demarrage() { var rep = calcul(6,4); alert(rep); } window.addEventListener("load",demarrage);

Questions

  1. La fonction calcul() correspond-t-elle à une demande "créer une fonction qui renvoie..." ou "créer une fonction qui affiche..." ?
  2. La fonction demarrage() correspond-t-elle à une demande "créer une fonction qui renvoie..." ou "créer une fonction qui affiche..."
  3. L'ordre réel d'exécution des fonctions est-il :
    1. addEventListener() qui lance demarrage() qui lance calcul()
    2. addEventListener() qui lance calcul() qui lance demarrage()
    3. calcul() qui lance addEventListener() qui lance demarrage()
    4. calcul() qui lance demarrage() qui lance addEventListener()

...CORRECTION...

  1. La fonction calcul() correspond à "créer une fonction qui renvoie..." puisqu'elle utilise return
  2. La fonction demarrage() correspond à une demande "créer une fonction qui affiche..." puisqu'elle utilise alert.
  3. L'ordre réel d'exécution est
    1. addEventListener() qui lance demarrage() qui lance calcul()

Pourquoi ?

Simplement car les lignes 1-9 ne sont que des déclarations de fonctions. La première instruction est celle de la ligne 11. La fonction addEventListener() signale que lorsque la page sera totalement chargée, il faudra lancer la fonction demarrage().

En allant voir la fonction demarrage(), on voit qu'elle va avoir besoin de faire appel à la fonction calcul().

✎ 05 - à faire valider° Modifier le fichier JS pour réaliser une multiplication avec *. En envoyant les arguments 6 et 4, on doit donc afficher 24.

✎ 06 - à faire valider° Modifier le fichier JS pour trouver le reste d'une division entière avec %. En envoyant les arguments 26 et 10, on doit donc afficher 6 puisque 26 = 2*10 + 6. Le quotient vaut 2 et le reste vaut 6.

Commentaires

Pourquoi ne pas vous demander d'abord la division euclidienne ? Simplement car en Javascript, // sert à signaler des commentaires. C'est l'équivalent de # en Python.

07° Utiliser ce fichier JS pour visualiser que // provoque la mise de b en commentaire. Le code devrait donc juste afficher la valeur de la variable a.

Le fichier JS nommé mes_scripts.js

1 2 3 4 5 6 7 8 9 10 11
function calcul(a, b) { var reponse = a // b; return reponse } function demarrage() { var rep = calcul(6,4); alert(rep); } window.addEventListener("load",demarrage);

08° Modifier le fichier JS pour pouvoir calculer des puissnces à l'aide de ** comme en Python. En envoyant les arguments 2 et 8, on doit donc afficher 256, puisqu'on calcule 28.

Commentaires multilignes

Les strings multilignes se font en Python avec ''' et servent surtout à réaliser la documentation par exemple.

En Javascript, les commentaires multilignes sont situés entre /* en ouverture (ordre des deux touches sur le clavier numérique) et */ en fermeture (ordre inverse).

09° Utiliser ce fichier JS pour visualiser que le /* ... */ provoque un commentaire multiligne. La fonction devrait donc juste afficher le double de 6 lors de son appel.

Le fichier JS nommé mes_scripts.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
function calcul(a) { /* Fonction qui renvoie le double de a :: param a (number ou string) :: un nombre ou un texte :: return (number ou string) :: le double de a */ var reponse = a; return reponse } function demarrage() { var rep = calcul(6); alert(rep); } window.addEventListener("load",demarrage);
Typage des variables

Python possède 4 types natifs très souvent utilisés : int, float, bool, str et None.

Javascript est encore plus concis sur les nombres : number, boolean, string et undefined.

10° Utiliser ce fichier JS ci-dessous. Vous devriez constater que Javascript possède bien un typage encore plus souple que Python : il tente de s'adapter à la demande d'addition d'un nombre et d'un string, là où Python déclenche une erreur.

Le fichier JS nommé mes_scripts.js

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
function calcul(a, b) { /* Fonction qui renvoie l'addition ou la concaténation des deux arguments a et b :: param a (number ou string) :: le premier paramètre :: param b (number ou string) :: le deuxième paramètre :: return (number ou string) :: le résultat de l'addition ou de la concaténation de a et b */ var reponse = a + b; return reponse } function demarrage() { var rep = calcul(2,"5"); alert(rep); } window.addEventListener("load",demarrage);

Comme en Python, on peut tenter d'interpréter un contenu en le transformant dans un autre type de contenu.

Tenter de convertir

Pour tenter de convertir un contenu en integer, il faut utiliser la fonction native parseInt(). Exemple parseInt("2") va ainsi renvoyer 2.

Pour tenter de convertir un contenu en float, il faut utiliser la fonction parseFloat(). Exemple parseFloat("2.5") va ainsi renvoyer 2.5.

11° Modifier le fichier JS de la question 10 précédente pour qu'elle renvoie bien l'addition des deux paramètres, même si l'un des deux est fourni sous forme de string plutôt que de nombre. Il faudra utiliser la fonction parseFloat().

...CORRECTION...

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
function calcul(a, b) { /* Fonction qui renvoie l'addition ou la concaténation des deux arguments a et b :: param a (number ou string) :: le premier paramètre, interprétable comme un nombre :: param b (number ou string) :: le deuxième paramètre, interprétable comme un nombre :: return (number) :: le résultat de l'addition de a et b */ var reponse = parseFloat(a) + parseFloat(b); return reponse } function demarrage() { var rep = calcul(2,"5"); alert(rep); } window.addEventListener("load",demarrage);

3 - Debug

Avec Python, on peut faire du debug en visualisant le contenu des variables à certains moments critiques

  • en utilisant Thonny en mode pas à pas (bonne méthode) ou
  • en utilisant régulièrement des print() (pratique, simple mais un peu artisanal).

On peut faire la même chose avec Javascript.

Pour cela, il faut visualiser la console du navigateur (Développement Web - Console Web dans Firefox).

On pourra alors y afficher des choses en utilisant la méthode log() sur l'objet console() :
console.log(rep);

12° Ouvrir la console dans Firefox et utiliser le script JS ci-dessous pour visualiser le résultat : il doit maintenant s'afficher dans la console Web du navigateur plutôt que dans un pop-up assez déplaisant.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
function calcul(a, b) { /* Fonction qui renvoie l'addition ou la concaténation des deux arguments a et b :: param a (number ou string) :: le premier paramètre, interprétable comme un nombre :: param b (number ou string) :: le deuxième paramètre, interprétable comme un nombre :: return (number) :: le résultat de l'addition de a et b */ var reponse = parseFloat(a) + parseFloat(b); return reponse } function demarrage() { var rep = calcul(2,"5"); console.log(rep); } window.addEventListener("load",demarrage);
Visualisation dans la console
Visualisation de la console

L'intérêt de la console est d'être dissimulée pour l'utilisateur normal (entendre "ne sachant pas ouvrir la console Web"). Celui-ci ne verra jamais les choses affichées dans la console. Pensez néanmoins à enlever vos log une fois le programme terminé.

4 - Déclaration avec let

Nous avons vu qu'une déclaration de variable avec var permettait d'obtenir une portée des variables assez proche de celle de Python.

On peut néanmoins rendre la portée encore plus limitée.

Pour cela, il faut utiliser le mot-clé let.

Déclaration de variables avec let

Lorsqu'on déclare une variable en la faisant précéder du mot-clé let, on obtient une variable dont la portée est locale au bloc {} dans laquelle elle est créée. La variable est encore plus locale qu'avec var.

On conseille actuellement aux développeurs Web de privilégier let.

13° Utiliser le script ci-dessous et expliquer pourquoi on obtient la succession d'affichage A plutôt que la B ou la C.

On notera la présence d'un bloc identifié par les accolades.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<html> <body> <p>Let et var</p> </body> </html> <script> var x = 2; let y = 5; alert(x + " " + y); { var x = 200; let y = 500; alert(x + " " + y); } alert(x + " " + y); </script>
  1. Affichage réellement obtenu : 2 5 puis 200 500 puis 200 5.
  2. Affichage imaginaire : 2 5 puis 200 500 puis 200 500.
  3. Affichage imaginaire : 2 5 puis 200 500 puis 2 5.

...CORRECTION...

Dans ce code, on crée d'abord deux variables x et y dans le corps du script.

x est créée avec var : cela en fait une variable globale puisque la déclaration n'est pas effectuée dans une fonction.

La variable y est créée avec le mot-clé let. Sa porté est limitée au corps du programme puisque c'est ici qu'on la crée C'est son "bloc". Il s'agit donc également d'une sorte de variable globale.

On obtient alors 2 5.

Ensuite, on utilise un bloc.

On y déclare une variable x avec var. Comme nous sommes dans le corps du programme, cette nouvelle variable va écraser l'ancien alias.

La situation est différence pour y, déclarée avec let. Cela veut dire la variable y du corps du programme n'est pas écrasée par la variable y du bloc.

L'affichage est donc 200 500.

Ensuite, on sort du bloc : la variable y du bloc n'est donc plus référencée.

Lorsqu'on demande d'afficher les contenus en ligne 18, on parle donc de y du bloc local, celle de la ligne 9 . On obtient alors 200 5.

Nous verrons l'importance des blocs lorsqu'on abordera les tests et les boucles, puisque nous aurons alors l'obligation de placer leurs instructions dans des blocs (en Python, c'est l'indentation qui donne cette information)

On ne vous demandera pas d'avoir une expertise de ces notions de portée en javascript, mais vous avez maintenant été sensibilisé à la différence entre l'utilisation de let, l'utilisation de var. La seule chose à ne pas faire : ne pas placer l'un ou l'autre avant une première affectation d'une nouvelle variable !

5 - Prompt

La méthode alert() de l'objet window permet d'afficher des choses dans un pop-up.

La méthode prompt() permet de faire l'inverse : afficher un pop-up permettant à l'utilisateur de taper quelque chose. Nous allons voir prochainement un moyen plus propre de poser des questions aux utilisateurs. prompt() ne vous est présentée que pour raison de simplicité dans un premier temps : c'est l'équivalent de input() de Python. On évitera donc de l'utiliser en réalité.

✎ 14 - à faire valider° Utiliser le script ci-dessous pour comprendre le principe.

Fournir ensuite un code permettant de faire l'addition de deux nombres fournis par l'utilisateur et de l'afficher avec un pop-up.

1 2 3 4 5 6 7 8 9 10 11 12 13
<html> <body> <p>Un petit calcul final ?</p> </body> </html> <script> function demarrage() { let x = prompt("Fournir un nombre :") let calcul = 2*x; alert("Multiplié par deux, cela donne" + calcul); } window.addEventListener('load', demarrage); </script>

6 - FAQ

Question : J'ai vu sur le Web qu'on pouvait activer différemment la méthode alert. C'est vrai ?

En toute rigueur, il faudrait noter ceci

1
window.alert("Hello World !");

Si vous ne placez pas l'objet window dans lequel aller chercher la méthode alert(), l'interpréteur Javascript du navigateur va simplement le rajouter tout seul.

Dans l'activité suivante, nous verrons comment

  • Gérer les événements qui surviennent la page
  • modifier le texte, les couleurs ... via un script Javascript.
  • Utiliser des formulaires pour remplacer prompt() proprement
  • réaliser des tests conditionnels
  • lire le contenu interne des balises HTML

Activité publiée le 15 12 2019
Dernière modification : 25 01 2021
Auteur : ows. h.