最初のJavaScriptプログラムの書き方

序章

「Hello、World！」 プログラムは、コンピュータプログラミングにおける古典的で昔ながらの伝統です。 これは初心者向けの短くて完全な最初のプログラムであり、環境が適切に構成されていることを確認するための良い方法です。

このチュートリアルでは、JavaScriptでこのプログラムを作成する手順を説明します。 ただし、プログラムをより面白くするために、従来の「Hello、World！」を変更します。 ユーザーに名前を尋ねるようにプログラムします。 次に、その名前を挨拶に使用します。 このチュートリアルを終了すると、インタラクティブな「Hello、World！」が表示されます。 プログラム。

前提条件

このチュートリアルは、WebブラウザーでJavaScriptDeveloperConsoleを使用して完了することができます。 このチュートリアルを開始する前に、このツールの操作にある程度精通している必要があります。 詳細については、チュートリアル「JavaScriptデベロッパーコンソールの使用方法」をご覧ください。

「Hello、World！」を作成するプログラム

「Hello、World！」を作成するにはプログラムでは、最初に好みのWebブラウザのJavaScriptコンソールを開きます。

「Hello、World！」を作成するには、主に2つの方法があります。 alert()メソッドとconsole.log()メソッドを使用したJavaScriptのプログラム。

alert()を使用する

このプログラムを作成する最初の方法は、alert()メソッドを使用することです。このメソッドは、現在のウィンドウに指定されたメッセージ（この場合は「Hello、World！」）を含むアラートボックスを表示します。 OKボタンを使用すると、ユーザーはアラートを閉じることができます。

メソッド内で、stringデータ型をパラメーターとして渡します。 この文字列は値Hello, World!に設定され、その値がアラートボックスに出力されます。

この最初のスタイルの「Hello、World！」を作成するにはプログラムでは、alert()メソッドの括弧内に文字列を入れます。 JavaScriptステートメントをセミコロンで終了します。

alert("Hello, World!");

JavaScriptの行に続いてENTERキーを押すと、ブラウザに次のアラートがポップアップ表示されます。

コンソールは、式の評価結果も出力します。式が明示的に何かを返さない場合は、undefinedと表示されます。

ポップアップアラートはクリックを続けるのが面倒な場合があるため、console.log()を使用してコンソールにログインして同じプログラムを作成する方法を見ていきましょう。

console.log()を使用する

console.log()メソッドを使用すると、今回を除いて同じ文字列をJavaScriptコンソールに出力できます。 このオプションの使用は、コンピューターの端末環境でプログラミング言語を使用する場合と似ています。

alert()で行ったように、"Hello, World!"文字列をconsole.log()メソッドの括弧の間に渡します。 JavaScriptの構文規則によくあるように、ステートメントはセミコロンで終了します。

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

ENTERを押すと、Hello, World!メッセージがコンソールに出力されます。

OutputHello, World!

次のセクションでは、このプログラムをユーザーにとってよりインタラクティブにする方法について説明します。

入力のプロンプト

既存の「Hello、World！」を実行するたびにプログラム、それは同じ出力を生成します。 私たちのプログラムを実行している人に名前を尋ねましょう。 次に、その名前を使用して出力をカスタマイズできます。

上記で使用したJavaScriptメソッドごとに、入力を求める1行から始めることができます。 JavaScriptのprompt()メソッドを使用し、それに文字列"What is your name?"を渡して、ユーザーに名前を尋ねます。 ユーザーが入力した入力は、変数nameに保存されます。 式はセミコロンで終了します。

let name = prompt("What is your name?");

ENTERを押して次のコード行を実行すると、ポップアッププロンプトが表示されます。

Webブラウザウィンドウ上にポップアップするダイアログボックスには、ユーザーが入力を入力するためのテキストフィールドが含まれています。 ユーザーがテキストフィールドに値を入力したら、OKをクリックして値を保存する必要があります。 Cancelボタンをクリックして、値が記録されないようにすることもできます。

JavaScript prompt()メソッドは、プログラムのコンテキスト内で意味がある場合にのみ使用することが重要です。これを使いすぎると、ユーザーにとって面倒になる可能性があります。

この時点で、プログラムに挨拶する名前を入力します。 この例では、Sammyという名前を使用します。

ユーザーの名前の値を収集したので、次にその値を使用してユーザーに挨拶することができます。

alert()でユーザーに挨拶する

上で説明したように、alert()メソッドは、ブラウザウィンドウ上にポップアップボックスを作成します。 このメソッドを使用して、変数nameを使用してユーザーに挨拶することができます。

文字列連結を使用して「Hello！」の挨拶を書きます。 ユーザーに直接対応します。 それでは、Helloの文字列をnameの変数と連結してみましょう。

"Hello, " + name + "!"

"Hello, "と"!"の2つの文字列を、name変数を挟んで組み合わせました。 これで、この式をalert()メソッドに渡すことができます。

alert("Hello, " + name + "!");

ここでENTERを押すと、画面に次のダイアログボックスが表示されます。

この場合、ユーザーの名前はSammyであるため、出力はSammyに挨拶しています。

次に、これを書き直して、出力が代わりにコンソールに出力されるようにします。

console.log()でユーザーに挨拶する

前のセクションで見たように、console.log()メソッドは、print()関数がPythonで端末に出力を出力できるのと同じように、コンソールに出力を出力します。

alert()メソッドで使用したのと同じ連結文字列を使用します。この文字列は、文字列"Hello, "と"!"をname変数と組み合わせます。

"Hello, " + name + "!"

この式全体がconsole.log()メソッドの括弧内に配置されるため、出力として挨拶を受け取ることができます。

console.log("Hello, " + name + "!");

Sammyという名前のユーザーの場合、コンソールの出力は次のようになります。

OutputHello, Sammy!

これで、ユーザーからの入力を受け取り、それを画面に出力するJavaScriptプログラムができました。

結論

これで、クラシックな「Hello、World！」の書き方がわかりました。 プログラム、およびユーザーに入力を求めるプロンプトを表示し、それを出力として表示すると、プログラムをさらに拡張することができます。 たとえば、ユーザーの好きな色を尋ねて、プログラムに彼らの好きな色が赤であると言わせます。 これと同じ手法を使用して、MadLibプログラムを作成することもできます。