Tutoriel JavaScript : Hello world

Ce tutoriel vous aide à démarrer avec JavaScript. Il explique ce dont vous avez besoin pour écrire votre premier programme JavaScript. Il commence par les bases : vous apprendrez où trouver et télécharger les outils nécessaires, comment installer ces outils et il vous guidera jusqu'à la construction et l'exécution de votre code. Si vous n'avez jamais écrit de programme JavaScript auparavant, c'est l'endroit idéal pour commencer. Nous avons créé cet article pour que vous puissiez démarrer avec JavaScript et passer à nos exemples de SMS. Si vous êtes déjà familier avec JavaScript, vous pouvez passer directement à l'un des projets SMS suivants.

Exemples de SMS en Javascript :

Envoyer un SMS avec l'API REST HTTP en Javascript (exemple de code)
Envoyer plusieurs SMS avec l'API REST HTTP en Javascript (exemple de code)
Planifier un SMS avec l'API REST HTTP en Javascript (exemple de code)
Recevoir un SMS avec l'API REST HTTP en Javascript (exemple de code)
Supprimer un SMS avec l'API REST HTTP en Javascript (exemple de code)
Télécharger la dernière bibliothèque d'API SMS JavaScript depuis Github

Qu'est-ce que le HTML

Le Hypertext Markup Language (HTML) est un outil pour définir la structure d'un site web. HTML est le langage de balisage standard pour créer des pages Web. Main dans la main avec le CSS, ils donnent aux sites web leur apparence. HTML consiste en une série d'éléments qui indiquent au navigateur comment afficher le contenu. Dans ce tutoriel, nous l'utilisons pour afficher le message "hello world".

Qu'est-ce que JavaScript

JavaScript est un langage de programmation de script. Il est similaire à un langage naturel, comme l'anglais. Il est utilisé pour communiquer avec un ordinateur. La principale différence entre un langage naturel et un langage de programmation est que les langages de programmation ont une structure plus rigoureuse, pour aider l'ordinateur à mieux le comprendre. Dans ce tutoriel, nous utilisons du code JavaScript pour afficher le message "hello world".

Qu'est-ce qu'un serveur web

Le terme serveur web peut désigner du matériel ou du logiciel, ou les deux travaillant ensemble. Du côté matériel, un serveur web est un ordinateur utilisé pour servir les clients web. Du côté logiciel, les serveurs web exécutent un code PHP qui gère les requêtes HTTP des clients web.

Qu'est-ce qu'un navigateur web

Un navigateur web est une application pour accéder au World Wide Web. Lorsqu'un utilisateur demande une page web à un site particulier, le navigateur web récupère le contenu nécessaire depuis un serveur web puis affiche la page sur l'appareil de l'utilisateur. Il fonctionne de manière à ce que l'utilisateur puisse faire des requêtes HTTP aux serveurs web. Avec un navigateur web, nous pouvons accéder au serveur web en écrivant son adresse IP ou son domaine dans le champ URL.

Qu'est-ce que WAMP

WampServer fait référence à une pile de solutions pour le système d'exploitation Microsoft Windows, comprenant le serveur web Apache, OpenSSL pour le support SSL, la base de données MySQL et le langage de programmation PHP. WAMP agit comme un serveur virtuel sur votre ordinateur. Il vous permet de tester toutes les fonctionnalités web sans conséquences, puisqu'il est localisé sur votre machine et n'est pas connecté au web. Nous l'utiliserons pour héberger notre site HTML localement.

Comment écrire votre premier programme en JavaScript

Pour écrire votre premier programme en JavaScript :

  1. Installez WAMP sur votre ordinateur
  2. Configurez le serveur WAMP
  3. Créez un nouveau fichier index.html
  4. Composez votre premier document HTML
  5. Écrivez votre premier code JavaScript dans le fichier .html
  6. Exécutez votre premier programme JavaScript
  7. Ouvrez le mode Inspect pour les notifications d'erreur
  8. Corrigez l'erreur

Prérequis

  • Ordinateur Windows 10
  • Environnement WAMP
  • Navigateur Chrome
  • Exemple HTML Hello World
  • Exemple JavaScript Hello World

Télécharger WAMP

Dans cette vidéo, nous allons télécharger le serveur WAMP. C'est le logiciel que nous allons utiliser pour héberger notre code JavaScript. Tout d'abord, vous devez visiter https://wampserver.com. et télécharger l'installateur de WampServer (Vidéo 1). Une fois le téléchargement terminé, l'installateur se trouvera dans le répertoire de téléchargement spécifié par votre navigateur. Ouvrir ce fichier exe lancera le processus d'installation de WAMP server.

Vidéo 1 - Comment télécharger WampServer (Tutoriel vidéo)

Télécharger WampServer

Commencez par aller sur https://wampserver.com dans votre navigateur. Cliquez sur le bouton Télécharger en haut pour être automatiquement redirigé vers la section des téléchargements. Cliquez sur WAMPSERVER 64 BITS (X64) pour télécharger l'installateur de WampServer sur votre ordinateur (Figure 1).

Figure 1 - Télécharger WampServer

Installer WAMP

L'étape suivante après le téléchargement de WampServer est son installation. Cette vidéo vous montre comment réussir cette installation. Ouvrez l'installateur, configurez les détails de l'installation et attendez la fin du processus (Vidéo 2). Une fois WAMP Server installé, il démarrera automatiquement. Maintenant que WAMP Server est opérationnel, vous pouvez commencer à coder en JavaScript.

Vidéo 2 - Comment installer WampServer (Tutoriel vidéo)

Écrire et télécharger votre première page HTML

Pour écrire votre premier document HTML, vous devez créer un nouveau fichier index.html dans le dossier \www\ de WampServer.
Chemin : C:\wamp64\www\ 

<!DOCTYPE html>
<html>
	<head>
		<title>Hello world!</title>
	</head>
	<body>
		<h1 id="text">Hello world!</h1>
	</body>
</html>

Code 1 - Votre premier document HTML

Écrire votre premier document HTML

Cette vidéo vous montre comment créer un document HTML (Vidéo 3). Nous utiliserons ce document plus tard pour l'héberger localement. Grâce au fait que nous exécutons un WampServer sur notre ordinateur, nous pouvons visualiser nos fichiers à l'URL http://localhost/. Pour cela, vous devez créer ou placer votre fichier HTML dans le dossier \www\.
Chemin : C:\wamp64\www\

Vidéo 3 - Écrire votre premier document HTML (Tutoriel vidéo)

Écrire et exécuter votre premier programme JavaScript

Dans cet exemple, nous allons remplacer le texte dans la balise <h1> avec l'ID "text". Pour cela, nous utiliserons le sélecteur de requête intégré de JavaScript. Cela peut sembler compliqué, mais c'est facile. Nous allons sélectionner l'élément avec l'ID "text", et nous définirons son attribut innerText (pour notre élément, c'est comme une caractéristique d'une personne) égal au texte "Hello Ozeki!". 

/*Ce code JavaScript va remplacer le texte dans la balise
qui a l'ID nommé "text".*/
document.getElementById("text").innerText = "Hello Ozeki!";

Code 2 - Votre premier code JavaScript

Écrire et exécuter votre code JavaScript

Cette vidéo montre comment écrire du code JavaScript et l'exécuter dans votre navigateur (Vidéo 4). La commande elle-même qui affiche le message doit être placée entre des balises script. Ces balises indiquent qu'un morceau de code JavaScript doit être exécuté ici. Le code lui-même est une fonction qui prend "Hello Ozeki" comme argument. Après avoir écrit et enregistré votre code, vous pouvez l'exécuter dans votre navigateur.

Vidéo 4 - Comment écrire et exécuter votre premier code JavaScript (Tutoriel vidéo)

Mettre une erreur dans le code JavaScript

Si nous faisons une erreur dans notre code JavaScript, nous pouvons voir nos erreurs dans le mode Inspection du navigateur. Pour cela, nous devons faire un clic droit avec notre souris et sélectionner Inspecter dans le menu. Ou nous pouvons simplement appuyer sur (Ctrl + Maj + I). Là, nous sélectionnons l'onglet Console, et toutes les erreurs seront affichées.

Qu'est-ce qu'une erreur de syntaxe ?

Une erreur de syntaxe signifie "Je ne comprends pas". Si vous parlez à quelqu'un en anglais et qu'il ne comprend pas ce que vous dites, il répondra "Je ne comprends pas". Si vous parlez à un ordinateur en JavaScript et que l'ordinateur ne comprend pas ce que vous dites, il répondra "Erreur de syntaxe".

Comment gérer une erreur de syntaxe en JavaScript ?

Dans le code ci-dessous, nous allons créer intentionnellement une erreur de syntaxe en ne mettant pas de point-virgule après la ligne Hello World. Vous verrez comment l'ordinateur réagit, comment nous corrigeons l'erreur, et comment nous exécutons le programme avec succès.

Corriger l'erreur dans votre code JavaScript

Cette vidéo vous montre comment vérifier s'il y a une erreur dans votre code en utilisant le mode Inspect de votre navigateur. C'est une fonctionnalité incroyablement utile pour vous aider à corriger vos erreurs (Vidéo 5). La console de débogage en mode Inspect affiche des messages d'erreur qui indiquent ce qui n'a pas fonctionné. Vous pouvez cliquer sur l'index de ces messages d'erreur pour mettre en évidence la ligne exacte de code qui a causé l'erreur.

Vidéo 5 - Comment corriger une erreur dans notre code JavaScript (Tutoriel vidéo)

Résumé

L'article ci-dessus explique ce dont vous avez besoin pour écrire votre premier programme JavaScript, qui est un exemple de code Hello World. Ce programme peut sembler simple, et il ne fait peut-être pas grand-chose, mais c'est ainsi que commencent les grandes choses ; en suivant ce guide, vous avez fait votre premier pas pour devenir un développeur JavaScript. Savoir coder en JavaScript et créer des programmes comme solution à vos problèmes vous aidera beaucoup à rendre le travail plus fluide.

Ce que vous avez appris ici est précieux, il existe d'autres guides utiles sur le site web d'Ozeki, allez-y ! Passons maintenant à l'article suivant sur ce sujet concernant comment envoyer un SMS depuis JavaScript.

Téléchargez maintenant Ozeki SMS Gateway et mettez-vous au travail !

More information