Ajouter du javascript à une page HTML
Logiciels : Il faudra utiliser un éditeur de code. On propose ici d'utiliser :
- Notepad ++ (Notepadqq sur Linux), installé sur les machine du lycée ou
- Atom produit par Githhub, aujourd'hui possédé par Google
- Sublim Text est également une alternative de qualité
Evaluation ✎ - Travail à rendre :n° 12 et 15
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 (mais nous perdons alors la possibilité de l'utiliser sur plusieurs pages, à moins de faire du copier/coller),
- Option B : indiquer la localisation du code via une balise <script> en fin de code HTML .
- Option C : indiquer la localisation du code via via une balise <script> insérée comme pour le CSS dans la balise <head>.
Vous allez créer un répertoire de travail "TP-JavaScript" dans votre espace personnel.
Vous devez y sauvegarder les fichiers nécessaires (Page html, fichier de style, fichier javascript ...)
Télécharger et sauvegarder dans votre répertoire, le fichier de style css (Clic droit si le téléchargement ne se fait pas) style_1.css
Option A : directement dans le html
Elle ne va nous servir ici qu'à vérifier que le navigateur interprète bien le 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.
On sait maintenant (normalement !) que votre navigateur reconnait le javascript. Passons à la gestion du code dans un fichier indépendant. Passons à l'option suivante.
Option B : un fichier à part et une balise script en fin de code html
Nous allons donc créer un fichier d'extension .js que nous allons placer dans le même répertoire que le fichier .html. Comme avec le CSS.
📁 mon_site
📄 index.html
📄 mes_scripts.js
Il suffit alors de donner à la balise script la localisation du fichier js.
<script src="mes_scripts.js"></script>
Le navigateur exécute le code source au fur et à mesure qu'il le lit. Il ne va donc chercher le fichier js qu'après qu'on lui ai dit de le faire.
Le mieux est donc de placer la balise <script> juste avant la balise de fermeture </body> : le script ne se lancera qu'une fois que la page sera presque totalement chargée.
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"
1 | alert("Hello World !");
|
Vous devriez voir le même effet mais avec un code javascript totalement déporté dans un fichier à part du HTML.
Option C : un fichier à part et une balise script dans la balise head
La balise script se place normalement dans la balise head.
Normalement, le script va s'activer dès qu'on rencontrera la balise, avant que la page ne soit totalement chargée.
Le problème ? Le script tente parfois d'agir sur des balises qui ne sont pas encore apparues ! Le script peut planter.
Lorsqu'on place cette balise ici, on doit donc rajouter quelques lignes de code pour indiquer au script d'attendre le chargement de la page.
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);
|
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 donne l'indication des codes à exécuter dans une fonction mais simplement l'accolade d'ouverte
{et l'accolade de fermeture}.
Différences et similitudes entre tkinter et interface html
C'est à la ligne 5 qu'on voit un code assez similaire à celui utilisé sur Tkinter.
5 | window.addEventListener("load",demarrage);
|
On va chercher la référence de la fenêtre (window) et on utilise la méthode addEventListener (similaire à bind).
Nous allons donc lier l'événement "load" (soit chargement en français) sur l'objet window à la fonction demarrage.
2 - Variables et Calculs avec Javascript
Nous allons pouvoir placer des valeurs en mémoire et faire des calculs avec Javascript comme avec Python.
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 sans la faire précéder d'un mot-clé 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.
En Javascript, il faudra toujours faire précéder la première affectation d'une variable par le mot-clé var.
Avec var, la portée de la variable
- reste limitée à la fonction si elle est définie dans une fonction.
- devient globale si elle est définie dans le corps du script.
Comme cela, vous pouvez choisir.
Seule exception : les paramètres des fonctions, qui sont de base des variables locales.
L'utilisation du mot-clé var permet donc d'avoir une comportement des variables proches du comportement des variables avec Python.
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 code vous permet juste de voir comment réaliser des fonctions avec paramètres et retour 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);
|
05° Modifier le fichier JS pour réaliser une multiplication avec *. En envoyant les arguments 6 et 4, on doit donc afficher 24.
06° Modifier le fichier JS pour trouver le reste d'une division entière avec %. En envoyant les arguments 6 et 4, on doit donc afficher 2.
Commentaires
Pourquoi ne pas vous demander d'abord la division entière (ou euclidienne) ? Simplement car en Javascript, // permet d'effectuer des commentaires sur une ligne.
07° Utiliser le fichier JS pour visualiser que le // 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);
|
Éléments de syntaxe
Voici quelques éléments de comparaison entre Python et Javascript :
| Instruction | Python | JavaScript |
|---|---|---|
| Exécuté par | le programme Python | le navigateur (généralement) |
| Code contenu dans | un fichier .py | une balise script d’une page html |
| Créer une variable | a = 2 |
var a = 2; |
| Fin d’instruction | retour à la ligne | point virugle ; |
| indentation | définit la structure | optionnelle |
| fonction | def f(x): ... |
function f(x) { expr } |
| condition | if condition: expression |
if (condition) { expr } |
| boucle for | for i in range(10): ... |
for (var i=0; i<10; i++) { expr } |
| boucle while | while condition: expr |
while (condition) { expr } |
| commentaire | # un commentaire |
// un commentaire |
| écrire dans la console | print( expr1, expr2 ) |
console.log( expr1, expr2 ); |
08° Modifier le fichier JS pour pouvoir calculer des puissnces à l'aide de **. En envoyant les arguments 6 et 4, on doit donc afficher 1296, soit la valeur de 64.
Commentaires multilignes
Les commentaires multilignes se font en Python avec ''' en ouverture et ''' en fermeture. Ce sont ces commentaires qui sont utilisés pour réaliser la documentation des fonctions.
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 le fichier JS pour visualiser que le /* ... */ provoque un commentaire multiligne. 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
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(6,4);
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 le fichier JS ci-dessous. Vous devriez constater que Javascript possède bien un typage dynamique : il tente de s'adapter à la demande.
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 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);
|
12° Voici un script Python. Vous allez le traduire en JavaScript.
- Pour cela, vous devez créer un nouveau fichier JS : "exercice12.js" et lexécuter dans votre page html
def calculer_imc(taille, masse):
return masse / taille ** 2
nom = "Duchmol"
prenom = "Raoul" # Deuxième prénom Aldo
taille_robert = 1.8
masse_robert = 280
imc_robert = calculer_imc(taille_robert, masse_robert)
capital = 0
nombre_mois = 0
while capital < 1000:
capital = capital * 1.05 + 100
nombre_mois = nombre_mois + 1
print("Il m'a fallu", nombre_mois, "pour accumuler 1000€")
for i in range(10):
print(3, "*", i, "=", 3 * i)
3 - Debug
Avec Python, on peut faire du debug avec Spyder ou Edupython en exécuter le code pas à pas ou en utilisant régulièrement des print pour visualiser le contenu des variables à certains moments critiques.
On peut faire la même chose avec Javascript.
Pour cela, il faut visualiser la console du navigateur ( Plus d'outils - Outils de développement dans Chrome // 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);
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);
|
13° Ouvrir la console dans Chromes (ou Firefox) et utiliser le script JS ci-dessus 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.
L'intérêt de la console est bien entendu que l'utilisateur lambda 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 purement locale au bloc dans laquelle elle est créée.
14° Utiliser le script ci-dessous et expliquer pourquoi on obtient cette succession d'affichage plutôt que le deuxième ou le troisième.
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>
|
Affichage réellement obtenu : 2 5 puis 200 500 puis 200 5.
Affichage imaginaire : 2 5 puis 200 500 puis 200 500.
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é 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. 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, on obtient alors 200 5.
Nous verrons l'importance des blocs lorsqu'on abordera les tests et les boucles, puisque nous aurons alors la possibilité de faire des blocs.
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 du input de Python.
✎ 15° 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.
Activité publiée le 13 11 2020
Dernière modification : 08 02 2022
Auteur : ows. h.
Modifié par : Andjekel