De quoi va-t-on parler ?

Algorithme

Le mot algorithme vient du nom de l’auteur persan AlKhuwarizmi (né vers 780 - mort vers 850) qui a écrit en langue arabe le plus ancien traité d’algèbre abrégé de calcul par la complétion et la simplification dans lequel il décrivait des procédés de calcul à suivre étape par étape pour résoudre des problèmes ramenés à des équations.
Dans un premier temps rédiger un algorithme consiste à décrire les différentes étapes de calcul pour résoudre un problème algébrique, numérique ou décisionnel.

Pourquoi choisir JavaScript ?

Pour écrire ces différentes étapes on utilise un langage de programmation.
Il existe un très grand nombre de langages, nous travaillerons avec le langage JavaScript.
JavaScript est avant tout le langage de programmation du Web. Il a été inventé en 1995 par Brendan Eich, qui travaillait à l'époque pour la société Netscape, créatrice du premier navigateur Web populaire (l'ancêtre de Firefox).

Configurer son environnement de travail

Choisir un navigateur Web

Un navigateur Web est un logiciel conçu pour afficher des pages Web. Tous les ordinateurs actuels intègrent au moins un navigateur Web. Les plus connus sont Firefox, Chrome et Internet Explorer.
Nous utiliserons Firefox qui présente le triple avantage d'être libre, gratuit et de respecter au mieux les standards du Web.
Comme tous les navigateurs Web, Firefox est capable d'exécuter du code JavaScript.
Pour cela vous allez dans le menu Outils de Firefox, sélectionnez Développement Web puis Outils de développement.

Choisir un éditeur de code

Comme nous l'avons vu, programmer consiste essentiellement à écrire des lignes de code dans des fichiers.
Il existe beaucoup d'éditeur de codes comme Bloc-notes que l'on trouve dans les accessoires de Windows.
Nous utiliserons Brackets.

Dans le menu Affichage, vous décocherez l'option Effectuer une analyse lint des fichiers à l'enregistrement, vous travaillerez ainsi de manière plus aisée.
Enfin, nous allons ajouter à Brackets une extension pour mettre en forme le code source. Cette extension se nomme Beautify. Allez dans le menu Fichier et choisissez Gestionnaire d'extensions. Parmi les extensions disponibles, recherchez "Beautify" puis installez l'extension.

Structurer ses codes

Sur votre machine, créez un répertoire (un dossier) nommé javascript dans Mes documents. Dans ce dossier créez un autre dossier nommé cours1 Il contiendra tous les fichiers de cette leçon.
Sur l'éditeur Brackets allez dans Fichier, ouvrir un dossier et sélestionner le dossier cours1. Le nom du dossier s'affiche à gauche. A l'aide d'un clic droit de la souris sur le nom du dossier, créez un dossier js puis un dossier html.

Le fichier JavaScript

A l'aide de la souris faire un clic droit sur le dossier js puis créez un fichier que vous nommez cours.js.
Vous tapez le code ci-dessous.

Enregistrez votre code (CTRL S).
L'instruction console.log permet d'afficher une valeur depuis un programme JavaScript. La valeur à afficher est placée entre parenthèses et suivie d'un point-virgule.
Il peut s'agir indifféremment d'un nombre ou d'une chaîne de caractères.

Le fichier html

A l'aide de la souris faire un clic droit sur le dossier html puis créez un fichier que vous nommerez cours.html.
Vous tapez le code ci-dessous.

HTML n'est pas un langage de programmation mais un langage de description de contenu.
La ligne 1 est un commentaire, une information pour le programmeur elle est inactive.
La ligne 2 indique que le langage est du html.
La ligne 3 est l'entête. L'encodage le plus pratique pour échanger des textes constitués de caractères Unicode est UTF-8.
Le titre apparaitra en haut de l'écran dans la barre d'information du fichier.
La ligne 9 est le corps de notre page. Le rôle de cette page est d'indiquer au navigateur quel fichier JavaScript nous voulons exécuter, grâce à la balise < script >
Celle-ci contient le chemin d'un fichier source (src="../js/cours.js") : on dit qu'elle "pointe" vers ce fichier. Le chemin indiqué ici est celui du fichier cours.js situé dans le répertoire cours1/js. Les deux points (..) au début du chemin permettent de remonter d'un niveau dans l'arborescence des répertoires par rapport à l'emplacement du fichier HTML.
Lorsqu'un navigateur Web essaiera d'afficher la page cours.html, il exécutera le code JavaScript contenu dans le fichier cours.js.
En résumé pour afficher le résultat du script JavaScript nom.js, contenu dans le répertoire js nous devrons créer la page web nom.html contenue dans le répertoire html.

Affichage du résultat

Sur Firefox appuyez sur la touche Alt pour faire afficher le menu puis ouvrez le fichier cours.html.
Vous obtenez le résultat ci-dessous.

En activant le Débogueur le script JavaScript s'affiche. Le résultat se trouve dans la console.

La barre de saisie

Il peut être intéressant d'utiliser la barre de saisie en bas de l'écran pour tester une instruction.

Données et variables

Vocabulaires

L'essentiel du travail effectué par un programme d'ordinateur consiste à manipuler des données. Ces données peuvent être de différents types, numériques (entier, décimal), alphabétiques, ... Ces données sont stockées dans des variables.
En JavaScript, pour donner une valeur à une variable, il suffit d'écrire : var nom de la variable = valeur.
JavaScript n'impose pas de définir le type d'une variable. Ce type est déduit de la valeur stockée dans la variable, et peut donc changer au fur et à mesure de l'exécution du programme : on dit que JavaScript est un langage à typage dynamique.
Une variable respecte quelques règles de syntaxe incontournables :

Stocker une valeur à une variable c'est lui affecter une valeur.

Exercice 1 : calculs

Dans votre répertoire html, créez un fichier calculs.html. Puis tapez le code ci-dessous.

Dans votre répertoire js, créez un fichier calculs.js. Puis tapez le code ci-dessous. Les deux slashs permettent de commenter la ligne.

Puis sur Firefox vous ouvrez le fichier calculs.html.

Exercice 2 : variables

Dans votre répertoire html, créez un fichier variables.html. Puis tapez le code ci-dessous.

Dans votre répertoire js, créez un fichier variables.js. Puis tapez le code ci-dessous.

En ligne 1 on déclare la variable a. Au niveau de l'ordinateur, déclarer une variable déclenche la réservation d'une zone de la mémoire attribuée à cette variable. Le programme peut ensuite lire ou écrire des données dans cette zone mémoire en manipulant la variable.
Puis on donne une valeur 3 à la variable a. On utilise l'opérateur = , appelé opérateur d'affectation. Ici la variable a sera de type integer soit entier puisque 3 est un entier.
En ligne 2 on affiche le texte "a = " suivi de la valeur de la variable a. Pour cela on utilise l'opérateur +.

Modifiez le script variables.js en ajoutant les lignes 3 et 4 puis sur Firefox Actualisez la page.

Ici la variable b est de type float, soit décimal.

Modifiez le script variables.js en ajoutant les ligne 5 à 7 puis sur Firefox Actualisez la page.

Ici les variables c et d sont de type caractères, ce sont des chaînes de caractères. L'opérateur + réalise la concaténation des deux chaînes c et d.

Modifiez le script variables.js en ajoutant les lignse 8 et 9, puis sur Firefox Actualisez la page.

Ici la variable c est multiplié par 2 pour obtenir le texte "Bonjour Bonjour" mais l'affichage obtenu est Nan. Il y a un problème de type de variables. JavaScript ne tolère pas l'opération muliplication sur les chaînes de caractères.
Nous verrons par la suite comment convertir le type d'une variable en un autre type.

Exercice 3 : Expressions

Dans votre répertoire html, créez un fichier expressions.html. Puis tapez le code ci-dessous.

Dans votre répertoire js, créez un fichier expressions.js. Puis tapez le code ci-dessous.

En ligne 3, à la variable a qui contenait l'entier 3 on lui affecte a-5, autrement dit on soustrait à la valeur de a l'entier 3, ainsi la nouvelle valeur de a est l'entier -2.

Modifiez le script expressions.js en ajoutant les lignes 5 à 7, puis sur Firefox Actualisez la page.

En ligne 6 on affecte à la variable c la valeur de l'expression a+b.

Modifiez le script expressions.js en ajoutant les lignes 8 à 10, puis sur Firefox Actualisez la page.

Ici la variable d est de type chaîne de caractères . Puis en ligne 9 on utilise l'ordre Number() pour convertir la variable d en entier. On parle de conversion explicite . Ainsi l'opération multiplication fonctionne.On peut aussi utiliser l'ordre String() pour convertir un type en chaîne de caractères.

Modifiez le script expressions.js en ajoutant les lignes 11 à 13, puis sur Firefox Actualisez la page.

Ici en ligne 11, la variable e est de type entier et en ligne 12 l'utilisation de l'opérateur + entre une valeur de type chaîne et une valeur de type nombre provoque la concaténation des deux valeurs dans un résultat de type chaîne. On parle de conversions implicites : elles sont faites automatiquement, sans intervention du programmeur.

Modifiez le script expressions.js en ajoutant les lignes 14 et 15, puis sur Firefox Actualisez la page.

Ces lignes permettent d'envisager plusieurs déclarations de variables et leur affectation sur une même ligne

Exercice 4 : Affectations

Dans votre répertoire html, créez un fichier affectations.html qui pointera sur le fichier affectations.js.
Dans votre répertoire js, créez un fichier affectations.js puis tapez le code ci-dessous.
Vous générerez la page web chaque fois que vous aurez écris l'instruction console.log(), autrement dit toute les deux lignes.

Exercice 5 : A vous de jouer !

Pour le premier exercice ci-dessous vous crérez, dans le dossier html, le fichier exercice1.html qui pointera sur le fichier exercice1.js. Puis vous écrirez le code du fichier exercice1.js, dans le dossier js.
Vous ferez de même avec exercice2.html et exercice2.js...etc.