【初心者向け】プログラミングを学ぼう!JavaScript編3
こんにちは。引地啓です。
今回はJavaScript言語第3弾です。
プログラミング初心者が知識として覚えておきたい所をまとめました。
イベント処理
イベント処理といって、マウスをクリックした時などに何かを実行させることができます。
まずは「index.html」の<body>に<input>を入れます。
赤線の「"button"value="push!"」でボタンを作成。
「onclick="push()"」で、もう一つのmain.js内のプログラムを埋め込みます。
次に、「main.js」ファイル内に実行するプログラムを書きます。
呼び出すものを「function(){}」で囲んで、呼び込むfunctionの名前をfunctionの隣に書きます。上記では「push()」です。これをindex.htmlに埋め込みます。
コンソールにHello worldを出力させます。
push!のボタンをクリックすることで、コンソールに「Hello world」が出力されました。
キーイベント
キーイベントとは、キーボードからの入力を受け取ることができるオブジェクトです。
キーボードを押すとされる処理のことです。キーイベントは以下のものがあります。
keydown
keydownは、「キーが最初に押されたときに発生」します。
keypress
keypressキーは、「修飾キー(ShiftやAlt、Ctrlなどのキー)でなかった場合に発生」します。
keyup
keyupは、「ユーザーがキーを離した時点で発生」します。
では、どのように動くか見てみましょう。
まず、コードはこのように書きます。
中身を説明します。
addEventListener()
「addEventListener()」は、様々なイベント処理を行うためのメゾットです。
今回はキーイベント処理を行うためにあります。
()中は「( 種類, 関数, false)」を入力します。
種類には、keydownやkeyup等のイベントの種類を記述します。ここでは「keydown」にしています。
次に関数を入力し、最後はイベント伝搬の方式をFalseかTrueで入力します。
基本的にはFalseを入力します。
function checkKeyPress()
functionは、JavaScript言語でよく使うもので、「様々な処理をまとめて、名前を付けることができる」ものです。この場合のfunctionの名前は「checkKeypress」という名前を付けています。つまり、「checkKeypress」の名前を使えば、このfunction内の処理を呼び出すことができます。上の「addEventListener()」の2番目で呼び出しています。
if (key.keyCode == "65")
こちらは、「もし(クリックしたキーの)KeyCodeが ”65” だった場合、{}内の処理をします!」という意味です。
keyCodeとは、キーボードのキーそれぞれに番号が付いており、これを「keyCode」と呼んでいます。ちなみに65は「 a 」です。
つまり、「 a 」をクリックすると、if 内の{}の処理をしてくれます。
{}内の処理は「alert()」にしています。
保存したらindex.htmlを開き、キーボードの a を押しましょう。
alertが表示されたと思います。
ちなみに余談ですが、Webサーフィンをしているとたまに上記のような画面が急に表示されて「システムが破損しています」「ウイルスに感染している恐れが」等と出てくるものがありますが、alertのようなプログラムがWebページのプログラム内に書かれてある、詐欺表示ですので、十分気を付けてください。
JavaScript言語のまとめは以上です。
初心者の人がいきなりゲームを作るとなると、簡単なゲームでも挫折してしまうことがあると思います。ここで紹介したのは、動くWebページを作れる基礎の基礎の部分で、ある程度勉強してきた人には物足りない記事になると思いますが、今から始める人や始めたばかりの人が見る分には丁度良いと思います。
プログラミングもRPGと同じで、いきなり強い敵と戦おうとしても絶対に進めないように、難しい所からいきなり始めようとするとつまづいてしまい、前へ進めません。
できる所やできそうな所から始めてみることが、上達する第一歩だと思います。
そして知識と技術をしっかり身につけて難関に立ち向かっていきましょう。
最後まで見ていただきありがとうございます。
今後ともよろしくお願いします。
またお会いしましょう。