Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

HEI - UE NDC « Communication WEB » 6 - JavaScript Page 1 / 5 JavaScript Définit

HEI - UE NDC « Communication WEB » 6 - JavaScript Page 1 / 5 JavaScript Définition Le JavaScript est du code informatique inséré directement dans les pages Web. Ce code est exécuté par le navigateur sur le poste client. Il est largement utilisé pour rendre les pages WEB interactives.  Langage créé dans les années 90 ; Il est désormais un incontournable du développement Web  C'est un langage de programmation utilisé pour les pages Web interactives.  Il est intégré au sein des pages Web pour y être exécuté sur le poste client.  Le JavaScript est un langage interprété par le navigateur WEB  Le code JavaScript est inclut dans le document html de deux façons : o Encadré par les balises <script>...</script> o Directement dans les balises HTML (comme les évènements) Quelques exemples d’utilisation  Evite les échanges avec le serveur (chargement de pages) pour le contrôle de la saisie des formulaires par exemple  Effectue toute sorte de calcul, affichage et contrôles locaux :  Afficher ou masquer du texte  Ouvrir des pop-up (petites fenêtres qui s'ouvrent de manière intempestive)  Faire défiler un texte, des images  Créer des infobulles qui se déclenche au survol  Faire apparaitre un texte au clic de souris  Insérer un menu dynamique (qui se développe au passage de la souris)  Proposer un diaporama (changement d'image toutes les X secondes, boutons pour mettre en pause, aller à l'image précédente / suivante, etc.) Exemple d’affichage d’une boîte de dialogue <!DOCTYPE html> <html> <head> <title>premier exemple</title> </head> <body> <script> alert('Hello world!'); </script> </body> </html> La balise <script> contient le code JavaScript alert('Hello world!'); alert() est une fonction, une instruction JavaScript, qui permet d'afficher une boîte de dialogue contenant un message placé entre apostrophes HEI - UE NDC « Communication WEB » 6 - JavaScript Page 2 / 5 Le Document Object Model (DOM) Le DOM est une interface de programmation pour les documents HTML et XML. Une interface de programmation (API : Application Programming Interface), est un ensemble d'outils qui permet, entre autres pour le JavaScript, de faire communiquer différents langages. Le DOM = API qui s'utilise avec les documents HTML et qui permet, via le JavaScript, d'accéder au code HTML d'un document. Le JavaScript est un langage orienté objet : L'objet document = la page Web elle-même et plus précisément la balise <html>. C'est grâce à cet élément qu’on peut accéder à tous les éléments HTML et les modifier.  Accéder aux éléments : L'accès aux éléments HTML via le DOM est simple : on peut utiliser la méthode : getElementById() ; Cette méthode permet d'accéder à un élément en connaissant son ID qui est simplement l'attribut id de l'élément.  Récupérer du HTML : La méthode innerHTML récupère le balisage et le contenu au sein d'un élément donné sous forme de texte. Exemples : <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Exemple1</title> </head> <body> <div id="intro"><p>Visitez <a href="http://www.hei.f">HEI</a></p></div> <script> // on récupère l’élément identifié par l’ID 'intro' // on appelle la méthode innerHTML var mydiv = document.getElementById('intro').innerHTML; // on affche la pop-up alert(mydiv); </script> </body> </html> <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Exemple2</title> <style> .evident { background-color: lightgrey; color: white; padding : 20px ; } </style> </head> <body> <div id="intro"><p>Visitez <a href="http://www.hei.f">HEI</a></p></div> <script> // on applique le style document.getElementById('intro').className = 'evident'; </script> </body> </html> HEI - UE NDC « Communication WEB » 6 - JavaScript Page 3 / 5 Evènements Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non. Exemples :  Faire apparaître une fenêtre alert() lorsque l'utilisateur survole une zone d'une page Web.  Changer l’image au survol de celle-ci  Tester un champ de formulaire quand on quitte celui-ci  Changer la couleur de fond d’un champ de saisi quand il prend le focus  Interdire la validation du formulaire si les champs de saisis obligatoires ne sont pas remplis Liste des événements principaux, ainsi que les actions à effectuer pour qu'ils se déclenchent : Nom de l'événement Action pour le déclencher onClick Cliquer (appuyer puis relâcher) sur l'élément onDblClick Double-cliquer sur l'élément onMouseOver Survol de la souris sur l'élément onMouseOut Fin de survol de la souris de l'élément onMouseDown Appuyer (sans relâcher) sur le bouton gauche de la souris sur l'élément onMouseUp Relâcher le bouton gauche de la souris sur l'élément onKeyDown Appuyer (sans relâcher) sur une touche de clavier sur l'élément onKeyUp Relâcher une touche de clavier sur l'élément onKeyPress Frapper (appuyer puis relâcher) une touche de clavier sur l'élément onFocus « Cibler » l'élément onBlur Annuler le « ciblage » de l'élément onChange Changer la valeur d'un élément spécifique aux formulaires (input,checkbox) onLoad Au chargement de la page onSubmit Soumission du formulaire suite au clic sur le bouton type="submit" Fichier externe On utilise un fichier externe comme une « bibliothèque » de fonctions JavaScript personnelles pouvant être utilisée dans toutes le pages WEB. Cela a pour bénéfice de :  Eviter de surcharger la page web avec du code JavaScript  Centraliser les fonctions JavaScript personnelles pour une maintenance facile <html> <head> <title>exemple</title> <meta charset="utf-8"/> <script language="javascript" src="fonctions.js"></script> </head> Inclusion du fichier définissant les fonctions JavaScript HEI - UE NDC « Communication WEB » 6 - JavaScript Page 4 / 5 Exemple de fichier Fichier « fonctions.js » function chargerImage( image , nomFichier ) { /* la source de l'image devient le fichier passé en paramètre */ image.src = nomFichier ; } function afficherMenu(idChamp) { /* affichage initial du bloc d'id transmis */ document.getElementById(idChamp).style.display = "block" ; } function changerMenu( baliseImage ) { divMenu = document.getElementById("menu") ; divContenu = document.getElementById("contenu") ; if (divMenu.style.display == "block") /* Si le menu est affiché ... */ { divMenu.style.display = "none" ; /* on masque le menu */ divContenu.style.width = "1175" ; /* on augmente la largeur du bloc contenu */ baliseImage.src = 'Afficher.png' ; /* on change le sens des chevrons */ } else /* Si le menu n'est pas affiché ... */ { divMenu.style.display = "block" ; /* on affiche le menu*/ divContenu.style.width = "1000" ; /* on réduit la largeur du bloc contenu */ baliseImage.src = 'Reduire.png' ; /* on change de sens des chevrons */ } } function saisirChamp(idChamp) { /* la couleur de fond de la zone de saisie devient jaune */ document.getElementById(idChamp).style.backgroundColor = "yellow" ; } function verifierChamp(idChamp) { /* si le matricule saisi a une longueur inférieure à 6 caractères */ if (document.getElementById(idChamp).value.length < 6) { /* la couleur de fond de la zone de saisie devient rouge */ document.getElementById(idChamp).style.backgroundColor = "red" ; alert("saisie obligatoire du matricule"); /* message d'erreur affiché dans un pop-up */ return false; /* on renvoie faux si la saisie est incomplète */ } else { /* la couleur de fond de la zone de saisie devient verte */ document.getElementById(idChamp).style.backgroundColor = "green" ; return true; /* on renvoie vrai si la saisie est complète */ } } Terme permettant de créer sa propre fonction JavaScript Nom de la fonction Cette fonction possède deux paramètres en entrée Corps de la fonction afficherMenu HEI - UE NDC « Communication WEB » 6 - JavaScript Page 5 / 5 <html> <head> <title>Informatique</title> <meta charset="utf-8"/> <script language="javascript" src="fonctions.js"></script> </head> <body onLoad="afficherMenu('menu')"> <div id="header"> <img src="Logo_HEI.jpg" onMouseOver="chargerImage(this,'Logo_Groupe.jpg')" onMouseOut="chargerImage(this,'Logo_HEI.jpg')" /> </div> <hr/> <div id="menu"> <a href="http://www.hei.fr">Site HEI</a><br/> <a href="poleinfo.html"> Pôle Informatique </a><br/> <a href="domaine.php"> Domaine HEI </a><br/> <a href="saisieFormulaire.html"> Vos commentaires ? </a> <a href="deconnect.php"> Déconnexion </a> </div> <div id="chevrons"> <img src="Reduire.png" width="30" onClick="changerMenu(this)"/> </div> <div id="contenu"> <p>Merci de nous envoyer vos commentaires </p> <form method="post" action="insertFormulaire.php" onSubmit="return verifierChamp(this.matriculeForm)" > <table class="formulaire"> <tr><td>Monsieur ?</td><td><input type="radio" name="sexeForm" value="M" /> </td></tr> <tr><td>Madame ?</td><td><input type="radio" name="sexeForm" value="F" /> </td></tr> <tr><td>Nom :</td> <td><input type="text" name="nomForm" size="30" maxlength="30" /></td></tr> <tr><td>Prénom :</td> <td><input type="text" name="prenomForm" size="30" maxlength="30" /></td></tr> <tr><td>Email :</td> <td><input type="text" name="emailForm" size="30" value="@hei.fr" /></td></tr> <tr> <td>Domaine :</td> <td><select name="codeDomForm" /> <option value="?">Sélectionner un domaine</option> <option value="BAA">Bâtiment, Aménagement et Architecture</option> <option value="ITI">Informatique et Technologies de l'Information</option> </select></td> </tr> <tr><td>En alternance ?</td> <td><input type="checkbox" name="alternanceForm" value="1" /></td></tr> <tr><td>Commentaires :</td> <td><textarea name="commentaireForm"></textarea></td></tr> <tr><td>Matricule <b><sup>*</sup></b>:</td> <td><input type="text" name="matriculeForm" onFocus="saisirChamp(this)" onBlur="verifierChamp(this)"/> </td></tr> <tr><td>Mot de Passe :</td> <td><input type="password" name="motDePasseForm" /></td></tr> <tr><td colspan="2" align="center"> <input type="submit" value="Envoyer" class="titre" /></td></tr> </table> </form> </div> </body> </html> Inclusion du fichier « fonction.js » définissant les fonctions JavaScript Déclenchement de l'affichage du menu lors du chargement de la page Déclenchement du changement de l'image lors du survol de l'image Déclenchement de l'affichage ou du masquage du menu à chaque clic sur l'icône Déclenchement de la vérification de la saisie lors de la soumission du formulaire Déclenchement du changement de couleur de la zone de saisie dès l'entrée dans la zone Déclenchement de la vérification de la zone de saisie dès la sortie de la zone Fait référence à uploads/s3/ 6-javascript.pdf