• Aucun résultat trouvé

[PDF] Cours complet sur JavaScript

N/A
N/A
Protected

Academic year: 2021

Partager "[PDF] Cours complet sur JavaScript"

Copied!
35
0
0

Texte intégral

(1)

Outils pour le web

Clara Bertolissi

L3 – Université de Provence

Javascript

Javascript

 Est un langage de script incorporé dans le HTML  Historiquement, premier langage de script pour le Web

 Apporte des améliorations au HTML en rendant les pages plus

interactives

 Le code JS est interprété par le navigateur client. Aucune

interaction avec le serveur.

Javascript

 Le language JavaScript est parfaitement adapté pour des

traitements sur le poste du navigateur. Quelques exemples :

 Vérification de saisie dans des formulaires (Adresse, email)  Calculs simples suite à des saisies de formulaire (Tarifs,

calculatrice)

 Gestion des dates et des heures (Date du jour, Date de mise à

jour, Calendriers)

 Gestion des cookies (Sauvegarde d'information : nombre de

visites, caddie virtuel)

 Gestion de la navigation (Menus dynamique, popup)

 Animations graphiques (Dynamic HTML, MouseOver, bannières

rotatives, jeux)

(2)

Javascript

Mais c'est un langage limité :

 C'est un langage de script dépendant de HTML.

 Ce n'est pas véritablement un langage orienté objet (pas

d'héritage de classe, ni de polymorphisme ..)

 JavaScript ne peut pas s'interfacer avec une base de

données. Impossible de concevoir un forum de discussion, un script de sondage ou de vote, dont les données sont stockées, soit dans un fichier, soit en base sur le serveur.

 JavaScript n'échange pas avec d'autres machines

connectées. Impossible donc de créer une page de chat (discussion en direct).

Javascript - Java

JavaScript rassemble à Java:

– JavaScript a la notion d'Objet et de types de donnée

prédéfinis

– JavaScript a des événements et peut gérer les exceptions

MaisJavaScript ne rassemble pas à Java:

Les variables ne sont pas type lors de la définition : le type

dépend de la valeur qui est associé à la variable.

– Les Objets et les tableaux sont différents – JavaScript a des structures différentes de Java.

Emplacement du code JS

Il y a plusieurs endroits dans une page web où il est

possible d'intégrer du code JavaScript :

dans le corps de la page,

en entête de page,

dans un événement d'un objet de la page.

Ecriture et exécution du code JS

Entre les balises

<SCRIPT type=''text/javascript'' >....</SCRIPT>

dans la section d'en-tête, ou dans le corps de la page.

 Le code inclus dans la séquence <SCRIPT> est évalué au début

du chargement de la page

 S'il est inclus dans la section <HEAD>, e.g. déclarations de

fonctions, il n'est pas exécuté tout de suite

 S'il fait partie du corps du document, il est immédiatement

(3)

Ecriture et exécution du code JS

Associé à une balise HTML qui gère un

événement

<balise ... onEvenement="code JS ou fonction JS" >

balise est le nom de certaines balises html, souvent

des composants de formulaire.

onEvenement est un nouvel attribut de la balise (e.g.

onSubmit, onClick, onChange, …)

Bien entendu il faut connaître les associations entre

évènements et balises "sensibles" à ces

évènements.

Ecriture et exécution du code JS

Associé à un lien

<A HREF="javascript:ma_fonction()">Cliquez ici</A>

L'opérateur void :

Pour empêcher que le code ou la fonction appelée ne

remplace le document courant, on applique

l'opérateur void, qui neutralise toute valeur ou tout

effet de retour

<A HREF=

"

javascript:void(ma_fonction(..))">...</A>

Ecriture du code JS

 La structure classique d'une page HTML contenant du JavaScript :

<HTML> <HEAD>

<SCRIPT language="JavaScript">

<!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JS // déclaration de functions JS

//--> // Fin de la partie cachée

</SCRIPT> </HEAD> <BODY>

<SCRIPT type="text/JavaScript">

<!-- // Cache ce qui suit aux navigateurs qui ne supportent pas JS // code Javascript

//--> // Fin de la partie cachée </SCRIPT>

</BODY> </HTML>

Comment écrire, afficher

l'information

<html> <head> <title>Programme 1</title> </head> <body> <script language="JavaScript">

<!--document.write('Vous avez le bonjour de JavaScript <br>'); //-->

</script> </body> </html>

(4)

Comment écrire, afficher

l'information

Méthode promt()

ouvre une boîte de dialogue avec une zone saisie et

2 boutons OK et Annuler, et rend l’ information lue

Méthode alert ()

permet d’ écrire un message dans une fenêtre

Exemple

<html> <head><title>Programme In1</title></head> <body> <script language="JavaScript">

<!--annee=prompt('En quelle année sommes-nous ? ', 2000); alert('Vous avez répondu : ' + annee);

//--> </script> </body> </html>

Déclaration de fonctions en JS

Il est recommandé de les inclure entre les balises

<head> et </head>

<HEAD>

<SCRIPT LANGUAGE=JavaScript >

Function nomProcédure(param1, param2, ...) { séquence d'instructions;

}

Function nomFonction(param1, param2, ...) { séquence d'instructions; return nom_variable; } </SCRIPT> </HEAD>

Fonctions en JS

Visibilité des paramètres :

 De façon générale, les paramètres formels d'une fonction ne

sont connus qu'à l'intérieur de la fonction

 De même, les variables locales, variables qui sont

explicitement déclarées à l'intérieur de la fonction

Conséquences :

 Si la valeur d'un paramètre ou d'une variable locale est

modifiée dans la fonction, cette modification ne sera pas connue à l'extérieur de la fonction. On dit que cette variable n'est pas visible au niveau du programme général

(5)

Fonctions en JS

L'objet Function :

 A chaque fonction rencontrée, JavaScript construit un

tableau de ses arguments

 Si la fonction s'appelle calculer, ce tableau a :  pour éléments calculer.arguments[i]  pour taille calculer.arguments.length  Exemple :

function calculerPrix(PrixUnitaire, NbArticles) { if (calculerPrix.arguments.length !=2) alert("impossible de calculer le prix !") else

return PrixUnitaire* calculerPrix.arguments[1]; }

Exemple

<head> <script language="JavaScript"> var volume; function VolCylindre(r,h) { pi=3.14159; volume = pi*r*r*h; } </script> </head> <body> VolCylindre(1,2); document.write(volume); </body>

Les données constantes

Constantes :

les constantes numériques : entiers, "réels" écrits

en notation décimale ou flottante

les 2 constantes booléennes : true ou false

les chaînes de caractères, entourées

indifféremment d'apostrophes ' ' (à privilégier) ou

de guillemets " "

la constante spéciale null signifie "absence de

valeur". Elle est attribuée à toute variable utilisée

sans être définie (par exemple prompt() retourne

null si on sélectionne le bouton Annuler)

Notation

 Caractères spéciaux :

\b (retour arrière), \f (saut de page) , \n (nouvelle ligne) , \r (Entrée),

& (tabulation), \' pour une apostrophe

On peut insérer du code HTML sous forme de chaînes, qui sera bien interprété comme de véritables balise

(6)

Déclaration et affectation de

variables

Types de variables :

Les nombres : number

les chaines : string

les booléens : boolean

les objets : object

les fonctions : function

La fonction typeof() appliquée à une variable

retourne son type

Déclaration et affectation de

variables

Notation : var nom = valeur

Le mot var est facultatif, mais recommandé.

Les variables doivent commencer par une lettre ou

par _

JS distingue minuscules et majuscules.

Le symbole = est réservé à l'affectation

JS attribue automatiquement à la variable le type

de la valeur affectée

Sinon JS lui attribue une valeur et un type

indéterminés "undefined"

Opérateurs d’ affectation

Visibilité des variables

Bien que de même nom, les variables "x" sont indépendantes <script language="JavaScript">

var x = new String('abc'); function commencer() { var x = new Number(123); x++; alert(x);

};

function suivre() {

var x = new Boolean(true); alert(x); };

x='ABC';

commencer(); suivre(); </script>

(7)

Visibilité des variables

Les variables définies directement entre <script...></script> ont une portée globale sur toutes les parties de script

<HEAD> <script ...>

var toto = “ Bonjour” ; </script> </HEAD> </BODY> <script ...> document.write(toto); </script> </BODY>

Operateurs arithmétiques

(8)

Comment afficher le contenu

des variables

<html> <head><title>Programme 2</title></head> <body> <script language="JavaScript"> <!--var jour = 21; var mois = 'juin';

document.write(jour + ' ' + mois + ' : solstice'); //--> </script> </body> </html>

Tableaux en JS

Exemple:

color = ["red", "yellow", "green", "blue"];

L' indice commence à zero: color[0] vaut "red"

On peut introduire des éléménts vides :

color = ["red", , , "green", "blue"]; color a 5 éléments

Mais la virgule à la fin est ignorée

color = ["red", , , "green", "blue” ,]; a toujours 5 éléments

Créer un tableaux

Déclaration

var colors = ["red", "green", "blue"];

On peut utiliser

new Array()

pour créer un tableau vide

– var colors = new Array();

colors[0] = "red"; colors[2] = "blue"; colors[1]="green";

On peut utiliser

new Array(n)

"n"

est la taille du

tableau

– var colors = new Array(3);

On peut utiliser

new Array(e1, ...,eN)

avec en

arguments les éléments du tableau

– var colors = new Array("red","green", "blue");

Tableaux en JS

La longueur d'un tableau myArray est donné par

myArray.length

La longueur peut être changé en ajoutant des

éléments:

– var myArray = new Array(5);

– myArray[10] = 3;

Comme en C et Java, on peut avoir de tableaux de

tableaux:

(9)

Fonctions pour les tableaux

myArray.sort() trie suivant l'ordre alphabetique croissant

myArray.sort(function(a, b) { return a - b; }) trie selon l'ordre donné par la fonction

myArray.reverse() reverse les éléments

myArray.push(… ) ajoute des éléments à la fin du tableau et met à jour sa longueur

myArray.pop() enleve et renvoie les dernier élément du tableau et met à jour sa longueur

myArray.toString() renvoie une chaîne de characteres contenant les éléments du tableau separés par des virgules

Généralités sur les objets en JS

 JS n'est pas un vrai langage orienté-objet. Des concepts tels

que l'héritage ne sont pas implémentés.

 Pour définir une classe d'objets, il faut préciser :

 les propriétés (ou attributs) qui décrivent ses

caractéristiques

 les méthodes (procédures ou fonctions) qui décrivent ses

comportements et ses actions

Propriétés et méthodes constitutives d'une classe ne sont alors applicables qu'à un objet de cette classe

 objet.propriété  objet.méthode()

Les objets

On utilise la syntaxe

{ name1 : value1 , ... , nameN : valueN }

Exemple

• car = {myCar: "Saturn", 7: "Mazda", getCar: CarTypes("Honda")} - Les champs sont myCar, getCar, et 7 .

- "Saturn" and "Mazda" sont chaînes de charactèrs - CarTypesest un appel de fonction

Exemple d'utilisation :

• document.write("J'ai une " + car.myCar);

Création d 'un objet

On peut utiliser la syntaxe précédente : 

– var cours = { number: "CIT597", teacher="Dr. Dave" }

On peut utiliser 

new

 pour créer un objet vide et le remplir 

ensuite : 

• var cours = new Object(); cours.number = "CIT597"; cours.teacher = "Dr. Dave";

On peut écrire et utiliser un constructeur :

function Cours(n, t) {   // placé dans le <head> du document      this.number = n;      this.teacher = t; } var cours = new Cours("CIT597", "Dr. Dave");

(10)

Tableaux et objets

Les tableaux sont des objets

car = { myCar: "Saturn", 7: "Mazda" }

car[7] est la même chose que car.7

car.myCar c'est le même que car["myCar"]

Si on connaît le nom de la proprieté, on peut utiliser la

notation car.myCar

Mais si le nom est stocké dans une variable ou doit

être calculé, on doit utiliser la notation des tableaux :

car["my" + "Car"]

Conditionnelle

L'instruction conditionnelle if ... [then] .. else :

if (condition) { séquence 1 } else { séquence 2 }

Remarques :

 La condition doit être toujours entourée de ( )  Le mot alors (then) est toujours sous-entendue

 La séquence else (optionnelle) est exécutée si la condition

est fausse

 les { } obligatoires qu'en cas d'instructions multiples

Exemple if..then..else

<HTML> <HEAD>

<TITLE>Orthographe d'un nombre</TITLE> <SCRIPT LANGUAGE="JavaScript"> function controler(mot)

{ if (mot=="trois cent vingt et un")

{alert("Bravo\nVous avez bien orthographié")} else

{alert("Vous avez écrit "+mot+"\n Il fallait écrire trois cent vingt")} } </SCRIPT> </HEAD> <BODY> ... </BODY> </HTML>

Switch

Switch :

switch (Expression){ case Premier_label: Premières_instructions; break; ... case Nième_label: //Nièmes_instructions; break; default: //Instruction_par_défaut break;  }

(11)

Exemple Switch

<script type="text/javascript">

switch (jour) {

case "vendredi": document.write("Enfin vendredi");

break;

case "samedi": document.write("Super Samedi");

break;

case "dimanche": document.write("Dimanche répos");

break;

default: document.write(« Vivement le weekend!");

}

</script>

Boucle Pour

 L'itération contrôlée FOR

for (valeur initiale; condition; poursuite) { séquence d'instructions

}

 La condition qui suit FOR est composée de 3 éléments :

 une valeur ou expression initiale portant sur une variable entière

appelée compteur

 une condition : tant qu'elle est vraie, la répétition est poursuivie

 une expression de poursuite qui consiste en la mise à jour du

compteur

 Variante :

for (variable in objet ) { séquence instructions }

Exemple boucle For

<html>

<body>

<script type="text/javascript">

var i=0;

for (i=0;i<=10;i++) {

document.write("The number is " + i);

document.write("<br />");

}

</script>

</body>

</html>

Exemple tableaux à 2 dimensions

<html>

<body>

<script type="text/javascript"> tab=new Array(3);

tab[0]= new Array(1,2,3); tab[1]= new Array(4,5,6); tab[2]= new Array(7,8,9); for (i=0;i<3;i++) { for (j=0;j<3;j++) document.write(tab[i][j]," " ); document.write("<br> " ); } </script> </body> </html>

(12)

Exemple boucle for...in

On peut parcourir les propriétés d'un objet :

– for (var prop in Cours) {

document.write(prop + ": " + Cours[prop]); }

– Résultat possible: teacher: Dr. Dave number: CIT597

– Les propriétés ne sont pas forcement affichées dans l'ordre de définition.

Les tableaux sont aussi des objets. On peut appliquer la structure “ for...in“ à un tableau : on parcourira alors les éléments 0, 1, 2, …

– A noter que Cours["teacher"] est équivalent à Cours.teacher (la première est necéssaire si le nom de la propriété est dans une variable)

Boucle While

L'Itération WHILE (TANT QUE) :

WHILE (condition) {

séquence d'instructions

}

La boucle while exécute le même bloc de code

tant que la condition spécifiée est vraie.

Exemple boucle While

<html>

<body>

<script type="text/javascript">

var i=0;

while (i<=10) {

document.write("The number is " + i);

document.write("<br />");

i=i+1;

}

</script>

</body>

</html>

Programmation événementielle en

JS

(13)

Evénements JS

– Les événement sont l’ intérêt du JS en matière de

programmation Web

– Ils donnent une interactivité à la page que vous

consultez, ce qui n’ existe pas avec le HTML, si on

excepte bien entendu le lien hypertexte

– Le JS permet de réagir à certaines actions de

l’ utilisateur

– On nomme évènement le mot

Event

, et gestionnaire

d’ événement le mot-clé

onEvent

Événements JS

Définition générale : <Balise onEvent = "code JS " >

 onEvent est le nom du gestionnaire d'événements associé à

l'événement Event, comme onClick

 Balise est un nom de balise qui sait gérer un tel événement  "code JS" est généralement une fonction déclarée auparavant

dans une section

<HEAD> <SCRIPT>...</SCRIPT> </HEAD>

 Mais ce peut être aussi une suite d'instructions JS, séparées

par des virgules.

Remarques

 On peut utiliser plusieurs gestionnaires d'événements sur un

même composant.

<A HREF="URL" onMouseOver="fct1()“ onMouseOut="fct2()"> voir </A>

Evenement : load

– Gestionnaire: onLoad

– Exemple :

<body onLoad="alert(‘ la page est en train d’ être chargée ’ ) ;"> – Balises supportées :

• <body> • <frameset>

– Effets : Au chargement, réaliser tel événement

Evénements liés à la souris

– Gestionnaire : 

onMouseOut

– Exemples :

<a href="http://www.google.fr" onMouseOut=”alert(‘Vous ne voulez pas y aller ?’) ;">  http://www.google.fr   </a>

– Balises supportées :

• Presque toutes

– Effets :

• Prévient quand on s’éloigne de la cible

(14)

Evénements liés à la souris

– Gestionnaire d’ événement : onClick

– Exemple :

<input type=” button” onClick=” alert(‘ vous avez cliqué sur le bouton’ ) ;"> – Balises supportées : • <input type="button"> • <input type="checkbox"> • <input type="radio"> • <input type="reset"> • <input type="submit"> • <a href..>

Evénements liés à la souris

Gestionnaire d’ événement :

onMouseOver

– Exemple :

<

A HREF=URL onMouseOver

=” alert(‘ Cliquer ici pour

ouvrir le lien’ ) ;"> Lien </A>

– Balises supportées :

<A HREF..>

<AREA HREF..>

Evénement Focus

– Gestionnaire : onFocus – Exemples :

<input type="text" value="votre nom" name=” nom” onFocus="alert(‘ Ecrivez votre nom ici’ ) ;"> – Balises supportées : • <input type="text"> • <select> • <textarea> • <input type="password"> – Effets :

• Écrit le message quand on clique sur la zone d’ entrée du texte

Evénement blur

– Gestionnaire : onBlur

– Exemples :

<input type="text" value="votre nom" name="nom" onBlur="alert(‘ Vous n\’ avez rien oublié ?’ ) ;"> – Balises supportées : • <input type="text"> • <select> • <textarea> • <input type="password"> – Effets :

(15)

Evénement Select

– Gestionnaire d’ événement :

onSelect

– Exemples :

<input type="text" value="votre nom" name=” nom”

onSelect=” alert(‘ Vous avez sélectionné un champ’ )

;">

– Balises supportées :

• <input type="text">

• <textarea>

– Effets :

• Avertit de la sélection d’ un champ dans un formulaire

Evénement change

– Gestionnaire : onChange

– Exemples :

<input type="text" value="votre nom" name="nom" onChange="alert(‘ Vous avez changé votre nom ’ ) ;"> – Balises supportées : • <input type="text"> • <select> • <textarea> • <input type="password"> – Effets :

• Avertit du changement par rapport à ce qu’ il y avait d’ écrit dans la zone d’ écriture

Evénement Submit

– Gestionnaire d’ événement : onSubmit

– Exemple :

<input type="submit" value="Envoyer"

name="envoi" onSubmit="alert(‘ C’ est parti !’ ) ;"> – Balises supportées :

• <input type="submit"> – Effets :

• Avertit de la soumission du formulaire

Evénement Reset

– Gestionnaire : onReset

– Exemple :

<input type="reset" value="Effacer" name=” effacer” onSubmit=” alert(‘ On efface tout !’ ) ;">

– Balises supportées : • <input type="reset"> – Effets :

(16)

Les objets du navigateur

Notion d’ objet en JS

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 des propriétés et des actions (méthodes)

sont associées

Comment JavaScript définit

les objets

Javascript divise la page du navigateur en éléments

(objets), afin de permettre d'accéder à n'importe

lequel d'entre-eux.

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, etc

.

Les classes de base du

navigateur

Objets fondamentaux

 navigator : c'est le logiciel client dont le nom est noté

dans navigator.appName

 window : l'objet de plus haut niveau créé par le

navigateur, c'est sa fenêtre

 location : c'est l'objet URL de la fenêtre courante  history : ce sont les URL précédemment visitées  document : il s'agit du document courant, dont les

propriétés sont le titre, les couleurs (fond, texte, lien ...), les formulaires, les images etc..

(17)

Hiérarchie des objets

Les classes de base du

navigateur

Les objets de ces classes sont automatiquement

instanciés

Les applications JS peuvent alors dialoguer avec ces

objets visuels et les manipuler

Le programmeur peut ainsi agir sur l'état du

navigateur, de ses fenêtres et des documents et des

composants qui y sont inclus.

un objet document est une propriété de window, qui

est elle-même un objet doté de propriétés et de

méthodes

...

Accéder aux propriétés d'un objet

Une propriété est une donnée qui décrit un objet

Pour désigner complètement et correctement un

objet, il faut faire précéder son nom de la suite des

noms des objets qui le contiennent (en respectant la

hiérarchie des objets)

cette liste doit être séparée par l'opérateur . (point)

Comme la couleur de fond est la propriété bgColor de

l'objet document, pour mettre le fond en bleu on

écrira :

document.bgColor = 'blue' ;

Accéder aux propriétés d'un objet

Pour une page HTML, nous avons par

exemple les propriétés suivantes :

Propriétés de l'objet WINDOW

 Protocole utilisé : window.location.protocol  URL : window.location.href

 Message de la barre d'état : window.defaultStatus =

Propriétés de l'objet DOCUMENT

 Titre du document : document.title = Cours JavaScript  Couleur du texte : document.fgColor = #000000  Couleur du fond : document.bgColor = #f1f1f1

(18)

Objet document

L'objet document est un élément majeur, il va vous

de récupérer des informations d'un formulaire, écrire

du texte...

Propriétés :

document.fgColor,

permet de récupérer et de

changer la couleur du texte de votre page HTML

document.fgColor = "#993333";

document.bgColor

, permet de récupérer et de

changer la couleur de fond de votre page HTML

document.lastModified

, permet de savoir quand la

page html a été modifiée (Internet explorer renvoie :

11/07/2007 19:41:00)

Objet document

document.linkColor

, permet de changer la couleur des

liens de votre page HTML

document.location

, permet de récupérer et changer

l'url de votre page HTML, ce qui revient à charger

une autre page HTML

document.location = "URL/monDoc.HTML";

document.write

(), permet d'écrire dans votre page

HTML

document.images[ ]

, permet de récupérer et changer

les images de votre page HTML

document.forms[ ]

, permet de récupérer et changer les

informations de votre formulaire

Objet document: propriétés

Couleur liens visités

vlinkColor

URL document

URL

Contenu <TITLE>

title

URL appelante

referrer

Couleur liens

linkColor

Date dernière modification

lastModified

Couleur premier plan

fgColor

Nom de domaine du serveur

domain

Cookie 

cookie

Couleur de fond

bgColor

Couleur lien actif

alinkColor

Description

Propriété

Exemples

Donne la date de la dernière modification du

document

<html>

<head><title>Test</title></head> <body>

<script type="text/javascript">

document.write("dernière mise à jour: " + document.lastModified); </script>

</body> </html>

(19)

Exemples

 Permet de récupérer le contenu de la balise <title> et l’ adresse de la

page <head> <title>Test</title> </head> <body> <h1> <script type="text/javascript"> <!--document.write(document.title);

document.write("Ce fichier: " + document.URL); //-->

</script> </h1>

</body> </html>

Objet window

est l'objet par excellence dans Javascript, car il est

parent de chaque objet qui compose la page web

il contient donc :

• l'objet document : la page en elle-même

• l'objet location : le lieu de stockage de la page

• l'objet history : les pages visitées précédemment

• l'objet frames : les cadres (division de la fenêtre en

sousfenêtres)

Objet window : propriétés

contenu barre d'état status fenêtre courante self/top si cadre parent nom fenêtre ouvrante opener nom name nb de cadres length message par défaut(barre état defaultStatus fenêtre fermée? closed Description Propriété

Objet window : méthodes

Fenêtre courante

focus()

URL page accueil

home()

Déplacement relatif

moveBy(hor,ver)

Déplacement absolu

moveTo(x,y)

Ouvre fenêtre

open(args)

URL suivant historique

forward()

Fenêtre plus courante

blur()

Ferme fenêtre

close()

Affiche boîte confirmation

confirm(chaine)

URL précédent historique

back()

Affiche boite alerte

alert(chaine)

Description

Méthode

(20)

Objet window : méthodes

Supprime délais

clearInterval(IDinterv)

Défilement visualisation

scrollTo(x,y)

Défilement visualisation

scrollBy(hor,ver)

Redimensionne

resizeTo(Wid,Hei)

Redimensionne

resizeBy(hor,ver)

Imprime

print()

Évalue expr après msec

setTimeOut(expr,msec)

Affiche boîte entrée

prompt(chaine,[val/defaut])

Évalue expr après msec

setInterval(expr,msec)

Description

Méthode

Efface fonction chrono

clearTimeOut(Idchrono)

La classe Window

Fen1 = open("URL","nom_fenetre", "options");

 "URL" est l'adresse du document à charger dans la

nouvelle fenêtre

 "nom_fenetre" est le nom de la fenêtre, à donner à

l'attribut TARGET des balises <FORM> ou <A>

 "options" est une liste d'éléments optionnels qui

précisent l'aspect de la fenêtre

 On utilise ensuite Fen1 pour faire référence à un objet ou

une propriété de la nouvelle fenêtre.

 Par exemple, Fen1.document.write("...");

La classe Window

 Paramètres de la partie OPTIONS :

 barre d'outils : toolbar[=yes|no] | [=1|0]

 url visible : location[=yes|no] | [=1|0]

 répertoire ? directories[=yes|no] | [=1|0]

 barre d'état : status[=yes|no] | [=1|0]

 barre de menu : menubar[=yes|no] | [=1|0]

 barre de défilement : scrollbars[=yes|no] | [=1|0]

 Redimensionnement : resizable[=yes|no] | [=1|0]

 visibilité permanente ? alwaysRaised[=yes|no] | [=1|0]

 fermée avec la fen. parente : dependant[=yes|no] | [=1|0]

 height= dimension en pixels

 width= dimension en pixels

 positionnement X : screenX = nb pixels

 positionnement Y : screenY = nb pixels

Exemple open()

<html> <head> <title>Test</title> <script type="text/javascript"> function nouvellefenetre() { mafenetre = window.open("window0.html", "secondefenetre", "width=300,height=200,scrollbars"); } </script> </head> <body>

<a href="javascript:nouvellefenetre()"> nouvelle fenêtre </a> </body></html>

(21)

Minuteries

setInterval() : exécution de code JS à intervalles

réguliers

clearInterval() : arrêt de la minuterie

setTimeout() : exécution de code JS au bout d'un

délai

clearTimeout() : annule setTimeout

Exemple

Fermeture automatique d’ une fenêtre, après

20sec.

<html> <head>

<title>Test</title>

<script type="text/javascript">

var InfoWin = window.open("exercice1.html","secondefenetre"); InfoWin.setTimeout("top.close()",20000); </script> </head> <body> </body> </html>

Confirm()

– Cette méthode ouvre une boîte de dialogue avec 2 boutons : OK et Annuler. Elle permet :

• d'envoyer une information • de recevoir un booléen <script language="JavaScript">

if (confirm('Je vais dire sur quel bouton vous avez appuyé : '))

{alert(' Sur OK \n Continuez avec :') }

else {alert(' Sur Annuler \n Sortez avec Ok !') }; </script>

Objet navigateur

Cette classe ne contient qu'un seul objet, appelé

navigator, qui est créé au démarrage du logiciel

navigator.userAgent = Mozilla/4.7 [fr] (Win95; I)

navigator.appCodeName = Mozilla

navigator.appVersion = 4.7 [fr] (Win95; I)

navigator.appName = Netscape

navigator.language = fr

navigator.platform = Win32

navigator.securityPolicy = France policy

navigator.plugins = [object PluginArray]

(22)

History et Location

 history : liste des documents chargés dans la fenêtre (simule

l'action des boutons suivant et précédent)

 history.back() : document précédent

 history.forward() : le suivant

 history.go(n) : recharge le document situé à n étapes du

présent document

 location

 location.href : chaîne contenant l'url

 location.hash : partie de l'url après # (lien interne)

 location.host : nom serveur et port

 location.protocol : http, ftp, javascript, ..

 location.reload() : recharge le document courant =

history.go(0)

 location.replace(url) : remplace le document courant

Objet location: propriétés, méthodes

Description

Méthode

Info pour cgi­bin GET

search

Val  location.href

assign(chaine)

Nom ancrage

hash

Chemin du document

path

Port

port

Nom hôte

hostname

Nom hôte + N° port

host

Protocole

protocol

URL entière

href

Description

Propriété

Exemples

Liens dans une page HTML :

<a href="javascript:history.go(-5)">5 pages en

arrière</a>

<a href="javascript:history.back()">page

précédente</a>

<a href="javascript:history.forward()">page

suivante</a>

<a href="javascript:history.go(5)">5 pages en

avant</a>

(23)

La hiérarchie de la classe

document

 Un document HTML peut contenir diverses balises d'insertion d'images,

de formulaires, d'hyperliens, etc .. qui sont autant d'objet du point de vue du navigateur

 JS les classe dans des tableaux d'objets au fur et a mesure, dans

l'ordre de leur apparition. Chaque objet peut posséder des propriétés et des méthodes

 Par exemple, soit le 1er formulaire déclaré par

<FORM NAME="formu">

 On peut le nommer aussi bien par document.formu que par

document.forms[0]

 images[2] est la 3ème image insérée, avec une balise

<IMG SRC="....gif">

La hiérarchie de la classe

document

Les différents tableaux accessibles :

anchors[] tableau des liens internes <A NAME= ...>

forms[] tableau des formulaires <FORM> 

elements[] tableau des composants du formulaire 

<INPUT ..>, <SELECT ..>, .. 

images[] tableau des images <IMG SRC=...>

links[] tableau des liens hypertextes <A HREF= ...>

... 

Objet formulaire

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

On peut acceder à un formulaire par son nom, ou

par son idex dans le tableau forms[] de l’ objet

document.

Exemples

• document.nom-form.propriété

• document.forms[0].méthode

Propriétés

Action : Définit l'URL où le formulaire sera envoyé

Elements : Tableau représentant les éléments du formulaireLength : Nombre d'éléments à l'intérieur du formulaireMethod : Définit le type d'envoi du formulaire (get ou post)Name : Définit le nom du formulaire

Pour les pages en cadres :

Target : Définit la page (fenêtre ou frame) de réponseParent : Indique une fenêtre d'un cadre (frame)

(24)

Exemple : action

<html>

<head><title>Test</title> <script type="text/javascript">

function confirmation() {

window.confirm("Ce formulaire est envoyé à" + document.formulaire_test.action); }

</script></head> <body>

<form name="formulaire_test" action="mailto:toimeme@cheztoi.com"

onSubmit="confirmation()">

<input type="text" size="40" name="saisie"> <input type="submit" value="Envoyer"> </form>

</body></html>

Exemples

Appel à une fonction de lecture en cliquant un bouton du formulaire

<html>

<head> <title>Programme 2</title></head> <script language="JavaScript">

function lireAnnee() {

annee=prompt('En quelle année sommes-nous ? ', 2000); alert('Vous avez répondu : ' + annee) }

</script> <body> <form>

<input type="button" value="En quelle annee ? " onClick="lireAnnee()"> </form>

</body></html>

Elements de formulaire

– Propriétés : • checked (coché)

• defaultChecked (coché par défaut) • defaultValue (valeur entrée par défaut) • form (nom du formulaire)

• name (nom de l'élément) • type (type de l'élément)

• value (valeur/contenu de l'élément)

Elements du formulaire

– Méthodes :

• blur() (quitter l'élément) • click() (cliquer sur l'élément) • focus() (positionner sur l'élément) • handleEvent() (traiter l'événement) • select() (sélectionner du texte)

(25)

Exemple

 Il s’ agit d’ accéder à la case à cocher pour modifier contenu de

la zone du texte en inscrivant : case cochée ou case non cochée

 La modification se fera par la fonction ModifChamp();

<form name="form1">

<input type="checkbox" name="checkbox" 

onClick="ModifChamp();"> <br>

<input type='TEXT' name=‘ test' value='Essai du javascript' size='24'> </form>

Exemple (suite)

<head> <script language="Javascript"> function ModifChamp() { if (document.forms["form1"].checkbox.checked) { document.forms["form1"].test.value='Bouton coché' } else {

document.forms["form1"].test.value='bouton non coché' } } </script>

</head>

Exemple

Lire un nombre et écrire son double

<html>

<head><title>Programme 3</title></head> <body>

<form name="lire"> Entrez un nombre :

<input type="text" name="nbre" size="3"> <input type="button" name="double" value="go"

onClick="JavaScript:document.lire.aff.value=2*Number(document.lire.nbre.valu e);">

voici son double : <input type="text" name="aff "size="8"> </form>

</body></html>

Exemple : boutons radio

<HTML> <HEAD>

<SCRIPT language="javascript">

function choixprop(form3) {

if (form3.choix[0].checked) { alert("Vous avez choisi la proposition " +  form3.choix[0].value) }; if (form3.choix[1].checked) { alert("Vous avez choisi la proposition " +  form3.choix[1].value) }; if (form3.choix[2].checked) { alert("Vous avez choisi la proposition " +  form3.choix[2].value) }; } </SCRIPT> </HEAD>

(26)

Les boutons radio

<BODY> Entrez votre choix : <FORM NAME="form3"> <INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR> <INPUT TYPE="radio" NAME="choix" VALUE="2" CHECKED >Choix  numéro 2<BR> <INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR> <INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?"  onClick="choixprop(form3)"> </FORM> </BODY> </HTML> 

Exemple : Radio

Écrire un formulaire qui permet de réaliser un choix et de l’ afficher : <html>

<head>

<script language="JavaScript"> var vote='';

function enregistrer(x){vote=x}

function depouiller() {document.election.resultat.value=vote} </script> </head>

Exemple (suite)

<body>

<form name="election"> Vous êtes pour l'informatique ?

<input type="radio" name="vote" onClick="enregistrer('oui')">oui <input type="radio" name="vote" onClick="enregistrer('non')">non <input type="radio" name="vote" onClick="enregistrer('abstention')">

abstention

<input type="button" name="reponse" value="Résultat" onClick="depouiller()">

<input type="text" name="resultat" value=""> </form>

</body>

Exemple

Contrôle des informations : à l’ enregistrement du formulaire de saisie on redemande l’ entrée d’ une information si elle est vide <body>

<form name="fiche">

Nom : <input type="text" name="nom" value="" size="24"> Prénom : <input type="text" name="prenom" value="" size="24"> Age : <input type="text" name="age" value="" size="24"> <input type="button" value="Enregister"  onClick="verifier()"> <input type="reset" value="Annuler">

</form> </body>

(27)

Exemple (suite)

<head><title> Si... Alors... Sinon... </title></head> <script language="JavaScript"> function verifier() { if (document.fiche.nom.value=="") { alert('Saisissez le nom ! ');} else { if (document.fiche.prenom.value=="") { alert('Saisissez le prénom ! '); } else { if (document.fiche.age.value=="") { alert('Saisissez l\'âge ! '); };}; }} </script> </head>

Exemple : select

Choisir parmi une liste et afficher le choix <body>

<form name="musique"> <select name="choix"

onChange="Preferer(document.musique.choix.selectedIndex)">

<option value = "classique">classique </option> <option value = "jazz">jazz </option>

<option value = "rock">rock </option> <option value = "pop ">pop </option> </select>

</form>

Exemple (suite)

<html> <head>

<title> choix </title>

<script language="JavaScript">

function Preferer(x){

switch(x) {

case 1 : alert('Votre choix : '+'classique');break; case 2 : alert('Votre choix : '+'jazz'); break; case 3 : alert('Votre choix : '+'rock'); break; case 4 : alert('Votre choix : '+'pop'); break; }; }; </script>

</head>

Exemple

Rédirection sur des pages différentes suite à la réponse au formulaire <html> <head> <script language="JavaScript"> function Envoyer(x) { switch(x) { case 1 : document.location.href='page1.htm';break; case 2 : document.location.href='page2.htm';break; case 3 : document.location.href='page3.htm';break; case 4 : document.location.href='page4.htm';break; }; </script> </head>

(28)

Exemple (suite)

<body>

<form name="lecteur"> <select name="choix"

onChange="Envoyer(document.lecteur.choix.selectedIndex)"> <option>page1</option> <option>page2</option> <option>page3</option> <option>page4</option> </select> </form> </body></html>

Les classes predéfinies de

Javascript

Classe Date

var aujourdhui= new Date();

var maDate = new Date ("November 24, 1981"); var jour = maDate.getDate () // jour vaut 24. document.write("Nous étions le ", jour, "/",

maDate.getMonth()+1, "/", maDate.getYear()+1900 ,<br>); document.write("Nous sommes le ", aujourdhui.getDate(), "/", aujourdhui.getMonth()+1, "/", aujourdhui.getYear()+1900 );

Date: méthodes (1)

Minutes; 0  59 getMinutes() Année getFullyear() Nb années depuis 1900 getYear() Nb de secondes depuis le 1er Janvier 1970 getTime() Mois; 0  11 (0=janvier) getMonth() Secondes; 0  59 getSeconds() Heures; 0  23 getHours() Jour de la semaine; 0  6 (0=Dimanche) getDay() Valeur jour du mois; 1 31 getDate() Description Méthode

(29)

Date: méthodes (2)

 Date sous forme de chaine toLocalString() Année=arg setYear(arg) Nb de secondes depuis le 1er Janvier 1970=arg setTime(arg) Mois=arg setMonth(arg) Secondes=arg setSeconds(arg) Minutes=arg setMinutes(arg) Heures=arg setHours(arg) Jour du mois=arg setDate(arg) Description Méthode

Exemple Date + Switch

<script type="text/javascript">

//on affiche une phrase différente selon le jour de la semaine //on a Dimanche=0, Lundi=1, Mardi=2, etc.

var d=new Date(); // création de l’ objet date

theDay=d.getDay(); // on récupère le jour de la semaine switch (theDay) {

case 5: document.write(" Enfin vendredi"); break;

case 6: document.write("Super Samedi"); break;

case 0: document.write("Dimanche répos"); break;

default: document.write(« Vivement le weekend!"); }

</script>

Exemple Date + conditionnelle

var theTime = new Date(); theTime = theTime.getHours(); if( theTime < 6 || theTime >= 21 ) { document.write( 'night' ); } else {

if( theTime >= 6 && theTime < 12 ) { document.write( 'morning' ); } else {

if( theTime >= 12 && theTime < 18 ) { document.write( 'afternoon' ); } else { document.write( 'evening' ); } } }

Classe Math

(30)

Math: propriétés

Racine carrée de 1/2

SQRT_2

Racine carrée de 2

SQRT2

Constante pi

PI

Log de e à la base 10

LOG10E

Log de e à la base 2

LOG

Log naturel de 10

LN10

Log naturel de 2

LN2

Constante e

E

Description

Propriété

Math: méthodes

Entier immédiatement inférieur floor(n) Entier immédiatement supérieur ceil(n) Racine carrée sqrt(n) Entier le plus proche round(n) Nb aléatoire entre 0 et 1 random() n1 à la puissance n2 pow(n1,n2) Minimum des 2 valeurs min(n1,n2) Maximum des 2 valeurs max(n1,n2) Log de x log(x) E puissance x exp(x) Valeur absolue abs(n) Description Méthode

Classe Math

Math

 Conversion chaine <--> nombre (entier ou flottant)

 Fonctions parseInt(), parseFloat() et eval()

 isNaN(arg) détermine s'il s'agit d'un nombre

 A l'issue de ce script, entier contient 3 et reel contient 3.14

var chaine="3.14"; var entier=parseInt(chaine); var reel=parseFloat(chaine);

Classe Math

 A l'issue du script, entier et reel contiennent NaN, car "azerty" ne peut  pas se convertir en nombre.  La valeur de rate est à vrai car la  conversion a échoué. var chaine="azerty";    var entier=parseInt(chaine);    var reel=parseFloat(chaine);    var rate=isNaN(entier);  Exemple d'utilisation pour controler la saisie d'un entier :       <SCRIPT LANGUAGE="JavaScript">       function testnum(chnum) {          num=parseInt(chnum);          if ( isNaN(num) )          alert(chnum+ 'n\'est pas pas un entier !');         }       </SCRIPT>

(31)

Exemple Math

<script language="JavaScript"> temp=new Array(30);

function relever() {

for (i=1;i<=30;i++) // i commence à 1

{ temp[i-1]=17+Math.floor(5*Math.random()); }; // i-1=0, donne le premier indice

}; function moyenner() { som=0; for (i=1;i<=30;i++) { som+=temp[i-1]; }; return Math.round(10*som/30)/10; }; </script>

STRING: Méthodes

Conversion en majuscules

toUpperCase()

Conversion en minuscules

toLowerCase()

Sous­chaine 

substring(ind1,ind2)

Lg cars depuis dep

substr(dep[,lg])

Tableau de chaines

split(sépar)

Id en arrière

lastIndexOf(ch,ind)

Indice ch à partir de ind

indexOf(ch,ind)

Concaténation avec ch

concat(ch)

Caractère à l'ind donné

charAt(ind)

Description

Méthode

Classe String

 split(séparateur) : sépare une chaîne en sous chaînes suivant

un caractère délimiteur

 Exemple

var ch='/usr/local/temp'; var tab=ch.split('/') ;

document.write(''le premier élément '' + tab[0]);

Classe String

 Concaténation de chaînes.

var chaine1="Vive le "; var chaine2="JavaScript"; var chaine=chaine1+chaine2;

 var chaine="azerty";

chaine.length retourne le nombre de caractères, ici 6 caractères.

 Evaluation d'une expression.

var x=10;

eval(x+20); eval ("2+2");

 Extraire une sous-chaîne.

var date = "15/08/2000"; var jour = date.substring(0,2); var mois = date.substring(3,5); var annee = date.substring(6,10);

(32)

La classe Image

 Elle fait partie des classes d'objets prédéfinies du langage (à

partir de la version 1.2). Contrairement à l'usage de la balise IMG, on peut précharger l'image et la stocker en cache (mémoire+disque) dans un objet de type Image, avant de l'afficher.

 Contructeur Image() :

 Il s'agit d'une fonction spéciale sans paramètre qui sert à créer

un objet

 var monImage = new Image()  Propriétés :

 Elles correspondent aux attributs de la balise <IMG>

 name, src, lowsrc, height, width, border, hspace, vspace ..

Traitements des images en JS

Rappels HTML

la balise <IMG NAME= .. SRC="URL" WIDTH=..

HEIGHT=.. ALIGN= ..>

URL est l'adresse internet (en général relative) du

fichier image à charger (.gif ou .jpg)

l'alignement de l'image par rapport au texte voisin est

réglé par l'attribut align

une image peut servir d'ancre pour un hyperlien

le navigateur classe les images insérées dans le

document dans un tableau images[]

La classe Images

La proprieté src permet de charger le fichier image à

partir d'une URL et de le stocker dans l'objet

 var monImage = new Image();

monImage.src = "moi.jpg";

Mais l'image n'est pas affichée. Elle pourra l'être dans

une balise <IMG>

<IMG SRC=...>

Malheureusement, les propriétés height et width ne

sont pas modifiables

(33)

Les frames

On peut diviser la fenetre en plusieurs cadres

indépendantes (balise HTML <frameset..>)

En Javascript, on peut faire interagir ces

cadres, c’ est à dire échanger des

informations dans un cadre à l’ autre.

Exemple au tableau

Gérer les cookies en JS

 Pourquoi les cookies ?

 On peut définir les cookies comme la "mémoire du WEB"

 Seule façon de s'affranchir de l'impossibilité d'écrire sur le disque du

navigateur client (JS ne possède pas d'instructions d'entrées-sorties fichiers)

 Le mécanisme de pose de "cookies" a été imaginé pour permettre au

moins à un serveur de retrouver certains résultats de sa consultation précédente du client

 Pour cela, le serveur écrit sur le disque client quelques informations

qu'il pourra chercher et réexaminer lors d'une prochaine visite du même "client"

 Ces renseignements sont stockés sous forme de chaîne de caractères,

dans un seul fichier au format texte, appelé cookies.txt

 Ils restent stockés, à l'insu de l'utilisateur client le plus souvent pendant

toute leur durée de vie, le "risque" dans ce dispositif étant l'effacement du fichier cookies.txt

Gérer les cookies en JS

 Enregistrement d'un cookie :

 Durant la session Web, chaque cookie est conservé en

mémoire, il y a écriture sur le disque à la fermeture du navigateur. L'écriture s'effectue sur instruction du serveur utilisant la directive HTTP suivante (incluse dans l'en-tête)

 nom=valeur; [expires =date; path= chemin-client; domain=

nom-domaine; secure]

 Seul le 1er champ, le nom identifiant le cookie et sa valeur (chaîne de

caractères stockée) sont obligatoires

 date : la date d'expiration, au delà de laquelle le cookie sera supprimé

du fichier

 chemin : nom du répertoire serveur

 nom-domaine : nom du domaine Internet dans lequel le cookie peut

être traité, les autres serveurs devant l'ignorer

 secure : le cookie ne peut être consulté qu'au cours d'un échange

sécurisé (type https)

Gérer les cookies en JS

Suppression d'un cookie :

La méthode la plus simple consiste à le réenregistrer

en lui attribuant une date d'expiration dépassée

Exemple :

 <SCRIPT LANGUAGE="JavaScript">  // la date est dépassée !

 var date = new Date(1999,0,1);  function EffacerCookie() {  //nom est le nom du cookie

 document.cookie = "CompterPassageCoursCookie=" +

";expires=" + date.toGMTString();

 }

(34)

Exemple Cookie

 On va créer un cookie qui sauvegarde le nom d'un visiteur de

notre site web.

 A la première visite, on demande à l'internaute de nous fournir

son nom.

 Par la suite, le même visiteur recevra un message de bienvenue.

Fonction pour la création du cookie.

function setCookie(c_name,value,expiredays) {

var exdate=new Date();

exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate.toGMTString()); }

Fonction qui recupère le cookie. function getCookie(c_name){ if (document.cookie.length>0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; }

 Fonction qui vérifie l'existence du cookie

function checkCookie() {

username=getCookie('username'); if (username!=null && username!="") { alert('Welcome again '+username+'!'); } else

{username=prompt('Please enter your name:',""); if (username!=null && username!="")

{setCookie('username',username,365);} }

(35)

Exemple complet

<html> <head> <script type="text/javascript"> function getCookie(c_name){ ...} function setCookie(c_name,value,expiredays){ ...} function checkCookie(){...} </script> </head> <body onLoad="checkCookie()"> </body> </html>

Références

Documents relatifs

The diversity of cases that can be found in repair and maintenance studies stands as an invitation to pursue the journey, and to document the multiple ecologies of visible

- avec erreur si tel n’est pas le cas ; mais une différence entre deux individus ne peut résulter que de différentes capacités mentales d’induction. Deux individus dotés de la

os resultados de um levantamento das espécies de moscas-das-frutas (Diptera: Tephritidae), seus hos- pedeiros e parasitóides na Zona da Mata Mineira, no Município de Viçosa,

Il est désormais bien admis par la communauté des chercheurs que l’histoire de l’Anabase ne saurait être la retranscription fidèle d’un carnet de voyage annoté au jour le jour

Les étudiants sont amenés à travailler sur la résolution d’un cas clinique, allant du diagnostic de la pathologie à la délivrance des médicaments, pour renforcer leurs

Lorsqu’il oppose « la norme directive » du film idéal 3 à l’idéal artistique du film, on peut bien sûr retenir l’inquiétude d’une Eglise confrontée à une «

L’ âge de l’inscription: la rhétorique du monument en Europe du XVe au XVIIe sie‘cle. Par FLORENCE VUILLEUMIER LAURENS et PIERRE LAURENS. Inaugurant la collection intitulée

Le voyage de 1838 jusqu’à Gènes, plus rapide et moins lointain, aurait permis deux variantes : l’une à l’aller entre Paris et Lyon par Clermont-Ferrand, suivie d’une nouvelle