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 JavaScript Par : KENGNE T. Vianney 1 Le JavaScript Table des matières I. Pré

Le JavaScript Par : KENGNE T. Vianney 1 Le JavaScript Table des matières I. Présentation du langage JavaScript et des navigateurs ................................................................. 2 I.1. Introduction ................................................................................................................................... 2 I.2. Navigateurs .................................................................................................................................... 2 I.3. Limites du JavaScript ..................................................................................................................... 2 II. Syntaxe .............................................................................................................................................. 3 II.1. Instructions - Conditions - Boucles ............................................................................................... 3 II.2. Scripts dans l'en-tête du fichier HTML ......................................................................................... 4 II.3. Scripts externes ............................................................................................................................ 4 II.3. Commentaires .............................................................................................................................. 5 II.4. Objets internes ............................................................................................................................. 5 II.5. Accolades ...................................................................................................................................... 6 II.6. Variables ....................................................................................................................................... 6 III. Evénements ...................................................................................................................................... 7 IV. Utiliser les objets du navigateur ................................................................................................... 10 IV.1. L'objet window .......................................................................................................................... 10 IV.2. L'objet window.navigator .......................................................................................................... 10 IV.3. L'objet window.document ......................................................................................................... 10 V. Manipuler la page - Les grandes lignes du DOM ......................................................................... 11 V.1. Représentation de la page .......................................................................................................... 11 V.1.1. Propriétés des nœuds .......................................................................................................... 11 V.1.2. Exemples d'arbres DOM sous divers navigateurs ................................................................ 12 V.2. Création, insertion, suppression d'un nœud .............................................................................. 15 V.2.1. Méthodes JavaScript pour la gestion des nœuds................................................................. 15 V.2.2. Exemple ............................................................................................................................... 15 V.3. Ajax ............................................................................................................................................. 18 VI. Conclusion ..................................................................................................................................... 18 Le JavaScript Par : KENGNE T. Vianney 2 I. Présentation du langage JavaScript et des navigateurs Note : Pour aborder JavaScript, il faut déjà connaître le langage HTML ainsi que les feuilles de styles (CSS). I.1. Introduction JavaScript est un langage interprété par le navigateur. Le JavaScript est un langage «client», c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est chargée. Il a pour but de dynamiser les sites Internet. Note : JavaScript est à ne pas confondre avec Java ! Le JavaScript est un langage sensible à la casse (« case sensitive »). JavaScript est un langage objet : chaque objet possède des méthodes (ou fonctions), des propriétés et .... des objets. Dans une page Web, l'objet le plus élevé dans la hiérarchie est la fenêtre du navigateur : window. Cet objet window contient entre autres l'objet document qui lui-même contient tous les objets contenus dans la page Web (paragraphes, formulaires, etc...). En plus de ces objets, il existe des objets créés par l'utilisateur. Les méthodes sont des fonctions qui permettent d'agir sur certaines propriétés de l'objet, les propriétés contiennent les paramètres d'un objet. Exemple d'un objet voiture : nous allons lui attribuer  des propriétés : la couleur, la marque, le numéro d'immatriculation ;  des méthodes : tourner(), avancer(), reculer(), changer la couleur() ;  des objets : les phares, les pneus. Pour résumer une méthode engendre une action, un verbe qualifie cette action, une propriété est généralement qualifiée par un nom. Dans l'exemple de la voiture une méthode permet de changer la couleur de la voiture, par contre aucune méthode ne nous autorise à changer la marque de cette voiture (ce qui entraînerait une modification des autres propriétés et éventuellement l'apparition ou la disparition de méthodes). Il en sera ainsi également avec nos objets JavaScript : nous pourrons accéder voire modifier les propriétés (couleur du texte, style de la fonte) des objets grâce aux méthodes. I.2. Navigateurs Voici une liste non exhaustive des navigateurs : Linux / UNIX Windows MacOS Firefox, Netscape, Mozilla, Konqueror, Lynx, Opéra Internet Explorer, Firefox, Netscape, Opéra, Chrome Internet Explorer, Konqueror, Opéra, Safari Note : Lynx est un navigateur qui n'interprète pas le JavaScript. Tout irait pour le mieux si ces navigateurs utilisaient pour un même objet, les mêmes propriétés et les mêmes méthodes pour les définir. Ce qui est loin d'être le cas. Par ailleurs, Internet Explorer interprète également le JScript, un JavaScript créé par Microsoft (ActiveX). Nous n'aborderons pas ce langage spécifique à IE. I.3. Limites du JavaScript Le JavaScript est difficilement compatible entre les différents navigateurs. Il faut toujours se décider jusqu'à quel point ça doit être compatible. Tout le monde n'a pas JavaScript : Le JavaScript Par : KENGNE T. Vianney 3 Il faut toujours que la page contienne l'ensemble de l'information, accessible même sans JavaScript. JavaScript est là pour apporter un plus (ergonomie, dynamisme), mais on doit pouvoir s'en passer. JavaScript n'est pas sécurisé. Les programmes JS sont exécutés sur le client, on n'est jamais sûr de leurs résultats, il ne faut donc jamais faire confiance à une donnée provenant du client. II. Syntaxe II.1. 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() { ............... } Les conditions if (var1==var2) { ............... } else { ............... } Syntaxe des conditions :  égalité : == (cette syntaxe est également utilisée pour comparer deux chaînes de caractères)  différent de : != (même remarque que ci-dessus)  inférieur ou égal à : =<  supérieur ou égal à : >=  inférieur à : <  supérieur à : >  et logique : &&  ou logique : ||  identique à : ===  non identique à : !==  et bit à bit : &  ou bit à bit : | Les boucles for for (i=0; i<5; i++) { ............... } Les boucles while while (a<b) { ............... } do Le JavaScript Par : KENGNE T. Vianney 4 { ............... }while (a<b) II.2. Scripts dans l'en-tête du fichier HTML 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 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titre</title> <script type="text/javascript">  </script> </head> <body> </body> </html> Les commentaires restent présents pour une raison historique : les premiers navigateurs n'interprétant pas le JavaScript et pour éviter un affichage du texte dans la page web, les scripts étaient encadrés de commentaires. De plus, omettre les commentaires amène les validateurs à tenter d'interpréter le code JavaScript comme du HTML, ce qui implique des erreurs de validation non justifiées. Note : Ne pas confondre les commentaires HTML et les commentaires JavaScript. Commentaire HTML  Commentaire JavaScript // Ceci est un commentaire JavaVascript sur une ligne /* Ceci est un commentaire JavaScript sur plusieurs lignes */ 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). II.3. 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. Le JavaScript Par : KENGNE T. Vianney 5 Lien vers un script externe <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> </title> <script type="text/javascript" src="MonFichier.js"></script> </head> <body> </body> </html> II.3. Commentaires Il existe les commentaires « multilignes » : ils commencent par /* et se terminent par */ Commentaire JavaScript /* un commentaire sur plusieurs lignes */ et des commentaires sur une ligne : ils débutent par // Commentaire Javascript // un commentaire une ligne Note : Il semblerait que la présence des accents et des apostrophes dans ces commentaires contribuerait à une mauvaise interprétation des scripts. Cette source d'erreurs peut-être levée en précisant le charset du fichier JavaScript. Les DOCTYPE en HTML De plus, l'utilisation de commentaires multilignes peut perturber l'interprétation dans le cas d'utilisation d'expressions régulières du fait de la présence possible des caractères /* ou */ dans celles-ci. II.4. Objets internes Les objets internes JavaScript commencent par une majuscule : String, Math, Array, Boolean, Date, Number, Function (à ne pas confondre avec le mot-clef function), RegExp, etc... Les méthodes ainsi que les propriétés d'un objet commencent par une minuscule. Toutes les méthodes internes à JavaScript sont sensibles à la casse (« case sensitive »).  exemple de méthodes : toLowerCase() ; getElementById() ; charAt() ; fromCharCode() ; etc.  exemple de propriétés : id ; type ; innerHTML ; tagName ; style ; etc. L'accès à une méthode ou à une propriété d'un objet se fait en plaçant un point entre le nom de l'objet et la propriété ou la méthode. var monObjet = document.getElementById("idObjet"); monObjet.style.display = "none"; ou document.getElementById("idObjet").style.display = "none"; Le JavaScript Par : KENGNE T. Vianney 6 Note : Le langage JavaScript est un langage « case sensitive » : les variables, les méthodes, les attributs, les mots-clefs, etc. ont une syntaxe très précise. Le non-respect de cette règle peut conduire à une mauvaise exécution des scripts. II.5. Accolades Plusieurs écoles : les accolades ouvrantes sont placées sur la même ligne que la condition ou la boucle ; ou un retour à la ligne est effectué pour l'accolade ouvrante. Accolades ouvrantes en fin de ligne function maFonction() { if (test1) { ................. ................. } else{ ................. ................. } for (i=0; i<n; i++){ ................. ................. } } Accolades uploads/s3/ moncour-javascript.pdf