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 employant 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 fonctions utiles en JavaScript▲
Dans cette vidéo, découvrez les fonctions JavaScript qui vous seront indispensables dans le développement de votre site Web.
Exemple de code pour la méthode alert
<!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>Alert en JavaScript</title>
<script type="text/javascript">
function affiche()
{
alert("J'affiche une boîte de dialogue,\naffichée sur 2 lignes");
return;
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
Exemple de code pour la méthode confirm
<!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>Alert en JavaScript</title>
<script type="text/javascript">
function affiche()
{
var bReponse = window.confirm("Voulez-vous confirmer votre demande ?");
if(bReponse)
alert("Vous avez confirmé,\naffichée sur 2 lignes");
else
alert("Vous avez cliqué sur Annuler,\naffichée sur 2 lignes");
return;
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
Exemple de code pour la méthode prompt
<!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>Alert en JavaScript</title>
<script type="text/javascript">
function affiche()
{
var sNom = prompt("Quel est votre nom ?", "Renseignez votre nom");
var sPrenom = prompt("Quel est votre prenom ?", "Renseignez votre prenom");
alert("Vous vous appelé : "+sNom+"\navec pour prénom : "+sPrenom);
return;
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
III. Découvrez les constantes, les types number boolean string avec JavaScript▲
Découvrez dans cette vidéo les bases de la programmation en JavaScript en commençant par les différents types de variables et constantes.
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>Constantes en JavaScript</title>
<script type="text/javascript">
function affiche()
{
constante_numerique=1.45226;
constante_texte1="ma constante texte";
constante_texte2="ma constante texte";
constante_texte3="1.45226";
constante_texte4="Je suis d\'accord";
constante_chaine_vide=""
constante_infinie=7.6E+333*6.7E+333;
constante_nombre="ceci n'est pas un nombre";
constante_indefinie= undefined;
document.write ("Voici ma constante numérique :"+constante_numerique+"<BR>");
document.write ("Voici ma constante texte1 :"+constante_texte1+"<BR>");
document.write ("Voici ma constante texte2 :"+constante_texte2+"<BR>");
document.write ("Voici ma constante texte3 :"+constante_texte3+"<BR>");
document.write ("Voici ma constante texte4 :"+constante_texte4+"<BR>");
document.write ("Voici ma constante chaîne vide :"+constante_chaine_vide+"<BR>");
document.write ("Voici ma constante infinie :"+constante_infinie+"<BR>");
document.write ("Ma constante est-elle un nombre :"+isNaN(constante_nombre)+"<BR>");
document.write ("Voici la constante indéfinie :"+constante_indefinie);
return;
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
IV. Comment effectuer la conversion Number to String et la concaténation avec JavaScript▲
Dans cette vidéo, apprenez à convertir des types de données. Par exemple un nombre en chaîne de caractères et inversement.
Puis, vous verrez comment concaténer deux chaînes de caractères.
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>Concaténation en JavaScript</title>
<script type="text/javascript">
function affiche()
{
var nAddition, nNbre1 = 32; nNbre2 = 29;
nAddition = nNbre1+nNbre2;
alert("le résultat de l'addition 32 + 29 est : "+nAddition);
var nNbre32=32;
var sTexte="29";
var nNbreTxt=parseInt(sTexte);
var sAddition=nNbre32+sTexte;
alert("Résultat avant conversion : "+sAddition);
sAddition = nNbre32+nNbreTxt;
alert("Résultat après conversion : "+sAddition);
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 les spécificités de String avec JavaScript ▲
Découvrez dans cette vidéo les spécificités de la classe String en JavaScript, en particulier ses différentes méthodes.
Ci-dessous, l'exemple de code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<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>Javascript</title>
</head>
<body>
<div id="output">Resultat <br/><br/></div>
<script type="text/javascript" src="String-ex.js"></script>
</body>
</html>
Ci-dessous, le code JavaScript
/**
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) :
*/
/**
* Les chaines de caractères String
*/
var sTxt = new String("Bonjour !");
var sTxtRapide = "Bonjour rapide !";// ou plus simple
document.write( "sTxtRapide big : "+sTxtRapide.big()+" <br />" );//
document.write( "sTxtRapide small : "+sTxtRapide.small()+" <br />" );//
document.write( "sTxtRapide : "+sTxtRapide+ "contient : "+sTxtRapide.length+" caractères <br />" );//
document.write( "sTxtRapide bold : "+sTxtRapide.bold()+" <br />" );// affiche le texte en gras
document.write( "sTxtRapide fixed : "+sTxtRapide.fixed()+" <br />" );// modifie l'affichage du texte
document.write( "sTxtRapide fontcolor : "+sTxtRapide.fontcolor("#cccccc")+" <br />" );// modifie la couleur du texte
document.write( "sTxtRapide fontsize : "+sTxtRapide.fontsize(29)+" <br />" );// modifie la taille de la police
document.write( "sTxtRapide link : "+sTxtRapide.link("http://www.programmation-facile.com")+" <br />" );// ajoute un lien au texte
document.write( "sTxtRapide italics : "+sTxtRapide.italics()+" <br />" );// affiche le texte en italique
VI. Comment gérer les erreurs avec JavaScript et les exceptions try catch throw finally▲
Dans ce cours vidéo, découvrez la méthode pour gérer les erreurs d'exécutions de votre application Web en JavaScript.
Ces erreurs peuvent venir de votre code ou de l'utilisateur final et souvent le résultat est peu, ou pas du tout compréhensible. Avec les exceptions vous ou vos utilisateurs sauront facilement comment corriger l'erreur.
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>Exceptions en JavaScript</title>
<script type="text/javascript">
function affiche()
{
nValue=10;
try
{
nResultat = nValue/0;
throw new Error("une exception");// génère une exception manuellement par le code
}
catch(exception)
{
alert("Division par 0 impossible !!! \n"+exception);
}
finally
{
alert("Test suivant...");
}
return;
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</center>
</body>
</html>
VII. Comment créer vos fonctions avec JavaScript▲
Pour rendre votre code réutilisable il est intéressant de créer des fonctions. Dans cette vidéo, découvrez comment créer des fonctions en JavaScript.
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>Exceptions en JavaScript</title>
<script type="text/javascript">
function calculX(nVal1, nVal2)
{
var nCoeff = 0.69;
var nResultat = nVal2 / nVal1 * nCoeff;
return nResultat;
}
function affiche()
{
nVal1=80;
nVal2=2*30;
document.write("Le calcul pour une valeur de 80 est de : "+calculX(nVal1,nVal2)+" environ.");
return;
}
</script>
</head>
<body>
<center>
Appuyer sur le bouton Valider <br/><br/>
<input type="button" value="Valider" onclick="affiche()" /><br />
</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.
