Aller au contenu

Cours⚓︎

Cours tiré très largement du manuel NSI 1re Spécialité - Ed. 2021 Hachette et de https://frederic-junier.gitlab.io/parc-nsi

1. Introduction⚓︎

Dans le chapitre précédent, on a présenté des exemples de pages Web dynamiques générées par des programmes en PHP, Python ou Node.js. Chaque mise à jour de la page nécessite donc un nouveau cycle requête/réponse entre le client et le serveur. C’est indispensable s’il s’agit de modifier l’état d’une ressource côté serveur (une base de données par exemple), mais les changements peuvent n’être que temporaires et n’affecter que des éléments de la page côté client.

Javascript est un langage interprété qui répond à ce besoin qui s’exécute dans le navigateur du client. Javascript s’est imposé depuis son apparition en 1995 dans le navigateur Netscape comme le principal langage de développement Web en frontend (côté client) et depuis une dizaine d’années, sa variante Node.js concurence les langages de développement backend (côté serveur) comme PHP ou Python.

Une page Web moderne, reçue par un client, comporte au moins trois composants logiciels :

  • HTML pour la structure du document.
  • CSS pour le paramétrage de l’apparence des éléments et leur positionnement.
  • Javascript pour la définition de programmes qui vont réagir à des événements déclenchés par l’utilisateur de la page et modifier la structure de données de la page ( éléments HTML et styles CSS) à travers le DOM. Le DOM est une représentation de l’ensemble de la structure de la page Web sous la forme d’un arbre : les noeuds sont les éléments HTML et ils ont une liste de propriétés : contenu, style, événements associés . . .

2. Elements de syntaxe⚓︎

Programme NSI

Il ne s'agit pas de connaitre cette syntaxe (Hors programme) mais de pouvoir modifier du code existant.

types

Types Exemples
Nombres entiers (123) ou réels (123.67)
Chaines 'texte' ou "texte"
Booléens true ou false
Tableaux t = [1, 6, 7] ; t[1] ; t.length

instructions

Instructions Exemples
Déclaration let var
Affectation var = expression
Conditionnelle if (expression) { instructions } ou
if (expr) { instr } else { instr }
Boucle bornée for (i = 0; i < n; i+=1) { instructions }
Boucle non bornée while (expression) { instructions }
Fonction function f(parametres) { instructions }
Valeur de retour return expression
Commentaires // commentaire

Python vs Javascript

Comparé à Python, une différence importante est que les blocs d’instructions ne sont pas délimités par l’indentation, mais par des accolades.

Opérateur booléen et de comparaison (différents de python)

Opérateur Syntaxe
et &&
ou ||
égalité == ou === (plus strict)
inégalité !=

3. Utilisation⚓︎

On peut écrire du code JavaScript:

  • dans les balises html directement : 
    <p onclick="alert('Salut')">Bonjour</p>
  • directement dans une page Web à l’intérieur d’un élément <script>, en général à l’intérieur de l’élément <head>.

  • dans du code JavaScript stocké séparément, en indiquant son URL avec l’attribut src de l’élément <script>: 

    <script src="moncode.js" defer></script>

    defer

    L'attribut src donne le chemin vers le fichier contenant le code Javascript et l'attribut defer précise que le chargement du Javascript doit se faire après que la page HTML soit totalement chargée. En effet, Javascript peut modifier la page à travers l'interface DOM, donc il faut ordonnancer le chargement des différentes ressources.

3.1 Modifier une page Web⚓︎

Le langage HTML permet de représenter le contenu d’une page Web sous forme textuelle.Lorsque le navigateur chargeune page HTML, il construit une représentation de la page avec un type construit complexe appelé DOM («Document Object Model»). Pour modifier le contenu de la page Web, on modifie le DOM grâce à un ensemble de fonctions JavaScript et le navigateur met à jour l’affichage de la page.

Tout élément HTML peut avoir un identifiant unique, que l’on spécifie grâce à l’attribut id. La fonction JavaScript document.querySelector permet de trouver un élément à partir d'une balise, d'une classe ou d'un identifiant (comme du CSS le ferait):

Code HTML Code JavaScript
`

...