JAVASCRIPT. LI288 web et développement web
|
|
|
- Alexis Gascon
- il y a 8 ans
- Total affichages :
Transcription
1 JAVASCRIPT LI288 web et développement web
2 Introduction Le Javascript est un langage "de script" simplifié "orienté objet" : Initialement élaboré par Netscape en association avec Sun Microsystem. Standardisé par un comité spécialisé, l'ecma (European Computer Manufactures Association). Javascript permet : De rendre dynamique un site internet développé en HTML : Validation de formulaires, calculs, messages, Modification de la page web, Communication avec un serveur directement (AJAX) De développer de véritables applications fonctionnant exclusivement dans le cadre d'internet.
3 Caractéristiques principales Le Javascript est : Ecrit directement dans le document HTML Un script encadré par des balises HTML Exécuté chez le client (pas d'appel réseau) Interprété (pas compilé) Supporté par la plupart des navigateurs web Syntaxe proche du C
4 Plan du cours Syntaxe : tests, boucles, fonctions Événements / Manipulation de page Objets JSON Cookies (AJAX)
5 JAVASCRIPT SYNTAXE LI288 web et développement web
6 HTML et JavaScript Deux types d insertion (comme CSS) Directement dans le fichier HTML Dans un fichier externe et inclus en HTML Utilisation de balises spécifiques : <script type="text/javascript"> </script>
7 Insertion dans une page HTML Dans le corps de la page HTML Le code s'exécute lors du chargement de la page <html> <body> <script type="text/javascript"> alert('bonjour'); </script> </body> </html>
8 Insertion dans une page HTML Dans l'entête de la page Le code s'exécute lors d'un événement venant de l'utilisateur Le code correspondant à cet événement se trouve dans le corps du document. En pratique les deux sont similaires sur la plupart des navigateurs <html> <head> <script type="text/javascript"> function f () { alert('au revoir'); } </script> </head> <body onunload="f()"> </body> </html>
9 Insertion dans une page HTML A placer dans le <head> ou le <body> Fichier en format texte Permet de réutiliser les scripts dans plusieurs pages Inconvénient : requête supplémentaire vers le serveur <html> <head> <script type="text/javascript" src="fichier.js"></script> </head> <body> <input type="button" onclick="popup()" value="clic"> </body> </html>
10 Structure d un script Similaire à Java ou C Règles générales On peut mettre des espaces n'importe où On sépare les commandes par des point-virgule ";" Les réels sont notés avec un "." et pas une virgule "," Commentaires : // ou /* */ // ceci est un commentaire /* ceci est aussi un commentaire */
11 Les variables Déclaration et affectation Déclaration avec le mot clé "var" Affectation avec le signe d'égalité (=) Remarques : La déclaration est faite par défaut (si affectation sans déclaration préalable) La lecture d'une variable non déclarée provoque une erreur Une variable déclarée non affectée est de type undefined (indéfinie) //Déclaration de i, de j et de k. var i, j, k; //Affectation de i. i = 1; //Déclaration et affectation de prix. var prix = 0; //Déclaration et affectation d'un tableau var car = ["a", "b", "c"];
12 Les variables Contraintes concernant les noms de variables : Les noms de variables ne peuvent contenir que des lettres, chiffres, ou le caractère "_" (underscore) var Mon_Prenom; // correct Les caractères spéciaux et accentués sont interdits : var Mon_Prénom; // incorrect Attention aux majuscules et minuscules : MonPrenom est différent de Monprenom. Un nom de variable ne peut contenir d'espaces. var Mon Prenom; // incorrect Les mots réservés JavaScript ne peuvent être utilisés comme noms de variable.
13 Les types de variables Principaux types : Chaînes Nombre (entier ou décimaux) : 10^-308 >nombre < 10^308 3 valeurs spéciales : Positive Infinity ou +Infinity (valeur infini positive) Negative Infinity ou Infinity (valeur infinie négative) Nan (Not a Number) en général le résultat d'une opération incorrecte Boolean true (vrai) et false (faux) Le type d une variable dépend de son contenu var mavariable = "Philippe"; // type chaîne mavariable =10; // type nombre (entier)
14 Les types de variables Deux types supplémentaires Type Undefined : Une seule valeur, undefined Type d'une variable avant qu'elle soit affectée Type Null : Une seule valeur, null Signale l absence de données dans une variable
15 Les objets typeof permet de connaitre le type d'une variable var i = 1; typeof i; //retourne number var titre="les raisins de la colère"; typeof titre; //retourne string var jour = new Date(); typeof jour; //retourne object var choix = true; typeof choix; //retourne boolean var cas = null; typeof cas; //retourne object typeof parsefloat; //retourne function typeof Math; //retourne object (IE 5.*, NS 6.*, NS 4.78, Opera 6.*, Opera 5.* typeof Math; //retourne function NS 3.*, Opera 3.*
16 Portée des variables Globale : Variable déclarée en début de script Accessible à n'importe quel endroit du programme Locale : Variable déclarée à l'intérieur d'une fonction Accessible uniquement dans la fonction
17 Syntaxe, les boucles Boucle for : for (i=0; i<5; i++) { } Boucle while : while (test) { } do { } while (test)
18 Syntaxe, les conditions if (test) {} else {} Tests possibles : Egalité : ==,!= Inférieur, supérieur : =<, >=, >, < Opérations bit à bit : &, Identique à : ===,!== (teste valeur et type) ('1' == 1) // true ('1' === 1) // false Opérations logiques : &&,
19 Les fonctions Définition : function mafonction(arg1,arg2) {instr;} Appel : mafonction("12",13); Exemple : calcul de la fonction factoriel Calcul récursif Choix (if) Mais aussi (à venir) : Appelé sur un événement Utilisation de document.getelementbyid Utilisation de this.value
20 Fonction factorielle <html> <head> <script type="text/javascript"> function fac(n){ if (n < 2) { return 1; } else { return n * fac(n-1); } } </script> </head> <body> <form> <input id="facarg type="text" onchange="result = fac(this.value); document.getelementbyid('facresult').value = result;"/> <input id="facresult" type="text" /> </form> </body> </html>
21 Arguments Pas de type dans la signature de la fonction La déclaration d'arguments est optionnelle On peut déclarer une fonction sans arguments On peut ensuite lui passer des arguments Et y accéder dans la fonction (via la variable arguments) function test(argument1) { alert("argument : " + argument1); alert("nombre d'args : " + arguments.length); for (var i=0 ; i<arguments.length ; i++) { alert("arg " + i + " : " + arguments[i]); } } test(); // undefined - 0 test("1"); // test("1","2"); //
22 Fonctions d ordre supérieur Une fonction peut prendre une fonction en argument Permet plus de flexibilité function carre(x) { } return x*x; function map (a,f) { for (var i=0 ; i<a.length ; i++) { a[i]=f(a[i]); } return a.tostring(); } map([1,2,3],carre);
23 Quelques fonctions de base Eval : Prend une chaîne de caractère Interprète cette chaine comme du code Javascript <html> <body> <script type="text/javascript"> eval('function carre(n){ return n*n;};alert(carre(2));'); </script> </body> </html>
24 Quelques fonctions de base isfinite Détermine si le paramètre est un nombre fini isnan Détermine si le paramètre n est pas un nombre NaN : Not a Number isfinite(240) //retourne true isfinite("un nombre") //retourne false isnan("un nombre") //retourne true isnan(20) //retourne false
25 Quelques fonctions de base parsefloat Analyse une chaîne de caractères et retourne un nombre décimal Si l'argument évalué n'est pas un nombre, renvoie NaN (Not a Number) parseint(string, base) Analyse une chaîne de caractères et retourne un nombre entier de la base spécifiée La base peut prendre les valeurs 16 (hexadécimal) 10 (décimal), 8 (octal), 2 (binaire) alert(5+"2"); // affiche 52 alert(5+parseint("2")); // affiche 7 parseint("10.33") // 10 parseint("40 years") // 40 parseint("he was 40") // NaN parseint("010") // base 8 (0 ) parseint("0x10") // base 10 (0x ) parseint("10",3) // base 3
26 Quelques fonctions de base Number Convertit l'objet spécifié en valeur numérique String Convertit l'objet spécifié en chaîne de caractères Escape Retourne la valeur hexadécimale à partir d'une chaîne codée en ISO-Latin-1. var jour = new Date("December 17, :24:00"); alert (Number(jour)); jour = new Date( ); alert (String(jour)); escape("!&") //retourne %21%26%
27 Opérations sur les chaînes La concaténation : utilisation de + var chaine = "bonjour" + "FI3/FCD1"; Déterminer la longueur d une chaîne : attribut length var ch1 = 'bonjour'; var longueur = ch1.length; Extraction d une partie de la chaîne : var datedujour = "04/04/03" var carac = datedujour.charat(2); Extrait le caractère en position 2 de la chaîne var mois = dattedujour.substring(3, 5); 3: est l indice du premier caractère de la sous-chaîne à extraire 5 : indice du dernier caractère à prendre en considération ; ce caractère ne fera pas partie de la sous-chaîne à extraire
28 JAVASCRIPT ÉVÉNEMENTS LI288 web et développement web
29 Gestionnaire d événements Les événements servent à interagir avec l'utilisateur On peut détecter les clics, les modifications de formulaires, Chaque événement a un identifiant De la forme onquelquechose Par exemple : onload, onclick, onmouseover, etc. Un événement peut exécuter du code javascript Une ou plusieurs instructions, en général un appel de fonction Activation : <balise onquelquechose="code javascript;">
30 Les événements de base Evénement onload Se produit lorsque une page web est chargée dans la fenêtre du navigateur Toute la page (y compris les images qu elle contient si leur chargement est prévu) doit avoir été chargée pour qu il ait lieu Cet événement peut être associé à une image seulement (il se produit alors une fois le chargement terminé)
31 Les événements de base Evénement onclick Se produit lorsque l utilisateur clique sur un élément spécifique dans une page, comme un lien hypertexte, une image, un bouton, du texte, etc. Ces éléments sont capables de répondre séparément à cet événement Il peut également être déclenché lorsque l utilisateur clique n importe où sur la page s il a été associé non pas à un élément spécifique, mais à l élément body tout entier
32 Les événements de base Événement onmouseover Analogue à onclick sauf qu il suffit que l utilisateur place le pointeur de sa souris sur l un des éléments précités (lien hypertexte, image, bouton, texte, etc.) pour qu il ait lieu Événement onmouseout A l inverse de onmouseover, cet événement se produit lorsque le pointeur de la souris quitte la zone de sélection d un élément.
33 Une liste plus longue Globales : Souris : onabort : chargement d'une image interrompu onerror : une erreur durant le chargement de la page onload : chargement de la page onunload : l'utilisateur quitte la page onblur : un élément perd le focus onclick : clic sur l'élément ondblclick: double clic sur l'élément ondragdrop : drag and drop sur la fenêtre du navigateur onfocus : le focus est donné à un élément onmouseover : la souris passe sur un élément onmouseout : la souris quitte un élément onresize : la fenêtre est redimensionnée
34 Une liste plus longue Formulaires : onchange : modification d'un champ de données onreset : effacement d'un formulaire à l'aide du bouton Reset. onselect : sélection d'un texte dans un champ "text" ou "textarea" onsubmit : clic sur le bouton de soumission d'un formulaire Clavier : onkeydown : appui sur une touche du clavier onkeypress : appui et maintient sur une touche onkeyup : relâchement d'une touche Attention, selon les versions de javascript, les événements peuvent ne pas exister.
35 Fonction factorielle <html> <head> <script type="text/javascript"> function fac(n){ if (n < 2) { return 1; } else { return n * fac(n-1); } } </script> </head> <body> <form> <input id="facarg type="text" onchange="result = fac(this.value); document.getelementbyid('facresult').value = result;"/> <input id="facresult" type="text" /> </form> </body> </html>
36 JAVASCRIPT OBJETS LI288 web et développement web
37 Les objets L opérateur New : créer une instance d'un objet Objet défini par l'utilisateur Objets prédéfinis, Array, Boolean, Date, Function, Image, Number, Object, ou String. nouvel_objet = new type_objet(parametres) texte = new String("Une chaîne de caractère");
38 Les objets - création Créer un objet et accéder à ses attributs/méthodes C'est simplement un tableau associatif! var obj = new Object(); obj["attribut"] = "valeur"; // ou obj.attribut = "valeur"; obj["methode"] = function(p) { alert("parametre : " + p);}; // ou obj.methode = alert(obj.attribut); obj.methode("test");
39 Les objets - création Version avec constructeur function Test(p,q) { this.att1=p; att2 = q; this.al = function() {alert(this.att1);} var al2 = function() {alert(att2)}; } var x = new Test(2,3); alert(x.att1); x.al(); alert(x.att2); try {x.al2();} catch(err) {alert(err);}
40 Les objets - création Création directe sous forme de tableau associatif : Séparation par des virgules "," cf JSON plus loin dans le cours. var obj = { att1: "valeur", monalerte: function(p) { alert("parametre : " + p);} }; alert(obj.attribut); obj.methode("test");
41 Les Objets Le contenu HTML est accessible sous forme d'objets : Le navigateur : objet "navigator" La fenêtre du navigateur : "window" La page HTML : "document" Un formulaire est aussi un objet Un lien hypertexte dans une page HTML est un objet Les objets peuvent réagir à des "Evénements" Les navigateurs ne supportent pas les mêmes objets
42 Les objets du navigateur
43 L'objet String Propriété : length : retourne la longueur de la chaîne de caractères Méthodes : anchor("lien") : formate la chaîne avec la balise <A> bold( ) : formate la chaîne avec la balise <B> charat( ) : renvoie le caractère se trouvant à une certaine position charcodeat( ) : renvoie le code du caractère se trouvant à une certaine position concat( ) : permet de concaténer 2 chaînes de caractères fromcharcode( ) : renvoie le caractère associé au code indexof( ) : trouve l'indice d'occurrence d'un caractère dans une chaîne substr( ), substring( ) : retourne une portion de la chaîne
44 L'objet Array Propriété : length : retourne le nombre d'éléments du tableau Méthodes : concat( ) : permet de concaténer 2 tableaux reverse( ) : inverse le classement des éléments du tableau slice( ) : retourne une section du tableau sort( ) : permet le classement des éléments du tableau
45 L'objet Math Propriétés : E, LN2, LN10, LOG2E, LOG10E, PI, SQRT2, SQRT1_2 Méthodes : abs(), max(), min(), sqrt(), pow(), exp(), ceil( ) : retourne le plus petit entier supérieur à un nombre floor( ) : retourne le plus grand entier inférieur à un nombre round( ) : arrondi un nombre à l'entier le plus proche random( ) : retourne un nombre aléatoire entre 0 et 1
46 L'objet Date Propriété : aucune Méthodes : getfullyear(), getyear(), getmonth(), getday(), getdate(), gethours(), getminutes(), getseconds(), getmilliseconds() getutcfullyear( ), idem en temps universel setfullyear( ), setyear( ), modification d'une date gettime( ) : retourne le temps stocké dans l'objet Date gettimezoneoffset( ) : retourne la différence entre l'heure du client et le temps universel togmtstring( ), tolocalestring( ), toutcstring( ) : convertissent la date en chaîne de caractère selon la convention GMT, selon la convention locale ou en temps universel
47 JAVASCRIPT MANIPULATION DE PAGE LI288 web et développement web
48 Entrées/sorties 3 types de boites de messages peuvent être affichés en utilisant Javascript Méthode alert() sert à afficher à l utilisateur des informations simples de type texte. Une fois que ce dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte Méthode confirm() permet à l utilisateur de choisir entre les boutons OK et Annuler. Méthode prompt() La méthode prompt() permet à l utilisateur de taper son propre message en réponse à la question posée La méthode document.write permet d écrire du code HTML dans la page WEB
49 Entrées/sorties <html> <head> <title> une page simple </title> </head> <body> <script type="text/javascript"> alert('bonjour'); document.write ( prompt('quel est votre nom?','indiquer votre nom ici') ); confirm('quel bouton allez-vous choisir?'); </script> </body> </html>
50 Les objets du navigateur L'objet le plus haut dans la hiérarchie est "window" qui correspond à la fenêtre même du navigateur. L'objet "document" fait référence au contenu de la fenêtre : "document" = ensemble des éléments HTML de la page. On peut accéder ces éléments avec : méthodes propres à l'objet document : getelementbyid( ) trouve l'élément avec son identifiant (ID) getelementsbyname soit des collections d'objets qui regroupent sous forme de tableaux Javascript tous les éléments de type déterminé.
51 L'objet window Propriétés : (accessibles avec IE et N) closed : indique que la fenêtre a été fermée defaultstatus : indique le message par défaut dans la barre de status document : retourne l'objet document de la fenêtre frames : retourne la collection de cadres dans la fenêtre history : retourne l'historique de la session de navigation location : retourne l'adresse actuellement visitée name : indique le nom de la fenêtre navigator : retourne le navigateur utilisé opener : retourne l'objet window qui a créé la fenêtre en cours parent : retourne l'objet window immédiatemment supérieur dans la hiérarchie self : retourne l'objet window correspondant à la fenêtre en cours status : indique le message affiché dans la barre de status top : retourne l'objet window le plus haut dans la hiérarchie
52 L'objet window Méthodes : blur( ) : enlève le focus de la fenêtre close( ) : ferme la fenêtre focus( ) : place le focus sur la fenêtre moveby( ) : déplace d'une distance moveto( ) : déplace la fenêtre vers un point spécifié open( ) : ouvre une nouvelle fenêtre print( ) : imprime le contenu de la fenêtre resizeby( ) : redimensionne d'un certain rapport resizeto( ) : redimensionne la fenêtre settimeout( ) : évalue une chaîne de caractère après un certain laps de temps
53 L'objet document Propriétés : applets, forms, images, links : retourne les collection d'applets java, formulaires présents dans le document cookie : permet de stocker un cookie domain : indique le nom de domaine du serveur ayant apporté le document referrer : indique l'adresse de la page précédente title : indique le titre du document <html><head><title>test</title></head> <body> <a href=" <a href=" <script type="text/javascript"> alert(document.title); for(var i=0; i < document.links.length; ++i) alert(document.links[i]); </script> </body></html>
54 L'objet document Méthodes : close( ) : ferme le document en écriture; open( ) : ouvre le document en écriture; write( ) : écrit dans le document; writeln( ) : écrit dans le document et effectue un retour à la ligne
55 L'objet navigator Propriétés appname : application (Netscape, Internet Explorer) appversion : numero de version. platform : système d exploitation (Win32) plugins language mimetypes JavaEnabled()
56 Manipulation des objets Pour adresser un objet, il faut préciser son «chemin d accès» dans l arborescence de la structure. Si le nom de la fenêtre est omis, le navigateur utilisera par défaut la fenêtre courante (attention aux frames) On peut omettre window.document (un seul objet "document") <html> <body onload="window.document.f1.zone.value='bonjour';"> <form name="f1"> <input name="zone" type="text"> </form> </body> </html>
57 Exemples <html><head> <script type="text/javascript"> function changecouleur(color) { var ml = document.getelementbyid("maliste"); ml.setattribute("style","color:"+color); } </script> </head><body> <ul id="maliste"> <li><a href="javascript: changecouleur ('red');">rouge</a></li> <li><a href="javascript: changecouleur ('blue');">bleu</a></li> <li><a href="javascript: changecouleur ('black');">noir</a></li> </ul> </body></html>
58 Pour aller plus loin Toutes les commandes sur : iétés Pour tester/débugger : Firebug Console d'erreur. Utiliser des alertes.
59 JSON JAVASCRIPT OBJECT NOTATION LI288 web et développement web
60 JSON? Format d'échange de données. Objectifs : Simple. Extensible. Ouvert. Lisible par un humain. Similaire à la définition des objets Javascript.
61 JSON : JavaScript Object Notation Les types de base Nombres entiers, rééls ou à virgule flottante Chaînes de caractères Booléen true et false Tableaux [, ] ou tableaux associatifs (objets) "clé":valeur : {, } null { } "Nom":"Guillaume", "Adresse": {"rue":"4 place Jussieu", "cp":"75004", "ville":"paris"}, "notes": [1, 2, 4, 8, 16, 32]
62 JSON et Javascript JSON peut être utilisé directement : Inclusion dans du HTML <script> var data = JSONdata; </script> Peut être converti en un objet Javascript responsedata = eval('(' + responsetext + ')');
63 JSON ou XML? JSON est très utilisé avec AJAX (le X de AJAX est pour XML) JSON : {"nom": "Guillaume", "prenom": "Jean-Loup"} XML : <?xml version='1.0 encoding='utf-8'?> <element> <nom>guillaume</nom> <prenom>jean-loup</prenom> </element>
64 JSON ou XML? Evaluation en JSON : var name = eval('(' + req.responsetext + ')').nom.value; Ou : eval('(' + req.responsetext + ')').xyz.abc.value; Accès simplifié aux différent niveaux.
65 JSON ou XML? Evaluation en XML : var root = req.responsexml; var name = root.getelementsbytagname( nom ); Ou : root.getelementsbytagname( xyz )[0].firstChild Un peu plus complexe
66 JSON ou XML Taille des données : plus petite en JSON (pas de fermeture de tag) XML se compresse mieux Vitesse : XML se parse mieux JSON s'évalue avec eval : peu efficace (pour l'instant) Choix : JSON : structures de données XML : structuration de documents A vous de faire votre choix!
67 JAVASCRIPT COOKIES LI288 web et développement web
68 Les Cookies Chaîne de caractères pouvant être écrite sur le disque dur. A un endroit défini. Ne peut être lue que par le seul serveur qui l'a générée. Que faire avec un cookie Transmettre des valeurs d'une page HTML à une autre. Exemple : gestion d'un caddie sur un site de vente en ligne. Personnaliser les pages présentées à l'utilisateur.
69 Les Cookies Limitations (théoriques, en pratique c'est faux) : Limites en nombre : Pas plus de 20 cookies par serveur. Limites en taille : un cookie ne peut excéder 4 Ko. Limites du poste client : Un poste client ne peut stocker plus de 300 cookies en tout. Stockage - dépend du navigateur IE : C:\Users\admin\AppData\Local\Microsoft\Windows\Temporary Internet Files Firefox :
70 Les Cookies - structure Nom=Contenu; expires=expdate; path=chemin; domain=nomdedomaine; secure Nom=Contenu; En-tête du cookie : deux variables suivies d'un ";" La variable Nom contient le nom à donner au cookie. La variable Contenu contient le contenu du cookie Exemple mon_cookie="oui:visite"
71 Les Cookies - structure Nom=Contenu; expires=expdate; path=chemin; domain=nomdedomaine; secure Expires= expdate; Le mot réservé expires suivi du signe "=" (égal). Date à laquelle le cookie sera supprimé du disque dur. Format : Wdy, DD-Mon-YYYY HH:MM:SS GMT A générer avec les fonctions de l'objet Javascript Date Règle générale : indiquer un délai en nombre de jours (ou d'années) avant disparition du Cookie.
72 Les Cookies - structure Nom=Contenu; expires=expdate; path=chemin; domain=nomdedomaine; secure path=chemin; chemin de la page qui a créé le cookie. domain=nomdedomaine; le nom du domaine de la page. secure (false par défaut) "true" (HHTPS) ou "false" (HTTP) : protocole utilisé. path, domain et secure sont facultatifs.
73 Les Cookies - écriture propriété de l'objet document : document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.togmtstring() ; // creation des variables var Nom = "MonCookie" ; var Contenu = "contenu" ; var expdate = new Date () ; // modification de la date d'expiration (10 jours) expdate.settime (expdate.gettime() + ( 10 * 24 * 60 * 60 * 1000)) ; // ecriture du cookie sur le disque document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.togmtstring() ;
74 Les Cookies - lecture Accéder à la propriété cookie de l'objet document : Document.cookie var lescookies ; lescookies = document.cookie ;
75 Les Cookies - modification Modification d'un cookie Modifier le contenu de la variable Contenu puis réécrire le cookie sur le disque dur du client Contenu = "Le cookie a été modifié..." ; document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.togmtstring() ;
76 Les Cookies - suppression Modifier la date de péremption : Mettre une date dans le passé. Le navigateur se charge du reste // on enlève une seconde a la date courante expdate.settime (expdate.gettime() - (1000)) ; // écriture sur le disque document.cookie = Nom + "=" + Contenu + "; expires=" + expdate.togmtstring() ;
77 AJAX LI288 web et développement web
78 Application traditionnelle Application WEB traditionnelle : Le client envoie une requete HTTP Le serveur renvoie une page Consommation inutile de la bande passante : Une grande partie du code HTML est commun aux différentes pages de l'application. Le chargement d une nouvelle page à chaque requête n est pas ergonomique
79 Application traditionnelle Requête 1 Réponse 1 Html Génération du document pour la requête 1 Requête 2 Client Réponse 2 Html Génération du document pour la requête 2 Serveur HTTP
80 AJAX Qu'est-ce qu'ajax? Asynchronous Javascript and XML Pourquoi AJAX: Javascript est très utilisé au niveau du client : validation de formulaire, modifications de la page, Tout ne peut pas être confié au client : Manque de sécurité/confiance Limitations
81 AJAX Principe de base : Le client et le serveur dialoguent. Autant faire en sorte que les messages soient le plus petits possibles. Le client n'a pas besoin de toute la base de données, juste de suffisamment de données pour le client. Le serveur et le client ont chacun un travail L'application ne doit donc pas être prise en charge entièrement d'un coté ou de l'autre.
82 AJAX = un acronyme de plus C'est juste du Javascript classique. Principe de base : L'application Javascript émet des requêtes vers le serveur avec un protocole donné. Le serveur répond avec les informations demandées. Tout se passe sans rechargement de la page. Mode synchrone ou asynchrone pour le client. Javascript traite les données reçues et modifie la page en conséquence.
83 Qui utilise Ajax Clients de messagerie : Gmail, Yahoo Mail, HotMail Google Maps FlickR, Picasa Deezer Youtube, Dailymotion Myspace, Facebook
84 AJAX Requête 1 Réponse 1 Html et Script Génération du document pour la requête 1 Requête 2 Client Script Réponse 2 Réponse 3 Données Requête 3 Données Génération du Document pour la requête 2 Génération du Document pour la requête 3 Serveur HTTP
85 Comment ça marche Un exemple sans AJAX : requête faite automatiquement par le navigateur récupération d'une image à distance <body onload="javascript:document.images[0].src = ' <img id="img01" src="vide.jpg"></a> </body>
86 Comment ça marche <input type= text size= 5 onblur= miseajour() > 1. La fonction miseajour crée un objet XMLHttpRequest Existe sur tous les navigateurs "modernes". 2. Cet objet permet de faire une requête vers la page concernée Conceptuellement identique à la recherche d'image. 3. On traite le résultat et on met à jour la page web
87 L'objet XmlHttpRequest AJAX se base sur XmlHttpRequest Initialement développé par Microsoft, en tant qu'objet ActiveX, pour Internet Explorer 5 Puis repris et implémenté sous Mozilla 1 Safari 1.2, Konqueror 3.4 et Opera 8. Pas supporté par certains vieux navigateurs. Proposé en 2006 pour devenir une recommandation du W3C : Draft novembre 2009
88 L'objet XmlHttpRequest Problèmes : Nécessite un navigateur compatible, autorisant le Javascript et XMLHTTP. Nécessite plus de tests car il existe de grandes différences entre les navigateurs. XMLHttpRequest n'est pas implémenté de la même manière selon les navigateurs (et les versions des navigateurs). Solution la plus simple : Aller chercher le code générique avec google.
89 Création de l'objet XMLHttpRequest Pour Internet Explorer (avant IE7) : xhr = new ActiveXObject("Microsoft.XMLHTTP"); Ou xhr = new ActiveXObject("Msxml2.XMLHTTP"); Pour les autres navigateurs : xhr = new XMLHttpRequest();
90 Création de l'objet XMLHttpRequest function getxmlhttprequest() { if (window.xmlhttprequest) { return new XMLHttpRequest(); } else { if (window.activexobject) { try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { return NULL; }}}}}
91 Création (bis) function getxmlhttprequest() { if (window.xmlhttprequest) return new XMLHttpRequest(); if (window.activexobject) { var names = [ "Msxml2.XMLHTTP.6.0", "Msxml2.XMLHTTP.3.0", "Msxml2.XMLHTTP", "Microsoft.XMLHTTP" ]; for(var i in names) { try { return new ActiveXObject(names[i]); } catch(e) {} } } window.alert("votre navigateur ne prend pas en charge l'objet XMLHTTPRequest."); return null; }
92 Exemple simple <html> <body> <script type="text/javascript"> function getxmlhttprequest() {...} function ajax() { var xhr=getxmlhttprequest(); xhr.open("get", "test.html", false); xhr.send(null); alert(xhr.responsetext); } </script> <a href="javascript:ajax();">cliquez-moi!</a> </body> </html>
93 Propriétés de l'objet onreadystatechange : Fonction appelée à chaque changement d'état. readystate : statut de l'objet : 0 : non initialisé. 1 : ouverture = méthode open() appelée avec succès. 2 : envoyé = méthode send() appelée avec succès. 3 : en train de recevoir = données en cours de transfert. 4 : terminé = données chargées. responsetext / responsexml Réponse sous forme de chaîne de caractères / objet DOM.
94 Propriétés de l'objet status : code numérique de réponse du serveur HTTP, à tester quand les données sont chargées (readystate=4) 200 : OK. 404 : page introuvable.... En local (sans serveur web), 0=OK statustext : message accompagnant le code de réponse : 404 : Not Found
95 Méthodes de l objet open(method, url, async, user, password) Prépare une requête en indiquant la méthode, l'url, la drapeau de synchronisation (et éventuellement le nom d'utilisateur et le mot de passe). send (contenu) Effectue la requête, éventuellement en envoyant les données. setrequestheader("champ","valeur") Assigne une valeur à un champ d'entête HTTP qui sera envoyé lors de la requête.
96 Méthodes de l objet abort() Abandonne la requête. getallresponseheaders() Renvoie l'ensemble de l'entête de la réponse sous forme de chaîne de caractères. getresponseheader("champentete") Renvoie la valeur d'un champ d'entête HTTP.
97 Synchrone ou asynchrone Requête synchrone : Tout est bloqué en attendant la réponse. Mauvais pour l'utilisateur. Les réponses arrivent forcément dans l'ordre. C'est l'approche classique. Requête asynchrone : Le navigateur continue à répondre aux événements en attendant la réponse. Attention à ne pas faire n'importe quoi.
98 Javascript Asynchrone Le choix entre synchrone et asynchrone se fait dans l'appel à XMLHttpRequest (méthode open) : true pour asynchrone false pour synchrone Dans le cas d un appel asynchrone, le résultat est récupéré par une fonction : xhr.onreadystatechange = function() {...}; Cette fonction sera appelée à chaque changement d'état de notre objet.
99 Pour résumer Deux méthodes principales : open : pour établir une connexion. send : pour envoyer une requête au serveur. Récupération des données : Champs responsexml ou responsetext. Créer un nouvel objet XmlHttpRequest, pour chaque fichier à charger.
100 Un exemple function ajax() { var xhr=getxmlhttprequest(); xhr.onreadystatechange = function() { if(xhr.readystate == 4) { if(xhr.status == 200) alert("received : " + xhr.responsetext); else alert("error code : " + xhr.status);}}; xhr.open("get", "test2.html", true); xhr.send(null); } <body> <a href="javascript:ajax();">cliquez-moi!</a> </body>
101 HTTP GET ou POST GET pour récupérer des données Ne devrait pas provoquer de mises à jour sur le serveur. Les requêtes GET doivent pouvoir être bookmarkées ou mises en cache. POST pour envoyer des données Pour tout ce qui ne correspond pas à un GET
102 AJAX : X = XML Le serveur renvoie des données XML La méthode responsexml de l objet XMLHttpRequest renvoie un document XML à traiter La méthode javascript getelementsbytagname(nom) d un objet (en l occurrence XML) permet de récupérer les éléments par rapport à leur nom dans un élément. var docxml= xhr.responsexml; var items = docxml.getelementsbytagname("donnee"); for (i=0;i<items.length;i++) { alert (items.item(i).firstchild.data); }
103 AJAX ou AJAJ : J = JSON XML pas évident à parser en Javascript (cf cours 1) On utilise plutôt JSON { "menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New","onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"}] } } }
104 Exemple d utilisation de JSON Coté client : JSON inclus dans JavaScript. Le contenu est assigné à une variable et devient un objet. // Création de la connexion : var req = new XMLHttpRequest(); req.open("get", "fichier.json", true); req.onreadystatechange = function() { if (req.readystate == 4) { var doc = eval('(' + req.responsetext + ')'); } } req.send(null);
105 Exemple d utilisation de JSON Coté serveur : Parseurs pour générer du JSON à partir d'objets en Php ou JAVA L'échange de données : Envoi avec AJAX <?php?> $arr = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5); echo json_encode($arr); Affiche : {"a":1,"b":2,"c":3,"d":4,"e":5}
106 Attention! Les requêtes AJAX asynchrones passent par Internet Aucune garantie que les paquets arrivent dans l'ordre. Aucune garantie qu'une requête soit terminée avant qu'une autre ne soit lancée : Les délais peuvent varier énormément à cause de la charge du serveur et du réseau.
107 Inconvénients JavaScript doit être activé. Les données chargées de façon dynamique ne font pas partie de la page. Prise en compte par les moteurs de recherche pas claire. Asynchrone => affichage avec délai, peut poser problème à l'utilisateur. Le bouton «Page précédente» ne marche pas en général.
108 Conclusions sur Ajax Combinaison des langages standards du WEB (Javascript, DOM HTML, XML) Grâce à l objet XMLHttpRequest WEB dynamique «coté client» Utilisé par tous les sites «WEB 2.0»
DOM - Document Object Model
DOM - Document Object Model 1 But de DOM Interfacer les langages de programmation avec les documents XML en les associant avec un modèle orienté objet DOM permet aux programmes et scripts : d'accéder et
Failles XSS : Principes, Catégories Démonstrations, Contre mesures
HERVÉ SCHAUER CONSULTANTS Cabinet de Consultants en Sécurité Informatique depuis 1989 Spécialisé sur Unix, Windows, TCP/IP et Internet Séminaire 15 ans HSC Failles XSS : Principes, Catégories Démonstrations,
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
SHERLOCK 7. Version 1.2.0 du 01/09/09 JAVASCRIPT 1.5
SHERLOCK 7 Version 1.2.0 du 01/09/09 JAVASCRIPT 1.5 Cette note montre comment intégrer un script Java dans une investigation Sherlock et les différents aspects de Java script. S T E M M E R I M A G I N
Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
Formation : WEbMaster
Formation : WEbMaster Objectif et Description : Centre Eclipse vous propose une formation complète WebMaster, vous permettant de : Utiliser dès maintenant les nouveautés du web2, ainsi alléger les besoins
Serveur d'application Client HTML/JS. Apache Thrift Bootcamp
Serveur d'application Client HTML/JS Apache Thrift Bootcamp Pré-requis La liste ci-dessous de logiciels doit être installée et opérationnelle sur la machine des participants : Compilateur thrift http://thrift.apache.org/
Le stockage local de données en HTML5
Le stockage local HTML5, pourquoi faire? Dans une optique de réduction des couts de maintenance, de déploiement, beaucoup d'entreprises ont fait le choix de migrer leurs applicatifs (comptables, commerciales,
INTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
Programmation Web. Madalina Croitoru IUT Montpellier
Programmation Web Madalina Croitoru IUT Montpellier Organisation du cours 4 semaines 4 ½ h / semaine: 2heures cours 3 ½ heures TP Notation: continue interrogation cours + rendu à la fin de chaque séance
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
Document Object Model (DOM)
Document Object Model (DOM) Jean-Claude Charr Maître de conférences IUT de Belfort Montbéliard Université de Franche Comté Description générale Définit un standard pour accéder aux documents structurés
FORMATION PcVue. Mise en œuvre de WEBVUE. Journées de formation au logiciel de supervision PcVue 8.1. Lieu : Lycée Pablo Neruda Saint Martin d hères
FORMATION PcVue Mise en œuvre de WEBVUE Journées de formation au logiciel de supervision PcVue 8.1 Lieu : Lycée Pablo Neruda Saint Martin d hères Centre ressource Génie Electrique Intervenant : Enseignant
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING
CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des
Petite définition : Présentation :
Petite définition : Le Web 2.0 est une technologie qui permet la création de réseaux sociaux, de communautés, via divers produits (des sites communautaires, des blogs, des forums, des wiki ), qui vise
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP
Module Com231A - Web et Bases de Données Notion 5 : Formulaires et utilisation des Bases de Données avec PHP Au cours de ce TP, vous allez voir comment PHP permet aux utilisateurs, une interaction avec
Module BD et sites WEB
Module BD et sites WEB Cours 8 Bases de données et Web Anne Doucet Anne.Doucet@lip6.fr 1 Le Web Architecture Architectures Web Client/serveur 3-tiers Serveurs d applications Web et BD Couplage HTML-BD
TP 1. Prise en main du langage Python
TP. Prise en main du langage Python Cette année nous travaillerons avec le langage Python version 3. ; nous utiliserons l environnement de développement IDLE. Étape 0. Dans votre espace personnel, créer
Formation. Module WEB 4.1. Support de cours
Formation Module WEB 4.1 Support de cours Rédacteur Date de rédaction F.CHEA 08/02/2012 Les informations contenues dans ce document pourront faire l'objet de modifications sans préavis Sauf mention contraire,
Application de lecture de carte SESAM-Vitale Jeebop
Application de lecture de carte SESAM-Vitale Jeebop Présentation Le module de lecture de carte SESAM-Vitale Jeebop est une application Java Web Start, c'est à dire une application Java qui se télécharge
Rafraichissement conditionné d'une page en.net
Rafraichissement conditionné d'une page en.net Test avec AJAX pour rafraichissement En utilisant AJAX, voici une possibilité de faire un rafraichissement conditionné. Nous verrons dans cet article une
TP n 2 Concepts de la programmation Objets Master 1 mention IL, semestre 2 Le type Abstrait Pile
TP n 2 Concepts de la programmation Objets Master 1 mention IL, semestre 2 Le type Abstrait Pile Dans ce TP, vous apprendrez à définir le type abstrait Pile, à le programmer en Java à l aide d une interface
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Ajax, RIA et HTML5. 9.1 Prise en charge d Ajax
9 Ajax, RIA et HTML5 Au soaire de ce chapitre UU Prise en charge d Ajax UU Bibliothèques JavaScript UU Extensions CSS de WebKit UU Applications Internet riches mobiles UU HTML5 Ajax, HTML5 et RIA, coent
Projet de programmation (IK3) : TP n 1 Correction
Projet de programmation (IK3) : TP n 1 Correction Semaine du 20 septembre 2010 1 Entrées/sorties, types de bases et structures de contrôle Tests et types de bases Tests et types de bases (entiers) public
Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org
Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et
Stockage du fichier dans une table mysql:
Stockage de fichiers dans des tables MYSQL avec PHP Rédacteur: Alain Messin CNRS UMS 2202 Admin06 30/06/2006 Le but de ce document est de donner les principes de manipulation de fichiers dans une table
INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)
CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.
Mozilla Firefox 3.5. Google Chrome 3.0 LES NAVIGATEURS WEB. (pour Windows) Opéra 10. Internet Explorer 8. Safari 4.0
Mozilla Firefox 3.5 Google Chrome 3.0 LES NAVIGATEURS WEB (pour Windows) Opéra 10 Internet Explorer 8 Safari 4.0 1 1 Sommaire Qu est ce qu un navigateur Web? Fonctionnement Caractéristiques communes Caractéristiques
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
Introduction à MATLAB R
Introduction à MATLAB R Romain Tavenard 10 septembre 2009 MATLAB R est un environnement de calcul numérique propriétaire orienté vers le calcul matriciel. Il se compose d un langage de programmation, d
Exceptions. 1 Entrées/sorties. Objectif. Manipuler les exceptions ;
CNAM NFP121 TP 10 19/11/2013 (Séance 5) Objectif Manipuler les exceptions ; 1 Entrées/sorties Exercice 1 : Lire un entier à partir du clavier Ajouter une méthode readint(string message) dans la classe
Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)
Introduction PHP = Personal Home Pages ou PHP Hypertext Preprocessor Langage de script interprété (non compilé) Plan Avantages Fonctionnement interne Bases du langage Formulaires Envoi d un email Avantages
Info0101 Intro. à l'algorithmique et à la programmation. Cours 3. Le langage Java
Info0101 Intro. à l'algorithmique et à la programmation Cours 3 Le langage Java Pierre Delisle, Cyril Rabat et Christophe Jaillet Université de Reims Champagne-Ardenne Département de Mathématiques et Informatique
Syfadis. > Configuration du poste client. Nous vous aidons à réussir. REFERENCE : Syfadis LMS - 20/06/2007. AUTEUR : Equipe technique Syfadis
Syfadis Nous vous aidons à réussir > Configuration du poste client REFERENCE : Syfadis LMS - 20/06/2007 AUTEUR : Equipe technique Syfadis Ce document est la propriété de Syfadis. Il ne peut être communiqué
Module http MMS AllMySMS.com Manuel d intégration
Module http MMS AllMySMS.com Manuel d intégration Objectif du document... 3 1 Envoi de MMS par requête http... 4 1.1 Format de la requête utilisée... 4 1.2 Arborescence et explication des balises du flux
Syfadis. > Configuration du poste client. Nous vous aidons à réussir. REFERENCE : Syfadis LMS - 12/09/2008. AUTEUR : Equipe technique Syfadis
Syfadis Nous vous aidons à réussir > Configuration du poste client REFERENCE : Syfadis LMS - 12/09/2008 AUTEUR : Equipe technique Syfadis Ce document est la propriété de Syfadis. Il ne peut être communiqué
Devenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
TP1 - Prise en main de l environnement Unix.
Mise à niveau UNIX Licence Bio-informatique TP1 - Prise en main de l environnement Unix. Les sujets de TP sont disponibles à l adresse http://www.pps.jussieu.fr/~tasson/enseignement/bioinfo/ Les documents
Présentation du langage et premières fonctions
1 Présentation de l interface logicielle Si les langages de haut niveau sont nombreux, nous allons travaillé cette année avec le langage Python, un langage de programmation très en vue sur internet en
Cette application développée en C# va récupérer un certain nombre d informations en ligne fournies par la ville de Paris :
Développement d un client REST, l application Vélib 1. Présentation L application présentée permet de visualiser les disponibilités des vélos et des emplacements de parking à la disposition des parisiens
Dojo Toolkit. Créer des applications AJAX/RIA en JavaScript. Thomas Corbière www.itsi-formation.com
Dojo Toolkit Créer des applications AJAX/RIA en JavaScript Auteur Site Web Dernière modification Dojo Toolkit Thomas Corbière www.itsi-formation.com 20/02/2012 (révision 3) 1.6 Ce support de cours est
ENDNOTE X2 SOMMAIRE. 1. La bibliothèque EndNote 1.1. Créer une nouvelle bibliothèque 1.2. Ouvrir une bibliothèque EndNote 1.3. Fermer une bibliothèque
1 ENDNOTE X2 SOMMAIRE 1. La bibliothèque EndNote 1.1. Créer une nouvelle bibliothèque 1.2. Ouvrir une bibliothèque EndNote 1.3. Fermer une bibliothèque 2. Manipuler une bibliothèque EndNote 2.1. La saisie
E-TRANSACTIONS. Guide du programmeur API Plug-in. Version 1.1
E-TRANSACTIONS Guide du programmeur API Plug-in Version 1.1 Avertissements : Le fichier Version.txt précise l'environnement dans lequel l API a été compilée et testée. L'installation de l API sur tout
L3 informatique TP n o 2 : Les applications réseau
L3 informatique TP n o 2 : Les applications réseau Sovanna Tan Septembre 2009 1/20 Sovanna Tan L3 informatique TP n o 2 : Les applications réseau Plan 1 Transfert de fichiers 2 Le Courrier électronique
Programmation Web. Introduction
Programmation Web Introduction 1 Introduction 10 séances 1 h cours + 1h TD Notes : contrôle continu DS 1 TP : note de groupe : rapport + code source + démo TD : note personnelle (=0 si 2 absences non justifiées)
Services bancaires par Internet aux entreprises. Guide pratique pour : Transfert de fichiers Version 08.05.22
Services bancaires par Internet aux entreprises Guide pratique pour : Transfert de fichiers Version 08.05.22 Table des matières Introduction...3 Avez-vous besoin d'aide?... 3 Exigences informatiques...
Sessions en ligne - QuestionPoint
Sessions en ligne - QuestionPoint Configuration du navigateur Internet Explorer Dernière mise à jour : 12 mai 2012 Vous trouverez dans ce guide les procédures pour configurer votre navigateur Internet
Cours 1 : Introduction. Langages objets. but du module. contrôle des connaissances. Pourquoi Java? présentation du module. Présentation de Java
Langages objets Introduction M2 Pro CCI, Informatique Emmanuel Waller, LRI, Orsay présentation du module logistique 12 blocs de 4h + 1 bloc 2h = 50h 1h15 cours, 45mn exercices table, 2h TD machine page
Corrigé de l'atelier pratique du module 8 : Implémentation de la réplication
Corrigé de l'atelier pratique du module 8 : Implémentation de la réplication Table des matières Atelier pratique 8 : Implémentation de la réplication 1 Exercice 1 : Création d'une publication 1 Exercice
Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement
Guillaume HARRY l Contenu sous licence Creative Commons CC-BY-NC-ND Principales failles de sécurité des applications Web Principes, parades et bonnes pratiques de développement P. 2 1. Introduction 2.
ECLIPSE ET PDT (Php development tools)
ECLIPSE ET PDT (Php development tools) Eclipse Eclipse est un IDE (Integrated Development Environment)).C estun projet de la Fondation Eclipse visant à développer tout un environnement de développement
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Dans l'article précédent, vous avez appris
Pour les débutants Les différents formats de sortie proposés par PHPExcel La bibliothèque orientée objet PHPExcel permet de lire et créer des fichiers pour tableurs. Dans cette série d articles, vous apprendrez
Sélection du contrôleur
Démo CoDeSys - 1 - 1. Configuration de l environnement de travail : Lancer le logiciel CoDeSys Fichier Nouveau Lors de la première utilisation, une boîte de dialogue apparaît permettant la sélection du
Manuel d'installation
CyberMUT P@iement P@iement CIC P@iement OBC SERVICE SECURISE DE PAIEMENT INTERNET PAR CARTE BANCAIRE (Sécurisé par le protocole SSL) Manuel d'installation (Document 2/2) EURO Sp.Tech. 1.2.8 Octobre 2001
Réglages du portail de P&WC
Réglages du portail de P&WC Afin de régler votre navigateur Internet Explorer et de résoudre quelques problèmes spécifiques que les utilisateurs du portail de P&WC pourraient éprouver, nous vous recommandons
L envoi d un formulaire par courriel. Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248
L envoi d un formulaire par courriel Configuration requise... 236 Mail Texte... 237 Mail HTML... 242 Check-list... 248 Chapitre 9 L envoi d un formulaire par courriel L envoi par courriel d informations
Accès au Serveur de PAIE «SPV» par INTERNET Paramétrage du poste de travail «Windows»
Accès au Serveur de PAIE «SPV» par INTERNET Paramétrage du poste de travail «Windows» 1 Introduction... 2 2 Contrôle de la version d Internet Explorer... 3 3 Contrôle de la Machine Virtuelle Java de Microsoft...
Gestion des documents avec ALFRESCO
Gestion des documents avec ALFRESCO 1 INTRODUCTION : 2 1.1 A quoi sert ALFRESCO? 2 1.2 Comment s en servir? 2 2 Créer d un site collaboratif 3 2.1 Créer le site 3 2.2 Inviter des membres 4 3 Accéder à
STAGE IREM 0- Premiers pas en Python
Université de Bordeaux 16-18 Février 2014/2015 STAGE IREM 0- Premiers pas en Python IREM de Bordeaux Affectation et expressions Le langage python permet tout d abord de faire des calculs. On peut évaluer
GUIDE MEMBRE ESPACE COLLABORATIF. Février 2012
GUIDE MEMBRE ESPACE COLLABORATIF Février 2012 Ce document est disponible sur le site WEB de l Agence de la santé et des services sociaux de la Montérégie, à l adresse suivante : http://extranet.santemonteregie.qc.ca/userfiles/file/espace-collabo/2012-02-04guide-membre-espace-collaboratif.pdf
Créer une base de données
Access Créer une base de données SOMMAIRE Généralités sur les bases de données... 3 Création de la base de données... 4 A) Lancement d'access... 4 B) Enregistrement de la base de données vide... 4 Création
Algorithmique et Programmation, IMA
Algorithmique et Programmation, IMA Cours 2 : C Premier Niveau / Algorithmique Université Lille 1 - Polytech Lille Notations, identificateurs Variables et Types de base Expressions Constantes Instructions
AJAX. (Administrateur) (Dernière édition) Programme de formation. France, Belgique, Suisse, Roumanie - Canada
AJAX (Administrateur) (Dernière édition) Programme de formation Microsoft Partner France, Belgique, Suisse, Roumanie - Canada WWW.SASGROUPE.COM Formez vos salariés pour optimiser la productivité de votre
Table des matières ENVIRONNEMENT
ENVIRONNEMENT Présentation de Windows 7.................13 Démarrer Windows 7......................15 Quitter.................................15 Les fenêtres..............................16 Généralités............................17
Mes documents Sauvegardés
Mes documents Sauvegardés Guide d installation et Manuel d utilisation du logiciel Edition 13.12 Photos et illustrations : Copyright 2013 NordNet S.A. Tous droits réservés. Toutes les marques commerciales
Application Web et J2EE
Application Web et J2EE Servlet, JSP, Persistence, Méthodologie Pierre Gambarotto Département Informatique et Math appli ENSEEIHT Plan Introduction 1 Introduction Objectfis
INF2015 Développement de logiciels dans un environnement Agile. Examen intra 20 février 2014 17:30 à 20:30
Examen intra 20 février 2014 17:30 à 20:30 Nom, prénom : Code permanent : Répondez directement sur le questionnaire. Question #1 5% Quelle influence peut avoir le typage dynamique sur la maintenabilité
Le langage C. Séance n 4
Université Paris-Sud 11 Institut de Formation des Ingénieurs Remise à niveau INFORMATIQUE Année 2007-2008 Travaux pratiques d informatique Le langage C Séance n 4 But : Vous devez maîtriser à la fin de
Cours d Algorithmique-Programmation 2 e partie (IAP2): programmation 24 octobre 2007impérative 1 / 44 et. structures de données simples
Cours d Algorithmique-Programmation 2 e partie (IAP2): programmation impérative et structures de données simples Introduction au langage C Sandrine Blazy - 1ère année 24 octobre 2007 Cours d Algorithmique-Programmation
Programmation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
Plateforme PAYZEN. Définition de Web-services
Plateforme PAYZEN Définition de Web-services Ordre de paiement Version 1.1 Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa Nom Date/Visa Nom Date/Visa Lyra-Network
4. SERVICES WEB REST 46
4. SERVICES WEB REST 46 REST REST acronyme de REpresentational State Transfert Concept introduit en 2000 dans la thèse de Roy FIELDING Est un style d architecture inspiré de l architecture WEB En 2010,
Cours d introduction à l informatique. Partie 2 : Comment écrire un algorithme? Qu est-ce qu une variable? Expressions et instructions
Cours d introduction à l informatique Partie 2 : Comment écrire un algorithme? Qu est-ce qu une variable? Expressions et instructions Qu est-ce qu un Une recette de cuisine algorithme? Protocole expérimental
SYSTÈMES D INFORMATIONS
SYSTÈMES D INFORMATIONS Développement Modx Les systèmes de gestion de contenu Les Content Management Système (CMS) servent à simplifier le développement de sites web ainsi que la mise à jour des contenus.
Cyberclasse L'interface web pas à pas
Cyberclasse L'interface web pas à pas Version 1.4.18 Janvier 2008 Remarque préliminaire : les fonctionnalités décrites dans ce guide sont celles testées dans les écoles pilotes du projet Cyberclasse; il
Manuel d utilisation du web mail Zimbra 7.1
Manuel d utilisation du web mail Zimbra 7.1 ma solution de communication intelligente Sommaire 1 Connexion à la messagerie Zimbra p.4 1.1 Prérequis p.4 1.1.1 Ecran de connexion à la messagerie p.4 2 Presentation
Publication dans le Back Office
Site Web de l association des ingénieurs INSA de Lyon Publication dans le Back Office Note : dans ce guide, l'appellation GI signifie Groupe d'intérêt, et GR Groupe Régional laure Buisset Page 1 17/09/2008
Cours 14 Les fichiers
Cours 14 Les fichiers F. Gayral 1 Fichier : définition /media/travaux/documents/fgenseignement/java1/courstpsfgfc/14-fichiers/voirtypefichiers Fichier = ensemble d informations codées et stockées sur une
I. Introduction aux fonctions : les fonctions standards
Chapitre 3 : Les fonctions en C++ I. Introduction aux fonctions : les fonctions standards A. Notion de Fonction Imaginons que dans un programme, vous ayez besoin de calculer une racine carrée. Rappelons
Guide Utilisateur. Les communications unifiées au service de la performance opérationnelle. sfrbusinessteam.fr. Faire équipe avec vous
Faire équipe avec vous En exclusivité dans le Pack Business Entreprises, bénéficiez de la solution Microsoft Office Communicator, un véritable outil de travail collaboratif convivial et performant pour
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
UltraBackup NetStation 4. Guide de démarrage rapide
UltraBackup NetStation 4 Guide de démarrage rapide Table des matières 1 Fonctionnalités... 3 1.1 Ce qu UltraBackup NetStation permet de faire... 3 1.2 Ce qu UltraBackup NetStation ne permet pas de faire...
CAPTURE DES PROFESSIONNELS
CAPTURE DES PROFESSIONNELS 2 Téléchargement 3 Installation 8 Prise en main rapide 10 Lancement Recherche 14 Gestion des fichiers 23 Compare et Sépare 24 Fichiers annexes 2/ Le menu Utilitaires 32 Internet
Initiation à la programmation en Python
I-Conventions Initiation à la programmation en Python Nom : Prénom : Une commande Python sera écrite en caractère gras. Exemples : print 'Bonjour' max=input("nombre maximum autorisé :") Le résultat de
L informatique en BCPST
L informatique en BCPST Présentation générale Sylvain Pelletier Septembre 2014 Sylvain Pelletier L informatique en BCPST Septembre 2014 1 / 20 Informatique, algorithmique, programmation Utiliser la rapidité
OCL - Object Constraint Language
OCL - Object Constraint Language Laëtitia Matignon laetitia.matignon@univ-lyon1.fr Département Informatique - Polytech Lyon Université Claude Bernard Lyon 1 2012-2013 Laëtitia Matignon SIMA - OCL - Object
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.
ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables
Protocoles DHCP et DNS
Protocoles DHCP et DNS DHCP (Dynamic Host Configuration Protocol) est un protocole qui permet à un serveur DHCP (Unix, Windows, AS400...) d'affecter des adresses IP temporaires (et d'autres paramètres)
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
PARAMETRER INTERNET EXPLORER 9
PARAMETRER INTERNET EXPLORER 9 Résumé Ce document vous donne la marche à suivre pour paramétrer Microsoft Internet Explorer 9, notamment en vous indiquant comment lancer Internet Explorer 9, réinitialiser
Guide d implémentation. Réussir l intégration de Systempay
Guide d implémentation - Interface avec la plateforme de paiement - Réussir l intégration de Systempay Version 1.4b Rédaction, Vérification, Approbation Rédaction Vérification Approbation Nom Date/Visa
SOLUTION D ENVOI DE SMS POUR PROFESSIONNELS
1 Création et gestion de compte 2 Envoi par e-mail 3 Envoi par commande http 4 Publipostage SMS personnalisés 5 Autres fonctionnalités et options SMSvialeweb.com est une solution complète d envoi de SMS
Manuel d utilisation de Gestion 6
Manuel d utilisation de Gestion 6 Première utilisation Voici les fichiers présents dans le répertoire après l installation de setup.exe I) Création des paramètres Menu Outils > Paramètres > Généraux MATICE
Gestion de stock pour un magasin
Département d Informatique Université de Fribourg, Suisse http://diuf.unifr.ch Gestion de stock pour un magasin Stock online utilise ASP/MS-Access DO Thi Tra My No étudiant : 05-333-750 Travail de séminaire
Tutoriel: Création d'un Web service en C++ avec WebContentC++Framework
Tutoriel: Création d'un Web service en C++ avec WebContentC++Framework Gaël de Chalendar CEA LIST / LIC2M Journée de Présentation des Technologies WebContent INSTN 14/12/2009 Présentation de gsoap Plan
Attaques de type. Brandon Petty
Attaques de type injection HTML Brandon Petty Article publié dans le numéro 1/2004 du magazine Hakin9 Tous droits reservés. La copie et la diffusion de l'article sont admises à condition de garder sa forme
On trouvera sur le site du CCDMD un exemple d album construit avec Cantare. (http://www.ccdmd.qc.ca/ri/cantare)
Cantare 2 Introduction L outil logiciel Cantare s adresse à toute personne qui veut construire des leçons visant l apprentissage d une langue par l écoute de chansons ou de fichiers sonores dont les paroles