Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques.

Slides:



Advertisements
Présentations similaires
Été INF1025 Driouch Elmahdi
Advertisements

Premier programme en C :
1 JavaScript V0 : Nauer. 2 JavaScript Quid ? Langage de programmation lié à HTML. Code JavaScript intégré aux pages HTML. Code interprété par le navigateur.
LE LANGAGE JAVASCRIPT LES FENETRES.
Conception de Site Webs dynamiques Cours 5
Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 9 Patrick Reuter.
Algorithmes et structures de données avancées Partie Conception de Sites Web dynamiques Cours 8 Patrick Reuter.
TOUQUET Arnaud ▪ GI05 BLONDEEL Igor ▪ GM05
Algorithmique Résume.
Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 ASP / Pages Web Statiques.
Cours n°2M2. IST-IE (S. Sidhom) UE 303 Promo. M2 IST-IE 2005/06 Conception dun système d'information multimédia Architecture trois-tiers : PHP/MySQL &
1 Javascript Merci à Emmanuel Nauer. 2 Javascript Quid ? Langage de programmation lié à HTML. Code Javascript intégré aux pages HTML. Code interprété
C.
Formulaire HTML Introduction. Définition de formulaire.
ESIEE Paris © Denis BUREAU I N Initiation à la programmation avec le langage Java.
Initiation à la programmation et algorithmique cours 3
Introduction aux Web Services Partie 1. Technologies HTML-XML
Les bases de l’Algorithmique
2006/2007Denis Cabasson – Programmation Web Cours de programmation web ENSAE
CPI/BTS 2 Programmation Web Introduction au PHP
Cours 7 - Les pointeurs, l'allocation dynamique, les listes chaînées
Chapitre IV LES STRUCTURES SIMPLES. Plan I- Les entrées II- Laffectation III- Les sorties.
Présentation de la séquence de cours sur les interactions HTML-javascript Laure Walser, 11 juin 2010.
RESUMES Module II1 SOMMAIRE CYCLE 1 : Saisir – Afficher – Données
Les instructions PHP pour l'accès à une base de données MySql
A la découverte de la bureautique et des fichiers.
Programmation multimédia 3
Introduction à la programmation (Java)
Introduction au langage PHP Réfs : Chap 3 p 49. Présentation PHP (Hypertext PreProcessor) est un langage de développement Web créé en 1994 par Rasmus.
Les pointeurs Enormément utilisé en C/C++ ! Pourquoi? A quoi ça sert?
Le langage Javascript pour le web
1. 2 PLAN DE LA PRÉSENTATION - SECTION 1 : Code HTML - SECTION 2.1. : CSS (Méthode 1) - SECTION 2.2. : CSS (Méthode 2) - SECTION 3 : JavaScript - SECTION.
1 PHP 1.Langage PHP 1.1. Types de base, variables et constantes 1.2. Opérateurs et expressions 1.3. Instructions 1.4. Fonctions 2.Accès aux bases de données:
Web dynamique PhP + MySQL AYARI Mejdi 2006
LIFI-Java 2004 Séance du Jeudi 9 sept. Cours 1. La notion de langage Décrire une tâche à effectuer –programme Écrire à un haut niveau –facile pour lutilisateur.
PhP-MySQL Pagora 2012/2013 CTD 1 - Presentation de moi ^^
JavaScript PhD. Wajdi GARALI INSAT 2010
Document élaboré à Centrale Paris par Pascal Morenton LES TECHNOLOGIES DU WEB 1. LES PHASES D UN DEPLOIEMENT DE RESEAUX 2. LE LANGAGE HTML 3. LE LANGAGE.
Projet de Master première année 2007 / 2008
Programme de baccalauréat en informatique Programmation Orientée Objets IFT Thierry EUDE Module 6. Gestion des erreurs et des exceptions : Fonctionnement.
JEE 5 F.Pfister 2 institut eerie JEE – Une plateforme serveur  Développement et exécution d'applications réparties.
Animateur : Med HAIJOUBI
Javascript 1° PARTIE : LES BASES
TP n°2 Javascript EVENEMENTS ET OBJETS
PHP & My SQL.
Le langage XHTML 420-S4W-GG Programmation Web Client
Introduction au langage PHP Licence Pro Cours Internet / Intranet Utilité Historique Exemples Fonctions PHP Classes.
Module Internet (3) 1 Département Technologie de l’Information et de la Communication Internet.
Création et présentation d’un tableau avec Word 2007
Programmation JavaScript cours inspiré du cours de R. Vivian.
Javascript 2° PARTIE : EVENEMENTS ET OBJETS
I- Introduction au langage II- Le formalisme de base III- Les Objets JavaScript IV- Les Variables V- Opérateurs prédéfinis VI- Les Entrées/Sorties VII-
JavaScript Nécessaire Web.
Introduction à JavaScript
JavaScript.
Cours de programmation web
Un survol du language C.
 Objet window, la fenêtre du navigateur
 Syntaxe du langage PHP
S'initier au HTML et aux feuilles de style CSS Cours 5.
Page 1Dernière mise à jour: 17 avril 2015 Service de l'enseignement des technologies de l'information, © HEC Montréal, Tous droits réservés.
Dynamic HTML Regroupement de trois éléments : le HTML
Initiation au JavaScript
Module : Langage XML (21h)
Initiation au web dynamique Licence Professionnelle.
Module 133 Développer des applications Web Introduction à PHP.
Dreamweaver Séance 1.
Introduction au HTML Qu’est ce que le HTML ?
FLASH Séance 2 Xiaoliang Liang Morgane Le Nan SI28 P05.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
Transcription de la présentation:

Introduction Aux Systèmes dInformation et Multimédia T. Bourdeaudhuy S. Collart-Dutilleul P. Kubiak IG 2 I - Saison 2006/2007 (X)HTML / Pages Web Statiques Timothy Berners-Lee

Javascript S4 : Syntaxe S5 : Interfaçage avec le modèle DOM, objets Ressources :

ISIM 1 – Pages Web Statiques 3 Javascript? Langage de script Orienté Objet créé par Sun Microsystems Interprété par le navigateur (non compilé) Sexécute du côté client (ne sollicite pas le serveur) Sintègre dans le code HTML Supporté par un grand nombre de navigateur mais attention : problèmes de compatibilité.

ISIM 1 – Pages Web Statiques 4 Langage : Sensible à la casse Chaque instruction se termine par un point-virgule (;) Objets Événementiel (passage de souris, clic, saisie clavier, etc...) Différentes versions : –Javascript 1.3 compatible avec I.E5.x et 6.X - Netscape 6.x Javascript et VBscript ?

ISIM 1 – Pages Web Statiques 5 Pour quoi faire ? Outils de programmation pour les développeurs de pages web Quelques exemples : –Insérer dynamiquement du texte dans une page HTML –Réagir à des événements –Lire et écrire des éléments HTML –Valider des données –…

ISIM 1 – Pages Web Statiques 6 Javascript Java ? JavascriptJava Langage interprétéLangage compilé Code intégré au HTML Code (applet) à part du document HTML, appelé à partir de la page Langage peu typé Langage fortement typé (déclaration du type de variable) Liaisons dynamiques: les références des objets sont vérifiées au chargement Liaisons statiques: Les objets doivent exister au chargement (compilation) Accessibilité du codeConfidentialité du code Sûr: ne peut pas écrire sur le disque dur

ISIM 1 – Pages Web Statiques 7 Javascript : résumé Avantages –Pages web dynamiques –Allège le traitement et les délais –Simple dutilisation –Accès directe aux propriétés du document Inconvénients –Compatibilité avec le navigateur –« Plantage » en cas derreurs dans le script –Pas de confidentialité du code

ISIM 1 – Pages Web Statiques 8 Insérer du code JavaScript Plusieurs endroits : –dans le corps de la page, –en entête de page, –dans un événement d'un objet de la page. script Ou –À lextérieur de la page (librairie)

ISIM 1 – Pages Web Statiques 9 Insérer des commentaires Ne pas confondre les balises de commentaires du langage HTML et les caractères de commentaires Javascript –Ligne en commentaire // Tous les caractères derrière le // sont ignorés –Paragraphe en commentaire /* Toutes les lignes comprises entre ces repères Sont ignorées par l'interpréteur de code */ –Ne pas imbriquer les commentaires

ISIM 1 – Pages Web Statiques 10 Mon premier Programme <!-- document.write(Hello world !!!!!); // fin du script --> Visualiser erreurs sous Firefox : –Taper javascript: dans la barre dadresse

ISIM 1 – Pages Web Statiques 11 Objets ? Le Javascript traite les éléments qui s'affichent dans votre navigateur comme des objets, c'est-à-dire des éléments classés selon une hiérarchie pour pouvoir les désigner précisément auxquels on associe des propriétés

ISIM 1 – Pages Web Statiques 12 Hiérarchie jardin –arbre –branche –feuille –nid –largeur: 20 –couleur: jaune –hauteur: 4 –tronc –racine –salade –balançoire –trapèze –corde –nid –largeur: 15 –couleur: marron –hauteur: 6 Le nid sur l'arbre est donc désigné comme suit: jardin.arbre.branche.nid Contrairement au nid situé sur la balançoire: balançoire.nid Modifier jardin.arbre.branche.nid.couleur= vert; En Javascript, ce n'est pas un jardin qui est représenté sous forme d'objets mais la fenêtre de votre navigateur...

ISIM 1 – Pages Web Statiques 13 Les objets du navigateur Pour accéder à un objet particulier : –On commence généralement par l'objet le plus grand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu! L'objet le plus grand est l'objet fenêtre : window Dans la fenêtre s'affiche une page, c'est l'objet document Cette page peut contenir plusieurs objets, comme des formulaires, des images,... Accéder aux objets : notation pointée

ISIM 1 – Pages Web Statiques 14 Les variables Réservation de mémoire : var –var nombre; –var chaine; Une telle déclaration crée une variable vide et non typée Le typage se fait à laffectation ! –var nombre=2; –var chaine=hello;

ISIM 1 – Pages Web Statiques 15 Les variables 4 types de données: –des nombres : entiers ou à virgules –des chaînes de caractères (string) : une suite de caractères –des booléens : des variables à deux états permettant de vérifier une condition –true : si le résultat est vrai (1) –false : lors d'un résultat faux (0) –des variables de type null : un mot caractéristique pour indiquer qu'il n'y a pas de données

ISIM 1 – Pages Web Statiques 16 Les nombres Entiers –Écriture décimale : 21 –Écriture hexadécimale : 0x15 Réels –Écriture pointée : 3.14 –Écriture exponentielle : 314E-2 –Fraction: 27/11 Attention : les booléens ne sont pas des entiers!

ISIM 1 – Pages Web Statiques 17 Les chaînes de caractères Les chaînes de caractères sont délimitées par des " " ou des Dans le cas dun présence dun caractère " ou il faut le protéger (précéder par) avec un anti-slash (\) Séquences d échappement : –\b : touche de suppression –\f : formulaire plein –\n : retour à la ligne –\r : appui sur la touche ENTREE –\t : tabulation –\" : guillemets doubles –\' : guillemets simples –\\ : caractère antislash Exemples : Titre = "Qu'y a-t'il dans \"c:\\windows\\\""; Ou Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"';

ISIM 1 – Pages Web Statiques 18 Les opérateurs arithmétiques OpérateurDescriptionExempleRésultat +Addition x=2 x+2 4 -Soustraction x=2 5-x 3 *Multiplication x=4 x*5 20 /Division 15/5 5/ %Modulo (reste de la division) 5%2 10%8 10% Incrément x=5 x++ x=6 --Décrément x=5 x-- x=4

ISIM 1 – Pages Web Statiques 19 Lopérateur d'assignation OperateurExempleÉquivalent à =x=y +=x+=yx=x+y -=x-=yx=x-y *=x*=yx=x*y /=x/=yx=x/y %=x%=yx=x%y

ISIM 1 – Pages Web Statiques 20 Les opérateurs de comparaison OpérateurDescriptionExemple ==Égal5==8 retourne faux !=Différent 5!=8 retourne vrai >Plus grand que 5>8 retourne faux <Plus petit que 5<8 retourne vrai >=Plus grand ou égal à 5>=8 retourne faux <=Plus petit ou égal à 5<=8 retourne vrai

ISIM 1 – Pages Web Statiques 21 Les opérateurs logiques OpérateurDescriptionExemple &&andx=6 y=3 (x 1) retourne vrai ||orx=6 y=3 (x==5 || y==5) retourne faux !notx=6 y=3 !(x==y) retourne vrai

ISIM 1 – Pages Web Statiques 22 Les structures if (condition réalisé) { liste d'instructions } if (condition réalisé) { liste d'instructions } else { autre série d'instructions } for (compteur; condition; modification du compteur) { liste d'instructions } while (condition réalisée) { liste d'instructions } do { liste d'instructions } while (condition) switch (expression) { case cas1: liste d'instructions break case cas2: liste d'instructions break default: liste d'instructions }

ISIM 1 – Pages Web Statiques 23 Exercice 1 Mon premier script JavaScript! Ceci est un document HTML habituel. document.writeln(" "+"Ceci est une partie de texte écrite"+ " avec JavaScript"+" "); var now=new Date(); document.write("Aujourd'hui, nous sommes le "+now); Nous sommes de retour au code HTML habituel.

ISIM 1 – Pages Web Statiques 24 Exercices Afficher une image Ecrire la somme des 100 premiers naturels non nuls

ISIM 1 – Pages Web Statiques 25 Fonctions, Librairies Définition dun fonction function bonjour(NOM) { var Bnom=bonjour +NOM; return Bnom; // facultatif } Définition dune librairie + : Concaténation

ISIM 1 – Pages Web Statiques 26 Exercices Ecrire une fonction qui affiche largument passé en paramètre en passant une ligne. –2ème version : Ecrire une fonction qui affiche largument passé en paramètre en le numérotant. Implémenter une méthode permettant de remettre à zéro ce compteur. –3ème version : Inclure ces fonctions dans une librairie séparée. Fonction factorielle –Itératif, récursif Fonction PGCD –Itératif, récursif Fonction aléatoire –Math.random() entre 0 et 1 Codes ascii des caractères dans un tableau HTML –String.fromCharCode(i) lettre dont le code est i –String("A").charCodeAt(0) code ascii de A

ISIM 1 – Pages Web Statiques 27 Premières interactions avec lutilisateur Boites de dialogue : –alert("texte") affichage –prompt("question", "réponse par défaut"); réponse –confirm(message); true, false

ISIM 1 – Pages Web Statiques 28 Tableaux Un tableau est un objet Array. Pour déclarer un tableau, il faut utiliser l'instruction new : –var tab=new Array; En javascript, le premier élément commence à l'indice 0 Exemple: var tab=new Array(7); tab[0]="Lundi"; tab[1]="Mardi"; tab[2]="Mercredi"; tab[3]="Jeudi"; tab[4]="Vendredi"; tab[5]="Samedi"; tab[6]="Dimanche"; La longueur du tableau sobtient par la propriété length : –var longueur=tab.length;

ISIM 1 – Pages Web Statiques 29 Exercices Créer des fonctions qui affichent le contenu dun tableau case par case en les numérotant. On utilisera les instructions for et while. –2ème version : on affiche ce tableau dans un tableau html. Crible dEratosthène Changement de base –Utilisation de la forme de Hörner –Utilisation dune pile FILO (fonctions push, pop) –Utilisation dune chaîne " ABCDEF" et de la fonction charAt Génération chaîne de caractères aléatoire

ISIM 1 – Pages Web Statiques 30 Chaînes de caractères Pour déclarer une chaîne de caractères, on utilise les guillemets ou l'apostrophe Opérations sur les chaînes : Concaténation: –var chaine=chaine1+chaine2; Longueur dune chaine : –chaine.length() Extraire un morceau d'une chaîne : substring –La méthode substring attend 2 paramètres : –l'indice du premier caractère (inclus), –l'indice du dernier caractère (exclus).

ISIM 1 – Pages Web Statiques 31 Chaînes de caractères Chercher une chaîne dans une sous-chaine –chaine.indexOf(souschaine,debut) –// renvoie la première occurrence –domaine.lastIndexOf("souchaine") –// renvoie la dernière occurrence de la sous chaîne. Découper une chaîne –chaine.split("délimiteur") Autre : –chaine.toUpperCase() –chaine.toLowerCase() Codes ASCII –String.fromCharCode(i) lettre dont le code est i –String("A").charCodeAt(0) code ascii de A –String("A").charAt(j) j ième lettre de la chaîne A

ISIM 1 – Pages Web Statiques 32 Exercices Fonctions basename –Renvoyer nom de fichier [filename] –Renvoyer chemin complet (sans nom de fichier) [basename] –Renvoyer premier répertoire [dirname] Fonction basename paramétrée –Donner le nombre de sous-répertoires à exclure/inclure –Versions itératives et récursives

ISIM 1 – Pages Web Statiques 33 Expressions Régulières Utilisé pour effectuer des recherche ou des remplacements à lintérieur dune chaîne de caractères –Notations pour indiquer le format de ce qui recherché ou remplacé Fonctions utilisables avec un objet String : –Match() : pour rechercher les occurrences de lexpression régulière dans une chaîne –Replace() pour remplacer les occurrences de lexpression régulière dans une chaîne par une autre –Search() pour rechercher lindice dune occurrence dexpression régulière dans une chaîne chaine.match(expression) chaine.search(expression) chaine.replace(expression, remplacement)

ISIM 1 – Pages Web Statiques 34 Expressions Régulières Commence et se termine toujours par / –^ début de la chaîne –$ fin de la chaîne –. Nimporte quel caractère –/a/ on recherche un "a" –/ab/ on recherche la chaîne ab –[ ] permet dindiquer la plage de caractères –[abc] on recherche un des caractères a,b,c –[a-z] on recherche une lettre de a à z –[a-zA-Z0-9] caractères alphanumériques –[^abc] on recherche tout caractère sauf a, b ou c

ISIM 1 – Pages Web Statiques 35 Expressions Régulières Caractères répétitifs –{n,m} permet de rechercher le caractère au moins n fois mais pas plus de m fois –a{1,2} indique quon recherche le caractère a une fois ou deux fois maximum –[0-9]{1,5} indique quon recherche 1 à 5 chiffres consécutifs –a{1,} indique quon recherche le caractère au moins un fois –a{1} équivaut à a{1,1} –(ab)+ rechercher la chaine « ab » au moins une fois –(a|b)* rechercher des « a » ou des « b » qui se suivent dans nimporte quel ordre Drapeaux : –/xxx/i (insensible à la casse) –/xxx/g (toutes les occurences)

ISIM 1 – Pages Web Statiques 36 Expressions Régulières function verifMail(mail) { re = if (mail.match(re)!=null) return true; else return false; } chaine=" chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/, "Nom fichier : $2\nExtension : $3\nRepertoire : $1"); alert(chaine2); var madate = " "; madate2 = madate.replace(/^([0-9]{2})-([0-9]{2})-([0-9]{4})$/, "$2/$1/$3"); alert(madate2); basename,filename et extension en une seule ligne !

ISIM 1 – Pages Web Statiques 37 chaine=" dex.html"; chaine2 = chaine.replace(/^(.*)\/([^\.]*)\.(.*)$/, "Nom fichier : $2\n Extension :$3\n Repertoire : $1"); alert(chaine2);