Remerciez-le!

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

Développement WEB Dynamique ANNÉE UNIVERSITAIRE: 2019/2020 N. AZDAD Université

Développement WEB Dynamique ANNÉE UNIVERSITAIRE: 2019/2020 N. AZDAD Université Mohammed Premier Ecole Supérieure de Technologie Département Management Oujda Chapitre 2: Dynamisme coté client JAVASCRIPT Qu'est-ce que le JavaScript ? JavaScript est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes. Grâce à ce langage, il est possible d’écrire des pages interactives et dynamiques dans le coté client. Qu'est-ce que le JavaScript ? C’est un langage interprété, non compilé. Basé sur les objet, pas de classes ni d’héritage,... Code intégré dans HTML. Déclaration optionnelle des variables (typage faible). Une syntaxe proche des langages de programmation comme le C. Remarque: JavaScript ne doit pas être confondu avec Java. Le rôle de JavaScript Consultation des données. Validation de formulaires. Les données interactives. HTML dynamique. etc. A quoi ressemble un script ? Un script est une portion de code qui vient s'insérer dans une page HTML. Le code JavaScript doit être placé toujours à l’intérieur de script. <SCRIPT language="Javascript"> Placez ici le code de votre script. </SCRIPT> L’intégration du code JavaScript dans une page HTML D’habitude, on place la balise script à l’intérieur de la balise head. Exemple 1: <HTML> <HEAD> <TITLE> Voici une page contenant du JavaScript</TITLE> <SCRIPT language="Javascript"> document.write("Bonjour ") ; </SCRIPT> </HEAD> <BODY> </BODY> </HTML> L’intégration du code JavaScript dans une page HTML Cependant, il est possible de la mettre n’importe où, même dans la balise body. <HTML> <HEAD> <TITLE> Voici une page contenant du JavaScript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> document.write("Bonjour ") ; </SCRIPT> </BODY> </HTML> L’intégration du code JavaScript dans une page HTML Dans un fichier html, on peut appeler un fichier contenant du code JavaScript. <script src="NomFichier.js" > </script> Quand les instructions de script sont exécutées ? Vous avez quatre choix pour déterminer le moment où un script est exécuté : Tandis qu’un document se charge, Juste après le chargement d’un document, En réponse à l’action de l’utilisateur, Quand il est appelé par d’autres instructions du script. Exécution directe Un code qui est destiné à s’exécuter automatiquement lors du chargement de la page, on le met dans la balise body. <BODY> <SCRIPT language="Javascript"> document.write("Bonjour ") ; </SCRIPT> </BODY> Exécution différée Le code qui s’exécute lors d’un événement généré par intervention de l’utilisateur est placé dans la balise head. Dans ce cas, le code est lu par le navigateur, stocké en mémoire, pour ne s’exécuter que sur demande expresse. <head> <title>Exécution différée</title> <script language="JavaScript"> function auRevoir (){ alert("Au revoir");} </script> </head> <body onUnload=auRevoir();> </body> Les instructions de JavaScript Les actions effectuées sont les suivantes : Définir ou initialiser une variable ; Assigner une valeur à une propriété ou à une variable ; Changer la valeur d’une propriété ou d’une variable ; Appeler une méthode d’un objet ; Appeler une fonction ; prendre une décision. Les instructions de JavaScript Pour rendre plus clair et plus compréhensible notre programme, on peut placer des commentaires : • En utilisant le double slash // : tout ce qui se trouve à droite est commentaire. • Un commentaire sur plusieurs lignes doit être placé entre /*et */. Chaque commande doit être terminée par un pointvirgule (;). JavaScript est sensible à la casse. Les structures de contrôle Le conditionnel simple : if (expression_booléenne) { // Instructions } Le conditionnel avec la variante else : if (expression_booléenne) { // Instructions } else { // Instructions } Les structures de contrôle Le conditionnel multiple : switch (expression) { case etiquette_1 : // Instructions case etiquette_2 : // Instructions . . . . . . . . case etiquette_n : // Instructions default : // Instructions } Remarque: les instructions d’une étiquette case doit se terminer par une instruction break Les structures de contrôle La boucle while : while (expression_booléenne) { // Instructions } La boucle do . . . while : do { // Instructions } while (expression_booléenne) La boucle for : for (expr_1; expr_2; expr_3) { // Instructions } Où : – expr_1 : désigne une expression d’affectation. – expr_2 : désigne une expression booléenne. – expr_3 : désigne une expression valide. Les types de valeurs JavaScript Nombres : N’importe quel nombre sans guillemet, Chaînes de caractères: Une série de caractères à l’intérieur des guillemets Booléens : true ou false, Null. Objets : sont définis par leurs propriétés et méthodes (les tableaux sont également des objets), Fonctions. Variables Les variables contiennent des données qui peuvent être modifiées lors de l'exécution d'un programme. Chaque variable possède : ●un nom et une valeur ●doit être déclarée soit de façon explicite au moyen du mot réservé var. soit de façon implicite : nom_de_la_variable = valeur ; Variables (Exemple) <BODY> <SCRIPT LANGUAGE="JavaScript"> var chaine = "Mon chiffre est "; var variable = 5; document.write(chaine + variable); </SCRIPT> </BODY> Variables: Conversion de type 1+ "1" // résultat "11" 1+1+"1" // résultat "21" ( " " +2500) // résultat "2500" ( " " +2500).length // résultat "4" parseInt(chaîne) : traduit une chaîne de caractères en un numérique entier. parseInt("24" ) // donne 24 parseInt("24.25" ) // donne 24 parseFloat(chaîne) : traduit une chaîne de caractères en un numérique flottant. parseFloat("24" ) // donne 24 parseFloat("-24.25" ) // donne -24.25 String(Nombre) : traduit une valeur numérique en une chaîne de caractères. String(24 ) // donne la chaîne "24" String(-24.25) // donne la chaîne "-24.25" Objets Les objets de JavaScript, sont des entités appartenant au monde des navigateurs et du langage. Objets prédéfinis : Le navigateur qu’on utilise pour voir une page, est un objet qui s’appelle navigator. La fenêtre du navigateur est un objet nommé window. La page HTML est un objet que l’on appelle document. Un formulaire à l’intérieur d’un document, est aussi un objet appelé form. Un lien hypertexte dans une page HTML, est encore un autre objet appelé link. Nouveau objet: Pour définir un objet en JavaScript : var obj1 = new Object ( );. Le modèle objet de document Le modèle objet de document (Exemple) Considérons le code HTML suivant : <html> <head> <title> simple Document </title> </head> <body> <h1> Bonjour </h1> </body> </html> Cet exemple montre le HTML et le document objet correspondant pour un document très simple. Quand cette page se charge, l’explorateur garde en mémoire un plan des objets générés par les étiquettes HTML dans le document. Lorsque un document est chargé, l’explorateur génère un objet Document. L’objet window contient également un objet appelé location (il stocke l’information sur l’URL du document qui a été chargé). Propriétés Chaque objet JavaScript possède des propriétés, valeurs associées à l’objet. En JavaScript, pour accéder aux propriétés, on utilise la syntaxe : nom_de_l'objet.nom_de_la_propriété Exemple: <input type="text" name="nom" value="Ahmed"> Les propriétés de cet objet sont name et value. Méthodes Chaque objet JavaScript possède des méthodes. Ce sont des commandes dont les comportements sont attachés à un objet particulier. L'appel de la méthode se fait selon la notation : nom_de_l'objet.nom_de_la_méthode Exemple: document.write(); permet d’écrire dans le document. Méthodes de l'objet « document » Un des objets les plus importants de JavaScript est l’objet « document ». La méthode document.write() : permet d’écrire directement du texte sur la page Web active. La syntaxe est assez simple soit : document.write("message") ; On peut aussi écrire une variable, soit la variable resultat : document.write(resultat) ; Pour associer du texte (chaînes de caractères) et des variables, on utilise l'instruction : document.write("le résultat est " +resultat) ; Méthodes de l'objet « document » (Exemple) <HTML> <BODY> <H1>Ceci est du HTML</H1> <SCRIPT LANGUAGE="JavaScript"> document.write("<H1>Et ceci du JavaScript</H1>"); </SCRIPT> </BODY> </HTML> Méthodes de l'objet « document » La méthode getElementById() retourne un objet HTML à partir de son id. <input type="text" id="nom"> <script type="text/javascript"> document.getElementById("nom").value="changer"; </script> Méthodes de l'objet « document » La méthode getElementsByName retourne un tableau d’objets HTML ayant nom défini dans la propriété name de la balise de l’objet. <input type="text" name="toto" value=""> <BR><BR> <input type="text" name="toto" value=""><BR><BR> <input type="text" name="toto" value=""><BR> <script language=javascript> document.getElementsByName("toto")[0].value = "toto 0"; document.getElementsByName("toto")[1].value = "toto 1"; document.getElementsByName("toto")[2].value = "toto 2"; </script> Quelques méthodes de l’objet « window » L’objet window comprend des propriétés qui contiennent des informations sur la fenêtre du navigateur. Il propose des méthodes qui permettent de manipuler la fenêtre du navigateur. confirm(chaîne) : affiche une boîte de dialogue de confirmation sur laquelle apparaît le message contenu dans le paramètre chaîne. Cette boîte est dotée de deux boutons de commandes : « Ok » pour valider la confirmation et « Cancel » pour annuler la validation. window.confirm() et confirm() : les deux sont valides. Exemple : confirm("Voulez-vous quitter la page? "); Quelques méthodes de l’objet « window » alert(chaîne) : affiche une boîte de dialogue d’information sur laquelle apparaît le message contenu dans la chaîne argument « chaîne ». Pour un retour à la ligne on utilise \n. window.alert() et alert() : les deux sont valides. Exemple : alert("Cette page contient ...\n du JavaScript ! "); prompt(chaîne_1, chaine_2) : affiche une boîte de dialogue de saisie sur laquelle apparaît le message contenu dans le paramètre chaîne_1 et une zone de texte pour entrer une réponse qui peut être définie par défaut uploads/Litterature/ chapitre2-web-dynamique-pdf.pdf