Programmation réseau. Informatique de l Internet: Javascript et PHP. Javascript (2) Javascript (1) PHP (2) PHP (1)

Dimension: px

Commencer à balayer dès la page:

Download "Programmation réseau. Informatique de l Internet: Javascript et PHP. Javascript (2) Javascript (1) PHP (2) PHP (1)"

Eliane François
il y a 6 ans
Total affichages :

1 Informatique de l Internet: Javascript et Joël Quinqueton Dépt MIAp, UFR IV UPV! Université Montpellier III Programmation réseau Exécution client Le navigateur prend en charge l exécution du code Le code a un accès limité aux ressources côté client Exécution serveur Envoi d un requête au serveur commandant l exécution d un programme Scripts embarqués Application (servlets) Javascript (1) Mis au point par Netscape Maintenant pris en charge par la plupart des navigateurs Effort de standardisation ECMA (European Computer Manufacturers Association) (Aussi soumis aux spécifications du DOM / W3C) Javascript (2) Un exemple Le script est embarqué dans le document HTML Certains éléments/attributs du document lancent le script <input type="button" value="grade quiz" onclick="gradequiz(this.form)"> Le script accède aux éléments qui composent le document Utile pour valider des questionnaires côté client, par exemple (1) Personal Home Page «A la GNU» : Hypertext Preprocessor Produit Open Source, gratuit Largement diffusé et utilisé Robuste (2) Le script est stocké côté serveur Une action côté client provoque le lancement du programme (et le chargement de paramètres client envoyés via une requête) Le programme est exécuté côté serveur (pas par le navigateur)

2 (3) <FORM ACTION="stockerQuest.php" METHOD="post> Le contenu du cours, tel que décrit dans le document "<a href="../cours/plan.zip">plan du cours</a>" correspond-il à vos attentes?... (4) Le langage comporte des outils facilitant l interface avec les bases de données (mysql, ) Fichier stockerquest.php Servlet Java (1) Repose sur la technologie Java Exécution d application Java (non embarquée) côté serveur Plus structurée Les applications Java sont alors soumises aux limitations du contexte client-serveur Servlet Java (2) public class SimpleServlet extends HttpServlet { /** * Handle the HTTP GET method by building a simple web page. */ public void doget (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out; String title = "Simple Servlet Output"; // set content type and other response header fields first response.setcontenttype("text/html"); // then write the data of the response out = response.getwriter(); out.println("<html><head><title>"); out.println(title); out.println("</title></head><body>"); out.println("<h1>" + title + "</H1>"); out.println("<p>this is output from SimpleServlet."); out.println("</body></html>"); out.close(); Programmation objets Un objet (informatique) participe de la dynamique d un système (d information) Il détient des informations, offre des services () <HTML> <HEAD> <TITLE> Validation/alert example </TITLE> </title></head> <SCRIPT> function validate(obj, lowval, hival) { if ((obj.value < lowval) (obj.value > hival)) alert("le nombre doit être dans l'intervalle [0, 10]") </SCRIPT> <BODY><FORM NAME="choice"> <P><B>Entrez un nombre entre 0 et 10:</B> <input type=text NAME="numChoice" size="5"> <P> <INPUT TYPE="button" VALUE="Soumettre" onclick="validate(numchoice, 0, 10)"> </FORM> </BODY> </HTML>

3 DOM (1) Un document HTML possède une représentation interne, accessible depuis l application hôte Structure arborescente Un nœud de l arborescence: donne accès à ses descendants informe sur la valeur courante des attributs effectue des modifications (valeurs des attributs, structure du sous-arbre DOM (2) Les langages de programmation (réseau) offre des moyens d accéder au document, des méthodes pour les inspecter/modifier/contrôler/ DOM (3) Un objet peut être composé d autres objets Un document HTML peut contenir un ou plusieurs objets formulaires Le document peut offrir des méthodes pour parcourir l ensemble des formulaires, les uns après les autres <SCRIPT> function howmany(selectobject) {!!!var numberselected=0;!!!for (var i=0; i < selectobject.options.length; i++) {!!!!!!if (selectobject.options[i].selected==true)!!!!!!!!!numberselected++;!!!!!!return numberselected; </SCRIPT> <FORM NAME="selectForm"> <P><B>Choose some music types, then click the button below:</b> <BR><SELECT NAME="musicTypes" MULTIPLE> <OPTION SELECTED> R&B <OPTION> Jazz <OPTION> Blues <OPTION> New Age <OPTION> Classical <OPTION> Opera </SELECT> <P><INPUT TYPE="button" VALUE="How many are selected?" onclick="alert ('Number of options selected: ' + howmany(document.selectform.musictypes))"> </FORM> Langage interprété (pas de compilation) Exécution ligne à ligne par un moteur d interprétation (embarqué avec le navigateur) Langage non typé Le type des variables est implicite (selon la valeur qui leur est affectée) Les variables sont globales (sauf si déclarée dans une fonction) Structuration du code Structure de données: tableaux (dynamiques) Structures de contrôle habituelle: boucles, expression booléenne, etc. Blocs Fonctions Définition de classe (type d objets)

4 Manipulation du document Parcours des formulaires et des objets qui les composent Validation des saisies utilisateur Affichage de fenêtre d alerte Mots réservés this (objet courant) form (formulaire parent) <form name="evaluatequest"> <center> <input type="button"! value="gradequiz" onclick="gradequiz(this.form)"> </center> The number you got right: <input type=text name="grade" size=5> Percent Correct: <input type=text name="percent" size=5> </form> Langage non typé Structures de contrôles Tableaux, manipulation de chaînes de caractères Fonctions Accès entrées/sorties (côté serveur) Accès/connexion bases de données Le script invoqué est précisé dans le formulaire d origine Les variables (objets formulaires) de la page d origine sont passés au script appelé Le script peut au passage Stocker Lire des valeurs dans des fichiers La plupart des commandes UNIX ont un équivalent php mkdir chdir (cd) lstat (info sur un fichier)

5 fopen (modes read, write, append) fwrite is_file is-_dir : chargement de fichiers distants Utilise le type «file» de l objet «input» des formulaires <form name="upload" method="post" action="grabpage.php" enctype="multipart/form-data"> Sélectionner le fichier correspondant à votre questionnaire: <input type="file" name="userfile"> <input type="submit" name="submit" value="envoyez le fichier"> </p> </form> : chargement de fichiers distants _FILES[$userfile] stocke (automatiquement) des informations sur le fichier téléchargé $uploaddir = $user; if (move_uploaded_file($_files['userfile']['tmp_name'], $uploaddir."/".$_files['userfile']['name'])) { echo "Le fichier est valide, et a été téléchargé avec succès.\n";

Documents pareils

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des