Javascript Partie1

8/14/2019 Javascript Partie1

1/30

Le javaScript

Initiation au langage

Description du langage

Inclusion du javaScript dans des pages html

Cration d'un lment simple

Notes propos de l'criture du code

Un premier test en javaScript

Oprateurs, comparaisons et boucles

criture dans la page

Fonctions et javaScript

Les actions du document

Les indispensables getElement et innerHtml

Le navigateur

Externaliser le script

javaScript Stphane Jeanneau 2008 page n 1


2/30

Description du langage

Le javaScript est un langage qui permet de dynamiser ou d'augmenterl'interactivit des pages html, c'est dire qu'il va vous permettre d'insrer desactions produites :

lors de l'affichage d'un documentpar l'utilisateur de diverses manireslors de l'ouverture d'une page htmllors de la fermeture d'une page html

Ce langage peut tre mlang du code html ou produire des pagesentires. Les effets de bouton des pages web est par exemple une utilisationcourante de javascript.

Le javaScript est produit gnralement au chargement de la page dans lenavigateur. A cet instant le document va produire un nombre X d'objetsjavaScript avec des proprits bases sur le html du document.

Le javaScript utilise des classes rpertories dans le navigateur et il n'est paspossible de produire ses propres classes d'objets.

Vu de l'aspect strictement orient objet, ce type de hirarchie est connu entant que hirarchie instancie parcequ'il fait appel des instances spcifiquesdes objets plutt qu' des classes d'objets.

Ces objets possdent une hirarchie qui est illustre ci-dessous.

Les termes en anglais sont les objets eux mmes.Cette hirarchie est logique puisque l'objet window (fentre) contient l'objetdocument qui contient l'objet form qui contient l'objet textpar exemple.



3/30

Les objets du formulaire sont gnralement construits comme suit:

actionsSurElementsera remplac par une ou plusieurs des actions suivantes :

onclick, onblur, ondbclick, onfocus, onkeydown, onkeypress, onkeyup,

onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect



4/30

Dans le cas d'un formulaire avec un champ de texte qui serait traduit enlangage courant cela donnerait :

La fentre contient un document qui contient un formulaire nommmonFormulaire qui contient un champ de texte nomm boiteDeTextequicontient une valeur

Dans cet exemple pour savoir ce que la boite de texte contient nous y ferionsrfrence en utilisant la hirarchie suivante:

window.document.monFormulaire.boiteDeTexte.value

Llment window reprsente la fentre du navigateur, cette fentre contientun document HTML, cest llment documentLlment window et llment document peuvent sembler faire appel aumme lment mais ce sont 2 lments distincts.document est un enfant de window

monFormulaire est la valeur du name=" "du marqueur form

boiteDeTexte est la valeur du name=" "du marqueur input

Le code HTML correspondant :



5/30

exemple


6/30

Toutes les pages des navigateurs vont contenir les objets suivants:

navigator

Cette proprit va valuer les versions du navigateur utilis, les types MIMEutiliss par le client ainsi que les plug-in qui sont installs.

MIME: Multipurpose Internet Mail ExtensionsLa norme MIME est utilise pour dfinir le format des messagesmultimdia sur Internet. Un message cod selon la norme MIMEcontient les en-ttes ncessaires pour dcrire le type des donnesutilis. Le contenu du message peut tre compos d'un ou plusieurs deslments suivants : texte, image, son, fichier binaire quelconque, etc.

Client:Le client est lapplication qui va tre mise en relation avec le serveur partir de la machine du visiteur, cest dire le navigateur. Faire travaillerle client plutt que le serveur va par exemple soulager le second.

Plug-in:Le plug-in est un module externe au navigateur et qui va augmenter lescapacits du navigateur. Gnralement un plug-in permet la lecture detypes de fichiers autres que html. Les plus rpandus sont les plug-ins

java et les plug-ins Flash.

window

Lobjet fentre est lobjet racine du document. Ses proprits sappliquent lensemble de la fentre et donc son contenu.

document

Lobjet document contient les proprits bases sur le contenu du documentcomme son titre, sa couleur de fond, les liens et les formulaires.

location

Cet objet va contenir les informations bases sur lURL en cours, c'est lecontenu de la barre d'url.

history

Cet objet contient les proprits des URL prcdemment visites par le client.

URL:Universal Ressource Locator ou lien. Les URL sont la base de lanavigation sur internet. http://www.google.fr est une URL absolue quiamnera de quelque endroit de la plante que ce soit sur la pagedaccueil de google en franais. /pages/index.html est une URL relativedans le sens ou ce lien emmnera le visiteur vers une page relative auserveur sur lequel elle est place.



7/30

Inclusion du javaScript dans des pages html.

Une page html classique ressemble ce qui se trouve ci-dessous:

page javaScript

Pour insrer un code javaScript il faut falloir le dclarer dans l'entte dudocument avec la balise de langage de script:

Cette balise tout comme les balises html possde un balise d'ouvertureouverte par le signe < et ferme par le signe >

Dans cet entte on intgre la mthode de script utilis et le type de langage

de script: JavaScript

Dans lexemple suivant un commentaire html se trouve autour des balises etdsactive le JavaScript.

Les instructions JavaScript se terminent par un point-virgule ;

varTexte = "Le point-virgule est plac en bout de ligne. " ;alert( varTexte ) ;



8/30

Notes propos de l'criture du code.

Lorsque vous allez crire du code javaScript vous allez la fois utiliser unesyntaxe de code et une mise en page.

La syntaxe de code est celle qui va contenir les objets javaScript et qui va

produire les actions. La mise en page est la faon dont vous allez organiservotre code.

Dans l'exemple suivant le code est mis en page de faon lisible.

N'hsitez pas utiliser la touche tabulation pour augmenter la lisibilit devotre code. Ici l'action est simple mais dans des actions plus complexes on seperd souvent dans son code si il est format de faon trop rigide.

Remarquez aussi ici l'utilisation des commentaires caractriss par les 2

slashes //

Tout ce qui se trouvera derrire ces 2 caractres ne sera pas interprtcomme du code par les navigateurs.Vous pouvez donc insrer l'aide de ces commentaires des informations quivous aideront lors de la reprise du code en main mais galement neutralisercertaines parties de code afin de tester telle ou autre action.

Si vous dsirez isoler plusieurs lignes de code en mme temps, utilisez lecommentaire multi ligne ouvert avec /* pour l'ouverture et */ pour la

fermeture

Exemple:

page javaScript

//action en dessous de ce commentaire

alert("test");

/*ceci est en commentaire multi ligne

cette ligne est aussi en commentairele commentaire finit sur la ligne suivante avec

*/



9/30

Un premier test en javaScript

Le message d'alerte:

Nous allons ici intgrer un message d'alerte qui s'affichera au moment o lapage contenant le script sera charge par le navigateur

Lorsque vous allez visualiser cette page html dans un navigateur vous allezobtenir un message d'alerte contenant le message que vous avez indiquentre les guillemets

L'objet alert utilis ici est celui qui va lancer une fentre d'alerte dans lenavigateur au chargement de la page.

Les objets javaScript sont des lment rfrencs par les navigateursinternet qui produiront tel ou tel type d'action.

Il existe un nombre considrable d'objets javaScript et les lister tous seraitfastidieux.

Il existe toutefois sur le rseau des documentations trs compltes sur laquestion, en particulier sur le site de Netscape, l'inventeur du javaScript.

Quelques liens :

Un site pratique pour ses explicationshttp://fr.selfhtml.org/javascript/index.htm

ScriptAculous, avec ses modules tlchargerhttp://script.aculo.us/

page javaScript

alert("Bonjour tout le monde");

Test dans un navigateur ce document produira un message d'alerte chaque chargement de la page.



10/30

Le message ci-dessus est produit sous le navigateur Safari sous Mac Os X 10.4

Ce n'est pas par hasard que alert est le premier test fait en javaScript.

Alert sert trs souvent tester la validit d'une action de faon simple ou tester le contenu de variables.

Ici notre action ne contient qu'un paramtre c'est dire une chane decaractres.Les chanes de caractres sont produites par l'utilisation des guillemets oudes apostrophes pour les dlimiter.

"ceci est une chane de caractres"

Les guillemets et apostrophes qui vont dlimiter un chane de caractres ironttoujours par paire.

Pour insrer un retour charriot dans un alert() vous devrez utiliser lecaractre lineBreak c'est dire : \n entre les guillemets de votre chane decaratres.

alert("Plusieurs lignes\nseconde ligne\n3me ligne\netc.");

Notez que ce qui est en javascript n'est pas en HTML mais en format textestandard

alert("Plusieurs lignes\nLe
n'est pas pris en compte");



11/30

Les variables

Un nom de variable ne peut contenir que des caractres alphanumriques,Ce sont les caractres suivants : de a z et de 0 9 ainsi que le underscore, (lecaractre soulign) _ TOUS LES AUTRES CARACTRES SONT EXCLUS. Unevariable ne doit PAS commencer par un nombre, 1element est faux comme nom devariable par exemple.

Les variables sont des sortes de boites de mmoire qui vont pouvoir stockerdes donnes, par exemple si je veux affecter la variable monTexte la valeurde bonjour je vais crire :

monTexte = "bonjour";

La variable monTexte contient bonjour, si je veux vrifier ce que la variablecontient je vais utiliser alert(monTexte); sans guillemets

alert( monTexte );

Avec des guillemets le rsultat est totalement diffrent :

alert( "monTexte" );

Dans le premier cas monTexte n'est pas entre guillemets, c'est doncobligatoirement une variable, ce qui sera affich c'est le contenu de lavariable. Cette variable doit exister pour tre utilise.

Ceci est faux

alert(monChoix);

monChoix = "Ceci ne fonctionne pas.";

L'ordre de lecture est trs important, or dans l'exemple ci-dessus ladclaration est place aprs l'appel, monChoix n'existe pas au moment ol'alert() se produit.

Pour que cela fonctionne il faut que la variable aie pralablement tdclare.

monChoix = "Ceci fonctionnera.";

alert(monChoix);

Rien n'empche de changer la valeur d'une variable :

monChoix = "Ceci fonctionnera.";

alert(monChoix);monChoix = "Ceci fonctionn.";

alert(monChoix);



12/30

Quelques exemples sur les variables

monTexte = "Ceci est un texte, je peux y insrer ce que je veux.";

alert(monTexte);

prenom = "Stphane";

nom = "Jeanneau";

patronyme = prenom +" " + nom ;

les variables prenom et nom contiennent du texte, il est entre guillemets;

la variable patronyme est compose des variables prenom et nom spars parune chane de caractre qui contient un espace, l'espace est un caractrecomme un autre.

alert(patronyme);

va afficher : Stphane Jeanneau

Il existe des variables globales et des variables locales.

Une variable globale est accessible de partout alors qu'une variable locale nesera accessible que l o elle a t dclare, dans une fonction par exemple

Vous obtenez une variable locale par la dclaration de la variable avec var l'intrieur d'une fonction.

uneVarglobale = 10;var uneAutreVar = 10;//dans le cas ci-dessus les deux variables seront disponibles partout

function monTest(){

//ici la variable n'est disponible que dans la fonctionvar uneVarLocale = 22;}



13/30

Les nombres et les variables

nombreCD = 45

la variable nombreCD ne contient que des chiffres qui eux ne sont pas entreguillemets,

ils sont interprts en tant que tels,

si vous placez un nombre entre guillemets il risque de perdre sa qualit denombre pour devenir une chane de caractres.

Le rsultat sera 85

Toutes les variables sont desnombres, leur total est donc unnombre

nombreCD = 45;

nombreK7 = 5;

nombreVinyls = 35;

total = nombreCD + nombreK7 +

nombreVinyls;

alert(total);

Le rsultat sera 515

Toutes les variables ne sont pasdes nombres, leur total est doncune chaine de caractres.

nombreK7 = 5;

nombreMp3 = "15";

total = nombreK7 + nombreMp3;

alert(total);



14/30

Oprateurs, comparaisons et boucles.

Afin de produire des actions avec JavaScript vous devez tout dabord vousfamiliariser avec les oprateurs et les conditions et les boucles.

Les oprateurs

Ils se divisent en 3 parties :

Loprateur daffectation =

Les oprateurs de calcul + - / *

Les oprateurs de comparaison > < >=


15/30

Les oprateurs de comparaison vont vous permettre de lancer descomparaisons sous conditions.

== est quivalent ,

> suprieur , < infrieur ,

>= suprieur ou gal , = 3){//modifiez l'oprateur ci-dessus

messageTexte = La livraison est offerte.;

}

alert(messageTexte);

Les oprateurs de comparaison sont gnralement utiliss dans des

comparaisons if()

- Simple condition

Si la valeur 1 est suprieure ou gale la valeur valeur 2 alors action.

La valeur 1 sera la variable nombreCD

La valeur 2 sera la valeur que lon veut tester en rapport avec nombreCD

nombreCD = 3;

if(nombreCD >= 3){



}



16/30

- Double condition

Si la valeur 1 est suprieure ou gale la valeur valeur 2

alors action 1

sinon action 2.

La valeur 1 sera la variable nombreCD

La valeur 2 sera la valeur que lon veut tester en rapport avec nombreCD

c'est dire suprieur ou gal : >=3

nombreCD = 3;

if(nombreCD >= 3){

//alors action 1


}else{

//sinon action 2

messageTexte = La livraison est offerte partir de 3 CD.;

}




17/30

- Triple condition et plus

Si la valeur 1 est gale la valeur valeur 2alors action 1sinon si la valeur 1 est suprieure la valeur valeur 2alors action 2.sinon action 3

nombreCD = 3;

if(nombreCD == 3){

//alors action 1

messageTexte = La livraison est offerte sans bonus.;

}else if(nombreCD > 3){

//alors action 2

messageTexte = La livraison est offerte avec un bonus.;

}else{

sinon action 3

messageTexte = La livraison est offerte partir de 3 CD.;

}

//action produite quoi quil arrive...


Le dernier sinon, else{ }, si il est prsent, doit toujours fermer la condition.



18/30

Les boucles

Pour faire des sries logiques il existe des boucles qui vont vous permettre partir de quelques paramtres de produire des sries.

- La boucle for

for(conditionDpart ; conditionArrivemaxi ; conditionCalcul){utilisation de la boucle

}

ce qui donnera

ecriture = ;for(n =1 ; n


19/30

criture dans la page

Lobjet write va vous permettre dcrire directement dans le navigateur maiscontrairement ce que nous avons vu prcdemment le code va sinsrerdirectement dans la page html comme illustr dans lexemple ci-dessous.

document

document.write("Bonjour");

Ceci va produire un document html qui contiendra le texte Bonjour.Il est possible de produire du code html dans le code pour formater le texte.Le document.write devient alors:

document.write("
test");

Ce qui est habituellement entre guillemets double dans le code html est ici

remplac par un guillemet simple. Les guillemets doubles ne servent alorsqu lcriture du code.

Pour insrer des guillemets entre des guillemets il va falloir les chapper, c'est dire que le guillemet doit tre interprt comme un caractre ordinaire etpas comme une ouverture/fermeture de chane.

Le caractre d'chappement est l'anti-slash \ et est plac avant le caractre chapper.

Pour crire la phrase :Les guillemets " sont des caractres qui vont par paire.

on crira

texte = "Les guillemets \" \" sont des caractres qui vont par paire.";alert(texte);

Il existe une autre fonction d'criture qui est innerHTML(), elle est documenteplus bas dans ce document.



20/30

Fonctions et javaScript

Lcriture du code que nous avons vu ci-avant est un peu laborieuse.Il est possible de systmatiser lcriture du code grce aux fonctions.

Une fonction est dclare avec le mot-cl function

Une fonction se place en 2 paramtres :

sa crationet

son utilisation, ce que l'on nomme son appel.

Si par exemple nous devons produire une fonction de calcul nous pourrionscrire:

function calcul() {resultat=25+50;

document.write(resultat);}

//appel de la fonction dclare plus haut

calcul();

Une fonction peut tre dclare dans l'entte du document ()et appele dans le corps du document ()

exemple

function calculB() {

resultat = 5 + 50;

alert( resultat );}

calculB();



21/30

Si par exemple nous devons produire une fonction de calcul avec desparamtres nous pourrions crire:

function calcul(a,b) {resultat=a+b;

document.write(resultat);

}

Lavantage est que nous pouvons alors appeler le calcul en modifiant lesvaleurs de a et de b.

calcul(14,10);

Ce qui va donner dans le document html

titre

function calcul(a,b){

resultat=a+b;document.write("rsultat =" + resultat);

}

calcul (14,10);

Ce qui va donner rsultat= 24

Exemple : Modifiez la fonction en un convertisseur de Francs en Euros autaux de 6,55957.



22/30

Les actions du document

Dans lexemple de la page prcdente le code est insr directement dans ledocument entre les balises javaScript.Il est possible dinsrer les actions de faon diffrente dans le document.En effet des actions peuvent tre produites lors dactions prcises du

document html.

Ces actions sont des objets javaScript qui sinsrent dans la balise html

Ces actions vont se produire lorsque la balise va rencontrer laction enquestion. Les actions sont les suivantes:

onBlur Cette action va dtecter si lobjet fentre perd la slection de lobjetformulaire contenu.

onError Cette action va se produire lors dune erreur dans le document ou lorsdu chargement dune image. Cette action ne se produit que si une erreur estdtecte dans le document.

onFocus Cette action va dtecter si lobjet fentre perd le focus cest dire si lafentre active perd sa position de premier plan vis vis dune autre fentredu navigateur.

onLoad Cette action va se produire lors du chargement de la fentre dunavigateur. Cette action peut servir insrer du code dans la page maisaussi ouvrir les clbres pop-up de publicits omniprsents sur internet.

onUnload Cette action va se produire lors de la fermeture de la fentre dunavigateur. Cette action peut ouvrir une fentre la fermeture de la page.

Pour insrer le code que nous avons produit nous allons utiliser lobjetonLoad dans le marqueur body

Le marqueur body devient alors:

Vous trouverez la page complte en page suivante.



23/30

La page en chargement:

document

function navCheck(){leNavigateur="Vous visitez ce site avec
"+navigator.appName+"
sous

plate-forme "+navigator.platform+"
version"+ navigator.appVersion+" .";document.write(leNavigateur);

}

insertion de la fonction au chargement //

Pour que cette page ouvre une fentre il va falloir crer une fonction qui va secharger, non seulement de louverture mais galement de son formatage,cest dire sa taille et ses options.

Les options sont:

toolbar: Affiche ou masque la barre des outils

location: Affiche ou masque la barre dadresses

status: Affiche ou masque ltat de la page

menubar: Affiche ou masque la barre des menus du navigateur

scrollbars: Affiche ou masque les ascenseurs

resizable: Permet ou non le redimensionnement de la page.

width: Dfinit la largeur de la fentre

height: Dfinit la hauteur de la fentre

Une capture page suivante place les options dans une page html



24/30

les options dans une page html

Il est vident que pour ouvrir une autre fentre il faut avoir au moins deuxdocuments html. Le document ouvrir ici se nomme: fenetre.html et est placdans le mme dossier que le document qui contient le javaScript.

Le nom du document qui ouvre na pas dimportance.



25/30

page1

function ouvreFenetre(uneURL,nomFenetre,details) {

window.open(uneURL,nomFenetre,details);}

En ouvrant ce document dans votre navigateur web vous allez ouvrir laseconde fentre.

Pour fermer cette fentre voyez le code ci-dessous:

Fermer une fentre ouverte au-dessus dune autre

retour

function clicclose(){

clicWindow=window.close();}

Fermer cette fentre



26/30

Imprimer une page

Pour imprimer le contenu dune fentre il va galement falloir crer unefonction et lappeler dans la page.Ici cest llment print qui est utilis.On checke tout dabord si le navigateur prend en charge cette fonction et si

cest le cas on imprime. Si par contre ce nest pas le cas on en informelutilisateur par un message dalerte.

jano PrinIt

function go(){

if (window.print){window.print();}else{

alert("Votre navigateur ne prend pas cette fonction en charge");}

}

Revenir page prcdente

Le code ci-dessous vous permet de ramener votre visiteur vers la page quilaura prcdemment visite.

retour

Retour page prcdente...



27/30

Les indispensables getElement

getElementById()

Va donner accs l'lment HTML par l'attribut Id entre les parenthses

Bonjour.

test = document.getElementById("menuGauche");alert(test);

Va donner '[object HTMLDivElement]' si menuGauche a t trouv dans ledocument.C'est le type du . Les crochets indiquent un tableau.

test = document.getElementById("menuGauche").class;

alert(test);

Va donner 'uneClasse' si menuGauche a t trouv dans le document.C'est la classe du .

getElementsByName()

Va donner accs l'lment HTML par l'attribut name entre les parenthsesgetElements (ByName) avec s contrairement au getElement (ByDiv) sans s

test = document.getElementsByName("menuGauche").name;

alert(test);

Va donner 'monDivAMoi' si menuGauche a t trouv dans le document.

C'est le name du .



28/30

getElementsByTag()

Va donner accs l'lment HTML par l'attribut tag entre les parenthses

Lexemple suivant va modifier la premire balise trouve dans

le tableau des balises.

function changeLeH1(){

document.getElementsByTagName("h1")[0].firstChild.data="Chang de h1";

}

Ce titre sera remplac

modifier

Cet lment est pratique pour lister les lments d'une page html.

innerHTML

innerHTML est pratique pour afficher des messages contextuels

Dans l'exemple suivant on affiche le texteJe suis dynamiqueAu passage de la souris on inscrit Vous voyez? la sortie de la souris on afficheJe remplace le texte

Je suis dynamique

Dans l'exemple suivant on affiche la valeur de testavec une fonction ajout

test = 0;

function ajout(element){

test++; element.innerHTML= test;

}

compter



29/30

Le navigateur

Le navigateur, fureteur, browser, client est le mme logiciel sous diffrentsnoms, le nom pro est client

Javascript peut vous permettre de tester les navigateurs qu'utilisent vosvisiteurs. Il existe deux variables pour ce test : appName et userAgent

Le problme des appels de .appName est qu'ils ne sont pas fiables sur lavritable identit du navigateur qui va visiter la page.

Par exemple Opra affichera Internet explorer en .appName.

Pour rellement connatre la version du navigateur qui visite votre pageutilisez en place l'objet: userAgentuserAgent va fournir des informations sur la vritable version du navigateur

ainsi que sur son vrai nom.

//ici nous utilisons userAgentalert("Votre navigateur est "+navigator.userAgent);

//ici nous utilisons appName

alert("Votre navigateur est aussi "+navigator.appName);

Maintenant que nous avons le nom du navigateur il serait intressant de

connatre sa version.

Le mot cl navigator.appVersion va nous servir a.

Notre code devient alors:

//ici la variable version contiendra la version stocke du navigateur

version=navigator.appVersion;

//on affiche la valeur de navigateur et de version dans un message d'alert

alert("Votre navigateur est "+ navigateur +" et sa version est: " + version);

//ici nous utilisons userAgentdans une variable avec navigator.appVersion

typeNavigateur = navigator.userAgent;

version = navigator.appVersion;

alert("Votre navigateur est " + typeNavigateur +" version :"+ version );



30/30

Externaliser le script

Il est possible d'externaliser le code javascript, un peu comme pour les css,les donnes seront stockes dans un document unique auquel les pagespourront faire appel.

L'avantage tant que lors d'une modification d'un script javascript tous lesdocuments lis prendront automatiquement cette modification.

Si je cre un document monDoc.jsje vais y faire appel comme suit :

Les document en .js ne contiennent pas de dclaration de script, par exemple

monDoc.js contiendrait uniquement ceci :

typeNavigateur = navigator.userAgent;

version = navigator.appVersion;

alert("Votre navigateur est "+typeNavigateur+" version :"+ version);

Les documents HTML qui y seraient lis produiraient une alerte.Rien n'empche d'avoir la fois un document externe et du script interne maischacun aura sa propre dclaration.

alert("Pas de problme.....");

Documents

Javascript Partie1