Cours Javascript

Apprendre Javascript en 2023

Bienvenue dans notre cours de JavaScript ! JavaScript est un langage de programmation populaire qui est utilisé pour créer des applications web interactives et dynamiques. Il est supporté par tous les navigateurs web modernes, ce qui en fait un choix idéal pour les développeurs web.

Dans ce cours, vous apprendrez les bases de JavaScript, y compris les concepts de syntaxe, les types de données, les boucles et les conditions. Vous découvrirez également comment utiliser JavaScript pour manipuler le contenu HTML et CSS d’une page web, ainsi que pour gérer les événements utilisateur tels que les clics de souris et les saisies de clavier.

En plus de vous enseigner les fondamentaux de JavaScript, ce cours vous donnera également les compétences nécessaires pour créer des applications web interactives et dynamiques. Vous apprendrez comment utiliser JavaScript pour créer des formulaires, des animations, des carrousels d’images et d’autres fonctionnalités courantes.

Nous encourageons fortement la pratique et la mise en pratique des concepts appris dans les exercices proposés ainsi que des projets pour vous aider à comprendre de manière concrète les concepts. Si vous avez des questions ou des difficultés, n’hésitez pas à demander de l’aide à vos professeurs ou à vos camarades. Prêt à commencer ? Allons-y !

Qu’est-ce qu’une variable en javascript ?

En JavaScript, une variable est un conteneur pour stocker une valeur. Une fois qu’une variable est déclarée, vous pouvez lui affecter une valeur et utiliser cette valeur plus tard dans votre programme. Les variables sont déclarées en utilisant les mots clés var, let ou const, suivi du nom de la variable que vous souhaitez créer. Les variables peuvent stocker des valeurs de différents types, comme des nombres, des chaînes de caractères, des objets, des tableaux, etc. Les variables peuvent également être réaffectées avec une nouvelle valeur à tout moment, en fonction de la déclaration utilisée.

En résumé, une variable est un conteneur qui permet de stocker une valeur pour pouvoir s’en servir plus tard dans un programme, cette valeur peut être modifiée ou pas en fonction de la déclaration utilisée.

Comment déclarer une variable en javascript ?

Il existe plusieurs façons de déclarer une variable en JavaScript. La méthode la plus courante est d’utiliser la déclaration de variable avec le mot-clé var, let ou const.

• var est utilisé pour déclarer une variable qui peut être réaffectée à une autre valeur ou réinitialisée à tout moment.

var myVariable = "Hello World";
console.log(myVariable); // "Hello World"
myVariable = 5;
console.log(myVariable); // 5

• let est similaire à var en ce qu’il permet de déclarer une variable qui peut être réaffectée à une autre valeur ou réinitialisée à tout moment, cependant la portée de cette variable est limitée à l’environnement dans lequel elle a été déclarée (bloc, fonction, etc.).

let myVariable = "Hello World";
console.log(myVariable); // "Hello World"
myVariable = 5;
console.log(myVariable); // 5

• const est utilisé pour déclarer une variable qui ne peut pas être réaffectée à une autre valeur ou réinitialisée après avoir été initialisée.

const myVariable = "Hello World";
console.log(myVariable); // "Hello World"
myVariable = 5; // provoque une erreur car la variable est déclarée avec const
console.log(myVariable); 

Il est important de noter que si vous voulez déclarer une variable qui est un objet ou un tableau, vous pourrez toujours modifié les propriétés ou les éléments de cette variable, même si elle est déclarée avec const.

const myVariable = {a:1}
console.log(myVariable); // {a:1}
myVariable.a=2;
console.log(myVariable); // {a:2}

Il est donc important de comprendre la différence entre la réaffectation et la modification pour utiliser les bon mots clés.

Les différents types de variables

JavaScript utilise des types de données similaires à ceux de la plupart des autres langages de programmation, y compris les types de données primitifs et les types de données de référence.

Les types de données primitifs en JavaScript sont:

• Number (nombre)
• String (chaîne de caractères)
• Boolean (booléen)
• Symbol (symbole)
• null (nul)
• undefined (non défini)

Les types de données de référence en JavaScript sont:

• Object (objet)
• Array (tableau)
• Function (fonction)

Les types de données primitifs sont des valeurs simples qui ne peuvent pas être modifiées une fois créées. Les types de données de référence sont des objets qui peuvent être modifiés après leur création. Les objets incluent des fonctionnalités telles que les propriétés et les méthodes, qui peuvent être utilisées pour stocker des données et effectuer des actions. Les tableaux sont un type d’objet spécifique qui peut stocker une collection d’éléments de différents types. Les fonctions sont des objets qui peuvent être utilisés pour définir des actions à effectuer.

Quels sont les différents types de données en javascript ?

JavaScript utilise les types de données suivants:

• Number (nombre) : utilisé pour représenter les nombres à virgule flottante et les nombres entiers.
• String (chaîne de caractères) : utilisé pour représenter les chaînes de caractères, c’est-à-dire les séquences de caractères entourées de guillemets ou de apostrophes.
• Boolean (booléen) : utilisé pour représenter les valeurs vraies ou fausses.
• Symbol (symbole) : un type de données introduit dans ECMAScript 6, il est utilisé pour créer des valeurs uniques qui ne peuvent pas être confondues avec d’autres valeurs.
• null (nul) : utilisé pour représenter une valeur nulle ou non définie.
• undefined (non défini) : utilisé pour représenter une valeur qui n’a pas encore été définie ou qui n’a pas de valeur.
• Object (objet) : utilisé pour représenter des structures de données complexes qui peuvent contenir des propriétés et des méthodes.
• Array (tableau) : un type d’objet spécifique utilisé pour stocker une collection d’éléments de différents types.
• Function (fonction) : utilisé pour représenter des blocs de code qui peuvent être exécutés.

Il est important de noter que JavaScript est un langage à typage faible, cela signifie que les variables n’ont pas de type statique, les valeurs sont associées à des variables, et non pas aux variables elles-mêmes.

Quels sont les différents types de boucles en JS ?

Une boucle est un constructeur de programmation qui permet d’exécuter un bloc de code plusieurs fois de suite. Il existe plusieurs types de boucles en JavaScript, chacun ayant ses propres utilisations et caractéristiques. Les principaux types de boucles en JavaScript sont:

• La boucle for : utilisée pour itérer un nombre spécifique de fois. Elle est généralement utilisée pour parcourir des tableaux et des objets. Elle possède une syntaxe particulière, qui définie une condition d’entrée, une condition de sortie et une incrémentation.
• La boucle for…in : utilisée pour itérer les propriétés d’un objet. Elle est particulièrement utile pour parcourir les propriétés d’un objet qui n’ont pas d’ordre défini.
• La boucle for…of : utilisée pour itérer les valeurs d’un itérable (comme un tableau ou une chaîne)
• La boucle while : utilisée pour exécuter un bloc de code tant qu’une condition est vraie.
• La boucle do…while : similaire à la boucle while, mais elle exécute au moins une fois, car la condition est vérifiée après l’exécution du bloc de code.

Il est important de noter que les boucles peuvent facilement causer des boucles infinies si les conditions de sortie ne sont pas correctement gérées, il est donc important de bien comprendre les conditions d’entrée et de sortie de chaque type de boucle pour éviter les erreurs de boucles infinies.

Cela imprimera les nombres de 0 à 4 dans la console. La boucle exécute au moins une fois, car la condition est vérifiée après l’exécution du bloc de code, et la condition de sortie est définie comme « i < 5 », ce qui signifie que la boucle continuera de tourner tant que i est inférieur à 5, et l’expression d’incrémentation « i++ » est exécutée à l’intérieur de la boucle, ce qui ajoute 1 à la variable i à chaque tour.

Voici un exemple de code pour chaque type de boucle en JavaScript:

• Boucle for :

for (var i = 0; i < 5; i  ) { console.log(i); }

Cela imprimera les nombres de 0 à 4 dans la console. La variable i est initialisée à 0 avant la boucle, la condition de sortie est définie comme « i < 5 », ce qui signifie que la boucle continuera de tourner tant que i est inférieur à 5, et l’expression d’incrémentation « i++ » est exécutée après chaque itération, ce qui ajoute 1 à la variable i à chaque tour.

• Boucle for…in :

var obj = {a: 1, b: 2, c: 3}; for (var prop in obj) { console.log(obj[prop]); }

Cela imprimera les valeurs 1, 2 et 3 dans la console. La boucle parcourt les propriétés de l’objet (a, b, c) et utilise la notation de tableau pour accéder à leur valeur correspondante.

• Boucle for…of :

var arr = [1, 2, 3]; for (var val of arr) { console.log(val); }

Cela imprimera les valeurs 1, 2 et 3 dans la console. La boucle parcourt les valeurs de l’array (1, 2, 3)

• Boucle while :

var i = 0; while (i < 5) { console.log(i); i  ; }

Cela imprimera les nombres de 0 à 4 dans la console. La condition de sortie est définie comme « i < 5 », ce qui signifie que la boucle continuera de tourner tant que i est inférieur à 5, et l’expression d’incrémentation « i++ » est exécutée à l’intérieur de la boucle, ce qui ajoute 1 à la variable i à chaque tour.

• Boucle do…while :

var i = 0; do { console.log(i); i  ; } while (i < 5);

Cela imprimera les nombres de 0 à 4 dans la console. La boucle exécute au moins une fois, car la condition est vérifiée après l’exécution du bloc de code, et la condition de sortie est définie comme « i < 5 », ce qui signifie que la boucle continuera de tourner tant que i est inférieur à 5, et l’expression d’incrémentation « i++ » est exécutée à l’intérieur de la boucle, ce qui ajoute 1 à la variable i à chaque tour.

Les fonctions

Qu’est-ce qu’une fonctions en javascript ?

En JavaScript, et dans tout autre langage une fonction est un bloc de code qui peut être exécuté plusieurs fois. Les fonctions sont utilisées pour regrouper des instructions qui accomplissent une tâche spécifique, de sorte que vous n’avez pas à réécrire ces instructions chaque fois que vous en avez besoin. Les fonctions peuvent également prendre des arguments en entrée et retourner une valeur en sortie.

Pour déclarer une fonction, vous utilisez le mot clé function suivi du nom de la fonction, des parenthèses qui contiennent les arguments, et les accolades qui contiennent les instructions qui doivent être exécutées lorsque la fonction est appelée.

Par exemple :

function sayHello(name) {
  console.log("Hello "   name);
}

Ici, nous avons déclaré une fonction nommée sayHello qui prend un argument name. Lorsque la fonction est appelée, elle utilise cet argument pour imprimer un message de bienvenue dans la console, en utilisant la concaténation de chaînes. Pour appeler cette fonction, vous utilisez son nom suivi des parenthèses et les éventuels arguments :

sayHello("John");  // cela imprimera "Hello John" dans la console

En plus de prendre des arguments, les fonctions peuvent également retourner une valeur en utilisant la déclaration return. Par exemple :

function sum(a, b) {
  return a   b;
}

Les fonctions sont un moyen très puissant pour organiser le code et les rendre réutilisables, elles permettent de séparer les différentes tâches pour les rendre plus facile à comprendre et à maintenir.

Les fonctions fléchées en JS

En JavaScript, il existe une nouvelle syntaxe pour les fonctions qui a été introduite avec la spécification ECMAScript 6 (ES6) appelée « fonction fléchée » ou « fonction fléchée en expression » (arrow function expression). Cette nouvelle syntaxe permet de déclarer une fonction de manière plus concise et plus lisible.

Voici un exemple de la syntaxe classique pour déclarer une fonction :

function sum(a, b) {
  return a   b;
}

Et voici comment cette fonction peut être écrite en utilisant la syntaxe des fonctions fléchées :

let sum = (a, b) => a   b;

La fonction fléchée se compose de trois éléments :

• les parenthèses qui contiennent les arguments de la fonction
• le symbole « => » qui sépare les arguments de la fonction et le corps
• l’expression qui est le corps de la fonction

Il est important de noter que les fonctions fléchées ne peuvent pas être utilisées comme constructeur et ne peuvent pas être utilisées avec le mot clé

Les conditions en Javascript

Qu’est-ce qu’une condition ?

En programmation, une condition est une instruction qui permet de tester si une expression est vraie ou fausse, et d’exécuter un bloc de code spécifique en fonction du résultat. Les conditions permettent de contrôler le flux d’exécution d’un programme en fonction des résultats d’expressions logiques.

En JavaScript, les conditions sont généralement implémentées à l’aide de structures de contrôle de flux telles que if, if...else, switch, ou des opérateurs de comparaison tels que ==, >, <, >=, <=, != et ===. Ces structures de contrôle de flux et opérateurs permettent de tester des expressions logiques, et d’exécuter un bloc de code spécifique en fonction du résultat de cette expression.

Par exemple, la condition suivante vérifie si la variable x est supérieure à 0, et si c’est le cas, imprime un message dans la console:

if (x > 0) {
  console.log("x est positif");
}

Les différent types de conditions en javascript ?

Il existe plusieurs types de conditions en JavaScript qui peuvent être utilisées pour contrôler le flux d’exécution d’un programme. Les principaux types de conditions incluent :

• La condition if – permet de tester si une expression est vraie ou fausse, et d’exécuter un bloc de code spécifique si l’expression est vraie. Par exemple :

if (x = 0) {
  console.log("il fait zero degré");
}

La condition if...else – permet de tester si une expression est vraie ou fausse, et d’exécuter un bloc de code spécifique si l’expression est vraie ou un autre bloc de code spécifique si l’expression est fausse. Par exemple :

if (x > 0) {
  console.log("x est positif");
} else {
  console.log("x est négatif ou nul");
}

La condition switch – permet de tester une valeur spécifique contre plusieurs valeurs possibles, et d’exécuter un bloc de code spécifique pour chaque valeur correspondante. Par exemple :

switch (x) {
  case 1:
    console.log("x est égal à 1");
    break;
  case 2:
    console.log("x est égal à 2");
    break;
  default:
    console.log("x n'est ni égal à 1 ni égal à 2");
}

La condition ternaire

La condition ternaire – permet de tester si une expression est vraie ou fausse, et de retourner une valeur spécifique en fonction du résultat. C’est une façon plus concise d’écrire une condition if-else, par exemple :

let result = (x > 0) ? "x est positif" : "x est négatif ou nul";
console.log(result);

Il est important de noter que ces types de conditions peuvent être imbriquées les unes dans les autres pour créer des structures de contrôle de flux plus complexes, selon les besoins de votre programme.

En cours de rédaction… la suite très bientôt ;.)