TP de NSI
Fiche : TP de NSI. Recherche parmi 298 000+ dissertationsPar Yeeshoe • 1 Mai 2021 • Fiche • 2 981 Mots (12 Pages) • 505 Vues
WEB / JavaScript / IHM
Pages dynamiques
1. Histoire
Le WWW (World Wide Web) ou Wst fait, historiquement, pour présenter des informations et les rendre accessibles au plus grand nombre.
Il n’y avait donc aucun intérêt à ce qu’il y ait une présentation très attirante.
Lors de l’arrivée d’entreprises commerciales et le développement de diverses activités, le besoin s’est rapidement fait sentir de disposer de plus que des pages statiques.
Il a fallu rendre les pages web dynamiques. Pour cela, deux types de programmation cohabitent :
Par programmation sur le serveur
Une première réponse a émergé en mosdifiant les pages envoyées par le serveur, mais la réactivité n’est pas au rendez-vous. On utilise cette solution pour obtenir des pages web graphiquement cohérentes et qui adaptent leur contenu en fonction des données présentes dans une base de données.
Cette dynamique est gérée par le serveur qui utilise un langage de programmation, en général le PHP.
Nous ne verrons pas ce type de dynamisation de pages web.
Par programmation sur le client
Une seconde réponse se base sur le client qui provoque la modification et effectue le traitement directement sur le poste de l’utilisateur.
Cette méthode permet d’être beaucoup plus réactif et « d’augmenter significativement l’expérience utilisateur ». En résumé, cela permet de retenir l’utilisateur.
Nous allons nous pencher sur ce type de programmation par évènement en utilisant le langage JavaScript.
2. Le JavaScript
JavaScript est un langage compris par le navigateur (aussi par le service HTTP(S) sur le serveur via l’extension NodeJS) qui permet d’avoir des interactions avec l’utilisateur.
Créez un répertoire nommé « TP_JScript » ou on enregistrera le fichier HTML suivant :
Pour cela, prendre NotePad++, Créer un nouvel onglet avec Langage : HTML. Puis copier/coller le texte ci-dessous sans les numérotations de ligne. Enregistrer sous index.html dans le répertoire créé.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Le trio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Le trio : HTML, CSS et JavaScript</h1>
<p>Voici une page web qui ne fait pas grand-chose</p>
<script src="script.js"></script>
</body>
</html>
On ouvre le fichier directement dans un navigateur CHROME. Y a-t-il des erreurs lors de l’affichage ?
Non.
Nous utilisons les outils de développement WEB du navigateur ([Ctrl]+[Maj]+[i] OU : ouvrir le menu→Plus d’outils→Outils de développement ). On passe sur l’onglet « Console ». Y a-t-il des erreurs ? Est-ce normal ? Comment peut-on les résoudre ?
Votre réponse :
Oui et elles sont normales car les fichiers CSS et Javascript cités dans le code HTML n’existent pas, il faut donc les créer.
Pour régler la première erreur dans le répertoire, on ajoute un fichier CSS avec en le nommant correctement. Vous pouvez réutiliser un fichier CSS que vous avez précédemment écrit.
Réactualiser la page WEB ([F5] ou [Ctrl]+[r] ou l’espèce de flèche en cercle).
Reste-t-il des erreur ? Lesquelles/laquelle ?
Votre réponse :
Oui pour le fichier JavaScript qui n’est toujours pas défini.
Ajout du fichier JavaScript
Pour régler, la dernière erreur on ajoute un fichier nommé « script.js » contenant :
alert("Le JavaScript fonctionne !")
Réactualiser la page WEB ([F5] ou [Ctrl]+[r] ou l’espèce de flèche en cercle).
Que se passe-t-il lors de la réactualisation de la page WEB ? Pouvez-vous relier ce que vous voyez à vos lignes de codes ?
Reste-t-il des erreurs ? Lesquelles/laquelle ?
Votre réponse :
Il n’y a plus d’erreurs.
Faire une synthèse de ce qui se passe pour parvenir à l’affichage de la fenêtre d’alerte en partant de la réactualisation
Quand on réactualise la page web on la réinitialise en quelque sorte et donc l’alerte apparaît comme si on venait d’ouvrir la page.
Bouton
On crée un répertoire nommé « TP_JS-Bouton_et_evenement » et on fait un copier-coller des 3 fichiers précédemment créés. On efface aussi la ligne de code dans le fichier « script.js ».
Dans le fichier « index.html », on ajoute les 2 lignes suivantes avant la ligne : <script>…</script>
<button onclick="maFonction()">Bouton 1</button>
<button id="bouton2">Bouton 2</button>
Réactualiser la page WEB. Y a-t-il des erreurs d’affichages ? Des erreurs dans la console ? Les 2 boutons provoquent-ils les mêmes erreurs ?
Il n’y a pas d’erreur d’affichage mais le bouton1 provoque une erreur pour “maFonction” qui n’est pas défini et le bouton2 ne fait pas d’erreur.
Que se passe-t-il si on clique sur le bouton « Bouton 1 » ?
Il ne se passe rien.
Évènement
Un « évènement » est une action de l’utilisateur.
La liste des évènements : https://developer.mozilla.org/fr/docs/Web/Events.
Chercher dans votre fichier « index.html », à quel événement un élément de la page WEB réagit ?
Il réagit à l’événement DOMActivate.
Il nous faut donc créer la fonction « maFonction » dans le fichier « script.js » pour que le bouton « Bouton 1 » fonctionne :
function maFonction() {
alert("Le bouton fonctionne !")
...