Remerciez-le!

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

Qu'est-ce que le Javascript? Le Javascript est une extension du langage HTML qu

Qu'est-ce que le Javascript? Le Javascript est une extension du langage HTML qui est incluse dans le code. Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes. Les navigateurs et le Javascript: Navigateur Version de Javascript supportée Netscape 2 JavaScript 1.0 Netscape 3 JavaScript 1.1 Netscape 4 Javascript 1.2 MSIE 3.0 Javascript 1.0 MSIE 4.0 Javascript 1.2 MSIE 5.0 Javascript 1.3 Il ne faut pas confondre le JavaScript et le Java. En effet contrairement au langage Java, le code est directement écrit dans la page HTML, c'est un langage peu évolué qui ne permet aucune confidentialité au niveau des codes (ceux-ci sont effectivement visibles). D'autre part l'applet Java (le programme) doit être compilé à chaque chargement de la page, d'où un important ralentissement pour les applets Java contrairement au JavaScript. Javascript Java Langage interprété Langage compilé Code intégré au HTML Code (applet) à part du document HTML, appelé à partir de la page Langage peu typé Langage fortement typé (déclaration du type de variable) Liaisons dynamiques: les références des objets sont vérifiées au chargement Liaisons statiques: Les objets doivent exister au chargement (compilation) Accessibilité du code Confidentialité du code Sûr: ne peut pas écrire sur le disque dur Sûr: ne peut pas écrire sur le disque dur Le Javascript est case sensitive (en français sensible à la casse), c'est-à-dire qu'il fait une différence entre un nom de variable contenant ou non des majuscules. Ainsi la fonction bonjour(); n'est pas la même fonction que Bonjour();. Enfin, comme en langage C, chaque instruction se termine par un point-virgule (;). A quoi ressemble un script? Un script est une portion de code qui vient s'insérer dans une page HTML. Le code du script n'est toutefois pas visible dans la fenêtre du navigateur car il est compris entre des balises (ou tags) spécifiques qui signalent au navigateur qu'il s'agit d'un script écrit en langage JavaScript. Les balises annonçant un code Javascript sont les suivantes: <SCRIPT language="Javascript"> Placez ici le code de votre script </SCRIPT> Masquage du script pour les anciens browsers Ce code est ainsi invisible du point de vue du navigateur c'est-à-dire que ce dernier n'affiche pas dans sa fenêtre le code Javascript. Toutefois, d'anciens navigateurs, créés avant l'arrivée du Javascript, ne connaissent pas ces balises et donc les ignorent... Le code de votre Javascript risque donc de s'afficher sur votre belle page web et venir gâcher votre travail. L'astuce consiste donc à ajouter des balises de commentaires à l'intérieur même des balises de script. Ainsi les anciens navigateurs ignoreront tout simplement l'intégralité du script, tandis que les navigateurs récents l'interprèteront (comme il se le doit) comme du Javascript! Voici ce que donne le script une fois "masqué" pour les anciens navigateurs: <SCRIPT language="Javascript">  </SCRIPT> Ajouter des commentaires dans votre code Comme dans tout langage de programmation, il est bon d'ajouter des commentaires dans un de ses scripts  d'une part pour s'y retrouver lorsque, plusieurs mois après, l'on voudra revoir son script  d'autre part par esprit d'échange pour permettre à vos visiteurs curieux de comprendre votre script (cela n'est pas toujours désiré...) Il ne faut pas confondre les balises de commentaires du langage HTML (destinées à masquer le script pour certains browsers) et les caractères de commentaires Javascript (permettant de documenter son script)! Pour écrire des commentaires, Javascript utilise les conventions utilisées en lange C/C++  Pour mettre en commentaires tout une ligne on utilise le double slash: // Tous les caractères derrière le // sont ignorés  Pour mettre en commentaire une partie du texte (éventuellement sur plusieurs lignes) on utilise le /* et le */: /* Toutes les lignes comprises entre ces repères Sont ignorées par l'interpréteur de code */ Il faut veiller à ne pas embriquer des commentaires, au risque de provoquer une erreur lors de l'exécution du code! Un exemple de Javascript Comme généralement dans les tutoriels de Javascript on va faire afficher un boite de dialogue suite au chargement d'une page HTML. Dans ce cas le script est totalement inutile voire ennuyeux pour vos visiteurs... Cet exemple montre ce que l'abus de Javascript peut donner... Il faudra apprendre à se servir du Javascript avec modération! Voici la page HTML correspondante: <HTML> <HEAD> <TITLE> Voici une page contenant du Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript">  </SCRIPT> </BODY> </HTML> A quel emplacement insérer le Javascript dans votre page HTML Il y a plusieurs façon d'inclure du JavaScript dans une page HTML:  Grâce à la balise <SCRIPT>  En mettant le code dans un fichier  Grâce aux événements Dans la balise script Le code Javascript peut être inséré où vous le désirez dans votre page Web, vous devez toutefois veiller à ce que le navigateur est entièrement chargé votre script avant d'exécuter une instruction. En effet, lorsque le navigateur charge votre page Web, il la traite de haut en bas, de plus vos visiteurs (souvent impatients) peuvent très bien interrompre le chargement d'une page, auquel cas si l'appel d'une fonction se situe avant la fonction dans votre page il est probable que cela génèrera une erreur si cette fonction n'a pas été chargée. Ainsi, on place généralement le maximum d'éléments du script dans la balise d'en- tête (ce sont les éléments située entre les balises <HEAD> et </HEAD>). Les évènements Javascript seront quant à eux placés dans le corps de la page (entre les balises <BODY> et </BODY>) comme attribut d'une commande HTML... <SCRIPT language="Javascript">  </SCRIPT> L'argument de la balise <SCRIPT> décrit le langage utilisé. Il peut être "JavaScript" "JavaScript1.1" "JavaScript1.2". On peut ainsi (en passant un argument différent de "JavaScript") utiliser d'autres langages de programmation que celui-ci (par exemple le VbScript). Pour utiliser différentes versions de JavaScript tout en conservant une certaine compatibilité, il suffit de déclarer plusieurs balises SCRIPT ayant chacune comme paramètre la version du JavaScript correspondante. Dans un fichier externe Il est possible de mettre les codes de JavaScript en annexe dans un fichier (à partir de Netscape 3.0 uniquement). Le code à insérer est le suivant: <SCRIPT LANGUAGE=Javascript SRC="url/fichier.js"> </SCRIPT> Oû url/fichier.js correspond au chemin d'accès au fichier contenant le code en JavaScript, sachant que si celui-ci n'existe pas le navigateur exécutera le code inséré entre les 2 balises. Grâce aux évènements On appelle évènement une action de l'utilisateur, comme le clic d'un des boutons de la souris. Le code dans le cas du résultat d'un événement s'écrit: <balise eventHandler="code Javascript à insérer"> eventHandler représente le nom de l'événement. Pourquoi parle-t'on d'objets? Le but de cette section n'a pas pour ambition de vous faire connaître la programmation orientée objet (POO) mais de vous donner une idée de ce qu'est un objet, concept nécessaire à la création de scripts Javascript. Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des objets, c'est-à-dire des éléments  classés selon une hiérarchie pour pouvoir les désigner précisément  auxquels on associe des propriétés Cette notion semble floue pour l'instant mais voyons voir cela sur un exemple concret: Imaginez un arbre dans un jardin comportant une branche sur laquelle se trouve un nid. On suppose la hiérarchie d'objets est définie comme ceci:  jardin o arbre  branche  feuille  nid  largeur: 20  couleur: jaune  hauteur: 4  tronc  racine o salade o balançoire  trapèze  corde  nid  largeur: 15  couleur: marron  hauteur: 6 Le nid sur l'arbre est donc désigné comme suit: jardin.arbre.branche.nid Contrairement au nid situé sur la balançoire: balançoire.nid Imaginez maintenant que l'on veuille changer la couleur du nid (dans l'arbre) pour le peindre en vert, il suffirait de taper une commande du genre: jardin.arbre.branche.nid.couleur= vert; C'est donc ainsi que l'on représente les objets en Javascript, à la seule différence que ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur... Les objets du navigateur Javascript divise la page du navigateur en objets, afin de vous permettre d'accèder à n'importe lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés. On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu!  L'objet le plus grand est l'objet fenêtre (les objets en javascript ont leur dénomination en anglais, donc dans le cas présent window)  Dans la fenêtre s'affiche une page, c'est l'objet document  Cette page peut contenir plusieurs objets, comme des formulaires, des images, ... Pour accéder à un objet il faut donc partir de l'objet le plus grand (l'objet window pour descendre à l'objet que l'on veut atteindre. Prenez par exemple le bouton (appelé checkbox) et le champ de texte suivants: Essai du javascript  Le bouton checkbox (auquel on a donné le nom checkbox) est repéré par le code suivant: window.document.forms[0].checkbox  Le champ de texte (auquel on uploads/S4/ coursjavascript-id1805 1 .pdf