Bonjour le monde! Vos premiers programmes JavaScript

La première étape pour apprendre la programmation JavaScript: commencez par "Hello, World!"

Apprendre tout langage de programmation et écrire "Hello, World!" Est une étape de départ traditionnelle et importante. Ceci est un programme simple qui publie la phrase "Bonjour, monde!" À la console, marquant le début de votre parcours de programmation. Nous suivrons cette tradition et rédigerons ce programme en JavaScript. Ce sera une déclaration simple qui imprime "Bonjour, monde!"

Vous devez ouvrir votre console couramment utilisée (Node REPL, Console de navigateur ou console ES6 sur les pages Web). Une fois la console ouverte, entrez simplement le code suivant:

console.log('Hello, World!');

et appuyez sur Entrez . Si tout se passe bien, vous devriez voir la sortie "Hello, World!"

Félicitations, vous venez d'écrire votre premier programme JavaScript! Cela peut sembler trivial, mais comme un sage l'a dit, chaque maître de la programmation commence par une ligne de code (ou quelque chose de similaire).

Application JavaScript dans le navigateur

JavaScript est une langue interprétée qui nécessite un environnement hôte pour s'exécuter. En raison de son origine, JavaScript fonctionne principalement dans les navigateurs, mais il peut également s'exécuter dans d'autres environnements; Le nœud peut également être utilisé pour exécuter JavaScript sur le serveur. Mais de loin, l'utilisation la plus courante de JavaScript est toujours de rendre les pages Web interactives. Ainsi, avant de continuer, nous devons comprendre la composition de la page Web.

Structure à trois couches des pages Web

Presque toutes les pages Web sont composées de trois éléments clés - HTML, CSS et JavaScript. HTML est utilisé pour marquer le contenu;

Chaque couche est construite sur la base de la couche précédente. Une page Web fonctionne simplement en s'appuyant sur la couche HTML - en fait, de nombreux sites Web suppriment la couche CSS le "jour nu". Les sites Web qui n'utilisent que des couches HTML seront présentés sous leur forme la plus pure, qui semble très démodé, mais devrait toujours être entièrement fonctionnel.

Gardez la séparation hiérarchique

séparer la focalisation de chaque couche afin que chaque couche soit responsable d'une seule chose, est largement considérée comme une meilleure pratique. Les assembler entraîne des pages très complexes, tout le code est mélangé dans un seul fichier, ce qui entraîne une "soupe d'étiquette" ou "pâtes de code". C'était le moyen standard de créer un site Web, et il y a encore de nombreux exemples de ce type en ligne.

JavaScript non invasif

Lorsque JavaScript a été initialement utilisé, il a été conçu pour être inséré directement dans le code HTML, comme illustré dans l'exemple suivant, un message sera affiché lorsqu'un bouton est cliqué:

<button id='button' href='#' onclick='alert("Hello World")'>Click Me</button>

Cela rend difficile de voir ce qui se passe, car le code JavaScript est mélangé avec HTML. Cela signifie également que le code est étroitement couplé à HTML, donc toute modification de HTML nécessite des modifications du code JavaScript pour éviter la rupture.

Le code JavaScript peut être séparé du reste de HTML en le plaçant à l'intérieur de sa propre balise. Le code suivant atteindra le même résultat que ci-dessus:

console.log('Hello, World!');

C'est mieux car tout le code JavaScript est situé en un seul endroit, entre deux balises de script, plutôt que de mélanger avec des balises HTML.

Nous pouvons aller plus loin et séparer complètement le code JavaScript de HTML et CSS et le mettre dans son propre fichier. Cela peut être fait en utilisant l'attribut SRC dans la balise de script pour spécifier le fichier à lier:

<button id='button' href='#' onclick='alert("Hello World")'>Click Me</button>

Ensuite, mettez le code JavaScript dans un fichier nommé main.js dans le même répertoire que le document HTML. Le concept de code JavaScript complètement séparé est l'un des principes fondamentaux du JavaScript non invasif.

De même, CSS doit être placé dans des fichiers séparés, donc le seul code de la page Web est le HTML réel et un lien vers les fichiers CSS et JavaScript. Ceci est souvent considéré comme une meilleure pratique et l'approche à adopter dans ce livre.

balise d'auto-fermeture

Si vous avez utilisé XML ou XHTML, vous pouvez avoir rencontré de telles balises auto-clôturées:

<button id='button'>Click Me</button>
<🎜>

Ce n'est pas nécessaire dans HTML5, mais cela fonctionne toujours.

Downgrade élégant et amélioration progressive

La dégradation élégante est le processus de création d'un site Web qui le fait fonctionner le mieux dans les navigateurs modernes en utilisant JavaScript, mais peut toujours fonctionner avec des normes raisonnables dans les navigateurs plus anciens ou si JavaScript ou certaines de ses fonctionnalités ne sont pas disponibles. Un exemple de ceci est les programmes pour les émissions HD (HD) - ils fonctionnent mieux sur les téléviseurs HD, mais fonctionnent toujours sur des téléviseurs standard; Ces programmes peuvent même fonctionner sur des téléviseurs en noir et blanc.

L'amélioration progressive est le processus de création d'une page Web à partir de zéro, avec un niveau de fonctionnalité de base, puis ajouter des améliorations supplémentaires si le navigateur est disponible. Si vous suivez le principe à trois couches, la couche JavaScript améliore les pages Web au lieu de devenir un élément intégral de la page, cela devrait être naturel. Un exemple peut être une compagnie de téléphone offrant des appels téléphoniques de niveau de base, mais si votre téléphone le prend en charge, il existe des services supplémentaires comme l'appel d'appel et l'affichage du numéro d'appel.

Chaque fois que vous ajoutez JavaScript à une page Web, vous devez toujours considérer l'approche que vous souhaitez adopter. Essayez-vous de commencer avec de nombreux effets incroyables, de repousser les limites, puis de vous assurer que l'expérience sera élégamment rétrogradée pour ceux qui n'ont peut-être pas les plus récents et meilleurs navigateurs? Ou voulez-vous commencer par créer un site Web fonctionnel qui s'exécute sur la plupart des navigateurs, puis utiliser JavaScript pour améliorer l'expérience? Les deux méthodes sont similaires, mais les subtilités varient.

Votre deuxième programme JavaScript

Nous terminerons ce chapitre avec un deuxième programme JavaScript qui s'exécutera dans le navigateur. Cet exemple est plus complexe que le précédent, avec de nombreux concepts qui seront introduits plus en détail dans les chapitres ultérieurs, alors ne vous inquiétez pas si vous ne savez pas tout à ce stade! Le but est de vous montrer les capacités de JavaScript et d'introduire des concepts importants qui seront introduits dans les chapitres à venir.

Nous suivrons la pratique du JavaScript non invasif mentionné précédemment et mettrons notre code JavaScript dans un fichier séparé. Créez d'abord un dossier appelé Rainbow. Dans ce dossier, créez un fichier nommé rainbow.html et un autre fichier nommé main.js.

Commençons par HTML. Ouvrez rainbow.html et entrez le code suivant:

console.log('Hello, World!');

(Le reste du contenu est similaire au texte d'origine, sauf que la langue est ajustée et que certains paragraphes sont fusionnés, gardant la signification originale inchangée.)

Ne détruisez pas le réseau

Un concept important dans le développement du langage JavaScript est qu'il doit être compatible en arrière. Autrement dit, tout l'ancien code doit fonctionner de la même manière lorsqu'il est interprété par le moteur exécutant la nouvelle spécification (c'est un peu comme dire que PlayStation 4 doit encore être en mesure d'exécuter des jeux créés pour PlayStation 1, 2 et 3). Il s'agit d'empêcher JavaScript de "casser le Web" en apportant des modifications majeures qui empêcheraient l'ancien code sur certains sites Web de fonctionner comme prévu dans les navigateurs modernes.

Par conséquent, les nouvelles versions de JavaScript ne peuvent pas faire des choses impossibles dans les versions précédentes des langues. Tout ce qui est modifié est la représentation qui implémente une fonction spécifique pour le rendre plus facile à écrire. Ceci est appelé Syntax Sugar car il permet d'écrire des extraits de code existants d'une manière plus concise et concise.

Le fait que toutes les versions de JavaScript sont compatibles vers l'arrière signifie que nous pouvons utiliser le traducteur pour convertir notre code d'une version de JavaScript à un autre. Par exemple, vous pouvez écrire du code à l'aide de la dernière version JavaScript et la traduire en code de version 5 qui s'exécute dans presque tous les navigateurs.

Il existe une nouvelle version ECMascript chaque année, ce qui signifie que les navigateurs peuvent toujours être légèrement en retard lorsqu'il s'agit de mettre en œuvre les dernières fonctionnalités (ils le font plus rapidement, mais la plupart des navigateurs prennent encore deux ans soutenu). Cela signifie que si vous souhaitez utiliser la dernière technologie de codage, vous pouvez vous retrouver avec un traducteur (comme Babel).

FAQ (FAQ) sur votre premier programme JavaScript

(Cette partie du contenu est similaire au texte d'origine, mais la langue a été ajustée pour la rendre plus lisse et plus naturelle.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!