JavaScriptプログラミング入門講座

イベント処理の実装

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
サイト閲覧者がサイト上のボタンをクリックした時や、画像要素にマウスオーバーした時、他にも、ブラウザがページの読み込みを完了したりした時など、JavaScriptでは、それぞれの出来事(イベント)を検知して、そのタイミングで予め登録しておいた処理を実行させることができます。このレッスンでは、その処理の実装方法について、具体的に解説致します。
講師:
12:58

字幕

このレッスンでは JavaScript で 例えばサイトの利用者が サイト上のボタンをクリックした際などに あらかじめ登録しておいた JavaScript のプログラムを実行する― そういったイベント処理の方法について解説致します まずはダウンロードしてきたファイルの中にある listener と名前の付いた HTML JavaScript ファイル そして CSS ファイルを エディタで開いておいて下さい そしてこの画面が それらのファイルを開いた状態です このファイルは HTML ファイルから 外部化した CSS ファイルと JavaScript ファイルを読み込んでいる状態です こちらの JavaScript ファイルの方には まだ何も書かれていません これらのファイルを使いながら 今回のイベント処理の実装について 解説していきたいと思います では早速レッスンを始めましょう JavaScript でのイベントの 処理ということですが 例えばユーザーがサイト上に あるボタンをクリックしたり また何かの要素の上に マウスオーバーをさせたり 他にもブラウザが そのページの読み込みを完了したりなど― そういったブラウザ上で 起きる様々な出来事に対して あらかじめ作っておいた何かの処理― プログラムですね それを実行させるための仕組みのことを言います さて具体的な実装の解説に入っていく前に 今回サンプルとして作っていく プログラムについて あらかじめ確認しておきたいと思います まずこの HTML ファイル こちらをブラウザで開いてみて下さい こちらのファイルを開くと このように テキストエリアとボタンのあるページが 表示されました 今回このテキストエリアと このボタンを使って ここに何か文字を入力した後に こちらのボタンを押すと このテキストエリアに入力されている 文字数がアラートで表示されるという形で イベントの実装を作っていきます それではエディタにもどります そして JavaScript のファイルを 開いておきましょう それでは実際にプログラムを作っていきましょう まずはボタンをクリックしたときに実行する テキストエリアの中の文字数をカウントする こちらのプログラムから書いていきたいと思います こちらはユーザー定義関数で作っていきます それではまず書いていきます function と書きます そして関数の名前を今回は getTextLength としておきます そして ( ) の { } ; そしてこの { } のところ 何行が空けておきましょう そしてこの中にテキストエリアの文字を取得して その文字の数―文字数を カウントするプログラムを書いていきます まずはテキストエリアの要素の取得です 一度 HTML ファイルに戻って テキストエリアの ID を確認をしておきましょう 今回は textbox と書いてますね では JavaScript に戻り こちらにまず変数を作ります 今回は変数の名前 box としておきましょう そして = (イコール) テキストエリア ID textbox の要素を取得します document.getElementById( ); そしてこちらの getElementById の中に 先程の textbox という ID を指定します こうすることでこの box の変数の中には 先程のテキストエリア― ID textbox こちらの要素ノード HTML の要素が入りました 次にこのテキストエリアに 書かれている文字を取得します 同様に変数を定義して 変数の名前を今回は text としておきます そして = (イコール) そしてテキストエリアは先程の変数 box に格納されているので box.(ドット) そしてテキストエリアの中に書かれている値は value で取ることができますので value と書いて;(セミコロン) そして次にこの文字数ですね 取得してきた内容の文字数をカウントします 同様に変数を作ります そして変数の名前を textNum としておきましょう そして=(イコール) さっき取得してきた textbox の中身― 中身の部分 変数 text に入っているので text と書いて そして.(ドット)書いて 文字数を取得するために length と書きます そして;(セミコロン) これでこの変数 textNum には テキストエリアの中に含まれている 文字の数―文字数が格納されることになりました さて最後にこの取得してきたテキストの文字数 これをアラートダイアログで出してみましょう window.alert(); そしてこの中に変数 textNum を書いて そして+(プラス)と書いて 文字列― この中に「文字」と入れておきましょう こうすることで例えば textNum の値が 10 だった場合は 10 文字という形で アラートダイアログに表示されてくるわけです 以上でこのボタンを押した時に 実行するプログラム テキストエリアの中に入っている 文字数をカウントして それを表示するためのプログラムが このユーザー定義関数 getTextLength の中で実装が完了しました では今回の本題です この getTextLength のプログラム― ボタンを押した時にこのプログラムを 実行するように書いていきたいと思います まずは一度 HTML ファイルに戻って そのボタンの要素を確認しておきましょう HTML ファイルに戻ってこちらのボタンですね

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

5時間18分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年02月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。