♪
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. Comment utiliser les booléens en JavaScript, PHP, ActionScript… ?▲
Découvrez une première notion de programmation avec l'utilisation des booléens.
Ci-dessous, l'exemple de code
/**
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) :
*/
// utilisation de la classe
console.log("---> exemple javascript array");// avec extension firebug
var aFruits = new Array('pomme', 'orange', 'banane', 'peche', 'clementine');
console.log("un fruit :"+aFruits[2]);// affiche un élément du tableau
// parcourir un tableau
for (i = 0; i < aFruits.length; i++)
{
console.log("un nouveau fruit :"+aFruits[i]);// affiche un élément du tableau
}
console.log("tous les fruits :"+aFruits.toString() );// renvoie tous les éléments du Tableau
/**
* Des méthodes de manipulation des tableaux identiques à l'ActionScript
*
*/
aFruits.splice(2, 2); // supprime un élément du tableau : l'index, le nombre d'éléments à supprimer
console.log("tous les fruits :"+aFruits.toString() );// renvoie tous les éléments du Tableau (sauf banane et peche)
aFruits.unshift('orange');// ajoute des éléments au début de Tableau.
aFruits.push('banane');// ajoute des éléments à la fin de Tableau.
console.log("tous les fruits :"+aFruits.toString() );// renvoie tous les éléments du Tableau (sauf banane et peche)
// Concatène / assemble le contenu du tableau aFruits avec le tableau aFruitsNouveaux et retourne un nouveau tableau aFruitsComplete.
// Le tableau de départ aFruits n'est pas modifié.
var aFruitsNouveaux = new Array('ananas', 'mangue');
var aFruitsComplete = aFruits.concat(aFruitsNouveaux);
console.log("Avec les nouveaux fruits :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
console.log("Avec les nouveaux fruits.join() :"+aFruitsComplete.join( ' - ' ) );// envoie une chaîne de caractères contenant tous les éléments du tableau
console.log("Avec les nouveaux fruits.indexOf() :"+aFruitsComplete.indexOf( 'ananas' ) );// Renvoie la position de l'élément donné en paramètre. Si l'élément n'est pas trouvé, retourne -1.
/**
* Les booléens
*/
var bValue = new Boolean(false);
// le booleen bValue est égal à false, le tableau fruits n'est pas affiché
console.log("bValue false :"+bValue );
if( bValue == true )
{
console.log("Avec les fruits false :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
}
bValue = true;
console.log("bValue true :"+bValue );
//le booleen bValue est égal à true, le tableau fruits est affiché
if( bValue == true )
{
console.log("Avec les fruits true :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
}
}III. Comment utiliser les conditions if, else, switch… en programmation ?▲
Dans ce cours vidéo, apprenez les bases de l'algorithmie avec l'utilisation des conditions.
Ci-dessous, un exemple de code javascript.
<!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>IV. Comment utiliser la classe Array en JavaScript, php… ?▲
Vous verrez ici un élément essentiel de la programmation : les tableaux.
Apprenez à les créer et à les manipuler.
Ci-dessous l'exemple de code
/**
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) :
*/
// utilisation de la classe
console.log("---> exemple javascript array");// avec extension firebug
var aFruits = new Array('pomme', 'orange', 'banane', 'peche', 'clementine');
console.log("un fruit :"+aFruits[2]);// affiche un élément du tableau
// parcourir un tableau
for (i = 0; i < aFruits.length; i++)
{
console.log("un nouveau fruit :"+aFruits[i]);// affiche un élément du tableau
}
console.log("tous les fruits :"+aFruits.toString() );// renvoie tous les éléments du Tableau
/**
* Des méthodes de manipulation des tableaux identiques à l'ActionScript
*
*/
aFruits.splice(2, 2); // supprime un élément du tableau : l'index, le nombre d'éléments à supprimer
console.log("tous les fruits :"+aFruits.toString() );// renvoie tous les éléments du Tableau (sauf banane et peche)
aFruits.unshift('orange');// ajoute des éléments au début de Tableau.
aFruits.push('banane');// ajoute des éléments à la fin de Tableau.
console.log("tous les fruits :"+aFruits.toString() );// renvoie tous les éléments du Tableau (sauf banane et peche)
// Concatène / assemble le contenu du tableau aFruits avec le tableau aFruitsNouveaux et retourne un nouveau tableau aFruitsComplete.
// Le tableau de départ aFruits n'est pas modifié.
var aFruitsNouveaux = new Array('ananas', 'mangue');
var aFruitsComplete = aFruits.concat(aFruitsNouveaux);
console.log("Avec les nouveaux fruits :"+aFruitsComplete.toString() );// renvoie tous les éléments du Tableau
console.log("Avec les nouveaux fruits.join() :"+aFruitsComplete.join( ' - ' ) );// envoie une chaîne de caractères contenant tous les éléments du tableau
console.log("Avec les nouveaux fruits.indexOf() :"+aFruitsComplete.indexOf( 'ananas' ) );// Renvoie la position de l'élément donné en paramètre. Si l'élément n'est pas trouvé, retourne -1.V. Comment utiliser et manipuler les chaînes de caractères String ?▲
Découvrez dans cette vidéo, comment manipuler les chaînes de caractères.
Apprenez à les découper et à les concacténer.
VI. Comment afficher la date avec JavaScript, PHP, ActionScript… ?▲
Apprenez à afficher et manipuler une date avec Javascript.
Ci-dessous, l'exemple de code
/**
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) :
*/
/**
* La date
*
*/
getDateLocale('output');// affiche l'heure de l'ordinateur de l'utilisateur
/**
* Récupère et affiche la date de l'ordinateur de l'utilisateur.
* @param sNameHTML : le nom de la balise HTML à renseigner
*
*/
function getDateLocale(sNameHTML)
{
var oDate = new Date();
//var oDate = new Date('1/01/2014 2:32:29');// pour définir une date
//oDate.setDate(13);// pour modifier la date du jour
//oDate.setMonth(1);// pour modifier le mois - un entier entre 0 et 11 qui correspond au mois
//oDate.setMinutes(29);// pour modifier les minutes - un entier entre 0 et 59 qui correspond aux minutes
var nAnnee = oDate.getFullYear();
var nMois = oDate.getMonth();// récupère le numéro du mois
// tableau des mois en fr
var aMois = new Array('Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre');
var nDateJour = oDate.getDate();// récupère la date du jour
var nJour = oDate.getDay();// récupère le numéro du jour
// tableau des jours en fr
var aJours = new Array('Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi');
var nHeure = oDate.getHours();
// au format 2 chiffres
if(nHeure<10)
nHeure = "0"+nHeure;
var nMinutes = oDate.getMinutes();
if( nMinutes<10)
nMinutes = "0"+nMinutes;
var nSecondes = oDate.getSeconds();
if( nSecondes<10)
nSecondes = "0"+nSecondes;
var sTxtDate = 'Votre ordinateur affiche : '+aJours[nJour]+' '+nDateJour+' '+aMois[nMois]+' '+nAnnee+', il est '+nHeure+':'+nMinutes+':'+nSecondes+'<br/><br/>';
document.getElementById(sNameHTML).innerHTML = sTxtDate;// renseigne la balise HTML (en entrée)
setTimeout('getDateLocale("'+sNameHTML+'");','900');// mise à jour de l'heure toutes les 0.9 seconde
return;
}VII. Comment utiliser les fonctions mathématiques ?▲
Les fonctions mathématiques vous seront certainement utiles dans le développement d'applications.
Apprenez ici à les utiliser.
Ci-dessous, l'exemple de code
/**
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) :
*/
/**
* La classe Math
*
*/
document.write( "Math.PI : "+Math.PI+" <br />" );// la classe Math
document.write( "Math.sin : "+Math.sin(32)+" <br />" );// la classe Math
document.write( "Math.cos : "+Math.cos(29)+" <br />" );// la classe Math
document.write( "Math.sqrt : "+Math.sqrt(4)+" <br />" );// la classe Math
document.write( "Math.abs : "+Math.abs(-32)+" <br />" );// la classe Math
document.write( "Math.ceil : "+Math.ceil(29.3)+" <br />" );// la classe Math - affiche 30
document.write( "Math.floor : "+Math.floor(29.7)+" <br />" );// la classe Math - affiche 29
document.write( "Math.round : "+Math.round(29.5)+" <br />" );// la classe Math - affiche 30VIII. 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 FacileCliquez 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 à Jean-PhilippeJean-Philippe pour sa relecture orthographique.
