La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Chapitre 5. Javascript.

Présentations similaires


Présentation au sujet: "Chapitre 5. Javascript."— Transcription de la présentation:

1 Chapitre 5. Javascript

2 Plan du chapitre Introduction / Historique / Versions Notions de base
Les fonctions Les évènements Les objets Les objets javascript Les objets du navigateur Le DHTML

3 Historique Développé par Netscape, au début des années 95.
Appélé LiveScript à l'origine, puis nommé Javascript dans Navigator 2 (1996) Jscript est développé par Microsoft qui encourage ces utilisateurs à développer en VBScript (VBA). Attention Java est javascript sont des langages complètement différents

4 Objectifs Scripts Clients Scripts Serveurs
Utilisé pour créer des pages WEB Dynamiques, Animation, DHTML, Ergonomie et Design des pages clientes, Validation des données saisies dans les formulaires, Sécurité, Identification, COOKIES, Contrôle des ActiveX, Applet, des plug-ins... Scripts Serveurs Génération dynamique de pages HTML, Interaction avec des sources de données,

5 Versions Versions Internet Explorer Navigator Javascript 1.0 3 2

6 Contraintes Langage Interprété assez lent
Script exécuté par le client, donc transmit par le flux HTTP Le source apparaît en clair Pas de support multitâche Il ne permet que très difficilement de générer des graphiques, Codage différent suivant le navigateur utilisé,

7 Notions de base Sensible à la CASSE
Attention à la localisation de votre script dans la page HTML Le script doit être placé entre les balises <SCRIPT>... </SCRIPT>. L'attribut LANGUAGE permet de spécifier la version utilisée. <SCRIPT LANGUAGE="javascript1.1"> ... </SCRIPT> Pour intégrer des fichiers ressources Javascript dans une page HTML : <SCRIPT LANGUAGE="javascript1.1" SRC="***.JS"> ... </SCRIPT> Une action de l'utilisateur sur la page HTML déclenche un événement. Le code associé aux événements est également écrit en Javascript . L attribut LANGUAGE permet de spécifier la version utilisée. Pour intégrer des fichiers ressources Javascript dans une page HTML : Une action de l utilisateur sur la page HTML déclenche un événement. Le code associé aux événements est également écrit en Javascript.", "width": "800" }

8 Notions de base Les scripts de la section <HEAD> sont toujours exécutés avant ceux de la section <BODY> Le code placé dans le header est interprété dès le chargement de la page => Bonne place pour y mettre les définitions des fonctions Les balises <NOSCRIPT>…. </NOSCRIPT> sont utilisées par les navigateurs incompatibles avec JAVASCRIPT. Pour les navigateurs trop anciens, les commentaires <!--… ---> peuvent servir à cacher le script. Ne pas confondre avec les commentaires du langage Javascript // ou /* …. */

9 Les constantes Les nombres : 24 ou 3.141592653589
les entiers décimaux les entiers en octal : ex 045 les entiers en hexa : ex 0xFF les nombre en virgule flottante (format double précision IEEE) Les booléens : true ou false Les chaînes de caractères : "CNAM“ ou 'CNAM' null : valeur indeterminée La variable «this», qui représente l’objet courant

10 Les variables Javascript est faiblement typé. Le contenu d'une variable spécifie son type. ATTENTION aux passages de paramètres. Déclaration des variables La déclaration explicite portée locale Pour déclarer des variables locales utilisez le mot clé VAR La déclaration implicite portée globale Exemple <SCRIPT>var maVar = 1;</SCRIPT> ", "width": "800" }

11 Les variables Les variables ont un type implicite, variant, et sont castées automatiquement si possible parseInt et parseFloat convertissent des chaînes de caractères Il n’y a pas d’allocation mémoire explicite pour la création de variables

12 Les variables exemples
Exemple d’utilisation : chaine= "ceci est \t une \n chaine" var answer = 27 Var bo_test = true x = "La réponse est " x contient "La réponse est 37" \t signifie une tabulation, \r un retour chariot \n un newline

13 Les opérateurs Les opérateurs mathématiques : + - * /
* / Les opérateurs d'assignation : = += -= *= /= Les opérateurs d'incrémentation : ++ Incrémentation -- Décrémentation Les opérateurs de comparaison : == opérateur d'égalité < opérateur d'infériorité stricte <= opérateur d'infériorité > opérateur de supériorité stricte >= opérateur de supériorité != opérateur de différence

14 L’opérateur conditionnel
val = (condition) ? val1 : val2 Exemple : status = (age >= 18) ? "adulte" : "mineur" Attention, comme en C, les opérateurs & et | sont des opérateurs binaires, pas logiques !

15 Structures de contrôle
if (condition) {action1} [ else {action2}] for ([initial];[condition];[modification]) {action} while (condition)

16 Structures de contrôle
Exemple : for (i=2;i<=4;i++) alert("numero "+i); j=2; while (j<=6) { alert("boucle "+j); j++; }

17 Structures de contrôle
for (variable in objet) { actions } with (objet) { actions}

18 Les exceptions Les exceptions sont générés soient par le système,
Soient par programme, Elles remontent (à la manière d’une bulle) jusqu’à leur interception, Dans le cas contraire un message d’erreur correspondant est affiché à l’utilisateur.

19 Les exceptions Une instruction try doit être suivie d’une instruction catch try { actions } catch (objet) { actions} Si une instruction du bloc catch génére une exception, elle est interprée par le bloc catch placée en dessous. L’instruction throw permet de générer une exception utilisateur.

20 Les exceptions : Exemple
try { if (q < 0) throw "div0" ; r = n / q; } catch (erreur) { alert (erreur);

21 Les fonctions Elles effectuent une tâche particulière,
Elles peuvent être appelées en réponse à un événement sur la page HTML, Leurs arguments ne sont pas prototypés, Elles permettent de capitaliser des traitements, Elles permettent de décliner un traitement en fonctions simplent (analyse déscendante).

22 Les fonctions Une fonction se définit de la facon suivante :
<SCRIPT LANGUAGE="javascript1.1"> <!-- // protège le script function mult (arg1,arg2) { var resultat; // variable locale resultat = arg1 * arg2; return resultat; // retour du résultat } --> </SCRIPT> Un appel à une fonction s'écrit de la facon suivante : <!-- resulat = mult (2,2); alert(resultat); function recherche(n,strCh) { var i=7.211 str="/search/searchwin.html" nombre=8.211 a=parseInt("1145") i=n } Un appel à une fonction s écrit de la facon suivante : Un appel à une fonction s écrit de la facon suivante : ", "width": "800" }

24 Les événements - handler
Javascript est un langage événementiel. Un événement est déclenché suite à une action d'un utilisateur. Il permet l'exécution d'un script Javascript. Un gestionnaire d’événements peut-être lié à une balise HTML.

25 Les événements - handler
<DIV onClick="maFonction ()"> Exécutez un fonction </DIV> Un gestionnaire d’évènements est associé une balise HTML, Il exécute un code JAVASCRIPT spécifique lorsque un événement est déclenché.

26 Les événements - handler
onClick lorsque l'utilisateur clique sur l'élément onLoad lorsque le navigateur charge la page en cours onUnload lorsque le navigateur de l'utilisateur quitte la page en cours onMouseOver lorsque l'utilisateur positionne le curseur de la souris sur un élément onMouseOut lorsque le curseur de la souris quitte un élément onFocus lorsque l'utilisateur donne le focus à un élément, onBlur lorsque l'élément perd le focus onChange lorsque l'utilisateur modifie le contenu d'un champ onSelect lorsque l'utilisateur sélectionne un texte onSubmit lorsque l'utilisateur clique sur le bouton submit onReset lorsque l'utilisateur clique sur le bouton reset

27 Les événements - handler

28 Gestionnaire d’EVT Exemple : <SCRIPT FOR="" EVENT="onmouseover">
<SCRIPT FOR="maBalise" EVENT="onmouseover"> </SCRIPT> </HEAD> <BODY> <DIV id="maBalise">Ma Balise</DIV> </BODY> </HTML>

Ma Balise
", "width": "800" }

29 Structure d’un EVT window.event
altKey altLeft behaviorCookie behaviorPart Bookmarks boundElements Button cancelBubble clientX clientY contentOverflow ctrlKey ctrlLeft dataFld dataTransfer fromElement keyCode nextPage offsetX offsetY propertyName qualifier reason recordset repeat returnValue screenX screenY shiftKey shiftLeft srcElement srcFilter srcUrn toElement type wheelDelta x y

30 Les Evenements WINDOW onafterprint onbeforeprint onbeforeunload onblur
onerror onfocus onhelp onload onresize onscroll onunload

31 Les Evenements DOCUMENT
onactivate onafterupdate onbeforeactivate onbeforedeactivate onbeforeeditfocus onbeforeupdate oncellchange onclick oncontextmenu oncontrolselect ondataavailable ondatasetchanged ondatasetcomplete ondblclick ondeactivate ondragstart onerrorupdate onfocusin onfocusout onhelp onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onmousewheel onpropertychange onreadystatechange onrowenter onrowexit onrowsdelete onrowsinserted onselectionchange onselectstart onstop

32 Les Evenements FORM onmoveend onmovestart onpage onpaste
onpropertychange onreadystatechange onreset onresize onresizeend onresizestart onrowenter onrowexit onrowsdelete onrowsinserted onscroll onselectstart onsubmit ondatasetcomplete ondblclick ondeactivate ondrag ondragend ondragenter ondragleave ondragover ondragstart ondrop onerrorupdate onfilterchange onfocus onfocusin onfocusout onhelp onkeydown onkeypress onkeyup onlayoutcomplete onlosecapture onmousedown onmouseenter onmouseleave onmousemove onmouseout onmouseover onmouseup onmousewheel onmove onactivate onafterupdate onbeforeactivate onbeforecopy onbeforecut onbeforedeactivate onbeforeeditfocus onbeforepaste onbeforeupdate onblur oncellchange onclick oncontextmenu oncontrolselect oncopy oncut ondataavailable ondatasetchanged

33 Les objets Un objet, c’est : Des propriétés, caractérisant l’objet
Des méthodes, permettant de modifier ces données Des gestionnaires d’événements (handlers), permettant de spécifier une action déclenchée en réponse à un événement

34 Les objets L’utilisation des objets : Propriétés : objet.propriété
Méthodes : objet.méthode() Handler : onClick="fonction()"

35 Les objets : Les propriétés
Accès aux valeurs des propriétés 1. Par la notation pointée (méthode classique) individu.prenom = "marcel"; 2. Par une matrice associative individu ["prenom"] = "marcel"; 3. Par l'utilisation de with with (individu) { prenom = "marcel"; nom = "dupont"; }

36 Les objets : Les constructeurs
Le constructeur Le constructeur est une fonction spéciale permettant d’affecter des valeurs au propriétés de l'objet par l'utilisation du mot clé this. Il permet également d'associer les méthodes à l'objet ainsi défini function afficher_nom_prenom () { alert (this.nom + " " + this.prenom); } function personne (nom,prenom,age,metier) { this.nom = nom; this.prenom = prenom; this.age = age; this.metier = metier; this. afficher_nom_prenom = afficher_nom_prenom;

37 Les objets : les instances
L'instance Une instance d'un objet est obtenu par l'utilisation du mot clé new. individu = new personne ("marcel","dupont","33","prof"); individu.afficher_nom_prenom (); ATTENTION OBJET != INSTANCE Ajout d'une propriété Ajout d'un propriété à une instance individu.établissement = 'CNAM'; Le mot clé prototype permet d'ajouter une propriété à toutes les instances d'un objet. personne.prototype.établissement = 'CNAM';

38 Les objets javascript Indépendant de la localisation du script (client ou serveur), « Boites noires » permettant d’effectuer des traitements ou actions spécifiques sur des chaines, des dates, des tableaux,…

39 L’objet : Array A. L'objet Array Gestion des matrices : Propriété :
length : nombre d'éléments Méthodes : join () : rassemble tous les éléments en une string reverse () : inverse l'ordre des éléments sort () : tri les éléments Gestion des matrices associatives : Cette technique s'initie en Javascript grace à l'objet Object. personne = new Object (); personne ['dupond'] = 'marcel'; personne ['martin'] = 'louis';

40 L’objet : Array var monTableau = new Array([dim])
la méthode length() permet de connaître le nombre d'éléments du tableau Pour faire référence à un élément d'un tableau : nomTableau[indice] Attention : les indices commencent à zéro Exemple : function MakeArray(n) { this.length = n; for (var i = 1; i <= n; i++) { this[i] = 0} return this } emp = new MakeArray(20); emp[1] = "Casey Jones" emp[2] = "Phil Lesh" emp[3] = "August West"

41 L’objet : String B. L'objet String Gestion des chaines : Propriété :
length : nombre d'éléments Méthodes : toUpperCase () :convertit les caractères en majuscules toLowerCase () :convertit les caractères en minuscules substring (p,l) :renvoie un segment de chaine charAt(p) :renvoie un caractère split(s) :renvoie un matrice d'éléments indexOf(s,[p]) :renvoie la position de la sous chaine lastIndexOf(s[p]):renvoie la dernière position Exemple : element = "A B C D".split(" ");

42 L’objet : String Les fonctions de manipulation de chaines sont dans un objet Chaque chaîne est implicitement un objet de ce type Exemples : var.toUpperCase() // conversion en majuscule var="texte".indexOf("e") // renvoie 1 var="chaine".charAt(2) // renvoie "a"

43 L’objet : Math C. L'objet Math
Cette objet est différent : il n'est pas instanciable, les fonctions sont directement disponibles. Math.abs, Math.rood, Math.max, Math.min, Math.pow, Math.random, Math.sqrt, Math.exp, Math.PI , Math.sin , Math.cos , Math.tan , ... exemple : Math.abs (Math.PI) -> 3

44 L’objet Date D. L'objet Date
Les dates seront stockées sous la forme du total de millisecondes écoulées depuis le 1er janvier 1970 (époque). Méthodes : setDate : Jour du mois setMonth, setYear () : mois, année setTime () : l'heure setHours, setMinutes, setSeconds : heures, minutes, secondes getDate, getMonth,… : permettent d'obtenir les valeurs stockées.toGMTString () : convertit la valeur en texte indiquant l'heure GMT Exemple : naissance = new Date (11,4,1970); // mois,jour,annee

45 Les objets du navigateur
Ensemble d’objets du navigator Objets représentant le browser Web ainsi que la page HTML qu’il contient Hiérarchie d’objets reprenant l’arborescence des objets contenus dans la page Un moyen simple d’interagir avec le browser et la page HTML

46 Les objets : Browser

47 L’objet : Window L’objet window : Représente le browser
Permet d’accéder à tous les objets encapsulés dans la fenêtre, Objet par défaut

48 L’objet : Window Les objets de la hierarchie Javascript représente la fenêtre du navigateur, le document chargé et ses éléments. A. Window : L'objet Window représente la fenêtre du navigateur (un objet par fenêtre ouverte) : Propriétés : window & self :fenêtre ouverte top :fenêtre active parent :en présence de frames la fenêtre englobante opener :fenêtre à l'origine de l'ouverture name :nom de la fenêtre length :nombre de frame defaultStatus :statut initial de la barre d'état status :valeur actuelle du statut location :URL document :contenu de la page WEB Méthodes : alert (), confirm (), prompt (), open (), close ()

49 L’objet : Window Propriétés :
defaultStatus : message affiché dans la status bar frames : tableau des frames du browser document : document dans le browser history : historique des documents visualisés dans ce browser location : adresse URL du document courant

50 L’objet : Window Les méthodes open(), et close()
window.open("URL","nom_de_la_fenetre","options_de_la_fenetre") Les options de la fenêtre sont les suivantes : directory = 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 ascenceurs (barres de défilement) 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 Exemple : var fenetre = open ("test.html","test","scrollbars, width=400, height = 300"); Chacune des fenêtres doit être fermée, pour cela il faut utiliser la méthode close(). Elle requiert le nom de la fenêtre comme argument.

51 L’objet : Window Les méthodes setTimeOut (), clearTimeOut ()
Fixe un délai en millisecondes avant l'exécution d'une instruction Javascript. Exemple : var ident = window.setTimeout ("alert ('Délai écoulé')", 1000); clearTimeout () Stop en un TimeOut avant son execution. window.clearTimeOut (ident);

52 L’objet : Window Evénements : onLoad : appelé au chargement de la page
onUnload : appelé au déchargement de la page

53 L’objet : Location L’objet location :
représente l’URL du document courant Permet d’avoir des renseignements sur l’adresse du document courant et de la modifier

54 L’objet : Location Propriétés :
host : port utilisé pour accéder au document courant hostname : nom du domaine href : indique l’URL complète pathname : chemin du document dans l’URL protocol : protocole utilisé

55 L’objet : Location Les méthodes : reload () : recharge la page
replace () : remplace la page

56 L’objet history L’objet history :
Représente l’ensemble des URLs balayées par le browser Permet de revenir vers des sites ou pages visitées

57 L’objet history Propriétés :
length : représente la taille de la mémoire Méthodes : back,forward,go : Permettent de se déplacer vers des URL déjà visitées

58 L’objet document L’objet document :
Représente le document ouvert dans le browser (la page HTML), Permet de manipuler la page HTML, Animation, Contrôle de saisie,…

59 L’objet document Propriétés : Méthodes : bgColor : couleur du fond
fgColor : couleur du texte linkColor : couleur des liens location : URL du document referrer : URL du document précédent title : titre vlinkColor : couleur des liens déjà visité forms [], links [], anchors[],images[],applets[],.. Méthodes : clear (), close (), open(), write (), writeln ()

60 L’objet document Méthodes :
open : permet d’ouvrir un document devant contenir, write et writeln : permettent d’écrire dans un document, et modifier son contenu.

61 L’objet link L’objet link : Représente les hyperliens dans un document
Il contient l’adresse des liens associés au document

62 L’objet link Propriétés : hostname : Nom du domaine ou adresse IP
href : URL au grand complet pathname : chemin du document dans l’adresse URL port : port de communication utilisé target : nom de la fenêtre où aboutira le lien

63 L’objet link handlers : onClick : appelé au choix du lien
onMouseOver : appelé quand la souris passe sur le lien

64 L’objet image Images Dynamiques
<IMG src = "monImage.gif" name = "monimage"> <SCRIPT LANGUAGE="JAVASCRIPT"> var uneImage = new Image (); uneImage.src = "dessin.gif"; document.images['monimage'].src = uneImage.src </SCRIPT> Utiliser setTimeOut pour réaliser des petites animations ATTENTION Le chargement des images prend du temps. Le script ci-dessus permet de pré-charger des images. Utiliser setTimeOut pour réaliser des petites animations. ATTENTION Le chargement des images prend du temps. Le script ci-dessus permet de pré-charger des images.", "width": "800" }

65 L’objet form L’objet form :
Form est un tableau d’objet ou chaque élément est un formulaire du document, Il permet la manipulation dynamique des propriétés des formulaires, Encapsule chaque champ (élement) des formulaires,

66 L’objet form Propriétés : Action : action à effectuer avec la form
Length : nombre d’éléments dans la form Method : methode GET ou POST Elements : tableau des éléments de la form

67 L’objet form Les contrôles button : bouton poussoir
checkbox : case à cocher hidden : champs caché password : champs de texte pour mot de passe radio : bouton radio reset : bouton pour réinitialiser une form select : combo box submit : bouton submit pour envoyer une form text : champs de saisie de texte textarea : champs de saisie de texte multi-lignes

68 L’objet form Méthode : Submit : effectue la même action que le bouton submit, il envoie la form au serveur Reset : réinitialise les valeurs des contrôles Handler : onSubmit : appelé quand on appuie sur submit

69 Les boutons Trois types de boutons : button, submit et reset
Apparence de boutons poussoirs Windows Action spécifique déclenchée lorsque l’utilisateur l’enfonce

70 Les boutons : types Reset permet le déclenchement de la réinitialisation du formulaire associé, Submit permet le déclenchement du submit du forumulaire associé.

71 Les boutons Propriétés : name et value Méthode : click()
Handler : onClick()

72 Les radios L’objet radio permet de :
Ensemble de valeurs possibles pour un champ, Les valeurs possibles sont limitées Les radios sont regroupés (utilisation d’un nom commun)

73 Les radios Propriétés :
checked : Permet de selectionner un bouton radio length : Nombre de boutons radio dans un groupe name : nom du radio

74 Les radios Méthode : Click() Handler : OnClick()

75 Les checkbox L’objet checkbox : Prend deux états (quelque fois 3)
Permet la saisie de champs dont le nombre de valeurs est limitée et mutiliple

76 Les checkbox Propriétés :
checked : Permet de selectionner un bouton radio name : nom du bouton

77 Les checkbox Méthode : Click() : permet de cliquer la case Handler :
OnClick() : appelé en cas de clic sur la case

78 Les select L’objet select :
Permet de choisir un élément parmis une liste Cette liste est présentée sous la forme d’une listbox ou d’une combobox

79 Les select Propriétés : length : nombre de choix disponibles
selectedIndex : index de l’option choisie

80 Les select Méthodes : blur : permet d’enlever le focus d’un élément
focus : permet de placer le focus sur un élément

81 Les select Handler : onBlur : appelé en cas de perte de focus
onChange : appelé en cas de changement de choix onFocus : appelé en cas de gain du focus

82 Les text l’objet text : Représente un champs de saisie pour l’utilisateur Est uniligne

83 Les text Propriétés : defaultValue : valeur du champs de saisie par défaut, placée dans le champs «VALUE» du script HTML name : nom de l’objet value : contenu du champs

84 Les text Méthodes : focus : prend le focus blur : perd le focus
select : marque le contenu comme sélectionné

85 Les text Handlers : onBlur : appelé en cas de perte de focus
onChange : appelé si au moment de la perte du focus, le contenu a changé onFocus : appelé en cas de gain du focus onSelect : appelé en cas de sélection d’une partie du texte de l’objet text

86 Les textarea L’objet textarea : Est un contrôle de saisie de texte
Se conduit comme un objet text Permet d’entrer plusieurs lignes de texte Possède des scrollbars pour faire défiler le texte Propriétés, méthodes et handlers comme pour l’objet text

87 Les password L’objet password : Est un champs de saisie de text
Chaque lettre du contenu apparait sous la forme d’une étoile Sert à entrer des mots de passe

88 Les password Il n’est pas possible de le lire à partir du script
Propriétés, méthodes comme pour l’objet text, mais pas de handlers

89 L’objet elements La matrice elements permet d'accéder aux champs du formulaires : document.forms[formName].elements[fieldName].value Liste déroulante courant = document.forms['nomFormulaire']. elements['nomChamp'].selectedIndex valCourante = document.forms['nomFormulaire']. elements['nomChamp'].options[courant].value;

90 L’objet elements Exemple de validation des données dans un formulaire : <SCRIPT> function validation (formulaire) { return false; // pas d'envoi des données } </SCRIPT> <FORM NAME="test" METHOD="POST" onSubmit = "return validation(this)"> <INPUT TYPE = "TEXT" NAME ='NOM'> </FORM>

", "width": "800" }

91 L’objet Navigator Propriétés : Exemple :
L'objet Navigator fournit des informations sur la version du Navigateur utilisée Propriétés : appCodeName : le nom de code du navigateur appName : le nom du navigateur appVersion : version du navigateur mimeTypes : liste des types MIME disponibles Exemple : <SCRIPT LANGUAGE="Javascript"> var ie = false, nescape = false; if (parseInt (navigator.appVersion) >= 4) { if (navigator.appName = "Microsoft Internet Explorer") ie = true; if (navigator.appName = "Netscape") netscape = true; } </SCRIPT> ", "width": "800" }

92 Le DHTML DHTML disponible depuis HTML 4 sur IE 4 et Nescape 4
DHTML sur IE est très différent de DHTML sur Netscape Pour modifier les styles d'une balise tag utiliser le code suivant Internet Explorer document.all.tag.style.propriete_de_style Navigator document.tag.propriete_de_style Exemple if (ie) document.all.tag.style.top = 34; if (nescape) document.tag.top = 34;

93 Le DHTML Les balises DIV et SPAN possèdent (sur IE uniquement) des propriétés permettant de modifier leur contenu. innerHTML : interprété comme du HTML innerText : interprété comme du Texte outerHTML : remplace la balise et est interprété comme du HTML outerText : remplace la balise et est interprété comme du Texte Exemple : function changeText (texte) { document.all.texte.innerHTML = texte; } <DIV id="texte">Bonjour</DIV> <A HREF="Javascript:;" onClick="changeText('vous avez cliqué')> Cliquez ici </A>

94 Sécurité Javascript peut manipuler des données, mais ne peut pas communiquer avec le serveur HTTP. Javascript ne peut pas faire appel aux ressources du poste client. Pas d'appel aux commandes systèmes, pas d'appel appel aux API windows. Javascript ne dispose pas de fonctionnalité réseau. Javascript ne peut pas effectuer d'entrées/sorties sur les fichiers locaux Javascript est limité dans ses accès à l'historique. L'envoi d'un courrier ne peut plus se faire sans la validation au préalable de l'utilisateur.

95 Sécurité Il peut exister des accès complet à l'historique sur les anciens navigateurs Attention aux fausses boites de dialogue d'identification qui peuvent récupérer votre login et votre mot de passe. De pages web peuvent contenir des grandes boucles sur des calculs complexes afin de vous faire consommer du temps machines. Attention aux fenêtres modales bloquantes. Attention aux Active X qui peuvent accéder aux ressources de votre machine. Attention aux Exécutables qui peuvent devenir de véritables serveur d'informations confidentielles (cheval de Troie).

96 Les cookies Les navigateurs peuvent stocker :
4 Ko d'information. 20 cookies par domaine. Si ces limites sont atteintes, le navigateur détruit les cookies avec la date d'expiration les plus récentes.

97 Les cookies Pour écrire un COOKIE Pour lire un COOKIE
document.cookie = "nom=emma; path=/;expires=Thu, 25-dec-00 00:00:01 GMT"; Pour lire un COOKIE cookie = document.cookie; Retourne le cookie qui est associé au domaine et chemin d'accès de la page active. Pour supprimer un COOKIE Mettre sa valeur à null et mettre sa propriété expires à une date passée.

98 Les cookies - setCookie
function setCookie(cookieName, cookieVal, days) { if (!days) days = 1; var expDate = new Date() expDate.setTime(expDate.getTime()+days*24*60*60*1000); var expDateString = expDate.toGMTString(); document.cookie = cookieName + "=" + escape(cookieVal) + ";expires="+expDateString; }

99 Les cookies - getCookie
function getCookie(cookieName) { cookieName = cookieName+"="; var allCookies = document.cookie; if (allCookies.length > 0) { var start = allCookies.indexOf(cookieName); if (start != -1) { start = start + cookieName.length; var end = allCookies.indexOf(";",start); if (end == -1) end = allCookies.length; return unescape(allCookies.substring(start,end)); } } return null; }

100 Live Connect Le LiveConnect (netscape) permet de faire communiquer Javascript avec une applet JAVA LiveConnect fournit une communication bidirectionnelle et gère la conversion des types de données (contrairement à Javascript, JAVA est fortement typé). <APPLET CODE ="anim.class" NAME="anim"> </APPLET> <FORM> <INPUT TYPE=" button " NAME="start" onClick = "document.anim.start();"> <INPUT TYPE="button" NAME="stop" onClick = "document.anim.stop();"> </FORM> IE dispose d'une technologie identique pour piloter les ActiveX.

101 Les outils du marché Visual Javascript Spécifique à Netscape
Intègre un éditeur HTML Intègre un éditeur Javascript Intègre un debogueur Javascript Visual Interdev Spécifique Microsoft Javascript coté client / VB script coté serveur (ASP) Conçu pour développer des pages ASP Contient des outils d'administration de site Des assistants de création de base données

102 Références – sites web http://www.commentcamarche.net/

103 Références – livres Javascript Edition S&SM Laura Lemay & Michael Moncur JAVASCRIPT de FLANAGAN, David O'REILLY JAVASCRIPT PROFESSIONNEL de MCFARLANE, Nigel EYROLLES


Télécharger ppt "Chapitre 5. Javascript."

Présentations similaires


Annonces Google