Cours JS Part1

Anne universitaire :2014-2015
Cours: Dveloppement Web
Enseignants : Mme Z. CHANNOUF

1
Rfrences :
Cours Web Javascript, Thierry Vaira, TS IRIS Avignon.
https://developer.mozilla.org/en-US/docs/Web/JavaScript
http://www.grappa.univ-lille3.fr/~torre/Enseignement/Cours/javascript.php
http://www.toutjavascript.com
http://www.w3schools.com/js/
Sommaire
Introduction JavaScript
O placer le code Javascript
Types, variables et oprateurs
Possibilits daffichage en Javascript
Structures de contrle
Fonctions en Javascript
Classe et objet
vnements en JavaScript
Types de langages
Deux types:
Un langage client-side : les scripts sont excuts

par le navigateur chez l'internaute (le client).
Un langage server-side : les scripts sont excuts
par le serveur Web. C'est le cas des langages
comme le PHP.
Un script server-side va s'occuper de crer
la page Web qui sera envoye au navigateur. Ce
dernier va alors afficher la page puis excuter les
scripts client-side tel que le JavaScript.
JavaScript est un langage de programmation

de scripts principalement utilis dans les pages
web interactives ct client.
Cest un langage orient objet inspir de
nombreux langages dont Java mais il reste
trs diffrent de celui-ci.
Le langage a t cr en 1995 par Brendan Eich, membre

de la fondation Mozilla, pour le compte de Netscape
Communications Corporation.
6
Pourquoi JavaScript
Simple et interprtable par les langages de
programmation
Permet une interactivit au Web
Contrle des valeurs saisies dans un formulaire
Excution lors de la survenue dvnement
(chargement, utilisation de la souris, etc.)
Les scripts populaires sont: Javascript, VBScript,

JScript, etc
7
JavaScript Java
java : vritable langage de programmation, compil,

code protg, typage fort, objet (classes, instances,
hritage..)
JavaScript : facile utiliser, typage faible, intgr dans
html, interprt, bas sur les objets html
O placer le code Javascript ?

Code Javascript plac dans la page HTML :
<script type=text/javascript> </script>
Importation d'un code Javascript externe (dans le fichier

moncode.js) :
<script type=text/javascript src=moncode.js></script>
O placer le code Javascript ?

Dans certains cas, lusage de la balise <SCRIPT> nest pas obligatoire :
Cas des vnements : il faut simplement insrer le code lintrieur de la
balise HTML comme un attribut de celle-ci.
<BODY onLoad="message()">
Cas des liens HREF : on peut insrer du code javascript dans un lien href
en prcisant le mot cl javascript :
<A HREF="javascript:message()">une fonction js</A>
10
Utilisation de la console de debug JavaScript des navigateurs

Trs pratiques pour tester la syntaxe JavaScript
11
Types,Variables et Oprateurs
Les variables
Pas de dclaration de types
Utiliser var pour dclarer les variables (optionnel )
Noms de variables doivent dbuter avec une lettre ou un tiret "_
et ils sont sensibles la casse
Exemples :
var a;
var ceciEstUneVariable;
var _et_ceci_aussi;
var mix12trois;
var 2three4five; // Invalide , une variable ne peut commencer par un chiffre !
var a = 1
var v1, v2, v3 = 'hello', v4 = 4, v5;
// Attentions aux majuscules/minuscules
var case_matters = 'lower';
var CASE_MATTERS = 'upper';
12
Les oprateurs
Arithmtiques : + - / * ++ - Comparaison: < <= == != >= >

Concatnation des chanes : +
Assignation : =
Spciales:
== et != convertissent les oprandes de mme

type avant la comparaison
=== et !== considrent ses oprandes ingales si
leurs types sont diffrents
13
Les oprateurs
>>> 1 + 2
3
>>> var a = 1;
>>> var b = 2;
>>> a + 1
2
>>> b + 2
4
>>> a + b
3
>>> var c = a + b;
>>> c
3
>>> var a = 123;

var b = a++;
>>> b
123
>>> a
124
>>> var a = 123;
var b = ++a;
>>> b
124
>>> a
124
>>> var a = 123;
var b = a--;
>>> b
123
>>> a
122
14
Les oprateurs
Symbole
Description
Exemple
==
Egalit avec
conversion de type
>>> 1 == 1
True
>>> 1 == 2
false
>>> 1 == '1
true
===
Egalit sans
conversion de type
>>> 1 === '1

false
>>> 1 === 1
true
15
Les types
String, Number, Boolean, NaN, Infinity, undefined et null
NaN est le sigle de "Not a Number",
INFINITY est un nombre qui est trop grand (ou trop petit)
INFINITY, NEGATIVE_INFINITY ou POSIVE_INFINITY
UNDEFINED pour crer une variable sans lui donner une valeur,
elle est de ce type jusqu' temps qu'on lui donne une valeur
NULL sert spcifier une variable sans valeur

16
l'oprateur typeof
typeof : renvoie un objet de stype String, qui peut valoir

"number", "string", "boolean", "undefined", "object", ou
"function"
>>> var n0;
>>>typeof n0
undefined
>>>var n1 = 1234;
>>> typeof n1;
number
>>> var n2 = 1.23;
>>> typeof n2;
number
>>> typeof 123;
number
>>> var s = "quelques caractres";

>>> typeof s;
string
>>>var n3= 2e+3 // nombre avec exposant
>>> typeof n3;
number
>>> var n4 = 6 / 0;
>>> n4
Infinity
>>> typeof n4
number
17
Possibilits daffichage en JavaScript

On peut afficher les donnes de diffrentes
faons:
L'criture dans une bote d'alerte, en utilisant
window.alert () .
L'criture dans la sortie HTML en utilisant
document.write () .
L'criture dans un lment HTML, en utilisant
innerHTML .
L'criture dans la console de navigateur, en
utilisant console.log () .
18

window.alert ()
Vous pouvez utiliser une bote d'alerte pour afficher les

donnes :.
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
19

document.write ()
Exemple
<!DOCTYPE html>
<html>
<body>

<script>
document.write(5 + 6);
</script>
</body>
</html>
20

innerHTML
Pour accder un lment HTML, JavaScript peut utiliser

document.getElementById (id).
L' id est un attribut qui dfinit l'lment HTML.
Le innerHTML est une proprit qui dfinit le contenu HTML:
<!DOCTYPE html>
<html>
<body>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
21

console.log ()
Exemple
<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>
</body>
</html>
22
Les structures de contrle

Structures conditionnelles
Conditions:
If (condition) instruction
If (condition) instruction else instruction
Exemple 1: sc simple
Exemple 2 : sc simple
var a= 187, b = 173;
var a= 187, b = 173;
if(a > b)
{
text=(a est suprieur b);
}
if(a > b)
{
text=(a est suprieur b);
}
else{
text=( a est infrieur ou gal
b);
}
23

Structures conditionnelles
Exemple 3 : sc imbrique
Exemple 4 : switch
var a= 17, b = 173;
var grade='A';
if(a > b)
switch (grade)
{
text=('a est suprieur b');
}
case 'A': text=(Professeur); break;
else if (a<b)
case 'B': text=(Assistant); break;
case 'C': text=(Technicien); break;
text=(' a est infrieur b');
case 'D': text=(Ouvrier); break;
default: text=(Grade inconnu)
else
{
text=(' a est gal b');

}
24

Structures rptitives
While (condition) instruction
Do instruction While (condition)
For (initialisation; condition; incrmentation)
instructions
Exemples :
Exemple 1: Boucle FOR Exemple 2: Boucle

WHILE
Exemple 3: Boucle DO
WHILE
for (i = 0; i < 10; i++) {

var text = "";
text = Le nombre est
var i = 0;
+ i+ \n;
while (i < 10) {
}
text += le nombre
est +
i+\n;
i++;
}
text="";
i=0;
do {
text += Le nombre est " +
i+"\n";
i++;
}
while (i < 10);
25
Les Fonctions en JavaScript

Syntaxe dune fonction
Dfinie prfrablement dans la partie <head> surtout avant
lappel de la fonction
Syntaxe
function nom (arg1, , argn)
{ instructions}
Appele dans la partie <body>

Syntaxe de lappel: nom (arg1, , argn)
Variables dclares dans une fonction resteront locales
cette fonction
On pourra utiliser la commande RETURN (optionnel)
26

Exemple de dclaration
<html>
<head>
<script type=text/javascript>
function Saluer (nom)
{ document.write (Bonjour + nom) }
</script>
</head>
<body>
< script type=text/javascript >
var votreNom = prompt("Quel est votre nom?");
Saluer(votreNom);
</script>
</body>
</html>
27

Fonctions en fichier externe
On pourra mettre dans un fichier part:

fonctions.js toutes les fonctions dclares
Pour les charger et les utiliser dans diffrentes
pages Web
< script type=text/javascript src=fonctions.js >

</script>
ATTENTION! : Pas de balise <script> dans

fonctions.js
28
eval(): interprte une expression
escape():transforme des signes ASCII en nombres
isFinite():vrifie le domaine numrique de valeurs
isNaN():vrifie si la valeur n'est pas un nombre
parseFloat():transforme en nombre avec dcimales
parseInt():transforme en nombre entier
Number():transforme un objet en nombre
String():transforme le contenu d'un objet en une chane

de caractres
29

Fonction eval()
eval ("document.write(Bonjour !);")
Rsultat: Bonjour !
Fonction escape()
var exemple = "\n\r\t";

document.write(escape(exemple));
Rsultat : %0A%0D%09
//Transforme les caractres de commande avec des codes ASCII de 0 31)
// dans leurs valeurs ASCII numriques et cela sous forme hexadcimale
30

Fonction isNaN()
if(isNaN(x))
{ alert(x + " n'est pas un nombre."); }
Fonction isFinite()
if(isFinite(x + 5 * y))
{ alert("Le rsultat est un nombre fini.");
//Si la valeur assigne est NaN,
//le rsultat retourn par isFinite sera false.
}
31

Fonction parseFloat()
var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";
document.write(parseFloat(a));
54
document.write(parseFloat(b));
NaN
document.write(parseFloat(c));
12.5
document.write(parseFloat(d));
NaN
Fonction parseInt()
var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";
document.write(parseInt(a));
54
document.write(parseInt(b));
NaN
12
document.write(parseInt(c));
NaN
document.write(parseInt(d));
32

Fonction String()
var a = 54, b = 44, c = 12.5, d = true;
a = String(a); b = String(b); c = String(c);d = String(d);
document.write(typeof (a));
String
document.write(typeof (b));
String
document.write(typeof (c));
String
document.write(typeof (d));
String
Fonction Number()
var a = "54 " , b = "d54", c = "54d";
document.write(Number(a));
document.write(Number(b));
document.write(Number(c));
54
NaN
NaN
33
Exercice 1
34
Solution
<HTML>
<HEAD>
<SCRIPT>
var firstNumber, secondNumber,number1, number2, sum;
firstNumber = window.prompt( "Entrer le premier entier", "0" );
secondNumber = window.prompt( "Entrer le deuxieme entier",
"0" );
number1 = parseInt( firstNumber );

number2 = parseInt( secondNumber );
sum = number1 + number2;
document.write( "<H1>La somme est " + sum + "</H1>" );
</SCRIPT>
</HEAD>
35
Exercice 2
36
Solution 1
<html> <head>
<script>
function controle() {
var test = document.form1.moninput.value;
alert("Vous avez tap : " + test); }
</script>
</head>
<body>
<form name="form1">
<input type="text" name="moninput ><BR>
<input type="button" name="bouton" value="Contrler" onClick= "controle()">
</form>
</body>
</html>
37
Solution 2
<html> <head>
<script>
function controle() {
var test = document.getElementById (txt).value;
alert("Vous avez tap : " + test); }
</script>
</head>
<body>
<form >
<input type="text id= txt><BR>
< input type ="button" name="bouton" value="Contrler" onClick= "controle()">
</form>
</body>
</html>
38
Classe et Objet
Une classe est un type qui est la description

dun ensemble de :
proprits (les donnes) et de
mthodes (les fonctions).
Un objet est une instance de classe (cest

dire une variable de type classe). On crira :
o.p pour accder une proprit p dun objet o
o.m() pour appeler une mthode m dun objet o
39
Classe et Objet
DOM
Lorsquun document HTML est charg dans un

navigateur, celui-ci fournit une interface DOM
(Document Object Model) pour accder aux objets le
composant :
Ces objets sont classs de manire hirarchique
(notion darbre).
Lobjet le plus haut dans la hirarchie est lobjet de la
classe window (fentre).
Dans cette fentre, il y a un document HTML : cest
lobjet document. Donc, Lobjet window contient
lobjet document.et ainsi de suite ...
40
Classe et Objet
DOM
41
Classe et Objet
DOM
Lorsquune page Web est charge dans un

navigateur, Javascript identifie plusieurs objets pour y
reprsenter les informations.
Ces objets sont classs de manire hirarchique.
Lobjet le plus haut dans la hirarchie est lobjet de
la classe window (fentre).
42
Classe et Objet
DOM
Dans cette fentre, il y a un
document
HTML : c'est l'objet document.
Donc,
L'objet fentre contient
l'objet document (cest la notion de
hirarchie).
Dans ce document, on trouve un

formulaire au sens HTML : c'est
l'objet formulaire. Donc, l'objet
fentre contient un objet document
qui lui contient un objet formulaire
(hirarchie des objets).
43
Classe et Objet
DOM
Dans ce document, on
trouve trois objets :
l'objet radio, l'objet
bouton, et l'objet texte.
Donc, l'objet fentre
contient :
Le modle hirarchique
des objets en Javascript.
44
Classe et Objet
DOM
Dans un document HTML, on pourrait donc accder aux objets de

la manire suivante :
// Accs une proprit de lobjet button
window.document.form.button.value = "Dterminer";
// Accs une mthode de lobjet button
window.document.form.button.focus();
// Accs une mthode de lobjet window
window.alert("Hello world");
Remarque : lobjet window est souvent facultatif. On ne doit pas
forcment prciser son nom pour utiliser ses mthodes ou ses
proprits.
45
Classe et Objet
DOM
On recommande dutiliser la mthode

getElementById() pour accder aux objets par
leur identifiant (attribut ID de llment HTML) :
var bouton = document.getElementById(id_button);
bouton.click(); // pour simuler un clic de souris sur ce bouton
46
Les vnements en JavaScript

Exemple
Le script est excut chaque fois que lvnement survient
<HTML>
<HEAD>
<SCRIPT LANGUAGE= "Javascript">
function bienvenue() {alert("Bienvenue cette page"); }
function au_revoir() {alert("Au revoir"); }
</SCRIPT>
</HEAD>
<BODY onload='bienvenue()' onunload='au_revoir()'>
Salut tudiants ISI
</BODY>
</HTML>
47

Liste des vnements (1)
onAbort (en cas d'interruption)

onChange (aprs modification)
onClick (en cliquant)
onDblClick (en double-cliquant)
onError (en cas d'erreur)
onFocus (en activant)
onKeydown (en appuyant sur une touche)
onKeypress (en appuyant sur une touche)
onKeyup (en relchant la touche)
48

Liste des vnements (2)
onLoad (en chargeant un fichier)
onMousedown (en maintenant la touche de souris
appuye)
onMousemove (en bougeant la souris)
onMouseout (En quittant l'lment avec la souris)
onMouseover (en passant sur l'lment avec la
souris)
onMouseUp (en relchant la touche de souris)
onReset (en initialisant le formulaire)
onSelect (En slectionnant du texte)
onSubmit (en envoyant le formulaire)
onUnload (en quittant le fichier)
49

Cours JS Part1

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 JS Part1

Transféré par

Droits d'auteur :

Formats disponibles

Anne universitaire :2014-2015

Cours: Dveloppement Web

Enseignants : Mme Z. CHANNOUF

Cours Web Javascript, Thierry Vaira, TS IRIS Avignon.

Un langage client-side : les scripts sont excuts

JavaScript est un langage de programmation

Le langage a t cr en 1995 par Brendan Eich, membre

Les scripts populaires sont: Javascript, VBScript,

java : vritable langage de programmation, compil,

O placer le code Javascript ?

Importation d'un code Javascript externe (dans le fichier

O placer le code Javascript ?

<A HREF="javascript:message()">une fonction js</A>

Utilisation de la console de debug JavaScript des navigateurs

Arithmtiques : + - / * ++ - Comparaison: < <= == != >= >

== et != convertissent les oprandes de mme

>>> var a = 123;

>>> 1 === '1

NaN est le sigle de "Not a Number",

NULL sert spcifier une variable sans valeur

typeof : renvoie un objet de stype String, qui peut valoir

>>> var s = "quelques caractres";

Possibilits daffichage en JavaScript

Possibilits daffichage en JavaScript

Vous pouvez utiliser une bote d'alerte pour afficher les

Possibilits daffichage en JavaScript

<h1>My First Web Page</h1>

Possibilits daffichage en JavaScript

Pour accder un lment HTML, JavaScript peut utiliser

Possibilits daffichage en JavaScript

<h1>My First Web Page</h1>

Les structures de contrle

var a= 187, b = 173;

var a= 187, b = 173;

Les structures de contrle

var a= 17, b = 173;

case 'A': text=(Professeur); break;

case 'B': text=(Assistant); break;

case 'C': text=(Technicien); break;

text=(' a est infrieur b');

case 'D': text=(Ouvrier); break;

default: text=(Grade inconnu)

text=(' a est gal b');

Les structures de contrle

Exemple 1: Boucle FOR Exemple 2: Boucle

for (i = 0; i < 10; i++) {

Les Fonctions en JavaScript

Appele dans la partie <body>

Les Fonctions en JavaScript

Les Fonctions en JavaScript

On pourra mettre dans un fichier part:

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

ATTENTION! : Pas de balise <script> dans

Les Fonctions en JavaScript

eval(): interprte une expression

escape():transforme des signes ASCII en nombres

isFinite():vrifie le domaine numrique de valeurs

isNaN():vrifie si la valeur n'est pas un nombre

parseFloat():transforme en nombre avec dcimales

parseInt():transforme en nombre entier

Number():transforme un objet en nombre

String():transforme le contenu d'un objet en une chane

Les Fonctions en JavaScript

var exemple = "\n\r\t";