Skip to content

Intérêt et syntaxe du Javascript

Objectifs

Objectifs

Ce cours aborde :

  • les notions essentielles du langage JavaScript ;
  • l'interaction entre JavaScript et une page HTML/CSS ;
  • les actions déclenchées à l'aide de JavaScript lors d'un évènement sur la page HTML / CSS ;
  • les formulaires dans une page HTML.

A l'issue de ce cours / activité, vous serez en mesure de lire un script JavaScript et de légèrement le modifier afin de l'adapter à un cahier des charges donné.

Limitation

Comme l'impose le programme de NSI, on ne cherche clairement pas ici à aborder tous les aspects du langage JavaScript.

On s'intéressera principalement dans ce cours aux aspects dynamiques qu'offre le langage JavaScript aux interfaces homme / machine sur le web.

Consignes

Consigne à suivre

jsfiddle.net : pour un travail en ligne sur des petits projets

Pour un travail en ligne, sur des petits projets, vous pouvez utiliser le site jsfiddle.net en cliquant ici pour tester vos codes HTML/CSS/Javascript.

Regardez la vidéo explicative associée en cliquant ici.

Pensez à sauvegarder régulièrement le projet en cliquant sur le bouton Save. La première fois que vous le faîtes, vous obtenez alors une nouvelle adresse URL avec un code.

Pour chaque question :

  • ajoutez cette adresse à votre compte-rendu et assurez-vous qu’elle fonctionne avant de poursuivre ;
  • ajoutez aussi une capture d'écran du fiddle dans votre compte-rendu pour plus de sécurité.

Pour chaque nouvelle question, créez un nouveau fiddle, sauvegardez-le et référencez-le dans votre compte-rendu.

replit.com : pour un travail en ligne sur des projets plus ambitieux

Pour un travail en ligne, sur des projets comportant plusieurs fichiers, vous pouvez utiliser replit.com en cliquant ici pour tester vos codes HTML/CSS/Javascript.

Pour utiliser replit.com, vous devez créer un compte et créer un projet HTML/CSS pour chaque question :

Pour chaque question :

  • ajoutez l'adresse URL du projet à votre compte-rendu et assurez-vous qu’elle fonctionne avant de poursuivre ;
  • ajoutez aussi une capture d'écran de la page replit.com dans votre compte-rendu pour plus de sécurité.

Pour chaque nouvelle question, créez un nouveau projet.

VSCodium : pour un travail en local sur des projets plus ambitieux

Pour un travail en local, sur des projets comportant plusieurs fichiers, vous pouvez utiliser l'IDE VSCodium en enregistrant un répertoire par projet contenant les fichiers HTML/CSS/Javascript du projet.

Regardez la vidéo explicative associée en cliquant ici.

Si besoin, pour chez vous, VSCodium est téléchargeable ici.

Intérêt du langage JavaScript

Définition

JavaScript est un langage de programmation, créé en 1995, principalement employé côté client dans les pages web.

En effet, une fois les codes HTML/CSS/JavaScript reçus via le réseau, le code JavaScript est interprété par le moteur JavaScript du navigateur web présent sur l'ordinateur client.

Le JavaScript permet de mettre dynamiquement à jour le contenu ou l'aspect d'une page web en interagissant avec les langages HTML et CSS.

JavaScript est le langage informatique très populaire depuis quelques années avec l’essor du web.

En 2020, presque tous les éléments dynamiques d’une page web moderne sont programmés en JavaScript.

Remarque

JavaScript est un langage de programmation à part entière.

Javascript est, par exemple, employé côté serveur grace à l'utilisation de la plateforme de développement Node.js.

JavaScript va permettre ici de :

  • définir / modifier dynamiquement le contenu sur le fond (HTML) et sur la forme (CSS) d'une page web;
  • définir les interactions que l'utilisateur peut avoir avec la page web via la gestion d'événements.

JavaScript constitue en quelque sorte la "troisième couche" des langages du web après l'HTML et le CSS.

Application

Exercice 1 (premier essai)

  • Tester le code ci-dessous.
  • Identifier le script Javascript.
  • Modifier le texte à afficher lors d'un clic sur le bouton.
  • Indiquer comment le script Javascript identifie l’élément html à modifier ?
  • Modifier le script Javascript pour changer le titre.
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8"/>
        <title>Premier essai avec Javascript</title>
    </head>
    <body>
        <h1>Mon premier script JavaScript</h1>

        <button type="button" onclick="document.getElementById('demo').innerHTML = 'Bonjour le monde !'">
        Clique sur moi !
        </button>

        <p id="demo"></p>
    </body>
</html>

Syntaxe du langage JavaScript

Définition

Le langage JavaScript a une syntaxe proche des langages Java, C, C++.

JavaScript est sensible à la casse (minuscule ou majuscule) et utilise l’ensemble de caractères Unicode.

Le langage JavaScript ressemble par certains aspects au langage Python que vous connaissez déjà, par exemple :

  • certains mots-clés sont identiques : if, for, while, ... ;
  • comme en Python, il est possible de définir des fonctions ;
  • etc...

Mais, il existe cependant des différences notables avec le langage Python, car en JavaScript :

  • les blocs d'instructions ne sont pas délimités par l'indentation, mais par des accolades { } (les indentations ne sont pas significatives en JavaScript) :
{
    instruction_1;
    instruction_2;
    ...
}
  • la fin d’une instruction est signifiée par un point-virgule ;
  • Les noms des variables sont appelés identifiants et doivent commencer par une lettre, un tiret du bas ou un symbole dollar ($).
  • les commentaires sont placés après // ou entre /* et */.
  • en JavaScript, toute variable doit être préalablement déclarée, avant de pouvoir être manipulée, notamment à l'aide du mot clé let (la portée de la variable est alors limitée au bloc courant).

Déclaration

Attention, la déclaration ne doit être effectuée qu'une seule fois.

Typage des variables

Définition

JavaScript est un langage à typage dynamique.

Cela signifie qu’il n’est pas nécessaire de spécifier le type de données d’une variable lors de sa déclaration.

C’est lors de l’affectation que JavaScript type la donnée :

1
2
3
let une_variable = 42; // une_variable est un entier

une_variable = "Vive la NSI !!"; // une_variable est une chaîne de caractères

Les types sont convertis automatiquement durant l'exécution du script JavaScript.

Lorsque des expressions impliquent des chaînes de caractères et des valeurs numériques ainsi que l'opérateur +, JavaScript convertit les nombres en chaînes de caractères :

1
2
3
let x = "La réponse est " + 42;     // "La réponse est 42"

let y = 42 + " est la réponse";     // "42 est la réponse"

Avec des instructions impliquant d'autres opérateurs, JavaScript ne convertit pas nécessairement les valeurs numériques en chaînes de caractères.

1
2
3
let x = "37" - 7;    // 30

let y = "37" + 7;    // "377"

Application

Exercice 2

Saisir et évaluer les expressions suivantes :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
let une_variable = 60;
console.log(une_variable);

une_variable = "Maintenant c'est du texte...";
console.log(une_variable);

let une_chaine = "Des chiffres et des lettres : " + 12;
console.log(une_chaine);

une_chaine = 12 + " :  Des chiffres et des lettres";
console.log(une_chaine);

let s = "37" - 7;
console.log(s);

s = "37" + 7;
console.log(s);

Déclaration de fonction

Définition

En Javascript, une définition de fonction est construite à l'aide du mot-clé function, suivi par :

  • Le nom de la fonction ;
  • Une liste d’arguments à passer à la fonction, entre parenthèses et séparés par des virgules ;
  • Les instructions JavaScript définissant la fonction, entre accolades { }.
1
2
3
4
5
function carre(nombre) {
    return nombre**2;
}

console.log(carre(2));

Application

Exercice 3

Tester le script suivant :

1
2
3
4
5
function carre(nombre) {
    return nombre**2;
}

console.log(carre(2));

Syntaxe Python vs Javascript

Définition

Voici une succincte comparaison des syntaxes entre Python et Javascript :

Instruction Python Javascript
Commentaires # ... // ...
Créer une variable b = 84 let b = 84;
Fin d'instruction Retour à la ligne Point virgule ; et retour à la ligne
Délimitation d'un bloc d'instruction Indentation significative {...}
Définition d'une fonction def f(x): ... function f(x) {...}
Condition if condition: ... if (condition) {...}
Boucle bornée for i in range(10): ... for (let i=0; i<10; i++) {...}
Boucle non bornée while condition: ... while (condition) {...}
Renvoi d'une valeur depuis une fonction return return
Appel d'une fonction avec deux arguments f(30,25) f(30,25)
Affichage dans la console print(..., ...) console.log( expr1, expr2 );
Saisie dans la console a = input("...") let a = prompt("...");

Application

Exercice 4

Soit le programme Python suivant :

1
2
3
4
5
6
7
def calculer_imc(taille, masse):
    return masse / (taille**2)

taille_robert = 1.8
masse_robert = int(input("Entrer votre masse en kg : "))
imc_robert = calculer_imc(taille_robert, masse_robert)
print(imc_robert)

Traduire le programme Python en langage Javascript.

Tester le bon fonctionnement de votre script Javascript.

Exercice 5

Soit le programme Python suivant :

1
2
3
4
5
6
7
8
capital = 0
nombre_mois = 0

while capital < 1000:
    capital = capital + 100
    nombre_mois = nombre_mois + 1

print("Il m'a fallu", nombre_mois, "mois pour accumuler 1000€")

Traduire le programme Python en langage Javascript.

Tester le bon fonctionnement de votre script Javascript.

Exercice 6

Soit le programme Python suivant :

1
2
for i in range(8):
    print(3, "*", i, "=", 3 * i)

Traduire le programme Python en langage Javascript.

Tester le bon fonctionnement de votre script Javascript.