Cours 5: Scripts Clients Pr. Namar Ydriss Université Paris II Panthéon - Assas Informatique de base Cours 5: Scripts Clients 27/11/2018
Des clients et un serveur Serveur HTTP Client1 Client 200000 Le serveur envoie un fichier à chaque client. Un fichier contient une page HTML qui peut contenir des programmes, appelés SCRIPTS Clients.
Javascript Langage de script orienté objet Permet de développer des petites applications internet client / serveur Autorise une interactivité accrue des pages web
Concepts fondamentaux Code javascript dans la page HTML exécuté: au chargement de la page suite à une action (clic sur un bouton, sélection d'un menu, saisie de texte, etc...)
Fonctionnalités d’un script Affichage de l'heure Défilement des textes horizontalement Rafraîchir plusieurs frames Gérer les erreurs de saisie dans les formulaires Gérer des menus déroulants Gérer le remplacement d'images (passage de la souris => image se modifie)
Mécanique du script Entouré des balises <SCRIPT LANGUAGE="Javascript"> et </SCRIPT> Placé entre les balises <HEAD> et </HEAD> ou à l'intérieur du corps du fichier HTML Déclancheur d'événements Onload(), OnClick(), OnBlur(), OnMouseOver()…
Test de version Instructions permettant de tester la version du navigateur Empêche l'exécution du script sur un navigateur incompatible avec votre script ²
Boite de dialogue par passage sur un lien Le passage de la souris sur le lien activera une boite de dialogue Passez la souris ici Syntaxe <A HREF=“ “ onMouseOver="alert('Votre Message'); return true;"> Passez la souris ici</A>
Boite de dialogue en arrivant sur une nouvelle page Le passage de la souris sur le lien activera une boite de dialogue Cliquez ici pour ouvrir une nouvelle page Nouvelle page
Syntaxe <HTML> <HEAD> <TITLE>Javascript</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- on cache pour les vieux navigateurs function loadalert () {alert("Votre Message") } // -- fin --> </SCRIPT> <BODY onLoad="loadalert()"> </BODY> </HTML>
Ouverture d'un lien dans une nouvelle fenêtre Syntaxe <FORM> <INPUT TYPE="button" VALUE="Titre du Lien" ONCLICK="window.open('votre lien ici ex: http://www.asi.fr/Malibu/htmldoc.htm', 'Exemple', 'toolbar=yes, location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes, width=600, height=400')"> </FORM>
Boutons Précédent - Suivant Syntaxe <SCRIPT LANGUAGE="JavaScript"> <!-- on cache pour les vieux navigateurs function goHist(a) { history.go(a); } // --> </SCRIPT> <FORM METHOD="post"> <INPUT TYPE="button" VALUE="Précédent" onClick="goHist(-1)"> <INPUT TYPE="button" VALUE="Suivant" onClick="goHist(1)"> </FORM>
Bouton Actualiser Identique à celui disponible dans la barre d'outils de votre navigateur Syntaxe <FORM> <INPUT TYPE="button" VALUE="Actualiser" onClick='parent.location="javascript:location.reload()"'> </FORM>
Boutons avec message Choisissez une des options suivantes:
Syntaxe <FORM> 1: <INPUT TYPE="radio" NAME="radio" value="Votre message ici" onClick="alert(value)"> 2: <INPUT TYPE="radio" NAME="radio" value="Votre message ici" onClick="alert(value)"> 3: <INPUT TYPE="radio" NAME="radio" value="Votre message ici" onClick="alert(value)"> </FORM>
Changement de couleurs Cliquez sur une des couleurs et observez le changement de la couleur du fond d'écran
<FORM> <SELECT Size="20" name="clr" onChange="document <FORM> <SELECT Size="20" name="clr" onChange="document.bgColor=this.options[this.selectedIndex].value"> <OPTION VALUE="white" SELECTED> blanc <OPTION VALUE="blue">bleu <OPTION VALUE="aquamarine">bleu-vert <OPTION VALUE="chocolate">chocolat <OPTION VALUE="darkred">rouge foncé <OPTION VALUE="gold">doré <OPTION VALUE="red">rouge <OPTION VALUE="yellow">jaune <OPTION VALUE="hotpink">rose <OPTION VALUE="lime">citron vert <OPTION VALUE="darkkhaki">kaki foncé <OPTION VALUE="cadetblue">bleu cadet <OPTION VALUE="darkgoldenrod">doré foncé <OPTION VALUE="darkslateblue">bleu foncé <OPTION VALUE="deeppink">rose profond <OPTION VALUE="tan">tanné <OPTION VALUE="wheat">blé <OPTION VALUE="tomato">tomate <OPTION VALUE="springgreen">vert <OPTION VALUE="turquoise">turquoise </SELECT> </FORM> Syntaxe
Script etud.free.fr/imagealeatoire.htm Charger N images. (N=7) Générer un nombre aléatoire I tel que 0<I <N+1 Afficher l’image d’index I. <SCRIPT LANGUAGE="JavaScript"> today=new Date();jran=today.getTime(); <!-- number est le nombre N. Ici N=3 mais peut aller jusqu'à 7 --> var number = 3; var random_number="";var image="";var text_color="";ia=9301;ic=49297;im=233280; jran = (jran*ia+ic) % im; random_number = Math.ceil( (jran/(im*1.0)) *number); // Loads the appropriate image and text color based on random number. if (random_number==1) {text_color="000000";image="img/agres.jpg";} if (random_number==2) {text_color="000000";image="img/aikido.jpg";} ……
Script etud.free.fr/imagealeatoire.htm Afficher l’image d’index I. <SCRIPT LANGUAGE="JavaScript"> <!-- Begin document.open(); document.write("<img src='"+image+"' >"); // End --> </SCRIPT> <!-- STEP THREE: Place this script in the BODY of the HTML document --> <FORM> <INPUT TYPE="button" VALUE="Reload Page" onClick="window.location='imagealeatoire.htm'"> </FORM> ……
Script etud.free.fr/imagedynamique.htm Charge une image. Déplace l’image à chaque instant. <body> <div id="img" style="position:absolute;"> <!-- votre image --> <img src="img/mdri5.jpg" onClick="pause_resume();"> </div> ---------------------------------------------------------------------------------------------------------- function changePos() ……….. function start() { img.visibility = "visible"; interval = setInterval('changePos()', delay); } function pause_resume() { if(pause) {clearInterval(interval);pause = false;} else {interval = setInterval('changePos()',delay);pause = true;}} start();
T.D. 5 Script simple: déclenchement d ‘évènements <FORM> <INPUT TYPE="button" value="Exécuter" onClick="window.alert('Pourquoi pas la Boite ?')"> </FORM> Script image aléatoire: Le modifier avec 7 images de sport: http://etud.free.fr/img/ Composer un tableau 2 lignes et 2 colonnes et insérer une image aléatoire dans chaque cellule. Modifier le script pour que 4 nouvelles images apparaissent après un temps T. Par exemple T=5 secondes.