Aller au contenu

TP⚓︎

Réaliser un compte rendu de ce TP en html/css.

Un point de cours⚓︎

Dans le chapitre précédent, on a présenté des exemples de pages Web dynamiques générées par des programmes en Python (ils pourraient l'être par PHP 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 . . . L’inspecteur des outils de développement, accessibles avec la touche F12 dans un navigateur, permet de visualiser et modifier les propriétés des éléments du DOM.

L’environnement d’exécution d’un code Javascript est confiné à l’onglet de la page Web où il est chargé. Pour des raisons de sécurité il ne doit pas interagir avec d’autres pages ou des ressources du poste client. Par ailleurs, si on recharge la page auprès du serveur, l’environnement Javascript est réinitialisé et les modifications de la page effectuées par un code Javascript ne sont pas répercutées sur la page source disponible sur le serveur.

“Javascript et DOM”

Premiers pas⚓︎

Ouvrir un nouvel onglet dans un navigateur Web.

  1. Ouvrir la console Javascript dans la fenêtre des outils de développement avec F12 ou CTRL + SHIFT + K sous Firefox. On va exécuter de façon interactive, une séquence d'instructions Javascript pour présenter quelques constructions élémentaires et propriétés du langage. Chaque instruction pourra modifier l'état du DOM et donc le rendu graphique de la page Web.

  2. On commence par quelques manipulations de variables et calculs. Taper ces instructions dans la console et taper sur entrer après chaque instruction.

> let a = 1
> (a * 3 + 1) ** 2 / 5 - 1
> (a * 3 + 1) ** 2 // commentaire !
> let b = "Hello"
> b + " World"
> typeof(a)
> typeof(b)
> a = b + a
> typeof(a)
> 5 == 3 + 2
> true && false
> true || false
> !true
> 1 == '1'
> 1 === '1'
  1. Examinons un exemple avec une fonction, une structure conditionnelle et une boucle. Dans la console, saisir le code ci-dessous, taper sur entrer. Observer et expliquer le fonctionnement du code.

function valabs(x){
  if (x < 0){
    return -x;
  }
  else {
    return x;
  }
}

for (let i = -4; i < 5; i = i + 1){
  if (valabs(i) > 2){
    alert(i);
  }
  else {
    console.log(i);
  }
}
4. Recopier les propositions vraies : en Javascript,

  • les blocs d'instructions sont délimités par (l'indentation OU des accolades)
  • les fonctions sont déclarées avec le mot clef (def OU function)
  • une boucle inconditionnelle sur les entiers entre 1 et 10 commence par l'instruction ( for k in range(1, 11) OU for (let k = 1; k < 11; k = k + 1) )
  1. Recopier la proposition vraie : la fonction alert affiche son paramètre dans (une fenêtre pop-up OU la console) tandis que la fonction console.log affiche son paramètre dans (une fenêtre pop-up OU la console).

Jouer avec le DOM⚓︎

Javascript dispose de toutes les constructions permettant de progammer les mêmes algorithmes qu'en Python, mais s'il a été inventé par les développeurs de Netscape c'est pour manipuler les éléments HTML, à travers l'interface du DOM. Il existe plusieurs façons de capturer un élément HTML, la plus simple s'il s'agit d'un élément particulier est l'accès par son identifiant unique id (à condition qu'il soit défini).

  1. Copier coller le code HTML suivant dans un nouveau fichier, l'ouvrir dans un navigateur pour observer le rendu et utiliser le bouton. Lire et comprendre le code :
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>NSI au lycée Rosa Parks</title>
  </head>
  <body>
    <h1>Première séance sur le HTML </h1><em id="nuitInfo"></em>
    <p>C'est <strong>génial</strong> le HTML</p>
    <p>ceci est un <a href="aide.html">lien</a> vers une aide sur le langage HTML</p>
    <div>
      <button type="button" id="night" name="button">Mode Nuit</button>
    </div>
    <script type="text/javascript">
      let bouton = document.querySelector('#night');
      let infoModeNuit = document.querySelector('#nuitInfo');
      bouton.addEventListener("click", changeModeNuit);
      function changeModeNuit() {
        modeNuit();
      }
      function modeNuit() {
        document.body.style.backgroundColor = 'black';
        document.body.style.color = 'white';
        infoModeNuit.innerHTML = 'en mode nuit';
      }
    </script>
  </body>
</html>
  1. Modifier le code pour créer un deuxième bouton permettant de revenir en mode jour.
  2. Créer un autre version de ce même fichier permettant, à l'aide d'un seul bouton de basculer d'un mode à l'autre.

Un peu plus loin⚓︎

Réaliser le TP suivant: https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps/A_first_splash