I. Introduction▲
JavaScript est devenu un langage indispensable dans le développement des sites Web d'aujourd'hui.
Apprenez à utiliser ce puissant langage de programmation, en utilisant une méthode de formation structurée, pas à pas et orientée pratique.
Avec la méthode "Développement Facile", vous allez apprendre à développer des applications Web performantes, que vos visiteurs adoreront !
Retrouvez un extrait de la formation gratuite "JavaScript Facile", composée de plus de 40 cours professionnels pour vous aider à progresser rapidement avec la maîtrise du langage JavaScript.
II. Comment effectuer des redirections JavaScript avec l'objet location▲
Dans ce cours découvrez l'objet location en détail avec ses propriétés et ses méthodes vous permettant d'accéder et de manipuler l'adresse URL de la page Web.
Ci-dessous, l'exemple de code.
<!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html
xmlns=
"
http://www.w3.org/1999/xhtml
"
>
<
head>
<!--
/**
The
Initial
Developer
of
the
Original
Code
is
Matthieu
-
http://www.programmation-facile.com/
Portions
created
by
the
Initial
Developer
are
Copyright
(C)
2013
the
Initial
Developer.
All
Rights
Reserved.
Contributor(s)
:
*/
-->
<
meta
http-equiv=
"
Content-Type
"
content=
"
text/html;
charset=utf-8
"
/
>
<
title>
Location en JavaScript<
/
title>
<script
type="text/
javascript">
function
affiche
()
{
var
sTxt =
"
"
;
sTxt +
=
"
Nom
de
domaine
de
la
page
actuelle
:
"
+
window.
location.
hostname+
"
<br
/>
"
;
sTxt +
=
"
Le
chemin
de
la
page
actuelle
:
"
+
window.
location.
pathname+
"
<br
/>
"
;
sTxt +
=
"
Le
protocole
utilisé
:
"
+
window.
location.
protocol+
"
<br
/>
"
;
sTxt +
=
"
URL
de
la
page
actuelle
:
"
+
window.
location.
href+
"
<br
/>
"
;
//
window.location.href="http://www.developpement-facile.com";
//
redirection
vers
un
site
web
var
node =
document.
getElementById
("
write
"
);
node.
innerHTML =
"
<p>
"
+
sTxt+
"
<br
/></p>
"
;
return
;
}
</script>
<
/
head>
<
body>
<
center>
<
div
id=
"
write
"
>
<
/
div>
<
br
/
>
<
br
/
>
Appuyer sur le bouton Valider <
br/
>
<
br/
>
<
form
name=
"
form
"
method=
"
post
"
action=
"
"
>
<
input
type=
"
button
"
value=
"
Valider
"
onclick=
"
affiche()
"
/
>
<
br
/
>
<
/
form>
<
/
center>
<
/
body>
<
/
html>
III. Comment modifier les liens d'une page Web avec JavaScript et link▲
Dans ce cours vidéo, vous verrez comment modifier dynamiquement les liens de votre page Web.
Découvrez l'objet link avec ses propriétés et ses méthodes.
Ci-dessous, l'exemple de code.
<!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html
xmlns=
"
http://www.w3.org/1999/xhtml
"
>
<
head>
<!--
/**
The
Initial
Developer
of
the
Original
Code
is
Matthieu
-
http://www.programmation-facile.com/
Portions
created
by
the
Initial
Developer
are
Copyright
(C)
2013
the
Initial
Developer.
All
Rights
Reserved.
Contributor(s)
:
*/
-->
<
meta
http-equiv=
"
Content-Type
"
content=
"
text/html;
charset=utf-8
"
/
>
<
title>
Link en JavaScript<
/
title>
<script
type="text/
javascript">
function
seeLinks
()
{
var
sTxt =
"
"
;
sTxt +
=
"
Il
y
a
:
"
+
document.
links.
length+
"
liens
sur
cette
page.
"
;
for
(i=
0
;
i<
document.
links.
length;
i+
+
)
{
sTxt +
=
"
<br
/><br
/>Le
texte
du
lien
n°
"
+
(i+
1
)+
"
:
"
+
document.
links[
i]
.
text;
sTxt +
=
"
<br
/>La
cible
du
lien
n°
"
+
(i+
1
)+
"
:
"
+
document.
links[
i]
.
target;
}
var
node =
document.
getElementById
("
write
"
);
node.
innerHTML =
"
<p>
"
+
sTxt+
"
<br
/></p>
"
;
return
;
}
</script>
<
/
head>
<
body>
<
center>
<
div
id=
"
write
"
>
<
/
div>
<
br
/
>
<
br
/
>
Appuyer sur le bouton Valider <
br/
>
<
br/
>
<
form
name=
"
form
"
method=
"
post
"
action=
"
"
>
<
input
type=
"
button
"
value=
"
Valider
"
onclick=
"
seeLinks()
"
/
>
<
br
/
>
<
/
form>
<
p>
<
a
href=
"
http://www.actionscript-facile.com
"
target=
"
_blank
"
>
AS3<
/
a>
<
br>
<
a
href=
"
http://www.developpement-facile.com
"
target=
"
_self
"
>
Dev Facile<
/
a>
<
br>
<
/
p>
<
/
center>
<
/
body>
<
/
html>
IV. Comment optimiser vos algorithmes avec la classe JavaScript Math▲
Dans ce cours, simplifiez vous la vie pour constituer vos algorithmes. Découvrez la classe Math en JavaScript avec ses propriétés et ses méthodes.
Ci-dessous, l'exemple de code.
<!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html
xmlns=
"
http://www.w3.org/1999/xhtml
"
>
<
head>
<!--
/**
The
Initial
Developer
of
the
Original
Code
is
Matthieu
-
http://www.programmation-facile.com/
Portions
created
by
the
Initial
Developer
are
Copyright
(C)
2013
the
Initial
Developer.
All
Rights
Reserved.
Contributor(s)
:
*/
-->
<
meta
http-equiv=
"
Content-Type
"
content=
"
text/html;
charset=utf-8
"
/
>
<
title>
Math en JavaScript<
/
title>
<script
type="text/
javascript">
function
affiche
()
{
var
sTxt =
"
"
;
var
nRayon =
prompt
("
Donnez
le
rayon
de
votre
cercle
:
"
);
var
nPerimetre =
2
*
nRayon*
Math
.
PI;
sTxt +
=
"
Le
périmètre
du
cercle
est
:
"
+
nPerimetre+
"
<br
/>
"
;
sTxt +
=
"
Nombre
aléatoire
:
"
+
aleatoire
(13
);
var
node =
document.
getElementById
("
write
"
);
node.
innerHTML =
"
<p>
"
+
sTxt+
"
<br
/></p>
"
;
return
;
}
function
aleatoire
(nVal)
{
return
(Math
.
floor
( nVal*
Math
.
random
()+
1
) );
}
</script>
<
/
head>
<
body>
<
center>
<
div
id=
"
write
"
>
<
/
div>
<
br
/
>
<
br
/
>
Appuyer sur le bouton Valider <
br/
>
<
br/
>
<
form
name=
"
form
"
method=
"
post
"
action=
"
"
>
<
input
type=
"
button
"
value=
"
Valider
"
onclick=
"
affiche()
"
/
>
<
br
/
>
<
/
form>
<
/
center>
<
/
body>
<
/
html>
V. Profitez de la puissance des événements JavaScript avec Event▲
Capturez les événements extérieurs, comme une pression de touche du clavier, grâce à la classe Event en JavaScript.
Découvrez ses propriétés et ses méthodes dans ce cours vidéo.
Ci-dessous, l'exemple de code.
<!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html
xmlns=
"
http://www.w3.org/1999/xhtml
"
>
<
head>
<!--
/**
The
Initial
Developer
of
the
Original
Code
is
Matthieu
-
http://www.programmation-facile.com/
Portions
created
by
the
Initial
Developer
are
Copyright
(C)
2013
the
Initial
Developer.
All
Rights
Reserved.
Contributor(s)
:
*/
-->
<
meta
http-equiv=
"
Content-Type
"
content=
"
text/html;
charset=utf-8
"
/
>
<
title>
Event souris en JavaScript<
/
title>
<script
type="text/
javascript">
function
affiche
(event)
{
var
nPosX =
event.
clientX;
var
nPosY =
event.
clientY;
console.
log
("
déplacement
de
la
souris
:
x
=
"
+
nPosX+
"
et
y
=
"
+
nPosY);
var
sTxt =
"
Coordonnées
de
la
souris
:
x
=
"
+
nPosX+
"
et
y
=
"
+
nPosY;
window.
status=
sTxt;
var
node =
document.
getElementById
("
write
"
);
node.
innerHTML =
"
<p>
"
+
sTxt+
"
<br
/></p>
"
;
return
;
}
</script>
<
/
head>
<
body
onmouseover=
"
affiche(event)
"
>
<
center>
<
div
id=
"
write
"
>
<
/
div>
<
br
/
>
<
br
/
>
Appuyer sur le bouton Valider <
br/
>
<
br/
>
<
form
name=
"
form
"
method=
"
post
"
action=
"
"
>
<
input
type=
"
button
"
value=
"
Valider
"
onclick=
"
affiche(event)
"
/
>
<
br
/
>
<
/
form>
<
/
center>
<
/
body>
<
/
html>
VI. Utilisez les cookies JavaScript pour conserver les informations de vos visiteurs▲
Dans ce cours, apprenez à utiliser les cookies pour stocker des informations dans le navigateur de votre visiteur.
En JavaScript vous pourrez facilement manipuler les cookies et les sécuriser.
Ci-dessous, l'exemple de code.
<!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html
xmlns=
"
http://www.w3.org/1999/xhtml
"
>
<
head>
<!--
/**
The
Initial
Developer
of
the
Original
Code
is
Matthieu
-
http://www.programmation-facile.com/
Portions
created
by
the
Initial
Developer
are
Copyright
(C)
2013
the
Initial
Developer.
All
Rights
Reserved.
Contributor(s)
:
*/
-->
<
meta
http-equiv=
"
Content-Type
"
content=
"
text/html;
charset=utf-8
"
/
>
<
title>
Cookies en JavaScript<
/
title>
<script
type="text/
javascript">
/*
*
*
Création
d'un
cookie
Javascript
*
*
@param
{[type]}
name
le
nom
du
cookie
*
@param
{[type]}
value
la
valeur
du
cookie
*
@param
{[type]}
nNbreDay
le
nomber
de
jours
de
validité
du
cookie
*
0
->
le
cookie
rdy
effacé
à
la
fermeture
du
navigateur.
*
un
nombre
négatif
de
jours
->
le
cookie
est
effacé
immédiatement.
*
*
@return
/
*/
function
createCookie
(name,
value,
nNbreDay)
{
var
expires =
"
"
;
if
( nNbreDay)
{
var
oDate =
new
Date
();
oDate.
setTime
(oDate.
getTime
()+
( nNbreDay*
24
*
60
*
60
*
1000
));
expires =
"
;
expires=
"
+
oDate.
toGMTString
();
}
document.
cookie =
name+
"
=
"
+
value+
expires+
"
;
path=/
"
;
}
/*
*
*
Lecture
d'un
cookie
*
@param
{[type]}
name
le
nom
du
cookie
*
@return
{[type]}
la
valeur
du
cookie
*/
function
readCookie
(name)
{
var
nameEQ =
name +
"
=
"
;
var
oCookieSplit =
document.
cookie.
split
('
;
'
);
for
(var
i=
0
;
i <
oCookieSplit.
length;
i+
+
)
{
var
oCookie =
oCookieSplit[
i]
;
while
(oCookie.
charAt
(0
)=
=
'
'
)
oCookie =
oCookie.
substring
(1
,
oCookie.
length);
if
(oCookie.
indexOf
(nameEQ) =
=
0
)
return
oCookie.
substring
(nameEQ.
length,
oCookie.
length);
}
return
0
;
}
/*
*
*
Supprime
un
cookie
*
@param
{[type]}
name
le
nom
du
cookie
*
*/
function
deleteCookie
(name)
{
createCookie
(name,
"
"
,
-
1
);
}
function
affiche
(event)
{
var
sTxt =
"
"
;
var
sName =
"
Nom
du
cookie
"
;
var
sVal =
"
une
nouvelle
valeur
"
&
#160
;
;
var
sCookie =
readCookie
(sName);
if
( sCookie =
=
0
)
{
sTxt =
"
il
n'y
a
pas
de
cookie
"
;
createCookie
(sName,
sVal,
7
);
}
else
{
document.
cookie =
sName+
"
=
"
+
sVal+
"
;expires=Thu,31-Dec-2015
00:00:01
GMT;domain=dev-facile.com
"
;
var
nCookieSize =
document.
cookie.
length;
sTxt =
"
Cookie
déjà
enregistré<br
/>Sa
valeur
:
"
;
sTxt +
=
sCookie;
deleteCookie
(sName);
sTxt +
=
"
<br
/>
Cookie
supprimé
"
;
}
var
node =
document.
getElementById
("
write
"
);
node.
innerHTML =
"
<p>
"
+
sTxt+
"
<br
/></p>
"
;
return
;
}
</script>
<
/
head>
<
body>
<
center>
<
div
id=
"
write
"
>
<
/
div>
<
br
/
>
<
br
/
>
Appuyer sur le bouton Valider <
br/
>
<
br/
>
<
form
name=
"
form
"
method=
"
post
"
action=
"
"
>
<
input
type=
"
button
"
value=
"
Valider
"
onclick=
"
affiche(event)
"
/
>
<
br
/
>
<
/
form>
<
/
center>
<
/
body>
<
/
html>
VII. Optimisez vos formulaires JavaScript▲
Dans cette vidéo, découvrez la suite du cours sur les formulaires que vous pouvez suivre dans un autre article.
Ici vous verrez comment envoyer un mail à partir d'un formulaire et imprimer un formulaire en entier.
Ci-dessous l'exemple de code
<!
DOCTYPE
html
PUBLIC
"
-//W3C//DTD
XHTML
1.0
Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
<
html
xmlns=
"
http://www.w3.org/1999/xhtml
"
>
<
head>
<!--
/**
The
Initial
Developer
of
the
Original
Code
is
Matthieu
-
http://www.programmation-facile.com/
Portions
created
by
the
Initial
Developer
are
Copyright
(C)
2013
the
Initial
Developer.
All
Rights
Reserved.
Contributor(s)
:
*/
-->
<
meta
http-equiv=
"
Content-Type
"
content=
"
text/html;
charset=utf-8
"
/
>
<
title>
Formulaires en JavaScript<
/
title>
<script
type="text/
javascript">
function
donnesObligatoire
()
{
if
(form.
nom.
value =
=
'
'
)
alert
("
ce
champ
est
obligatoire
"
);
return
;
}
function
testCheckBox
()
{
var
sTxt =
"
"
;
if
(form.
java.
checked =
=
true
)
sTxt +
=
"
\nVous
avez
coché
JavaScript
!
"
;
if
(form.
as.
checked =
=
true
)
sTxt +
=
"
\nVous
avez
coché
ActionScript
!
"
;
if
(form.
php.
checked =
=
true
)
sTxt +
=
"
\nVous
avez
coché
PHP
!
"
;
alert
(sTxt);
return
;
}
function
testBtnRadio
()
{
var
sTxt =
"
JavaScript
pas
Facile...
"
;
if
(form.
javascript[
0
]
.
checked =
=
true
)
sTxt =
"
\nYes
JavaScript
Facile
!
"
;
alert
(sTxt);
return
;
}
function
testListe
()
{
var
sTxt =
"
"
;
if
(form.
langage.
selectedIndex =
=
0
)
sTxt =
"
Yes
ActionScript
Facile
!
"
;
else
if
(form.
langage.
selectedIndex =
=
1
)
sTxt =
"
Yes
PHP
Facile
!
"
;
else
if
(form.
langage.
selectedIndex =
=
2
)
sTxt =
"
Yes
JavaScript
Facile
!
"
;
else
sTxt =
"
Aucun
choix...
"
;
alert
(sTxt);
return
;
}
function
testListeProg
()
{
var
sTxt =
"
Votre
sélection
:
\n
"
;
var
nb=
form.
prog.
length;
//
le
nombre
de
langages
possibles
//
parcours
de
tous
les
éléments
for
(var
i =
0
;
i<
nb;
i+
+
)
{
if
(form.
prog.
options[
i]
.
selected)
{
sLangageName=
form.
prog.
options[
i]
.
value;
sTxt +
=
sLangageName+
"
est
sélectionné\n
"
;
}
}
alert
(sTxt);
return
;
}
</script>
<
/
head>
<
body>
<
center>
Appuyer sur le bouton Valider <
br/
>
<
br/
>
<
form
id=
"
form
"
name=
"
form
"
method=
"
"
action=
"
"
>
<
p>
<
input
name=
"
nom
"
type=
"
text
"
id=
"
nom
"
>
<
/
p>
<
p>
<
input
type=
"
submit
"
name=
"
Submit
"
value=
"
Valider
"
onClick=
"
donnesObligatoire()
"
/
>
<
/
p>
<
p>
<
td>
<
input
name=
"
java
"
type=
"
checkbox
"
id=
"
java
"
value=
"
checkbox
"
>
JavaScript<
/
td>
<
td>
<
input
name=
"
as
"
type=
"
checkbox
"
id=
"
as
"
value=
"
checkbox
"
>
ActionScript<
/
td>
<
td>
<
input
name=
"
php
"
type=
"
checkbox
"
id=
"
php
"
value=
"
checkbox
"
>
PHP<
/
td>
<
input
type=
"
submit
"
name=
"
Submit
"
value=
"
Valider
"
onClick=
"
testCheckBox()
"
/
>
<
/
p>
<
p>
<
td>
<
input
name=
"
javascript
"
type=
"
radio
"
id=
"
javascript
"
value=
"
oui
"
>
Oui, JavaScript Facile<
/
td>
<
td>
<
input
name=
"
javascript
"
type=
"
radio
"
id=
"
javascript
"
value=
"
non
"
>
Non<
/
td>
<
input
type=
"
submit
"
name=
"
Submit
"
value=
"
Valider
"
onClick=
"
testBtnRadio()
"
/
>
<
/
p>
<
p>
Quel est le langage le plus facile ? <
/
p>
<
select
name=
"
langage
"
id=
"
langage
"
>
<
option>
ActionScript<
/
option>
<
option>
PHP<
/
option>
<
option>
JavaScript<
/
option>
<
/
select>
<
input
type=
"
submit
"
name=
"
Submit
"
value=
"
Valider
"
onClick=
"
testListe()
"
/
>
<
/
p>
<
p>
Quel est le langage le plus facile ? <
/
p>
<
select
name=
"
prog
"
multiple
id=
"
prog
"
>
<
option
value=
"
ActionScript
"
>
ActionScript<
/
option>
<
option
value=
"
PHP
"
>
PHP<
/
option>
<
option
value=
"
JavaScript
"
>
JavaScript<
/
option>
<
/
select>
<
input
type=
"
submit
"
name=
"
Submit
"
value=
"
Valider
"
onClick=
"
testListeProg()
"
/
>
<
/
p>
<
p>
<
input
name=
"
btn_erase
"
type=
"
reset
"
id=
"
btn_erase
"
value=
"
Effacer
les
champs
"
>
<
/
p>
<
/
form>
<
/
center>
<
/
body>
<
/
html>
VIII. Recevez gratuitement la formation "JavaScript Facile"▲
Si vous souhaitez aller plus loin dans la création d'applications performantes, vous pouvez recevoir gratuitement la formation "JavaScript Facile" avec des cours pas à pas, accompagnés des codes source commentés.
Ainsi, vous progressez à votre rythme, avec un suivi personnalisé et individuel. Vous avez la possibilité de poser toutes vos questions techniques sous chaque cours.
Vous allez ainsi découvrir comment utiliser la technologie AJAX, la syntaxe XML, XSL, le DOM, la gestion des événements, les tableaux array, les classes Math, Date…
Cliquez simplement ici pour recevoir gratuitement la formation "JavaScript Facile" !Cliquez simplement ici pour recevoir gratuitement la formation JavaScript Facile !
IX. Remerciements▲
Merci beaucoup à l'équipe de rédaction de Developpez.com de contribuer à la diffusion de ce tutoriel.
J'adresse également un merci tout particulier à Jacques Jeanjacques_jean pour sa relecture orthographique.