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 créer et utiliser les objets en JavaScript▲
Plus votre application ou votre site Web va devenir important, plus votre code va se complexifier. Découvrez dans cette vidéo une introduction au langage objet en JavaScript qui va vous simplifier la vie.
Ci-dessous, l'exemple de code d'utilisation d'objet
<!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>Exceptions en JavaScript</title>
<script type="text/javascript">
function voiture(marque, modele, annee)
{
this.sMarque=marque;
this.sModele=modele;
this.nAnnee=annee;
}
function affiche()
{
var oVoiture=new voiture("Peugeot","308","2012");
alert("Voici les caractéristiques de la voiture :" + "\n la marque : " + oVoiture.sMarque + "\n le modèle : " + oVoiture.sModele+ "\n l'année : " + oVoiture.nAnnee);
return;
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
III. Utilisez toutes les informations de l'objet navigator avec JavaScript▲
Dans cette vidéo, apprenez à utiliser l'objet navigator en JavaScript. C'est un objet indispensable pour savoir quel navigateur utilise votre visiteur et ainsi adapter votre site en fonction de celui-ci.
L'exemple de code avec une utilisation de l'objet navigator
<!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 affiche()
{
navigateur=navigator.appName;
version=navigator.appVersion;
plateforme=navigator.platform;
cookie=navigator.cookieEnabled;
if (cookie==true)
alert("Vous utilisez " +navigateur+ " "+version+ "\ncomme navigateur Internet, sur une plate-forme de type :" +plateforme+ " avec les cookies activés" );
else
alert("Vous utilisez " +navigateur+ " "+version+ "\ncomme navigateur Internet, sur une plate-forme de type :" +plateforme+ " avec les cookies désactivés" );
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
IV. Utilisez toutes les informations de l'objet window avec JavaScript▲
Vous aurez sûrement besoin de récupérer des informations sur votre visiteur pour rendre sa visite agréable.
Découvrez l'objet window en JavaScript dans son ensemble.
Ci-dessous, l'exemple de code sur l'objet window
<!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>Windows en JavaScript</title>
<script type="text/javascript">
oFenetre = window.open("","Nouvelle","height=200,width=600,menubar=no, toolbar=no,resizable=yes,scrollbar=yes");
</script>
</head>
<body onUnload="window.oFenetre.close()">
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" name="Submit" value="Affiche la nouvelle fenêtre" onClick="oFenetre.focus()">
<br />
<input type="button" name="Submit2" value="Cache la fenêtre" onClick="oFenetre.blur()">
</center>
</body>
</html>
Ci-dessous, un autre exemple de code de l'objet window pour mettre la page en favoris
<!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>Windows en JavaScript</title>
<script type="text/javascript">
navigateur = navigator.appName.substring(0,3);
version = navigator.appVersion.substring(0,1);
siteUrl = window.location; siteTitle = window.name;
function addToFavoris()
{
bReponse=confirm("Voulez-vous ajouter cette page dans vos favoris ?");
if (bReponse==false) return;
else if (navigateur == "Mic" && version >= 4)
{// c'est Internet Explorer
url_site=adresse;
titre_site = titre;
window.external.AddFavorite(siteUrl, siteTitle);
}
else
alert("Utilisez le raccourci-clavier Ctrl+D pour ajouter cette page dans vos favoris");
}
</script>
</head>
<body onLoad="addToFavoris()">
<center>
</center>
</body>
</html>
V. Comment utiliser l'objet document avec JavaScript▲
Découvrez dans cette vidéo l'objet document en JavaScript.
Cette objet vous permettra de modifier une page HTML en direct.
Vous verrez d'abord les propriétés de l'objet puis ses méthodes et enfin un exemple.
Ci-dessous l'exemple de code, remplacez 16-logo.png par votre propre image.
<!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>Document en JavaScript</title>
<script language=javascript>
function getLastModif()
{
date_modif= document.lastModified;
var oDate = new Date(date_modif);
var mois = oDate.getMonth()+1;
var jour = oDate.getDay();
var annee = oDate.getFullYear();
var heure = oDate.getHours();
var minute = oDate.getMinutes();
var secondes = oDate.getSeconds();
var node = document.getElementById("write");
node.innerHTML = "<p>" + "Page modifiée le : "+jour+"/"+mois+"/"+annee+" à "+heure+ " h "+minute+" mins "+secondes+" secondes" + "</p>";
//document.write("\n<br/>"+document.lastModified);
}
function disabledClicRight()
{
document.oncontextmenu = new Function("return false");
var node = document.getElementById("write_image");
node.innerHTML = "<p>Le clic droit est désactivé !</p>";
return;
}
</script>
</head>
<body onLoad="getLastModif();" onContextMenu = "disabledClicRight();">
<center>
<div id="write"></div>
<br /><br />
<img src="16-logo.png" width="513" height="139">
<br /><br />
<div id="write_image"></div>
</center>
</body>
</html>
VI. Comment utiliser l'objet screen avec JavaScript▲
Dans cette vidéo, découvrez l'objet screen en JavaScript.
Cet objet vous sera indispensable pour adapter votre site à l'écran de votre visiteur.
Ci-dessous l'exemple de code avec une utilisation de la classe screen
<!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>Screen en JavaScript</title>
<script type="text/javascript">
function affiche()
{
var nUtilLargeur=screen.availWidth;
var nUtilHauteur=screen.availHeight;
var largeur =screen.width;
var hauteur=screen.height;
var couleurs=screen.colorDepth;
var node = document.getElementById("write");
node.innerHTML = "<p>La résolution de votre écran est de : "+largeur+" par "+hauteur+" pixels avec des couleurs en "+couleurs+" bits. \rLa surface utile de votre affichage est de "+nUtilLargeur+" par "+nUtilHauteur+" pixels.</p>";
return;
}
</script>
</head>
<body>
<center>
<div id="write"></div>
<br /><br />
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
VII. 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 !
VIII. 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.
