POO. Université Nancy 2 - L2 Miage -Traitement du web - Nazih Ouwayed Introduction (2/3) Introduction (1/3) JavaScript.

Dimension: px

Commencer à balayer dès la page:

Download "POO. Université Nancy 2 - L2 Miage -Traitement du web - Nazih Ouwayed 2010-2011. Introduction (2/3) Introduction (1/3) JavaScript."

Basile Petit
il y a 8 ans
Total affichages :

1 UE 401 L2 ISC - MIAGE Traitement du Web Nazih OUWAYED nazih.ouwayed@loria.fr Séance 06 JavaScript POO Année Universitaire 2010/ Introduction (1/3) POO : Prorammation Orientée Objet Objectif Modéliser informatiquement un concept du monde réel en entités informatiques Exemple : classe voiture Avantaes : Code plus lisible donc maintenance plus facile Création des Librairies, ce qui permet d ajouter et de supprimer des fonctions et des attributs sans modifier le code Classe réutilisable : héritae Introduction (2/3) POO : Prorammation Orientée Objet Notion de classe On appelle classe la structure d'un objet, c'est-àdire la déclaration de l'ensemble des entités qui composeront un objet Un objet est donc "issu" d'une classe, c'est le produit qui sort d'un moule Une classe est composée de deux parties : Les attributs (parfois appelés données membres) : il s'ait des données représentant l'état de l'objet Les méthodes (parfois appelées fonctions membres) : il s'ait des opérations applicables aux objets Peueot 406 Roue Automatique Renault 18 Noire Manuelle 3 4 1

Exemple : classe voiture Avantaes : Code plus lisible donc maintenance plus facile Création des Librairies, ce qui permet d ajouter et de supprimer des fonctions et des attributs sans modifier le

2 Introduction (3/3) Comment JavaScript définit les objets? Javascript divise la pae du naviateur en éléments (objets), afin de permettre d'accéder à n'importe lequel d'entre-eux et de pouvoir les manipuler par l'intermédiaire de leurs propriétés et leurs méthodes On commence énéralement par l'objet le plus rand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu L'objet le plus rand est l'objet fenêtre : window Dans la fenêtre s'affiche une pae, c'est l'objet document Cette pae peut contenir plusieurs objets, comme des formulaires, des imaes, etc. 5 de base de JavaScript naviator : qui contient des informations sur le naviateur de celui qui visite la pae window : c'est l'objet où s'affiche la pae, 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 pae à l'écran history : c'est l'historique, c'est-à-dire la liste de liens qui ont été visités précédemment document : il contient les propriétés sur le contenu du document (couleur d'arrière plan, titre,...) 6 Hiérarchie des objets de JavaScript Définition des objets : 7 L objet naviator Propriétés appname : connaître le nom : Netscape, IE, Mozilla appversion : connaître la version lanuae : FR, EN platform : windows, Linux Exécution <script lanuae="javascript"> document.write(naviator.propriété); 8 2

méthodes On commence énéralement par l'objet le plus rand (celui contenant tous les autres) puis on descend dans la hiérarchie jusqu'à arriver à l'objet voulu L'objet le plus rand est l'objet fenêtre

3 L objet naviator Exemple : naviateur1.html <head> <script lanuae="javascript"> document.write(naviator.appname + <br> ); document.write(naviator.appversion + <br> ); document.write(naviator.platform); 9 L objet naviator Exemple : naviateur2.html <head><title>test</title> if(naviator.lanuae.indexof("en")>-1) document.write("dear visitor, welcome on our paes"); if(naviator.lanuae.indexof("fr")>-1) document.write("cher visiteur, soyez le bienvenu sur nos paes"); indexof() : retourne 0 (vrai) ou -1 (faux) 10 L objet Window est l'objet par excellence dans Javascript, car il est le parent de chaque objet qui compose la pae web Propriétés : name : nom de la fenêtre status : contenu de la barre d'état Méthodes : alert(), confirm() et prompt() : font apparaître une boîte de dialoue open() et close() : permettent l'ouverture et la fermeture de fenêtres Sous-objets : document : la pae en elle-même location : le lieu de stockae de la pae history : les paes visitées précédemment frames : les cadres (division de la fenêtre en sous-fenêtres) Plusieurs exemples sous : 11 L objet Window : propriété status affiche dans la barre d'état de la fenêtre d'affichae une valeur donnée Exemple : window0.html <head> <title>test</title> window.status = "Ma pae d'accueil";

write("cher visiteur, soyez le bienvenu sur nos paes"); indexof() : retourne 0 (vrai) ou -1 (faux) 10 L objet Window est l'objet par excellence dans Javascript, car il est le parent de chaque objet

4 L objet Window : propriétés innerheiht et innerwidth permettent de fixer au cours de l exécution la hauteur et la lareur de la fenêtre (en pixels) L objet Window : les méthodes open () et close () open () : pour ouvrir une nouvelle fenêtre close () : pour fermer la fenêtre Exemple : window01.html <head><title>test</title> window.innerheiht = 300; window.innerwidth = 600; <head> <title>test</title> function nouvellefenetre() { mafenetre=window.open("test.html", "premierefenetre", "width=300,heiht=200,scrollbars=yes, menubar=yes"); } <a href="javascript:nouvellefenetre()">nouvelle fenêtre</a> <a href="javascript:mafenetre.close()">fermer la fenêtre</a> L objet document L'objet document est un élément majeur, il permet de récupérer des informations d'un formulaire, créer des calques (divisions) et les déplacer, écrire du texte... Propriétés : fcolor : permet de récupérer et de chaner la couleur du texte de votre pae HTML Exemple : document.fcolor = "#993333"; bcolor: permet de récupérer et de chaner la couleur de fond de votre pae HTML lastmodified: permet de savoir quand la pae html a été modifiée Exemple pour document2.html : document.lastmodified;» Internet explorer et Mozilla renvoient : 11/11/ :30:56 L objet document Propriétés : linkcolor : permet de récupérer et de chaner la couleur des liens de votre pae HTML Location : permet de récupérer et chaner l'url de votre pae HTML, ce qui revient à charer une autre pae HTML Exemple: document.location = "URL/monDoc.HTML"; Méthodes write() : permet d'écrire dans votre pae HTML Sous-objets Imaes[ ] : permet de récupérer et chaner les imaes de votre pae HTML forms [ ]: permet de récupérer et chaner les informations de votre formulaire Plusieurs exemples sous :

innerwidth = 600; 300 600 <head> <title>test</title> function nouvellefenetre() { mafenetre=window.open("test.

5 L objet document Exemple : document1.html L'exemple fait un fondu enchaîné depuis le noir en passant par les nuances de ris jusqu'au blanc La fonction setcolor() est appelée avec à chaque fois un délai de 20 millièmes de seconde râce à settimeout var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); var x1 = 0, x2 = 0; function setcolor() { document.bcolor ="#" + X[x1] + X[x2] + X[x1] x2 = x2 + 1; + X[x2] + X[x1] + X[x2]; if(x2 % 16 == 0) { x2 = 0; x1 = x1 + 1; } } for(var i = 0; i < 255; ++i) { window.settimeout("setcolor()",20); } //20 ms 17 L objet document Exemple : bacroundcolor.html <head><title>test</title> <A href="javascript:void(document.bcolor='#339999')"> Fond bleu</a> <A href="javascript:void(document.bcolor='#66ff99')"> Fond vert</a> <A href="javascript:void(document.bcolor='white')"> Fond blanc</a> 18 Avec l'objet forms, qui se trouve sous l'objet document dans la hiérarchie JavaScript, vous avez accès aux formulaires définis dans un fichier HTML Syntaxe : document.forms["nom_formulaire" ].propriété document.forms["nom_formulaire" ].méthode ou document.nom_formulaire.propriété document.nom_formulaire.méthode Plusieurs exemples sous : L objet forms Propriétés: action : adresse du destinataire lors d'un envoi Lenth : nombre de formulaires dans un fichier method : méthode de transmission name : nom du formulaire taret : fenêtre cible pour réponses CGI (frames) Méthodes: reset() : réinitialiser le formulaire submit() : envoyer le formulaire Sous-objets: elements : accèder aux éléments d'un formulaire Syntaxe :» document.forms[#].elements[#].propriété» document.forms[#].elements[#].méthode()

settimeout var X = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"); var x1 = 0, x2 = 0; function setcolor() { document.

6 Exemple forms1.html Il s ait d accéder à la case à cocher pour modifier le contenu de la zone du texte en inscrivant : case cochée ou case non cochée La modification se fera par la fonction ModifChamp(); On déclare la case à cocher et la zone texte comme suit : <script lanuae="javascript"> function ModifChamp() { if (document.forms["form1"].checkbox.checked) { document.forms["form1"].champ_text.value='bouton coché' } else { document.forms["form1"].champ_text.value='bouton non coché' } } <form name="form1"> <br> <input type="checkbox" name="checkbox" onclick="modifchamp();"> <br> <input type='text' name='champ_text' value='essai du javascript' size='24'> </form> 21 Exemple forms2.html Permet l envoi du formulaire sans bouton submit après millièmes de seconde (une minute) <head><title>test</title> <form name="formulaire_test" action="/cibin/estime.pl" method="et"> <input type="text" size="40" name="champ1"><br> <input type="text" size="40" name="champ2"><br> </form> function on_y_va() { document.formulaire_test.submit(); } window.settimeout("on_y_va()",60000); 22 Le formulaire Exemple forms2.html Résultat Exercice 1 : réaliser le formulaire suivant Il s ait de calculer la moyenne d un élève ou d une matière Solution Moyennes_notes.html

$la case à cocher et la zone texte comme suit : <script lanuae="javascript"> function ModifChamp() { if (document.forms["form1"].checkbox.checked) { document.forms["form1"].champ_text.$

7 Biblioraphie A. Belaïd, Cours initiation techniques web

Documents pareils

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