1)HTML le langage des pages web
L’activité précédente nous a montré la séparation entre le contenu qui est géré par le code HTML et le style par le code CSS.

HTML : HyperText MarkupLangage
Une page web est un type de document. HTML est un langage de description des pages web basé sur des balises destinées au navigateur.
CSS : Cascading Style Sheet (feuille de style)
Au langage HTML on associe le langage CSS pour la mise en forme.
DOM : Document Object Model ou DOM
Le DOM est un arbre créé par le navigateur pour représenter la page.La racine de l’arbre est <html>
2)Javascript : un langage de programmation pour les pages web

- Tapez le code ci-dessous dans un éditeur de texte comme notepad++
- Enregistrer le fichier au format html
- Examiner le fichier (clic droit) avec un navigateur
<html> <head> <meta charset="UTF-8"> <title>tjs003</title> </head> <body> <h3 id="date"></h3> <h4 id="TITRE" ></h4> <p id="texte"></p> </body> <script > var jour = new Date(); document.getElementById("date").innerHTML = jour; document.getElementById("TITRE").innerHTML="BONJOUR !"; document.getElementById("texte").style.color = "#FF00AF"; document.getElementById("texte").innerHTML="Hello World !"; </script> </html>
.
Vous pouvez ouvrir et examiner le code de la même page web qui se trouve sur un serveur distant:
Cliquez ici pour ouvrir la page distantepour tester des exemples en ligne:
https://www.w3schools.com/js/js_htmldom_elements.asp
Si vous souhaitez aller plus loin :cliquez ici
Dans cette seconde activité nous avons vu comment manipuler un document hml en javascript grâce à des identifiants attribués aux balises.La méthode JavaScript getElementById() nous a permis de récupérer les informations d’une balise identifiée par son id pour effectuer des modifications.
C’est le DOM qui permet au script d’examiner et de modifier le contenu affiché par le navigateur web.
Vous avez ci-dessous une représentation du DOM de la page de l’activité 2.



En 1995 Brendan Eich crée le langage javascript. Aujourd’hui, presque toutes les pages Web contiennent du code JavaScript. JavaScript est un langage de programmation associé au langage HTML.
Le développeur internet code ses pages HTML en y intégrant des sources JavaScript. Le visiteur, par l’intermédiaire de son navigateur, charge le code des pages.
C’est le navigateur (coté client) qui interprète les codes HTML et JavaScript.
JavaScript est un langage objet et événementiel. Le développeur peut créer des objets sur la page, avec des propriétés et des méthodes et leur associer des actions en fonction d’événements déclenchés par le visiteur (passage de souris, clic, saisie clavier, etc…)
3)Exemples d’interactions avec l’utilisateur
Dans ce qui suit nous allons simplement survoler ce langage.
Pour vous aider dans vos projets vous pourrez trouver toutes les références dont vous avez besoin sur w3school : cliquer ici
3-1)Gestion d’un clic de souris

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>tjs004</title> </head> <body> <p>Cliquez sur le bouton pour enregistrer votre pseudo</p> <button onclick="myFunction()">Cliquez</button> <p id="test"></p> <script> function myFunction() { var nom = prompt("Entrez votre nom","pseudo"); document.getElementById("test").innerHTML = "Bonjour " + nom; } </script> </body> </html>
variables : https://www.w3schools.com/js/js_variables.asp
boutons :https://www.w3schools.com/tags/tag_button.asp
prompt() : https://www.w3schools.com/jsref/met_win_prompt.asp
Comprendre puis modifier le programme en modifiant l’événement déclencheur de l’interaction avec l’utilisateur. Vous trouverez d’autres événements HTML ici
Le même programme se trouve sur un serveur web distant : Cliquez ici


L’utilisateur déclenche un événement (en cliquant sur le bouton par exemple). Cet événement entraîne l’exécution d’un code JavaScript sur la machine de l’utilisateur.
Les événements sont donc des actions de l’utilisateur qui permettent d’ajouter de l’interactivité à une page web.
Tester en ligne d’autres exemples sur la gestion des événements :
3-2)clic ,entrée clavier , tests,calculs…
Activité 4 : Tirage aléatoireAprès avoir analysé les scripts ci-dessous , expliquer sur feuille le fonctionnement du jeu. Le même programme se trouve sur un serveur web distant : Cliquez ici
<!DOCTYPE html> <html> <head> <link rel="icon" href="alea.ico" /> <title>Alea</title> <meta charset="UTF-8" /> <script src="alea.js"></script> <body> <h2>tirage aléatoire</h2> <p>Saisir un nombre entre 1 et 10:</p> <input id="nombre"> <button type="button" onclick="myFunction()">Envoyer</button> <h3 id="reponse"></h3> </body> </html>

function myFunction() { var x, y, text; x = document.getElementById("nombre").value; y = getRandomInt(1, 10) if (isNaN(x) || x < 1 || x > 9) { text = "Non autorisé"; } else { if (x == y) { text = "gagné bravo !"; } else { text = "perdu ! la bonne réponse était " + y.toString(); } } document.getElementById("reponse").innerHTML = text; } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min;Quelques liens vers W3scools Math : cliquer Conditions : cliquer

4) projets Reprise de l’activité de découverte : vidéo de 10 minutes
4-1)Projet 1

- monnaie 1 à convertir en monnaie 2
- somme disponible (monnaie 1)
- cours du jours de la monnaie 2
- Afficher la somme convertie
corrigé : convertisseur de monnaie
4-2)Projet 2

Calculer et afficher en ligne la hauteur du plafond nuageux à partir de la température et du taux d’humidité.
Trois ressources pour vous aider :
base d’un nuage
point de rosée
math-javascript