初めてのJavaScriptプログラムの書き方

前書き

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

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

前提条件

WebブラウザーでJavaScript開発者コンソールを使用して、このチュートリアルを完了することができます。 このチュートリアルを開始する前に、このツールの使用にある程度精通している必要があります。 詳細については、チュートリアル「https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console[JavaScript開発者コンソールの使用方法]」を参照してください。

[[creating-the-“hello-world-”-program]] === 「Hello、World!」プログラムの作成

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

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

`+ alert()+`を使用する

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

メソッド内で、パラメーターとしてhttps://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript[string]データ型を渡します。 この文字列は値 `+ Hello、World!+`に設定され、その値が警告ボックスに出力されます。

「Hello、World!」プログラムのこの最初のスタイルを書くために、 `+ alert()+`メソッドの括弧内に文字列を入れます。 JavaScriptステートメントをhttps://www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure-in-javascript#semicolons[semicolon]で終了します。

alert("Hello, World!");

JavaScriptの行の後に「+ ENTER +」キーを押すと、ブラウザに次のアラートがポップアップ表示されるはずです。

image:https://assets.digitalocean.com/articles/eng_javascript/js-console/javascript-alert.png [JavaScriptコンソールアラートの例]

また、コンソールは式の評価結果を出力します。式が明示的に何かを返さない場合、式は「+ 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? "`を渡して、ユーザーに名前を尋ねます。 ユーザーが入力した入力は、https://www.digitalocean.com/community/tutorials/how-to-use-variables-in-python-3 [variable] ` name +`に保存されます。 セミコロンで表現を終了します。

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

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

image:https://assets.digitalocean.com/articles/eng_javascript/hello-world/js-prompt.png [JavaScriptプロンプトの例]

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

JavaScriptの `+ prompt()+`メソッドを使用するのは、プログラムのコンテキスト内で意味がある場合にのみ使用することが重要です。

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

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

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

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

string concatenationを利用して、「Hello!」という挨拶を書きます。ユーザーに直接対処します。 それで、 `+ Hello +`の文字列をnameの変数と連結しましょう:

"Hello, " + name + "!"

2つの文字列、 " Hello、 "、および `"! "`を、その間にある `+ name `変数で結合しました。 これで、この式を ` alert()+`メソッドに渡すことができます。

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

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

image:https://assets.digitalocean.com/articles/eng_javascript/hello-world/prompt-output.png [JavaScriptプロンプト出力]

この場合、ユーザーの名前はSammyであるため、出力はSammyを迎えています。

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

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

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

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

"Hello, " + name + "!"

この式全体が `+ console.log()+`メソッドの括弧内に配置されるため、出力として挨拶が表示されます。

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

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

OutputHello, Sammy!

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

結論

古典的な「Hello、World!」プログラムの記述方法と、ユーザーに入力を促し、それを出力として表示する方法がわかったので、プログラムをさらに拡張することができます。 たとえば、ユーザーの好きな色を聞いて、好きな色が赤であることをプログラムに言わせます。 この同じ手法を使用してMad Libプログラムを作成することもできます。