Cours Javascript pdf gratuit

Informatique

_{5 janv. 11}

IRIS 1

Module : Développement logiciel - environnement Internet

JavaScript

Pré-requis :
Langage HTML

Feuilles de style CSS

I - INTRODUCTION ...2

I.1 - CARACTERISTIQUES DU JAVASCRIPT...2

I.2 - NOTION DE SCRIPT...2

I.3 - NOTION D’ « OBJET » ...3

I.3.1 - hiérarchie des objets ...3

I.3.2 - les propriétés d’un objet ...4

II - DECLARATION D’UN SCRIPT ...4

II.1 - A L’INTERIEUR D’UNE BALISE...4

II.2 - ENTRE LES BALISES <SCRIPT> ET </SCRIPT>...5

II.3 - DANS UN FICHIER EXTERNE...5

III - SYNTAXE DU JAVASCRIPT ...6

III.1 - DECLARATION ET INSTRUCTIONS...6

III.2 - STRUCTURES :...6

III.2.1 - alternative : ...6

III.2.2 - boucles : ...6

III.2.3 - Switch ...7

III.3 - CHAINE DE CARACTERES : ...7

III.3.1 - Pourquoi deux types de guillemets ? ...7

III.3.2 - Caractères spéciaux : ...7

III.3.3 - La concaténation :...8

III.3.4 - demander une chaine de caractère à l’utilisateur : ...8

III.4 - OPERATION SUR DES NOMBRES...8

III.5 - CONVERSION DE TYPE...9

III.5.1 - chaine de caractères vers un nombre...9

III.5.1 - nombre vers une chaine de caractères ...9

III.1 - LES EVENEMENTS...10

III.1 - LES OBJETS...11

III.1.1 - L'objet « window.document » ...11

III.2 - LES FONCTIONS...11

IV - APPLICATIONS : ...14

IV.1 - CALCULATRICE...14

IV.2 - « JEU DU PLUS OU MOINS » ...15

IV.2.1 - Règle du jeu ...15

I - Introduction

Le JavaScript est un langage orienté objet, interprété par le navigateur (comme le langage HTML). Il s’agit d’un langage « client », c'est-à-dire exécuté chez l'utilisateur lorsque la page Web est chargée. Il a pour but de dynamiser les sites Internet, en améliorant la présentation et l'interactivité des pages Web. Il existe bien d’autres solutions : animation Flash, script CGI, applet java…

NB : Il est important de noter que JavaScript est totalement différent de Java. Bien que les deux soient

utilisés pour créer des pages Web évoluées, et que les deux reprennent le terme Java (café en américain), nous avons là deux outils différents :

JavaScript Java

Code intégré dans la page HTML Module (applet) distinct de la page HTML Code interprété par le navigateur au

moment de l'exécution

Code source compilé avant son exécution Codes de programmation simples mais pour

des applications limitées

Langage de programmation beaucoup plus complexe mais plus performant

Permet d'accéder aux objets du navigateur N'accède pas aux objets du navigateur Confidentialité des codes nulle (code source

Visible)

Sécurité (code source compilé)

I.1 - Caractéristiques du JavaScript

Voici un petit résumé de ce que l'on peut dire à propos des caractéristiques du JavaScript :  C'est un script,

 C'est un langage orienté objet,  Le code n'est pas compilé :

 il est donc plus rapide à produire (pas besoin de compilateur),  mais il est moins puissant qu'un programme en C par exemple,

 et relativement limité : il se limite plus ou moins à la page web sur laquelle il se trouve. Il ne permet donc pas de faire des choses comme manipuler des fichiers sur votre disque dur ; seulement des choses assez simples.

 Il est exécuté par le navigateur du visiteur (le client),

 Il est déterminé par une norme, nommée ECMA-262 ou ECMAScript. De la même manière que le se charge de définir clairement le HTML, le JavaScript (JS) possède une norme qui fixe également des lois et des limites pour celui-ci, rendant ainsi ce langage plus

"officiel". Il y a cependant pour le JS quelques différences d'un navigateur à l'autre (des fonctions de l'un qui ne marchent pas sur l'autre, ...), mais cela n'a pas beaucoup de conséquences.

I.2 - Notion de Script

un script est, par opposition à un langage compilé, un langage qui s'interprète. Ici, l'interprète du JavaScript, c'est le navigateur du visiteur (le client).

I.3 - Notion d’ « Objet » JavaScript est un « langage objet » :

C’est-à-dire qu’il va diviser une page web en éléments : objets. Et va nous permettre d’accéder à ces objets, d’en retirer des informations et de les manipuler.

chaque objet possède :

 des méthodes (ou fonctions),  des propriétés

 et .... des objets.

 Dans une page Web, l'objet le plus élevé dans la hiérarchie est la fenêtre du navigateur : window. Cet objet window contient entre autre l'objet document qui lui même contient tous les objets contenus dans la page Web (paragraphes, formulaires,...). En plus de ces objets, il existe des objets créés par l'utilisateur.

 Les méthodes sont des fonctions qui permettent d'agir sur certaines propriétés de l'objet.  Les propriétés contiennent les paramètres d'un objet.

Exemple : un objet voiture, on peut lui attribuer :

o des propriétés : la couleur, la marque, le numéro d'immatriculation…

o des méthodes : tourner(), avancer(), reculer(), changer la couleur()…

o des objets : les phares, les pneus…

I.3.1 -hiérarchie des objets

Soit la page web suivante :

 Cette page s'affiche dans une fenêtre : c'est l'objet « window » (fenêtre).  Dans cette fenêtre, il y a un document HTML : c'est l'objet « document ».



 Dans ce document, on trouve un formulaire au sens HTML : c'est l'objet « form ».



 Dans ce formulaire, on trouve différents objets : des boutons radio, des boutons checkbox, des zones de texte. Ce sont respectivement l'objet radio, l'objet bouton, l'objet texte.



Pour accéder à un objet, il faudra donner le chemin complet de l'objet en allant du contenant le plus extérieur à l'objet jusqu'à l'objet référencé. Soit par exemple pour le bouton radio "masculin" :

window.document.forms[0].radio[0]

NB : étant donné que l'objet window occupe la première place dans la hiérarchie, il est repris par défaut

par JavaScript et devient donc facultatif.

I.3.2 -les propriétés d’un objet

Une propriété d’un objet est un attribut, une caractéristique, une description de l'objet.

Exemple : l'objet livre a comme propriétés son auteur, sa maison d'édition, son titre, son numéro ISBN, etc…

Dans le cas des boutons radio, une de ses propriétés est, par exemple, sa sélection ou sa non-sélection (checked en anglais).

En JavaScript, l'accès à une méthode ou à une propriété d'un objet se fait en plaçant un point entre le nom de l'objet et la propriété ou la méthode :

nom_de_l'objet.nom_de_la_propriété

Les méthodes ainsi que les propriétés d'un objet commencent par une minuscule. Toutes les méthodes internes à JavaScript sont sensibles à la casse :

o exemple de méthodes : toLowerCase() ; getElementById() ; charAt() ; fromCharCode() ; etc.

o exemple de propriétés : id ; type ; innerHTML ; tagName ; style ; value ; checked; etc.

Dans le cas du bouton radio "masculin", pour tester la propriété de sélection, on écrira : document.forms[0].radio[0].checked

II - déclaration d’un script

II.1 - à l’intérieur d’une balise

La première méthode consiste à écrire le code directement à l'intérieur de la balise qui va être concernée par le script.

Pour insérer le code dans une balise, un nouvel attribut est ajouté à la balise. Il s'agit du gestionnaire d'événements (en anglais : event handler).

o href="#" : informe le navigateur qu’il n’y a pas de saut vers une autre page. o Onclick : événement clique sur le bouton gauche de la souris, du gestionnaire

d’évènements.

o alert('Bonjour !') : ouvre une fenêtre de dialogue et qui affiche le texte ‘Bonjour’.

1. Copier le répertoire « » dans votre répertoire personnel H:\JavaScript.

2. Créer un fichier HTML dont le corps sera composé du code suivant :

<a href="#" onmouseover="img1.src='fleche2.gif'" onmouseout="img1.src='fleche1.gif'"> <img name="img1" border="0" src="fleche1.gif" alt="" />

</a>

3. Décrire et justifier le comportement du script.

1/ A l’ouverture de la page, l’image « fleche1.gif » est chargée.

2/ Lors du passage de la souris sur l’image, l’image est remplacée par « fleche2.gif » 3/ Lors du retrait de la souris, l’image revient à « fleche1.gif »

II.2 - entre les balises <script> et </script> syntaxe :

<script type="text/javascript">

/* code javascript :

Ceci permet de définir plusieurs scripts */

</script>

On peut placer les balises <script> ... </script> :

 soit dans le corps de la page (<body> ... </body>) : scripts à exécuter au chargement de cette

dernière (lorsque le navigateur "lira" le code, il l'exécutera en même temps).

 soit dans l'en-tête (<head> ... </head>) : scripts qui doivent être exécutés plus tard (lors d'un

événement particulier, par exemple).

II.3 - dans un fichier externe

Comme pour les feuilles de style CSS, on peut placer le code JavaScript dans un fichier indépendant dont l’extension sera « *.js ».

L’attribut src est ajouté à la balise <script> afin de spécifier le nom et l’emplacement du fichier

contenant le code JavaScript :

<script type="text/javascript" src="script.js"></script>

III - syntaxe du JavaScript

NB : Le JavaScript est sensible à la casse : il fait la différence entre lettres majuscules et minuscules.

III.1 - Déclaration et instructions

o Comme pour un programme en langage C, les instructions sont séparées par un point-virgule (;).

o Déclaration des fonctions : function Ma_fonction(arguments) {

}

o Déclaration des variables quelque soit le type : var Ma_variable ;

NB : il est à noter que nous utilisons une mémoire temporaire : les variables sont détruites lorsque le

visiteur quitte la page.

o Ajout de commentaires :

sur 1 ligne : // commentaire

sur plusieurs lignes : /* commentaire sur plusieurs lignes */

o Boite de dialogue :

 Message à l’attention de l’utilisateur :

alert(‘texte à afficher’) ;

 Attente d’une réponse de l’utilisateur qui sera stockée dans la variable x :

var x = prompt("Texte d'invite");

III.2 - Structures : III.2.1 -alternative : if (condition) { instructions… } else { instructions… }

NB : le « else » est facultatif.

III.2.2 -boucles :

While Do … while For

while(condition) { instructions… } do { instructions… } while(condition);

for(initialisation ; condition ; incrementation) {

instructions…

III.2.3 -Switch switch(variable) { case valeur1: { instructions… } break; case valeur2: { instructions… break; default: { instructions… } }

III.3 - Chaîne de caractères :

Pour affecter une chaine de caractères à une variable, on utilise indifféremment :  les guillemets " (dites « double quotes »)

 ou les apostrophes ' (dites « simple quotes »)

III.3.1 -Pourquoi deux types de guillemets ?

Etant donné que le JavaScript peut être placé directement dans une balise HTML et que les doubles-quotes sont déjà utilisés pour l’affectation des valeurs aux attributs, on utilise donc les simple doubles-quotes.

III.3.2 -Caractères spéciaux :

Pour spécifier un caractère spécial dans une chaîne de caractères, on utilise un caractère d’échappement : \ (antislash).

Exemple :

var message1 = "Ceci est un \"petit\" test : il faut mettre un antislash \\ devant les guillemets." ;

var message2 = 'Un autre "petit" test. Cette fois, il n’y a pas besoin de l\'antislash devant les guillemets." ;

alert(message1); alert(message2);

On peut également insérer des retours à la ligne, ainsi que des tabulations ou autres. Voici les caractères spéciaux les plus courants :

 \n : insère un retour à la ligne.

 \t : insère une tabulation.

 \b : insère un backspace.

 \uXXXX : insère le caractère dont la valeur unicode est XXXX (cette valeur est un nombre en

III.3.3 -La concaténation :

On utilise simplement le symbole de concaténation « + » entre chaque morceau de phrase : var date = "1er décembre 2010";

alert("nous sommes le : " + date);

III.3.4 -demander une chaine de caractère à l’utilisateur :

var x = prompt("Texte d'invite");

Entre les parenthèses, on met une chaîne de caractères (comme pour alert()) qui sera affichée au-dessus

du champ pour saisir son texte. On récupère la chaîne de caractères dans la variable x.

1. écrire un fichier HTML permettant de demander l'âge du visiteur (via des boites de dialogue) pour le lui afficher ensuite (dans la phrase : « vous avez … ans »).

var age = prompt("Quel âge avez-vous ? (en années)"); // on demande l'age alert("Vous avez " + age + " ans"); // on affiche la phrase

III.4 - opération sur des nombres

Opérateur Nom Exemple

+ Addition 52 + 19 = 71

– Soustraction 52 - 19 = 33

* multiplication 5 * 19 = 95

/ division 5 / 3 = 1,666...667

% Modulo

a % b est le reste de la division de a par b.

52 % 19 = 14 (car 52 = 19*2 + 14)

++ Incrémentation de 1 a++ (

_

-- Décrémentation de 1 a-- (

_

= Affectation d’une valeur à une variable a = 10 ; == Egal à

renvoi une valeur binaire true ou false. if (a == 10) …

!= Non égal à if (a != 10) …

< Inférieur à

<= Inférieur ou égal à

> Supérieur à

>= Supérieur ou égal à

&& ET logique if ( (a==2) && (b<10) ) …

|| OU logique (touches Alt Gr + 6.) if ( (a==2) || (b<10) ) …

! NON logique var mineur = !(age >= 18);

2. écrire un fichier HTML permettant de demander 2 nombres à l’utilisateur et qui en affiche de quotient.

// on demande les nombres

var nombre1 = prompt('Premier nombre ?'); var nombre2 = prompt('Deuxieme nombre ?'); // on calcule le quotient et on l'affiche

var resultat = nombre1 / nombre2;

3. saisir un dénominateur nul et indiquer le résultat : Infinity :

4. saisir un mot à la place du numérateur et indiquer le résultat : NaN (Not a Number) :

5. modifier le programme afin de faire l’addition des 2 nombres et indiquer le résultat : 12 + 8 = concaténation des 2 champs c’est-à-dire 128 :

 

 il faut donc utiliser un convertisseur de type de variable…

III.5 - conversion de type

III.5.1 -chaine de caractères vers un nombre

2 fonctions sont à disposition :

 parseInt(chaine_a_convertir) : conversion d’une chaine de

caractères en un nombre entier,

 parseFloat (chaine_a_convertir) : conversion d’une chaine de

caractères en un nombre décimal. Quelques exemples de ces fonctions :

résultat

x = parseInt("12.9 Euros") x = 12

x = parseInt(" 12 Euros ") _{x = 12 (l'espace en début de chaîne est ignoré)} x = parseInt("J'ai 12 Euros") _{x = NaN (la chaîne commence par une lettre)} x = parseFloat(" 12.9 Euros ") _{x = 12.9}

III.5.1 -nombre vers une chaine de caractères

Cette conversion se fait automatiquement seulement vous avez besoin d'effectuer manuellement cette conversion, il faut ajouter des simples quotes ( ' ' ) ; en ajoutant une chaîne entre ces nombres, l'ordinateur sera forcé de les concaténer.

III.1 - les évènements

Le gestionnaire d’évènements associe une action à un événement, avec la syntaxe :

onévénement="fonction()"

Exemple : onclick="alert('Vous avez cliqué sur cet élément')"



ouvrir une boîte d'alerte avec le message indiqué. Liste des évènements :

Evénement Survient

onload après le chargement de la page

onunload _{lors de la fermeture de la page} onbeforeunload juste avant la fermeture de la fenêtre

onclick _{l'événement survient lors d'un clic sur le bouton gauche} ondblclick _{double-clique sur le bouton gauche}

onmousedown quand on enfonce le bouton de la souris

onmouseup _{quand on relâche le bouton de la souris}

onmousemove _{lorsque la souris se déplace dans un objet du document} onmouseover au passage de la souris

onmouseout lorsque la souris "sort" de cet élément (en quelque sorte, le

contraire de onmouseover).

onkeydown _{quand on enfonce une touche du clavier} onkeyup quand on relâche la touche

onkeypressed quand on enfonce une touche du clavier (équivalent à

onkeydown())

onfocus _{quand l'élément a le focus} onblur quand l'élément perd le focus

onchange _{quand l'élément perd le focus et que son contenu a changé} onsubmit _{juste avant l'envoi d'un formulaire}

onreset _{lors de la réinitialisation du formulaire}

onselect _{quand le contenu d'un élément est sélectionné}

onscroll lors de l'utilisation de la barre de défilement (l'événement

onscroll ne fonctionne pas sur les balises <textarea>)

oncopy _{lors de la copie vers le presse-papier} onpaste _{lors du coller depuis le presse-papier}

III.1 - les Objets

Les objets internes JavaScript commencent par une majuscule : String, Math, Array, Boolean, Date,

Number, Function (à ne pas confondre avec le mot-clef « function »), RegExp, etc...

III.1.1 -L'objet « window.document »

L'objet document regroupe toutes les méthodes de gestion de la page Web. Ses fonctions permettent de cibler un objet (un paragraphe par exemple) pour modifier ses attributs.

Pour modifier les attributs d'un élément (paragraphe, lien, etc...), celui-ci doit être au préalable identifié par un identifiant unique (attribut id). L'objet est ensuite ciblé grâce à la méthode getElementById()

contenue dans l'objet document (si l'élément possédant cet id n'existe pas la méthode renvoie null)

Utilisation avec JavaScript, des objets contenus dans le document :

//objet contient toutes les propriétés de idElement

var monElement = document.getElementById("idElement") ; //pour modifier la taille de la police

monElement.style.fontSize = "12px"; //pour modifier la police

monElement.style.fontFamily = "Arial";

//pour modifier le contenu du paragraphe (balises div, span, p…) monElement.innerHTML = "Salut tout le monde !!";

NB : l’élément aura été identifié dans le corps du fichier avec l’attribut id :

<p id="idElement"></p>

III.2 - Les fonctions

La déclaration d’une fonction se fait à l’intérieur des balises <script> ... </script> qui doivent être

placée entre les balises <head> ... </head> :

function Ma_fonction(argument) { …

}

 Fonction nécessitant plusieurs arguments : ces derniers sont séparés par une virgule :

function Ma_fonction(argument1, argument2, argument3) { …

}

 Fonction devant renvoyer un résultat : il faut placer l’instruction return :

function carre(NB) { var resultat ;

resultat = NB * NB ; return resultat ; }

6. Ecrire un fichier HMTL contenant une fonction « convertir() » (sans argument) :

 demander une valeur en euros à l'utilisateur :

 la convertir en francs (pour rappel, 1 Euro = 6,55957 Frs).

 afficher le résultat (sur deux lignes, une en euros, l'autre en francs) :

NB :

- la communication avec l’utilisateur se fera par des boites de dialogue.

- on utilisera le code suivant pour appeler convertir() :

<a href="#" onclick="convertir()">cliquer ici</a>

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN” ”http://www.w3.org/TR/REC-html40/loose.dtd”>

<html> <head>

<title>Convertisseur Euros > Francs</title> <script type="text/javascript">

function convertir()

{ var somme = prompt("Entrez la valeur en Euros :"); var resultat = somme * 6.55957;

alert("la somme de : " + somme + "E\n vaut : " + resultat + " Frs"); }

</script> </head> <body>

<a href="#" onclick='convertir()'>cliquer ici</a> </body>

</html>

7. modifier votre fichier afin que la fonction soit appelée lors du clique sur l’image (située dans K:\SERIS1\JavaScript\).

<img src="EuroFranc.png" alt="" onClick="convertir();" />

8. réaliser une fonction générique permettant de faire la conversion :  soit d’Euros en Francs,

 soit de mètre en centimètre.

La fonction sera définie telle que : « convertir(taux) », la variable taux correspondant au taux

de conversion choisi par l’utilisateur.  Valeur de l’argument « taux » :

taux = d’Euros vers Francs 6.55957 de mètres vers centimètres 100

 modifier votre fichier afin de mettre à jour la déclaration de la fonction et les appels de cette dernière (la conversion des mètres se fera par un lien hypertexte) :

NB : dans un premier temps, on demande de ne pas spécifier les unités dans la fenêtre de résultat.

9. Compléter votre fichier HTML, afin de passer 3 arguments à la fonction : - L’unité de la valeur de départ : unit1,

- Le taux de conversion : taux,

- L’unité de la valeur calculée : unit2.

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN” ”http://www.w3.org/TR/REC-html40/loose.dtd”>

<html> <head>

<title>Convertisseur Euros > Francs</title>

<script type="text/javascript">

function convertir(unit1, taux, unit2) {

var somme = prompt("Entrez la valeur en Euros :"); var resultat = somme * taux;

alert("la valeur : " + somme + " " + unit1 + "\n vaut : " + resultat + " " + unit2);

} </script> </head>

<body>

<img src="EuroFranc.png" onclick="convertir('Euros', 6.55957, 'Francs')" /> <br />

<a href="#" onclick="convertir('mètre', 100, 'cm')">conversion de mètres vers centimètres</a>

</body> </html>

10. Lors de la saisie de la valeur par l’utilisateur, ajouter un test en utilisant la fonction « isNaN(variable_a_tester) »

IV - Applications :

IV.1 - Calculatrice

Après saisie de 2 nombres réels, l’utilisateur choisi l’opération à exécuter. Le résultat s’affiche dans la zone de texte « Résultat » (en ‘lecture seule’).

Les scripts JavaScript seront placés dans un fichier externe

IV.2 - « jeu du plus ou moins »

IV.2.1 -Règle du jeu

L'ordinateur choisit un nombre au hasard compris entre 1 et 100, puis le but est de deviner ce nombre. À chaque fois qu'on propose un nombre, on indique à l’utilisateur si le nombre à deviner est plus petit ou plus grand que celui-ci.

Le jeu se déroule donc ainsi : o choix d'un nombre aléatoire

o on demande des nombres, et on indique si le nombre à trouver est plus grand ou plus petit que ceux proposés o quand l'utilisateur a gagné, on affiche le nombre de

coups qu'il lui a fallu.

IV.2.2 -Mise en œuvre

Afin de générer un nombre aléatoire compris entre une valeur min et une valeur max, on utilisera la fonction :

function nb_aleatoire(min, max) {

var nb = min + (max-min+1)* Math.random(); return Math.floor(nb);

}

- Les scripts seront placés dans un fichier externe « jeu.js ».

- Un fichier « aide.htm » d’aide sera crée et accessible par un lien hypertexte ; ce dernier reprendra le contenu du paragraphe « règle du jeu »

- Le tirage au sort d’un nombre aléatoire se fera à l’ouverture de la page web.

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.0 Transitional//EN” ”http://www.w3.org/TR/REC-html40/loose.dtd”> <html>

<head>

<title>Jeu du plus ou moins</title> <script type="text/javascript">

function nb_aleatoire(min, max)

{ var nb = min + (max-min+1)*Math.random(); return Math.floor(nb); } </script> </head> <body> <script type="text/javascript">

var nb = nb_aleatoire(1, 100); // nb a deviner var cpt = 0; // nb de coups

var saisie;

var msg = 'Le nombre à deviner est compris entre 1 et 100.'; do

{

saisie = prompt(msg); cpt++;

// message a afficher au prochain tour : if(saisie > nb) msg = "C'est moins"; else msg = "C'est plus"; } while(saisie != nb);

alert("Bravo, tu as gagne en " + cpt + " coups !"); </script>

</body> </html>