Qu'est-ce que JavaScript et comment fonctionne-t-il?

Added 2019-12-06

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 a des fonctionnalités spéciales qui le différencient des langages de programmation traditionnels. Nous allons explorer 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 comme Google Chrome, Firefox, Safari, Microsoft Edge, Opera, etc. La plupart des navigateurs mobiles pour Android et iPhone prennent désormais é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'applications (API) sont également prises en charge par JavaScript, vous offrant plus de fonctionnalités.

Comprendre tous les modes de fonctionnement de JavaScript est un peu plus facile lorsque vous comprenez le fonctionnement de la programmation Web, alors apprenons-en plus.

Blocs de construction d'applications Web

Il existe trois composants qui créent des sites Web et des applications: Hypertext Markup Language (HTML), Cascading Style Sheets (CSS) et JavaScript. Chacun a un rôle à jouer 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 où 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.
Le troisième élément estJavaScript. 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 l'on clique sur les boutons, comment les formulaires de mot de passe sont authentifiés, comment les médias sont contrôlés.

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).

Comment fonctionne JavaScript

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 sur votre code JavaScript.

Le navigateur récupérera 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 d'abord la page Web. 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 le HTML et le CSS pour terminer le chargement.

Une fois cela fait, le JavaScript est exécuté dans l'ordre d'écriture du code. 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'attendait pas 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 ordinaire comme Python peut faire. Ceux-ci inclus:

Déclaration de variables.
Stockage et récupération de valeurs.
Définition et appel de fonctions.
Définition d'objets et de classes JavaScript.
Chargement et utilisation de modules externes.
Écriture de gestionnaires d'événements qui répondent aux événements de clic.
Écriture du code serveur.
Et beaucoup plus.

Utiliser JavaScript

Voyons quelques notions de base de JavaScript avec des exemples de code.

Déclaration de variables

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

soit num = 5;
laissez myString = "Bonjour";
var interestRate = 0,25;

Les opérateurs

Une addition

12 + 5
> > 17

Soustraction

20 - 8
> > 12

Multiplication

5 * 2
> > dix

Division

50/2
> > 25

Module

45% 4
> > 1

Tableaux

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

Les fonctions

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

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

Boucles

JavaScript peut effectuer des boucles pour l'itération, des boucles commepour boucles ettandis que les boucles.

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

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

commentaires

// Écrire un commentaire

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

Dans une page Web

La façon la plus courante de charger JavaScript dans une page Web consiste à utiliser lescénario 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:

< script type = "text / javascript" src = "/ path / to / javascript" > < / script >

Vous pouvez spécifier l'URL complète si le javascript provient d'un autre domaine de la page Web comme suit:
```
< script type = "text / javascript" src = "https://code.jquery.com/jquery-3.2.1.min.js" > < / script >
```

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

< script type = "text / javascript" >
alert ("La page est chargée");
< / script >

Outre ces méthodes, il existe des moyens de charger du code JavaScript à la demande. En fait, il existe des cadres dédiés au chargement et à l'exécution des modules JavaScript avec les 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 de code JavaScript simples pour illustrer son utilisation sur les pages Web. Ce sont des exemples de code qui fonctionnent avec le DOM.

Les éléments suivants sélectionnent tousaudacieux éléments du document et définit la couleur du premier sur rouge.
```
var elems = document.getElementsByTagName ('b');
elems [0] .style.color = 'red';
```

Vous voulez changer l'image dans unimg étiquette? Ce qui suit associe un gestionnaire d'événements pour leCliquez sur événement d'un bouton.

< img id = "myImg" src = "prev-image.png" >
< button onclick = "document.getElementById ('myImg'). src = 'new-image.png'" > Change Image < / button >

Mettre à jour le contenu textuel d'un paragraphe (p) élément? Met leinnerHTML propriété de l'élément comme indiqué:

< p id = "first-para" > Hello World < / p >
< button onclick = "document.getElementById ('first-para'). innerHTML =" Welcome to JavaScript! "'> Click me < / button >

Qu'est-ce que JavaScript et comment fonctionne-t-il?