Toutes les techniques dont vous avez besoin pour créer des applications JavaScript Performantes

Matthieu - Développement Facile

Formation JavaScript pour créer des applications Web performantes.
À travers six cours complets en vidéo, accompagnés du code source commenté, vous apprendrez comment effectuer le débogage rapide de votre code JavaScript. Puis vous découvrirez l'utilisation des opérateurs arithmétiques et de comparaison ainsi que les conditions if - else - elseif - switch - case - break. Ensuite vous verrez comment utiliser la puissance des boucles for, while, do while, de même que la gestion des événements. Finalement vous apprendrez comment utiliser les formulaires JavaScript - liste déroulante, checkbox, button radio…

Commentez cet article : Commentez ♪

- Titre : Toutes les techniques dont vous avez besoin pour créer des applications JavaScript Performantes

- Auteur : Matthieu - Développement Facile

- Parution : 17 juin 2014

- Licence : Le contenu de cet article est rédigé par Développement Facile et est mis à disposition selon les termes de la Licence Creative Commons Attribution - Partage dans les Mêmes Conditions 3.0 non transposé. Les logos Developpez.com, en-tête, pied de page, css, et look & feel de l'article sont Copyright ® 2013 Developpez.com.

Sommaire

- I. Introduction

- II. Comment effectuer le debug de votre code JavaScript

- III. Utilisez tous les opérateurs arithmétiques et de comparaison avec JavaScript

- IV. Maîtrisez les conditions if else elseif switch case break avec JavaScript

- V. Comment utiliser la puissance des boucles for, while, do while avec JavaScript

- VI. Découvrez tous les événements JavaScript

- VII. Comment manipuler les formulaires HTML en JavaScript - liste déroulante, checkbox, button radio…

- VIII. Recevez Gratuitement la Formation JavaScript Facile

- IX. Remerciements

I - Introduction

Vous avez sûrement entendu parler des concepts AJAX, du Web 2.0…
Ce qui se cache derrière ces termes à la mode est très simple à apprendre, 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 à la fois performantes et que vos visiteurs adorent !
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 le debug de votre code JavaScript

Vous écrivez votre code JavaScript, soit à partir d'un diagramme, d'un cahier des charges ou directement depuis vos idées.
Une fois le code écrit, il y a souvent des erreurs (moi le premier, j'en fais), plus ou moins compliquées à corriger.
Le problème, est que par défaut en exécutant votre application web, il est très difficile de trouver la source de ces bogues, lorsqu'ils apparaissent visiblement à l'écran !

Dans le cours vidéo ci-dessous, apprenez à utiliser des outils très simples pour détecter et corriger rapidement les bogues de vos applications web.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

III - Utilisez tous les opérateurs arithmétiques et de comparaison avec JavaScript

Dans ce nouveau cours, vous allez apprendre les bases de la programmation JavaScript avec l'utilisation des principaux opérateurs arithmétiques comme les additions, les soustractions, l'incrémentation, la décrémentation…
Vous saurez aussi utiliser les opérateurs de comparaison, souvent utilisé dans les conditions if, les boucles while, for.
Les bases JavaScript expliquées dans ce cours existent dans la majorité des langages de programmation, vous faites d'une pierre deux coups !

Tout est dans le cours vidéo ci-dessous.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

IV - Maîtrisez les conditions if else elseif switch case break avec JavaScript

Et on continue ensemble sur l'apprentissage des bases du langage JavaScript.
Ce cours est la continuité directe du précédent, avec la mise en pratique des conditions if, else, elseif et switch, case, break.

C'est parti pour le cours vidéo ci-dessous.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Et voici un exemple de code source JavaScript qui utilise les conditions.

<!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>Conditions en JavaScript</title>

<script type="text/javascript">

function affiche()
{
sReponse = prompt("Javascript est un langage : A-Non typé ou B-Faiblement typé ou C-Typé", "Saisissez ici la lettre correspondante");

switch (sReponse)
{
case "A":
alert("Faux, ré essayez");
affiche();
break;

case "B":
alert("Bien joué ! C'est exact");
break;

case "C":
alert("Archi Faux, ré essayez");
affiche();
break;

default :
alert("Réponse hors sujet !!! ré essayez");
affiche();
break;
}

return;
}

</script>

</head>

<body>

<center>
Appuyer sur le bouton Valider <br/><br/>

<input type="button" value="Valider" onclick="affiche()" /><br />
</center>

</body>

</html>

V - Comment utiliser la puissance des boucles for, while, do while avec JavaScript

Dans ce nouveau cours, vous allez apprendre comment utiliser tout le potentiel des boucles for, while, do while avec JavaScript.
La notion de boucles est également présente dans de nombreux autres langages de programmation.

Regardez le cours vidéo ci-dessous.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Et voici le code source JavaScript avec la mise en pratique des boucles !

<!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>Conditions en JavaScript</title>

<script type="text/javascript">

function affiche()
{
nValue=-1;
while (nValue<0 || isNaN(nValue) )
nValue=prompt("Saisissez un nombre positif", "Renseignez votre valeur");

alert("Votre nombre positif : "+nValue) ;

return;
}

</script>

</head>

<body>

<center>
Appuyer sur le bouton Valider <br/><br/>

<input type="button" value="Valider" onclick="affiche()" /><br />
</center>

</body>

</html>

<!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>Boucles en JavaScript</title>

<script type="text/javascript">

function affiche()
{
var sTxt = "";

for (j=0;j<15;j++)
{
if (j==3) {
continue;// n'affiche pas la valeur 3
}
sTxt += "\nLa valeur de j est égale à : "+j;
}

alert(sTxt);
return;
}

</script>

</head>

<body>

<center>
Appuyer sur le bouton Valider <br/><br/>

<input type="button" value="Valider" onclick="affiche()" /><br />
</center>

</body>

</html>

VI - Découvrez tous les événements JavaScript

Dans ce cours, vous allez apprendre un des piliers du langage JavaScript : les événements !
JavaScript est un langage événementiel, donc la connaissance de l'utilisation des événements va vous permettre de faire un grand bond en avant dans la création d'applications web.

Tout est dans le cours ci-dessous.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Et voici un exemple de code source pour mettre en pratique la notion d'événements.

<!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>Evenements en JavaScript</title>

<script type="text/javascript">

window.document.onLoad=alert("Je m'affiche lors du chargement de la page");

function affiche(sButtonName)
{

alert("Vous avez cliqué sur le bouton : "+sButtonName);

return;
}

</script>

</head>

<body>

<center>
Appuyer sur le bouton Valider <br/><br/>

<form id="form" name="form" method="post" action="" >
<p>
<input type="submit" name="Submit" value="Valider" onClick="affiche(this.value)" />
</p>
</form>

</center>

</body>

</html>

VII - Comment manipuler les formulaires HTML en JavaScript - liste déroulante, checkbox, button radio…

Vous l'avez sûrement remarqué, les formulaires sont partout sur les sites web.
À votre tour de savoir utiliser leurs possibilités !
Vous allez découvrir les options accessibles avec les formulaires et comment les implémenter dans vos applications web.

Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne.

Et voici un exemple de code source pour ajouter des formulaires dans vos applications web.

<!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>

</form>

</center>

</body>

</html>

VIII - Recevez Gratuitement la Formation JavaScript Facile

Si vous souhaitez aller beaucoup 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, et 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 !

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 Jean pour sa relecture orthographique.