Programmation client, année 2018



## Les variables en JavaScript. 

Comme en `Python`, on peut définir des variables pour réutiliser des valeurs. 
Entrez dans la console les lignes suivantes:

~~~~~~{.javascript .numberLines}
var uneVariable = "Aurevoir!";
alert(uneVariable);

Testez cette page ici

Les variables sont typées mais le type n’est pas explicité dans la syntaxe (contrairement par exemple au langage C). Pour en savoir plus sur les différents types de variables, consultez la page web du W3C.

On manipules les variables à l’aide d’opérateurs dont la sémantique dépend du type de la variable.

var uneChaine = "J'aime ";
var uneAutreChaine = "le JavaScript";
var toujoursUneChaine = uneChaine + uneAutreChaine; 
alert(toujoursUneChaine); // affiche: "J'aime le JavaScript" 
alert(uneChaine + uneAutreChaine); //  affiche: "J'aime le JavaScript"
var unNombre = 6;
var unAutreNombre = 7;
alert(unNombre * unAutreNombre); // affiche: "42" 
alert(unNombre + unAutreNombre); // affiche "13";

Il est également possible de faire des opérations qui mélangent les types sans que cela ne déclenche d’erreurs car JavaScript est très permissif.

var uneChaine = "HTML";
var unNombre = 5;
alert(uneChaine + unNombre+" c'est cool"); // affiche: "HTML 5 c'est cool"."

Tout n’est évidemment pas faisable, par exemple:

var x = "HTML"; // les noms de variables peuvent être plus court
var y = 5; //mais c'est moins lisible
alert(x*y); // affiche: "NaN"

La valeur NaN signifie “Not a Number”. D’autres erreurs existent comme undefined et Null.

Rappel sur les booléens

Les booléens sont un type de variables particulièrement utile en programmation, en particulier pour ce qu’on appelle le contrôle de flux. Une variable booléenne peut prendre la valeur true ou false. Il est très important d’être à l’aise sur les calculs réalisés dans l’algèbre de Bool de manière générale et pas uniquement pour ce cours!!

Les booléens peuvent être générés via des opérations de comparaison sur des variables de type plus complexe. Par exemple:

var x = "HTML";
var longueur = x.length; // retourne la longueur de la chaîne x
alert(longueur > 4); // affiche `false`
alert(longueur == 4); // affiche `true`
alert(longueur <= 4); // affiche `true`

Pour les exemples de cette page et cette page de W3schools.

Les fonctions

Comme dans tous les langages de programmation, il est important de pouvoir définir et utiliser de nouvelles fonctions, pour structurer le code, le rendre plus lisible. En JavaScript, définir des fonctions est particulièrement important à cause de l’asynchronicité du langage. On reviendra sur ce sujet au CM suivant.

function maNouvelleFonction(x)
{
    alert("ma fonction affiche le parametre:"+x);
}
maNouvelleFonction("pouet");// affiche "ma fonction affiche le parametre:pouet"

Le mot clef return permet d’indiquer une valeur de retour de la fonction:

function jeMeRepette(parametre) 
{
    return parametre+" "+parametre;
}
alert(jeMeRepette("pouet"));// affiche "pouet pouet"

Il est possible de composer les fonctions les unes avec les autres:

maNouvelleFonction(jeMeRepette("pouet"));
// affiche "ma fonction affiche le parametre:pouet pouet"

Enfin, il est possible d’assigner une fonction à une variable.:

var repet = function(parametre)
{
    return parametre+" "+parametre;
};
alert(repet("pouet")); // affiche "pouet pouet"

Lisez attentitvement les exemples de cette page sur la W3school.

Les objets

En JavaScript, on manipule en permanence des éléments plus complexes que des nombres ou des chaînes de caractères. Cela se fait via des objets. Comprendre comment ceux-ci fonctionnent est donc indispensable pour maîtriser ce langage.

var unObjet = {"nom":"Paperman", "prenom":"Charles"};
alert(unObjet.nom); // affiche "Paperman"
alert(unObjet.prenom); // affiche "Charles"
unObjet.profession = "Enseignant de JavaScript";
alert(unObjet.profession); // affiche "Enseignant de JavaScript"

Il est possible de passer un objet en paramètre d’une fonction. Par exemple:

function quiSuisJe(unObjetEnParametre)
{
    alert(unObjetEnParametre.prenom+" "+unObjetEnParametre.nom);
}

Un objet contient donc des valeurs accessibles depuis un mot clef (keyword en anglais) mais pas seulement. En effet on peut également associer directement des fonctions.

Un peu de terminologie: les valeurs stockées dans un objet sont appelées propriétés alors que les fonctions sont appelées des méthodes.

Voici un exemple de méthode:

unObjet.uneMethode = function()
{
    alert("Une fonction appelée par unObjet");
}

unObjet.uneMethode(); // Affiche "Une fonction appelée par un objet"

Lisez attentivement la page suivante dédiée aux objets.

Le mot clef this

L’un des intérêts des méthodes par aux fonction est la possibilité d’accéder à l’objet qui les a appelées. Par exemple:

unObjet.uneMethodeAvecThis = function()
{
    alert("Je suis "+this.prenom+" "+this.nom+" "+this.profession );
}

unObjet.uneMethodeAvecThis(); // Affiche "Je suis Charles Paperman enseignant de JavaSscript"

Testez cette page ici

Le guide de style

Chaque langage de programmation possède un code de style, c’est-à-dire des règles à respecter pour que le code reste lisible et standardisé. Pour les usages en JavaScript, vous pouvez consulter les recommandations de la w3school sur ce sujet.


Compiled the: dim. 07 janv. 2024 23:19:24 CET