Principes de base du JavaScript

JavaScript est un outil de programmation polyvalent langue utilisé principalement pour créer des éléments interactifs et dynamiques sur les pages web. Vous trouverez ci-dessous quelques concepts fondamentaux et des exemples pour commencer :

1. Variables et types de données :

• Les variables sont utilisées pour stocker des valeurs de données. L'utilisation laisser ou constante pour déclarer des variables.

  let message = 'Hello, World!' ;
  const PI = 3.14 ;

• JavaScript dispose de plusieurs types de données :
• Types primitifs: Chaîne, Nombre, Booléen, Indéfini, Nul
• Types complexes: Objet, Tableau, Fonction

2. Opérateurs :

• Opérateurs arithmétiques : +, -, *, /, %
• Opérateurs de comparaison : ==, ===, !=, !==, >, <, >=, <=
• Opérateurs logiques : && (ET), || (OU), ! (PAS)

3. Structures de contrôle :

• Si Déclaration:

  let num = 10 ;
  if (num > 0) {
    console.log('Positive number') ;
  } else {
    console.log('Nombre négatif') ;
  }

• Pour la boucle:

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

• Boucle d'attente:

  let count = 0 ;
  while (count < 3) {
    console.log(count) ;
    count++ ;
  }

4. Les fonctions :

• Les fonctions sont des blocs de code réutilisables qui exécutent une tâche spécifique.

  function greet(name) {
    console.log('Hello, ' + name + '!') ;
  }
  greet('Jean') ;

• Fonctions de la flèche :

  const square = (x) => {
    return x * x ;
  } ;
  console.log(square(5)) ; // Résultat : 25

5. Tableaux et objets :

• Tableaux:

  let fruits = ['pomme', 'banane', 'orange'] ;
  console.log(fruits[0]) ; // Résultat : pomme
  fruits.push('raisin') ;

• Objets:

  let person = {
    prénom : 'John',
    nom : 'Doe',
    âge : 30,
    fullName : function() {
      return this.firstName + ' ' + this.lastName ;
    }
  } ;
  console.log(person.fullName()) ; // Résultat : John Doe

6. Manipulation du DOM :

• Le modèle d'objet de document (DOM) représente la structure des documents HTML.
• JavaScript peut être utilisé pour interagir avec le DOM et le manipuler.

  // Obtenir l'élément par son identifiant
  let heading = document.getElementById('main-heading') ;
  heading.style.color = 'red' ;

  // Créer un nouvel élément
  let paragraphe = document.createElement('p') ;
  paragraph.textContent = "Ceci est un nouveau paragraphe" ;
  document.body.appendChild(paragraph) ;

7. Les événements :

• Les événements sont des actions ou des événements qui se produisent dans le navigateur.
• JavaScript peut écouter les événements et y répondre.

  let button = document.getElementById('myButton') ;
  button.addEventListener('click', function() {
    console.log('Bouton cliqué!') ;
  }) ;

8. JavaScript asynchrone :

• JavaScript est monotâche, mais des opérations asynchrones peuvent être effectuées à l'aide de callbacks, de promesses et d'async/await.

  // Utilisation des promesses
  function fetchData() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('Data fetchched successfully') ;
      }, 2000) ;
    }) ;
  }

  fetchData()
    .then(data => {
      console.log(data) ;
    })
    .catch(error => {
      console.error(error) ;
    }) ;

9. Gestion des erreurs :

• Utilisation try...catch afin de gérer les erreurs avec élégance.

  try {
    // Code susceptible de provoquer une erreur
    throw new Error('Quelque chose s'est mal passé') ;
  } catch (error) {
    console.error(error.message) ;
  }

10. Stockage local :

• JavaScript peut stocker des données localement dans la mémoire du navigateur.

  // Stocker les données
  localStorage.setItem('username', 'John') ;

  // Récupérer les données
  let username = localStorage.getItem('username') ;
  console.log('Nom d'utilisateur:', nom d'utilisateur) ; // Sortie : Nom d'utilisateur : John

  // Suppression des données
  localStorage.removeItem('username') ;

Conclusion :

Il s'agit là de concepts et d'exemples fondamentaux de JavaScript. Au fur et à mesure de votre apprentissage, vous aborderez des sujets plus avancés tels que AJAX, les fonctionnalités ES6 (comme les classes et les modules), les API et les frameworks/bibliothèques tels que React, Vue.js et Node.js. Des exercices de codage et des projets de construction consolideront votre compréhension de JavaScript et de ses capacités à créer des applications web dynamiques et interactives.

Parrainez vos amis. Gagnez du Crypto ensemble.

Gagnez jusqu'à 40% de commission sur chaque transaction à travers le monde Binance Spot, Futures et Pool.

Jusqu'à 50% Matériel de jeu en promotion

Boutique Xbox, Playstation et plus encore.

Expire le 2025/08/01

Jusqu'à 40% de réduction sur les instruments de musique

Faites du rock avec des guitares, des claviers et bien d'autres choses encore.

Expire le 2024/09/30