プログラミングのレッスンでこれまでに到達した場合、報酬に到達しました。今日、私たちは機能について学んでいます。その後、非常に簡単な推測ゲームを作成します。
これらのレッスンは、上記で見ることができるビデオで最適に機能しますが、以下の参照用のテキストも提供しています。あなたが読みたいと思っていても、ビデオはより明確になり、私たちが議論しているすべてを行う方法を示します。テキストが少し複雑すぎるように見える場合は、必ずビデオをご覧ください。
今日は私たちの最後のレッスンです（このポーンに続くベストプラクティスと追加のリソースに関するミニレッスンと「エピローグ」があります）。2つのことをカバーします：機能と非常にシンプルな推測ゲームを作成します。あなたがそれを通過した場合レッスン3、おそらく、関数が非常に簡単に習得できることがわかります。最初にそれに取り組んでから、その知識を使用して、少しHTMLを使用してゲームをまとめます。
Fは何ですか？
ああ、さあ、あなたはすでに機能についてすべて知っています。今回は1つを使用しています：alert（）。関数は、基本的に、ほんの少しのテキストで大量のコードを呼び出す手段です。関数は一種のようなものですテキスト拡張プログラミングの。 Alert（）を使用していますが、それは単なる組み込み関数です（その多くはJavaScriptとすべてのプログラミング最新のオブジェクト指向プログラミング言語があります）。今日は、最終的に推測ゲームを作成するのに役立つ独自の機能を作成します。まず、コードで関数がどのように宣言されているかを見てみましょう。
function nameOfFunction(variables)
{}
これはかなり馴染みがあるはずです。関数は、ループやステートメントの場合によく似ています。私たちが見ているものを分解しましょう。まず、言葉から始めますfunction関数を定義していることをコンピューターに伝えます。次に、その関数に名前を付ける必要があります。この例では、タイトルが付けられていますnameOfFunctionただし、通常、それが何をするかに関連する何かに名前を付けます（Alert（）が使用するとアラートダイアログボックスを作成する方法など）。関数の名前は括弧です。括弧内に何かを入れる必要はありませんが、関数に情報を提供する必要がある場合（変数/変数を渡す）、内部で使用する変数の名前を指定する必要があります関数。これは今少し混乱しているかもしれませんが、もう少し後で見るので、心配しないでください。最後に、最後に巻き毛の装具があります。関数が行う必要があるすべてのものは、これらの巻き毛の装具の中に入ります。
関数がどのように定義されているか、それが何をするかを知ったので、それを使用してみましょう！
JavaScriptで簡単な推測ゲームを作成します
このプロセスには、関数とインターフェイス（基本的にユーザーが番号を入力できるフォーム）の2つの部分があります。まず、関数から始めます。
ゲームを実行する関数を作成します
ゲームを作成するには、ユーザー入力に反応する関数を作成する必要があります。それを行う関数をまとめましょう：
var perfectNumber = 12;function checkApples(numApples){ if (numApples == perfectNumber) { alert("You ate the perfect number of apples!"); } else if (numApples > perfectNumber) { alert("You ate way too many apples."); } else if (numApples < perfectNumber) { alert("You didn't eat enough apples."); }}さて、それはたくさん見るべきことなので、それを分解しましょう。最初に、呼ばれる変数を作成しましたperfectNumberそしてそれを設定します12。これは、ユーザーが私たちのゲームで推測しようとする数字です。この番号を必要なものに設定できます。いくつかのボーナスポイントが必要な場合は、これを実装してみてくださいrandrange（）関数ページがロードされるたびに数値をランダム化するには、最初に基本的なことをしましょう。
変数の後perfectNumber定義されていると、呼ばれる関数が作成されますcheckApplesそして、それを呼び出す変数を渡しますnumApples。これは、この関数を呼び出すときに数字を与える必要があることを意味します。ただし、その数はユーザーからのものなので、まだそれについて話すつもりはありません。
関数内には、3つの条件を持つIFステートメントがあります。最初の条件では、numApples（チェックアプリケルの関数に渡された数値変数）がPerfectNumberに等しいかどうかを確認します。これは、ユーザーが推測しようとする答えです。正しい数字を選択することを祝福します3番目の状態では問題が発生しますが、数が少なすぎると推測した場合。
それだけが機能することであり、それは非常に簡単です。しかし、どのようにしてユーザーから番号を要求しますか？それには、小さなJavaScriptと少しHTMLを組み合わせる必要があります。
ユーザー入力フォームの作成
フォームを作成することは、HTMLを使用したことがある場合に以前に行ったことがあります。とても簡単です。まず、これをHTMLドキュメントのドキュメントに入れる必要があります。
<form> <input type="text" name="numApples" id="numApples" /> <input type="Submit" name="Submit" /></form>
これにより、テキストボックスと送信ボタンを備えた非常にシンプルなフォームが得られますが、何もしません。最初に、入力をフォームタグに追加して、入力をあなたに接続する必要がありますcheckApples()関数：
<form method="POST" name="applesForm" onSubmit="checkApples(document.applesForm.numApples.value);">
それで、正確に何を追加しましたか？最初に、フォームにPOSTメソッドを使用するように指示しました。どちらの方法でも機能するため、これはそれほど重要ではありませんが、POSTメソッドはここでやっていることについて少しきれいです。 POSTは、すべての変数をフォームでURLに入れることはありませんが、他のオプションを取得します。次に、ユーザー入力テキストボックスがドキュメント内の場所を指定するときに名前で参照する必要があるため、フォームにapplesformに名前を付けます。最後に、呼ばれるものがありますonSubmitこれにより、送信ボタンが押されたときにJavaScriptコードを実行できます。ほとんどの形式では、アクションと呼ばれるプロパティもあり、送信後にどこに行くべきかを指示しますが、私たちはそれを必要としないようにページにとどまりたいだけです。 OnSubmitに戻ると、基本的にCheckApples（）関数に設定したことがわかります。ただし、checkapples（）に番号を付ける代わりに、私たちはそれを与えましたdocument.applesForm.numApples.value。これは、フォームのユーザー入力テキストボックスを参照する方法です。 JavaScriptでドキュメントオブジェクトモデルまたはDOMを使用してこれを行っています。これを分解しましょう：
書類-HTMLドキュメント。
ApplesForm- 作成したフォームの名前。
numApples- リンゴフォーム内にあるユーザー入力用に作成したテキストフィールドの名前。
価値- 作成したテキストフィールドは必要ありませんが、テキストフィールドの内部にあります。添付する必要があります
valueテキストフィールドの最後まで、それを含むテキストフィールドオブジェクトへの参照ではなく、それの値を取得できます。
コードにすべてを入手したら、完了です！ページを保存し、ブラウザにリロードし、番号を推測してみてください。目を向けすぎて、低すぎて、それを正しく推測します。推測するたびに、コードで定義されている応答があなたに警告されていることがわかります。だから、おめでとうございます、あなたはあなたの最初のゲームを作ったばかりです！
さよならを言う時がほとんどあります
まあ、それは私たちの基本的なコーディングレッスンのためにそれをします。あなたがそれらを楽しんで、プログラミングの世界への進出を始めながら、より複雑なものにアプローチする準備ができていると感じてください。人気のある需要により、明日、いくつかのプログラミングベストプラクティス（主にコードにコメントする）についてもう1つ投稿します。また、議論したすべてと次にどこに行くかについてさらに学ぶのに役立つ追加のリソースを含めます。
