JavascriptDepot

Transcription

JavascriptDepot

Troisième Partie
JavaScript
I Introduction
1 – Comment insérer un script
a) Balise <script> ' </script>
<html ..>
<head>
<title>Appels JavaScript multiples</title>
<script type="text/javascript">
//<![CDATA[
.Instructions javascript
//]]>
</script>
</head>
b) Fichier externe
< script type="text/javascript" src="MonFichier.js">
</script>
<noscript>
<p>
Cette ligne s'affiche si le navigateur ne prend pas en charge JavaScript
</p>
</noscript >
c) A l'aide d'événements
<balise eventHandler="code Javascript à insérer">
<form>
<p>
<input type="button" value="Exemple" onclick="javascript:alert('Un mini script qui
marche !');" />
</p>
</form>
2 - Premier exemple
<title>Premier JS</title>
//<![CDATA[
alert(unescape("Cette ligne 1 a %E9t\351 cr\351\351e \n avec du code JavaScript
int%E9gr%E9."));
//]]>
</script>
</head>
<body>
<script type="text/javascript" src="JS1.js"></script>
<noscript>
<p>
Cette ligne s'affiche si le navigateur ne prend pas en charge JavaScript
</p>
</noscript >
</body>
</html>
Le fichier JS1.js contient :
alert(unescape("Cette ligne 1 a %E9t\351 cr\351\351e \n
avec du code JavaScript int%E9gr%E9."));
3) Afficher le contenu d'une variable
<head>
<title> </title>
//<![CDATA[
alert('Vous avez le bonjour de JavaScript ');
var Chaine = "Comment \347a marche?"
alert(Chaine);
//]]>
</script>
4 – Les commentaires
/*
Cette ligne fait partie du paragraphe de commentaire.
Cette ligne fait également partie du paragraphe de commentaire.
*/
alert("Exemple de commentaire"); // Les lignes de commentaires
//peuvent être placées à la suite des lignes de code
// Cette ligne de commentaire remplit une ligne à elle seule.
/* Voici une autre manière de créer un paragraphe de commentaire. */
</script>
II – Utilisation des identificateurs xhtml
1 – lecture du contenu
<body>
<div id="id1"> bonjour</div>
<script type="text/javascript" src="JS3.js"></script>
<noscript>
<p>cette ligne s´affiche si le navigateur ne prend pas en charge JavaScript
</p>
</noscript >
JS3.js
var choix;
choix = document.getElementById("id1");
alert(choix.innerHTML);
getElementById = obtenir l'élément de la page dont l'identificateur est innerHTML = accéder au contenu de l'élément
2 – Ecriture dans la page xhtml
<body>
<div id="id1"> bonjour</div>
<script type="text/javaScript" src="JS4.js"></script>
<noscript>
<p>cette ligne s´affiche si le navigateur ne prend pas en charge
JavaScript
</p>
</noscript >
var choix;
choix = document.getElementById("id1");
choix.innerHTML = "Salut, coucou";
III – Utilisation de prompt et des balises xhtml
<div id="id1"> </div>
//<![CDATA[
var prenom, nom, titre;
prenom = prompt("Votre pr\351nom");
nom = prompt('votre nom');
titre = prompt('titre de votre page');
document.getElementById("id1").innerHTML='<h1>'+titre+'<\/h1>';
document.getElementById("id1").innerHTML+='<h2>'+ 'par ' +prenom+' '+
nom+' '+'<\/h2>';
//]]>
</script>
Autre version avec fichier externe :
<div id="id1"> </div>
<script type="text/javascript" src="JS6.js">
</script>
document.getElementById("id1").innerHTML='<h1>'+titre+'<\/h1>';
document.getElementById("id1").innerHTML=
- "entre guillemets ou apostrophes du texte"
- Sans guillemets ni apostrophes des variables
- Entre du texte et une variable, entre deux variables ou
entre une variable et du texte : le signe +
Les balises xhtml en javascript :
<balise>.<\/balise_fermante>
Remarque : utilisation des codes ASCII ou
Unicode
prenom = prompt("Votre prénom");
prenom = prompt("Votre pr\351nom");
prenom = prompt(unescape('Votre pr%E9nom'));
Exemple de lecture : %E9 = é
Les caractères non traduits par escape ou unescape sont en italique grisé
V - Les objets de Javascript
1 – Notion de hiérarchie
Objet fenêtre
Objet Document
Objet Formulaire
Objet radio
Objet bouton
Objet texte
2 – Déclaration d'un objet
Pour les objets de type String, Math, mais pas document ni window
nouvel_objet = new type_objet(paramètres)
Exemple
monNombre = new Number(8);
A un objet sont associées des propriétés et des méthodes
Exemple
A un objet de type Math seront associées les méthodes cos, sin, A un objet de type String sera associée la propriété "nombre de caractères"
VI - L'objet document
1 – Propriétés dépréciées
•
•
•
•
•
•
•
•
•
•
•
•
alinkColor : couleur des liens lorsqu'ils sont cliqués
bgColor couleur d'arrière plan
charset jeu de caractères utilisés
cookie chaîne de caractères pouvant être sauvegardée chez
l'utilisateur
defaultCharset jeu de caractères normal
fgColor couleur pour le texte
lastModified dernière modification du document
linkColor couleur pour les liens
referrer pages déjà visitées
title titre du fichier
URL adresse URL du fichier
vlinkColor couleur pour les liens à des cibles visitées
2 – Utilisation
a) Généralité
document.propriété
Exemple déprécié : document.bgcolor
b) Modification de la valeur d'une propriété du document
<body id="corps">
<h1>Bonjour tout le monde</h1>
<form action=" ">
<p>
<input type="button" onclick="
var x=document.getElementById('corps');
x.style.backgroundColor ='#000000';
x.style.color = '#fff';
"
/>
</p>
</form>>
</body>
ModifColor2.html
VII - Les chaînes de caractères
(l'objet String)
1 - Déclaration
chaine1 = 'Ceci est une chaine de caracteres ';
chaine2 = new String("ceci est une autre chaine de caracteres");
2 – Une propriété
length : propriété donnant le nombre de caractères
Exemple : chaine1.length nous donnera 34
3 – Quelques méthodes
•
•
•
•
toUpperCase(), toLowerCase() : mise en majuscules ou en minuscules
substring(x, y) : extraction des caractères de x à y (y non compris)
charAt(x) : recherche du caractère d'indice x
indexOf(c), indexOf(chaine) : recherche de l'indice d'un caractère ou
d'une chaîne de caractères
• indexOf(c, x), indexOf(chaine,x) : recherche de l'indice d'un caractère ou
d'une chaîne à partir de la position x
• lastIndexOf(chaine) : indice de la dernière occurrence de la chaîne
4 - Exemples
<div id="debut" ><h2>Phrase</h2></div>
<div id="ici"><h2>Phrase en majuscule </h2></div>
<div id="long"><h2>Nombre de caractères : </h2></div>
<div id="alpha"><h2>extraction de sous chaines </h2></div>
//<![CDATA[
test1 = 'je vous souhaite le bonjour ';
test2 = new String(unescape("j%27esp%E8re que vous allez bien"));
phrase = test1+'<br />'+test2;
document.getElementById("debut").innerHTML+='<h1>'+phrase+'<\/h1>';
document.getElementById("ici").innerHTML+=phrase.toUpperCase();
document.getElementById("long").innerHTML+=phrase.length;
alpha=document.getElementById("alpha");
alpha.innerHTML+=phrase.substring(0,4);
alpha.innerHTML+=phrase.charAt(10);
alpha.innerHTML+=phrase.indexOf('k');
alpha.innerHTML+=phrase.indexOf("k",5);
beta = new String('il fait beau et chaud');
alpha2=document.getElementById("alpha2");
alpha2.innerHTML+= '<h2>'+beta+'<\/h2>';
alpha2.innerHTML+= beta.indexOf('au');
alpha2.innerHTML+=beta.indexOf('au',12);
alpha2.innerHTML+=beta.lastIndexOf('au');
alpha2.innerHTML+=beta.lastIndexOf('ra');
//]]>
</script>
VIII – Introduction des fonctions
1 – Exemple 1
<head>
function afficher_message (message) {
alert(message);
}
</script>
</head>
<body>
//<![CDATA[
afficher_message(unescape("Ce texte a %E9t%E9 affich%E9 gr%E2ce %E0 une
fonction"));
//]]>
</script>
</body>
</html>
2 – Exemple avec prompt
<head>
<title></title>
function afficher_message (message) {
alert(message);
}
</script>
</head>
<body>
//<![CDATA[
message=prompt("tapez votre message");
afficher_message(message);
//]]>
</script >
</body>
IX – L'objet Math
1 – les opérateurs de base
var nombre;
var resultat;
var res= document.getElementById("res");
nombre = prompt();
resultat = nombre / 4;
res.innerHTML+=resultat;
resultat = nombre - 25;
resultat = nombre * 2;
resultat = nombre+50;
resultat = 50+parseInt(nombre);
2 – Autres opérateurs
++nombre;
nombre = nombre +1;
--nombre;
nombre = nombre -1;
resultat += nombre;
resultat = resultat+nombre;
resultat -= nombre;
resultat = resultat – nombre;
resultat /= nombre;
resultat = resultat/nombre;
resultat *= nombre;
resultat = resultat * nombre
Méthode
description
Exemple
abs(x)
Retourne la valeur absolue de x, il renvoie donc le nombre
s'il est positif, son opposé (positif) s'il est négatif
•x = Math.abs(3.26) donne x = 3.26
•x = Math.abs(-3.26) donne x = 3.26
ceil(x)
Retourne l'entier supérieur ou égal à x
•x = Math.ceil(6.01) donne x = 7
•x = Math.ceil(3.99) donne x = 4
floor(x)
Retourne l'entier inférieur ou égal à x
•x = Math.floor(6.01) donne x = 6
•x = Math.floor(3.99) donne x = 3
Retourne le plus grand des deux nombre donnés en
paramètre
•x = Math.max(6,7.25) donne x = 7.25
•x = Math.max(-8.21,-3.65) donne x =
-3.65
•x = Math.max(5,5) donne x = 5
min(N1, N2)
Retourne le plus petit des deux nombres donnés en
paramètre
•x = Math.min(6,7.25) donne x = 6
•x = Math.min(-8.21,-3.65) donne x =
-8.21
•x = Math.min(5,5) donne x = 5
pow(N1, N2)
Retourne le nombre 1 à la puissance 2
•x = Math.pow(3,3) donne x = 27
•x = Math.pow(9,0.5) donne x = 3
random()
Retourne un nombre aléatoire compris entre 0 et 1
•x=Math.random()
x=0.6489534931546957
round(x)
Arrondit à l'entier le plus proche de x
•x = Math.round(6.01) donne x = 6
sqrt(Valeur)
Retourne la racine carrée du nombre passé en paramètre
•x=Math.sqrt(9) donne 3
max(N1, N2)
donne
4 - Exemples
a) Quelques méthodes
n= Math.random();
r= Math.floor(n*1000+1);
//entier inférieur ou égal à n*1000+1
b) Opérateur with
var res=document.getElementById("res");
res.innerHTML+=unescape("<br />nombre al%E9atoire tir%E9 entre 0 et 1 = ")+n;
with (Math){
res.innerHTML+=unescape("<br />nombre al%E9atoire tir%E9 entre 1 et 1000
= ")+r;
res.innerHTML+=unescape("<br />entier sup%E9rieur %E0a ")+n+' = '+ceil(n);
res.innerHTML+=unescape("<br />entier inf%E9rieur %E0 ")+n+' = '+floor(n)
res.innerHTML+=unescape("<br />entier le plus proche de ")+n+' = '+round(n);
}
Ou encore :
var res=document.getElementById("res");
with (Math){
with (res){
innerHTML+=unescape("<br />nombre al%E9atoire tir%E9 entre 1 et 1000 =
")+r;
innerHTML+=unescape("<br />entier sup%E9rieur %E0 ")+n+' = '+ceil(n);
innerHTML+=unescape("<br />entier inf%E9rieur %E0 ")+n+' = '+floor(n);
innerHTML+=unescape("<br />entier le plus proche de ")+n+' = '+round(n);
}
}
X – L'objet Date
1 - Définition
nombre de millisecondes depuis le 1 1 1970
2 – Déclaration
permet de stocker la date et l'heure actuelle
Nom_de_l_objet = new Date();
date1 = new Date();
Nom_de_l_objet = new Date("mois jour année heures:minutes:secondes")
date2 = new Date("november 21 2008 00:45:00");
Nom_de_l_objet = new Date(year, month, day). Les paramètres omis sont mis à
zéro par défaut
date3 = new Date(2008,10,21);
Nom_de_l_objet = new Date(year, month, day, hours, minutes, seconds)
date4 = new Date(2008,10,21,8,0,0);
date1.html
a) Lecture de valeur de dates
Permet de récupérer la valeur du jour du
mois
L'objet retourné est un entier (entre 1 et 31) qui
correspond au jour du mois:
getDay()
Permet de récupérer la valeur du jour de la
semaine pour la date spécifiée
L'objet retourné est un entier qui correspond au jour de
la semaine:
•0: dimanche
•1: lundi ...
getHours()
Permet de récupérer la valeur de l'heure
correspond à l'heure
getMinutes()
Permet de récupérer la valeur des minutes
correspond aux minutes
getSeconds()
Permet de récupérer la valeur des
secondes
correspond aux seconds
getTime()
Permet de récupérer le nombre de
secondes depuis le 1er janvier 1970
L'objet retourné est un entier. Cette méthode est très
utile pour passer d'une date à une autre, soustraire ou
ajouter deux dates, ...
getMonth()
Permet de récupérer le numéro du mois
correspond au mois:
•0: janvier
•1: février ...
getYear()
Permet de récupérer l'année
À partir de 1900
getDate()
b) création de dates
setDate()
Change la date d'un mois. Entre 1 et 31
setDay()
Permet de récupérer la valeur du jour de la
semaine pour la date spécifiée
Change l'heure d'une date spécifique.
setHours()
Entre 0 et 23.
setMinutes()
Change les minutes d'une date spécifique.
Entre 0 et 59.
setSeconds
Change les secondes
setTime()
Change la valeur de l'objet Date.
setMonth()
Change le mois d'une date spécifique.
Entre 0 et 11.
setYear()
Change l'année d'une date spécifique.
c) Exemples
var naissance=new Date();
with (naissance ){
setDate(14);
setMonth(10);
setFullYear(2008);
setYear(08);
setHours(0);
setMinutes(45);
setSeconds(0);
}
alert('Date naissance = '+naissance);
with (naissance ){ setYear(08+2000);
.
}
alert('Date naissance = '+naissance);
//jour du mois = naissance.setDate()
//mois (0 = Janvier)
//année
//année
//heure
//heure mn
//heure sc
//année
date3.htm
var date=document.getElementById("date");
var aujourdhui=new Date();
with (aujourdhui ){
j=getDate();
m=getMonth();
d=getDay();
fy=getFullYear();
y=getYear();
h=getHours();
mm=getMinutes();
s=getSeconds();
}
//jour du mois = aujourdhui.getDate()
//mois (0 = Janvier)
//jour de la semaine 0 = dimanche
//année
//année
//heure
//heure mn
//heure sc
date5.htm
date.innerHTML="Nous sommes le = "+d+' '+j+' '+m+' '+fy;
date.innerHTML+="<br />en plus clair "+aujourdhui.toLocaleString()
date6.htm
XI- Les structures de contrôle
1 - Les opérateurs
a) Calcul arithmétique
- autres
Binaires
- Binaires
||
Addition
+
&&
-
Soustraction
*
Multiplication
/
Division
%
Modulo
Unaire
!
- Unaires :
-
Opposé
++ Incrémentation
--
-monSolde
i++ ; équivaut à i = i + 1 (Pratique)
++i ; l'incrémentation est faite avant
d'utiliser la valeur de i
k-- ; équivaut à k = k - 1
Décrémentation --k ; la décrémentation est faite avant
d'utiliser la valeur de k
b) Comparaison
Inférieur strict
x < 2 ; compteur < 101
'femme' < 'homme'
>
Supérieur strict
x > 2 ; compteur > x
'chat' > 'chien'
<=
Inférieur large
x <= 2 ;
>=
Supérieur large
x >= 2 ;
==
Egal ( "identique à" )
x == 2 ;
!=
Différent
x != 2 ;
Binaires
<
c) Affectation arithmétique
Addition
x += y signifie x = x + y
-=
Soustraction
x -= y signifie x = x - y
*=
Multiplication
x *= y signifie x = x * y
/=
Division
x /= y signifie x = x / y
%=
Modulo
x %= y signifie x = x %
+=
2 – Les alternatives
a) Alternative à 1 branche
if (condition)
instruction;
if (condition) {
instructions;
}
b) Alternative à 2 branches
if (condition)
instruction;
else
instruction;
if (condition)
instruction;
else{
instructions;
}
if (condition){
instructions;
}
else
instruction;
if (condition){
instructions;
}
else{
instructions;
}
c) Exemples
scoreF = prompt("score de la France");
scoreU = prompt("score de l'Uruguay");
if (scoreF > scoreU)
alert(unescape("La France a gagn%E9"));
var scoreF, scoreU;
scoreF = window.prompt(" score de la France ");
scoreU = window.prompt(" score de l'Uruguay ");
else
alert(unescape("La France n'a pas gagn%E9"));
var scoreF, scoreU;
scoreF = prompt(" score de la France ");
scoreU = prompt(" score de l'Uruguay ");
else
if (scoreF == scoreU)
alert("match nul");
else
alert("La France a perdu !");
If3.htm
var aujourdhui = new Date();
var cejour = aujourdhui.getDay();
if (cejour == 0)
jour = " dimanche ";
else
if (cejour == 1)
jour = " lundi ";
else
if (cejour == 2)
jour = " mardi ";
else
if (cejour == 3)
jour = "mercredi";
else
if (cejour == 4)
jour = " jeudi";
else
if (cejour == 5)
jour = " vendredi";
else
jour = " samedi ";
alert(jour);
calendrier.htm
d) Alternative à n branches
switch (variable){
case valeur1:
instructions;
break;
case valeur2:
instructions;
break;
..
case valeurn:
instructions;
break;
default:
instructions;
}
var cejour = aujourdhui.getDay();
switch (cejour){
case 1:
jour = "lundi";
break;
case 2:
jour = "mardi";
break;
case 4:
jour = "jeudi";
break;
case 3:
jour = "mercredi";
break;
case 5:
jour = "vendredi";
break;
case 0:
jour = "dimanche";
break;
case 6:
jour = "samedi";
break;
default:
jour="erreur"
}
alert(jour);
calendrier2.htm
3 – Les répétitions
a) Boucle for
for (initialisations ; condition d'arrêt ; instructions de fin) {
instructions ;
}
for (compteur = 0; compteur < 5; ++compteur) {
alert("bonjour");
}
for(compteur = 1; compteur <=5; ++compteur) {
if(compteur == 3)
continue;
alert("compteur = "+compteur);
}
b) Boucle while
while (condition d'arrêt){
instructions ;
}
var compteur = 1;
while (compteur <=5) {
++compteur;
}
var compteur = 10;
while (compteur > 0) {
alert("compteur= " + compteur);
--compteur;
}
var compteur = 1;
while (compteur <= 100) {
alert("compteur= " + compteur)
compteur *=2;
}
c) Boucle do
' while
do{
instructions ;
}while (condition d'arrêt);
var compteur = 1;
do{
++compteur;
while4.xhtml
} while (compteur <=5) ;
XII - Les tableaux
1 – Les déclarations
var tab1 = new Array(4);
var tab2 = new Array(1,2,3,4,5,6);
var tab3 = [8,10,15,4,-4,78,-4];
var tab4 = new Array()
2 - Utilisation
a) Entrer des valeurs dans un tableau
tab1[0]=12;
tab4[8]=20;
tab2[i] = x + y;
b) lire les valeurs dans un tableau
x = tab1[0];
y = tab4[8] + tab2[10];
z = tab2[i] ;
c) exemple
var scores1 = new Array(4);
var scores2 = new Array(1,2,3,4,5,6);
var scores3 = [8,10,15,4,-4,78,-4];
var scores4 = new Array()
//affichage contenu des tableaux
var tab = document.getElementById("tab1")
affichage = '<br />Scores 1 = '+scores1[0]+' '+scores1[1]+' '+scores1[2]+'
'+scores1[3];
tab.innerHTML += affichage;
affichage = '<br />Scores 2 = '+scores2[0]+' '+scores2[1]+' '+scores2[2]+'
'+scores2[3]+' '+scores2[4]+' '+scores2[5];
tab.innerHTML+=affichage;
affichage ='<br /> scores3 = '+scores3 +'<br />scores 4 = '+scores4;
tab.innerHTML+=affichage;
tab1.htm
3 – Une propriété
length : nombre d'éléments d'un tableau
Exemple : tab.length
Exemple
nb1 = scores1.length;
tab = document.getElementById("tab2")
affichage = '<br />taille de scores1 : '+nb1;
affichage += '<br />taille de scores2 : '+ scores2.length;
affichage += '<br />taille de scores3 : '+scores3.length;
affichage += '<br />taille de scores4 : '+scores4.length;
tab.innerHTML += affichage;
tab2.htm
Remarque : tableau à plusieurs dimensions
var a = new Array(4)
for (var i=0; i < a.length; ++i){
a[i] = new Array(i*2);
for (j= 0; j <i*2; j++)
a[i][j] = i*j;
}
var tab = document.getElementById("tab1");
tab.innerHTML = a;
var message = "";
for (i=0; i < a.length; ++i){
for (j= 0; j < i*2; j++)
message += a[i][j]+ "
message += "<br />";
}
tab.innerHTML += "<br />"+ message;
";
tab2.htm
4 – Une application des tableaux
maintenant = new Date();
j = maintenant.getDate();
d = maintenant.getDay();
mo = maintenant.getMonth();
y = maintenant.getYear();
h = maintenant.getHours();
m = maintenant.getMinutes();
s = maintenant.getSeconds();
//date courante
//jour du mois
//jour de la semaine
Date.xhtml
Mois=new Array ("Janvier", unescape("F%E9vrier"),"Mars","
Avril","Mai","Juin","Juillet",unescape("Ao%FBt"), "Septembre",
"Octobre","Novembre",unescape("D%E9cembre"));
Jour=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
messageh="il est "+h+" heures "+m+" mn "+s+" secondes";
messaged = "nous sommes le "+Jour[d]+" "+j+" "+" "+Mois[mo]+" "+y;
date = document.getElementById("date");
heure = document.getElementById("heure");
heure.innerHTML=messageh;
date.innerHTML=messaged;
5 - les méthodes
concat()
Concatène les éléments de tableaux
join(séparateur)
concatène les cases du tableau avec le séparateur
pop()
dépile et retourne le dernier élément du tableau
push(val,...)
ajoute des éléments au tableau
reverse()
renverse le tableau
shift()
supprime et retourne le 1er élément
slice(indicedeb, indicefin) retourne une portion du tableau
sort()
tri des éléments
splice(indexdépart, nbel,
val, ...)
Ajoute un ou plusieurs nouveaux éléments dans un tableau.
Écrase en le faisant des éléments existants
toString()
conversion du tableau en chaîne
unshift(val,...)
insère des éléments
6 - Exemples
//différents types de déclaration des tableaux de chaines
noms = new Array('Tariq Abdul-Wahad','Tony Parker','Scottie Pippen');
joueur = document.getElementById("joueur");
joueur.innerHTML=unescape("pr%E9nom du dernier joueur : ")+noms[2].substring(0,7);
//scinder une chaine
parties=noms[0].split(" ");
joueur.innerHTML+=unescape("<br />
pr%E9nom obtenu apr%E8s split sur l
espace")+parties[0]+"<br />nom obtenu
avec split"+parties[1]:
//fusion
nomcomplet=parties.join(" ");
joueur.innerHTML+="<br />nom complet :"+
nomcomplet;
//tri d'un tableau
nom_tri= noms.sort();
affichage = unescape('<br />tableau tri%E9')+
'<br />'+noms[0]+'<br />'+noms[1]+'<br
/>'+noms[2] ;
joueur.innerHTML+=affichage;
noms.push('Dennis Rodman');
noms.push('Michael Jordan','Jalen Rose');
affichage = 'Contenu du nouveau tableau avec push<br />'+noms;
noms.reverse();
affichage = 'Contenu du nouveau tableau avec reverse<br />'+noms;
jeu = noms.pop();
affichage = 'Contenu du nouveau tableau avec pop<br />'+noms;
joueur.innerHTML+='<br /><br />et joueur ='+jeu;
jeu = noms.shift();
affichage = 'Contenu du nouveau tableau avec shift<br />'+noms;
joueur.innerHTML+='<br /><br />et joueur ='+jeu;
noms.unshift("Jalen Rose");
affichage = 'Contenu du nouveau tableau avecunshift<br />'+noms;
jeu=noms.join("**");
affichage = 'Contenu du nouveau tableau avec join<br />'+jeu;
jeu=noms.slice(1,2);
affichage = 'Contenu du nouveau tableau avec slice<br />'+jeu;
XIII - L'objet navigator
1 – Quelques propriétés de l'objet navigator
Propriété
Description
Pour votre
navigateur
appCodeame
retourne le code du navigateur.
appame
retourne le nom du navigateur (la plupart du
temps la marque). Cette propriété est utile pour
différencier les navigateurs de Netscape et de
Microsoft.
Netscape
appVersion
retourne la version du navigateur. Cette
propriété prend la forme suivante: Numéro de
version (plateforme (système d'exploitation),
nationalité)
4.0 (compatible;
MSIE 6.0; Windows
NT 5.1)
userAgent
retourne la chaîne de caractères qui comprend
toutes les informations. Les propriétés ci-dessus
offrent un moyen pratique de récupérer une
partie de cette information (cette chaîne étant de
longueur variable, il ne serait pas évident d'en
récupérer une portion sans les autres
propriétés...)
Mozilla/4.0
(compatible; MSIE
6.0; Windows NT 5.1)
Mozilla
2 - exemples
var navi = document.getElementById("navi");
message="<ul>";
message+="<li>Nom de code : "+navigator.appCode@ame+"</li>";
message+="<li>Nom de l'application : "+navigator.app@ame+"</li>";
message+="<li>Version de l'application : "+navigator.appVersion+"</li>";
message+="<li>Agent utilisateur : "+navigator.userAgent+"<\/li>";
message+="</ul>";
navi.innerHTML = message;
navi1.html
• Ou encore
message="<ul>";
with (navigator){
message+="<li>Nom de code : "+appCodeName+"<\/li>";
message+="<li>Nom de l'application : "+appName+"<\/li>";
message+="<li>Version de l'application : "+appVersion+"<\/li>";
message+="<li>Agent utilisateur : "+userAgent+"<\/li>";}
message+="</ul>";
navi.innerHTML = message;
navi3.xhtml
•Et enfin
for (prop in navigator) {
navi.innerHTML += "<br />prop : " + navigator[prop];
}
for (i in document) {
navi.innerHTML += "<br />i : " + document[i];
}
navi4.xhtml
XIV - L'objet window
1 - Exemple
var fen=document.getElementById("fen");
fen.innerHTML=unescape('<h1>Ma fen%E8tre<\/h1>');
var message="";
window.status=unescape("exemple d'utilisation des propri%E9t%E9 de l'objet window");
for (i in window){
message += unescape("propri%E9t%E9 : ")+i+ unescape("%A0%A0%A0% A0
%A0%A0%A0%A0%A0%A0%A0Valeur : ")+window[i]+'<br />';
}
fen.innerHTML += message;
window1.html
Activer la modification de la barre d'état sous FF
Activer la modification de la barre d'état sous IE
2 - Quelques méthodes de l'objet window
alert() prompt() confirm()
open() close() moveTo() moveBy() resizeTo()
back() :
go()
blur() :
focus() :
forward() :
home()
print()
retour à la page précédente
Avance ou recule du nombre de pages désiré dans l'historique
sauvegardé
enlève le "focus"
donne le "focus"
opposé de back ; permet d'avancer dans l'historique
(Netscape) dirige le navigateur vers la première page
imprime le contenu de la page
3 - Exemples
function Retour(){
history.back();
}
<input type="button" value="retour" onclick="Retour();" />
function Retour(i){
if (i==1)
history.back();
else
history.go(-history.length);
}
<input type="button" value="Précéeacute;dente" onclick="Retour(1);" />
<input type="button" value="Première" onclick="Retour(2);" />
4 – Méthode open()
a) description
window.open("URL","nom_de_la_fenetre","options_de_la_fenetre");
directory = yes/no
Affiche ou non les boutons de navigation
location = yes/no
Affiche ou non la barre d'adresse
menubar = yes/no
Affiche ou non la barre de menu (fichier, édition, )
resizable = yes/no
Définit si la taille de la fenêtre est modifiable ou non
scrollbars = yes/no
Affiche ou non les ascenseurs (barres de défilement)
screenX (N) screenY (N) ou left top(IE)
Coordonnées en x et y de la fenêtre
status = yes/no
Affiche ou non la barre d'état
toolbar = yes/no
Affiche ou non la barre d'outils
width = largeur
(en pixels)
height = hauteur
(en pixels)
Définit la largeur
Définit la hauteur
b) exemples
var hauteur=screen.availHeight;
var largeur=screen.availWidth;
function ouvr_fen(){
obj=window.open("../exemples/DemoGenerale.xhtml",'Nellefen',"directory=1,lo
cation=1,menubar=1,scrollbars=1,status=yes,resizable=yes,toolbar=1,width=40,height=
50,top=100,left=100");
}
function ChangerTaille()
{
obj.moveTo(0,0);
obj.resizeTo(largeur,hauteur);
}
window4.html
<form action="mailto:[email protected]" id="form1">
<p>
<input type="button" onclick="ouvr_fen()" value="Nouvelle fenêtre" />
<input type="button" onclick="ChangerTaille()" value="Modifer fenêtre" />
</p>
</form>
function ouvr_fen(){
obj=window.open("NelleFen.xhtml ",'Nellefen',
"directory=1,location=1,menubar=1,scrollbars=1,status=yes,resizable=yes,toolbar=1,width=300,hei
ght=150");
return obj;
}
function deplacer_fen(fen){
x=prompt("déplacement en x=");
y=prompt("déplacement en y=");
fen.moveBy(x,y);
}
function imprim_fen(fen){
fen.print();
}
function fermer_fen(fen){
fen.close();
}
<form action="mailto:[email protected]" id="form1">
window4.html
<p>
<input type="button" onclick="fen = ouvr_fen()" value="Nouvelle fenêtre" />
<input type="button" onclick="ChangerTaille(fen)" value="Modifer fenêtre" />
<input type="button" onclick="deplacer_fen(fen);" value="Deplacer nouvelle" />
<input type="button" onclick="imprim_fen(fen);" value="imprimer nouvelle fenetre" />
<input type="button" onclick="fermer_fen(fen);" value="Fermer nouvelle fenetre" />
<input type="button" onclick="self.print();" value="Imprimer cette fenetre" />
</p>
</form>
XV - Les minuteries
1 – Les méthodes
setInterval() : exécution de code JS à intervalles réguliers
clearInterval() : arrêt de la minuterie
setTimeout() : exécution de code JS au bout d'un délai
clearTimeout() : annule setTimeout
2 - Exemples
a) clearInterval() et setInterval()
<form id="form1" action=" ">
<p>
<input type="text" size="30" name="horloge" />
<input type="text" name="date" />
<input type="button" value="démarrer le chronomètre"
name="depart" onclick="demarrer();" />
</p>
</form>
var depart=0;
var m,h,y,j,mo,s,d;
Mois=new Array ("Janvier", unescape("F%E9vrier"),"Mars","
Avril","Mai","Juin","Juillet",unescape("Ao%FBt"), "Septembre",
"Octobre","Novembre",unescape("D%E9cembre"));
Jour=new Array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","samedi");
function demarrer()
{
if (depart == 1){
clearInterval(intervalle);
document.forms["form1"].depart.value= unescape("d%E9marrer le chronom%E8tre");
depart=0;
}
else{
maintenant = new Date();
j = maintenant.getDate();
mo = maintenant.getMonth();
d = maintenant.getDay();
s=maintenant.getSeconds();
m=maintenant.getMinutes();
h=maintenant.getHours();
y=maintenant.getFullYear();
intervalle=setInterval('chronos()',1000);
document.forms["form1"].depart.value= unescape("arr%EAter le chronom%E8tre");
depart=1;
}
}
function chronos()
{
s++;
if (s == 60){
s = 0;
m++;
}
if (m == 60){
m = 0;
h++;
}
if (h == 24)
h = 0;
message=Jour[d]+" "+j+" "+Mois[mo]+" "+y;
document.forms["form1"].horloge.value=message;
message=h+" h "+m+" mn "+s;
document.forms["form1"].date.value=message;
}
chrono.html
b) setTimeout()
pos = 0;
msg = "Alors c'est pas trop dur le Javascript ?";
msg ="...
..."+msg;
defilement(msg);
function defilement(message)
{
//affiche dans la barre d'état msg allant de pos à fin + msg de début à pos
window.status = msg.substring(pos,msg.length)+msg.substring(0,pos);
pos++;
if (pos > msg.length) pos = 0;
//l'exécution de la fonction est retardée de 0,1 secondes
window.setTimeout("defilement()",100);
}
chrono2.html
XVI – L'objet Image
1 - Propriétés
border
largeur du cadre
complete
false tant que le chargement n'est pas fini
height
hauteur
hspace
espace horizontal
lowsrc
URL de l'image basse résolution
name
nom de l'image
src
URL de l'image
vspace
espace vertical
width
largeur de l'image
2 - Exemple
function Ordi()
{
document.images["envoi"].src='../ImagesVideo/femmeordi.jpg';
document.images["envoi"].height="550";
document.images["envoi"].width="600";
}
function Balai()
{
document.images["envoi"].src='../ImagesVideo/fond-ecran.jpg';
document.images["envoi"].height="500";
document.images["envoi"].width="600";
}
<p>
<img src="../ImagesVideo/fond-ecran.jpg" alt="Fond d'écran"
height="113" width="150" id="envoi" onmouseover="Ordi();"
onmouseout="Balai();" />
Img1.html
</p>

JavascriptDepot

Transcription

Documents pareils

Saint-Maximin

Brignoles

sujet - LaCIM

DEMANDE DE PERMIS DE CONDUIRE INTERNATIONAL Le

www.var-initiative.fr varinitiative83 info@var

Javascript/DHTML Informatique M2 Master GMI Aide mémoire

Réunion d`Information - Maison de l`emploi Est-Var

creation web dynamique

Développement éco du cœur du Var | CCI VAR

JavaScript - Travaux Pratiques 1