Remerciez-le!

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

02/11/2021 1 Chapitre 4 Le langage Javascript 126 Développement Web - L3 – TIC

02/11/2021 1 Chapitre 4 Le langage Javascript 126 Développement Web - L3 – TIC & SE - BEN SALEM M. Introduction • Le HTML présente les limites suivantes : Absence de structures de contrôle de flux (structures algorithmiques). Aucune connectivité avec les serveurs de base de données. Pas d'interactions avec l'utilisateur. • Pour étendre les capacités du langage HTML deux solutions ont été mises en œuvre : Utilisation d'un langage coté client Utilisation d'un langage coté serveur 127 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 2 Langages coté client • Les langages coté client permettent quand à eux d'utiliser les ressources du navigateur pour : contrôler la validité du contenu saisit par l'utilisateur avant la soumission du formulaire, enrichir le contenu des pages Web avec un contenu interactif et/ou animé. • Ces langages possèdent l'avantage de ne pas nécessiter d'installations supplémentaires. 128 Développement Web - L3 – TIC & SE - BEN SALEM M. Langages coté serveur • Les langages coté serveur possèdent l'avantage de : • connectivité aux bases de données, • transparence du code source, • et d'autres fonctionnalités liées principalement à la sécurité de données. • Le test de ces Scripts avant de leur publication nécessite l'installation d'un serveur Web. 129 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 3 Javascript • Javascript est un langage de scripts qui incorporé aux balises Html. • Pour écrire et tester des codes Javascript il vaut faut un navigateur Web qui reconnaît Javascript (IE, Netscape, Mozilla Firefox,…), un éditeur de traitement de texte (Notepad++, bloc note,Word pad…) et une solide reconnaissance du langage HTML. • Le code du Javascript a la forme suivante : • <script language=’’javascript’’> Instruction 1 ; Instruction 2 ; . Instruction 3 ; .. Instruction n ; </script> 130 Développement Web - L3 – TIC & SE - BEN SALEM M. Intégration du code Javascript • Il existe 4 manières d’insérer le code Javascript dans une page HTML : 1. Insertion pour exécution directe 2. Exécution en fonction d’un événement 3. Insertion du code JS à l’intérieur d’une balise html 4. Appel du code JS à partir d’un fichier d’extension « .js » 131 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 4 Intégration : Insertion pour exécution directe • Le code s’exécute automatiquement lors de chargement de la page HTML au niveau du navigateur. • Le code javascript est placé dans le corps de la page html c'est-à- dire entre <body>…</body> Exemple1 : le code JS suivant: <html> <head><title>Exemple 1</title></head> <body> <b>Exemple d’exécution directe du javascript</b> <br> <script language=’’javascript’’> alert(“Ce message est affiché automatiquement”); </script> </body></html> 132 Développement Web - L3 – TIC & SE - BEN SALEM M. Intégration : Insertion pour exécution directe (Exemple) 133 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 5 Intégration : Exécution en fonction d’un événement : • le code s’exécute seulement lors d’un événement généré par intervention de l’utilisateur. • Exemple 2 : 134 Développement Web - L3 – TIC & SE - BEN SALEM M. Intégration : Insertion du code JS à l’intérieur d’une balise html • Dans ce cas le code Javascript peut être inséré directement au niveau de la balise comme suit : • Exemple3 : 135 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 6 Intégration : Appel du code JS à partir d’un fichier d’extension « .js » • On peut faire appel aux codes JS écrits dans des fichiers qui portent l’extension « .js » dans la page HTML. • Intérêt de cette procédure est de réutiliser ces codes dans d’autres pages HTML autant de fois désirées. • Pour intégrer un même script dans plusieurs pages Web. • Il faudra : Ecrire le script dans un fichier indépendant. Enregistrer ce fichier avec une extension ".js". Ajouter le code HTML suivant dans toutes les pages qui devront inclure ce script : <script language="JavaScript" src="fichier.js"></script> 136 Développement Web - L3 – TIC & SE - BEN SALEM M. Syntaxe générale : Caractéristiques • Description de la syntaxe • Variables faiblement typées • Opérateurs et instructions identiques au C/C++/Java • Des fonctions/procédures globales (méthodes associées à tous les objets) • fonctions/procédures/méthodes déﬁnies par l’utilisateur • Des « objets » (des prototypes) prédéﬁnis (String, Date, Math, etc.) • Commentaires : // ou /*...*/ • Séparateur d’instruction : ‘;’ 137 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 7 Catégories des Objets JavaScript • Les objets JavaScript sont classés en deux catégories : Objets d'interface Objets Prédéfinis • Hiérarchie des objets visuels : La figure suivante présente la hiérarchie des objets de l'interface. 138 Développement Web - L3 – TIC & SE - BEN SALEM M. Les objets de l’interface Pour fixer un objet, préciser son « chemin d’accès » dans l’arborescence. 139 Exemple ?? Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 8 Les objets de l'interface 140 • La fenêtre est représentée par l'objet : window • Le contenu de la page Web est accessible via l'objet : document • Le document peut contenir plusieurs autres éléments dont le formulaire nommé ici : formulaire • Les éléments du formulaires sont accessibles via leurs noms: nom, prenom, age Développement Web - L3 – TIC & SE - BEN SALEM M. Les Objets de l'interface : Notion d'objet, propriété et méthode • Il est possible d'accéder aux objets en JavaScript à travers leurs propriétés et leurs méthodes. • Toute variable membre d'un objet est appelée propriété : état d'un objet. • Toute fonction membre d'un objet est appelée méthode : action relative à un objet. 141 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 9 Les Objets de l'interface : Exemple • Pour affecter une valeur dans le contrôle nom on pourra écrire : • window.document.formulaire.nom.value = "cours javascript"; • document.formulaire.nom.value = "cours javascript"; // correcte sans window • formulaire.nom.value = "cours javascript"; // correcte sans window.document • nom.value = "cours javascript"; // incorrecte 142 Développement Web - L3 – TIC & SE - BEN SALEM M. Les Objets prédéfinis : Les boîtes de dialogue : • Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, • Elle permet soit : d'avertir l'utilisateur, le confronter à un choix, lui demander de compléter un champ pour récupérer une information. 143 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 10 Les Objets prédéfinis : Une méthode • Une méthode est une fonction associée à un objet, c'est-à- dire une action que l'on peut faire exécuter à un objet. • Les méthodes des objets du navigateur sont des fonctions définies à l'avance par les normes HTML, on ne peut donc pas les modifier, il est toutefois possible de créer une méthode personnelle pour un objet que l'on a créé soi-même. • Prenons par exemple une page HTML, elle est composée d'un objet appelé document. • L'objet document a par exemple la méthode write() qui lui est associée et qui permet de modifier le contenu de la page HTML en affichant du texte. 144 Développement Web - L3 – TIC & SE - BEN SALEM M. Les Objets prédéfinis : La méthode alert() • Alert() est une méthode de l'objet Window. Pour se conformer à la notation classique nom_de_l'objet.nom_de_la_propriété, on aurait pu noter window.alert(). • Window venant en tête des objets Javascript, celui-ci est repris par défaut par l'interpréteur et devient en quelque sorte facultatif. • Voici sa syntaxe : alert(nom_de_la_variable); alert('Chaîne de caractères’); alert('Chaîne de caractères’ + nom_de_la_variable); • Caractère spécial \n : créer une nouvelle ligne dans le texte 145 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 11 Les Objets prédéfinis : La méthode confirm(): • La méthode confirm() est similaire à la méthode alert(), si ce n'est qu'elle permet un choix entre "OK" et "Annuler". • Elle admet comme alert() un seul paramètre: une chaîne de caractères... • Sa syntaxe est : • confirm('Chaîne de caractères'); 146 Développement Web - L3 – TIC & SE - BEN SALEM M. Les Objets prédéfinis : La méthode prompt() • La méthode prompt fournit un moyen de récupérer une information provenant de l'utilisateur, on parle alors de boîte d'invite. • La méthode prompt() requiert deux arguments : • le texte d'invite, • la chaîne de caractères par défaut dans le champ de saisie. • Sa syntaxe est donc la suivante : • prompt('Posez ici votre question','chaîne par défaut’); 147 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 12 Les Objets prédéfinis : La méthode prompt() 148 1 Développement Web - L3 – TIC & SE - BEN SALEM M. Les Objets prédéfinis : La méthode prompt() 149 2 3 Développement Web - L3 – TIC & SE - BEN SALEM M. 02/11/2021 13 Les Objets prédéfinis uploads/S4/ chapitre4-coursprogrammationweb-malekbensalem.pdf