【JavaScript入門】イベントの処理 – addEventListener()

JavaScript
スポンサーリンク

初心者の独学でのプログラミング学習はとてもツライ…

プログラミングをマスターしたい!

今のIT業界はプログラミングエンジニアが不足していると言われています。
高収入の職業とも言われる分野もありますし、AI、機械学習、ディープラーニング、IOTといった注目される分野が目白押しです。

でも、いざ初心者がプログラミングをマスターしようとすると…

  • 本を読んだりネットの記事で自力で勉強しているけど限界を感じる
  • プログラミングスクールに定期的に通うのは面倒だ
  • 地方に住んでると家の近くにプログラミングスクールなんてない
  • どのプログラミング言語を学べばいいのか悩む
  • 実際の就職や転職にプログラミングが活かせるのか心配だ

など、プログラミングを自分で勉強しようとすると悩みが尽きません。

プログラミングに詳しい友人に教えてもらおうと思っても、そんな友人なんて滅多にいません。いたとしても細かく教えてくれるほど時間に余裕がある人はいないでしょう。

そんな独学でプログラミングをマスターするのに限界を感じてる方に、オンラインプログラミングスクールをがおすすめです。

おすすめのオンラインスクールはこちら

これまではHTMLファイルを読み込むとすぐに実行されるコードを扱ってきましたが、ここでは、「ボタンのクリック」や「キーボードのキーを押す」などの操作に対応して結果を返すコードを扱います。

このように、プログラムを動かすきっかけとなるとこを「イベント」と言います。

JavaScriptでは、イベントに対応して実行される関数を指定することで、操作ができるwebページを作ることができます。

スポンサーリンク

イベントの処理

イベントの働きは、先ほども少し触れましたが、イベントが発生した時に対応した関数が実行されるように設定しておく必要があります。

イベントの設定にはイベントリスナーを指定する方法が主流になっていて、指定する関数も無名関数を使って行いたい処理を指定する方法が一般的です。addEventListener()を使って次のような形で利用します。

ちなみに、定義された関数を利用する場合は次のようになります。

この場合、関数に引数を指定することはできません。

イベントタイプ名に指定するイベントの種類は、マウス操作ではclick、mouseover、mousemoveなど、キーボード操作ではkeyup、keydown、keypressなど、その他色々ありますので、MDNのサイトや書籍などで必要に応じて確認しましょう。

スポンサーリンク

イベント処理の事例:文字数カウントサイトの作成

具体的にイベント処理を行うコードを書いてみます。

完成イメージとして、次のようなものを作ってみようと思います。

index.html、script.js、style.cssファイルを準備します。

index.htmlは次のようにコードを記述します。

ボタンとテキストエリアを作っているコードです。JavaScriptで操作する為にそれぞれにidを設定しています。

style.cssファイルに次のコードを書いておきます。

こうすることで、テキストエリアが非表示にしておくことができます。

index.htmlをブラウザで表示すると次のようになります。

ここでscript.jsファイルに、次のコードを記述します。

getElementById()でボタンとテキストエリアの要素を取り出します。addEventListener()でボタンがクリックされた時のイベントを指定します。無名関数の中で、テキストエリアのスタイルについてCSSで非表示にしていた部分を無効にして表示するように操作を指定しています。

「文字数カウント」のボタンをクリックすると次のようのテキストエリアが表示されます。

これに文字を入力しても何も起こりません。今回は入力した文字を数える処理を行いたいので、script.jsファイルのコードを次のように追記します。

最初の2行はこれまでと同じです。

次にcreateElement()を使って新しいタグを設定しています。textareaを親要素として、この前にタグ要素を挿入するようにしています。

このあたりはDOMの操作のところで扱いました。

【JavaScript入門】DOMとHTML/CSSの操作
JavaScriptを使って、HTMLやCSSを操作することでWebページの内容を変更する方法を扱います。DOM(Document Object Model)という仕組みとWebページのオブジェクト構造を理解して要素の操作を行います。

次のボタンのイベントリスナーは先ほどと同じコードです。その下に、textareaについてのイベントを設定しています。addEventListener()を使って、keyupというイベントを指定しています。このkeyupはキーボードのキーを離したときに発生するイベントのタイミングということになります。その時の処理を無名関数で設定していますが、入力した文字のvalueをlengthを使って長さを取り出しています。この取り出した値をinnerHTMLを使って追加したdiv要素のところに出力するようにしています。

これをブラウザで表示して、「文字カウント」のボタンを押してテキストエリアを表示し、中に「入力した文字数を計算します。」の文字を入力すると次のように表示されます。

入力した文字が14文字と計算されて表示されているのがわかります。

このようにして、イベントと処理を結びつけて表示を変更することができます。他にもいろんなイベント処理ができるので調べてみてください。ここでは先に話が進む中で色々と他のものを扱って行こうと思います。

スポンサーリンク

まとめ

これまではJavaScriptを使って、HTMLファイルを読み込むとすぐに実行されるコードを扱ってきましたが、ここでは、「ボタンのクリック」や「キーボードのキーを押す」などの操作に対応して結果を返すというイベントの処理を行いました。

JavaScriptを使ったイベントの処理とは、イベントが発生した時に対応した関数が実行されるように設定することを言います。

イベントの設定にはイベントリスナーを指定する方法が主流で、addEventListener()を使って、イベントタイプ名を指定し、無名関数を使って行いたい処理を指定する方法が一般的となっています。

ここでは入力した文字数をカウントするwebサイトを作ってみました。

自宅学習はオンラインプログラミングスクールを活用!

自宅学習にはオンラインプログラミングスクールがおすすめ!

オンラインプログラミングスクールは独学でプログラミングを学習する時のデメリットを解消する仕組みが備わっています。

気になるところは…

学習がオンラインで完結するのはもちろんですが、独学ではできない質問サポートがあるかどうか。わからないことを現役のエンジニアが質問に答えてくれるといいですよね。

受講者個人に担当のメンターがつき、マンツーマンで学習の相談に乗ってくれることも必要で、ITエンジニアの世界についても伺えたりもすると幅が広がります。

オンライン面談だけでなく、チャット機能を使って気軽に質問を投げかけることができることも大切です。

また、オリジナルプロダクトの開発とサポートがコースの中に組み込まれていて、独学ではなかなか難しい実践的なスキルの習得にもつなげたい。

プログラミングをマスターした後の実際の仕事につながる転職サポートでがあると、ITエンジニアの世界に飛び込むのに不安が解消されます。

そんな豊富なメニューが揃っているおすすめのオンラインプログラミングスクールがこちらにあります。

おすすめのオンラインプログラミングスクールはこちら

TechAcademyはおすすめのオンラインプログラミングスクール!

オンラインのプログラミングスクールでは、テックアカデミーの充実度が目を見張ります。

オンラインで受講が完結するので、自宅学習でプログラミングをマスターしたい人にはテックアカデミーがおすすめです。

メンター制度も現役のプロが対応してくれます。大学生などが対応しているスクールに比べて本気度と専門性が違います。メンター制度の無いスクールもありますし、担当では無いメンターが対応するスクールもあったりするので、相談の質が違いますね。

チャットサポートもあるので、それが無いスクールに比べて相談の気軽さの違いがあります。

プロダクト開発のサポートで実践力が養われるだけでなく、どの講座を利用しても転職サポートが受けられるのはありがたい。

用意されているコースも、初心者向けのプログラミングコースから、Python、Java、PHP、iPhoneアプリ、AndroidといったITエンジニアのベースとなる主要な言語だけでなく、AI、データサイエンス、ブロックチェーン、webアプリケーションと行った実践的なコースまで用意しています。

他にも、webデザインやUI/UXデザイン、動画編集、webディレクションやwebマーケティングといったプログラミング以外での役立つコースまであります。

このようなたくさんの選択肢から自分にあったコースを選ぶことがでるのがテックアカデミーです。

コースの期間も短期間でマスターしたり、長期の受講でじっくり取り組むコースを選ぶこともできます。

複数講座のセットコースを利用することで大幅な割引が受けらるので、お得に受講することもできます。

無料体験もありますので、プログラミング学習でオンラインスクールを考えている人はTechAcademyをぜひ利用してみてください。

テックアカデミーの公式サイトはこちら

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

とにかく進め!Pythonプログラミング入門 〜 コードグラフィティ
タイトルとURLをコピーしました