Remerciez-le!

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

Support de Formation : Apprendre le javascript Première partie BREF PRÉAMBULE..

Support de Formation : Apprendre le javascript Première partie BREF PRÉAMBULE...............................................................................................3 CHAPITRE 1 : JAVASCRIPT.................................................................................4 CHAPITRE 2 : JAVASCRIPT N'EST PAS JAVA...................................................5 CHAPITRE 3 : UN PEU DE THÉORIE OBJET......................................................6 3.1 Les objets et leur hiérarchie....................................................................................6 3.2 Les propriétés des objets........................................................................................9 CHAPITRE 4 : VOS OUTILS POUR LE JAVASCRIPT.......................................10 4.1 Un browser compatible Javascript.........................................................................10 4.2 Un solide bagage en Html.....................................................................................10 4.3 Un bon éditeur de texte.........................................................................................11 CHAPITRE 5 : LE JAVASCRIPT MINIMUM........................................................12 5.1 La balise <SCRIPT>.............................................................................................12 5.2 Les commentaires.................................................................................................12 5.3 Masquer le script pour les anciens browsers........................................................13 5.4 Où inclure le code en Javascript ?........................................................................13 5.5 Une première instruction Javascript......................................................................14 5.6 Votre première page Html avec du Javascript.......................................................14 5.7 Remarques............................................................................................................14 +5.8 Versions du langage Javascript..........................................................................15 +5.9 Extension .js pour scripts externes.....................................................................16 +5.10 Toujours des commentaires..............................................................................16 +5.11 Alert() ... rouge..................................................................................................16 CHAPITRE 6 : AFFICHER DU TEXTE.................................................................17 6.1 Méthode de l'objet document................................................................................17 6.2 La méthode write()................................................................................................17 6.3 Exemple (classique !)............................................................................................18 + 6.4 L'instruction writeln()..........................................................................................18 +6.5 De la belle écriture en Javascript........................................................................19 +6.6 Les instructions de formatage de document.......................................................23 CHAPITRE 7 : UTILISER DES VARIABLES.......................................................24 7.1 Les variables en Javascript...................................................................................24 7.2 La déclaration de variable.....................................................................................24 7.3 Les données sous Javascript................................................................................25 7.4 Exercice.................................................................................................................25 +7.5 Les noms réservés..............................................................................................26 +7.6 Variables globales et variables locales................................................................26 CHAPITRE 8 : LES OPÉRATEURS.....................................................................27 8.1 Les opérateurs de calcul.......................................................................................27 Page : 1 Support de Formation Apprendre le javascript Première partie 8.2 Les opérateurs de comparaison...........................................................................27 8.3 Les opérateurs associatifs.....................................................................................28 8.4 Les opérateurs logiques........................................................................................28 8.5 Les opérateurs d'incrémentation...........................................................................28 +8.6 La priorité des opérateurs Javascript..................................................................29 CHAPITRE 9 : LES FONCTIONS........................................................................30 9.1 Définition...............................................................................................................30 9.2 Déclaration des fonctions......................................................................................30 9.3 L'appel d'une fonction............................................................................................31 9.4 Les fonctions dans <HEAD>...</HEAD>...............................................................31 9.5 Exemple................................................................................................................31 +9.6 Passer une valeur à une fonction........................................................................31 +9.7 Passer plusieurs valeurs à une fonction..............................................................33 +9.8 Retourner une valeur...........................................................................................33 +9.9 Variables locales et variables globales................................................................34 CHAPITRE 10 : LES ÉVÉNEMENTS...................................................................35 10.1 Généralités..........................................................................................................35 10.2 Les événements..................................................................................................35 10.3 Les gestionnaires d'événements.........................................................................36 +10.4 Gestionnaires d'événement disponibles en Javascript......................................38 +10.5 La syntaxe de onmouseOver............................................................................39 +10.6 La syntaxe de onmouseOut..............................................................................39 +10.7 Problème! Et si on clique quand même.............................................................40 +10.8 Changement d'images.......................................................................................41 +10.9 L'image invisible................................................................................................41 CHAPITRE 11 : LES CONDITIONS.....................................................................42 11.1 Si Maman si ..." ou l'expression if........................................................................42 11.2 L'expression for...................................................................................................43 +11.3 While.................................................................................................................43 +11.4 Break.................................................................................................................44 +11.5 Continue............................................................................................................45 Page : 2 Apprendre le javascript Première partie Support de formation BREF PRÉAMBULE Ce support de formation, présenté comme un tutorial, est destiné à l’apprentissage du langage Javascript qui ajoute un peu de piment dans les pages Html. L'apprentissage d'un langage de programmation, fut-il aussi simpliste que Javascript (c'est pourtant bien ce que prétendent certains!!!), implique la connaissance d'une nébuleuse d'éléments avant de pouvoir mettre en œuvre ceux-ci. Pour des raisons pédagogiques, nous avons conçu ce tutorial pour une lecture à deux niveaux : un niveau débutant qui rassemble les notions de base de Javascript. un niveau avancé (noté + ) pour aller un peu plus loin dans ces concepts (sans prétendre cependant à l'expertise). Page : 3 Support de Formation Apprendre le javascript Première partie CHAPITRE 1 : JAVASCRIPT Javascript est un langage de scripts incorporé aux balises Html qui permet d'améliorer la présentation et l'interactivité des pages Web. Javascript est donc une extension du code Html des pages Web. Les scripts, qui s'ajoutent ici aux balises Html, peuvent en quelque sorte être comparés aux macros d'un traitement de texte. Ces scripts vont être gérés et exécutés par le browser lui-même sans devoir faire appel aux ressources du serveur. Ces instructions seront donc traitées en direct et surtout sans retard par le navigateur. Javascript a été initialement développé par Netscape et s'appelait alors LiveScript. Adopté à la fin de l'année 1995, par la firme Sun (qui a aussi développé Java), il prit alors son nom de Javascript. Javascript n'est donc pas propre aux navigateurs de Netscape (bien que cette firme en soit un fervent défenseur). Microsoft l'a d'ailleurs aussi adopté à partir de son Internet Explorer 3. On le retrouve, de façon améliorée, dans Explorer 4. Les versions de Javascript se sont succédées avec les différentes versions de Netscape : Javascript pour Netscape 2, Javascript 1.1 pour Netscape 3 et Javascript 1.2 pour Netscape 4. Ce qui n'est pas sans poser certains problèmes de compatibilité, selon le browser utilisé, des pages comportant du code Javascript. Mais consolons nous en constatant qu'avec MSIE 3.0 ou 4.0 et la famille Netscape, une très large majorité d'internautes pourra lire les pages comprenant du Javascript. L'avenir de Javascript est entre les mains des deux grands navigateurs du Web et en partie lié à la guerre que se livrent Microsoft et Netscape. On s'accorde à prédire un avenir prometteur à ce langage surtout de par son indépendance vis à vis des ressources du serveur. Page : 4 Apprendre le javascript Première partie Support de formation CHAPITRE 2 : JAVASCRIPT N'EST PAS JAVA Il importe 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 outils informatiques bien différents. Javascript Java Code intégré dans la page Html Module (applet) distinct de la page Html Code interprété par le browser au moment de l'exécution Code source compilé avant son exécution Codes de programmation simples mais pour des applications limitées Langage de programmation beaucoup plus complexe mais plus performant Permet d'accéder aux objets du navigateur N'accède pas aux objets du navigateur Confidentialité des codes nulle (code source visible) Sécurité (code source compilé) Plus simplement : Javascript est plus simple à mettre en oeuvre 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. Le champ d'application de Javascript est somme toute assez limité alors qu'en Java vous pourrez en principe tout faire. Comme votre code Javascript est inclus dans votre page Html, celui-ci est visible et peut être copié par tout le monde (view source). Ce qui pour les entreprises (et les paranoïaques) est assez pénalisant. Par contre, en Java, votre code source est broyé par le compilateur et est ainsi indéchiffrable. Même si c'est une appréciation personnelle, les codes Javascript ne ralentissent pas le chargement de la page alors que l'appel à une applet Java peut demander quelques minutes de patience supplémentaire à votre lecteur. Page : 5 Support de Formation Apprendre le javascript Première partie CHAPITRE 3 : UN PEU DE THÉORIE OBJET 3.1 LES OBJETS ET LEUR HIÉRARCHIE En bon internaute, vous voyez sur votre écran une page Web. Javascript va diviser cette page en objets et surtout va vous permettre d'accéder à ces objets, d'en retirer des informations et de les manipuler. Voyons d'abord une illustration des différents objets qu'une page peut contenir. Vous avez chargé la page suivante : Cette page s'affiche dans une fenêtre. C'est l'objet fenêtre. Dans cette fenêtre, il y a un document Html. C'est l'objet document. Autrement dit (et c'est là que l'on voit apparaître la notion de la hiérarchie des objets Javascript), l'objet fenêtre contient l'objet document. Page : 6 Apprendre le javascript Première partie Support de formation Dans ce document, on trouve un formulaire au sens Html. C'est l'objet formulaire. Autrement dit, l'objet fenêtre contient un objet document qui lui contient un objet formulaire. Dans ce document, on trouve trois objets. Des boutons radio, un bouton classique et une zone de texte. Ce sont respectivement l'objet radio, l'objet bouton, l'objet texte. Autrement dit l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour l'objet radio, l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour l'objet bouton et l'objet fenêtre contient l'objet document qui contient l'objet formulaire qui contient à son tour l'objet texte. Page : 7 Support de Formation Apprendre le javascript Première partie La hiérarchie des objets de cet exemple est donc radio fenêtre document formulaire bouton texte Pour accéder à un objet (vous l'avez peut-être déjà deviné), il faudra donner le chemin complet de l'objet en allant du contenant le plus extérieur à l'objet à l'objet référencé. Soit par exemple pour le bouton radio "semaine" : (window).document.form.radio[0]. Nous avons mis l'objet window entre parenthèses car comme il occupe la première place dans la hiérarchie, il est repris par défaut par Javascript et devient donc facultatif. Et enfin pour les puristes, Javascript n'est pas à proprement parler un langage orienté objet tel que C++ ou Java. On dira plutôt que Javascript est un langage basé sur les objets. Page : 8 Apprendre le javascript Première partie Support de formation 3.2 LES PROPRIÉTÉS DES OBJETS Une propriété est un attribut, une caractéristique, une description de l'objet. Par exemple, l'objet volant d'une voiture a comme propriétés qu'il peut être en bois ou en cuir. L'objet livre a comme propriétés son auteur, sa maison d'édition, son titre, son numéro ISBN, etc. De même les objets Javascript ont des propriétés personnalisées. Dans le cas des boutons radio, une de ses propriétés est, par exemple, sa sélection ou sa non- sélection (checked en anglais). En Javascript, uploads/S4/ javascript-formulaire 1 .pdf