docdocument.write(birthday)
download 
Plainte Transcription
document.write(birthday)
JAVASCRIPT
LE DRUILLENNEC
IUT SRC 2014 - 2015
DOM = Document Object Model
API (Application Programming Interface) pour
la manipulation de HTML / XML
Définit la structure logique des documents
Définit la façon d’y accéder, de la manipuler
Créer
des documents
Parcourir leur structure
Ajouter, effacer, modifier des éléments
Ajouter, effacer, modifier leur contenu
Voici le code source d’une page simple :
<html>
<head>
<title>Un titre</title>
</head>
<body>
<p> Un essai <em>de texte</em>.</p>
</body>
</html>
Et sont schéma :
Les objets du navigateur :
Accéder aux éléments
L'objet document possède trois méthodes
principales :
- getElementById();
Cette méthode permet d'accéder à un
élément en connaissant son Id qui est
simplement l'attribut id de l'élément.
Exemple : getElementById()
Modifier puis lire un champs a partir de son id :
<input type="text" id="champ_input"><br>
<input type="button" onclick="f()" value="modifier le champ">
<script type="text/javascript" >
function f()
{
var obj = document.getElementById("champ_input");
alert('le champ a pour valeur : "'+obj.value+"'"),
obj.value="autre valeur";
alert('maintenant il contient : "'+obj.value);
}
</script>
Accéder aux éléments
L'objet document possède trois méthodes
principales :
- getElementsByTagName();
Cette méthode permet de récupérer, sous la
forme d'un tableau, tous les éléments de la
même famille.
Exemple : getElementsByTagName()
<html><head>
<script type="text/javascript">
window.onload = function()
{
for (i=0;i<document.getElementsByTagName("img").length; i++)
{
image=document.getElementsByTagName("img")[i];
alert(image.src);
}
}
</script>
</head>
<body>
<img src="images/pix0.jpg"/><br>
<img src="images/pix1.jpg"/><br>
<img src="images/pix2.jpg"/>
</body></html>
Accéder aux éléments
L'objet document possède trois méthodes
principales :
- getElementsByName() ;
Cette méthode permet de récupérer, sous la
forme d'un tableau, tous les éléments
pourtant le même nom (attribut name).
Exemple : getElementsByName()
<html><head>
<script type="text/javascript">
function valid()
{
document.getElementsByName("fruit")[0].checked = true;
document.getElementsByName("fruit")[1].checked = true;
document.getElementsByName("fruit")[2].checked = true;
}
</script>
</head><body>
<FORM>
<INPUT type="checkbox" name="fruit" value="Fraise"> Fraise <BR>
<INPUT type="checkbox" name="fruit" value="Banane"> Banane <BR>
<INPUT type="checkbox" name="fruit" value="Pomme"> Pomme <BR>
<INPUT type="button" name="validation" value="Checked" onclick="valid()">
</FORM>
</body></html>
Comment agir sur une page ?
-
document.write() : écrire directement dans le document.
C’est peu utilisé car cela remplace souvent tout le contenu
de la page par le nouveau contenu.
Exemple :
var compteur=1;
do {
document.write(„Compteur = +compteur + '<BR>');
compteur += 1;
}while(compteur <=5)
Comment agir sur une page ?
-
innerHTML : la méthode la plus couramment utilisé
sera de modifier le contenu HTML d’une balise
quelconque.
Exemple innerHTML :
<span id="test" >innerHTML non supporté !</span>
<script type="text/javascript">
elt = document.getElementById("test");
elt.innerHTML = "innerHTML supporté !“;
</script>
Les Objets Javascript :
– Les objets de JavaScript, sont soit des
entités pré définies du langage, soit créés
par le programmeur.
– Les objets javascript peuvent réagir à des
"Evénements".
– Tous les navigateurs ne supportent pas les
mêmes objets
Objet window: propriétés
Propriété
Description
closed
fenêtre fermée?
defaultStatus
message par défaut(barre état
length
nb de cadres
name
nom
opener
nom fenêtre ouvrante
parent
si cadre
self/top
fenêtre courante
status
contenu barre d'état
Objet window: méthodes(1)
Méthode
Description
alert(chaine)
back()
Affiche boite alerte
URL précédent historique
blur()
close()
confirm(chaine)
focus()
forward()
home()
moveBy(hor,ver)
moveTo(x,y)
open(args)
Fenêtre plus courante
Ferme fenêtre
Affiche boîte confirmation
Fenêtre courante
URL suivant historique
URL page accueil
Déplacement relatif
Déplacement absolu
Ouvre fenêtre
Objet window: méthodes(2)
Méthode
Description
print()
Imprime
prompt(chaine,[val/defaut]) Affiche boîte entrée
resizeBy(hor,ver)
resizeTo(Wid,Hei)
scrollBy(hor,ver)
scrollTo(x,y)
setInterval(expr,msec)
clearInterval(IDinterv)
Redimensionne
Redimensionne
Défilement visualisation
Défilement visualisation
Évalue expr après msec
Supprime délais
setTimeOut(expr,msec)
Évalue expr après msec
clearTimeOut(Idchrono)
Efface fonction chrono
Méthode : open
window.open("URL","nom_de_la_fenetre","options_de_la_fenetre");
directories = 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)
left top (N)
Coordonnées en x et y de la fenêtre
status = yes/no
toolbar = yes/no
Affiche ou non la barre d'état
Affiche ou non la barre d'outils
width = largeur
Définit la largeur(en pixels)
height = hauteur
Définit la hauteur (en pixels)
Exemple fenêtre :
<script type="text/javascript">
function affichage ()
{
fen=open("", "", "height=200,width=300,status=no,toolbar=no");
var message=" <br> <h1>Bonjour à vous !!</h1>";
fen.document.write(message);
}
function fermer(fenetre)
{
fenetre.close();
}
function deplacer (fenetre)
{
fenetre.moveBy(50,0);
fenetre.focus();
}
Objet document: propriétés
Propriété
Description
alinkColor
Couleur lien actif
bgColor
Couleur de fond
cookie
Cookie
domain
Nom de domaine du serveur
fgColor
Couleur premier plan
lastModified
Date dernière modification
linkColor
Couleur liens
referrer
URL appelante
title
Contenu <TITLE>
URL
URL document
vlinkColor
Couleur liens visités
Objet document : méthodes
Méthode
Description
close()
Ferme le document
eval(chaine)
Evalue chaine résultat
open()
Ouvre nouveau document
write(expr1[,expr2, …])
Écrit expr HTML
writeln(expr1[,expr2, …])
Écrit expr HTML + nl
Les événements (1)
– Javascript est dépendant des événements qui se
produisent lors d'actions diverses sur les objets
d'un document HTML.
•
•
•
•
•
onLoad;
onClick
onMouseover
onMouseout
...
– Il est possible de baser l’exécution de fonctions sur
des événements
Les événements (2)
Evénement onLoad
• Se produit lorsque une page web est chargée
dans la fenêtre du navigateur
• Toute la page (y compris les images qu’elle
contient si leur chargement est prévu) doit avoir
été chargée pour qu’il ait lieu
<HTML>
<BODY onLoad="alert('page chargée');">
Exemple de l'événement onLoad
</BODY>
</HTML>
Les événements (3)
Evénement onClick
• Se produit lorsque l’utilisateur clique sur un élément
spécifique dans une page, comme un lien
hypertexte, une image, un bouton, du texte, etc.
• Ces éléments sont capables de répondre
séparément à cet événement
<HTML>
<BODY>
<INPUT TYPE="Button" Value="cliquer ici”
onClick="alert('Clic')">
</BODY>
</HTML>
Les événements (4)
Événement onMouseover
• Analogue à onClick sauf qu’il suffit que
l’utilisateur place le pointeur de sa souris sur l’un
des éléments précités (lien hypertexte, image,
bouton, texte, etc.) pour qu’il ait lieu
Événement onMouseout
• A l’inverse de onMouseover, cet événement se
produit lorsque le pointeur de la souris quitte la
zone de sélection d’un élément.
<HTML><BODY>
<IMG SRC="image.gif" onMouseOver="src='image2.gif';"
onMouseOut="src='image.gif';">
</BODY></HTML>
Objet : link
Créé quand balise <A avec attribut HREF
Collection tableau links
Comprend les zones area
Evénements:
– onClick
qd clic lien
– onMouseOver
qd pointeur sur lien
– onMouseOut
qd pointeur quitte lien
Objet : image
Créé quand balise <IMG
Collection tableau images
Evénements
Evénement
Déclenchement
onAbort
Qd IT chargement image
onError
Qd erreur chargement
onLoad
Qd chargement achevé
Objet image: propriétés
Propriété
border
complete
height
hspace
Description
Val attribut BORDER
Image chargée entièrement ?
Val attribut HEIGHT
Val attribut HSPACE
lowsrc
Val attribut LOWSRC
name
src
vspace
width
Val attribut NAME
Val attribut SRC
Val attribut VSPACE
Val attribut WIDTH
Exemple image :
<head>
<script type="text/javascript">
function imageon()
{
document.getElementById("envoi").src='images/image 1.jpg';
}
function imageout()
{
document.getElementById("envoi").src='images/image 2.jpg';
}
</script>
</head>
<body>
<IMG SRC="images/image 0.jpg" height="200" width="300" id="envoi"
onMouseOver="imageon();" onMouseOut="imageout();">
</body>
L'objet : String (1)
– Propriété :
• length : retourne la longueur de la chaîne de caractères;
– Méthodes :
• anchor( ) : formate la chaîne avec la balise <A> nommée;
• b( ) : formate la chaîne avec la balise <B>;
• big( ) : formate la chaîne avec la balise <BIG>;
• charAt( ) : renvoie le caractère se trouvant à une certaine
position;
• charCodeAt( ) : renvoie le code du caractère se trouvant à une
certaine position;
• concat( ) : permet de concaténer 2 chaînes de caractères;
• fromCharCode( ) : renvoie le caractère associé au code;
• indexOf( ) : permet de trouver l'indice d'occurrence d'un
caractère dans une chaîne;
String : Exemples
var s = "Bon anniversaire Benjamin" ;
document.write(s.charAt(2)) ;
n
document.write(s.charCodeAt(2)) ;
110
document.write(s.concat(" du groupe C12")) ;
Bon anniversaire Benjamin du groupe C12
document.write(String.fromCharCode(49, 50)) ;
12
document.write(s.indexOf("Benjamin")) ;
17
document.write(s.lastIndexOf("a")) ;
21
document.write(s.match(/Benjamin$/)) ;
Benjamin
(null si non trouvé)
L'objet : String (2)
• italics( ) : formate la chaîne avec la balise <I>;
• lastIndexOf( ) : permet de trouver le dernier indice
d'occurrence d'un caractère;
• link( ) : formate la chaîne avec la balise <A> pour
permettre de faire un lien;
• slice( ) : retourne une portion de la chaîne;
• substr( ) : retourne une portion de la chaîne;
• substring( ) : retourne une portion de la chaîne;
• toLowerCase( ) : permet de passer toute la chaîne en
minuscule;
• toUpperCase( ) : permet de passer toute la chaîne en
majuscules;
String : Exemples
var s = "Bon anniversaire Benjamin" ;
document.write(s.replace(/i/g, 'I')) ;
Bon annIversaIre BenjamIn
document.write(s.search(/n{2}/i)) ;
5
document.write(s.slice(17)) ;
Benjamin
document.write(s.split(" ")) ;
Bon,anniversaire,Benjamin
document.write(s.substr(4, 12)) ;
anniversaire
document.write(s.substring(4, 16)) ;
anniversaire
document.write(s.toUpperCase()+s.toLowerCase()) ;
BON ANNIVERSAIRE BENJAMINbon anniversaire
benjamin
L'objet : Array
– Propriété :
• length : retourne le nombre d'éléments du tableau;
– Méthodes :
• concat( ) : permet de concaténer 2 tableaux;
• join( ) : converti un tableau en chaîne de caractères;
• reverse( ) : inverse le classement des éléménts du
tableau;
• slice( ) : retourne une section du tableau;
• sort( ) : permet le classement des éléments du tableau;
L'objet : Math (1)
– Propriétés :
•
•
•
•
•
•
•
•
E : renvoie la valeur de la constante d'Euler (~2.718);
LN2 : renvoie le logarithme népérien de 2 (~0.693);
LN10 : renvoie le logarithme népérien de 10 (~2.302);
LOG2E : renvoie le logarithme en base 2 de e (~1.442);
LOG10E : renvoie le logarithme en base 10 de e (~0.434);
PI : renvoie la valeur du nombre pi (~3.14159);
SQRT1_2 : renvoie 1 sur racine carrée de 2 (~0.707);
SQRT2 : renvoie la racine carrée de 2 (~1.414);
L'objet : Math (2)
– Méthodes :
• abs( ), exp( ), log(), sin( ), cos( ), tan( ), asin( ), acos( ), atan( ),
max( ), min( ), sqrt( ) sont les opérations mathématiques
habituelles;
• atan2( ) : retourne la valeur radian de l'angle entre l'axe des
abscisses et un point;
• ceil( ) : retourne le plus petit entier supérieur à un nombre;
• floor( ) : retourne le plus grand entier inférieur à un nombre;
• pow( ) : retourne le résultat d'un nombre mis à une certaine
puissance;
• random( ) : retourne un nombre aléatoire entre 0 et 1;
• round( ) : arrondi un nombre à l'entier le plus proche.
Objet Math : Exemples
document.write(115.04+15) ;
130.04
document.write(Math.PI) ;
3.141592653589793
document.write(Math.abs(-12.34)) ;
12.34
document.write(Math.floor(12.54)) ;
12
document.write(Math.round(12.54)) ;
13
document.write(Math.ceil(12.54)) ;
13
document.write(Math.random()) ;
0.394555831655689
Dates : Propriétés & Méthodes
Méthodes
–
–
–
–
–
–
–
–
getDay(), attention de 0 (dimanche) à 6 (samedi)…
getDate() / setDate()
getMonth() / setMonth(), attention de 0 à 11…
getHours()/ setHours()
getMinutes() / setMinutes()
getTime() / setTime()
getYear() / setYear() / getFullYear() / setFullYear()
…
Dates : Exemples
var today = new Date()
document.write(today) ;
Tue Nov 02 2012 00:11:36 GMT+0100
var birthday = new Date("December 17, 1995
03:24:00")
document.write(birthday) ;
Sun Dec 17 1995 03:24:00 GMT+0100
birthday = new Date(95,11,17)
document.write(birthday) ;
Sun Dec 17 1995 00:00:00 GMT+0100
birthday = new Date(95,11,17,3,24,0)
document.write(birthday.getDay()) ;
17
Dates : Exemples
document.write(birthday.getMonth()) ;
11
birthday.setMonth(10) ;
document.write(birthday) ;
Sat Nov 25 1995 03:24:00 GMT+0100
document.write(birthday.getYear()) ;
95
birthday.setYear(96) ;
document.write(birthday) ;
Mon Nov 25 1996 03:24:00 GMT+0100
document.write(birthday.getFullYear()) ;
1996
document.write(Date.parse("Aug 9, 1995")) ;
807919200000
Minuteries
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
Exemple : minuterie
<html><head>
<title>Modele</title>
<script type="text/javascript">
var minuterie;
function bonjour()
{alert("Bonjour a vous !!");}
function STOUT()
{setTimeout("bonjour();", 1000);}
function STINT()
{minuterie = setInterval("bonjour();", 4000);}
function CLINT()
{ clearInterval(minuterie);}
</script></head>
<body onload="bonjour()">
<FORM NAME="f">
<INPUT TYPE="button" VALUE="setTimeout" onClick="STOUT();">
<INPUT TYPE="button" VALUE="setInterval" onClick="STINT();">
<INPUT TYPE="button" VALUE="clearInterval" onClick="CLINT();">
</FORM></body></html>
Images : Propriétés & Méthodes
Propriétés
– complete
– width
– height
– name
– src
–…
Méthodes
– constructeur
• Image()
• Image(largeur, hauteur)
Images: Exemples
<script type="text/javascript">
// Une image
rouge = new Image(100, 100) ;
rouge.src = 'rouge.gif' ; // Préchargement
// Une autre image
vert = new Image(100, 100) ;
vert.src = 'vert.gif' ; // Préchargement
// Modification de la 13e image de la page Web
document.images[12].src = rouge.src ;
// Modification de la 15e image de la page Web
document.images[14].src = rouge.src ;
</script>
