Remerciez-le!

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

MI: JavaScript 1/60 Hatem Sandid Introduction au langage JavaScript Javascript

MI: JavaScript 1/60 Hatem Sandid Introduction au langage JavaScript Javascript est un langage de programmation très récent, créé par les sociétés Netscape et Sun Microsystems vers la fin de l'année 1995. Son objectif principal : introduire de l'interactivité avec les pages HTML, et effectuer des traitements simples sur le poste de travail de l'utilisateur. Le moyen : introduire de petits programmes, appelés SCRIPTS, dans les pages HTML. Jusqu'ici la programmation ne pouvait être exécutée que sur le serveur. La possibilité d'inclure des programmes dans les pages HTML et de les exécuter directement sur le poste client est intéressante, car elle permet de décharger le serveur de ce travail et ... d'éviter les attentes des réponses aux requêtes adressées via le Réseau. Le code du programme est interprété par le navigateur client (qui reçoit la page). Il ne peut pas être exécuté indépendamment, ce qui le limite comme langage de programmation, contrairement à JAVA (à ne pas confondre !). C'est un langage basé sur des objets, très simple et conçu, en principe, pour des non spécialistes. En résumé, voici ses principales caractéristiques :  JS est un langage de programmation structurée qui concourt à enrichir le HTML, à le rendre plus "intelligent" et interactif.  Le code JS est intégré complètement dans le code HTML, et interprété par le navigateur client  JS contient des gestionnaires d'événement : il reconnaît et réagit aux demandes de l'utilisateur, comme un clic de la souris, une validation de formulaire, etc. Mais c'est un langage limité :  ce n'est pas un langage de programmation à part entière, indépendant.  c'est un langage de script, dépendant de HTML, c'est une extension de HTML. Sa syntaxe ressemble à Java, car elle reprend celle du langage C, mais il est en fait très différent. Java est un langage complet, compilé et complètement autonome du langage HTML  ce n'est pas véritablement un langage orienté objet (pas d'héritage de classe, ni de polymorphisme...) MI: JavaScript 2/60 Hatem Sandid Ecriture et exécution du code JS On peut placer du code JS dans une page HTML à 3 endroits et sous des formes bien différentes. 1. Entre les balises <SCRIPT>....</SCRIPT> dans la section d'en-tête, ou dans le corps de la page. <HEAD> <SCRIPT LANGUAGE="JavaScript"> ... code //code : instructions, déclarations de fonctions, etc… </SCRIPT> </HEAD> o Le code inclus dans la séquence <SCRIPT> est évalué au début du chargement de la page. o S'il est inclus dans la section <HEAD>, il n'est pas exécuté tout de suite. o Par contre, s'il fait partie du corps du document, il est immédiatement exécuté en même temps que le code HTML est interprété. o Il est nécessaire d'inclure les déclarations de fonctions dans la section <HEAD>..</HEAD>. En effet, les fonctions doivent être connues dès le chargement du document, mais ne doivent être exécutées que lors d'un appel explicite de l'utilisateur, le plus souvent en réponse à un événement (voir ci- dessous). 2. Associé à une balise HTML qui gère un événement. Le code JS est généralement inséré sous forme d'un appel de fonction, affectée à un gestionnaire d'événement qui apparaît comme un nouvel attribut d'un composant de formulaire L'exécution du code est alors provoquée par appel d'une fonction JS (préalablement déclarée) dont l'exécution constitue une réponse à l'événement. Un événement survient à l'initiative de l'utilisateur, par exemple en cliquant sur un bouton, ou après la saisie du texte dans un champ de formulaire. Ecriture générale <balise ... onEvenement="code JS" | "fonction JS"> Où o balise est le nom de certaines balises, souvent des composants de formulaire o onEvenement est un nouvel attribut de la balise o Bien entendu il faut connaître les associations entre événements et balises "sensibles" à ces événements. MI: JavaScript 3/60 Hatem Sandid Exemple Le code HTML suivant crée un bouton de nom "bouton1", sur lequel est écrit "Calculer". Quand l'utilisateur appuie sur ce bouton, l'événement onClick est déclenché et la fonction calculer() est appelée. Son code, déclaré dans l'en-tête est alors exécuté. <HTML> <HEAD> <SCRIPT language="JavaScript"> function calculer() { ....// code..... } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="button" VALUE="Calculer" onClick="calculer()"> </FORM> </BODY> </HTML> 3. Associé au pseudo-protocole javascript: dans une URL. Cette pseudo-URL permet de lancer l'exécution d'un script écrit en JS, au lieu d'être une requête pour obtenir un nouveau document (comme avec les protocoles habituels http: , ftp: ) Ecriture générale <A HREF="JavaScript:code JS" | "appel fonction JS">texte|image activable</A> L'opérateur void Pour empêcher que le code ou la fonction appelée dans l'URL JavaScript, ne remplace le document courant, on applique l'opérateur void, qui neutralise toute valeur ou tout effet de retour. <A HREF="JavaScript:void( appel-fct(..) )">.....</A> MI: JavaScript 4/60 Hatem Sandid Exemple <HTML> <HEAD> <SCRIPT language="JavaScript"> function calculer() { ....// code..... } </SCRIPT> </HEAD> <BODY> .......... <A HREF="JavaScript:calculer()">Pour calculer</A> .......... </BODY> Quelques remarques  JS fait la distinction entre majuscules et minuscules, contrairement aux balises HTML. C'est une source fréquente d'erreur.  Pour comprendre le code, inclure des commentaires abondants : // pour une simple ligne de commentaires /* .....*/ pour les encadrer sur plusieurs lignes.  Quand on ne définit pas de fonctions, on peut inclure le code directement dans la section <BODY>.  On peut (depuis Netscape 3) placer le code dans un fichier spécifique d'extension .JS : <SCRIPT LANGAGE=JavaScript SRC=source.js> </SCRIPT> où source.js doit être un fichier accessible au moment de l'exécution, dans le répertoire courant ou à une adresse URL précisée. Un tel fichier externe permet de réutiliser le code dans de multiples pages, sans avoir à l'inclure dans la source. Exemple-résumé <html> <head> <script> function saluer() { alert("Bonjour tout le monde !"); } </script> </head> <body> <H4>Exécution immédiate</H4> <script> alert("Bonjour tout le monde !"); </script> MI: JavaScript 5/60 Hatem Sandid <H4>Exécution sur événement onClick</H4> <form> <input type="button" name="Bouton1" value="Salut" onClick="saluer()"> </form> <H4>Exécution sur protocole javascript:</H4> <A HREF = "javascript:saluer()">pour saluer</a> </body> </html> Introduction à JavaScript par l'exemple Voici quelques exemples introductifs et progressifs  accompagnés de commentaires et  de corrigés écrits eux-mêmes en JavaScript I. Afficher du texte : EXEMPLE 1 <HTML> <HEAD> <TITLE> Exemple 1 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var bonjour = "Bonjour !"; var question = "Comment allez vous "; var phrase = bonjour + "<BR>" + question; document.write(phrase, "aujourd'hui ?"); </SCRIPT> </BODY> </HTML> A la lecture de ce code JS, comprendre : o la déclaration et l'initialisation (c'est-à-dire : donner une valeur initiale) des variables bonjour, question, et phrase. o l'affectation d'une valeur à une variable, avec l'opérateur = , sur le modèle : variable = valeur (ou expression) o l'instruction document.write("texte") est l'instruction générale d'affichage de "texte" dans le même document (le document "courant"). o les constantes "texte" sont placées entre " "; à défaut JS croit qu'il s'agit d'une variable. o la concaténation (mise "bout à bout") de variables de type texte et de constantes "texte" est réalisée avec l'opérateur + o document.write(...) affiche aussi bien les valeurs des variables que les constantes texte. MI: JavaScript 6/60 Hatem Sandid On peut séparer les éléments à afficher par l'opérateur + ou plus simplement par la virgule ,. o toutes les balises HTML peuvent figurer comme constantes texte, et sont exécutées comme du code HTML. Ainsi, "<BR>" inséré dans la valeur de la variable phrase, fera passer à la ligne suivante la suite du texte à afficher. Comprendre le script et prévoir le résultat de son exécution. Pour vérifier, appuyer sur ce bouton : II. Afficher une image EXEMPLE 2 <HTML> <BODY> <CENTER> <SCRIPT language = "JavaScript" > document.write("<IMG SRC='../../images/lycee2.jpg'> <BR> <H1> Une photo de mon lycée</H1><P>"); document.write("<IMG SRC='../../images/monchat.gif'> <BR> <H1> et de mon chat .... </H1>"); </SCRIPT> </CENTER> </BODY> </HTML> Comprendre le script, en particulier le rôle du code HTML inséré et prévoir le résultat de son exécution. Pour vérifier, appuyer sur ce bouton : III. Afficher la date et l'heure EXEMPLE 3 <HTML> <BODY> <SCRIPT language = "JavaScript" > var date = new Date(); // déclaration d'une variable de type Date // la variable date contient alors la date courante var mois = date.getMonth() + 1; // la variable mois contient le N° du mois à partir de 0 (à 11) var jour = date.getDate() ; var annee = date.getYear(); if (navigator.appName =='Netscape') annee = annee + 1900 ; // getYear() donne le numéro de l'année // pour netscape et Mozilla à partir de 1900 MI: JavaScript 7/60 Hatem Sandid document.write("<Date> " , jour, " / ", mois, " / "+annee, "<BR>"); document.write("<Heure> ", date.getHours(), " : ",date.getMinutes(), " : ",date.getSeconds() ); </SCRIPT> </BODY> </HTML> A la lecture de ce code JS, comprendre : o La déclaration var date = new Date(); déclare un objet appelé date, de type Date, initialisé à la date du système. o Les fonctions getDate(), getMonth() etc... s'appliquent à la variable date. Ces fonctions ne peuvent s'adresser à ce type de variable Date. On dit que ce sont des méthodes de l'objet date. La notation générale est : objet.méthode() (étude plus complète dans le chapitre objets prédéfinis). Comprendre le script et prévoir le résultat de son exécution. Pour vérifier : IV. uploads/S4/ cours-js.pdf