JavaScriptプログラミングを学習するための最初のステップ：「Hello、World！」で始める
一般的に使用されるコンソール（Node Repl、ブラウザーコンソール、またはWebページでES6コンソール）を開く必要があります。コンソールが開かれたら、次のコードを入力してください。
を押して
console.log('Hello, World!');を入力します。すべてがうまくいけば、以下のスクリーンショットに似た出力が表示されます。
おめでとうございます、あなたは最初のJavaScriptプログラムを書いたばかりです！それは些細なように思えるかもしれませんが、一人の賢明な人が言ったように、プログラミングのすべてのマスターは一連のコード（または同様のもの）から始まります。
JavaScriptは、ホスト環境を実行する必要がある解釈言語です。 JavaScriptは主にブラウザで実行されていますが、他の環境でも実行できます。ノードは、サーバーでJavaScriptを実行するためにも使用できます。しかし、JavaScriptの最も一般的な使用は、まだWebページをインタラクティブにすることです。したがって、先に進む前に、Webページの構成を理解する必要があります。
Webページの3層構造
ほとんどすべてのWebページには、HTML、CSS、JavaScriptの3つの重要な要素で構成されています。 HTMLは、コンテンツをマークするために使用されます。
各レイヤーは、前のレイヤーの基礎の上に構築されています。 Webページは、HTMLレイヤーに依存するだけで機能します。実際、多くのWebサイトは「Naked Day」でCSSレイヤーを削除します。 HTMLレイヤーのみを使用するWebサイトは、非常に昔ながらのように見えますが、完全に機能するはずですが、最も純粋な形で表示されます。
階層分離を維持
各レイヤーの焦点を分離して、各レイヤーが1つのことのみに責任を負うように、ベストプラクティスと広く考えられています。それらをまとめると、非常に複雑なページになり、すべてのコードが1つのファイルに混合されているため、「ラベルスープ」または「コードパスタ」になります。これは以前はウェブサイトを作成する標準的な方法でしたが、オンラインでそのような例はまだたくさんあります。
非侵襲的javaScript
JavaScriptが最初に使用された場合、次の例に示すように、ボタンがクリックされるとメッセージが表示されるように設計されています。
JavaScriptコードはHTMLと混合されているため、これにより、何が起こっているのかを見るのが難しくなります。これはまた、コードがHTMLにしっかりと結合されていることを意味するため、HTMLに変更すると、破損を防ぐためにJavaScriptコードの変更が必要です。JavaScriptコードは、独自のタグ内に配置することにより、HTMLの残りの部分から分離できます。次のコードでは、上記と同じ結果が得られます。
すべてのJavaScriptコードは、HTMLタグと混合するのではなく、2つのスクリプトタグの間にある1つの場所にあるため、これは優れています。console.log('Hello, World!');さらに一歩進んで、JavaScriptコードをHTMLとCSSから完全に分離し、独自のファイルに配置できます。これは、スクリプトタグのSRC属性を使用して、リンクするファイルを指定することで実行できます。
次に、JavaScriptコードをHTMLドキュメントと同じディレクトリにmain.jsという名前のファイルに配置します。 JavaScriptコードを完全に分離するという概念は、非侵襲的JavaScriptの中核原則の1つです。
同様に、CSSは個別のファイルに配置する必要があるため、Webページの唯一のコードは実際のHTMLとCSSおよびJavaScriptファイルへのリンクです。これはしばしば、この本で採用されるべきベストプラクティスとアプローチと見なされます。<button id='button' href='#' onclick='alert("Hello World")'>Click Me</button>自己閉鎖タグ
これはHTML5では不要ですが、それでも機能します。
エレガントなダウングレードとプログレッシブエンハンスメント
<button id='button'>Click Me</button> <🎜>
プログレッシブエンハンスメントは、基本的なレベルの機能を備えたWebページをゼロから構築するプロセスであり、ブラウザが利用可能な場合は追加の拡張機能を追加します。 3層の原則に従うと、JavaScriptレイヤーがページの不可欠な要素になるのではなく、Webページを強化すると、これは自然に感じるはずです。例としては、基本的なレベルの電話を提供する電話会社がありますが、電話がサポートしている場合は、コール待機や通話番号ディスプレイなどの追加サービスがあります。
JavaScriptをWebページに追加するたびに、常に取りたいアプローチを検討する必要があります。多くの驚くべき効果から始めて、境界を押し広げてから、最新かつ最高のブラウザを持っていない人のためにエクスペリエンスがエレガントに格下げされることを確認しようとしていますか？または、ほとんどのブラウザで実行される機能的なWebサイトを構築してから、JavaScriptを使用してエクスペリエンスを向上させますか？ 2つの方法は似ていますが、微妙な方法は異なります。
2番目のJavaScriptプログラム
この章は、ブラウザで実行される2番目のJavaScriptプログラムで終了します。この例は以前の例よりも複雑で、後の章でより詳細に紹介される多くの概念があるので、この段階ですべてを知らない場合は心配しないでください。目的は、JavaScriptの能力を示し、今後の章で紹介されるいくつかの重要な概念を紹介することです。
前述の非侵襲的JavaScriptの練習に従い、JavaScriptコードを別のファイルに入れます。まず、Rainbowというフォルダーを作成します。このフォルダーで、rainbow.htmlという名前のファイルとmain.jsという名前の別のファイルを作成します。
HTMLから始めましょう。 Rainbow.htmlを開き、次のコードを入力します
console.log('Hello, World!');
ネットワークを破壊しないでください
JavaScript言語開発における重要な概念は、後方互換性がなければならないことです。つまり、すべての古いコードは、新しい仕様を実行しているエンジンによって解釈されるときに同じように機能する必要があります（PlayStation 4はまだPlayStation 1、2、および3用に作成されたゲームを実行できる必要があると言っているようなものです）。これは、JavaScriptが、一部のWebサイトで古いコードが最新のブラウザで予想どおりに実行されないようにする大きな変更を加えることにより、「Webを破る」ことを防ぐためです。
したがって、JavaScriptの新しいバージョンは、以前のバージョンの言語では不可能なことを行うことはできません。変更されたのは、書くことを容易にするために特定の機能を実装する表現だけです。これは、既存のコードスニペットをより簡潔で簡潔な方法で書くことができるため、Syntax Sugar
と呼ばれます。JavaScriptのすべてのバージョンが後方互換であるという事実は、翻訳者を使用してJavaScriptのあるバージョンから別のバージョンにコードを変換できることを意味します。たとえば、最新のJavaScriptバージョンを使用してコードを作成し、ほぼすべてのブラウザで実行されるバージョン5コードに変換できます。
毎年新しいECMAScriptバージョンがあります。つまり、最新の機能の実装に関しては、ブラウザが常に少し遅れている可能性があります（これをより速く行っていますが、ほとんどのブラウザはES6モジュールにしか2年かかります。サポート）。これは、最新のコーディングテクノロジーを使用したい場合、翻訳者（Babelなど）になってしまう可能性があることを意味します。最初のJavaScriptプログラムについて
FAQ（FAQ）（コンテンツのこの部分は元のテキストに似ていますが、言語は調整されてよりスムーズで自然になります。）
以上がこんにちは世界！あなたの最初のJavaScriptプログラムの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
