Résumé 1 - RAJOUTER DU JAVASCRIPT

⏬

Lien vers l'activité : Rajouter du javascript

Dernière modif. : 25 01 2021

1 - Intégration du javascript

1.1 - Intégré à HTML ou fichier à part ?

Méthode 1 (à éviter sauf essai) : on le place dans une balise HTML <script> :

1 2 3
<script> alert("Hello World !"); </script>
Méthode 2 (à privilégier) : on le place dans un fichier .js indépendant et on indique son existence au navigateur via une balise <script>.

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

1.2 - Événement onload

Le navigateur Web applique le code lu dans le fichier HTML de façon séquentielle : dès qu'il tombe sur la balise script, il lance donc la requête pour récupérer et exécuter le fichier javascript. Il faut donc :

soit placer un événement "attente du téléchargement complet" si on utilise script dans la balise head

function demarrage() {
    alert("Hello World !");
}
 
window.addEventListener("load",demarrage);

L5 : surveillance d'événement avec addEventListener : lorsque la page est chargée, cela lance automatiquement la fonction demarrage.

L2 : alert permet de lancer une fenêtre pop-up.

soit placer la balise script juste avant la balise de fermeture de body.

1.3 - Différence Python et Javascript

Chaque instruction finit nécessairement par un point-virgule (ligne 2 et ligne 5)
On déclare les fonctions avec le mot-clé function
La tabulation n'a aucun sens de structuration réelle de blocs.
C'est l'accolade d'ouverte { et l'accolade de fermeture } qui construit les blocs.
Les commentaires sur une ligne se font avec //
Les commentaires multilignes se font avec /* et */

2 - Variables avec javascript

2.1 - Déclaration de variables locales avec var et let

En Javascript, les variables sont globales en lecture et en écriture par défaut !
Seule exception : les paramètres des fonctions, qui sont de base des variables locales.
Préfixer la première affectation d'une variable par var la rend locale à la fonction en cours
Préfixer la première affectation d'une variable par let la rend locale au bloc { } en cours.

function calcul(a, b) {
    var reponse = a + b;
    return reponse
}
 
function demarrage() {
    var rep = calcul(6,4);
    alert(rep);
}
 
window.addEventListener("load",demarrage);

2.2 Typage des variables

Javascript possède moins de types natifs de variables que Python

number (qui regroupe dans les integers et les floats) ,
boolean,
string et
undefined (qu'on peut voir comme une sorte de None).

function calcul(a, b) {
    /* Fonction qui renvoie l'addition des arguments a et b */
    var reponse = a + b;
    return reponse
}
 
function demarrage() {
    var rep = calcul(2,"5");
    alert(rep);
}
 
window.addEventListener("load",demarrage);

2.3 - Tenter de convertir

parseInt("2") va ainsi renvoyer 2.

parseFloat("2.5") va ainsi renvoyer 2.5.

3 - Debug

On peut afficher des choses dans la console (cachée) (Développement Web - Console Web dans Firefox) du navigateur. Cela permet de voir le contenu des variables ... Bref, de faire le debug.

On pourra alors y afficher des choses en utilisant la méthode

log sur l'objet console :console.log(rep);

On peut également utiliser Réseau pour observer l'ordre des téléchargements.

⏫