TP 1: Introduction au JavaScript




Qu'est ce que le JavaScript ?

Le JavaScript est un langage de programmation, avec lequel je vais vous proposer de réaliser ce jeu :

Mes premiers pas en JavaScript ?

La boîte de dialogue alert()


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Mon premier script en JavaScript</title>
</head>
<body>
    <script>
        alert("Bonjour");
    </script>
</body>
</html>
        



La syntaxe du Javascript n'est pas compliquée. De manière générale, les instructions doivent être séparées par un point-virgule que l'on place à la fin de chaque instruction :

<script>
    Instruction1;
    Instruction2;
    Instruction3;
</script>



L'instruction var (pour variable) permet de déclarer une variable et éventuellement d'initialiser sa valeur.

<script>
    var n=3;
    n=n+2
    alert(n); //Affiche le contenu de la variable n
</script>



L'instruction prompt permet la saisie d'une valeur par l'utilisateur.

<script>
    var pnom = prompt('Entrez votre prénom :');
    alert(pnom); // Affiche le prénom entré par l'utilisateur
</script>

Saisis le code suivant :

<script>
    var pnom = prompt('Entrez votre prénom :');
    pnom="Bonjour "+pnom+' !'
    alert(pnom);
</script>



Saisis le code suivant :

<script>
    var a = prompt('Quel est ton âge ?');
    a=a+1;
    var b="Dans un an tu auras"+a;
    alert(b);
</script>

Ce script n'affiche pas l'âge qu'aura l'utilisateur l'année suivante, car a n'est pas un nombre mais une "chaîne de caractères"...

En effet, il existe plusieurs types de variables en JavaScript :

<script>
    var a = prompt('Quel est ton âge ?');
    var nb=parseInt(a); // Convertit la chaîne de caractère a en un entier (Integer)
    nb=nb+1;
    var b="L\'année prochaine tu auras "+nb;
    alert(b)
</script>

Exercice : Ecris un programme en JavaScript qui demande un nombre à l'utilisateur et affiche son double puis son carré.




La boucle while

Tant que (en anglais while) la condition est vérifiée, les instructions situées entre les accolades sont exécutées:

while (condition)
        {
            Instruction1;
            Instruction2;
            Instruction3;
        }

Saisis le code suivant :

<script>
    var n=1;
    while (n<20)
    {
        document.write(n+"+");
        n=n+1;
    }
</script>

Exercice : Modifie ce programme pour qu'il affiche la somme des 20 premiers entiers : 1+2+...+20=210

Exercice : Modifie ce programme pour qu'il demande à l'utilisateur un nombre n. Une fois le nombre saisi, la page affichera la somme des n premiers entiers comme dans cette page

Saisis le code suivant :

<script>
    var n=2;
    while (n<10)
    {
        document.write("<p>"+n+" kilomètres à pieds, ça use, ça use</p>");
        n=n+1;
    }
</script>

Exercice : Modifie ce programme pour qu'il demande à l'utilisateur un nombre n. Une fois le nombre saisi, la page affichera la table de mutliplication de n comme dans cette page




Une variable est de type Booléenne (boolean en anglais) si sa valeur est de deux types :

Ses valeurs true et false peuvent être la valeur de vérité d'une proposition logique. Par exemple :

var a=(2>3);
alert(a);

La variable a prend la valeur de vérité false car l'inégalité (2>3) est fausse.

OpérateursSignification
= = égalité
!= différent
< strictement inférieur
<= inférieur ou égal
> strictement supérieur
>= supérieur ou égal

Exercice : Détermine la valeur de vérité de chacune des variables booléennes présente dans le code suivant :

var a=(2<=3);
var b="voiture";
var c=(b=="camion");
var d=(b!="camion");
var e=(a==d);
Opérateurs logiquesSignification
&& Et
|| Ou
<script>
        alert(true && true);
        alert(true && false);
        alert(false && true);
        alert(false && false);
</script>

Exercice : En utilisant la code précédent, recopie et complète la table de vérité de l'opérateur logique && :

&&truefalse
true
false

Exercice : En modifiant le code précédent, détermine la table de vérité de l'opérateur logique ||.

Exercice : Détermine la valeur de vérité de chacune des variables booléennes présente dans le code suivant :

var a=(2==3);
var b=true;
var c=(a && b);
var d=(a || b);


Saisis le programme suivant :

<script>
    var a=true;
    while (a)
    {
        var secret=prompt('Saisissez le mot de passe');
        a=(secret!="javascript"); // a=true si la chaîne secret est différente de "javascript".
    }
    alert("Vous êtes connecté.");
</script>

Exercice : Modifie le code précédent, pour qu'il accepte plusieurs mots de passe.