Atelier Web 2
Atelier Web 2
Atelier Web 2
AU : 2010/2011
MODULE : ATELIER WEB2
PUBLIC : L1S2 TECHNOLOGIES DE
L’INFORMATIQUE
1
Javascript
• Introduction au langage Javascript
AU : 2010/2011
1
26/03/2011
AU : 2010/2011
Introduction au
langage Javascript
1.Motivations
2
26/03/2011
AU : 2010/2011
2.Définition
• Le Javascript est un langage de script incorporé
dans un document HTML.
3.Notions de base
• La casse : Javascript est sensible à la casse, il fait la
différence entre les minuscules et le majuscules.
• Le point virgule: chaque instruction se termine par
un point virgule (on peut omettre lorsqu’il y a retour à
la ligne )
•Les commentaires:
•// Tous les caractères derrière le sont ignorés
•/* Toutes les lignes comprises entre ces repères
sont ignorées par l'interpréteur de code */ 6
3
26/03/2011
AU : 2010/2011
Implantation des scripts
4
26/03/2011
AU : 2010/2011
Exemple
<script language="javascript">
//Fenêtre pour la saisie d’una variable
Var=prompt("insérer votre Prénom ");
/* la fenêtre pour
l’affichage*/
alert("Bonjour "+Var);
</script>
9
Exemple
<a onClick="Var=prompt('donnez votre prénom');
alert('Bonjour '+Var);">
Cliquez ici!
10
</a>
5
26/03/2011
AU : 2010/2011
3. Dans un fichier externe
On peut placer le code dans un fichier spécifique d'extension
.js et appeler ce fichier au besoin.
AU : 2010/2011
12
6
26/03/2011
AU : 2010/2011
On considère 3 types de boites de dialogue:
alert(), prompt(), confirm()
alert(‘Message à afficher’)
13
Var=confirm(‘Question’);
Var true si OK
Var false si Annuler
Exercice
Interprétez les lignes suivantes:
7
26/03/2011
AU : 2010/2011
Les variables
15
Les variables
AU : 2010/2011
16
8
26/03/2011
Les variables
AU : 2010/2011
2.Déclaration des variables
17
Les variables
AU : 2010/2011
18
9
26/03/2011
Les variables
AU : 2010/2011
Exercice:
correct incorrect Raison
Nom_De_Variable 12Nom_De_Variable
nom_de_variable [email protected]
nom_variable_123 Nom-de-variable
_707 break
19
Les variables
AU : 2010/2011
10
26/03/2011
Les variables
AU : 2010/2011
Exemple
<SCRIPT language="Javascript">
var a = 12; var b = 4;
function MultipliePar2(b) { var a = b * 2; return a; }
document.write("Le double de ",b," est
",MultipliePar2(b), "<br>");
document.write("La valeur de a est ",a);
</SCRIPT>
21
Les variables
AU : 2010/2011
Nom du
Description Exemples
type
undefined Variable indéfinie var mavariable;
var mavariable=true;
Variable logique. 2 états possibles
boolean var
true ou false
mavariablebis=false;
number Variable numérique var variable=666;
var variable="Marco
string Variable chaîne de caractères 22
Pantani";
11
26/03/2011
Les variables
AU : 2010/2011
4.Identifiez le type d’une variable
23
Les variables
AU : 2010/2011
12
26/03/2011
AU : 2010/2011
Les opérateurs
25
Les opérateurs
AU : 2010/2011
Opérateur Dénomination
+ opérateur d'addition
- opérateur de soustraction
* opérateur de multiplication
/ opérateur de division
= opérateur d'affectation
% opérateur modulo
26
13
26/03/2011
Les opérateurs
AU : 2010/2011
2.Les opérateurs de comparaison
Le résultat renvoyé par une opération de comparaison
est une valeur booléenne
Opérateur Dénomination
!= opérateur de différence
Les opérateurs
AU : 2010/2011
||
Vérifie qu'une des
OU logique expression1||expression2
conditions est réalisée
&&
Vérifie que toutes les
ET logique expression1&&expression2
conditions sont réalisées
14
26/03/2011
Les opérateurs
AU : 2010/2011
4.Les opérateurs d’affectation
+= X+=Y X=X+Y
-= X-=Y X=X-Y
*= X*=Y X=X*Y
/= X/=Y X=X/Y
X%=Y X=X%Y
%=
29
Les opérateurs
AU : 2010/2011
Augmente d'une
++ Incrémentation x++
unité la variable
Diminue d'une
-- Décrémentation x--
unité la variable
30
15
26/03/2011
Les opérateurs
AU : 2010/2011
6.Opérateur de concaténation
31
AU : 2010/2011
32
16
26/03/2011
AU : 2010/2011
1.Les structures de contrôle conditionnelles
•L’INSTRUCTION CONDITIONNELLE « IF »
L’instruction conditionnelle « if » simple
if (<condition>)
{<bloc d’instructions >}
if (<condition>)
{<bloc d’instructions 1>}
else
{<bloc d’instructions 2>}
33
17
26/03/2011
AU : 2010/2011
2.Les structures de contrôle itératives
while ( <condition> )
{
<bloc d’instructions>
} 35
do
{
<bloc d’instructions>
}
while (<condition>);
18
26/03/2011
AU : 2010/2011
Les Fonctions
37
Les Fonctions
AU : 2010/2011
38
19
26/03/2011
Les Fonctions
AU : 2010/2011
Exemple1:
function Affiche(message)
{document.write(message);}
Exemple2:
function somme(a,b)
{ som=a+b;
return som;}
39
Les Fonctions
AU : 2010/2011
Affiche('hello');
Res=somme(1,3);
40
20
26/03/2011
AU : 2010/2011
Notion d’objet
41
Notion d’objet
AU : 2010/2011
42
21
26/03/2011
Notion d’objet
AU : 2010/2011
<form name="form1">
Exemple: soit le formulaire suivant: <input type="radio"
name="r1" value="test"
Pour accéder au bouton radio : id="va"/> test <br />
window.document.form1.r1 <input type="button"
document.forms[0].r1 name="" value="ok" />
</form>
document.getElementById('va')
43
Notion d’objet
AU : 2010/2011
44
22
26/03/2011
AU : 2010/2011
Les formulaires
45
Les formulaires
AU : 2010/2011
23
26/03/2011
Les formulaires
AU : 2010/2011
•Les boutons radio
Propriété Description
name indique le nom du contrôle. Tous les
boutons portent le même nom.
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. 47
Les formulaires
AU : 2010/2011
24
26/03/2011
Les formulaires
AU : 2010/2011
•Liste de sélection
Propriété Description
name indique le nom de la liste
déroulante.
length indique le nombre d'éléments de la
liste.
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. 49
AU : 2010/2011
Les événements
50
25
26/03/2011
Les événements
AU : 2010/2011
Evénement Description
Abort
Cet événement a lieu lorsque l'utilisateur interrompt le chargement de l'image
(onAbort)
Blur Se produit lorsque l'élément perd le focus, c'est-à-dire que l'utilisateur clique hors de
(onBlur) cet élément, celui-ci n'est alors plus sélectionné comme étant l'élément actif.
Change
Se produit lorsque l'utilisateur modifie le contenu d'un champ de données.
(onChange)
Click
Se produit lorsque l'utilisateur clique sur l'élément associé à l'événement.
(onClick)
Se produit lorsque l'utilisateur double-clique sur l'élément associé à l'événement (un
dblclick
lien hypertexte ou un élément de formulaire). Cet événement n'est supporté que par
(onDblclick)
les versions de Javascript 1.2 et supérieures
Se produit lorsque l'utilisateur effectue un glisser-déposer sur la fenêtre du
dragdrop
navigateur.
(onDragdrop)
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
error Se déclenche lorsqu'une erreur apparaît durant le chargement de la page.
(onError) Cet événement fait partie du Javascript 1.1.
Focus Se produit lorsque l'utilisateur donne le focus à un élément, c'est-à-dire que cet
(onFocus) élément est sélectionné comme étant l'élément actif
keydown Se produit lorsque l'utilisateur appuie sur une touche de son clavier. 51
(onKeydown) Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
Les événements
AU : 2010/2011
keypress Se produit lorsque l'utilisateur maintient une touche de son clavier enfoncée.
(onKeypress) Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
Se produit lorsque l'utilisateur relâche une touche de son clavier préalablement
keyup
enfoncée.
(onKeyup)
Cet événement n'est supporté que par les versions de Javascript 1.2 et supérieures
Load
Se produit lorsque le navigateur de l'utilisateur charge la page en cours
(onLoad)
MouseOver Se produit lorsque l'utilisateur positionne le curseur de la souris au-dessus d'un
(onMouseOver) élément
MouseOut Se produit lorsque le curseur de la souris quitte un élément.
(onMouseOut) Cet événement fait partie du Javascript 1.1.
Reset Se produit lorsque l'utilisateur efface les données d'un formulaire à l'aide du bouton
(onReset) Reset.
Resize
Se produit lorsque l'utilisateur redimensionne la fenêtre du navigateur
(onResize)
Select Se produit lorsque l'utilisateur sélectionne un texte (ou une partie d'un texte) dans
(onSelect) un champ de type "text" ou "textarea"
Submit Se produit lorsque l'utilisateur clique sur le bouton de soumission d'un formulaire (le
(onSubmit) bouton qui permet d'envoyer le formulaire)
Unload
(onUnload)
Se produit lorsque le navigateur de l'utilisateur quitte la page en cours 52
26
26/03/2011
Les événements
AU : 2010/2011
Association des événements aux objets
abort Image
dragdrop Window 53
Les événements
AU : 2010/2011
submit Form
unload window
27
26/03/2011
AU : 2010/2011
Les objets de noyau
55
1. L’objet Date
Permet de travailler avec toutes les variables qui
concernent les dates et la gestion du temps.
Syntaxe :
•Nom_objet = new Date ();
•Nom_objet = new Date ("année, mois, jour");
•Nom_objet=new Date (année,mois,jour,heures,minutes,secondes);
56
28
26/03/2011
AU : 2010/2011
Méthodes de l’objet Date
Type de valeur
Méthode Description
retournée
getDate() Permet de récupérer la valeur du jour du mois Entier entre 1 et 31
getDay() Permet de récupérer la valeur du jour de la Entier entre 0 et 6
semaine pour la date spécifiée
getMonth() Permet de récupérer le numéro du mois Entier entre 0 et 11
getFullYear() Permet de récupérer la valeur de l'année sur 4 Entier (XXXX)
chiffres pour la date passée en paramètre
getYear() Permet de récupérer la valeur de l'année sur 2 Entier (XX)
chiffres pour l'objet Date.
getHours() Permet de récupérer la valeur de l'heure Entier entre 0 et 23
29
26/03/2011
AU : 2010/2011
2. L’objet Math
Méthode Description
valeur absolue de valeur Math.
abs(valeur)
60
30
26/03/2011
AU : 2010/2011
3. L’objet tableau
Un tableau est un ensemble de données de même type,
distingués par un indice. L'indice est placé entre [ ].
Syntaxe :
•var nom_tableau = new Array(dimension) ;
•var Les4saisons = new Array("printemps","été","automne","hiver")
• var Les4saisons2 = ["printemps", "été", "automne", "hiver"];
61
La propriété length
La propriété length donne le nombre d'éléments du
tableau.
Syntaxe : Nom_Tableau.length.
Exemple
<script language="JavaScript">
var mois= new Array(12);
var NbMois = mois.length ;
document.write("Il y a " + NbMois + "mois dans l'année");
document.write(" partagés en " + NbMois / 3 + " trimestres");
</script>
62
31
26/03/2011
AU : 2010/2011
Les méthodes
Méthode Description
reverse() Elle change l'ordre des éléments d'un tableau
sort() Elle trie un tableau suivant un ordre croissant ou décroissant
concat() Elle permet de concaténer plusieurs tableaux, c'est-à-dire de créer un
tableau à partir des différents tableaux. La méthode concat admet un
seul paramètre: NomTableau1.concat(Nom_Tableau2);
push() Elle ajoute un ou plusieurs éléments au tableau. L'ajout se fait à la fin
du tableau : NomTab.push(val1, val2, …., val n);
unshift() Elle ajoute un ou plusieurs éléments au tableau. L'ajout se fait au
début du tableau
pop() Elle supprime le dernier élément du tableau et retourne sa valeur
4. L’objet string
Syntaxe :
•chaine = new String("Je m'appelle Anis")
• chaine = "Je m'appelle Anis"
La propriété length
La propriété length indique la taille d'une chaîne de
caractères (Le nombre de ses caractères). Sa syntaxe
est: nomChaine.length.
64
32
26/03/2011
AU : 2010/2011
Les méthodes
Méthode Fonction Syntaxe
big Afficher le texte en une police plus grosse ch.big()
33
26/03/2011
34
AU : 2010/2011