Embed Size (px)
Citation preview
Chapitre 5. Javascript
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
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
Objectifs
• Scripts Clients– 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,
Versions
• Versions Internet Explorer Navigator
• Javascript 1.0 3 2
• Javascript 1.1 3
• Javascript 1.2 4 4
• Javascript 1.3 5 4
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é,
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
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 /* …. */
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
Les variables
• Javascript est faiblement typé. Le contenu d'une variable spécifie son type.
ATTENTION aux passages de paramètres.
Déclaration des variablesLa 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>
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
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 " + 37 x contient "La réponse est 37"
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
L’opérateur conditionnel
• val = (condition) ? val1 : val2
• Exemple :status = (age >= 18) ? "adulte" : "mineur"
Structures de contrôle
• if (condition) {action1}
[ else
{action2}]
• for ([initial];[condition];[modification]) {action}
• while (condition) {action}
Structures de contrôle
Exemple :for (i=2;i<=4;i++) alert("numero "+i);j=2;
while (j<=6) { alert("boucle "+j); j++;}
Structures de contrôle
• for (variable in objet){ actions }
• with (objet){ actions}
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.
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.
Les exceptions : Exemple
try {
if (q < 0) throw "div0" ;
r = n / q;
}
catch (erreur) {
alert (erreur);
}
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).
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 localeresultat = arg1 * arg2;return resultat; // retour du résultat
}--></SCRIPT>
• Un appel à une fonction s'écrit de la facon suivante :<SCRIPT LANGUAGE="javascript1.1"> <!--resulat = mult (2,2);alert(resultat);--></SCRIPT>
Les fonctions• Arguments multiplesJavascript dispose d'une matrice spéciale appeléearguments qui contient l'ensemble des argumentspassés à une fonction.
<SCRIPT LANGUAGE="javascript1.1"> <!-- // protège le script function add () {
var resultat = 0; // variable locale
for (i=0;i<add.arguments.length;i++) { resultat += add.arguments[i];
}
return resultat; // retour du résultat}--></SCRIPT>
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.
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é.
Les événements - handleronClick 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
Les événements - handler
Objet Navigateur Balise HTML Evénements
Area <MAP> <AREA> onClick, onMouseOut,onMouseOver
Frame <FRAMESET> onLoad,onUnload
Image <IMG> onAbort,onError,onLoad
Link <A> onClick, onMouseOut,onMouseOver
Window <BODY> onBlur,onError,onFocus,onLoad,onUnload
Form <FORM> onReset,onSubmit
Element du formulaire
<INPUT> <SELECT> <TEXTAREA>
onClick,onChange,onFocus,onBlur, onkeydown
Lin k
Gestionnaire d’EVT
Exemple : <SCRIPT FOR="maBalise" EVENT="onmouseover">
</SCRIPT></HEAD><BODY>
<DIV id="maBalise">Ma Balise</DIV></BODY></HTML>
<SCRIPT FOR="" EVENT="onmouseover">//SCRIPT
</SCRIPT>
Structure d’un EVTwindow.event
altKeyaltLeftbehaviorCookiebehaviorPartBookmarksboundElementsButtoncancelBubbleclientXclientYcontentOverflow
ctrlKeyctrlLeftdataFlddataTransferfromElementkeyCodenextPageoffsetXoffsetYpropertyNamequalifier
reasonrecordsetrepeatreturnValuescreenXscreenYshiftKeyshiftLeftsrcElementsrcFiltersrcUrn
toElementtypewheelDeltaxy
Les Evenements WINDOW• onafterprint • onbeforeprint • onbeforeunload • onblur • onerror • onfocus • onhelp • onload • onresize • onscroll • onunload
Les Evenements DOCUMENT
• onactivate
• onafterupdate
• onbeforeactivate
• onbeforedeactivate
• onbeforeeditfocus
• onbeforeupdate
• oncellchange
• onclick
• oncontextmenu
• oncontrolselect
•onfocusin
•onfocusout
•onhelp
•onkeydown
•onkeypress
•onkeyup
•onmousedown
•onmousemove
•onmouseout
•onmouseover
•onmouseup
•onmousewheel
•onpropertychange
•onreadystatechange
•onrowenter
•onrowexit
•onrowsdelete
•onrowsinserted
•onselectionchange
•onselectstart
•onstop
•ondataavailable
•ondatasetchanged
•ondatasetcomplete
•ondblclick
•ondeactivate
•ondragstart
•onerrorupdate
Les Evenements FORM• onactivate • onafterupdate • onbeforeactivate • onbeforecopy • onbeforecut • onbeforedeactivate • onbeforeeditfocus • onbeforepaste • onbeforeupdate • onblur • oncellchange • onclick • oncontextmenu • oncontrolselect • oncopy • oncut • ondataavailable • ondatasetchanged
•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
•onmoveend
•onmovestart
•onpage
•onpaste
•onpropertychange
•onreadystatechange
•onreset
•onresize
•onresizeend
•onresizestart
•onrowenter
•onrowexit
•onrowsdelete
•onrowsinserted
•onscroll
•onselectstart
•onsubmit
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
Les objets
L’utilisation des objets :
• Propriétés : objet.propriété
• Méthodes : objet.méthode()
• Handler : onClick="fonction()"
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";
}
Les objets : Les constructeurs
• Le constructeurLe 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;
}
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 instanceindividu.établissement = 'CNAM';
Le mot clé prototype permet d'ajouter une propriété à toutes les instances d'un objet.personne.prototype.établissement = 'CNAM';
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,…
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 stringreverse () : inverse l'ordre des élémentssort () : 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';
L’objet : Array
• var monTableau = new Array([dim])
• la méthode length() permet de connaîtrele 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
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 majusculestoLowerCase () :convertit les caractères en minusculessubstring (p,l):renvoie un segment de chainecharAt(p) :renvoie un caractèresplit(s) :renvoie un matrice d'élémentsindexOf(s,[p]) :renvoie la position de la sous chainelastIndexOf(s[p]):renvoie la dernière position
Exemple : element = "A B C D".split(" ");
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"
L’objet : Math
C. L'objet Math
Cette objet est différent : il n'est pas instanciable, les fonctionssont 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
L’objet Date
• D. L'objet DateLes dates seront stockées sous la forme du total de millisecondesécoulées depuis le 1er janvier 1970 (époque).
• Méthodes :setDate : Jour du moissetMonth, setYear () : mois, annéesetTime () : l'heuresetHours, setMinutes, setSeconds : heures, minutes,
secondesgetDate, 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
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
Les objets : Browser
window
document
frames
location
history
navigator
plugins
mimetype
links
images
applets
embeds
forms
anchors
elements
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
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êtreouverte) :• Propriétés :
window & self :fenêtre ouvertetop :fenêtre active parent :en présence de frames la fenêtre
englobanteopener :fenêtre à l'origine de l'ouverturename :nom de la fenêtrelength :nombre de framedefaultStatus :statut initial de la barre d'étatstatus :valeur actuelle du statutlocation :URLdocument :contenu de la page WEB
• Méthodes :alert (), confirm (), prompt (), open (), close ()
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
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.
L’objet : Window
• Les méthodes setTimeOut (), clearTimeOut ()
• setTimeOut ()Fixe un délai en millisecondes avant l'exécution d'une instructionJavascript.
• Exemple :var ident = window.setTimeout ("alert ('Délai écoulé')",
1000);
• clearTimeout ()Stop en un TimeOut avant son execution.
• Exemple :window.clearTimeOut (ident);
L’objet : Window
Evénements :
• onLoad : appelé au chargement de la page
• onUnload : appelé au déchargement de la page
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
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é
L’objet : Location
Les méthodes :• reload () : recharge la page• replace () : remplace la page
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
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
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,…
L’objet document
Propriétés :• 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 ()
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.
L’objet link
L’objet link :
• Représente les hyperliens dans un document
• Il contient l’adresse des liens associés au document
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
L’objet link
handlers :
• onClick : appelé au choix du lien
• onMouseOver : appelé quand la souris passe sur le lien
L’objet imageImages 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.
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,
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
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
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
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
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é.
Les boutons
• Propriétés : name et value
• Méthode : click()
• Handler : onClick()
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)
Les radios
Propriétés :
• checked : Permet de selectionner un bouton radio
• length : Nombre de boutons radio dans un groupe
• name : nom du radio
Les radios
Méthode :• Click()
Handler :• OnClick()
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
Les checkbox
Propriétés :
• checked : Permet de selectionner un bouton radio
• name : nom du bouton
Les checkbox
Méthode :
• Click() : permet de cliquer la case
Handler :
• OnClick() : appelé en cas de clic sur la case
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
Les select
Propriétés :
• length : nombre de choix disponibles
• selectedIndex : index de l’option choisie
Les select
Méthodes :• blur : permet d’enlever le focus d’un élément
• focus : permet de placer le focus sur un élément
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
Les text
l’objet text :
• Représente un champs de saisie pour l’utilisateur
• Est uniligne
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
Les text
Méthodes :
• focus : prend le focus
• blur : perd le focus
• select : marque le contenu comme sélectionné
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
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
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
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
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;
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>
L’objet Navigator
L'objet Navigator fournit des informations sur la version du Navigateur utilisée
Propriétés :appCodeName : le nom de code du navigateurappName : le nom du navigateurappVersion : version du navigateurmimeTypes : 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>
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 Explorerdocument.all.tag.style.propriete_de_style
Navigatordocument.tag.propriete_de_style
Exempleif (ie) document.all.tag.style.top = 34;if (nescape) document.tag.top = 34;
Le DHTMLLes balises DIV et SPAN possèdent (sur IE uniquement) des propriétés
permettant de modifier leur contenu.
innerHTML : interprété comme du HTMLinnerText : interprété comme du TexteouterHTML : remplace la balise et est interprété comme du HTMLouterText : remplace la balise et est interprété comme du TexteExemple :
function changeText (texte) {document.all.texte.innerHTML = texte;}…<DIV id="texte">Bonjour</DIV>…<A HREF="Javascript:;" onClick="changeText('vous avez
cliqué')>Cliquez ici</A>
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.
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).
Les cookies
Les navigateurs peuvent stocker :300 cookies, 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.
Les cookies
Pour écrire un COOKIEdocument.cookie = "nom=emma; path=/;expires=Thu, 25-dec-00
00:00:01 GMT";
Pour lire un COOKIEcookie = document.cookie;
Retourne le cookie qui est associé au domaine et chemin d'accès de la page active.
Pour supprimer un COOKIEMettre sa valeur à null et mettre sa propriété expires à une date
passée.
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;
}
Les cookies - getCookiefunction 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;
}
Live ConnectLe 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.
Les outils du marché
Visual JavascriptSpécifique à NetscapeIntègre un éditeur HTMLIntègre un éditeur JavascriptIntègre un debogueur Javascript
Visual InterdevSpécifique MicrosoftJavascript coté client / VB script coté serveur (ASP)Conçu pour développer des pages ASPContient des outils d'administration de siteDes assistants de création de base données
Références – sites web
http://www.commentcamarche.net/
http://www.imaginet.fr/
http://home.netscape.com/comprod/products/navigator
http://html_help4u.tripod.com
http://javascript-lab.nexen.net/
http://wwwusers.imaginet.fr/~ortunio/javascript
http://www.ac-creteil.fr/infolyc/javascript
Références – livres
Javascript Edition S&SM Laura Lemay & Michael Moncur
JAVASCRIPT de FLANAGAN, David O'REILLY
JAVASCRIPT PROFESSIONNEL de MCFARLANE, Nigel EYROLLES
