Js Cours

Développement
des Applications
Web
JavaScript
2ème Année Licence

Informatique
Université de Laghouat
Remarques
1. N’oubliez pas de tester et comprendre les exemples pour

pouvoir résoudre les exercices.
2. En cas de problèmes, merci de me contacter:
bziani@lagh-univ.dz
JavaScript
1. Introduction:
JavaScript
1. Introduction:
I Langage crée en 1995 par Netscape Corporation.
JavaScript
1. Introduction:
I Langage de programmation utilisé avec les pages HTML.
JavaScript
1. Introduction:
I Langage interprété par les navigateurs Web.
JavaScript
1. Introduction:
I Langage interprété par les navigateurs Web.
I Langage ’client’ : exécuté chez l’utilisateur lors du
chargement de la page HTML
Code JavaScript dans votre page HTML
1. Exemple 1:
<body>
<script language=”javascript”>
document.write(”<h1>Introduction:</h1>”);
document.write(”2eme annee Informatique”);
</script>
</body>
Code JavaScript dans votre page HTML
1. Exemple 2:
<head>
function test(){
document.write(”<h1>Introduction:</h1>”);
document.write(”2eme annee Informatique”);
}
</script>
</head>
<body onload=”test()”>
</body>
JavaScript: les boites de dialogue
1. Boite alert(): permet d’afficher une boite de dialogue du

type avertissement.
2. Boite prompt(): permet d’ouvrir une boite de saisie pour
l’utilisateur.
3. Exemple:
<body>
var nom = prompt(”Quel est votre nom?”, ””);
alert(”Bonjour” + nom);
</script>
</body>
JavaScript: Les événements
1. Les événements sont des actions de l’utilisateur qui vont

pouvoir donner lieu à un traitement.
2. Avec java script, il est possible d’associer des fonctions à
des événements tels que la passage de la sourie, le
changement de la valeur d’une zone...etc.
3. Exemples d’événements:
onclick Cliquer sur l’élément

ondblclick Double-cliquer sur l’élément
onchange Changer la valeur d’un élément
onmouseover Faire entrer le curseur sur l’élément
onmouseout Faire sortir le curseur de l’élément
1. Exemple 1:
<head>
function afficher(){
var nom=document.getElementById(”Nom”).value;
alert(”Bonjour ”+nom + ” Votre nom contient
”+nom.length+ ” lettres”);
}
</script>
</head>
<body>
Votre nom: <br>
<input id=”Nom” type=”text” size=”30”>
<input id=”b1” type=”button” value=”Cliquez ici”
onclick=”afficher()”>
</body>
Explications
1. <input id=”Nom” type=”text” size=”30”>: Déclaration
d’une zone de saisie qui a un identificateur (id) et une
longueur (size).
2. <input id=”b1” type=”button” value=”Cliquez ici”
onclick=”afficher()”>: Déclaration d’un bouton qui a un
identificateur (id) et une valeur. L’événement onclick sur le
bouton est associé à la fonction afficher(). Si on clique sur
le bouton, la fonction afficher() est exécutée
3. var nom=document.getElementById(”Nom”).value;: La
variable nom reçoit la valeur de l’élément qui a comme
identificateur ”Nom”, donc le contenu de la zone de saisie.
4. La méthode alert() affiche le nom saisie ainsi que le nombre
de lettre qui composent ce nom.
1. Exemple 2:
<head>
function F1() {
document.getElementById(”t1”).value = ”Bonjour!”;
t1.style.backgroundColor = ”ffccaa”;}
function F2() {
document.getElementById(”t1”).value = ”Bonsoir!”;
t1.style.backgroundColor = ”aaccff”;}
</script>
</head>
<body>
<p>Cliquer sur les bouttons....</p>
<input type=”text” id=”t1” value=””>
<input type=”button” id=”b1” onclick=”F1()” value=”B1”>
<input type=”button” id=”b2” onclick=”F2()” value=”B2”>
</body>
JavaScript: Les boutons radio
1. Les éléments <input> avec l’attribut type=”radio” sont utilisés
pour définir des groupes d’options parmi lesquelles on ne peut
choisir qu’une valeur. L’attribut booléen checked indique le
bouton radio qui est sélectionné parmi le groupe.
2. Exemple:
<head>
<script>
function F1() { if (document.getElementById(”r1”).checked)
alert(”Bouton 1ere Annee”); }
function F2() { if (document.getElementById(”r2”).checked)
alert(”Bouton 2eme Annee”); }
</script>
</head>
<body>
<p>Niveau:<br>
<input type=”radio” name=”niveau” id=”r1”
onchange=”F1()”> 1ere Annee
<input type=”radio” name=”niveau” id=”r2”
onchange=”F2()”> 2eme Annee </p>
</body>
JavaScript: Les boutons checkbox
1. Les éléments <input> avec l’attribut type=”checkbox” sont utilisés pour sélectionner une ou plusieurs
valeurs. L’attribut booléen checked indique les boutons checkbox qui sont sélectionnés.
2. Exemple:
<head>
<script>
function F() { var n=0;
if (document.getElementById(”M1”).checked) n++;
alert(”Nombre de seletion: ”+n);
} </script> </head>
<body>
<p>Modules:<br>
<input type=”checkbox” id=”M1” value=”Algo”> Algorithmique
<input type=”checkbox” id=”M2” value=”Web”> Web
<input type=”checkbox” id=”M3” value=”Bdd” > Base de donnees <br>
<input type=”button” id=”b” value=”Test” onclick=”F()”></p>
</body>
3. N’oubliez pas de tester tous les exemples

JavaScript: Syntaxe
1. Largement inspiré des langages C et Java.

2. Langage Non typé: pas de type spécifié lors de la
déclaration des variables.
3. Exemples: var i, chaine, b ; // Déclaration de 3 variables.
i=2 ; chaine=”Bonjour” ; b=true ; // Affectation
4. Les types élémentaires : Boolean, number (entiers ou
réels), string (chaı̂ne de caractères)
5. Les types objets : Array (tableau), Date (date).
6. Pour déclarer des variables qui sont des instances du type
objets, on utilise la méthode new
7. Exemples: var tab = new array() ; var d = new Date () ; var
naissance = Date (1975,8,7) ;
JavaScript: Syntaxe
1. Les opérateurs:
+ : Addition == : comparaison
- : Soustraction < : Inférieur
* : Multiplication 6 : Inférieur ou égal
/ : Division > : Supérieur
% : Reste de la division entière > : Supérieur ou égal
= : Affectation != : Différent
2. Conversion de type
I var chaine1=”10”; var i= parseInt(chaine1); : parseInt:
Conversion chaı̂ne en entier. Même chose pour
parseFloat(chaine) : chaı̂ne en float
I var I=10; var c1=I.toString(); : toString(): Conversion entier
en chaı̂ne.
JavaScript: Syntaxe
1. Les structures conditionnelles:

if (expression booléenne)
{ instructions; }
else { instructions; }
2. Boucle While:
while (expression booléenne)
{ instructions; }
3. Boucle Do:
do { instructions; }
while (expression booléenne)
4. Boucle for:
for (initialisation; condition; incrementation)
{ instructions; }
JavaScript: Syntaxe
1. Les chaı̂nes de caractères:

I La méthode length permet d’obtenir la longueur de la
chaine.
I La méthode charAt(i) retourne le ième caractère de la chaine.
I La méthode substring(i,j) retourne sous chaine enter i et j.
I Exemple:
var s = ”Informatique”;
document.write(”Longueur= ”+s.length +
s.substring(3,6));
document.write(s.charAt(0) + s.charAt(8));
2. Les Fonctions: Exemples
function Bonjour()
{ document.write(”Bonjour”); }
function somme(a,b) {
return parseInt(a)+parseInt(b);}
JavaScript: Syntaxe
1. Les tableaux:
I Plusieurs méthodes de déclaration.
I T=[’a’,’b’,3,true], T1= new Array(’a’,’b’,3,true)
I T2= new Array(); T2[0]=’a’; T2[1]=’b’; T2[2]=3; T2[3]=true;
2. Pour chercher une valeur on utilise la méthode
indexOf(valeur)
3. Exemple: var a=[1,2,8,9,25] : a.indexOf(8)=2 et
a.indexOf(12)=-1 (la valeur 12 n’est pas dans le tableau).
4. Parcours : for (i=0 ; i<a.length ; i++)
{ document.write(a[i]+” ”) }
JavaScript: Syntaxe
1. Les tableaux:: Ajout et supression d’éléments

I Les méthodes associées sont du type pile ou file.
I Pile: la méthode push ajoute à la fin et la méthode pop
supprime et retourne le dernier élément.
I File: la méthode shift supprime et retourne le premier
élément et la méthode unshift ajoute un ou plusieurs
éléments au début du tableau.
I Exemple:
<body>
var T= new Array();
T.push(’D’);T.push(”Informatique”);
T.unshift(’L’, ’M’);
document.write(T.join());
document.write(”<br>” + T.join(”*”));
</script> </body>
JavaScript: Syntaxe
1. Les tableaux:: Quelques méthodes

I reverse: Inversion des éléments (T.reverse()).
I sort: Tri des éléments (T.sort()).
I toString: Convertir le tableau en une chaı̂ne
I Exemple:
<body>
var T= [20, 5, 12 , 5];
var T1=T.reverse();
document.write(T.join()+”<br>”);
document.write(T1.join(”*”));
T.sort();
var s=T.toString();
document.write(”<br>” + s);
</script> </body>
JavaScript: Syntaxe
1. L’objet Math:
I Pour utiliser les constantes et fonctions mathématiques.
I Math.log(x) (logarithme naturel); Math.pow(x,y) (xy );
Math.random() (nombre aléatoire compris entre 0 (inclus)
et 1 (exclu))
I Math.abs(-2) -> 2 ; Math.max(5, 7)-> 7 ; Math.PI -> 3.1416
I Math.floor(): arrondir à l’entier immédiatement inférieur
(ou égal).
I Math.ceil(): arrondir à l’entier immédiatement supérieur
(ou égal).
I Math.round(): arrondir à l’entier l’entier le plus proche.
I Math.trunc(): retourner la partie entière.
I Math.min(): renvoie le plus petit nombre d’une série de
nombres.
I Math.max(): renvoie le plus grand nombre d’une série de
nombres.
JavaScript: Syntaxe
1. L’objet Math:
I Exemple:
<body>
for (var i=1; i<=10; i++)
ˆ
document.write(”2”+i+”=”+Math.pow(2,i)+”<br>”); }
var n=11.1234;
document.write(”Nombre:”+n+”<br> Floor:”+
Math.floor(n) +”<br>Ceil:”+Math.ceil(n)+
”<br>Round:”+Math.round(n) + ”<br>trunc:”+
Math.trunc(n)+”<br>);
document.write(”Nombre:”+n+”<br> Floor:”+
document.write(Math.min(10.5,23,1,-5)+”<br>”+
Math.max(0.5,13,1,32));
</script>
</body>
JavaScript: Syntaxe
1. L’objet Date:
I L’objet Date permet la manipulation du temps: la date et
l’heure.
I var d = new Date(); : La variable d est initialisée avec
l’heure courante du PC.
I Il est aussi possible d’initialiser l’objet à une date donnée:
var d = new Date(”1995-12-17”);
I Quelques méthodes:
I getTime();: retourne le nombre de millisecondes écoulées
depuis le 01/01/1970.
I getFullYear();: l’année (à 4 chiffres)
I getMonth(); getDay(); getHours(); getMinutes();
getSeconds();
JavaScript: Syntaxe
L’objet Date
1. Exemple 1:
<body>
<script>
document.write(”<h1>Exemple: Objet Date().</h1>”);
var d = new Date();
document.write(”La date est: ”+ d +”<hr>”);
var Y=d.getFullYear();
var M=d.getMonth();
var D=d.getDay();
var H=d.getHours();
var Mi=d.getMinutes();
var S=d.getSeconds();
document.write(”Annee: ”+ Y +”<br>” + ”Mois: ” + M
+”<br>” + ”Jours: ” + D + ”<br>” + ”Heures: ” + H +
”<br>” + ”Minutes: ” + Mi + ”<br>” + ”Secondes: ” + S
); </script> </body>
JavaScript: Syntaxe
L’objet Date
1. Exemple 2:
<body>
<script>
document.write(”<h1>Exemple: Objet Date().</h1>”);
var d1 = new Date();
var i=0;
while(i < 1000)
{ document.write(i);
if (i%50==0) document.write(”<br>”);
i++;}
var d2 = new Date();
tempsMs = d2.getTime() - d1.getTime();
alert(”Le temps d’execution de la boucle est: ” +
tempsMs/1000 + ” secondes.”);
</script> </body>
Remarques
1. N’oubliez pas de tester et comprendre les exemples pour

pouvoir résoudre les exercices.
2. En cas de problèmes, merci de me contacter:
bziani@lagh-univ.dz

Js Cours

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

Js Cours

Transféré par

Droits d'auteur :

Formats disponibles

Développement

2ème Année Licence

1. N’oubliez pas de tester et comprendre les exemples pour

1. Boite alert(): permet d’afficher une boite de dialogue du

1. Les événements sont des actions de l’utilisateur qui vont

onclick Cliquer sur l’élément

3. N’oubliez pas de tester tous les exemples

1. Largement inspiré des langages C et Java.

1. Les structures conditionnelles:

1. Les chaı̂nes de caractères:

1. Les tableaux:: Ajout et supression d’éléments

1. Les tableaux:: Quelques méthodes

1. N’oubliez pas de tester et comprendre les exemples pour

Vous aimerez peut-être aussi