Syst�mes d �Information

Document Sample
Syst�mes d �Information Powered By Docstoc
					Université Paris II                  Pr. Namar Ydriss
Panthéon - Assas




              Informatique de base
                  Cours 5: Scripts Clients




 29/01/2013                                             1
      Des clients et un serveur
                                                  Client2



Client1                                   Serveur HTTP


                                                  Client 200000


Le serveur envoie un fichier à chaque client. Un fichier
  contient une page HTML qui peut contenir des
  programmes, appelés SCRIPTS Clients.
                                                           2
          Javascript
Langage de script orienté objet

 Permet de développer des petites
applications internet client / serveur

 Autorise une interactivité accrue
des pages web


                                         3
  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...)



                                                    4
     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)


                                             5
       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()…
                                            6
         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




                                                 7
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>
                                             8
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


                                            9
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>
                                               10
 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>
                                             11
 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>                                    12
          Bouton Actualiser

Identique à celui disponible dans la
barre d'outils de votre navigateur

Syntaxe
 <FORM>
 <INPUT TYPE="button"
 VALUE="Actualiser"
 onClick='parent.location="javascript:l
 ocation.reload()"'>
 </FORM>

                                          13
     Boutons avec message

Choisissez une des options suivantes:




                                        14
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>


                                             15
    Changement de couleurs
Cliquez sur une des couleurs et observez le
changement de la couleur du fond d'écran




                                              16
          <FORM>
          <SELECT Size="20" name="clr"
Syntaxe   onChange="document.bgColor=this.options[this.selectedInd
          ex].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>                                                17
                  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";}
……

                                                                        18
                  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>
……



                                                                         19
                   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();
                                                                                                             20
                                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.

                                                                                        21

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:0
posted:1/30/2013
language:Unknown
pages:21