Débutez en programmation avec le langage Javascript

Matthieu - Développement Facile

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 : Commentez ♪

- Titre : Débutez en programmation avec le langage Javascript

- Auteur : Matthieu - Développement Facile

- Parution : 7 juillet 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 utiliser les booléens en JavaScript, PHP, ActionScript… ?

- III. Comment utiliser les conditions if, else, switch… en programmation ?

- IV. Comment utiliser la classe Array en JavaScript, php… ?

- V. Comment utiliser et manipuler les chaînes de caractères String ?

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

- VII. Comment utiliser les fonctions mathématiques ?

- VIII. Recevez gratuitement la formation « JavaScript Facile »

- IX. Remerciements

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.

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

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.

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

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.

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

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.

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

Suivez 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.

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

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.

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

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

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