Débutez en programmation avec le langage Javascript

Formation de base en programmation avec comme support le langage JavaScript
À travers six cours complets en vidéo, accompagnés d'exemples de codes source, apprenez à développer en JavaScript.
Apprenez les bases de la programmation. Vous verrez ici à quoi servent les booléens. Comment utiliser les conditions,
créer et gérer des tableaux, manipuler des chaînes de caractères et des dates et enfin utiliser des fonctions mathématiques.

Commentez cet article : 10 commentaires Donner une note à l'article (3)

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

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

 
Sélectionnez

/**

  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.

 
Sélectionnez

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

 
Sélectionnez

/**

  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.


Suivez ce lien pour voir les méthodes de l'objet String en JavaScriptSuivez ce lien pour voir les méthodes de l'objet String en JavaScript

VI. Comment afficher la date avec JavaScript, PHP, ActionScript,… ?

Apprenez à afficher et manipuler une date avec Javascript.


Ci-dessous, l'exemple de code

 
Sélectionnez

/**

  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&eacute;vrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Ao&ucirc;t', 'Septembre', 'Octobre', 'Novembre', 'D&eacute;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'application.
Apprenez ici à les utiliser.


Ci-dessous, l'exemple de code

 
Sélectionnez

/**

  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 30

		

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…

Formation Javascript Facile !
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 à Jean-PhilippeJean-Philippe pour sa relecture orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Licence Creative Commons
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.