Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Informatique de base Pr. Namar Ydriss Cours 1: Introduction
Université Paris I Panthéon - Assas Informatique de base Cours 1: Introduction 27/11/2018
2
Comment échanger de l’ information
Serveurs : Adresse IP Serveur http : programme qui attend des demandes de clients
3
Des clients et un serveur
Serveur HTTP Client1 Client Le serveur envoie un fichier à chaque client. Page d ’accueil index.html ou introduction.html
4
Mécanisme d’interaction
Formulaire Script CGI (Common Gateway Interface)
5
Serveur HTTP Logiciel Apache: www.apache.org IIS : www.microsoft.com
Client1
6
Formes en HTML <FORM>
Votre nom : <INPUT TYPE=" text " NAME= " nom " SIZE =" 15 " MAXLENGTH= " 12 " > <BR> Commentaires : <INPUT TYPE=" text " NAME= " com " ROWS =" 6 " COLS= " 70 " > </FORM>
7
Formes Votre nom : Commentaires:
8
Boutons en HTML <FORM> <OL>
<INPUT TYPE=" radio " NAME= " legenre " VALUE = " Windows " > <BR> <INPUT TYPE=" radio " NAME= " legenre " VALUE = " Mac " > <INPUT TYPE=" radio " NAME= " legenre " VALUE = " Unix " > </OL> </FORM>
9
Boutons radio et checkbox
Windows Mac Unix
10
Question d ’Examen <FORM NAME="ValidForm">
Q1 : Un entier A est représenté en binaire par et un entier B par Alors: <br> <INPUT NAME="Q1" TYPE="radio" onClick="q1_OnClick(1)"> A+B=127 en décimal <BR> <INPUT NAME="Q1" TYPE="radio" onClick="q1_OnClick(2)"> A=B+1 en décimal <INPUT NAME="Q1" TYPE="radio" onClick="q1_OnClick(3)"> A+B=255 en décimal <INPUT NAME="Q1" TYPE="radio" onClick="q1_OnClick(4)"> A=B+11 en décimal </FORM NAME>
11
Boutons radio et checkbox
Q1 : Un entier A est représenté en binaire par et un entier B par Alors: A+B=127 A+B=1 A+B=255 A+B=11
12
Interface CGI : Common Gateway Interface Scripts DHTML (Dynamic HTML)
13
CGI Programme sur le serveur Lit les valeurs des champs Interagit
14
Formes et CGI Votre nom : Commentaires: jean send
15
Javascript Langage de script orienté objet
Permet de développer des petites applications internet client / serveur Autorise une interactivité accrue des pages web
16
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...)
17
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)
18
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()…
19
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
20
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>
21
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
22
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>
23
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: 'Exemple', 'toolbar=yes, location=yes, directories=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes, copyhistory=yes, width=600, height=400')"> </FORM>
24
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>
25
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>
26
Boutons avec message Choisissez une des options suivantes:
27
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>
28
Changement de couleurs
Cliquez sur une des couleurs et observez le changement de la couleur du fond d'écran
29
<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
30
Applications TD 4 Formulaires en HTML Radio, Checkbox, Button, Submit, Reset Select, Textarea
Présentations similaires
