Module Internet (3) 1 Département Technologie de l’Information et de la Communication Internet.

Slides:



Advertisements
Présentations similaires
Conception de Site Webs dynamiques Cours 6
Advertisements

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
Internet : serveurs Web
UV Libre : Refonte du site web ASI Maxime CHAMBREUIL – ASI 3 – Décembre 2001.
Exposé de Système - Informatique et Réseau
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.
XHTML EXtensible HyperText Markup Language. HTML et XML HTML (HyperText Markup Language) et XML (eXtensible Markup Language) sont deux spécifications.
1 Javascript Merci à Emmanuel Nauer. 2 Javascript Quid ? Langage de programmation lié à HTML. Code Javascript intégré aux pages HTML. Code interprété
SVG: Scalable Vector Graphics Exemple: Vienne Christine Potier, INF347, 20 juin 2008.
LICENCE MIAGE Introduction Programmation Orientée Objet JAVA philippe
Introduction aux Web Services Partie 1. Technologies HTML-XML
Le Téléphone Russe Le Téléphone Russe. Le Téléphone Russe Le Téléphone Russe.
2006/2007Denis Cabasson – Programmation Web Cours de programmation web ENSAE
Web traditionnel
CPI/BTS 2 Programmation Web Introduction au PHP
LES LANGAGES DE PROGRAMMATIONS JAVASCRIPTH.T.M.LP.H.PS.Q.L Reynald Maréchal DI045.
Présentation de la séquence de cours sur les interactions HTML-javascript Laure Walser, 11 juin 2010.
Le langage Javascript pour le web
Les langages de scriptage Insertion des scripts Javascript ou VBscript.
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.
Clients riches RIA (Rich Internet Application) / RDA
Web dynamique PhP + MySQL AYARI Mejdi 2006
JavaScript PhD. Wajdi GARALI INSAT 2010
Cours n° 1 Le langage HTML Prof. : E. BAKKI
Animateur : Med HAIJOUBI
TracenPoche Insérer une figure TepWeb >.  Contenu de l'archive tepweb.zip Contenu de l'archive tepweb.zip  Quelques notions de html Quelques notions.
-Présentation de l’équipe -Cadre du projet -Enjeux -Choix du sujet.
PHP 1° PARTIE : LES BASES © BTS IRIS 2002 [tv] Présentation Historique
Javascript 1° PARTIE : LES BASES
Le langage XHTML 420-S4W-GG Programmation Web Client
Module I-C3 : Applications Web IUT R&T 2e année
Département Technologie de l’Information et de la Communication
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-
PROGRAMMATION WEB FRONT-END.
Introduction à JavaScript
LE HTML ISN Terminale S Un peu d’histoire …
JavaScript.
Le langage XML.
AngularJS.
Cours de programmation web
Programmation en C++ Autres langages
SSPT – CHOPIN module 2 Système de gestion de contenu de sites web Par Liette Pothier, Chargée de projet Nancy Dodier, technicienne en informatique.
Internet : serveurs Web  Clients et serveurs : le navigateur  Sites Web et urls  Fichier source d’une page  Langage HTML 1.
Les balises HTML et les objets JavaScript correspondants Objet document L'objet document est important dans la mesure ou il contient tous les objets du.
 Syntaxe du langage PHP
ETUDE DE CAS : JavaScript, Ajax, Web 2.0.
Campus-Booster ID : **XXXXX Copyright © SUPINFO. All rights reserved Le développement Web.
Introduction au socle MEAN
Module : Pages Web Dynamiques (Production Électronique Avancée)
Dynamic HTML Regroupement de trois éléments : le HTML
S'initier au HTML et aux feuilles de style CSS Cours 5.
INTERNET Le langage HTML
Initiation au JavaScript
Sites Web interactifs 2010 / 2011 / S1 Bernhard Rieder.
Les langages de programmation
Function cas(uneNoteCCouCF){ laCellule.align="center"; uneNoteCCouCF=Number(uneNoteCCouCF); if(isNaN(uneNoteCCouCF)){ return "-"; } else { if(uneNoteCCouCF>=0){return.
Séance /10/2005 CSS et Dreamweaver. CSS : principes Cascading Style Sheet = feuille de style en cascade Norme du W3C :
CPI/BTS 2 Programmation Web Introduction au HTML Prog Web CPI/BTS2 – M. Dravet – 18/09/2003 Dernière modification: 18/09/2003.
Introduction à MathML Par Katia Larrivée UQO Le 18 mars 2004.
Le JavaScript.. Histoire Langage créé en 1995 par Brendan Eich pour la Netscape Communications Corporation. Est inspiré de nombreux langages, notamment.
22 Concepts de base du langage Java. 2-2 Objectifs A la fin de ce cours, vous serez capables de : Identifier les éléments essentiels de Java Identifier.
Dreamweaver MX Jauneau Marie Claude-Antoine Zarate.
CPI/BTS 2 Programmation Web Introduction au HTML Prog Web CPI/BTS2 – M. Dravet – 18/09/2003 Dernière modification: 18/09/2003.
APP-TSWD Apprentissage Par Problèmes Techniques des Sites Web Dynamiques Licence Professionnelle FNEPI Valérie Bellynck, Benjamin Brichet-Billet, Mazen.
Jquery Veille technologie – Nathan Chéron
JavaScript.
Présenté par Viviane Lévesque
Transcription de la présentation:

Module Internet (3) 1 Département Technologie de l’Information et de la Communication Internet

Module Internet (3) 2 Département Technologie de l’Information et de la Communication Sommaire Javascript

Module Internet (3) 3 Département Technologie de l’Information et de la Communication Javascript

Module Internet (3) 4 Département Technologie de l’Information et de la Communication Javascript (1/3) Au début: –LiveScript, –développé par Netscape. Le 4 décembre 1995, suite à une association avec Sun, Netscape rebaptise son langage Javascript : –clin d'oeil au langage Java.

Module Internet (3) 5 Département Technologie de l’Information et de la Communication Javascript (2/3) Permet de rendre un site interactif de manière simple (pour les non développeurs), –réagir aux actions de l'utilisateur.

Module Internet (3) 6 Département Technologie de l’Information et de la Communication Javascript (3/3) Javascript n’est pas Java : JavascriptJava (applet) langage interprétélangage pseudo-compilé code intégré au HTML code à part du document HTML, appelé à partir de la page langage peu typé langage fortement typé accessibilité du code confidentialité du code pas d’écriture sur le disque dur

Module Internet (3) 7 Département Technologie de l’Information et de la Communication Où placer le code? Dans la page HTML: –entre les balises: … –language="javascript" est facultatif: javascript est (actuellement…) le language de script par défaut. Les fonctions sont déclarés dans l'en-tête de la page html: –entre et.

Module Internet (3) 8 Département Technologie de l’Information et de la Communication Les Commentaires // sera en commentaire /* ceci sera aussi un commentaire sur plusieurs lignes */

Module Internet (3) 9 Département Technologie de l’Information et de la Communication Pour les anciens navigateurs Pour résoudre le problème des anciens navigateurs qui ne supportent pas javascript : <!-- // code javascript -->

Module Internet (3) 10 Département Technologie de l’Information et de la Communication Exemple (1/2) Ma première page avec javascript <!-- //partie cachée aux anciens navigateurs document.write("Bonjour tout le monde"); -->

Module Internet (3) 11 Département Technologie de l’Information et de la Communication Exemple (2/2)

Module Internet (3) 12 Département Technologie de l’Information et de la Communication Syntaxe Les instructions se terminent par " ; ". Casse: –majuscule != minuscule. Opérateurs: ==, !=, = =,, &&, ||, Boucle: for(i = 0; i<5; i++){ // instructions } while(a<b){ // instructions } do{ // instructions } < while(a<b)

Module Internet (3) 13 Département Technologie de l’Information et de la Communication Déclaration des variables Deux façons: –explicite (avec le mot clé var ): var st_chaine= "bonjour"; –implicite (sans mot clé): st_chaine= "bonjour"; // st_chaine est globale –exemples: var MaVariable1; MaVariable2 = 56; MaVariable1 = 32;

Module Internet (3) 14 Département Technologie de l’Information et de la Communication Exercice 1 Écrire un script qui affiche la page suivante:

Module Internet (3) 15 Département Technologie de l’Information et de la Communication Les tableaux (1/2) 3 manières de déclarer un tableau: var Tab = new Array(); // déclaration d'un tableau vide –déclaration et initialisation en même temps: première méthode: var Tab = new Array("donnée 1", "donnée 2", "donnée 3"); seconde méthode: var Tab = ["donnée 1", "donnée 2", "donnée 3"];

Module Internet (3) 16 Département Technologie de l’Information et de la Communication Les tableaux (2/2) Utilisation: Tab[0] = "Bonjour à tous"; Tab[1] = "Rebonjour à tous"; Tableaux associatifs: Tab["Jean"] = 16; Tab["Paul"] = 14; –exemple: document.write("Le second élément du tableau vaut "+Tab[1]); document.write("La note de Paul est : "+Tab["Paul"]);

Module Internet (3) 17 Département Technologie de l’Information et de la Communication Les fonctions (1/3) Définition: function nom_fonction(paramètres) { // instructions }

Module Internet (3) 18 Département Technologie de l’Information et de la Communication Les fonctions (2/3) Appel: nomDeLaFonction(arguments) La fonction doit être définie avant l'appel: –la définition sera placée dans l'en-tête de la page html.

Module Internet (3) 19 Département Technologie de l’Information et de la Communication Les fonctions (3/3) Valeur de retour: –mot clé: return –exemple: function carre(nombre) { var resultat = nombre*nombre; return resultat; }

Module Internet (3) 20 Département Technologie de l’Information et de la Communication La fonction Alert Permet d'afficher un message: –une fenêtre avec du texte et un bouton OK. Syntaxe: alert("texte"); alert(variable); –exemple: alert("bonjour");

Module Internet (3) 21 Département Technologie de l’Information et de la Communication La fonction prompt Affiche une fenêtre avec du texte, une zone de saisie, un bouton OK et un bouton annuler : –permet la saisie de l'utilisateur. –exemple: var reponse = prompt("Texte de la boîte","valeur par défaut"); –retourne: la valeur de la zone de saisie, null si l'utilisateur clique sur annuler.

Module Internet (3) 22 Département Technologie de l’Information et de la Communication La fonction confirm Affiche une fenêtre avec du texte, un bouton OK et un bouton annuler : –permet de demander confirmation. –exemple: var continuer = confirm("Voulez-vous continuer?"); –retourne: true si l'utilisateur clique sur OK, false sinon.

Module Internet (3) 23 Département Technologie de l’Information et de la Communication Fonctions et boîtes de dialogue Déclaration: function fonctionTest(monTexte) { alert(monTexte); } Appel : fonctionTest("bonjour"); –affichera une fenêtre avec le texte " bonjour "

Module Internet (3) 24 Département Technologie de l’Information et de la Communication Exercice Écrire une page qui demande la saisie de 2 valeurs (à l'ouverture) et qui en affiche la somme: –vous utiliserez la fonction parseFloat(chaine) pour convertir une chaîne de caractères en réel:

Module Internet (3) 25 Département Technologie de l’Information et de la Communication Scripts externe Le script peut être enregistré dans un fichier indépendant de la page Web: –réutilisation du script dans une autre page. Le fichier est précisé dans : –exemple:

Module Internet (3) 26 Département Technologie de l’Information et de la Communication Les objets (1/5) objet window objet document objet champ texte objet bouton radio objet formulaire objet bouton

Module Internet (3) 27 Département Technologie de l’Information et de la Communication Les objets (2/5) Les objets de base du navigateur sont les suivants: navigator contient des informations sur le navigateur de celui qui visite la page. window c'est l'objet où s'affiche la page, il contient donc des propriétés concernant la fenêtre elle-même mais aussi tous les objets-enfants contenus dans celle-ci. location contient des informations relatives à l'adresse de la page à l'écran. history liste de liens visités précédemment. document propriétés sur le contenu du document (couleur arrière plan, titre,...).

Module Internet (3) 28 Département Technologie de l’Information et de la Communication Les objets (3/5) Pour accéder à un objet: –commencer par l'objet le plus élevé, puis descendre dans la hiérarchie, –exemple: pour accéder au bouton semaine placé dans le formulaire test : window.document.test.semaine –remarque: window est facultatif.

Module Internet (3) 29 Département Technologie de l’Information et de la Communication Les objets (4/5) Pour accéder aux propriétés des objets: –opérateur ". " nom_de_objet.nom_propriété –exemple: document.nom_form.nom_radio.checked permet de savoir si le bouton radio est coché ( ON ) ou NULL.

Module Internet (3) 30 Département Technologie de l’Information et de la Communication Les objets (5/5) Navigator AppName retourne le nom du navigateur. AppVersion retourne la version.

Module Internet (3) 31 Département Technologie de l’Information et de la Communication Exemple Objet navigator :

Module Internet (3) 32 Département Technologie de l’Information et de la Communication Propriétés (1/6) Zone de texte: PropriétéDescription name nom du contrôle defaultValue valeur par défaut du contrôle value valeur en cours du contrôle

Module Internet (3) 33 Département Technologie de l’Information et de la Communication Propriétés (2/6) document.write(" name="+document.monFormulaire.leNo m.name+" "); document.write("defaultvalue="+document.monFormulaire.leNom.defaultValue+" "); document.write("value="+document.monFormulaire.leNom.value+" ");

Module Internet (3) 34 Département Technologie de l’Information et de la Communication Propriétés (3/6) Case à cocher: PropriétéDescription name nom du contrôle checked état en cours defaultChecked bouton sélectionné par défaut ? value valeur du bouton

Module Internet (3) 35 Département Technologie de l’Information et de la Communication Propriétés (4/6) Boutons radio: PropriétéDescription name nom du contrôle checked état en cours defaultChecked bouton sélectionné par défaut value valeur de l'élément case à cocher

Module Internet (3) 36 Département Technologie de l’Information et de la Communication Propriétés (5/6) Liste de sélection: PropriétéDescription id nom de la liste déroulante length nombre d'éléments de la liste selectedIndex rang de l'élément sélectionné (à partir de 0) value valeur de l'élément sélectionné

Module Internet (3) 37 Département Technologie de l’Information et de la Communication Propriétés (6/6) Zone de texte ( TextArea ): PropriétéDescription name nom du champ textArea defaultValue valeur par défaut du champ value valeur courante du champ texte

Module Internet (3) 38 Département Technologie de l’Information et de la Communication Les évènements (1/6) Avec HTML : –un seul événement: le click souris (assez limité...). Javascript ajoute les événements suivants qui peuvent être insérés dans les balises HTML du document: Click lorsque l'utilisateur clique sur un bouton, un lien ou tout autre élément. Load lorsque la page HTML est chargée par le navigateur. Unload lorsque l'utilisateur quitte ou change de page HTML.

Module Internet (3) 39 Département Technologie de l’Information et de la Communication Les évènements (2/6) Javascript : MouseOver lorsque l'utilisateur place le pointeur de la souris sur un lien ou tout autre élément. MouseOut lorsque le pointeur de la souris quitte un lien ou tout autre élément.

Module Internet (3) 40 Département Technologie de l’Information et de la Communication Les événements (3/6) Javascript: Focus lorsqu'un élément de formulaire a le focus (i.e. devient la zone d'entrée active). Blur lorsqu'un élément de formulaire perd le focus ( i.e. lorsque l'utilisateur clique hors du champ et que la zone entrée n'est plus active). Change lorsque la valeur d'un champ de formulaire est modifiée. Select lorsque l'utilisateur sélectionne un champ dans un élément de formulaire. Submit lorsque l'utilisateur clique sur le bouton Submit pour envoyer un formulaire.

Module Internet (3) 41 Département Technologie de l’Information et de la Communication Les événements (4/6) Javascript: Abort lorsque l'utilisateur interrompt le chargement de l'image. Dblclick lorsque l'utilisateur double-clique sur l'élément (un lien hypertexte ou un élément de formulaire). Dragdrop lorsque l'utilisateur effectue un glisser-déposer sur la fenêtre du navigateur. Error lorsqu'une erreur apparaît durant le chargement de la page.

Module Internet (3) 42 Département Technologie de l’Information et de la Communication Les évènements (5/6) Javascript: Keydown lorsque l'utilisateur appuie sur une touche de clavier. Keypress lorsque l'utilisateur maintient une touche de clavier enfoncée Keyup lorsque l'utilisateur relâche une touche de clavier. Reset lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton Reset. Resize lorsque l'utilisateur redimensionne la fenêtre du navigateur.

Module Internet (3) 43 Département Technologie de l’Information et de la Communication Les évènements (6/6) Récupération d'un événement et appel de fonction: onNom_événement="nom_fonction();" –exemple: onClick="alert('Vous avez cliqué sur cet élément');"

Module Internet (3) 44 Département Technologie de l’Information et de la Communication Exemple lien

Module Internet (3) 45 Département Technologie de l’Information et de la Communication Exemple function bienvenue(){ alert("bienvenue sur ma page"); } function auRevoir(){ alert("Au revoir"); } voici ma page

Module Internet (3) 46 Département Technologie de l’Information et de la Communication Exemple À la fermeture:

Module Internet (3) 47 Département Technologie de l’Information et de la Communication Les boutons 3 types: –bouton submit (déjà vu), –bouton reset (déjà vu), –bouton normal:

Module Internet (3) 48 Département Technologie de l’Information et de la Communication Exercice Écrire le code de la page suivante, permettant de sélectionner son système d'exploitation: –après chaque changement, la nouvelle valeur de la liste sera affichée: –remarque: créer une fonction permettant l'affichage de la valeur de la liste.

Module Internet (3) 49 Département Technologie de l’Information et de la Communication La méthode open() (1/3) La méthode open() (de l'objet window ) permet d'ouvrir une fenêtre: window.open("URL","nom_de_la_fenetre","options_de_la_fenetre"); –exemple d'utilisation dans un lien hypertexte: <a href=# onClick="window.open('URL', 'nom_de_la_fenetre', 'options_de_la_fenetre');return(false)">Lien

Module Internet (3) 50 Département Technologie de l’Information et de la Communication La méthode open() (2/3) Les options de la fenêtre sont les suivantes: directories = yes/no affiche ou non les boutons de navigation. location = yes/no affiche ou non la barre d'adresse. menubar = yes/no affiche ou non la barre de menu (fichier, edition,...). resizable = yes/no définit si la taille de la fenêtre est modifiable ou non. scrollbars = yes/no affiche ou non les ascenseurs (barres de défilement).

Module Internet (3) 51 Département Technologie de l’Information et de la Communication La méthode open() (3/3) Options de la fenêtre: status = yes/no affiche ou non la barre d'état. toolbar = yes/no affiche ou non la barre d'outils. width = largeur (en pixels) définit la largeur. height = hauteur (en pixels) définit la hauteur.

Module Internet (3) 52 Département Technologie de l’Information et de la Communication Exercice Écrire un lien permettant d'afficher la page suivante:

Module Internet (3) 53 Département Technologie de l’Information et de la Communication Exercice Écrire un script de telle sorte que lorsque la souris passe sur une image celle-ci est modifiée:

Module Internet (3) 54 Département Technologie de l’Information et de la Communication Exercice Écrire une mini calculatrice:

Module Internet (3) 55 Département Technologie de l’Information et de la Communication Références