> Créé en 1995, JavaScript est un langage inspiré de Java (mais de façon simplifiée) qui permet d'accéder aux objets dans les applications web notamment. Il est utilisé pour vérifier les champs de saisies dans les formulaires, pour faire des animations ou des effets de transitions.
Si vous placez votre code dans un fichier, celui-ci sera chargé lorsqu'il apparaîtra dans le code **mais** s'il contient des ***fonctions***, celles-ci ne ***s'exécuteront*** que lorsqu'elles seront ***appelées***.
Le JavaScript est un langage **interprété** tout comme le HTML & le CSS : dès lors que votre navigateur web va rencontrer une balise "script" il n'essaiera plus de lire mais laissera le moteur JS faire le travail. Une fois la balise fermante atteinte, le navigateur web reprendra la main.
- Créons une page HTML5 nommée index.html. Vous pouvez utiliser une copie de votre précédent site. Ajoutons ensuite une ligne de code qui va demander l'exécution du code JavaScript :
Nous avons donc ajouté la balise "script", cette balise accepte un attribut "src" qui correspond au chemin du fichier JavaScript (extension .js) qui doit être exécuté. Dans notre exemple, notre fichier "JavaScript" sera dans le même dossier que notre fichier "HTML" et se nommera "monprogramme.js".
À ce stade, vous devez juste avoir compris que le code document.write vous permet d'afficher la chaîne de caractères contenue entre les guillemets (dans notre exemple : Hello World !). Il est aussi important de noter qu'en JavaScript, une ligne de code doit se terminer par un point virgule.
> **Note historique** : Avant 2015, on utilisait `var` pour déclarer les variables. Vous le verrez encore dans d'anciens codes, mais préférez toujours `let` et `const`.
JavaScript est un langage faiblement typé, il n'est donc pas nécessaire de préciser le type de la variable. Attention, cela ne veut pas dire que votre variable n'a pas de type, juste que le programmeur n'a pas besoin de le préciser.
En JavaScript les types possibles sont : string (chaîne de caractères), boolean, les nombres (number) qui regroupent les entiers (type integer) et les nombres à virgule (type float). Attention pour le type float vous devez utiliser le point à la place de la virgule, par exemple le nombre pi ne s'écrit pas 3,14 mais 3.14.
> **Note** : On utilise `let d;` car une variable déclarée sans valeur initiale ne peut pas être `const`.
Vous avez dû noter que pour une variable de type string, la valeur est entre guillemets.
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
Deux choses à bien noter dans cet exemple :
- ➢ Vous avez sans doute reconnu la balise <br> ("retour à ligne") du HTML.
- document.write vous permet d'écrire du code HTML, il est donc logique d'utiliser la balise <br> pour effectuer un retour à la ligne (toute autre balise est aussi utilisable, essayez avec une balise <strong> par exemple).
- Enlevez les <br> du code pour vous convaincre de leur utilité. Enfin, attention, tout comme le texte, les balises HTML doivent être entre guillemets. La variable et la fonction typeof ne sont pas entre guillemets.
- ➢ Une variable quand elle a été déclarée, mais qu'aucune valeur ne lui a été attribué, a pour valeur undefined et est de type undefined.
- Que se passe-t-il quand on utilise une variable qui n'a même pas été déclarée ?
```javascript
const a = 4;
document.write("a a pour valeur ", a);
document.write("b a pour valeur ", b);
const c = "Hello";
document.write("c a pour valeur ", c);
```
- 1ère ligne : nous déclarons la constante `a` avec la valeur numérique 4.
- 2ème ligne : nous utilisons la variable `a`
- 3ème ligne : nous utilisons une variable `b` qui n'a pas été déclarée !
- 4ème ligne : nous déclarons la constante `c` avec la valeur chaîne "Hello".
- 5ème ligne : nous utilisons `c`.
- Ouvrez le fichier HTML à l'aide du navigateur Firefox et observez le résultat.
Le programme s'est arrêté à la 3ème ligne. Utiliser une variable non déclarée est une erreur qui provoque l'arrêt du programme.
Problème, rien ne nous signale cette erreur dans le navigateur (c'est assez logique, à la base un navigateur n'est pas un outil de développement !).
### Les boites de dialogue
- Pour debugger des programmes il suffit souvent de placer des alertes à différents endroits du code.
```javascript
alert("Une alerte simple");
const myText = "Une alerte avec le message dans une variable";
alert(myText);
const myNumber = 13;
alert("La variable contient la valeur " + myNumber);
deux chaînes de caractères revient à les coller à la suite l'une de l'autre : c'est une concaténation.
Nous allons maintenant étudier la méthode qui permet à l'utilisateur de rentrer des valeurs au clavier : la
méthode `prompt()`. Nous allons utiliser une structure de la forme : `const maVariable = prompt(message);`
L'utilisateur va alors saisir (au clavier) du texte dans la zone de saisie. La validation avec le bouton OK permettra d'attribuer le texte entré par l'utilisateur à la variable maVariable. Au cas où l'utilisateur ne rentrerait rien ou qu'il appuierait sur Annuler on aura alors maVariable = null (pas de valeur).
- Voici un exemple :
```javascript
const prenom = prompt("Quel est votre prénom ?");
document.write("Bonjour ", prenom, ", vous allez bien ?");
Les variables a et b sont toutes deux de type string. Or, nous avons vu que si nous avons affaire à des chaînes de caractères le signe + est le signe de concaténation (mise bout à bout de 2 chaînes de caractère). Si nous mettons bout à bout 5 et 15, nous obtenons bien 515.
Pour que notre programme fonctionne, il faut "transformer" notre chaîne (variable de type string) en nombre (variable de type integer). Nous allons faire du transtypage (convertir un type en un autre).
- Pour ce faire, utilisons la méthode `parseInt()` :
```javascript
document.write("Nous allons additionner 2 nombres, a et b <br>");
Les variables déclarées dans une fonction sont **locales** :
```javascript
function test() {
const variableLocale = "Je suis locale";
document.write(variableLocale);
}
test(); // Affiche : Je suis locale
// document.write(variableLocale); // ERREUR : variable non définie
```
> **Avantage de let/const** : Contrairement à `var`, les variables déclarées avec `let` et `const` ont une portée de **bloc** (entre `{}`), ce qui évite beaucoup de bugs.
-------
## Les tableaux (Arrays)
Un tableau permet de stocker plusieurs valeurs dans une seule variable.
<arel="license"href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><imgalt="Licence Creative Commons"style="border-width:0"src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png"/></a><br/>Ce cours est mis à disposition selon les termes de la <arel="license"href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International</a>.
