Interactions entre l'homme et la machine sur le Web javascript
Cours : Interactions entre l'homme et la machine sur le Web javascript. Recherche parmi 300 000+ dissertationsPar lea_lamorere • 31 Janvier 2023 • Cours • 2 022 Mots (9 Pages) • 285 Vues
NSI 1ere | 4. Interactions entre l'homme et la machine sur le Web javascript |
Capacité attendue :
• Identifier les différents composants graphiques permettant d’interagir avec une application Web.
• Identifier les événements que les fonctions associées aux différents composants graphiques sont capables de traiter.
• Analyser et modifier les méthodes exécutées lors d’un clic sur un bouton d’une page Web.
- Les événements et le Javascript
De nombreuses pages Web proposent de l’interactivité avec, par exemple, des modifications déclenchées par un clic sur un bouton, le survol d’une image, l’appui sur une touche du clavier… On parle d’action déclenchante.
Ces modifications sont pilotées par l’exécution d’un code qui va pouvoir, par exemple, afficher ou cacher du texte, changer la taille ou la couleur d’un texte, afficher ou cacher une image, effectuer un calcul…
Dans une page Web, un événement est une action déclenchante qui se produit et à laquelle la page répond en exécutant un code. |
Nous allons utiliser le langage Javascript pour exploiter ces événements et piloter les actions à effectuer.
Le langage JavaScript est le principal langage utilisé pour la programmation dans les pages Web. |
Repère historique
Le langage JavaScript est un langage de programmation de scripts devenu incontournable dans le développement Web. Il a été créé par Brendan Eich (informaticien américain) en 1995. Malgré son nom, JavaScript n'a rien à voir avec le langage Java.
Voici une liste d’événements parmi les plus courants
Évènement | Action pour le déclencher |
click | Cliquer (appuyer puis relâcher) sur l'élément |
dblclick | Double-cliquer sur l'élément |
mouseover | Faire entrer le curseur sur l'élément |
mouseout | Faire sortir le curseur de l'élément |
mousedown | Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément |
mouseup | Relâcher le bouton gauche de la souris sur l'élément |
mousemove | Faire déplacer le curseur sur l'élément |
keydown | Appuyer (sans relâcher) sur une touche de clavier sur l'élément |
keyup | Relâcher une touche de clavier sur l'élément |
keypress | Frapper (appuyer puis relâcher) une touche de clavier sur l'élément |
focus | « Cibler » l'élément |
blur | Annuler le « ciblage » de l'élément |
change | Changer la valeur d'un élément spécifique aux formulaires (input,checkbox, etc.) |
input | Taper un caractère dans un champ de texte |
select | Sélectionner le contenu d'un champ de texte (input,textarea, etc.) |
submit | Envoyer le formulaire |
reset | Réinitialiser le formulaire |
- La détection de l’événement s’obtient en faisant précéder le nom de l’événement de « on » (par exemple pour détecter un clic il faut utiliser « onclick »).
- Certains de ces événements seront aussi dans la suite (interaction client-serveur).
- Modification d’un texte
Exercice 1
Télécharger le fichier « 4-2-exercices.zip » et le décompresser dans votre dossier personnel.
- Dans un navigateur Internet, ouvrir la page « exercice1.html » contenue dans le dossier « exercice1 ».
Observer et décrire le fonctionnement.
Cliquer sur le bouton « rouge et petit » rend le texte d’en dessous rouge et petit et cliquer sur le bouton « vert et grand » rend le texte d’en dessous vert et grand.
- Avec un éditeur, afficher le code de la page « exercice1.html ».
Repérer dans ce code les noms des fichiers correspondants au css et au javascript liés à cette page.
Le fichier correspondant au css est : « style1.css » ligne 6 et celui correspondant au javascript est « : « script1.js » ligne 7.
- Décrire l’enchaînement des actions qui se produisent au clic sur le bouton « Rouge et petit ».
Au clic du bouton « Rouge & petit », le script fait appel à la fonction : « foncRouge ()».
- Apporter les modifications nécessaires pour ajouter un bouton « normal » et que l’action sur ce bouton produise un affichage du texte en noir et d’une taille égale à celle par défaut (le mot clé correspondant est « medium »).
[pic 1]
[pic 2]
- Avec les outils du navigateur, observer le code de la page. Est-il modifié lors de l’exécution d’un code JavaScript ? En déduire si ce type de code s’exécute sur le serveur ou sur la machine cliente. (à retenir)
Le code n’est pas modifié. Ce type de code s’exécute donc sur la machine cliente. |
- Apporter les modifications nécessaires pour ajouter un bouton « Fond gris » et que l’action sur ce bouton produise passage du fond en gris clair.
Pistes : - rechercher le codage en CSS de la couleur « gris clair »
- le script doit faire appel à « document.body.style.backgroundColor »
[pic 3]
- Modification d’une image
Exercice 2
- Dans un navigateur Internet, ouvrir la page « exercice2.html » contenue dans le dossier « exercice2 ».
Observer et décrire le fonctionnement.
Quand on survole l’image, elle change passant de fond bleu écriture rouge à fond jaune écriture violette.
- Avec un éditeur, afficher le code de la page « exercice2.html ». Repérer dans ce code les noms des fichiers correspondants au css et au javascript liés à cette page.
Le fichier css est « style2.css » et le fichier javascript est « script2.js ».
...