Initiation aux bases du langage JavaScript

(1)

Chapitre : La théorie objet et le langage JAVASCRIPT

-_{l’un des intérêts des objets est qu’il n’est pas nécessaire, pour} les utiliser de savoir comment ils sont construits. il suffit de connaître leur mode d’emploi et la liste des propriété et méthodes qu’il supporte.

-_{JS comporte de très nombreux objets prédéfinis mais vous} pouvez parfaitement créer vos propres objets ou modifier les existants.

Structure des objets JS :

-_{La création d’un objet s’appelle une « instance » elle se} traduit par l’utilisation du mot new.

(2)

-_{Chaque objet possède des méthodes qui permettent de le} manipuler afin d’obtenir des informations ou inversement lui en donner.

o pour retrouver : c’est getMétode() journee.getYear() 2006

o pour affecter : c’est setMéthode()

nous souhaitons afficher la date du jour, mais en l’an 2000 :

journee.setYear(2000);

document.write( renvoie_date(journee)); 1._{Création d’objet et de classe d’objet}

JS permet la création de nouveaux objets définies pas l’utilisateur; a.) Créons un objet qui contiendra tous les éléments constituant notre page.

var mapage = new Object();

mapage.nomp = “ page de Anis Jedidi” ; mapage.couleur_fond= “ blanc” ;

mapage.couleur_police= “ noir” ;

document.write(“ <br> Nom de la page ”+ mapage.nomp) ;

document.write(“ <br> couleur de fond ”+ mapage.couleur_fond) ; b.) JS permet aussi la création d’objet comme étant une fonction : function nom_obj (prop1, prop2, …)

{

this.prop1 =propriété1 ; this.prop2 =propriété2 ; }

(3)

Créons l’objet mon texte qui contiendra les caractéristiques du texte à afficher

function mon_texte (nom, taille, couleur) {

this.nom = nom ; this.taille= taille ;

this.couleur= couleur ;}

var texte_titres = new mon_texte (“ arial”, 12, “ bleu”) … document.write(“la couleur ”+ texte_titres.couleur) ;

La création d’objets utilisateurs permet donc la création de fonctions utilisateur attachées à ces objets :

Ex : soit la fonction affichage() que nous souhaitons l’affecter à l’objet mon_texte.

function mon_texte (nom, taille, couleur) { this.nom = nom ; this.taille= taille ; this.couleur= couleur ; this.affichage= affichage ; } function affichage ()

{ document.write (“voici les propriétés du texte : police= ”+ this.nom+ “ taille = ” + this.taile + …}

texte_titres.affichage() ;

(4)

c.) il est parfois utile de créer un objet à partir d’un autre objet. Ces deux sont indépendants et pourtant ils pourraient être liés puisque le texte est dans la page.

var mon_site =new object() ;

var mon_site.ma_page =new object() ;

var mon_site.pa_page.mon_texte =new object() ;

With remplace l’écriture d’un objet complexe plusieurs fois de

suite.

V. Panorama : Objets et méthodes JS

1. Objet : window : c’est le parent de tous les éléments qui composent la page.

• propriétés

Un ensemble traite les cadres (frames) : -_{ce sont frames, length, parent et top.} Un ensemble a trait à la barre d'état :

-_{status : valeur du texte affiché dans la barre d'état de la} fenêtre.

-_{DefaultStatus : valeur par défaut qui s'affiche dans la barre} d'état.

Généralement, cet événement est mis en oeuvre par un onmouseOver() sur un lien hypertexte

</BODY> </HTML>

(5)

• méthodes

-_{celles des boites de dialogue. Soit alert(), confirm(), et} prompt()

-_{celles du ou des minuteries. Soit setTimeout() et} clearTimeout().

-_{celle d’ouverture et de fermeture : open() et close().} La syntaxe est :

[window.]open("URL","nom_de_la_fenêtre","caractéristiques_de_ la fenêtre")

Caractéristique Description

toolbar=yes ou no Affichage de la barre d'outils location=yes ou non Affichage de champ d'adresse

directories=yes ou no Affichage des boutons d'accès rapide status=yes ou no Affichage de la barre d'état

menubar=yes ou no Affichage de la barre de menus scrollbars=yes ou no Affichage des barres de défilement. resizable=yes ou no Dimensions de la fenêtre modifiables width=x en pixels Largeur de la fenêtre en pixels height=y en pixels Hauteur de la fenêtre en pixels exemple 1 : ouverture de « test.html » par bouton

<FORM>

<INPUT TYPE ="button" value="Ouvrir une nouvelle fenêtre" onClick="open('test.htm', 'new',

'width=300,height=150,toolbar=no,location=no,directories=no,statu s=no,menubar=no,scrollbars=no,resizable=no')"> </FORM> exemple 1 : ouverture de « test.html » par bouton et avec fonction <SCRIPT LANGUAGE="javascript">

(6)

xyz="open('test.htm', 'new', 'width=300,height=150,toolbar=no,location=no,directories=no,statu s=no,menubar=no,scrollbars=no,resizable=no')"> } </SCRIPT> <FORM>

// une ouverture par survol de lien est possible avec OnMouseover exemple 2 : fermeture automatique avec X seconde

<HTML>

<FORM>

<INPUT TYPE="button" value=" Continuer " onClick="clearTimeout(compt);self.close();"> </FORM> </BODY> </HTML> 2. Objet : navigator :

C’est très utile pour adapter les scripts en fonctions des particularités de chaque navigateur.

• Propriétés :

-_{navigator.appName : Retourne le nom ou la marque du} browser soit "Netscape", soit "Microsoft Internet Explorer"

-_{navigator.appVersion Renvoie des informations} concernant la version du navigateur,

-_{navigator.userAgent : Renvoie également des}

informations (sur le header envoyé dans le protocole HTTP du serveur de votre visiteur).

-_{navigator.appCodeName : Retourne le nom de code du} navigateur, généralement c’est « Mozilla »

(7)

3. Objet : Document : se situe sous l’objet Window dans hiérarchie des objets JS.

a) Les propriétés de Documents permettent • l’obtention d’information sur le contenu d’une page

• la modification de la présentation ou de certain élément de la page

bgColor couleur de l’arrière plan charset jeu de caractère utilisé fgColor couleur du texte

lastModified Dernière modificatrice de la page linkColor Couleur des liens non cliqués alinkColor couleurs des liens actives

vlinkColor Couleur des liens qui ont été cliqués Title, url, formName, referrer, defaultCharset …

Ex1 :

function changeCouleurLien() { var coulien= document.alinkColor;

if (coulien== “blue”) document.alinkColor= “green” elseif (coulien== “green”) document.alinkColor= “red” elseif (coulien== “red”) document.alinkColor= “blue” }

<body> <a href= “JS.changeCouleurLien()”> c’est un lien de couleur changeant</a> </Body>

Ex 2 : les Objet HTML dans l’objet « Document »

Ces objets sont regroupés sous forme de tableaux prédéfinie dans JS et contenant tous les objets du document d’une même catégorie. images[], links[], forms[], embeds[], Applets[], …

Créez 3 liens sur une page vierge, puis affichez la liste de sources des pages a visité par ces liens en utilisant l’objet Links

(8)

<body>

for (var i=0; i< document.links.length; i++)

document.write( “<br> src” + i+ “: ”+ document.links[i]); </script> </Body>

b) Les méthodes de l’objet Documents sont : • clear() : effacer la totalité des éléments d’un document • close(), write(), writeln(),…

c) Les événements associés à Document sont :

onClick, onDblClick,

onKeyDown : touche du clavier enfoncée,

onKeyPress : touche du clavier enfoncée et relâchée, onKeyUp : touche du clavier relâchée

onMouseDown, OnmouseUp, onMouseOver (survolant un objet), onMouseOut (quttant le survol)

4. Objet : Image : permet de travailler sur les images qui composent une page.

a) Les propriétés de Image permettent de contrôler : border Affiche et contrôle l’épaisseur de la bordure

complete Contrôle le chargement de l’image height Hauteur

length Nombre d’image sur un document (la page) name Nom de l’image ( img1 : 1ère

image dans le doc )

src Nom du fichier de l’image ( c:/aaa/xx/img1.bmp) vspace Espace vertical entre les images

hspace Espace horizontal entre les images

(9)

Ex3: soit l’image « vol01.jpg »”, afficher son nom et créer des

boutons permettant de diminuer sa taille (à 20px), de l’agrandir (à300px), de lui ajouter des bordures (4px), d’augmenter sa taille de 20% à chaque clique, de la remplacer par l’image « cour01.jpg »

document.write (“Le nom de l’image est ”+ document.aigle.name ) </script>

pour augmenter la taille de 20%, nous insérons au script :

var taille=1 ;

function doubler() {

taille= taille*120/100 ; hauteur=aigle.height*taille aigle.height=hauteur ; }

pour remplacer l’image, nous insérons au script :

image2=new Image() ;

image2.src= “c:/xxx/cour01.jpg”

La création d’une instance d’objet image permet le pré-chargement de l’image afin qu’ensuite le navigateur puisse instantanément la manipuler.

(10)

5. Objet : form : permet de contrôler la saisie en temps réel... (Révisez votre cours de HTML, chapitre : les formulaires…)

a) Les propriétés de Form les plus fréquentes sont : action Adresse du destinataire, si envoi

encoding Méthode de codage des caractèress length Nombre de form sur un la page

name Nom du form

b) Les méthodes de Form sont 3 : handleEvent Envoyer un événement

Reset Réinitialisation du form submit Envoi ou validation du form

• Il est possible de contrôler les champs de valeur numérique ou chaîne de caractères spécifique (champ de mail ou num de tel avec des caractères spéciaux…)

• il est aussi possible d’empêcher la saisie dans un champ :

• ou vider un champ avant la prise de focus

• ou de forcer la saisie dans un champ ……

6. Objet : String : permet de contrôler les chaînes de caractères.

length : la longueur de la chaîne de caractères.

charAt(p) : Méthode qui renvoie un caractère isolé référencé par sa

position. Le 1er caractère est à la position 0 (zéro).

indexOf(ch, p) : Méthode qui renvoie la position d'une chaîne

partielle à partir d'une position déterminée (en commençant au début de la chaîne principale soit en position 0).

variable="Javascript" var="script"

(11)

x=variable.indexOf(var,0); x vaut 4 variable="une information bidon…. :)" var="@"

x=variable.indexOf(var); x vaut -1

LastIndexOf(ch, p) : Méthode qui renvoie la position d'une chaîne

partielle à partir d'une position déterminée (en commençant à la fin soit en position length moins 1).

substring(x,y) : Méthode qui renvoie un string partiel situé entre l

position x et la position y-1. Javascript 01……...9 str="Javascript"; str1=str.substring(0,4); str2="Javascript".substring(0,4); str3=str.substring(6,9);

Les résultats sont :

str1="Java"; soit les positions 0,1,2 et 3. str2="Java"; soit les positions 0,1,2 et 3. str3="rip"; soit les positions 6,7 et 8

Et encore bcp plus a découvrir …. 7. Objet : Array: 3 méthodes importantes

join() : Regroupe tous les éléments du tableau dans une seule chaîne. Les différents éléments sont séparés par un caractère séparateur spécifié en argument. Par défaut, ce séparateur est une virgule.

reverse() : Inverse l'ordre des éléments (ne les trie pas).

sort() : Retourne les éléments par ordre alphabétique (à condition qu'ils soient de même nature)

(12)

Exercice 1 : construire un carnet d'adresse avec 3 personnes • construction du tableau :

carnet = new Array(3); • ajout des données : carnet[0]="ahmed"; carnet[1]="ines"; carnet[2]="hedi";

• comment obtenir ce résultat : ahmed-ines-hedi document.write(carnet.join("-"));

• comment obtenir ce résultat : hedi-ines-ahmed document.write(carnet.reverse().join("-"));

Exercice 2 : soit le tableau suivant

Écrire le formulaire suivant permettant d’afficher les prix :

• la déclaration du tableau

nom = new Array(3); // un tableau avec 3 colonnes nom[0] = new Array(3); // on ajoute 3 lignes a chaque

nom[1] = new Array(3); // colonne

nom[2] = new Array(3);

nom[0][0]="1200"; nom[0][1]="1250"; nom[0][2]="1300"; nom[1][0]="800"; nom[1][1]="850"; nom[1][2]="900"; nom[2][0]="500"; nom[2][1]="520"; nom[2][2]="540";

(13)

• le formulaire est : <FORM name="form" > <SELECT NAME="liste"> <OPTION>Chemises <OPTION>Polos <OPTION>T-shirts </SELECT> <SELECT NAME="taille"> <OPTION>T. Small <OPTION>T. Médium <OPTION>T. Large </SELECT>

où la fonction affi() se formule comme suit : function affi() { i = document.form.liste.selectedIndex; j= document.form.taille.selectedIndex document.form.txt.value=nom[i][j]; } 8. Objet : Frames:

Deux propriétés importantes pour les Frames :

Capacité d’interaction entre

(14)

• length :Retourne le nombre de frames subordonnés dans un cadre "créateur".

• parent :Synonyme pour le frame "créateur".

Exemple : nous allons transférer une donnée introduite par l'utilisateur dans une frame, dans une autre frame.

La page "créatrice" des frames

</HTML>

La page "créatrice" contient deux frames subordonnées "enfant1" et "enfant2". Le fichier enfant1.htm

<INPUT TYPE="TEXT" NAME="en" value=" "> </FORM> </BODY> </HTML> Le fichier enfant2.htm <HTML> <HEAD> <SCRIPT LANGUAGE="Javascript"> <!-- function affi(form) { parent.enfant1.document.form1.en.value=document.form2.out.val ue }

(15)

// -->

</SCRIPT> </HEAD> <BODY>

Entrez une valeur et cliquez sur "Envoyer". <FORM NAME="form2" >

</FORM> </BODY> </HTML>

9. animer une page : calques et styles

• un calque est définie par les balises <DIV> et </DIV> et par o un identifiant pour pouvoir le repérer

o un style d’affichage pour indiquer sa position (absolute, top, left) sa taille (width, height) sa couleur (bg-color, color) son rang d’affichage (z-index)…

o un contenu qui sera affiché <DIV id= "cal01"

style="position:absolute;top:200;left:100;visibility:hidden;backgo und-color:yellow">

DELL inspiron 510m </DIV>

Manipulation de calques avec jacascript: un calque peut être

accédé par javascript grâce à la fonction

document.getElementById qui retourne l’objet calque :

document.getElementById("cal01").style.visibility= "visible" ( ou "hidden"

(16)

document.getElementById("cal01").style.left= 50; document.getElementById("cal01").style.top=100 document.getElementById("cal01").style.top= parseInt(document.getElementById("cal01").style.top)+10 document.getElementById("cal01").style.width=100 document.getElementById("cal01").style.height=30 document.getElementById("cal01").style.color="red"

NB: en JS il n’est pas possible de modifier un attribut seulement s’il a été défini dans la création du calque dans la zone de style de la balise DIV.

Exercice : positionner une image en haut et à gauche de la page en la faisant arriver par la droite de l’écran :

(17)

<title>animation de calque</title> </head>

<body>

<img src="img1.gif" height =150 width=150> </div> </body> </html> <script language="javascript"> function lanceanim() { cal01style= document.getElementById("cal01").style; cal01style.left=scrren.width; cal01style.visibility="visible"; anim(cal01_style); } </script> <script language="javascript"> function anim(un_calque) { uncalque.left= parseInt(uncalque.left-20); if (parseInt(uncalque.left)>0) setTimeout("anim(uncalque)", 100); } </script>

L’activation de l’animation s’effectue au chargement de la page : <body onload="lanceanim()">

(18)

Exercice 2 : écrire une fonction permettant de déplacer un calque de sa position d’origine vers une position donnée par les paramètres posX et posY, et l’id du calque lui même

function deplace(cal01, posX, posY) {

cal01style=styleCal(cal01); cal01style.top=posY; cal01style.left=posX; } function styleCal(idCalque) { initCal= document.getElementById("inCalque").style; return initCal ; }

Exercice 3 : écrire une fonction permettant de déplacer un calque d’une distance donnée (en px) sur chacun des axes X et Y :

les paramètres de la fonctions sont le déplacement en Px à effectuer sur les deux axes

function deplace_de(cal01, Xpx, Ypx) {

cal01style=styleCal(cal01);

cal01style.left=parseInt(cal01style.left)+ Xpx; cal01style.top= parseInt(cal01style.top)+ Ypx; }

Exercice 4 : écrire une fonction de création et d’insertion de calque (avec ces paramètres de style) dans un code html

function creeCalque(idC,topC, leftC, widthC,heightC, visibilityC, contenu) {

chaineDIV=" '<div id='+"idC" +' style='position: absolute; top:"+ topC+"px;

left:"+ leftC+"px; width:"+widthC+ "height:"+heightC+ " visibility:"+visibilityC+ " '> + contenu + "</div>";

(19)

document.body.innerHTML=document.body.innetHTML+chaneDIV; }

Le calque sera ajouté directement dans le code HTML de la page en utilisant la propriété innerHTML de l’objet body.

innerHTML permet de faire référence au code HTML contenu entre les balises d’ouverture et de fermeture de l’objet auquel elle est appliquée.

<body onload="creeCalque(‘test’, 100, 100, 200, 200, ‘visible’, ‘ici se trouve un calque’)">

Exercice 5 : une image qui suit le pointeur de la souris :

• construction du calque qui va contenir l’image « suivre.gif » • nous utilisont la fonction deplace(idCal, xpos, ypos) pour

faire déplacer l’image vers la position courante de la souris … • nous créons la fonction suivie(e) qui lance le déplacement du calque lorsque le curseur se déplace. : grâce à l’événement onMouseMove de l’objet document

• les coordonnées x et y de la souris sont des propriétés de l’objet event (père de tous les événement JS)

<html> <head> <script language="javascript"> // rappel de la fonction deplace(idCal, Xpos, Ypos) function suivie(e) {

delpace(suiv, event.x, event.y); }

document.onmousemove=suivie; </script> </head>

<body>

(20)

Chapitre 3 : Applets, Plug-ins ;

I. les applets

La balise <applet> permet l’insertion du code java dans un fichier html

<applet

align = bottom | middle | top

codebase = chemin de base, emplacement du fichier applet code = adresse url

height = hauteur en px id= identifiant

name = nom title = texte

width = largeur en px >

Les objets insérés ou les applets peuvent avoir accès à des paramètres incorporés dans le fichier html. On utilise à cet effet la balise <param>

<param

name = nom du paramètre

value = valeur > //fixe ou dynamique (return de fonction, calcul interne…)

Exemple applet : import java.awt.* ; import java.swing.* ;

public class premiereApplet extends Japplet { public void init () {

container ContentPane = getContentPane() ;

JLabel label = new JLabel ("ma première applet…") ; ContentPane.add(label) ;

(21)

Pour exécuter l’applet il faut réaliser les deux étapes suivantes : • compiler le fichier java en fichier de classe

• créer un fichier html pour indiquer au navigateur le fichier de classe à charger en premier ainsi que les dimensions de l’applet

RQ:

• Le cycle de vie d’une applet est fourni par les 4 méthodes suivantes : init (), start(), stop() et destroy().

• une applet ne peut jamais lancer un programme exécutable • une applet ne peut ni lire ni écrire dans le système de fichiers

de l’ordi local.

Exercice 2 Applet avec paramètre :

Au moment de l’insertion de l’applet dans le fichier html, laisser la page redéfinir la police de caractères utilisés par celle-ci. :

1ere étape : insertion de la balise <param> dans la balise <applet>

2eme étape : introduire la méthode getParameter dans le code java de l’applet. La méthode getParameter de la classe Applet récupère la valeur du paramètre

</applet>

public void init () { ……

(22)

Les paramètres sont toujours envoyées en tant que

chaînes

de caractères

qu’il faudra (si nécessaire) les convertir.

Soit le paramètre taille (même que exe2) <param name = taille value = 24>

Pour que la source java considère 24 comme entier : int taille = integer.parseInt(getParameter("taille")) ;

II. les plug-ins

Dans les spécifications de HTML, tous ces objets doivent être insérés dans la page par la balise <object>. Cette balise sert essentiellement à l’insertion des animations flash ou vidéo en realVideo.

<object

align = bottom | middle | top

class = un nom de classe de style CSS codebase = chemin de base

codetype = type de media data = adresse url

height = hauteur en px id= identifiant

name = nom title = texte

width = largeur en px … > Certain navigateur ne supporte pas la balise <object>

La balise <embed> permet elle aussi l’insertion d’un fichier externe associé à une application ou un plug-in.

<embed

(23)

width = largeur en px src = URL

name = nom

autostart = true | false

controls = gestion de la console média … >

Exemple : placer un composant real player dans la page html en disposant de plusieurs liens afin d’activer ou désactiver le contrôle <embed id= "real" src = "texte.ra" width = "350" height = "40" controls = "ControlPanel">

ControlPanel permet l’affichage de la console audio par défaut pour lire un fichier “.ra”.

écrire les fonctions nécessaire pour lecture, pause et stop.

<a href = “javascript:play()”> [lecture] </a> - <a href = “javascript:pause()”> [pause] </a> -

(24)

liste des attribute EMBED les plus utilizes:

Certains attributs supplémentaires pourront également être définis suivant le plug-in utilisé :

(25)

Deux attributs peuvent s’avérer important lors de l’insertion d’objets par les balises object ou embed.

<object classid= "clsid:code du type de l’objet "> <embed type = "le type MIME de l’objet ">

Tout les deux donne une idée sur la codification reconnue pour chaque type d’information introduite dans les pages web, ils indiquent aux navigateurs quel lecteur utiliser.

L’extension du fichier (si elle est reconnue par le navigateur et elle est affectée à un lecteur par défaut) permet de détecter automatiquement l’une de ces deux info.

(26)

La liste des types MIME est dans

http://www.iana.org/assignments/media-types/

• Exemple d'insertion d'image (alternative à <IMG...>) : <OBJECT DATA="image.gif" TYPE="image/gif">

• Exemple d'insertion d'objet QuickTime :

animation démarrant automatiquement, tournant 1x, avec affichage du contrôleur :

<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="xxx" HEIGHT="yyy" CODEBASE=http://quicktime.apple.com

STANDBY="Chargement de QuickTime ActiveX..."> <PARAM NAME="SRC" VALUE="xxx.mov">

• animation à démarrer manuellement, tournant 1x, sans affichage du contrôleur :

• animation démarrée automatiquement, tournant en boucle, avec affichage du contrôleur :

<EMBED SRC="xxx.mov"

PLUGINSPAGE="http://quicktime.apple.com"

TYPE="video/quicktime" WIDTH="xxx" HEIGHT="yyy" CONTROLLER=TRUE LOOP=TRUE AUTOPLAY=TRUE>

(27)

L’élément <embed> peut être contrôlé à l’aide des deux fonctions javascript play() et stop() Pour accéder à un élément <embed> il est préférable que celui-ci ait un attribut name renseigné. Ainsi, pour y accéder, on utilisera la syntaxe suivante :

document.embeds['nomdelamusique']

Si l’élément n’est pas identifié à l’aide de l’attribut name, il est également possible d’y accéder ainsi : document.embeds[0]

où embeds[0] correspondra au premier <embed> déclaré dans la page, embeds[1] étant le suivant, etc.

La balise <bgsound>

Cette balise ne fonctionne que pour Internet Explorer et doit se placer entre les balises <head> et </head> de votre page. La

rapidité de lancement du fichier son dépendra de sa taille, il se peut donc que la musique ne se lance pas au démarrage de la page si elle n’est pas totalement chargée.

Exemple d’intégration avec <bgsound> : <head>