Cours 4 Javascript

Université Moulay Ismail Année universitaire : 2019/2020
Faculté des Sciences et Techniques Filière Génie Logiciel : I616

Département d’Informatique Prof Y.FARHAOUI
Errachidia
Programmation Web
JavaScript
17-Mar-20 Cours JavaScript 1

Généralités(1/2)
Qu’est-ce que c’est le javascript ?
Javascript est un langage de programmation très récent, créé par les sociétés Netscape
et Sun Microsystems vers la fin de l'année 1995.Son objectif principal est d’introduire
de l'interactivité avec les pages HTML et effectuer des traitements simples sur le poste
de travail de l'utilisateur.
Les scripts vont permettre de rendre une page Web plus dynamique.
• En animant certaines zones de la page,
• Ou en faisant réagir certains élément de la page en fonction de certains
événements provoqués par l’utilisateur, ou du navigateur utilisé,… (exemple : sur
clic de la souris, changer la couleur du texte,…)
Généralités(2/2)
JavaScript est un langage
Langage de programmation lié à HTML.
Code JavaScript intégré aux pages HTML.
Code interprété par le navigateur client (interprétation dépendante du type et de la

version de navigateur).
≠ code PHP (interprété du coté serveur).
événementiel (association d’actions aux événements déclenchés par l’utilisateur

(passage de souris, clic, saisie clavier, etc...).
Le JavaScript est écrit directement au sein du document HTML sous forme d'un
script encadré par des balises HTML spéciales.

HTML et JavaScript(1/3)
• la page HTML devra TOUJOURS contenir les deux balises spécifiques et
indispensables
<script language="JavaScript">
............
</script>
• Le code JavaScript s’intègre de deux manière avec le code HTML
– 1. Insertion directe dans le code HTML
• Le code JavaScript s'insère le plus souvent dans la page HTML elle même.
• C'est la méthode la plus simple et la plus fréquemment utilisée par les
développeurs de sites Internet.
– 2. Insertion comme un module externe

1. Insertion dans une page HTML
• Il existe 2 manières d'insérer du code JavaScript dans une page HTML
– Insertion pour exécution directe

• Le code s'exécute automatiquement <html>
lors du chargement de la page HTML <head>
dans le navigateur en même temps que <title>..... </title>
</head>
le contenu de la page HTML
<body>
s'affiche à l'écran. <script
language="JavaScript">
• Le code JavaScript est placé alert(‘bonjour’);
</script>
dans le corps même de la page HTML,
</body>
entre les balises <head> .......... Et
......... </head> </html>

2. Insertion par appel de module externe
On peut insérer du code JavaScript en faisant appel à un module externe se trouvant à
n’importe quelle adresse (URI).
<script src="URL du module externe">
............
</script>
– Les deux balises de Javascript doivent être placés entre les Tags <body> et </body>
dans le cas d'une exécution directe ou entre les Tags <head> et </head> de la page
HTML pour une exécution différée.
– Stocké dans un fichier sur le serveur à son adresse d'appel sous forme de TEXTE
SIMPLE portant l'extension .js
– Simplifie la maintenance des sites faisant appel à des modules JavaScript communs à
plusieurs pages HTML.
Entrée et sortie de données avec JavaScript
• 3 types de boites de messages peuvent être affichés en utilisant
Javascript : Alerte, Confirmation et Invite
– Méthode alert() alert('Attention!!.');
• sert à afficher à l’utilisateur des informations simples de type texte. Une fois que ce
dernier a lu le message, il doit cliquer sur OK pour faire disparaître la boîte
– Méthode confirm()
confirm('voulez vous continuer ?');
• permet à l’utilisateur de choisir entre les boutons OK et Annuler.
– Méthode prompt()
• La méthode prompt() permet à l’utilisateur de taper son propre message en réponse à la
question posée
prompt("vous-avez compris javascript ?" ,"oui" );
• La méthode document.write permet d ’écrire du code HTML dans la

page WEB
Entrée et sortie de données avec JavaScript
<html>
<head>
<title> une page simple </title>
</head>
<body>
Bonjour
<script language='javascript'>
alert('bonjour');
document.write (
prompt('quel est votre nom ?','Indiquer votre
nom ici')
);
confirm('quel bouton allez-vous choisir ?');
</script>
</body>
</html>
La structure d’un script en JavaScript
• La syntaxe du langage Javascript s'appuie sur le modèle de Java et C
• Règles générales
• Chaque commande doit être terminée par un point-virgule (;).
• Un nombre à virgule est séparé par un point (.) et non par une virgule
• Le langage Javascript y est sensible à la casse
• Il existe deux méthodes permettant d'intégrer des commentaires à vos scripts.
– Placer un double slash (//) devant le texte
– Encadrer le texte par un slash suivi d'une étoile (/*) et la même séquence
inversée (*/)

Les variables (1/4)
• Déclaration et affectation
• Le mot-clé var permet de déclarer une ou //Déclaration de i, de j et de k.
var i, j, k;
plusieurs variables.
//Affectation de i.
• Après la déclaration de la variable, il est
i = 1;
possible de lui affecter une valeur par
//Déclaration et affectation de prix.
l'intermédiaire du signe d'égalité (=).
var prix = 0;
• Si une valeur est affectée à une variable
sans que cette dernière ne soit déclarée,
alors Javascript la déclare
automatiquement.

Les variables (2/4)
• Déclaration et affectation
– La lecture d'une variable non déclarée provoque une erreur
• La portée
– les variables peuvent être globales ou locales.
– Une variable globale est déclarée en début de script et est
accessible à n'importe quel endroit du programme.
– Une variable locale est déclarée à l'intérieur d'une fonction et n'est
utilisable que dans la fonction elle-même.

Les variables (3/4)
• Contraintes concernant les noms de variables

– Les noms de variables ne peuvent contenir que des lettres, chiffres,
ou le caractère "_" (underscore)
– Mon_Prenom est un nom valide
– Les caractères spéciaux et accentués sont interdits (é, à, ç, ï, etc..)

– Mon_Prénom n'est pas un nom valide. Il y a un caractère accentué.
– Les majuscules et les minuscules ont leur importance.

– MonPrenom est différent de Monprenom.
– Un nom de variable ne peut contenir d'espaces.

– Mon Prenom n'est pas un nom de variable correct. Il y a un espace.
– Les mots réservés JavaScript ne peuvent être utilisés comme noms

de variable.

Les variables (4/4)
• Le type d’une variable dépend de la valeur stockée dans cette variable. Pas de déclaration de
type.
• Exemple
var maVariable = ‘ génie logiciel ’;
maVariable =10;
• Trois principaux types de valeurs
• String
• Number : 10^-308 >nombre < 10^308
» Les nombres entiers
» les nombres décimaux en virgule flottant
• Boolean
– deux valeurs littérales : true (vrai) et false (faux).

Les opérateurs en JavaScript sont les même qu’en langage C
( + - * / % < > <= >= == != ++ -- += -= *= /= ( ) && || )
Caractère Description
\b Un caractère en arrière
\f Saut de page
\n Saut de ligne
\r Retour chariot
\t Tabulation
\' Apostrophe ou guillemet simple
\" Guillemet double
\\ Backslash (\)

Création de structures de contrôle
On appelle structure de contrôle ou 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 :
Exemple
en exécutant une série d’instructions propre à une condition

donnée.

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 la
condition IF est réalisée.
• La syntaxe de cette expression est la suivante:
if (condition réalisée est vraie)

{
// liste d'instructions ;
}
Remarques:
• la condition doit être entre des parenthèses ;
• il est possible de définir plusieurs conditions à remplir avec les opérateurs ET, OU,
NOT … (&&, ||, ! …), 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.
Exemples :
1. if ( (x==1) && (y==3) )

{
somme= x+y ;
difference= x-y ;
}
2. if ( (x==1) && (y==3) ) somme= x+y;
3. if ( somme==0 )
{
somme= x+y ;
}
else
{
total += somme ;
}

L’instruction : « if … else … »
• La syntaxe complète de cette expression est la suivante:
if (condition_vraie)
{
// série d'instructions ;
}
else
{
// autre série d'instructions ;
}

L’instruction : « switch »
• L'instruction switch représente un autre moyen d'exécuter des instructions spécifiques aux
valeurs que peut prendre une variable.
1. switch (n)
2. {
case 1:
3. // liste d'instructions pour n==1;
break;
4. case 2:
5. // liste d'instructions pour n==2;
break;
6. …
7. default:
8. // liste d'instructions pour échec sur n;
break;
9. }

Exemples
1. question= rand(1,5);
2. switch (question)
3. {
4. case 1:
5. if (reponse==b) alert(‘réponse correcte’);
6. else alert(‘réponse incorrecte’);
7. break;
8. case 2:
9. if (reponse==d) alert(‘réponse correcte’);
11. break;
12. case 3:
13. if (reponse==a) alert(‘réponse correcte’);
15. break;
16. …
17. }

L’instruction de la boucle : « for »
• L'instruction for permet d'exécuter plusieurs fois la même série d'instructions: c'est une boucle !
• Dans sa syntaxe, il suffit de préciser :

– le nom de la variable qui sert de compteur (et éventuellement sa valeur de départ,
– la condition sur la variable pour laquelle la boucle s'arrête (basiquement une condition qui
teste si la valeur du compteur dépasse une limite)
et enfin
– une instruction qui incrémente (ou décrémente) le compteur.
for (compteur; condition; modification du compteur)

{
}

Exemples :
1.
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.
2.
var x;
for (x=1; x<= 10; x+=2)
{
alert(x) ;
}
L’instruction d’itération : « while »
• L'instruction while représente un autre moyen d'exécuter plusieurs fois la même série
d'instructions.
while (condition réalisée)

{
}
• Cette instruction exécute la liste d'instructions tant que la condition est réalisée (while est un
mot anglais qui signifie tant que).
Remarques:
• La condition de sortie pouvant être n'importe quelle structure conditionnelle, les risques de
boucle infinie (boucle dont la condition est toujours vraie) sont grands, c'est-à-dire qu'elle
risque de provoquer un plantage du navigateur!

Exemples :
1.
var x=1 , a=1 ;
while (x<=10)
{
if (x == 7)
{
alert('division par 0');
x++;
}
a = 1/(x-7);
alert(a);
x++ ;
}
2.
For (x=1; x<=10; x++)
{
if (x==7) x++;
a= 1/(x-7);
}

Exercice d'application 1:
Écrire une page ex1.html. Lorsque cette page se charge, une boite de dialogue de type « prompt »
s’ouvre pour demander à l’utilisateur de choisir la couleur de fond. Le texte de la boite de dialogue
propose trois choix (gris, bleu, vert).
Voici les codes couleurs associés :
Gris : #C0C0C0
Bleu : #669999
Vert : #99FF66
<html><head><title>Programme 1</title></head>
<body>
<H3>Exercice 1 : Changement de couleur</H3>
couleur=prompt("Quelle couleur de fond souhaitez vous :gris, bleu, vert ? ");
if (couleur=="vert"){
document.bgColor="#99FF66";
}
if (couleur=="bleu"){
document.bgColor="#669999";
}
if (couleur=="gris"){
document.bgColor="##C0C0C0";
}
</script></body></html>
Exercice d'application 2:
Lire le Nom du client, le nom du produit, la quantité, le prix unitaire. Afficher les informations
précédentes avec le Prix HT et le Prix TTC.
Le taux de TVA est constant.
Exemple:

Les fonctions(1/4)
Une fonction est un groupe de ligne(s) de code de programmation destiné à exécuter une tâche bien
spécifique.
En Javascript, il existe deux types de fonctions :

• Les fonctions propres à Javascript. On les appelle des "méthodes". Elles sont associées à un objet
bien particulier comme c'était le cas de la méthode Alert() avec l'objet window.
• Les fonctions écrites par vous-même pour les besoins de votre script
function nom_de_la_fonction(arguments) {
Déclaration des fonctions :
... code des instructions ...}
L'appel d'une fonction : nom_de_la_fonction();
Retourner une valeur :

Le principe est simple. Pour renvoyer un résultat, il suffit d'écrire le mot clé return suivi de
l'expression à renvoyer
Les fonctions(2/4)
Exemple:
<BODY>.
<HTML> Déclaration de la fonction
<HEAD>
<SCRIPT LANGUAGE="Javascript">
function message() {
document.write("Bienvenue à ma page");
} L'appel de la fonction
</SCRIPT>
</HEAD>
<BODY onLoad="message();">
</BODY>
</HTML>
Les fonctions(1/4)
Exercice d'application :
Réaliser une fonction draw(nbr_ligne) qui permet d'afficher :

*
**
***
****
*****
******
Le paramètre nbr_ligne est un argument de la fonction pour le nombre de ligne qu'on veut afficher.

Les Objets (1/4)
– Les objets de JavaScript, sont soit des entités pré définies du langage, soit créés par
le programmeur.
•
Par exemple, le navigateur est un objet qui s'appelle "navigator
navigator".
•
La fenêtre du navigateur se nomme "window
window"
• document".
La page HTML est un autre objet, que l'on appelle "document
•
Un formulaire à l'intérieur d'un "document
document", est aussi un objet.
•
Un lien hypertexte dans une page HTML, est encore un autre objet. Il s'appelle
"link
link".
• etc...
– Les objets javascript peuvent réagir à des "Evénements".
– Accès aux propriétés d’un objet
• voiture.couleur.value
• voiture.couleur.value = verte

Les Objets (2/4)
Les Objets et leur Hiérarchie
Cette page s'affiche dans une
fenêtre. C'est l'objet fenêtre ou
objet Window.
Dans cette fenêtre,

Dans ce document, on il y a un document
trouve un formulaire au sens Html. C'est l'objet
Html. C'est l'objet document.
formulaire.
Dans ce formulaire,
on trouve trois
objets. Des boutons
radio, un bouton
classique et une
zone de texte.
Les Objets (3/4)
La hiérarchie des objets de cet exemple est donc :

radio
fenêtre document formulaire bouton
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 référencé.
Donc pour accéder à la case radio : "semaine" (window).document.formulaire.radio
Et pour accéder au bouton (window).document.formulaire.bouton.
document.form.radio[0].checked
Par exemple pour modifier la propriété value: window.document.forms[0].text.value
Les Objets (4/4)
• L’opérateur New
– L'opérateur new est utilisé pour créer une nouvelle instance ou un
nouveau type d'objet défini par l'utilisateur ou de l'un des types
d'objets prédéfinis, Array, Boolean, Date, Function, Image, Number,
Object, ou String.
• nom_objet = new type_objet
type_objet((parametres
parametres))
texte = new String("Une chaîne de caractère");

Comment définir un tableau ?(1/3)
L'objet Array (ou tableaux) est une liste d'éléments indexés dans lesquels on
pourra ranger (écrire) des données ou aller reprendre ces données (lire).
Exemple :
var MonTableau1 = new Array();
var MonTableau2 = new Array(15);
var MonTableau3 = new Array(1,"Salut",3.14);
var T = new Array(3);
var S ="";
for (var i = 0; i < T.length; i++){
T[i] = i;
}
T[5] = "Pourtant";
for (var i = 0; i < T.length; i++){
S += "En " + i + " on trouve " + T[i] + "\n";
}
alert(S);
</script>
Il existe cependant une autre manière pour initier un tableau. C’est l’initialisation directe:
Tab=[’’Lundi’’,’’Mardi’’,’’Mercredi’’];
Dans ce cas on a pas besoin de déclarer l’objet Array comme on n’a pas besoin de
déterminer le nombre d’éléments indexés.
Méthode sur l’objet array()

length: retourne le nombre d’éléments du tableaux.
join(): retourne une chaîne de caractère constituée des éléments du tableaux et séparés par
la chaîne fournie en paramètres.
reverse(): inverse l’ordre d’indexation des éléments.
sort(): tri alphabétique ou numérique des éléments (les éléments dans ce cas doivent être
de même type).

Exemples
Tab=[‘’Lundi’’,’’Mardi’’,’’Mercredi’’,’’Jeudi’’];
document.write(Tab.length); // écrit 4
document.write(Tab.join(‘’-’’));
// écrit Lundi-Marci-Mercredi-Jeudi
document.write(Tab.reverse().join(‘’-’’));
// écrit Jeudi-Mercredi-Mardi-Lundi
document.write(tab.sort().join(‘’-’’));
// écrit Jeudi-Lundi-Mardi-Mercredi

Les opérations sur les chaînes
– La concaténation
– Var chaine ="bonjour "+ "GL";
– Déterminer la longueur d’une chaîne

– Var ch1 = "bonjour ";
– Var longueur = ch1.length;
– Identifier le nième caractère d’une chaîne

– Var ch1 =" bonjour ! ";
– Var carac = ch1.charAt(2);
– Extraction d’une partie de la chaîne

– Var dateDuJour = "29/03/16 ";
– Var mois = datteDuJour.substring(3, 5);
» 3: est l’indice du premier caractère de la sou-chaîne à extraire
» 5 : indice du dernier caractère à prendre en considération ; ce
caractère ne fera pas partie de la sous-chaîne à extraire

L'objet String
– Propriété :
• length : retourne la longueur de la chaîne de caractères;
– Méthodes :
• bold( ) : formate la chaîne avec la balise <B>;
• charAt( ) : renvoie le caractère se trouvant à une certaine position;
• charCodeAt( ) : renvoie le code du caractère se trouvant à une certaine position;
• concat( ) : permet de concaténer 2 chaînes de caractères;
• fromCharCode( ) : renvoie le caractère associé au code;
• indexOf( ) : permet de trouver l'indice d'occurrence d'un caractère dans une chaîne;
• italics( ) : formate la chaîne avec la balise <I>;
• lastIndexOf( ) : permet de trouver le dernier indice d'occurrence d'un caractère;
• link( ) : formate la chaîne avec la balise <A> pour permettre de faire un lien;
• substring( ) : retourne une portion de la chaîne;
• toLowerCase( ) : permet de passer toute la chaîne en minuscule;
• toUpperCase( ) : permet de passer toute la chaîne en majuscules;
• fontcolor(couleur): Modifie la couleur du texte (admet comme argument la couleur en
hexadécimal ou en valeur littérale)
• fontsize(Size):Modifie la taille de la police.
Les fonctions prédéfinies
• parseFloat
• analyse une chaîne de caractères et retourne un nombre
décimal.
• Si l'argument évalué n'est pas un nombre, renvoie NaN
(Not a Number).
var numero="125";
var nombre=parseFloat(numero); //retourne le nombre 125
• parseInt
• analyse une chaîne de caractères et retourne un nombre
entier de la base spécifiée.
• La base peut prendre les valeurs 16 (hexadécimal) 10
(décimal), 8 (octal), 2 (binaire).
var prix=30.75;
var arrondi = parseInt(prix, 10); //retourne 30
L'objet Math (1/2)
– Propriétés :
• E : renvoie la valeur de la constante d'Euler (~2.718);
• LN2 : renvoie le logarithme népérien de 2 (~0.693);
• LN10 : renvoie le logarithme népérien de 10 (~2.302);
• LOG2E : renvoie le logarithme en base 2 de e (~1.442);
• LOG10E : renvoie le logarithme en base 10 de e (~0.434);
• PI : renvoie la valeur du nombre pi (~3.14159);
• SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
• SQRT2 : renvoie la racine carrée de 2 (~1.414);

L'objet Math (2/2)
– Méthodes :
• abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ), max( ), min( ),
sqrt( ) sont les opérations mathématiques habituelles;
• atan2( ) : retourne la valeur radian de l'angle entre l'axe des abscisses et un point;
• ceil( ) : retourne le plus petit entier supérieur à un nombre;
• floor( ) : retourne le plus grand entier inférieur à un nombre;
• pow( ) : retourne le résultat d'un nombre mis à une certaine puissance;
• random( ) : retourne un nombre aléatoire entre 0 et 1;
• round( ) : arrondi un nombre à l'entier le plus proche.

L'objet Date (1/3)
– Propriété : aucune;
– Méthodes :
• getDay( ), getDate(), getHours( ), getFullYear( ), getYear( ), getMonth( ),

getMinutes( ), getSeconds( ), getMilliseconds( ): retournent respectivement
l'année complète, l'année (2chiffres), le mois, le jour de la semaine, le jour du
mois, l'heure, les minutes, les secondes et les millisecondes stockés dans
l'objet Date;
• getUTCFullYear( ), getUTCYear( ), … retournent respectivement l'année

complète, l'année (2chiffres), … stockés dans l'objet Date en temps universel;
• setFullYear( ), setYear( ), … remplacent respectivement l'année complète,

l'année (2chiffres), … dans l'objet Date;
L'objet Date (2/3)
• setUTCFullYear( ), setUTCYear( ), … remplacent l'année complète, l'année

(2chiffres), … dans l'objet Date en temps universel;
• getTime( ) : retourne le temps stocké dans l'objet Date;
• getTimezoneOffset( ) : retourne la différence entre l'heure du client et le temps

universel;
• toGMTString( ), toLocaleString( ), toUTCString( ) : convertissent la date en

chaîne de caractère selon la convention GMT, selon la convention locale ou en
temps universel;

L'objet Date (3/3)
Exemple:
Affichage de la date au format jj/mm/aa
<script language="Javascript">
dat=new Date;
mois=dat.getMonth()+1;
if (mois<10) { mois="0"+mois; }
alert(dat.getDate()+"/"+mois+"/"+dat.getYear());
</script>

L'objet document
• Propriétés :
– applets : retourne la collection d'applets java présente dans le document;
– cookie : permet de stocker un cookie;
– domain : indique le nom de domaine du serveur ayant apporté le document;
– forms : retourne la collection de formulaires présents dans le document;
– images : retourne la collection d'images présentes dans le document;
– links : retourne la collection de liens présents dans le document;
– referrer : indique l'adresse de la page précédente;
– title : indique le titre du document.
• Méthodes :
– close( ) : ferme le document en écriture;
– open( ) : ouvre le document en écriture;
– write( ) : écrit dans le document;
– writeln( ) : écrit dans le document et effectue un retour à la ligne

Les événements (1/5)
Les événements sont des actions qui sont déclenchées le plus souvent par l'utilisateur. Ces événements
(clic de souris, passage de souris, changement du contenu d'une zone de saisie...) peuvent être gérés par
un code : on parle de "programmation événementielle".
– Javascript est dépendant des événements

• se produisent lors d'actions diverses sur les objets d'un document HTML.
– onLoad;
– onClick
– onMouseover
– onMouseout
– ...
– Il est possible de baser l’exécution de fonctions sur des événements

• Evénement onLoad
• Se produit lorsque une page web est chargée dans la fenêtre du navigateur
<HTML><BODY onLoad="alert('page chargée');">
Exemple de l'événement onLoad
</BODY></HTML>
• Evénement onClick:
• Se produit lorsque l’utilisateur clique sur un élément spécifique dans une
page, comme un lien hypertexte, une image, un bouton, du texte, etc.
<HTML><BODY>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY></HTML>

• Événement onMouseover
• Analogue à onClick sauf qu’il suffit que l’utilisateur place le pointeur de sa
souris sur l’un des éléments précités (lien hypertexte, image, bouton, texte, etc.)
pour qu’il ait lieu
• Événement onMouseout
• A l’inverse de onMouseover, cet événement se produit lorsque le pointeur de la
souris quitte la zone de sélection d’un élément.
<HTML><BODY>
<IMG SRC="image.gif" onMouseOver="src='image2.gif';"
onMouseOut="src='image.gif';">
</BODY></HTML>

Événements associés à la balise <body> Événements associés à la balise <form>
Événements associés au clavier

Événements associés à la souris ou à d’autres actions utilisateurs similaires.

Nommage des objets-éléments
– Pour pouvoir manipuler un objet en javaScript, il doit posséder un nom
– Pour pouvoir distinguer les différents objets-éléments d’une page web, il suffit de
leur donner un nom à travers de l’attribut NAME
– <Table Name=« tableau1 »>…
– <Table Name=« tableau2 »>…
– <Form Name = « formulaire1 »>…
– <Form Name =« formulaire2 »>…
– <Textarea Name =« texte1»>…

Manipulation des objets
– Pour adresser un objet, il ne suffit pas de donner son nom : il faut aussi préciser son
« chemin d’accès » dans l’arborescence de la structure
<HTML><BODY
onLoad="window.document.formulaire.zone.value='Bonjour';">
– Si lename="formulaire"><INPUT
<FORM nom de la fenêtre est omis, le navigateur utilisera par défaut
NAME="zone" la fenêtre courante
TYPE="text">
</FORM></BODY></HTML>
– Dans le cas de cadres (frames), il est pertinent de donner le nom de la fenêtre
– Il est possible aussi d’omettre window.document : l’adressage réussi puisqu’il n’y a

qu’un seul objet « document» dans la fenêtre

Cours 4 Javascript

Transféré par

Informations du document

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 4 Javascript

Transféré par

Droits d'auteur :

Formats disponibles

Université Moulay Ismail Année universitaire : 2019/2020

Faculté des Sciences et Techniques Filière Génie Logiciel : I616

17-Mar-20 Cours JavaScript 1

Code JavaScript intégré aux pages HTML.

Code interprété par le navigateur client (interprétation dépendante du type et de la

≠ code PHP (interprété du coté serveur).

événementiel (association d’actions aux événements déclenchés par l’utilisateur

17-Mar-20 Cours JavaScript 3

• Le code JavaScript s’intègre de deux manière avec le code HTML

– 1. Insertion directe dans le code HTML

– 2. Insertion comme un module externe

17-Mar-20 Cours JavaScript 4

• Il existe 2 manières d'insérer du code JavaScript dans une page HTML

– Insertion pour exécution directe

17-Mar-20 Cours JavaScript 5

prompt("vous-avez compris javascript ?" ,"oui" );

• La méthode document.write permet d ’écrire du code HTML dans la

• Le langage Javascript y est sensible à la casse

• Il existe deux méthodes permettant d'intégrer des commentaires à vos scripts.

– Placer un double slash (//) devant le texte

17-Mar-20 Cours JavaScript 9

17-Mar-20 Cours JavaScript 10

17-Mar-20 Cours JavaScript 11

• Contraintes concernant les noms de variables

– Les caractères spéciaux et accentués sont interdits (é, à, ç, ï, etc..)

– Les majuscules et les minuscules ont leur importance.

– Un nom de variable ne peut contenir d'espaces.

– Les mots réservés JavaScript ne peuvent être utilisés comme noms

17-Mar-20 Cours JavaScript 12

• Trois principaux types de valeurs

• Number : 10^-308 >nombre < 10^308

» Les nombres entiers

» les nombres décimaux en virgule flottant

– deux valeurs littérales : true (vrai) et false (faux).

( + - * / % < > <= >= == != ++ -- += -= *= /= ( ) && || )

17-Mar-20 Cours JavaScript 14

On appelle structure de contrôle ou structure conditionnelle, les

en exécutant une série d’instructions propre à une condition

17-Mar-20 Cours JavaScript 15

if (condition réalisée est vraie)

1. if ( (x==1) && (y==3) )

2. if ( (x==1) && (y==3) ) somme= x+y;

17-Mar-20 Cours JavaScript 17

• La syntaxe complète de cette expression est la suivante:

17-Mar-20 Cours JavaScript 18

17-Mar-20 Cours JavaScript 19

17-Mar-20 Cours JavaScript 20

• Dans sa syntaxe, il suffit de préciser :

• La syntaxe de cette expression est la suivante:

for (compteur; condition; modification du compteur)

17-Mar-20 Cours JavaScript 21

while (condition réalisée)

17-Mar-20 Cours JavaScript 23

17-Mar-20 Cours JavaScript 24

17-Mar-20 Cours JavaScript 26

En Javascript, il existe deux types de fonctions :

L'appel d'une fonction : nom_de_la_fonction();

Retourner une valeur :

Réaliser une fonction draw(nbr_ligne) qui permet d'afficher :

17-Mar-20 Cours JavaScript 29

17-Mar-20 Cours JavaScript 30

Dans cette fenêtre,

La hiérarchie des objets de cet exemple est donc :

texte = new String("Une chaîne de caractère");