最初のJavaScriptプログラムの書き方
序章
「Hello、World!」 プログラムは、コンピュータプログラミングにおける古典的で昔ながらの伝統です。 これは初心者向けの短くて完全な最初のプログラムであり、環境が適切に構成されていることを確認するための良い方法です。
このチュートリアルでは、JavaScriptでこのプログラムを作成する手順を説明します。 ただし、プログラムをより面白くするために、従来の「Hello、World!」を変更します。 ユーザーに名前を尋ねるようにプログラムします。 次に、その名前を挨拶に使用します。 このチュートリアルを終了すると、インタラクティブな「Hello、World!」が表示されます。 プログラム。
前提条件
このチュートリアルは、WebブラウザーでJavaScriptDeveloperConsoleを使用して完了することができます。 このチュートリアルを開始する前に、このツールの操作にある程度精通している必要があります。 詳細については、チュートリアル「JavaScriptデベロッパーコンソールの使用方法」をご覧ください。
「Hello、World!」を作成するプログラム
「Hello、World!」を作成するにはプログラムでは、最初に好みのWebブラウザのJavaScriptコンソールを開きます。
「Hello、World!」を作成するには、主に2つの方法があります。 JavaScriptのプログラム、 alert()
方法と console.log()
方法。
使用する alert()
このプログラムを作成する最初の方法は、 alert()
メソッド。現在のウィンドウに、指定されたメッセージ(この場合は「Hello、World!」)と OK
ユーザーがアラートを閉じることができるボタン。
メソッド内で、stringデータ型をパラメーターとして渡します。 この文字列は値に設定されます Hello, World!
その値がアラートボックスに出力されるようにします。
この最初のスタイルの「Hello、World!」を書くために。 プログラムでは、文字列をかっこで囲みます alert()
方法。 JavaScriptステートメントをセミコロンで終了します。
alert("Hello, World!");
を押すと ENTER
JavaScriptの行に続いてキーを押すと、ブラウザに次のアラートがポップアップ表示されます。
コンソールは、式を評価した結果も出力します。 undefined
式が明示的に何かを返さない場合。
ポップアップアラートはクリックを続けるのが面倒な場合があるため、同じプログラムをコンソールに記録して作成する方法を見ていきましょう。 console.log()
.
使用する console.log()
今回を除いて、同じ文字列をJavaScriptコンソールに出力するには、 console.log()
方法。 このオプションの使用は、コンピューターの端末環境でプログラミング言語を使用する場合と似ています。
私たちがしたように 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
名前の変数を使用して:
"Hello, " + name + "!"
2つの文字列を組み合わせました。 "Hello, "
と "!"
とともに 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プログラムを作成することもできます。