Remerciez-le!

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

Le langage JavaScript (Dynamisme côte client) 1. Introduction Javascript est un

Le langage JavaScript (Dynamisme côte client) 1. Introduction 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. Il est à mi-chemin de HTML et de Java. Il ressemble à Java, mais il est en fait très différent. Java est un langage complet , semi-compilé sur le serveur 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 ..) Il est aussi important de savoir que Javascript est totalement différent de Java. Bien que les deux soient utilisés pour créer des pages Web évoluées, bien que les deux reprennent le terme Java (café en américain), nous avons là deux languages informatiques bien différents :  Javascript est plus simple à mettre en œuvre car c'est du code que vous ajouterez à votre page écrite en Html avec par exemple un simple éditeur de texte comme Notepad. Java pour sa part, nécessite une compilation préalable de votre code.  Comme votre code Javascript est inclus dans votre page Html, celui-ci est visible et peut être copié par tout le monde (view source). Par contre, en Java, votre code source est broyé par le compilateur et est ainsi indéchiffrable.  Les codes Javascript ne ralentissent pas le chargement de la page alors que l'appel à une applet Java peut demander quelques minutes. 2. 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. Nouvelles technologie : Cours Page 2/11 2.1. Entre les balises <script> … </script> dans la section d'en-tête, ou dans le corps de la page. Le code inclus dans la séquence <script> est évalué au début du chargement de la page. S'il est inclus dans la section <head>, il n'est pas exécuté tout de suite. 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é. 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). Tout script est encadré des balises <script> </script>, on précise également le type MIME grâce à l'attribut type : Script dans l'en-tête du fichier HTML <html> <head> <title>Titre</title> <script type="text/javascript"> //code : instructions, déclarations de fonctions, etc... </script> </head> <body> </body> </html> Ces balises script sont généralement insérées dans le <head> de la page, ou entre les balises <body>. Dans ce dernier cas les scripts sont exécutés au fur et à mesure du chargement de la page. Il est possible d'insérer du code JavaScript dans les balises HTML. Cependant, il faut que le code inséré soif bref pour des questions de lisibilité (dans le cas des événements). Il existe une ancienne méthode d’insertion du code JavaScript en utilisant l’attribut « language » de la balise <script>. <head> <script langage="JavaScript"> …code //code : instructions, déclarations de fonctions, etc... </script> </head> Cette dernière méthode n’est pas recommandée par le W3C et elle n’est pas compatible avec tous les navigateurs contrairement à la première forme. Remarque : Ne pas confondre les commentaires HTML et les commentaires JavaScript. Commentaire HTML  Nouvelles technologie : Cours Page 3/11 Commentaire JavaScript // Ceci est un commentaire JavaVascript sur une ligne /* Ceci est un commentaire JavaScript sur plusieurs lignes */ 2.2. Scripts externes On peut enregistrer le script dans un fichier indépendant de la page Web. Dans ce cas, on précise dans le head le lien vers ce fichier. L'avantage est que l'on peut ainsi réutiliser le script pour une autre page. Lien vers un script externe <html> <head> <script type="text/javascript" src="MonFichier.js"> </script> </head> <body> </body> </html> 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. 2.3. 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é à 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ù  Balise est le nom de certaines balises, souvent des composants de formulaire.  onEvenement est un nouvel attribut de la balise. Bien entendu il faut connaître les associations entre évènements et balises " sensibles " à ces évènements. Ici on peut voir les correspondances entre les balises et les événements 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> Nouvelles technologie : Cours Page 4/11 <script langage="JavaScript"> Function calculer() { …//code…. } </script> </head> <body> <form> <input type="button" value="Calculer" onClick="calculer()"> </form> </body> </html> 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. - Quand on ne définit pas de fonctions, on peut inclure le code directement dans la section <body>. - L’utilisation de fichiers JS externes 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> <h4> Exécution sur évènement onClick </h4> <form> <Input type ="button" name="Bouton1" value="Salut" onClick="saluer()"> </form> </body> </html> Nouvelles technologie : Cours Page 5/11 3. Syntaxe 3.1. Séparation des instructions Pour séparer les instructions en JS, il y a deux solutions :  revenir à la ligne (avec la touche Entrée) : l'ordinateur comprendra qu'il aura ensuite affaire à une autre instruction.  utiliser un point-virgule (;) à la fin de l'instruction. Il est bien sûr parfaitement possible d'utiliser un point-virgule et un (ou plusieurs) retour(s) à la ligne... Remarque Dans de nombreux langages de programmation (le JavaScript étant une exception), le point-virgule est obligatoire à la fin d'une instruction (comme le langage Php, Java, etc). Il est recommandé donc fortement de prendre l'habitude d'en mettre un après chaque instruction. 3.2. Déclaration des variables La déclaration des variables doit être précédée par le mot clé var. Cependant aucun type n’est spécifié (JavaScript est un langage non-typé). var annee = 2000; // on declare et initialise la variable var message; annee = 2011; // on modifie la variable message = "Bonjour, visiteur"; Remarque Le type de la valeur d’une variable peut être vérifié en appelant la fonction « typeof(param) ». 3.3. Instructions - Conditions - Boucles Il est fortement recommandé de terminer l'ensemble des instructions JavaScript par un point virgule (même si, en effet, ce n'est pas toujours nécessaire). Les instructions ci-dessous ne se terminent pas par un point virgule : Les définitions de fonctions function maFonction() { // corps de la fonction ici } Les conditions if (var1==var2) { ............... } else { ............... uploads/S4/ ntw-javascript-partie-1.pdf