Deuxième partie: HTML, Javascript et le DOM (1)

Transcription

1 Deuxième partie: HTML, Javascript et le DOM (1) 1

2 HTML Des éléments de «header» destinés à contrôler les paramètres d affichage Un langage de structuration de contenu Un langage de présentation Un langage d interaction 2

3 HTML: header Header: header http, paramètres d affichage <!DOCTYPE : DTD de contrôle de la validité du code HTML <base></base> : indique l URL référençant le document courant, URL utilisée par les liens relatifs dans la page <link></link> : rattache le document à une ressource externe (feuille de style) <meta> : informations de contexte sur le document Codage des caractères: <meta http-equiv="content-type" content="text/html; charset=iso "> Auteur: <meta name="author" content="mikael Dautrey"> Mots clés:<meta name="keywords" http-equiv="keywords" content="balise,html,tutoriel,cours"> <script></script>: script lancé au démarrage <style></style>: éléments de style 3

4 HTML: contenu Un langage de structuration de contenu qui peut être vu comme une grammaire XML Balises Attributs 4

5 HTML: contenu Balises (hors balises spécifiques à certains navigateurs) Niveaux de titres <title>, <h1>, <h2>, <h3>, <h4>,, <h6> Paragraphes <p>, <address>, <blockquote>, <pre>, <hr> Listes: <ol>, <ul>, <dl>, <dt>, <dd> Liens et ancres: <a> Images: <img> Objets: <applet> Tableaux: <table>, <caption>, <col>, <tr>, <td>, <th> Mise en forme et contenu: <i>, <b>, <blink>, <cite>, <code>, <dfn>, <em>, <kbd>, <pre>, <q>, <s>, <samp>, <small>, <strike>, <strong>, <sub>, <tt>, <u>, <var>, <abbr>, <acronym>, <big>, <font>, <ins>, <del>,<span>, <br> Attributs permettant d identifier les balises class et name 5

6 HTML: présentation Un langage de présentation Gestion de l apparence et de la présentation visuelle du texte dans les balises Effets de style dans le texte (<i>, <b>, <font>) Attributs des balises Des balises de contenu, des balises de présentation Des attributs de contenu (name) et des attributs de présentation (color) Attributs Attributs des balises permettant de surcharger les propriétés des balises href, bgcolor, width, height background, border, name, title, align, alt, src, vspace, hspace, style 6

7 HTML: contenu + présentation Balises + attributs = structuration du contenu + présentation HTML = XML + DTD (règles de la grammaire, structuration de contenu) + transformation type XSLT (pour passer du contenu à la présentation) Les balises définissent le contenu Les liens définissent les relations entre les contenus Les attributs définissent la présentation 7

8 HTML: interaction Un langage d interaction Les liens Le transfert des données par le header http Contexte du navigateur Cookies Get et post Javascript Les formulaires 8

9 HTML: formulaires Formulaires Des objets de saisie Checkboxes, radio Listes de sélection et ascenseurs Zones de texte, zones de sélection Des contrôles Boutons Attributs des objets de saisie Actions, scripts Un mécanisme de transmission des données Get Post 9

10 HTML: formulaires Balises des formulaires <form> <fieldset> <input> <option> <legend> <select> <textarea> <button> <submit> 10

11 HTML et le DOM DOM = Document Object Model Principe du DOM Définir une hiérarchie d objets reprenant la hiérarchie du contenu Depuis le navigateur (racine du DOM) Vers l ensemble des éléments du document Windows Document Paragraphes Formulaires 11

12 HTML et le DOM Intérêt: Manipuler, avec Javascript, les objets du document Accéder à leur valeur Les modifier Les déplacer Valider les données saisies dans un formulaire Réagir aux actions de l utilisateur sur le document Clic sur un élément Clic sur un lien 12

13 HTML et le DOM: exemple <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>document sans nom</title> </head> <body> <h1>un exemple de page pour <strong>le DOM</strong></h1> <h3>titre 3</h3> <p><em>corps</em> de texte</p> </body> </html> 13

14 HTML et le DOM: exemple 14

15 HTML et le DOM: exemple <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html><head> <meta http-equiv="content-type" content="text/html; charset=iso "> <title>un autre exemple pour le DOM</title> <style type="text/css"></style> </head> <body> <h1 class="style1">un exemple pour le DOM</h1> <ul> <li>document<ul><li>structure du document </li></ul></li> <li>object<ul><li>objet</li></ul></li> <li>model<ul><li>modélisation par objet</li></ul></li> </ul> </body> </html> 15

16 HTML: caractères spéciaux Codage spécifique pour les caractères hors ANSI Caractères accentués: é è, à Caractères réservés: < > Caractères spéciaux: " & 16

17 JavaScript Langage de scripting côté client permettant de manipuler les données à travers le DOM et les évènements associés aux objets du DOM Lancé par Netscape sous le nom de LiveScript Renommé ensuite Javascript (quelques similitudes avec Java) Usage Contrôle des données dans les formulaires Contenu dynamique (DHTML) Interactions http (redirection, etc) 17

18 JavaScript Avantages Interactivité Effets graphiques Réactivité aux actions de l utilisateur Simplification de la gestion du contenu affiché dans la page Inconvénients Problèmes de compatibilité cross-browser => limiter les fonctions utilisées ou prévoir des alternatives Risques de sécurité => bien articuler les contrôles côté client et côté serveur 18

19 JavaScript Langage de script orienté objet Pour accéder aux éléments d un document, on fait appel aux objets et aux attributs et méthodes de ces objets Exemple: document.write(«coucou»); écrit coucou dans le document La syntaxe est proche de c ou de java Délimitation des instructions par des «;» Commentaires: «//» ou «/* */» Boucles for: «for(i=0;i<3;i++) document.write(i);» Accès aux objets en séparant les différents niveaux des objets par des points «.» Window.location.href = «index.html» La syntaxe est sensible à la casse Voir Exemple1 19

20 JavaScript Types de variable String Number (float) Boolean Null Undefined String Les caractères spéciaux sont précédés de \ \ \" \\ \udddd : codage d un caractère en hexadécimal (DDDD: 4 digits) Déclaration de variable, mot clé var: var mavariable; Le type d une variable est défini par son instanciation 20

21 JavaScript Conversion de variables typeof: renvoie le type de la variable parseint: transforme un entier en string parsefloat: transforme un float en string Number: convertit une chaîne de caractère en nombre isnan: renvoie true si la variable n est pas un nombre Opérateurs Opérateurs «classiques»: +, -, *, /, % Concaténation de chaînes: + Opérateurs logiques: ==;!=; <; >; &&; ;!; <=;>= Types «composites» Objets Tableaux Voir Exemple2 21

22 JavaScript Objets prédéfinis String Date Math Deux types string (comme en Java) L objet String La variable String Différence entre les deux Pour la variable String, initialisation d une chaîne de caractères: var s = "abc "; Pour l objet string, création de l objet: var so = new String("abc "); Date: objet dédié à la manipulation des dates Math: Objet statique regroupant les méthodes de calcul mathématique Voir Exemple3 22

23 JavaScript Les tableaux Déclaration: var MonTableau = new Array(); Initialisation 1 MonTableau[0] = Alpha ; MonTableau[1] = Bêta; MonTableau[2] = Gamma; MonTableau[3] = Delta ; Initialisation 2 var MonTableau = new Array( Alpha, Beta, Gamma, Delta ); Pour couper en deux: var mt2 = MonTableau.slice(0,1); Pour joindre des tableaux (t0, t1 et t2 dans t3): var t3 = t0.concat(t1,t2); Pour trier un tableau var t4 = t3.sort(); Voir Exemple4 23

24 JavaScript Boucles et instructions conditionnelles Comme en c ou en Java for(i=1;i<n;i++){ } if( ){ }elseif( ){ }else{ } while( ){ } do{ }while( ) Fonctions Définition: function MaFonction(v1,v2,v3){ return Result;} Portée des variables: variables dans la fonction = variables locales Nombre de paramètres: on peut passer moins de paramètres que prévu => les autres paramètres sont valorisés à null Voir Exemple5 24

25 JavaScript Boîtes de dialogue alert : message d'alerte (un seul bouton = OK) alert("vous avez quinze secondes pour valider cette boite") prompt: entrée d'une variable par l'utilisateur var j = prompt("donner un entier entre 0 et 20", 0); confirm : choix oui/non if(confirm("souhaitez-vous quitter cette page?")){ } Les boîtes de dialogues sont bloquantes et interdisent la poursuite de l'exécution du code Pour plus d'exemples: Exemple6 25

26 JavaScript Regrouper le code dans des modules externes Le code peut être regroupé dans un module externe Avantages: téléchargement, gestion simplifiée, mutualisation de bibliothèques de fonctions entre pages Syntaxe : <script language="javascript" src="include7.js"></script> Fonctionnement: comme si le code se trouvait dans la page à l'endroit où est fait appel au module externe Exemple7 26

27 JavaScript Créer des classes Pas de déclaration de classes, seulement des définitions Définition du constructeur => définit la méthode de construction et les propriétés de la classe Définition des méthodes de la classe => précise la liste des méthodes, les prototypes et les actions exécutées par ces méthodes Appel à la classe Instanciation: utilisation du mot clé new sur le constructeur Appel de méthode ou valeur des propriétés Nom de l'objet +. + nom de la méthode ou de propriété de la classe Les méthodes et propriétés sont publiques 27

28 Troisième partie: PHP, fonctions avancées 28

29 PHP: fonctions avancées La librairie standard (une partie) 29

30 PHP: fonctions avancées En plus dans la librairie standard Fonctions type «unix» Sémaphores Queueing Mémoires partagées Hors standard (librairies «propriétaires») XML, DOM, Expat PDFLib Smarty et templates Zipper, compression imap, protocoles spécifiques PEAR DB ou PHPLIB(surcouche sql indépendant du type de base) 30

31 PHP: présentation de la librairie standard MIME Mikael DAUTREY / mikael.dautrey@isitix.com Détection et identification de contenu MIME dans un fichier Exemple d application: traitement de pièces jointes de mail entrant Math fonctions mathématiques Trigo Exponentielles Random, partie entière, valeur absolue ZEND API Permet d écrire des extensions de PHP Tableaux Gestion des tableaux cf début du cours 31

32 PHP: présentation de la librairie standard Mikael DAUTREY / mikael.dautrey@isitix.com Mail + imap mail Envoyer des mails (client smtp) Gérer des boîtes aux lettres (client pop imap) Se connecter à un serveur Imap ou Pop3 Exemple d application: développer un webmail FTP Upload/download de fichiers par ftp (client ftp) Exemple d application: créer un client web ftp Exécuter des commandes externes Lancer une commande externe depuis php Exemple d application: administrer un OS à distance 32

33 PHP: présentation de la librairie standard Oracle Client base oracle Exécuter des requêtes SQL Administrer une base de données Mikael DAUTREY / mikael.dautrey@isitix.com Exemple d application: applications faisant appel à une base de données Forum Strings Boutique en ligne Actions sur les chaînes de caractères Concaténation Split Changement de casse Conversions de formats Exemple d application: parse de texte à insérer en BDD 33

34 PHP: présentation de la librairie standard Mikael DAUTREY / mikael.dautrey@isitix.com Options et informations PHP Lister les options PHP Tester la configuration du serveur Exemples d application: développer du code portable entre les différentes versions de PHP Accès aux dossiers Se positionner sur un répertoire Changer de répertoire Connaître le répertoire courant Créer un répertoire 34

35 PHP: présentation de la librairie standard Mikael DAUTREY / mikael.dautrey@isitix.com MySQL Client mysql Administrer une base mysql Envoyer des requêtes sur une base mysql Traiter les réponses aux requêtes MySQL Accès au système de fichiers Fichiers Création Suppression Information Lecture / écriture Fichiers temporaires 35

36 PHP: présentation de la librairie standard Mikael DAUTREY / mikael.dautrey@isitix.com Réseau Accès aux couches basses du réseau (TCP, IP et UDP) Accès aux services DNS, résolution d adresse Exemple d applications: vérifier le domaine lors de la saisie d une adresse mail par l utilisateur HTTP Spécification du header http envoyé Redirection Caching Gestion des cookies Exemples d application: gestion de skins avec des cookies, redirection d un site web vers un autre site 36

37 PHP: présentation de la librairie standard Mikael DAUTREY / mikael.dautrey@isitix.com Streams Généralisation du système de fichier Un stream est un pointeur vers une ressource pouvant être en lecture, en écriture ou les deux Accès à des données, fichiers, document http, document compressé, imprimante, pdf Exemple d application! Créer un explorateur de fichiers généralisé supportant tant les fichiers locaux que des fichiers distants accessibles par http Expressions régulières Manipulation de chaînes de caractères avec des expressions régulières Exemples d application: search and replace dans un fichier texte 37

38 PHP: présentation de la librairie standard Mikael DAUTREY / mikael.dautrey@isitix.com Gestion des erreurs Configuration du fichier php.ini Définition des handlers d erreurs Exemple d application: mise en place d une méthode homogène de gestion des erreurs sur une application Sessions Outil de gestion des sessions Ouverture d une session Gestion des variables de session Exemple d applications: authentification sur un site web 38

39 PHP: présentation de la librairie standard Mikael DAUTREY / mikael.dautrey@isitix.com Date et heure Gestion de la date et de l heure Formats Intervalle entre deux dates, entre deux heures Ajout, suppression de jours, heures, minutes, secondes Obtention de la date système Variables Déjà vu dans le cours Analyseur de code Outil de parsage de code PHP Exemple d application: afficher la structure d un programme PHP dans une page HTML 39