Upload
zhairachannouf
View
218
Download
0
Embed Size (px)
DESCRIPTION
cours javascript
Citation preview
Cours: Développement Web
Enseignants : Mme Z. CHANNOUF
1
Année universitaire :2014-2015
Références : 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/
2
Sommaire
Introduction à JavaScript
Où placer le code Javascript
Types, variables et opérateurs
Possibilités d’affichage en Javascript
Structures de contrôle
Fonctions en Javascript
Classe et objet
Événements en JavaScript
3
Types de langages Deux types:
Un langage client-side : les scripts sont exécutés par le navigateur chez l'internaute (le client).
Un langage server-side : les scripts sont exécutés par le serveur Web. C'est le cas des langages comme le PHP.
Un script server-side va s'occuper de « créer » la page Web qui sera envoyée au navigateur. Ce dernier va alors afficher la page puis exécuter les scripts client-side tel que le JavaScript.
4
Introduction à JavaScript
5
Introduction à JavaScript
JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives côté client.
C’est un langage orienté objet inspiré de nombreux langages dont Java mais il reste très différent 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
Introduction à JavaScript
Introduction à JavaScript
Pourquoi JavaScript
Simple et interprétable par les langages de programmation
Permet une interactivité au Web
Contrôle des valeurs saisies dans un formulaire
Exécution lors de la survenue d’événement (chargement, utilisation de la souris, etc.)
Les scripts populaires sont: Javascript, VBScript, JScript, etc
7
Introduction à JavaScript
JavaScript ≠ Java
◦ java : véritable langage de programmation, compilé,
code protégé, typage fort, objet (classes, instances,
héritage..)
◦ JavaScript : facile à utiliser, typage faible, intégré dans
html, interprété, basé sur les objets html
8
Où placer le code Javascript ?
9
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>
Cas des événements : il faut simplement insérer le code à l’intérieur de la
balise HTML comme un attribut de celle-ci.
10
Où placer le code Javascript ?
<BODY onLoad="message()">
<A HREF="javascript:message()">une fonction js</A>
Cas des liens HREF : on peut insérer du code javascript dans un lien href
en précisant le mot clé javascript :
Dans certains cas, l’usage de la balise <SCRIPT> n’est pas obligatoire :
Utilisation de la console de debug JavaScript des navigateurs
Très pratiques pour tester la syntaxe JavaScript
11
Les variables Pas de déclaration de types
Utiliser var pour déclarer les variables (optionnel )
Noms de variables doivent débuter 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
Types, Variables et Opérateurs
Arithmétiques : + - / * ++ --
Comparaison: < <= == != >= >
Concaténation des chaînes : +
Assignation : =
Spéciales:
◦ == et != convertissent les opérandes de même
type avant la comparaison
◦ === et !== considèrent ses opérandes inégales si
leurs types sont différents
13
Types, Variables et Opérateurs
Les opérateurs
14
>>> 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
Types, Variables et Opérateurs
Les opérateurs
15
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
Types, Variables et Opérateurs
Les opérateurs
Les types
16
Types, Variables et Opérateurs
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 créer une variable sans lui donner une valeur,
elle est de ce type jusqu'à temps qu'on lui donne une valeur
NULL sert à spécifier une variable sans valeur
typeof : renvoie un objet de stype String, qui peut valoir
"number", "string", "boolean", "undefined", "object", ou
"function"
17
Types, Variables et Opérateurs
l'opérateur typeof
>>> var n0;
>>>typeof n0
« undefined »
>>>var n1 = 1234;
>>> typeof n1;
« number »
>>> var n2 = 1.23;
>>> typeof n2;
« number »
>>> typeof 123;
« number »
>>> var s = "quelques caractères";
>>> typeof s;
« string »
>>>var n3= 2e+3 // nombre avec exposant
>>> typeof n3;
« number »
>>> var n4 = 6 / 0;
>>> n4
Infinity
>>> typeof n4
« number »
Possibilités d’affichage en JavaScript
On peut afficher les données de différentes façons:
L'écriture dans une boîte d'alerte, en utilisant window.alert () .
L'écriture dans la sortie HTML en utilisant document.write () .
L'écriture dans un élément HTML, en utilisant innerHTML .
L'écriture dans la console de navigateur, en utilisant console.log () .
18
window.alert ()
Vous pouvez utiliser une boîte d'alerte pour afficher les
données :.
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
Possibilités d’affichage en JavaScript
document.write ()
Exemple
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
20
Possibilités d’affichage en JavaScript
innerHTML
Pour accéder à un élément HTML, JavaScript peut utiliser
document.getElementById (id).
L' id est un attribut qui définit l'élément HTML.
Le innerHTML est une propriété qui définit le contenu HTML:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
21
Possibilités d’affichage en JavaScript
console.log () Exemple
<!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>My first paragraph.</p> <script> console.log(5 + 6); </script> </body> </html>
22
Possibilités d’affichage en JavaScript
Conditions:
If (condition) instruction
If (condition) instruction else instruction
23
Les structures de contrôle
Structures conditionnelles
Exemple 1: sc simple
var a= 187, b = 173;
if(a > b)
{
text=(‘a est supérieur à b’);
}
Exemple 2 : sc simple
var a= 187, b = 173;
if(a > b)
{
text=(‘a est supérieur à b’);
}
else{
text=(‘ a est inférieur ou égal à
b’);
}
Exemple 3 : sc imbriquée
var a= 17, b = 173;
if(a > b)
{
text=('a est supérieur à b');
}
else if (a<b)
{
text=(' a est inférieur à b');
}
else
{
text=(' a est égal à b');
}
24
Exemple 4 : switch
var grade='A';
switch (grade)
{
case 'A': text=(‘Professeur’); break;
case 'B': text=(‘Assistant’); break;
case 'C': text=(‘Technicien’); break;
case 'D': text=(‘Ouvrier’); break;
default: text=(‘Grade inconnu’)
}
Les structures de contrôle
Structures conditionnelles
While (condition) instruction
Do instruction While (condition)
For (initialisation; condition; incrémentation)
instructions
Exemples :
25
Les structures de contrôle
Structures répétitives
Exemple 1: Boucle FOR
for (i = 0; i < 10; i++) {
text = “Le nombre est “
+ i+ “\n”;
}
Exemple 2: Boucle
WHILE
var text = "";
var i = 0;
while (i < 10) {
text += “le nombre
est” +
i+”\n”;
i++;
}
Exemple 3: Boucle DO…
WHILE
text="";
i=0;
do {
text += “Le nombre est " +
i+"\n";
i++;
}
while (i < 10);
Définie préférablement dans la partie <head> surtout avant
l’appel de la fonction
Syntaxe
function nom (arg1, …, argn)
{ instructions}
Appelée dans la partie <body>
Syntaxe de l’appel: nom (arg1, …, argn)
Variables déclarées dans une fonction resteront locales à
cette fonction
On pourra utiliser la commande RETURN (optionnel)
26
Les Fonctions en JavaScript
Syntaxe d’une fonction
<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
Les Fonctions en JavaScript
Exemple de déclaration
On pourra mettre dans un fichier à part: fonctions.js toutes les fonctions déclarées
Pour les charger et les utiliser dans différentes pages Web
< script type=text/javascript src=fonctions.js >
</script>
ATTENTION! : Pas de balise <script> dans fonctions.js
28
Les Fonctions en JavaScript
Fonctions en fichier externe
eval(): interpréte une expression
escape():transforme des signes ASCII en nombres
isFinite():vérifie le domaine numérique de valeurs
isNaN():vérifie si la valeur n'est pas un nombre
parseFloat():transforme en nombre avec décimales
parseInt():transforme en nombre entier
Number():transforme un objet en nombre
String():transforme le contenu d'un objet en une chaîne
de caractères 29
Les Fonctions en JavaScript
eval ("document.write(Bonjour !);")
Résultat: Bonjour !
30
Les Fonctions en JavaScript
Fonction eval()
Fonction escape()
var exemple = "\n\r\t";
document.write(escape(exemple));
Résultat : %0A%0D%09
//Transforme les caractères de commande avec des codes ASCII de 0 à 31)
// dans leurs valeurs ASCII numériques et cela sous forme hexadécimale
31
Fonction isNaN()
Les Fonctions en JavaScript
if(isNaN(x))
{ alert(x + " n'est pas un nombre."); }
Fonction isFinite()
if(isFinite(x + 5 * y))
{ alert("Le résultat est un nombre fini.");
//Si la valeur assignée est NaN,
//le résultat retourné par isFinite sera false.
}
var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";
document.write(parseFloat(a));
document.write(parseFloat(b));
document.write(parseFloat(c));
document.write(parseFloat(d));
32
Les Fonctions en JavaScript
Fonction parseFloat()
54
NaN
12.5
NaN
var a = "54 a ", b = "d 54 " , c = 12.5, d = "toto";
document.write(parseInt(a));
document.write(parseInt(b));
document.write(parseInt(c));
document.write(parseInt(d));
Fonction parseInt()
54
NaN
12
NaN
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));
document.write(typeof (b));
document.write(typeof (c));
document.write(typeof (d));
33
Les Fonctions en JavaScript
Fonction String()
String
String
String
String
var a = "54 " , b = "d54", c = "54d";
document.write(Number(a));
document.write(Number(b));
document.write(Number(c));
Fonction Number()
54
NaN
NaN
34
Exercice 1
<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
Solution
36
Exercice 2
<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="Contrôler" onClick= "controle()">
</form>
</body>
</html>
37
Solution 1
<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="Contrôler" onClick= "controle()">
</form>
</body>
</html>
38
Solution 2
Classe et Objet
Une classe est un type qui est la description
d’un ensemble de :
◦ propriétés (les données) et de
◦ méthodes (les fonctions).
Un objet est une instance de classe (c’est à
dire une variable de type classe). On écrira :
◦ o.p pour accéder à une propriété p d’un objet o
◦ o.m() pour appeler une méthode m d’un objet o
39
DOM
Lorsqu’un document HTML est chargé dans un
navigateur, celui-ci fournit une interface DOM
(Document Object Model) pour accéder aux objets le
composant :
◦ Ces objets sont classés de manière hiérarchique
(notion d’arbre).
◦ L’objet le plus haut dans la hiérarchie est l’objet de la
classe window (fenêtre).
◦ Dans cette fenêtre, il y a un document HTML : c’est
l’objet document. Donc, L’objet window contient
l’objet document.et ainsi de suite ...
40
Classe et Objet
41
Classe et Objet
DOM
Lorsqu’une page Web est chargée dans un
navigateur, Javascript identifie plusieurs objets pour y
représenter les informations.
Ces objets sont classés de manière hiérarchique.
L’objet le plus haut dans la hiérarchie est l’objet de
la classe window (fenêtre).
42
Classe et Objet
DOM
Dans cette fenêtre, il y a un document
HTML : c'est l'objet document. Donc, L'objet fenêtre contient l'objet document (c’est la notion de hiérarchie).
Dans ce document, on trouve un formulaire au sens HTML : c'est l'objet formulaire. Donc, l'objet fenêtre contient un objet document qui lui contient un objet formulaire (hiérarchie 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 fenêtre contient : ◦ Le modèle hiérarchique
des objets en Javascript.
44
Classe et Objet
DOM
Dans un document HTML, on pourrait donc accéder aux objets de
la manière suivante :
45
// Accès à une propriété de l’objet button
window.document.form.button.value = "Déterminer"; // Accès à une méthode de l’objet button
window.document.form.button.focus(); // Accès à une méthode de l’objet window
window.alert("Hello world");
Remarque : l’objet window est souvent facultatif. On ne doit pas
forcément préciser son nom pour utiliser ses méthodes ou ses
propriétés.
Classe et Objet
DOM
On recommande d’utiliser la méthode
getElementById() pour accéder aux objets par
leur identifiant (attribut ID de l’élément HTML) :
46
var bouton = document.getElementById(’id_button’);
bouton.click(); // pour simuler un clic de souris sur ce bouton
Classe et Objet
DOM
Le script est exécuté chaque fois que l’événement 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
Les évènements en JavaScript
Exemple
onAbort (en cas d'interruption)
onChange (après 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 relâchant la touche)
48
Les évènements en JavaScript
Liste des évènements (1)
onLoad (en chargeant un fichier)
onMousedown (en maintenant la touche de souris appuyée)
onMousemove (en bougeant la souris)
onMouseout (En quittant l'élément avec la souris)
onMouseover (en passant sur l'élément avec la souris)
onMouseUp (en relâchant la touche de souris)
onReset (en initialisant le formulaire)
onSelect (En sélectionnant du texte)
onSubmit (en envoyant le formulaire)
onUnload (en quittant le fichier)
49
Les évènements en JavaScript
Liste des évènements (2)