Qu'est-ce que le JavaScript ? Introduction avec un exemple « Hello World ».

Qu'est-ce que le JavaScénario?

JavaScript est un langage de programmation de haut niveau qui ajoute des comportements aux pages web. C'est l'une des trois technologies fondamentales du web : HTML fournit la structure, CSS l'apparence, et… JavaLe script assure l'interaction. Chaque fois qu'une zone de recherche affiche des suggestions pendant que vous tapez, qu'un carrousel de photos défile ou qu'un formulaire d'inscription vous avertit d'un champ manquant, JavaLe script effectue ce travail en arrière-plan.

Le schéma ci-dessous montre comment un script s'intègre au balisage d'une page web ordinaire.

Pendant la majeure partie de sa vie JavaScript était décrit comme un langage de script côté client, car il ne s'exécutait que dans un navigateur. Cette description est aujourd'hui incomplète. Depuis l'apparition de Node.js en 2009, ce même langage est également utilisé pour les serveurs web, les utilitaires en ligne de commande, les applications de bureau et les applications mobiles. Une description plus juste aujourd'hui serait que… JavaScript est un langage à usage général particulièrement présent dans les navigateurs.

Les caractéristiques qui définissent la langue sont :

• Typage dynamique : Une variable peut contenir un nombre à un instant T et une chaîne de caractères un instant plus tard ; les types sont donc vérifiés pendant l'exécution du programme.
• Interprété et compilé juste à temps : Des moteurs comme V8 dans Chrome et Node.js compilent le code fréquemment exécuté en code machine pour optimiser les performances.
• Multi-paradigme : Les styles impératif, fonctionnel et orienté objet sont tous pris en charge.
• Déclenché par les événements : Le code réagit aux clics, aux frappes au clavier, aux minuteurs et aux réponses du réseau au lieu de s'exécuter de haut en bas et de s'arrêter.ping.
• Monothread avec boucle d'événements : Les opérations lentes, comme un appel réseau, sont mises en file d'attente au lieu de bloquer la page.

Histoire de Javascénario

Brendan Eich a créé JavaScript chez Netscape Communications en 1995, produisant le premier prototype fonctionnel en une dizaine de jours. En interne, le projet s'appelait MochaIl a été distribué dans une version bêta de Netscape Navigator 2.0 sous le nom de LiveScript en septembre 1995, et a été rebaptisée Javascénario en décembre 1995, dans le cadre d'un accord de commercialisation entre Netscape et Sun Microsystems, la société qui possédait Java à l'époque.

Ce changement de nom est la seule raison pour laquelle tant de débutants continuent de supposer JavaScript est une édition allégée de JavaCes deux langages sont totalement indépendants en termes de conception, de propriété et d'environnement d'exécution. Netscape a soumis le langage à Ecma International en 1996, et la première édition de la norme ECMA-262 a été publiée en juin 1997. Le tableau ci-dessous répertorie les étapes clés les plus importantes pour la lecture de code ancien.

En raison du cycle de publication annuel, le code écrit avant 2015 diffère sensiblement du code moderne. Les tutoriels plus anciens utilisent var partout, alors que le code actuel préfère let et const quand déclarer des variables dans Javascénario.

Qu'est-ce que le JavaScript utilisé pour ?

JavaLe langage Script ne se limite plus à de simples astuces de mise en page. La même syntaxe apparaît désormais à quatre endroits très différents, ce qui explique sa présence constante parmi les langages les plus utilisés dans les enquêtes auprès des développeurs.

Les jeux, les visualisations de données, les extensions de navigateur et les petits projets matériels en dépendent également. Pour un débutant, la conséquence pratique est simple : les efforts consacrés à la syntaxe sont directement réinvestis dans le développement serveur, le développement mobile et l’automatisation des tests. Si vous souhaitez voir le langage appliqué à des problèmes concrets, travaillez sur un ensemble de… pratique JavaExemples de code de script une fois les bases acquises.

Comment courir JavaScénario?

JavaLe script ne s'exécute pas automatiquement. Il nécessite un environnement hôte contenant un Javascénario moteurChrome et Edge utilisent V8. Firefox utilise SpiderMonkey, et Safari utilise JavaScriptCore. Lorsqu'un navigateur télécharge une page HTML et trouve un script, il transmet ce script à son moteur, qui l'analyse, le compile et l'exécute.

Le second environnement hôte est Node.js, qui intègre le même moteur V8 en dehors du navigateur. C'est ainsi que le même langage s'exécute sur un serveur ou dans un terminal. L'avantage pratique de JavaLe script est-il celui-là Tous les navigateurs modernes le prennent en charge. on Windows, Linux et macOSVous n'avez donc que rarement à vous soucier du navigateur utilisé par un visiteur. Il s'agit d'une véritable amélioration par rapport à VBScript, qui ne fonctionnait que sous Internet Explorer. Windows et est désormais obsolète, tout comme Internet Explorer lui-même.

Outils dont vous avez besoin

Vous avez besoin d'un éditeur de texte pour écrire le code et d'un navigateur pour visualiser le résultat. Notepad++, Visual Studio Code, Sublime TextTout autre éditeur avec lequel vous êtes à l'aise fera l'affaire, même si un éditeur avec coloration syntaxique et correspondance des parenthèses vous facilitera grandement le débogage. Tous les navigateurs actuels sont compatibles. Google Chrome, Firefox, Microsoft Edge, ou Safari. Aucun autre élément n'est nécessaire, ni à acheter ni à installer.

Notre JavaProgramme de script

Si vous continuez JavaLe script doit être intégré au document HTML lui-même ; tout le code doit être placé entre deux balises ouvrantes. <script> étiquette et fermeture </script> balise <code>. C'est ainsi que le navigateur distingue votre code du balisage environnant. Les pages plus anciennes utilisent également une balise <code>. type attribut, écrit comme <script type="text/javascript">, ce qui était nécessaire lorsque des langages concurrents côté client tels que VBScript existaient. Les pages modernes l'omettent, car HTML5 traite text/javascript par défaut. Les deux versions ci-dessous sont fonctionnellement identiques et restent valides.

Exemple Hello World

Le premier programme traditionnel affiche un message. Placez le code suivant dans un fichier nommé hello.html et ouvrez-le dans un navigateur.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script type="text/javascript">
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

Sortie :

A browser dialog box opens containing the text:

Hello World!

À noter: type="text/javascript" n'est pas nécessaire en HTML5. Le code suivant fonctionne exactement de la même manière.

<html>
<head>
	<title>My First JavaScript code!!!</title>
	<script>
		alert("Hello World!");
	</script>
</head>
<body>
</body>
</html>

Sortie :

A browser dialog box opens containing the text:

Hello World!

Dès qu'une page dépasse quelques lignes, le script est déplacé dans sa propre section. .js Le fichier conserve la lisibilité du balisage et permet au navigateur de mettre le code en cache. Les différences sont abordées en détail dans cette comparaison de interne et externe Javascénario.

Comment écrire et exécuter votre premier script

Il existe trois manières pratiques de mettre en œuvre JavaUn script, et un débutant devrait essayer les trois car chacun convient à une situation différente.

1. La console du navigateur. C'est l'option la plus rapide et elle ne nécessite aucun fichier. Ouvrez n'importe quelle page web, appuyez sur F12 (ou Ctrl+Shift+Je sur Windows et Linux, Cmd+Option+I sur macOS), et sélectionnez le Console Utilisez la touche Tab. Saisissez une ligne, appuyez sur Entrée, et le résultat s'affiche immédiatement. C'est l'endroit idéal pour tester une expression ou vérifier la valeur de retour d'une fonction.

// Type each line into the browser console and press Enter
console.log(2 + 2);
console.log("Guru" + 99);
console.log(Math.max(4, 12, 7));
console.log(typeof "hello");

Sortie :

4
Guru99
12
string

Remarquez la deuxième ligne. Ajouter le nombre 99 à la chaîne «Guru» produit la chaîne «Guru99" plutôt qu'une erreur, car JavaLe script convertit automatiquement le nombre en texte. Ce comportement est pratique, mais constitue également une source classique d'erreurs pour les débutants.

2. Un fichier HTML. Voici l'exemple « Hello World » présenté ci-dessus. Utilisez-le chaque fois que votre code doit interagir avec la page, par exemple pour lire la valeur d'un formulaire ou modifier un élément.

3. Node.js depuis le terminal. Installez Node.js, enregistrez le code dans un fichier avec un .js extension, puis exécutez node first-script.jsRien ne s'affiche, donc console.log Cela devient votre canal de sortie. C'est la voie à suivre si vous souhaitez pratiquer les fonctionnalités pures du langage, sans utiliser de HTML.

// first-script.js
const language = "JavaScript";
const createdBy = "Brendan Eich";
const releaseYear = 1995;

console.log(language + " was created by " + createdBy + " in " + releaseYear + ".");

const usedFor = ["Interactive web pages", "Server apps with Node.js", "Mobile apps"];

usedFor.forEach(function (item, index) {
  console.log(index + 1 + ". " + item);
});

Sortie :

JavaScript was created by Brendan Eich in 1995.
1. Interactive web pages
2. Server apps with Node.js
3. Mobile apps

Ce court script utilise déjà trois idées que vous rencontrerez constamment : les constantes déclarées avec const, un tableau contenant une liste de valeurs et une fonction de rappel transmise à forEachRéécrire la même boucle avec un for L'énoncé est un exercice utile une fois que vous avez étudié boucles dans Javascénario.

JavaScript vs Java

Ces noms constituent la plus grande erreur de l'histoire de la programmation, et la confusion qu'ils engendrent mérite d'être dissipée au plus vite. JavaScript a été renommé à partir de LiveScript pour des raisons purement marketing en 1995, à un moment où Java C'était la technologie la plus commentée sur le web. Les deux langages ont été conçus par des personnes différentes, dans des entreprises différentes, pour des problèmes différents.

La seule véritable similitude réside dans l'emprunt des deux langages à la syntaxe des accolades du C. Apprendre l'un ne permet pas d'apprendre l'autre, même si cette syntaxe commune rend le second langage légèrement plus lisible. Si le typage strictping vous interpelle, TypeScript ajoute une couche de type statique au-dessus de JavaScript lors de la compilation en texte brut JavaLe script, et les différences sont exposées dans ce TypeScript et JavaComparaison de scripts.

Une fois les bases établies, les prochaines étapes naturelles sont Interactif JavaExercices de scénario, puis variables et types de données, Suivie par tableaux et boucles. Après ça, orienté objet Javascénario explique comment les objets, les prototypes et les classes s'articulent, et formatage de chaîne couvre la gestion du texte que vous utiliserez dans presque tous les scripts.

FAQ