Master 1 Gnie Logiciel M 521 Web Java

Master 1 Génie Logiciel M 521 Web

Java Script

Scripts �Les scripts permettent de rendre les pages web dynamiques. �Un script est un programme écrit avec un langage de programmation �Son exécution est déclenchée par un événement qui se produit sur la machine cliente, soit automatiquement (comme au chargement d’un document HTML) soit suite à une action de l’utilisateur.

Scripts �Il existe 2 types de Scripts : �Scripts côté Serveur : situés et s’exécutent sur le serveur, et peuvent envoyer un résultat vers la machine cliente. Ils étaient anciennement de type CGI (Common Gateway Interface). Il existe aussi ASP, PHP, JSP, … �Scripts côté Client : plus rapides que les précédents. Ils peuvent accompagner le document HTML. Ils s’exécutent sur la machine cliente suite à un événement, et préservent ainsi les ressources du serveur

Scripts �Les scripts augmentent la réactivité et le dynamisme de documents HTML. �Exemple: �Actions particulières suite à un événement comme le chargement, déchargement, prise de focus d’un élément, mouvement de la souris, etc. . �Accompagner un formulaire et valider les données avant la soumission �Action liée aux commandes d’un formulaire (ex. : les boutons) pour simuler une interface utilisateur graphique

Scripts �Il existe 2 catégories principales de scripts: �Scripts à action unique : exécutés une seule fois, lors du chargement du document par l’utilisateur. Ils apparaissent dans le document à l’intérieur d’un élément SCRIPT �Scripts répétitifs : exécutés à chaque fois qu’un événement particulier se produit (ex: clic avec la souris sur un bouton)

Introduction à Java. Script �Le code Java. Script s'insère souvent dans la page HTML elle -même �Il peut aussi être inséré en faisant appel à un fichier ou module externe (src) �Dans ce cas, on écrit le lien suivant: <script src="URL du module externe"> …. </script> �Ce lien est placé entre <body>et</body> dans le cas d'une exécution à l'ouverture de la page �ou entre les Balises <head> et</head>pour une exécution différée �il est écrit sous forme de texte simple dans un fichier avec l'extension. js ou simplement. txt(texte)

Insérer un script dans du code HTML <html> <head> </head> <body> Ceci est une page HTML. <script language="Java. Script"> document. write("Ceci est un script Java. Script inséré dans cette page !") </script> Le HTML reprend la main. </body>

Les fonctions � function somme(a, b) { sum=a+b; return sum; }

Offrir une interactivité à une page HTML <html> <head> <script language="Java. Script"> function bonjour() { alert ("Bienvenue à Java. Script -dans une nouvelle fenêtre !"); } </script> </head> <body> <form> <input type="button" name="un. Bouton" value="Cliquez ici" on. Click="bonjour()"> </form> </body> </html>

Offrir une interactivité à une page HTML (suite) �Lors du chargement de la page �la fonction est mise en mémoire �la page est lue �La fonction est exécutée quand l'utilisateur appuie sur le bouton (Fonction On. Click) �On. Click="bonjour()" indique au navigateur que sur le clic du bouton il devra exécuter la fonction bonjour �Le "Alert" de la fonction ouvre une boîte de dialogue qui affiche le texte entre guillemets

Récupérer les données transmises par un utilisateur <html> <head> <script language="Java. Script"> function nom(chaine) { alert("Bonjour, "+chaine+"!"); } </script> </head> <body> Entrez votre nom s'il vous plait: <form> <input type="text" name="Entre. Nom" on. Blur="nom(this. value)"value=""> </form> </body> </html>

Récupérer les données transmises par un utilisateur (suite) �Cet exemple contient un champ de saisie (input type="texte")dans lequel l'utilisateur entre son nom �Le 'on. Blur' dans la balise <input> indique au navigateur quelle fonction il doit appeler lorsqu’il y a une saisie dans le formulaire �La fonction 'nom(chaîne)' s'exécute �quand l'utilisateur quitte le champ de saisie �ou utilise la touche "entrée" après avoir tapé un text �La fonction nom prend comme paramètre (this. value), la chaîne de caractères saisie dans le champ du formulaire

Récupérer les données transmises par un utilisateur (suite) <html> <head> <TITLE>Un script tout simple</TITLE> <script language="Java. Script"> function lecture(o) { alert("Vous avez tapé : "+o. mon. Texte. value); } </script> </head> <body> <form Name="Mon. Formulaire"> Entrer une Valeur : <input Name="mon. Texte" type="text" width="40"> <input type="button" value="OK" on. Click="lecture(this. form)"> </form> </body> </html>

Ouvrir des fenêtres <html> <head> <script language="Java. Script"> Function ouvrir. Fenetre() { msg=open("", "Fenetre", "toolbar=no, directories=no, menubar=no"); msg. document. write("<HEAD><TITLE>Coucou!</TITLE> </HEAD>"); msg. document. write(" <BODY><CENTER><h 1><B>Mais c'est une fenêtre ouverte. . . </B></h 1></CENTER></BODY>"); } </script> </head> <body> <form> <input type="button" name="Bouton" value="Cliquez-ici" on. Click="ouvrir. Fenetre()"> </form> </body> </html>

Ouvrir des fenêtres (suite) La fonction Ouvrir. Fenetre() crée une nouvelle fenêtre en appelant la méthode open (msg=open("", "Fenetre", "toolbar=no, directories=no, menubar=no"); ) �Les premières doubles-quotes contiennent l'URL de la page �Ici, vous pouvez mettre l'adresse d'un document HTML �Si vous le laissez vide, aucune page ne sera chargée et vous pourrez écrire dans cette fenêtre avec Java. Script �Les guillemets suivants indiquent le nom de la fenêtre. �Les guillemets suivants après spécifient les propriétés de la fenêtre (en mettant toolbar=yes, la fenêtre aura une barre d'outils)

Insertion code externe �Code source Java. Script placé entre <head> et </head> : <script src="jsexterne. js"> </script> �Code contenu dans le fichier externe jsexterne. js : Function affiche() { alert("Exemple de code à exécution différée par appel à un fichier ou module externe. n Ce message ne s'affiche que lorsque vous avez cliqué sur le bouton "Evénement". nn Cliquez sur OK poursuivre. ") }

Insertion code externe (suite) �Code source Java. Script du bouton placé entre <body> et </body> : <form> <input type="button" name="evenement" value="Cliquez ici pour générer un événement" on. Click="affiche()"> </form>

Les 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 ex. taille, poids, . . . qui doit commencer par une lettre (alphabet ASCII) ou le signe _ et être composée de lettres, chiffres et des caractères _ et $(à l'exclusion du blanc) �et une valeur ex: poids=55 ; taille = 1. 68 ;

Les variables (suite) �Une variable doit être déclarée �soit de façon explicite avec le mot réservé var taille ; �soit de façon implicite nom_de_la_variable= valeur ;

Les objets �Les pages HTML sont divisées en objets prédéfinis juxtaposés ou imbriqués les uns dans les autres ex. fenêtres, documents, formulaires, contrôles de formulaires, etc. . . �Hiérarchie: les objets sont juxtaposés ou imbriqués les uns dans les autres �Chaque objet possède un nom, des attributs et (éventuellement) des méthodes �Accès à un objet par la notation "point" : nom_de_l'objet. nom_de_la_propriété �Exemples : o. mon. Texte. value document. form. radio[0]. checked

Les objets (suite) �Les objets de Java. Script, sont des entités appartenant au monde des navigateurs et du langage. Ils sont: �Soit prédéfinis dans le langage �Soit créés par le programmeur �Par exemple, le navigateur utilisé pour voir une page est un objet qui s'appelle "navigator" �La fenêtre du navigateur dans laquelle s'affiche une page HTML, est un objet appelé "window" �La page HTML elle-même est un objet appellé "document" �Un formulaire est aussi un objet appelé "form" �Un lien hypertexte est un objet appelé "link" �etc. . .

Les objets (suite) �document. write("<BODY BGCOLOR="#FFFFFF"); �document. bg. Color="white"; �document. bg. Color="#FFFFFF"; // couleur d’arrière plan �document. get. Element. By. Id('par'). inner. HTML = '<b>modification du texte</b>'; �… �<p id ="par">test</p>

Boites de dialogues � alert : ouvre une petite fenêtre avec le texte indiqué et un bouton OK � qui reste ouverte jusqu'au clic de l’utilisateur sur le bouton � alert (Message à afficher) � prompt (=boite de saisie) : contient 2 boutons : OK et ANNULER (ou. Cancel) � prompt ( message [, texte d'entrée par défaut] ) � ex. : var permis = prompt (‘Possédez-vous le Permis de conduire ? ’, ’Oui’); � confirm (=boite de message) � affiche le message passé entre les parenthèses � Comporte 2 Boutons (OK et ANNULER (ou Cancel) ) � Retourne VRAI (true) si l'utilisateur clique sur OK et FAUX (false) sil clique sur ANNULER � ex. reponse = confirm(‘Voulez-vous tester ? ’) ? return true : return false ;

Le test conditionnel � if (Type="Ens") { window. location="Enseignant. htm"; } else { window. location="Etudiant. htm"; }

Les structures de boucles � function somme(N) { var sum=0; for (var i=1; i<=N; i=i+1) { sum=sum+i; } alert("Somme de 1 à "+N+" = "+sum); }

Les structures de boucles (suite) � function demander() { var nb=0; while (nb<=100) { nb=prompt("Entrez un nombre supérieur à 100"); } alert("Merci !"); }