Cours Java Script

Cours : Java Script 4 SI1
_________________________________________________________________
I. INTRODUCTION
Il y a plusieurs façons d'inclure du JavaScript dans une page HTML:
• Grâce à la balise <SCRIPT>

• En mettant le code dans un fichier
• Grâce aux événements
Dans la balise script
Dans la balise d'en-tête entre les balises <HEAD> et </HEAD ou bien dans le corps de la
page (entre les balises <BODY> et </BODY>)
<SCRIPT>
Placez ici le code de votre script
</SCRIPT>
Dans un fichier externe :
Créer un fichier externe "fichier.js" et faire la liaison grâce à la balise
<SCRIPT src ="fichier.js"> </SCRIPT> que vous devez insérer dans la partie
<HEAD></HEAD>
 C’est la méthode la plus recommandée et qu’on va adapter pour cette

année.
Grâce aux évènements
On appelle évènement une action de l'utilisateur, comme le clic d'un des boutons de la
souris. Le code dans le cas du résultat d'un événement s'écrit:
<balise eventHandler="code Javascript à insérer">
Où eventHandler représente le nom de l'événement.
II. L’écriture ou l’affichage des données :

L’écriture se fait avec l’une des trois méthodes :
• Write() de l’objet document

• Alert() de l’objet window
• La propriété innerHTML des éléments HTML.
Lycée Amal Fouchana Mme. S.Z. Amel 1

_________________________________________________________________
La méthode alert()
La méthode alert() permet d'afficher dans une boîte toute simple composée d'une
fenêtre et d'un bouton OK le texte qu'on lui fournit en paramètre.
Voici sa syntaxe:
alert(nom_de_la_variable);
alert('Chaîne de caractères');
alert('Chaîne de caractères' + nom_de_la_variable);
La méthode write
La méthode write() de l'objet document permet de modifier de façon dynamique le

contenu d'une page HTML, on peut l'utiliser de différentes façons:
• soit en passant directement le texte en paramètres:

document.write("bonjour");
qui aura pour effet de concaténer la chaîne 'bonjour' à l'endroit où est placé le script
• soit en passant le texte par l'intermédiaire d'une variable:
Chaine='bonjour';
document.write(Chaine);
qui aura pour effet de concaténer la chaîne 'bonjour' (contenue dans la
variable Chaine)à l'endroit où est placé le script
soit en utilisant les deux:

Chaine='bonjour';
document.write('je vous passe le' + Chaine);
qui aura pour effet de concaténer la chaîne 'bonjour' (contenue dans la variable Chaine)
à la suite de la chaîne de caractère 'je vous passe le' dans la page HTML
Il est ainsi possible d'utiliser des balises HTML à l'intérieur même de la méthode write:
document.write('<font color="#FF0000">Bonjour</font>');
La propriété innerHTML
Définir la valeur de innerHTML vous permet de remplacer aisément le contenu existant

d'un élément par un nouveau contenu.
Par exemple, vous pouvez effacer le contenu entier du document en effaçant le contenu
de l'attribut body du document.

_________________________________________________________________
document.body.innerHTML = "";
Ou bien
Afficher « Bonjour » dans un élément <div id="d"> du document :
document.getElementById("d").innerHTML = "bonjour";
III. La lecture des données :

Elle se fait par la méthode prompt() de l’objet window ou en utilisant les formulaires
(sera détaillée ultérieurement).
La méthode prompt()
La méthode prompt est un peu plus évoluée que les deux précédentes puisqu'elle fournit
un moyen simple de récupérer une information provenant de l'utilisateur, on parle alors
de boîte d'invite. La méthode prompt() requiert deux arguments:
• Le texte d'invite
• La chaîne de caractères par défaut dans le champ de saisie
Sa syntaxe est donc la suivante:

var reponse = prompt('Posez ici votre question','chaîne par défaut');
Cette boîte d'invite retourne la valeur de la chaîne saisie par l'utilisateur, elle retourne la
valeur null si jamais aucun texte n'est saisi.
IV. Les variables :

Le concept de variable
Une variable est un objet repéré par son nom, pouvant contenir des données, qui
pourront être modifiées lors de l'exécution du programme.
En JavaScript, les noms de variables peuvent être aussi long que l'on désire, mais doivent
répondre à certains critères:
• Un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un

"_"

_________________________________________________________________
• Un nom de variables peut comporter des lettres, des chiffres et les caractères _ et &
• Les noms de variables ne peuvent pas être des noms réservés comme : (abstract,
boolean break byte, case catch char class, default do double, else extends, false final
finally float, gotoµ, if, implements, import, in, instanceof, int, interface, long, native,
new, null, package, private, protected, public, return, short, static, super, switch,
synchronized, this, throw, throws, transient, true, try, var, void, while, with)
Nom de variable correct Nom de variable incorrect Raison

Variable Nom de Variable comporte des espaces
Nom_De_Variable 123Nom_De_Variable commence par un chiffre
nom_de_variable toto@mailcity.com caractère spécial @
nom_de_variable_123 Nom-de-variable signe - interdit
_707 transient nom réservé
Les noms de variables sont sensibles à la casse (le Javascript fait la

différence entre un nom en majuscule et un nom en minuscules.
La déclaration de variables
La déclaration des variables peut se faire de deux façons:
• soit de façon explicite, en faisant précéder la variable du mot clé var qui permet
d'indiquer de façon rigoureuse qu'il s'agit d'une variable:
Exp : var chaine= "bonjour"
• soit de façon implicite, en écrivant directement le nom de la variable suivie du
caractère = et de la valeur à affecter:
Exp : chaine= "bonjour"
Le navigateur détermine seul qu'il s'agit d'une déclaration de variable.
Portée (visibilité) des variables
Selon l'endroit où on déclare une variable, celle-ci pourra être accessible (visible) de
partout dans le script ou bien que dans une portion du code, on parle de "portée" d'une
variable.
Lorsqu'une variable est déclarée sans le mot clé var, c'est-à-dire de façon implicite,
elle est accessible de partout dans le script (n'importe quelle fonction du script peut
faire appel à cette variable). On parle alors de variable globale
Lorsque l'on déclare de façon explicite une variable en javascript (en précédant sa
déclaration avec le mot var), sa portée dépend de l'endroit où elle est déclarée.

_________________________________________________________________
• Une variable déclarée au début du script, c'est-à-dire avant toute fonction sera
globale, on pourra alors les utiliser à partir de n'importe quel endroit dans le script
• Une variable déclarée par le mot clé var dans une fonction aura une portée limitée à
cette seule fonction, c'est-à-dire qu'elle est inutilisable ailleurs, on parle alors de
variable locale
Les types de données des variables
En Javascript il n'y a pas besoin de déclarer le type de variables que l'on utilise,
contrairement à d’autres langages de programmation.
En fait le Javascript n'autorise la manipulation que de 4 types de données:
• Des nombres: entiers ou à virgule

• Des chaînes de caractères (string): une suite de caractères
• Des booléens: des variables à deux états permettant de vérifier une condition (true:
si le résultat est vrai et false : lorsque le résultat est faux)
• Des variables de type null: un mot caractèristique pour indiquer qu'il n'y a pas de
données
Nombre entier
Un nombre entier est un nombre sans virgule qui peut être exprimé dans différentes
bases:
• Base décimale: L'entier est représenté par une suite de chiffre unitaires (de 0 à 9) ne
devant pas commencer par le chiffre 0
• Base hexadécimale: L'entier est représenté par une suite d'unités (de 0 à 9 ou de A à
F (ou a à f)) devant commencer par 0x ou 0X
• Base octale: L'entier est représenté par une suite d'unités (incluant uniquement des
chiffres de 0 à 7) devant commencer par 0
Nombre à virgule (float)
Un nombre à virgule flottante est un nombre à virgule, il peut toutefois être représenté
de différentes façons:
• un entier décimal: 895

• un nombre comportant un point (et non une virgule): 845.32
• une fraction: 27/11
• un nombre exponentiel, c'est-à-dire un nombre (éventuellement à virgule) suivi de la
lettre e (ou E), puis d'un entier correspondant à la puissance de 10 (signé ou non,
c'est-à-dire précédé d'un + ou d'un -)
2.75e-2
35.8E+10
.25e-2

_________________________________________________________________
Chaîne de caractères (string)
Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. On la
représente par la suite de caractères encadrée par des guillemets simples (') ou doubles
("), sachant que les deux types de guillemets ne peuvent être mélangés pour une même
chaîne de caractères.
Remarque :
Il existe des caractères spéciaux à utiliser dans les chaînes pour simuler d'une part des
caractères non visuels ou pour éviter au navigateur de confondre les caractères d'une
chaîne avec ceux du script, ces caractères sont précédés d'un antislash (\):
• \b : touche de suppression
• \f : formulaire plein
• \n : retour à la ligne
• \r : appui sur la touche ENTREE
• \t : tabulation
• \" : guillemets doubles
• \' : guillemets simples
• \\ : caractère antislash
Ainsi, si on veut stocker la chaine suivante dans la variable Titre:

Qu'y a-t'il dans "c:\windows\"
Il faudra écrire dans le code Javascript:

Titre = "Qu'y a-t'il dans \"c:\\windows\\\"";
ou
Titre = 'Qu\'y a-t\'il dans \"c:\\windows\\\"';
Booléens (booleans)
Un booléen est une variable spécial servant à évaluer une condition, il peut donc avoir
deux valeurs:
• vrai: représenté par 1

• faux: représenté par 0
V. Le type chaine de caractère (l’objet « string ») :

Les particularités de l'objet String
String est un mot anglais qui signifie "chaîne", il s'agit en fait de chaîne de caractères.
C'est donc une suite de caractères, on la représente généralement par un ensemble de
caractères encadré par des guillemets.

_________________________________________________________________
L'objet String est un objet qui contient un certain nombre de propriétés et de méthodes
permettant la manipulation de chaînes de caractères.
Les propriétés de l'objet String
L'objet string a une seule propriété : la propriété length qui permet de retourner la
longueur d'une chaîne de caractères. Cette propriété est très utile car lorsque l'on traite
une chaîne de caractères on aime généralement savoir à quel moment s'arrêter.
La syntaxe de la propriété length est la suivante:
x = nom_de_la_chaine.length;
x = ('chaine de caracteres').length;
On peut donc directement passer la chaîne de caractères comme objet, en délimitant la

chaîne par des apostrophes et en plaçant le tout entre parenthèses.
Les méthodes de l'objet String
Les méthodes de l'objet string permettent de récupérer une portion d'une chaîne de
caractère, ou bien de la modifier.
Le tableau suivant décrit les méthodes de l'objet string.
Méthode Description
Chaine.charAt(position) Retourne le caractère situé à la position donnée en

paramètre
Retourne la position d'une sous-chaîne (lettre ou

Chaine.indexOf(sous-chaîne, groupe de lettres) dans une chaîne de caractère, en
position) effectuant la recherche de gauche à droite, à partir
de la position spécifiée en paramètre.
La méthode est similaire à indexOf(), à la différence

que la recherche se fait de droite à gauche:
Chaine.lastIndexOf(sous-chaîne, Retourne la position d'une sous-chaîne (lettre ou
position) groupe de lettres) dans une chaîne de caractère, en
effectuant la recherche de droite à gauche, à partir
de la position spécifiée en paramètre.

_________________________________________________________________
La méthode retourne la sous-chaîne (lettre ou
groupe de lettres)commençant par le caractère
Chaine.substr(position, nbr)
d’indice donné par le paramètre position et
contenant nbr caractères.
Convertit tous les caractères d'une chaîne en

Chaine.toLowerCase()
minuscule
Convertit tous les caractères d'une chaîne en

Chaine.toUpperCase()
majuscule
Supprime les espaces existant au début

Chaine.trim()
et à la fin de chaine.
Remplace dans chaine la première occurrence

Chaine.replace(ch1,ch2)
de ch1 par ch2.
Chaine.charCodeAt(p) Retourne le code du caractère à la position p.
Retourne une chaîne formée par la concaténation

String.fromCharCode(n1,…,ni)
des résultats de conversion des codes ASCII passés
en paramètres.
Exemples d'utilisation des méthodes de l'objet String :
Méthode charAt()
Il existe deux syntaxe pour la méthode charAt()
• x = "chaine de caractères";
Resultat = x.charAt(position);
Le paramètre position est un entier qui représente la position du caractère à récupérer, il

doit être compris entre 0 et n-1 (où n représente la longueur de la chaîne). Dans le cas
contraire (le paramètre position négatif ou supérieur ou égal à la
longueur) charAt() renvoie une chaîne de longueur nulle (vide).
Exemples: Chaine = 'Cours TIC'
• var Resultat = Chaine.charAt(8)

donne 'C'
• var Resultat = ("Cours TIC").charAt(9)
donne ""

_________________________________________________________________
Méthode indexOf()
La méthode indexOf() permet de rechercher (de gauche à droite) la position d'une sous-
chaîne dans une chaîne de caractères.
Chaine = "chaine de caractères";

Sous-Chaine = "sous-chaîne de caractères";
Resultat = x.indexOf(position);
La position indiquée en argument permet de déterminer la position du caractère à partir

duquel la recherche est effectuée. L'argument position doit être compris entre 0 et n-1.
Si cet argument est omis (oublié) la recherche débutera à la position 0.
Lorsque la sous chaîne n’existe pas, la méthode indexOf() renvoie la valeur -1.

Sous_Chaine = 'TIC'
• var Resultat = Chaine.indexOf(Sous_Chaine, 4)

donne '6'
• var Resultat = Chaine.indexOf(Sous_Chaine)
donne '6'
• var Resultat = Chaine.indexOf(Sous_Chaine, 7)
donne '-1'
• var Resultat = Chaine.indexOf(Sous_Chaine, -1)
donne "-1"
Méthode lastIndexOf()
La méthode lastIndexOf() permet de rechercher (de droite à gauche) la position d'une

sous-chaîne dans une chaîne de caractères.

Sous-Chaine = "sous-chaîne de caractères";
Resultat = x.lastIndexOf(position);
La position indiquée en argument permet de déterminer la position du caractère à partir

duquel la recherche est effectuée. L'argument position doit être compris entre 0 et n-1.
Si cet argument est omis (oublié) la recherche débutera à partir de la fin de la chaîne.
Lorsque la sous chaîne n’existe pas, la méthode lastIndexOf() renvoie la valeur -1.

Sous_Chaine = 'our'
• var Resultat = Chaine.lastIndexOf(Sous_Chaine, 4)

donne '-1'

_________________________________________________________________
• var Resultat = Chaine.lastIndexOf(Sous_Chaine)
donne '1'
donne '1'
donne '1'
• var Resultat = Chaine.lastIndexOf(Sous_Chaine, -1)
donne "-1"
donne "-1"
Méthode substr()
La méthode substr() permet de récupérer une sous-chaîne dans une chaîne de caractères
en précisant en paramètres la position du premier caractère et le nombre de caractères
de la sous chaîne.

Resultat = x.substr(position,nbr);
• var Resultat = Chaine.substr(1,5)

donne 'ours '
• var Resultat = Chaine.substr(6,6)
donne 'TIC'
• var Resultat = Chaine.substring(8,2)
donne 'C'
Méthodes toLowerCase() et toUpperCase()
La méthode toLowerCase() permet de convertir toutes les lettres d'une chaîne en

minuscule, les autres caractères sont laissés tels quels.
Voici quelques exemples:

Chaine = 'Cours TIC'
• var Resultat = Chaine.toLowerCase()

donne 'cours tic'
La méthode toUpperCase() permet de convertir toutes les lettres d'une chaîne en

majuscule, les autres caractères sont laissés tels quels.

_________________________________________________________________
var Resultat = Chaine.toUpperCase()
donne 'COURS TIC'
VI. Les opérateurs :

Qu'est-ce qu'un opérateur?
Les opérateurs sont des symboles qui permettent de manipuler des variables, c'est-à-
dire effectuer des opérations, les évaluer, ...
On distingue plusieurs types d'opérateurs:
• Les opérateurs de calcul

• Les opérateurs d'assignation
• Les opérateurs d'incrémentation
• Les opérateurs de comparaison
• Les opérateurs logiques
Les opérateurs de calcul
Les opérateurs de calcul permettent de modifier mathématiquement la valeur d'une

variable
Résultat (avec x
Opérateur Dénomination Effet Exemple
valant 7)
opérateur
+ Ajoute deux valeurs x+3 10
d'addition
opérateur de
- Soustrait deux valeurs x-3 4
soustraction
opérateur de
* Multiplie deux valeurs x*3 21
multiplication
opérateur de
/ Divise deux valeurs x/3 2.3333333
division
Donne le reste de la
% Modulo X%3 1
division euclidienne
opérateur Affecte une valeur à Met la valeur 3
= x=3
d'affectation une variable dans la variable x
Les opérateurs d’association
Ces opérateurs permettent de simplifier des opérations telles que ajouter une valeur
dans une variable et stocker le résultat dans la variable.
Une telle opération s'écrirait habituellement de la façon suivante par exemple: x=x+2
Avec les opérateurs d'assignation il est possible d'écrire cette opération sous la forme

_________________________________________________________________
suivante: x+=2
Ainsi, si la valeur de x était 7 avant opération, elle sera de 9 après...
Les autres opérateurs du même type sont les suivants:
Opérateur Effet
+= addition deux valeurs et stocke le résultat dans la variable (à gauche)
-= soustrait deux valeurs et stocke le résultat dans la variable
*= multiplie deux valeurs et stocke le résultat dans la variable
/= divise deux valeurs et stocke le résultat dans la variable
%= divise deux valeurs et stocke le reste dans la variable
Les opérateurs d’incrémentation
Ce type d'opérateur permet d’augmenter ou de diminuer d'une unité (1) une variable.
Ces opérateurs sont très utiles pour des structures telles que des boucles, qui ont besoin
d'un compteur.
Un opérateur de type x++ permet de remplacer des notations lourdes telles que x=x+1 ou
bien x+=1
Résultat (avec x
Opérateur Dénomination Effet Syntaxe
valant 7)
Augmente d'une unité la
++ Incrémentation x++ 8
variable
Diminue d'une unité la
-- Décrémentation x-- 6
variable
Les opérateurs de comparaison
Résultat (avec x
Opérateur Dénomination Effet Exemple
valant 7)
==
Compare deux valeurs Retourne 1 si X est
opérateur d'égalité x==3
et vérifie leur égalité égal à 3, sinon 0
Vérifie qu'une variable Retourne 1 si X est

opérateur
< est strictement x<3 inférieur à 3, sinon
d'infériorité stricte
inférieure à une valeur 0

_________________________________________________________________
opérateur
<= est inférieure ou égale x<=3 inférieur à 3, sinon
d'infériorité
à une valeur 0
Vérifie qu'une variable
Retourne 1 si X est
opérateur de est strictement
> x>3 supérieur à 3,
supériorité stricte supérieure à une
sinon 0
valeur
opérateur de
>= est supérieure ou égale x>=3 supérieur ou égal
supériorité
à une valeur à 3, sinon 0
opérateur de
!= est différente d'une x!=3 différent de 3,
différence
valeur sinon 0
Les opérateurs logiques (booléens)
Ce type d'opérateur permet de vérifier si plusieurs conditions sont vraies :
Dénominati
Opérateur Effet Syntaxe
on
Vérifie qu'une des
|| OU logique conditions est ((condition1)||(condition2))
réalisée
Vérifie que toutes
&& ET logique les conditions sont ((condition1)&&(condition2))
réalisées
Inverse l'état d'une
variable booléenne
! NON logique (retourne la valeur 1 !(condition)
si la variable vaut 0,
0 si elle vaut 1)
VII. Les structures conditionnelles :

Qu'est-ce qu'une structure conditionnelle?
On appelle structure conditionnelle les instructions qui permettent de tester si une

condition est vraie ou non, ce qui permet de donner de l'interactivité à vos scripts par
exemple.
L'instruction if

_________________________________________________________________
L'instruction if est la structure de test la plus basique, on la retrouve dans tous les
langages (avec une syntaxe différente...). Elle permet d'exécuter une série d'instruction
si jamais une condition est réalisée.
La syntaxe de cette expression est la suivante:
if (condition réalisé) {
liste d'instructions
}
Remarque :
• la condition doit être entre des parenthèses

• il est possible de définir plusieurs conditions à remplir avec les opérateurs ET et
OU (&& et ||)
par exemple:
if ((condition1)&&(condition2)) teste si les deux conditions sont vraies
if ((condition1)||(condition2)) exécutera les instructions si l'une ou l'autre des
deux conditions est vraie
• s'il n'y a qu'une instruction, les accolades ne sont pas nécessaires...
L'instruction if ... else
L'instruction if dans sa forme basique ne permet de tester qu'une condition, or la

plupart du temps on aimerait pouvoir choisir les instructions à exécuter en cas de
non réalisation de la condition...
L'expression if ... else permet d'exécuter une autre série d'instruction en cas de non-
réalisation de la condition.
La syntaxe de cette expression est la suivante :

if (condition réalisé) {
}
else {
autre série d'instructions
}
Une façon plus courte de faire un test
Il est possible de faire un test avec une structure beaucoup moins lourde grâce à la
structure suivante :
(condition) ? instruction si vrai : instruction si faux
Remarque:
• la condition doit être entre des parenthèses

_________________________________________________________________
• Lorsque la condition est vraie, l'instruction de gauche est exécutée
• Lorsque la condition est fausse, l'instruction de droite est exécutée
VIII. Les boucles :

Les boucles sont des structures qui permettent d'exécuter plusieurs fois la même série
d'instructions jusqu'à ce qu'une condition ne soit plus réalisée...
La façon la plus commune de faire une boucle, est de créer un compteur (une variable
qui s'incrémente, c'est-à-dire qui augmente de 1 à chaque tour de boucle) et de faire
arrêter la boucle lorsque le compteur dépasse une certaine valeur.
La boucle for
L'instruction for permet d'exécuter plusieurs fois la même série d'instructions.
La syntaxe de cette expression est la suivante:

for (compteur; condition; modification du compteur) {
}
Exemple:
for (i=1; i<6; i++) {
Alert(i)
}
Cette boucle affiche 5 fois la valeur de i, c'est-à-dire 1,2,3,4,5
Elle commence à i=1, vérifie que i est bien inférieur à 6, etc... jusqu'à atteindre la
valeur i=6, pour laquelle la condition ne sera plus réalisée, la boucle s'interrompra et
le programme continuera son cours.
L'instruction while
L'instruction while représente un autre moyen d'exécuter plusieurs fois la même série
d'instructions.
La syntaxe de cette expression est la suivante :

while (condition réalisée) {
}
Cette instruction exécute la liste d'instructions tant que (while est un mot anglais qui
signifie tant que) la condition est réalisée.
L'instruction do ..while
Saut inconditionnel

_________________________________________________________________
Il peut être nécessaire de faire sauter à la boucle une ou plusieurs valeurs sans pour
autant mettre fin à celle-ci.
IX. Les fonctions :

On appelle fonction un sous-programme qui permet d'effectuer un ensemble
d'instruction par simple appel de la fonction dans le corps du programme principal.
Javascript contient des fonctions prédéfinies qui peuvent s'appliquer pour un ou

plusieurs types d'objets spécifiques, on appelle ces fonctions des méthodes.
La déclaration d'une fonction
Avant d'être utilisée, une fonction doit être définie car pour l'appeler dans le corps du
programme il faut que le navigateur la connaisse.
La définition d'une fonction s'appelle "déclaration". La déclaration d'une fonction se

fait grâce au mot clé function selon la syntaxe suivante:
function Nom_De_La_Fonction(argument1, argument2, ...) {

}
Remarque:
• le nom de la fonction suit les mêmes règles que les noms de variables :
o le nom doit commencer par une lettre
o Un nom de fonction peut comporter des lettres, des chiffres et les caractères
_ et & (les espaces ne sont pas autorisés!)
o le nom de la fonction, comme celui des variables est sensible à la casse
(différenciation entre les minuscules et majuscules)
• Les arguments sont facultatifs, mais s'il n'y a pas d'arguments, les parenthèses
doivent rester présentes
• Il ne faut pas oublier de refermer les accolades
Appel de fonction
Pour exécuter une fonction, il suffit de faire appel à elle en écrivant son nom (une fois
de plus en respectant la casse) suivie d'une parenthèse ouverte (éventuellement des
arguments) puis d'une parenthèse fermée : Nom_De_La_Fonction();
Remarque:
• Le point-virgule signifie la fin d'une instruction et permet au navigateur de

distinguer les différents blocs d'instructions

_________________________________________________________________
• Si jamais ne vous avez défini des arguments dans la déclaration de la fonction, il
faudra veiller à les inclure lors de l'appel de la fonction (le même nombre
d'arguments séparés par des virgules)
X. Les formulaires:
La zone de texte :
 La zone de texte est l'élément d'entrée/sortie par excellence de Javascript.

 La syntaxe Html est <INPUT TYPE="text" id="ID" NAME="nom" …>
 Où type peut être : text/tel/number/mail/password/ range/…..
 Cet objet possède trois propriétés:
Propriété Description
Name indique le nom du contrôle par lequel on pourra accéder.
ID Indique l’identifiant de l’objet par lequel on pourra accéder.
Value Indique la valeur en cours de la zone de texte. Soit celle
tapée par l'utilisateur ou si celui-ci n'a rien tapé, la valeur
par défaut.
Lecture d’une zone de texte :
Pour récupérer une valeur d’une zone de texte, on utilise la syntaxe suivante :
Nom_var = document.getElementById("zt1").value;
La variable nom_var contient alors le contenu de la zone de texte qui a comme attribut
id = "zt1".
Ecrire une valeur dans une zone de texte :
Pour écrire ou afficher une valeur dans une zone de texte, on utilise la syntaxe suivante :
document.getElementById("zt2").value =expression ;
La zone de texte qui a comme attribut id = "zt2" va avoir la valeur de expression.
Le contrôle textarea
L'objet textarea est une zone de texte de plusieurs lignes.
La syntaxe Html est :
<FORM>
<TEXTAREA NAME="nom" ROWS=x COLS=y>

_________________________________________________________________
texte par défaut
</TEXTAREA>
</FORM>
où ROWS=x représente le nombre de lignes et COLS=y représente le nombre de

colonnes.
L'objet textarea possède plusieurs propriétés :
Name indique le nom du contrôle par lequel on pourra accéder.
Defaultvalue indique la valeur par défaut qui sera affichée dans la zone
de texte.
Value indique la valeur en cours de la zone de texte. Soit celle
tapée par l'utilisateur ou si celui-ci n'a rien tapé, la valeur
par défaut.
En Javascript, on utilisera \r\n pour passer à la ligne.

Comme par exemple dans l'expression
document.Form.Text.value = 'Check\r\nthis\r\nout'.
Remarque :
Les objets zones de texte cryptées (<INPUT type = "PASSWORD"> et zones de texte multi
lignes (<TEXTEREA>) sont traitées en javascript de la même façon que les zones de
saisie (<INPUT type = "text">).
Les boutons radio
Les boutons radio sont utilisés pour noter un choix, et seulement un seul, parmi un
ensemble de propositions.
Propriété
Name Indique le nom du contrôle. Tous les boutons portent le
même nom.
ID Indique l’identificateur du bouton radio.
Index l'index ou le rang du bouton radio en commençant par 0.
checked indique l'état en cours de l'élément radio
defaultchecked indique l'état du bouton sélectionné par défaut.
Value indique la valeur de l'élément radio.

_________________________________________________________________
Pour vérifier l’état d’une case d’option (cochée ou non), on utilise la propriété checked
qu’on peut affecter à une variable booléenne, à l’aide de la syntaxe suivante :
Nom_var = document.getElementById("r1").checked ;
On peut récupérer la valeur d’un bouton radio à l’aide de la propriété value, en utilisant
la syntaxe suivante :
Nom_var = document.getElementById("r1").value
On peut récupérer le nombre d’option dans un groupe de cases d’option à l’aide de la

propriété length, en utilisant la syntaxe suivante :
Nom_var = document.nomf.nomcase.length
Avec :
Nomf : le nom du formulaire
Nomcase : le nom du groupe cases d’options
Indice : l’indice de la case au niveau du groupe
Liste de sélection
Le contrôle liste de sélection vous permet de proposer diverses options sous la forme
d'une liste déroulante dans laquelle l'utilisateur peut cliquer pour faire son choix.
Ce choix reste alors affiché.

La boite de la liste est créé par la balise <SELECT> et les éléments de la liste par un ou
plusieurs tags <OPTION>. La balise </SELECT> termine la liste.
Name Indique le nom de la liste déroulante.
Id indique l’identifiant de la liste déroulante.
Length Indique le nombre d'éléments de la liste. S'il est indiqué
dans le tag <SELECT>, tous les éléments de la liste seront
affichés. Si vous ne l'indiquez pas un seul apparaîtra dans la
boite de la liste déroulante.
selectedIndex indique le rang à partir de 0 de l'élément de la liste qui a été
sélectionné par l'utilisateur.
Defaultselected Indique l'élément de la liste sélectionné par défaut. C'est lui
qui apparaît alors dans la petite boite.

_________________________________________________________________
En JavaScript, la gestion des listes déroulantes se fait à travers un objet options (un
tableau contenant les différents éléments de la liste). On y accède à travers la syntaxe
suivante :
Document.getElementById("liset").options
liste : l’id de la liste déroulante
Remarque :
Pour une liste déroulante à sélection multiple, selectedIndex retourne l’indice du

premier élément sélectionné.
Dans de tel cas, il sera plus judicieux d’utiliser les propriétés des éléments de l’objet
options.
Les propriétés javascript des éléments d’un objet options sont :
• Selected : renvoie true si l’option est sélectionnée, false sinon

• Text : renvoie le texte de l’élément sélectionné
• Value : renvoie la valeur de l’élément sélectionné
 L’ajout d’une nouvelle option, se fait à travers la syntaxe :
Nom_var = new Option (text, valeur) ;
Document.getElementById("liste"). options[taille] = nom_var;
Avec :
Text : le texte de l’élément à ajouter
Valeur : la valeur de l’élément à ajouter
Taille : la position de l’élément à ajouter dans la liste
 La suppression d’une option, se fait à travers la syntaxe :
Document.getElementById("liste").options[i] = null ;
Avec :
i: la position de l’élément à supprimer de la liste

_________________________________________________________________
Le contrôle Reset
Le contrôle Reset permet d'annuler les modifications apportées aux contrôles d'un
formulaire et de restaurer les valeurs par défaut.
<INPUT TYPE="reset" NAME="nom" VALUE="texte">

où VALUE donne le texte du bouton.
Une seule méthode est associée au contrôle Reset, c'est la méthode onClick().
Le contrôle Submit
Le contrôle a la tâche spécifique de transmettre toutes les informations contenues dans

le formulaire à l'URL désignée dans l'attribut ACTION du tag <FORM>.
<INPUT TYPE="submit" NAME="nom" VALUE="texte">

où VALUE donne le texte du bouton.
Une seule méthode est associée au contrôle Submit, c'est la méthode onClick().
XI. Les évènements :
Qu'appelle-t'on un événement?
Les évènements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une
interactivité.
L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère.
Grâce au Javascript il est possible d'associer des fonctions, des méthodes à des
événements tels que le passage de la souris au-dessus d'une zone, le changement d'une
valeur, ...
Ce sont les gestionnaires d'événements qui permettent d'associer une action à un

événement. La syntaxe d'un gestionnaire d'événement est la suivante: onEvenement =
"Action_Javascript_ou_Fonction();"
Liste des évènements :
Evénement
(gestionnaire Description
d'événement)
Click Se produit lorsque l'utilisateur clique sur l'élément associé à
(onClick) l'événement

_________________________________________________________________
Se produit lorsque l'utilisateur clique sur le bouton de
Submit
soumission d'un formulaire (le bouton qui permet d'envoyer le
(onSubmit)
formulaire)
Blur
Se produit lorsque l'élément associé à l'événement perd le focus
(onblur)
Input Se produit lorsque la valeur de l'élément associé à l'événement
(oninput) change
Focus Se produit lorsque l'élément associé à l'événement prend le
(onfocus) focus
Pour les méthodes de l’objet « date » et « Math » et

autres :
 Voir Annexe JavaScript

Cours Java Script

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours Java Script

Transféré par

Droits d'auteur :

Formats disponibles

Cours : Java Script 4 SI1

Il y a plusieurs façons d'inclure du JavaScript dans une page HTML:

• Grâce à la balise <SCRIPT>

Dans la balise script

Dans un fichier externe :

Créer un fichier externe "fichier.js" et faire la liaison grâce à la balise

 C’est la méthode la plus recommandée et qu’on va adapter pour cette

Grâce aux évènements

<balise eventHandler="code Javascript à insérer">

Où eventHandler représente le nom de l'événement.

II. L’écriture ou l’affichage des données :

• Write() de l’objet document

Lycée Amal Fouchana Mme. S.Z. Amel 1

La méthode write() de l'objet document permet de modifier de façon dynamique le

• soit en passant directement le texte en paramètres:

soit en utilisant les deux:

Définir la valeur de innerHTML vous permet de remplacer aisément le contenu existant

Lycée Amal Fouchana Mme. S.Z. Amel 2

Afficher « Bonjour » dans un élément <div id="d"> du document :

III. La lecture des données :

Sa syntaxe est donc la suivante:

IV. Les variables :

• Un nom de variable doit commencer par une lettre (majuscule ou minuscule) ou un

Lycée Amal Fouchana Mme. S.Z. Amel 3

Nom de variable correct Nom de variable incorrect Raison

Les noms de variables sont sensibles à la casse (le Javascript fait la

La déclaration des variables peut se faire de deux façons:

Portée (visibilité) des variables

Lycée Amal Fouchana Mme. S.Z. Amel 4

Les types de données des variables

En fait le Javascript n'autorise la manipulation que de 4 types de données:

• Des nombres: entiers ou à virgule

Nombre à virgule (float)

• un entier décimal: 895

Lycée Amal Fouchana Mme. S.Z. Amel 5

Ainsi, si on veut stocker la chaine suivante dans la variable Titre:

Il faudra écrire dans le code Javascript:

• vrai: représenté par 1

V. Le type chaine de caractère (l’objet « string ») :

Lycée Amal Fouchana Mme. S.Z. Amel 6

Les propriétés de l'objet String

On peut donc directement passer la chaîne de caractères comme objet, en délimitant la

Les méthodes de l'objet String

Le tableau suivant décrit les méthodes de l'objet string.

Chaine.charAt(position) Retourne le caractère situé à la position donnée en

Retourne la position d'une sous-chaîne (lettre ou

La méthode est similaire à indexOf(), à la différence

Lycée Amal Fouchana Mme. S.Z. Amel 7

Convertit tous les caractères d'une chaîne en

Convertit tous les caractères d'une chaîne en

Supprime les espaces existant au début

Remplace dans chaine la première occurrence

Chaine.charCodeAt(p) Retourne le code du caractère à la position p.

Retourne une chaîne formée par la concaténation

Exemples d'utilisation des méthodes de l'objet String :

Il existe deux syntaxe pour la méthode charAt()

Le paramètre position est un entier qui représente la position du caractère à récupérer, il

Exemples: Chaine = 'Cours TIC'

• var Resultat = Chaine.charAt(8)

Lycée Amal Fouchana Mme. S.Z. Amel 8

Chaine = "chaine de caractères";

La position indiquée en argument permet de déterminer la position du caractère à partir

Exemples: Chaine = 'Cours TIC'