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. Les deux frameworks JavaScript à ABSOLUMENT utiliser▲
Découvrez dans ce cours vidéo des frameworks qui vont simplifier et accélérer vos développements en JavaScript Prototype pour simplifier la rédaction de script. script.aculo.us pour réaliser des effets visuels.
Ci-dessous les deux liens cités dans la vidéo :
- PrototypePrototype
- script.aculo.usscript.aculo.us
III. Tout savoir sur l'utilisation du document DOM avec JavaScript▲
Le document DOM est devenu incontournable en JavaScript.
Manipulez directement les balises HTML sans recharger la page.
Dans cette vidéo, apprenez à utiliser l'organisation hiérarchique du document DOM.
Un exemple d'utilisation du DOM dans le code ci-dessous
<!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 DOM en JavaScript</title>
<script type="text/javascript">
/**
* Modifie une balise HTML
* @param {[type]} sName le nom de la balise (name)
* @param {[type]} sTxt la valeur à insérer dans la page web (dans la balise)
* @return
*/
function modifHTML(sName, sTxt)
{
document.getElementById(sName).innerHTML = "<p>"+sTxt+"<br /></p>";
return;
}
function affiche(event)
{
var sTxt = "HTML modifié sans recharger la page web ;)<br />";
var nNbre = document.all.length;
for (i=0; i<nNbre;i++)
sTxt +="<br /> Nom de l'élément "+i+" : "+document.all(i).tagName;
sTxt += "<br /><br />Le nombre d'éléments de cette page est de :"+nNbre;
modifHTML("write", sTxt);
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>
IV. Comment ajouter et déplacer des éléments avec le DOM et AJAX▲
Apprenez à ajouter ou déplacer des éléments dans votre page Web, sans recharger la page grâce à cette vidéo.
Exemple de code ci-dessous.
<!DOCTYPE html>
<html lang="fr">
<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) :
*/
-->
<title>HTML5 JavaScript AJAX</title>
<meta charset="UTF-8">
<style type="text/css">
body{
font-family: Arial;
}
</style>
<script type="text/JavaScript">
/**
* déplace le titre après le bouton
* @return {[type]} [description]
*/
function moveTitle()
{
console.log("Clicked moveTitle");
var sTitle = document.getElementById('titre');
document.getElementById('btnId1').parentNode.appendChild( sTitle );
}
/**
* ajoute une balise dans le document HTML
*/
function addBalise()
{
console.log("Clicked addBalise");
var oParaph = document.createElement("p");
var sTxt = document.createTextNode("La Méthode Développement Facile ;)");
var sContent = oParaph.appendChild(sTxt);
document.body.appendChild(oParaph);
}
/**
* déplace le titre entre 2 boutons
* @return {[type]} [description]
*/
function moveTitleMiddle()
{
console.log("Clicked moveTitleMiddle");
var sTitle = document.getElementById('titre');
var oBtn2 = document.getElementById('btnId2');
oBtn2.parentNode.insertBefore( sTitle, oBtn2 );
}
/**
* Supprime la liste du formulaire
* @return {[type]} [description]
*/
function removeListe()
{
console.log("Clicked removeListe");
var oListe = document.getElementById('liste');
oListe.parentNode.removeChild( oListe );
}
</script>
</head>
<body>
<header>
<span id="titre">Développement Facile</span>
</header>
<br /><br />
<form name="form" action="">
Nom : <input type="text" name="formget" size="33" value="Renseignez votre Nom" /><br />
Prénom : <input type="text" name="formget" size="29" value="Renseignez votre Prénom" /><br />
<select id="liste">
<option lang="en">PHP</option>
<option lang="fr">HTML5</option>
<option lang="de">JavaScript</option>
<option lang="it">CSS3</option>
</select>
</form>
<p><input type="submit" id="btnId1" value="Déplacer le titre" onclick="moveTitle();" /></p>
<p><input type="submit" id="btnId2" value="Ajout un élément" onclick="addBalise();" /></p>
<p><input type="submit" id="btnId3" value="Déplacer au milieu" onclick="moveTitleMiddle();" /></p>
<p><input type="submit" id="btnId4" value="Supprimer la liste" onclick="removeListe();" /></p>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
V. Maîtrisez les bases du DOM avec AJAX▲
Dans cette vidéo, apprenez à accéder aux éléments du document DOM de votre page Web HTML pour les manipuler avec JavaScript.
Exemple du code vu dans la vidéo.
<!DOCTYPE html>
<html lang="fr">
<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) :
*/
-->
<title>HTML5 JavaScript AJAX</title>
<meta charset="UTF-8">
<style type="text/css">
body{
font-family: Arial;
}
</style>
<script type="text/JavaScript">
/**
* récupère un élément par son identifiant
* @return {[type]} [description]
*/
function callGetElementById()
{
console.log("Clicked getElementById");
var sTitle = document.getElementById("titre").nodeName;
console.log("Titre "+sTitle);
alert("Titre "+sTitle);
}
/**
* récupère un élément par son nom
* @return {[type]} [description]
*/
function callGetElementByName()
{
console.log("Clicked callGetElementByName");
var sPrenom = document.getElementsByName("formget")[1].value;
console.log("Prénom "+sPrenom);
alert("Prénom "+sPrenom);
}
/**
* récupère un attribut
* @return {[type]} [description]
*/
function getAttributs()
{
console.log("Clicked getAttributs");
var selectListe = document.getElementById("liste").selectedIndex;
var sOptionChoose = document.getElementsByTagName("option")[selectListe];
var sAttributs = sOptionChoose.attributes;
var language= sAttributs.getNamedItem("lang").nodeValue;
console.log("langue associée "+language);
alert("langue associée "+language);
}
</script>
</head>
<body>
<header>
<span id="titre">Développement Facile</span>
</header>
<br /><br />
<form name="form" action="">
Nom : <input type="text" name="formget" size="33" value="Renseignez votre Nom" /><br />
Prénom : <input type="text" name="formget" size="29" value="Renseignez votre Prénom" /><br />
<select id="liste">
<option lang="en">PHP</option>
<option lang="fr">HTML5</option>
<option lang="de">JavaScript</option>
<option lang="it">CSS3</option>
</select>
</form>
<p><input type="submit" value="Valider By id" onclick="callGetElementById();" /></p>
<p><input type="submit" value="Valider By name" onclick="callGetElementByName();" /></p>
<p><input type="submit" value="Trouver la langue" onclick="getAttributs();" /></p>
<br /><br />
<footer>
<hr>
<p>Copyright www.Developpement-Facile.com 2014</p>
</footer>
</body>
</html>
VI. Comment utiliser facilement les bases du XML avec AJAX▲
Retrouvez, dans ce cours, les bases du langage XML pour le manipuler avec AJAX.
L'exemple XML, ci-dessous.
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="02-xml.css" type="text/css"?>
<!--
/**
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) :
*/
-->
<annuaire>
<personne class = "developpeur">
<nom>Zuri</nom>
<prenom>Adeline</prenom>
<telephone>06 65 12 36 25</telephone>
<email>adeline@dev-facile.com</email>
</personne>
<personne class = "developpeur">
<nom>Del</nom>
<prenom>Matthieu</prenom>
<telephone>06 67 13 36 25</telephone>
<email>matthieu@dev-facile.com</email>
</personne>
<personne class = "developpeur">
<nom>Barr</nom>
<prenom>Alice</prenom>
<telephone>06 67 13 39 69</telephone>
<email>alice@dev-facile.com</email>
</personne>
<personne class = "danseuse">
<nom>Roge</nom>
<prenom>Marine</prenom>
<telephone>06 12 13 39 24</telephone>
<email>marine@dev-facile.com</email>
</personne>
</annuaire>
La partie CSS ci-dessous.
/**
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) :
*/
annuaire , personne {
padding-left: 10px;
font-family: Arial ;
font-size: 14px;}
nom { display: block;
width: 250px;
font-size: 20px;
font-weight: bold;
background-color: #5882FA;
color: #DF0174;
}
prenom { display: block;
color: #DF0174;
}
telephone { display: block;
color: #04B404 ;
font-weight: bold;
}
email { display: block;
font-size: 12px ;
font-style: italic;
}
VII. Comment maîtriser rapidement les bases du XSL avec AJAX▲
Découvrez dans cette vidéo les bases du langage XSL, représentant la feuille de style CSS d'un fichier XML, avec plus d'options.
La partie XML de l'exemple ci-dessous.
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="03-xml-avec-xsl.xsl"?>
<!--
/**
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) :
*/
-->
<annuaire>
<personne class = "developpeur">
<nom>Zuri</nom>
<prenom>Adeline</prenom>
<telephone>06 65 12 36 25</telephone>
<email>adeline@dev-facile.com</email>
</personne>
<personne class = "developpeur">
<nom>Del</nom>
<prenom>Matthieu</prenom>
<telephone>06 67 13 36 25</telephone>
<email>matthieu@dev-facile.com</email>
</personne>
<personne class = "developpeur">
<nom>Barr</nom>
<prenom>Alice</prenom>
<telephone>06 67 13 39 69</telephone>
<email>alice@dev-facile.com</email>
</personne>
<personne class = "developpeur">
<nom>Roge</nom>
<prenom>Marine</prenom>
<telephone>06 67 13 12 23</telephone>
<email>marine@dev-facile.com</email>
</personne>
<personne class = "developpeur">
<nom>Audra</nom>
<prenom>Aurélia</prenom>
<telephone>06 77 33 12 23</telephone>
<email>aurelia@dev-facile.com</email>
</personne>
</annuaire>
Et la partie XSL de l'exemple ci-dessous.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<!--
/**
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) :
*/
-->
<xsl:template match="/">
<html>
<head>
<title>AJAX XSL</title>
<style type="text/css">
body{
font-family: Arial;
}
</style>
</head>
<body>
<h3>Les Développeurs - Dev Facile</h3>
<table border="1" style="border-collapse: collapse" bordercolor="#000000" cellpadding="4">
<tr style="background: #5882FA;">
<td>Nom</td>
<td>Prénom</td>
<td>Téléphone</td>
<td>Mail</td>
</tr>
<!-- permet de parcourir et d'afficher chaque attribut select = (ou nœud du fichier xml)
<xsl:for-each select="annuaire/personne"> -->
<!-- ajoute un filtre et permet de parcourir et d'afficher chaque attribut select = (ou nœud du fichier xml) -->
<xsl:for-each select="annuaire/personne[prenom!='Marine']">
<!-- test pour faire apparaître que le prénom choisi
<xsl:if test="prenom='Alice'"> -->
<!-- ajoute un tri automatique sur la colonne prenom -->
<xsl:sort select="prenom" order="ascending" />
<tr>
<td><xsl:value-of select="nom"/></td>
<td><xsl:value-of select="prenom"/></td>
<td><xsl:value-of select="telephone"/></td>
<td><xsl:value-of select="email"/></td>
</tr>
<!-- fin du test if </xsl:if> -->
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
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 à la fin de 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.
