Aller au contenu principal

Plongée dans JavaScript

Notions théoriques​

Introduction à JavaScript

JavaScript est un langage de programmation dynamique, haut niveau et orienté objet. Il est principalement utilisé pour donner vie aux pages Web, en les rendant interactives et en répondant aux actions de l'utilisateur. Par exemple, si vous avez déjà utilisé un formulaire en ligne, joué à un jeu sur votre navigateur ou vu une animation sur une page Web, c'est probablement grâce à JavaScript.

Variables et types de données

En JavaScript, une variable est un conteneur pour stocker des valeurs de données. Pour déclarer une variable, nous utilisons les mots-clés var, let ou const, suivis du nom de la variable. Par exemple, let age = 18; déclare une variable nommée age et lui attribue la valeur 18.

JavaScript est un langage à typage dynamique, ce qui signifie que le type de données d'une variable peut changer. Les types de données de base en JavaScript sont les suivants : Number, String, Boolean, Undefined, Null, Symbol et Object.

Exemple pratique​

Voici un exemple simple de la façon dont nous pouvons utiliser les variables en JavaScript.

let firstname = "John"; // Déclare une variable de type String
let age = 18; // Déclare une variable de type Number
let isStudent = true; // Déclare une variable de type Boolean

console.log("Mon nom est " + firstname + " et j'ai " + age + " ans. Suis-je un étudiant ? " + isStudent);

Dans cet exemple, nous déclarons trois variables : firstname, age et isStudent, et nous les utilisons pour afficher un message dans la console.

Quelques méthodes à connaître​

console.log()

La méthode console.log() est utilisée pour afficher des messages dans la console du navigateur. C'est un outil précieux pour le débogage et l'apprentissage de JavaScript.

alert()

La fonction alert() est utilisée pour afficher une boîte d'alerte avec un message et un bouton OK.

prompt()

La fonction prompt() affiche une boîte de dialogue qui invite l'utilisateur à entrer une entrée.

Test de mémorisation/compréhension​


Quel mot-clé n'est pas utilisé pour déclarer une variable en JavaScript ?


Quelle fonction est utilisée pour afficher une boîte de dialogue invitant l'utilisateur à entrer une entrée ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, nous allons créer un petit programme qui demande à l'utilisateur son nom et son âge, puis affiche un message de bienvenue personnalisé.

  1. Demandez à l'utilisateur son nom en utilisant la fonction prompt().
  2. Stockez le nom de l'utilisateur dans une variable.
  3. Faites de même pour l'âge de l'utilisateur.
  4. Affichez un message de bienvenue à l'utilisateur en utilisant son nom et son âge.

Coder le programme​

  1. Créez un fichier premier-programme.js dans un dossier javascript (dans le dossier de vos Documents).

  2. Voici le contenu du fichier premier-programme.js :

    // Demandez à l'utilisateur son nom
    let lastname = prompt("Quel est votre nom ?");

    // Demandez à l'utilisateur son âge
    let age = prompt("Quel est votre âge ?");

    // Affichez un message de bienvenue à l'utilisateur
    alert("Bienvenue " + lastname + "! Vous avez " + age + " ans.");

    Dans ce code, nous utilisons la fonction prompt() pour demander à l'utilisateur son nom et son âge. Nous stockons ces informations dans les variables lastname et age. Enfin, nous utilisons la fonction alert() pour afficher un message de bienvenue à l'utilisateur.

Exécuter le programme​

Pour exécuter ce petit programme JavaScript, vous pouvez utiliser le navigateur Web de votre ordinateur :

  1. Ouvrez votre navigateur Web.

  2. Ouvrez les outils de développement de votre navigateur.

    Ouvrir les outils de développement dans les navigateurs les plus courants

    • Utilisez le raccourci clavier Ctrl + Shift + I (sous Windows) ou Cmd + Option + I (sous Mac).

    ou

    • Faites un clic droit n'importe où sur la page et sélectionnez "Inspecter l'élément".

    ou

    • Allez dans le menu (les 3 barres/points verticaux dans le coin supérieur droit),
    • puis "Plus d'outils" ou "Développeur Web" et enfin "Outils de développement".

  3. Allez à l'onglet "Console".

  4. Collez le code, de votre fichier premier-programme.js, dans la console de votre navigateur.

  5. Appuyez sur "Entrée" pour exécuter le code.

Lorsque vous exécutez ce code, votre navigateur affiche une boîte de dialogue demandant votre nom, puis une autre demandant votre âge. Enfin, il affichera une alerte avec votre nom et votre âge.