Qu'est-ce que JavaScript et comment ça marche ?

JavaScript est devenu un incontournable du développement Web moderne. Ce langage puissant est devenu un outil essentiel à comprendre pour tout développeur Web.

JavaScript possède des fonctionnalités spéciales qui le différencient des langages de programmation traditionnels. Nous allons approfondir ce que c'est, comment cela fonctionne et ce que vous pouvez en faire. Décomposons-le.

Qu'est-ce que JavaScript ?

JavaScript est un langage de script pour le Web. C'est un langage interprété, ce qui signifie qu'il n'a pas besoin d'un compilateur pour traduire son code comme C ou C++. Le code JavaScript s'exécute directement dans un navigateur Web.

La dernière version du langage est ECMAScript 2018 qui a été publiée en juin 2018.

JavaScript fonctionne avec HTML et CSS pour créer des applications Web ou des pages Web. JavaScript est pris en charge par la plupart des navigateurs Web modernes tels que Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. La plupart des navigateurs mobiles pour Android et iPhone prennent également en charge JavaScript.

JavaScript contrôle les éléments dynamiques des pages Web. Il fonctionne dans les navigateurs Web et, plus récemment, sur les serveurs Web également. Les interfaces de programmation d'application (API) sont également prises en charge par JavaScript, ce qui vous offre plus de fonctionnalités.

Comprendre toutes les façons dont JavaScript fonctionne est un peu plus facile lorsque vous comprenez comment fonctionne la programmation Web, alors apprenons-en plus.

 Blocs de construction d'applications Web

Trois composants permettent de créer des sites Web et des applications :le langage de balisage hypertexte (HTML), les feuilles de style en cascade (CSS) et JavaScript. Chacun a un rôle dans la création d'une application Web.

• HTML est un langage de balisage qui crée le squelette de la page Web. Tous les paragraphes, sections, images, titres et textes sont écrits en HTML. Le contenu apparaît sur le site Web dans l'ordre dans lequel il est écrit en HTML.
• CSS contrôle le style et les aspects supplémentaires de la mise en page. CSS est utilisé pour créer la conception du site Web en créant les couleurs, les polices, les colonnes, les bordures, etc. Il fait passer le site Web d'éléments de texte brut à des conceptions colorées.
• Le troisième élément est JavaScript. HTML et CSS créent la structure, mais ils ne font rien à partir de là. JavaScript crée une activité dynamique sur votre application. Les scripts en JavaScript sont ce qui contrôle les fonctions lorsque les boutons sont cliqués, comment les formulaires de mot de passe sont authentifiés, comment les médias sont contrôlés.

Les trois parties fonctionnent en harmonie les unes avec les autres pour créer des applications à grande échelle. Ce serait une bonne idée d'en savoir plus sur HTML et CSS si vous n'êtes pas tout à fait à l'aise avec eux.

Comment fonctionne JavaScript ?

Avant d'écrire JavaScript, il est important de savoir comment cela fonctionne sous le capot. Il y a deux éléments importants à connaître :le fonctionnement du navigateur Web et le modèle d'objet de document (DOM).

Le navigateur Web charge une page Web, analyse le code HTML et crée ce que l'on appelle un modèle d'objet de document (DOM) à partir du contenu. Le DOM présente une vue en direct de la page Web à votre code JavaScript.

Le navigateur saisira alors tout ce qui est lié au HTML, comme les images et les fichiers CSS. Les informations CSS proviennent de l'analyseur CSS.

Le HTML et le CSS sont assemblés par le DOM pour créer la page Web en premier. Ensuite, le moteur JavaScript des navigateurs charge les fichiers JavaScript et le code en ligne, mais n'exécute pas le code immédiatement. Il attend que le HTML et le CSS finissent de se charger.

Une fois cela fait, le JavaScript est exécuté dans l'ordre dans lequel le code est écrit. Il en résulte que le DOM est mis à jour par le code JavaScript et rendu par le navigateur.

L'ordre ici est important. Si le JavaScript n'avait pas attendu la fin du HTML et du CSS, il ne serait pas en mesure de modifier les éléments DOM.

Que puis-je faire avec JavaScript ?

JavaScript est un langage de programmation à part entière qui peut faire la plupart des choses qu'un langage normal comme Python peut faire. Ceux-ci incluent :

• Déclarer des variables.
• Stockage et récupération de valeurs.
• Définir et appeler des fonctions, y compris des fonctions fléchées.
• Définir des objets et des classes JavaScript.
• Chargement et utilisation de modules externes.
• Écrire des gestionnaires d'événements qui répondent aux événements de clic.
• Écriture du code du serveur.
• Et bien plus encore.

Avertissement : Étant donné que JavaScript est un langage si puissant, il est également possible d'écrire des logiciels malveillants, des virus et des hacks de navigateur pour les infliger aux utilisateurs. Cela va du vol de cookies de navigateur, de mots de passe, de cartes de crédit au téléchargement de virus sur votre ordinateur.

Utiliser JavaScript

Regardons quelques bases de JavaScript avec des exemples de code.

Déclarer des variables

JavaScript est typé dynamiquement, ce qui signifie que vous n'avez pas à déclarer le type de vos variables dans votre code.

let num =5 ; 
 let myString ="Bonjour" ; 
 var taux d'intérêt =0,25 ; 
  

Opérateurs

Ajout

12 + 5 
>> 17 
  

Soustraction

20 - 8 
>> 12 
  

Multiplication

5 * 2 
>> 10 
  

Département

50 / 2 
>> 25 
  

Module

45 % 4 
>> 1 
  

Tableaux

let myArray =[1,2,4,5] ; 
 let stringArray =["bonjour","monde"] ; 
  

Fonctions

JavaScript peut écrire des fonctions, voici une fonction simple qui ajoute des nombres.

fonction addNumbers(num1,num2){ 
 renvoie num1 + num2 ; 
 } 
>> ajouterNombres(10,5); 
>> 15 
  

Boucles

JavaScript peut effectuer des boucles d'itération, des boucles comme for loops et boucles while.

for(let i =0; i <3; i++){ 
 console.log("echo!"); 
 } 
>> écho ! 
>> écho ! 
>> écho ! 
  

let i =0 ; 
 tandis que(i <3) { 
 console.log("echo!"); 
 je++ ; 
 } 
>> écho ! 
>> écho ! 
>> écho ! 
  

Commentaires

// Écrire un commentaire 
  

/*Écrire un commentaire sur plusieurs lignes 
 Vous pouvez utiliser autant de lignes que vous le souhaitez 
 pour décomposer le texte et rendre les commentaires plus lisibles 
 */ 
  

Dans une page Web

Le moyen le plus courant de charger JavaScript dans une page Web consiste à utiliser le script Balise HTML. Selon vos besoins, vous pouvez utiliser l'une des méthodes suivantes.

• Chargez un fichier JavaScript externe dans une page Web comme suit :

• Vous pouvez spécifier l'URL complète si le javascript provient d'un domaine différent de la page Web comme suit :

• JavaScript peut être directement intégré dans le HTML. Voici un

Outre ces méthodes, il existe des moyens de charger du code JavaScript à la demande. En fait, il existe des frameworks dédiés au chargement et à l'exécution de modules JavaScript avec des dépendances appropriées résolues au moment de l'exécution.

Ce sont des sujets plus avancés, en ce moment vous apprenez les bases.

Exemples d'extraits de code JavaScript

Voici quelques exemples simples de code JavaScript pour illustrer son utilisation sur les pages Web. Ce sont des exemples de code qui fonctionnent avec le DOM.

• Ce qui suit sélectionne tous les gras éléments dans le document et définit la couleur du premier sur rouge.

  var elems =document.getElementsByTagName('b'); 
   elems[0].style.color ='rouge'; 
    

• Vous voulez changer l'image dans un img étiqueter? Ce qui suit associe un gestionnaire d'événements pour le clic événement d'un bouton.

   
   Modifier l'image 
    

• Mettre à jour le contenu textuel d'un paragraphe (p ) élément ? Définissez le innerHTML propriété de l'élément comme indiqué :

  Hello World
   
   Cliquez-moi 
    

Ces exemples de code offrent juste un aperçu de ce que vous pouvez faire en utilisant JavaScript sur votre page Web. Il existe de nombreux tutoriels qui peuvent vous apprendre à coder pour vous aider à démarrer. Vous pouvez l'essayer sur n'importe quelle page Web, même celle-ci ! Ouvrez votre console et essayez du code JavaScript.

Vous savez maintenant ce que JavaScript fait

Espérons que cette introduction a apporté quelques informations sur JavaScript et vous a enthousiasmé pour la programmation Web. Vous pouvez tout récapituler dans notre aide-mémoire JavaScript très pratique. Il y a beaucoup plus à apprendre sur JavaScript. Une fois que vous vous sentirez plus à l'aise, pourquoi ne pas essayer d'apprendre à utiliser le Document Object Model ? Vous pourriez également être intéressé à en savoir plus sur TypeScript.