Remerciez-le!

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

Apprendre Javascript Tour d'horizon…...........................................

Apprendre Javascript Tour d'horizon…..........................................................................................................................................2 Qu’est-ce c’est ? ......................................................................................................................................2 JavaScript et HTML ...............................................................................................................................4 Un premier script.....................................................................................................................................5 Fonctions, instructions, variables et opérateurs..............................................................................8 Les événements ......................................................................................................................................12 Les entrées / sorties ............................................................................................................................14 Structures algorithmiques...................................................................................................................... 15 Instructions de condition : Si … alors … Si … alors … sinon … ..........................................15 Instructions de boucle : Pour … ..........................................................................................................15 Instructions de boucle : Tant que … ..................................................................................................16 Instructions de boucle : Faire … tant que … ....................................................................................16 Instructions de branchements multiples : si … si … si … ...............................................................16 Rupture de structure, ou le mauvais usage de break et continue...............................................17 Récursivité...............................................................................................................................................17 La théorie des ob ets et le DOM .......................................................................................................... 18 j La hiérarchie des objets ......................................................................................................................18 Les propriétés des objets et leurs attributs..................................................................................19 Les méthodes des objets .................................................................................................................... 20 Le DOM ................................................................................................................................................... 20 Création et manipulation d'objets..................................................................................................... 20 Les objets dans Javascript ....................................................................................................................24 Afficher du texte : objet Document................................................................................................ 24 Tester le navigateur : objet Navigator............................................................................................ 25 Connaître la résolution de l'écran : objet Screen ......................................................................... 26 Gérer les fenêtres et les cadres : objet window........................................................................... 26 Gérer les chaînes de caractères : objets String et RegExp....................................................... 29 Saisir des données dans un formulaire : objet Form .................................................................... 34 Gérer l'historique : objet history ..................................................................................................... 38 Gérer le temps : l'objet Date ............................................................................................................ 38 Calculer : objet Math ........................................................................................................................... 39 Conserver une information chez le client : objet Cookie ............................................................. 40 Animer une page : Calques et styles ................................................................................................. 42 Annexe........................................................................................................................................................44 Le DOM ................................................................................................................................................... 44 Caractères spéciaux............................................................................................................................. 45 Les opérateurs....................................................................................................................................... 46 Bibliographie..............................................................................................................................................49 Glossaire.....................................................................................................................................................50 ENITA Bordeaux – UF Informatique – (F. Priam / C. Germain – Février 2002) Apprendre Javascript Tour d'horizon… Qu’est-ce c’est ? Javascript est un langage de scripts qui s’incorpore au langage Html de présentation des pages Web. Les scripts vont permettre de rendre une page Web plus dynamique : - en animant certaines zones de la page, - ou en faisant réagir certains éléments de la page en fonction de certains événements provoqués par l’utilisateur (= client), ou du navigateur utilisé, … (exemple : sur clic de la souris, changer la couleur du texte, ….) Etant donné que Javascript peut être considéré comme une extension du langage HTML, la connaissance du HTML est indispensable avant d’aborder ce manuel. Malgré tout, un très léger rappel y sera fait. • Logiciels nécessaires - Pour écrire des scripts Javascript, un simple éditeur de texte tel le Bloc-notes de Windows est suffisant. Toutefois, de nombreux logiciels freeware ou non, en rendent l’écriture plus agréable (aide intégrée, colorisation des mots-clés, …) Exemples à ce jour : MSE (Microsoft), 1st page 2000 (EvrSoft), DreamWeaver (Macromedia), … - Pour exécuter les scripts, il faut un navigateur tel que Internet Explorer (IE), Netscape Navigator (NN), Opéra, … • Historique JavaScript (initialement appelé LiveScript) a été développé par Netscape puis a été repris par la firme Sun (qui a aussi développé Java). Les scripts sont des instructions (des lignes de code) interprétées par les navigateurs Netscape et Internet Explorer. Javascript n’a cessé d’évoluer avec les versions des navigateurs. Le tableau ci- dessous récapitule quelles versions de Javascript sont reconnues par les 2 navigateurs les plus utilisés à ce jour. Mais n'oublions pas que ce ne sont pas les seuls (Opéra, …). Navigateurs Versions Javascript supportées Netscape 2.0 (NN2) Internet Explorer 3.0 (IE3) Javascript (baptisé à posteriori 1.0) Netscape 3.0 (NN3) Javascript 1.1 Netscape 4.0 (Communicator) (NN4) Internet Explorer 4.0 (IE4) Javascript 1.2 Netscape 6.0 (NN6) Javascript 1.5 Nous verrons qu'il existe une fonction Javascript qui permet de tester le type et la version du navigateur utilisée. Elle permettra d’aiguiller l’utilisateur vers une page ou une autre. ENITA Bordeaux – UF Informatique - 2 - Apprendre Javascript • Java, Javascript et Jscript Surtout ne pas confondre Java et Javascript/Jscript bien qu’ils soient tous utilisés pour créer des pages Web évoluées ! Javascript et Jscript sont interprétés et exécutés par le navigateur de l'internaute. JavaScript, nous l’avons vu, a été développé par Netscape. Microsoft, quant à lui, a repris Javascript pour le nommer Jscript dans IE. Les différences de langage entre Javascript et Jscript s'accentuant au cours des différentes versions, en 1998, Netscape a confié à l'ECMA (European Computer Manufacturers Association) le soin de créer un standard : l'ECMA-262. Toutefois les éditeurs continuent d'ajouter de nouvelles fonctionnalités à leur navigateur. De ce fait, le standard n'est pas totalement implémenté et des différences encore notables sont encore à signaler. Et même… en supposant que le standard soit respecté, l'ECMA n'a pas imposé le modèle des objets du document (DOM : voir page 44). Heureusement, la compatibilité est de bon niveau. Le tableau ci-dessous donne un bref aperçu des différences entre les 2 langages de script et Java, véritable langage de programmation : Javascript / Jscript Java Adapté uniquement à la gestion des pages Web Gère les pages Web mais aussi permet de créer des applications totalement autonomes et hors Web. Instructions intégrées dans la page Html : un simple éditeur de textes est nécessaire pour les écrire. Module (« applet ») appelé dans la page Html : il nécessite un éditeur de texte ET un compilateur. Instructions interprétées linéairement par le navigateur du client (=l'internaute) au moment de l'exécution : une erreur de syntaxe bloque l’affichage de la page Html. Donc : il est indispensable d’avoir bien testé son script, si possible sur différents navigateurs et différentes versions de navigateurs, avant de le mettre à disposition sur une page publique. Code source compilé avant son exécution : tant que le module n’est pas syntaxiquement correct, il ne peut être appelé dans la page. Aux yeux de l’utilisateur, la page Web s’affichera correctement. Codes simples Æ applications relativement simples Langage de programmation beaucoup plus complexe mais plus performant (accès aux bases de données, …). Tout est théoriquement possible. Permet d'accéder aux objets du navigateur N'accède pas aux objets du navigateur Aucune confidentialité du code : le code source est visible et copiable par tout utilisateur dans le navigateur, mais les droits d’auteur restent applicables. Confidentialité et sécurité du code après compilation. Le code étant illisible et dans un fichier séparé, seul le concepteur peut modifier le code initial. Permet d’accéder aux clients Web (navigateur) Permet d’accéder aux serveurs Web (bases de données par exemple) L’intégration de scripts ne pénalise pas significativement les temps de téléchargement de la page Web L’intégration d’applets ralentit le téléchargement de la page. • Syntaxe et Conseils - Javascript ressemble aux langages C et C++ : à savoir - ; à la fin de chaque ligne d’instructions. Cela deviendra vite une habitude bien que Javascript ne l'impose pas. ENITA Bordeaux – UF Informatique - 3 - Apprendre Javascript - {…} pour encadrer un bloc d’instructions - les opérateurs de comparaison et d’affectation sont les mêmes (&&, ||, ==, …) - les symboles des commentaires // et /* … */ - toute une série de mots réservés qui correspondent à des mots-clés du langage. - … Toutefois, Javascript est sensible à la casse (caractères minuscules/majuscules) c’est-à-dire que la variable NBRE n’est pas la même que la variable nbre ou Nbre • Difficultés La difficulté avec Javascript est d'écrire des scripts qui puissent être interprétés et exécutés par n'importe quel navigateur et sur n'importe quelle plate-forme (PC, Mac, Unix, Linux). JavaScript et HTML • Quelques rappels de HTML Une page HTML est constitué de balises (=tags) qui correspondent à des instructions de mise en forme de la page HTML. Chaque balise est encadrée par les symboles < et >. Chaque mise en forme est présentée par une balise de début <balise> et une balise de fin </balise>. Exemple : <B> ce texte sera en caractères gras </B> <I> ce texte sera en italiques </I> Certaine balises sont obligatoires dans toute page Web. La plus petite page possible est la suivante : celle-ci affiche « Coucou». <HTML> <HEAD> </HEAD> <BODY> Coucou </BODY> </HTML> • Notion d’objets JavaScript est un langage qui manipule les objets. Voici quelques exemples d’objets : - les balises Html comme les cadres (<Frame>), les formulaires (<Form>) et les champs de texte (<Textarea>, <Input> ; …), les images (<Img>), les applets Java (<Applet>), … - les spécificités du navigateur (son nom, sa version, …), - les plug-ins installés sur le poste client (Acrobat, Real Audio, …) - la date et l’heure du poste-client, - … L’ensemble de ces objets constituent le modèle des objets du document : le DOM (Document Object Model). Nous le détaillerons plus loin car sans le connaître, nous allons pouvoir écrire notre premier script. • Dynamic HTML (DHTML) Javascript associé aux événements et aux feuilles de style et aux calques permet de dynamiser les objets des pages Web ce qui signifie que des modifications peuvent se faire une fois que la page a fini de se charger, ce que ne permet pas le HTML classique. ENITA Bordeaux – UF Informatique - 4 - Apprendre Javascript Le DHTML est intéressant, mais, malheureusement, à l'heure actuelle, il n'existe pas de norme officielle et suivie par les navigateurs. Chaque navigateur gère le DHTML à sa façon. Ainsi, un script écrit uploads/Litterature/ cours-javascript.pdf