Ce guide traque un cours des fondamentaux JavaScript aux concepts intermédiaires, en tirant de mon expérience d'apprentissage personnel. J'ai compilé des plats clés, des exemples pratiques et des conseils utiles pour rendre votre parcours d'apprentissage plus fluide. Plongeons-nous!

Table des matières

1. variables
2. Arrays
3. instructions conditionnelles
4. fonctions
5. objets
6. Le modèle Dom (modèle d'objet de document)
7. Événements
8. Intégration de html et javascript

1. Variables

Les variables sont des conteneurs pour les données utilisées dans vos programmes. JavaScript offre deux façons principales de les déclarer:

• Soit : pour les variables dont les valeurs peuvent changer.
• const : pour les valeurs qui devraient rester constantes.

Exemple:

let age = 25;
const name = "Mario";

Les variables peuvent maintenir des nombres, du texte (chaînes), des valeurs vraies / fausses (booléens), voire des valeurs non définies. JavaScript fournit des opérateurs arithmétiques standard (, -, *, /,%) et l'opérateur d'exponentiation (**).

console.log(2 ** 3); // Output: 8

2. Arrays

Les tableaux stockent plusieurs valeurs dans une seule variable. Utilisez des crochets pour définir un tableau:

let fruits = ["apple", "banana", "cherry"];

Accès aux éléments en utilisant leur index (à partir de 0):

console.log(fruits[0]); // Output: apple

Ajout et supprimer des éléments:

Les tableaux sont dynamiques; vous pouvez les modifier:

• . push () : ajoute un élément à la fin.
• . Unshift () : ajoute un élément au début.
• . pop () : supprime le dernier élément.
• . shift () : supprime le premier élément.

Exemple:

fruits.push("orange");
console.log(fruits); // Output: ["apple", "banana", "cherry", "orange"]

Recherche des tableaux:

• . indexof () : trouve l'index d'une valeur.
• . incluent () : vérifie si une valeur existe.

console.log(fruits.indexOf("banana")); // Output: 1
console.log(fruits.includes("grape")); // Output: false

3. Instructions conditionnelles

Les instructions conditionnelles permettent à votre code de prendre des décisions. si et else sont couramment utilisés:

if (grade > 60) {
  console.log("You passed!");
} else {
  console.log("You failed!");
}

Opérateurs de comparaison:

Ces opérateurs sont essentiels pour évaluer les conditions:

• === (égalité stricte)
• ! == (inégalité stricte)
• > (supérieur à)
• (moins que)
• > = (supérieur à ou égal à)
• (moins ou égal à)

4. Fonctions

Les fonctions sont des blocs de code réutilisables. Définissez-les à l'aide de la fonction de la fonction :

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // Output: Hello, Alice!

Paramètres et arguments:

Les fonctions peuvent accepter les entrées ( paramètres ) et les utiliser lorsqu'ils sont appelés avec arguments :

function add(a, b) {
  return a   b;
}
console.log(add(2, 3)); // Output: 5

5. Objets

Les objets sont des collections de paires de valeurs clés, comme des mini-données:

const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2020
};
console.log(car.brand); // Output: Tesla

Méthodes dans les objets:

Les objets peuvent également contenir des fonctions ( méthodes ):

const phone = {
  brand: "Apple",
  ring() {
    console.log("Ring, ring! ?");
  }
};
phone.ring();

6. Le modèle Dom (modèle d'objet de document)

Le dom laisse JavaScript interagir avec les éléments html.

Sélection des éléments:

Utilisez l'objet document pour sélectionner les éléments:

const heading = document.querySelector("h1");
console.log(heading.innerText); // Logs the text within the 
 tag

Mise à jour des éléments:

Modifier le contenu dynamiquement:

heading.innerText = "Welcome to JavaScript!";

7. Événements

Répondez aux actions de l'utilisateur (clics, touches appuyées) en utilisant . AddEventListener () :

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

Exemple: incrément un compteur:

let count = 0;
button.addEventListener("click", () => {
  count  ;
  console.log(`Clicked ${count} times`);
});

8. Intégration html et javascript

Ajouter JavaScript directement à html à l'aide de tags:

pour les scripts plus grands, liez un fichier externe . JS :

Cela conclut mon parcours d'apprentissage JavaScript des niveaux débutants aux niveaux intermédiaires! J'espère que ce guide s'avérera utile. N'hésitez pas à partager vos propres conseils d'apprentissage ou à poser des questions dans les commentaires! Codage heureux! ✨