1 – HTML le langage des pages web
Le contenu géré par le HTML et celui géré par le CSS sont très différents ; en effet, le html gère la structure et le contenu tandis que le css s’occupe de la mise en forme.
HTML signfie 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 signifie Cascading Style Sheet (feuille de style)
On associe donc le langage CSS au HTML pour la mise en forme.
DOM signifie 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>.
Par exemple; l’activité 1 :
Les liens (à ouvrir dans firefox) : file:///U:/nsi/HTML/index.html ; file:///U:/nsi/HTML/HTML%20Pasquet%20Rapha%C3%ABlle/index2.html
2 – Javascript : un langage de programmation pour les pages web
Pour ajouter du code javascript dans une page html, il suffit d’écrire le code entre deux balises: <script>…..</script>
Par la suite on placera le code javascript dans un fichier séparé.
Activité 2 :
- (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)
Divers exemples Javascript : https://www.w3schools.com/js/js_htmldom_elements.asp
Souvent avec JavaScript, l’on souhaite manipuler des éléments HTML.
Pour ce faire, il faut tout d’abord trouver les éléments HTML ; il existe diverses façons de le faire :
- par id
- par le nom de la balise
- par le nom de la catégorie
- par les « sélectionneurs CSS »
- par les « collections d’objets HTML »
Finding HTML Elements
| Method | Description |
|---|---|
| document.getElementById(id) | Find an element by element id |
| document.getElementsByTagName(name) | Find elements by tag name |
| document.getElementsByClassName(name) | Find elements by class name |
Changing HTML Elements
| Property | Description |
|---|---|
| element.innerHTML = new html content | Change the inner HTML of an element |
| element.attribute = new value | Change the attribute value of an HTML element |
| element.style.property = new style | Change the style of an HTML element |
| Method | Description |
| element.setAttribute(attribute, value) | Change the attribute value of an HTML element |
Adding and Deleting Elements
| Method | Description |
|---|---|
| document.createElement(element) | Create an HTML element |
| document.removeChild(element) | Remove an HTML element |
| document.appendChild(element) | Add an HTML element |
| document.replaceChild(new, old) | Replace an HTML element |
| document.write(text) | Write into the HTML output stream |
Adding Events Handlers
| Method | Description |
|---|---|
| document.getElementById(id).onclick = function(){code} | Adding event handler code to an onclick event |
Finding HTML Objects
The first HTML DOM Level 1 (1998), defined 11 HTML objects, object collections, and properties. These are still valid in HTML5.
Later, in HTML DOM Level 3, more objects, collections, and properties were added.
| Property | Description | DOM |
|---|---|---|
| document.anchors | Returns all <a> elements that have a name attribute | 1 |
| document.applets | Deprecated | 1 |
| document.baseURI | Returns the absolute base URI of the document | 3 |
| document.body | Returns the <body> element | 1 |
| document.cookie | Returns the document’s cookie | 1 |
| document.doctype | Returns the document’s doctype | 3 |
| document.documentElement | Returns the <html> element | 3 |
| document.documentMode | Returns the mode used by the browser | 3 |
| document.documentURI | Returns the URI of the document | 3 |
| document.domain | Returns the domain name of the document server | 1 |
| document.domConfig | Obsolete. | 3 |
| document.embeds | Returns all <embed> elements | 3 |
| document.forms | Returns all <form> elements | 1 |
| document.head | Returns the <head> element | 3 |
| document.images | Returns all <img> elements | 1 |
| document.implementation | Returns the DOM implementation | 3 |
| document.inputEncoding | Returns the document’s encoding (character set) | 3 |
| document.lastModified | Returns the date and time the document was updated | 3 |
| document.links | Returns all <area> and <a> elements that have a href attribute | 1 |
| document.readyState | Returns the (loading) status of the document | 3 |
| document.referrer | Returns the URI of the referrer (the linking document) | 1 |
| document.scripts | Returns all <script> elements | 3 |
| document.strictErrorChecking | Returns if error checking is enforced | 3 |
| document.title | Returns the <title> element | 1 |
| document.URL | Returns the complete URL of the document | 1 |
C’est le DOM qui permet au script d’examiner et de modifier le contenu affiché par le navigateur web.
Voici une représentation du DOM de la page de l’activité 2 :
JavaScript a été créé en 1995 par l’Américain Brendan Eich. Aujourd’hui, presque toutes les pages Web contiennent du code JavaScript. En effet, ce langage de programmation est associé au langage HTML.
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
Références pour s’aider : https://www.w3schools.com/js/default.asp
3- A – Gestion d’un clic de souris
Activité 3 : un bouton pour réagir :
<!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>
Le rendu :
La partie en Javascript permet une interaction avec la page, comme ici avec le pseudo.
Les variables :
Il existe 3 façons différentes pour déclarer une variable JavaScript :
- en utilisant « var »
- en utilisant « let »
- en utilisant « const »
Les variables permettent de stocker des valeurs, par exemple :
Modification du programme :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tjs004</title>
</head>
<body>
<p>Cliquez sur le bouton pour enregistrer votre pseudo</p>
<button onmouseover="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>
« Onclick » a été remplacé par « onmouseover », ce qui affiche cela :
seulement en survolant « 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.
D’autres exemples sur la gestion des éléments : https://www.w3schools.com/js/js_events.asp
Common HTML Events
Here is a list of some common HTML events:
| Event | Description |
|---|---|
| onchange | An HTML element has been changed |
| onclick | The user clicks an HTML element |
| onmouseover | The user moves the mouse over an HTML element |
| onmouseout | The user moves the mouse away from an HTML element |
| onkeydown | The user pushes a keyboard key |
| onload | The browser has finished loading the page |
3-B – clic ,entrée clavier , tests, calculs…
Activité 4 : Tirage aléatoire
<!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>
Le rendu :
Pour définir « myFunction » et « reponse » :
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;
4 – Projets
4-1)Projet 1
Problème 1 : réaliser un convertisseur de monnaies en ligne
- monnaie 1 à convertir en monnaie 2
- somme disponible (monnaie 1)
- cours du jours de la monnaie 2
- Afficher la somme convertie
Pour s’aider : https://www.w3schools.com/js/default.asp
<html lang="fr">
<head>
<title>Euros</title>
<meta charset="UTF-8"/>
<link rel="icon" type="image/png" href="monnaie.png" />
<script>
function affiche(){
var devise=prompt('votre monnaie?');
var newDevise=prompt('nouvelle monnaie?');
var coef=parseFloat(prompt('combien vaut 1 '+devise+ ' en '+newDevise ));
var somme=parseFloat(prompt('votre somme en '+ devise));
var monnaie=coef*somme;
var resultat=somme.toFixed(2)+" "+devise+" valent "+monnaie.toFixed(2)+" "+ newDevise
alert(resultat);
document.getElementById("test").innerHTML ="<b>"+resultat+"</b>";
}
</script>
</head>
<body bgcolor="white">
<h1>Convertisseur</h1>
<img src="devise.png" alt="image" style="width:200px"><br>
<a href="https://www.boursorama.com/bourse/devises" target="_blank">Cours des devises</a><br><br>
<button onclick="affiche()">Cliquez</button>
<h2 id="test"></h2>
</body>
</html>
4-2 – Projet 2
Problème 2 : plafond nuageux
Calculer et afficher en ligne la hauteur du plafond nuageux à partir de la température et du taux d’humidité.
2 réponses
#couleurs
baen