Wikibooks

「JavaScript/イベント処理」の版間の差分

履歴の双方向閲覧
← 古い編集次の差分 →
削除された内容 追加された内容
ビジュアルウィキテキスト
32to (トーク | 投稿記録)
6 回編集
関連項目を追加
Ef3 (トーク | 投稿記録)
7,151 回編集
DOMの文脈に書き換えるべき？
1 行
{{stub}}
 
== 原理概要 ==
Webページにおいて、ユーザーの
Webページにおいて、ユーザーが「マウスで画面のボタンを押した」とか、画面をスクロールした、とか、ともかく何らかのアクションをユーザーした際のイベント処理を宣言するには、
* マウスで画面上のボタンを押す
* 画面をスクロールする
等のアクションをユーザーしたの操作を JavaScript からイベントとして処理できる。
 
;'''コード例'''▼
JavaScriptで記述する。
<syntaxhighlight lang="JavaScripthtml5">▼
 
▲;コード例
▲<syntaxhighlight lang="JavaScript">
<!DOCTYPE html>
<html lang="ja">
14 ⟶ 15行目:
<title>サンプル</title>
<script>
function kansuubuttonClick(){
window.alert("ボタンがクリックされました。")
};
20 ⟶ 21行目:
</head>
<body>
<input type="button" onclick="kansuubuttonClick()" >
</body>
</html>
</syntaxhighlight>
 
 
== 応用例 ==
HTMLの入力ボックスに何かをへの入力したもイベントとかも、してJavaScriptで制御できる。
 
たとえば、よく何かの登録画面において、テキスト入力ボックスに入力された文字が空白の場合には、「登録」ボタンを押せなくなくするプログラムなら、には下記のようになる。
 
ユーザー登録を例にしよう。
 
;'''コード例'''
<syntaxhighlight lang="JavaScripthtml5">
<form action="catchTest.php" method="post" onload="funcChange()" >
ユーザー名を登録: <input type="text" name="username" id="textbox1" onchange="funcChange()" onkeyup="funcChange()" >
<input type="submit" value="登録" id="button1" onchange="funcChange()" onkeyup="funcChange()" >
 
</form>
 
<script type="text/javascript" >
// 起動直後に空白だったら、最初は登録ボタンを無効にする。
if ( document.getElementById("textbox1").value == "" ) {
document.getElementById("button1").disabled = true;
49 ⟶ 48行目:
// テキスト入力のたびに判定。テキスト文字が何かあれば、登録ボタンを無効にする処理。
function funcChange(){
if document.getElementById("button1").disabled = (document.getElementById("textbox1").value == "" ) {;
document.getElementById("button1").disabled = true;
}
if ( document.getElementById("textbox1").value != "" ) {
document.getElementById("button1").disabled = false;
}
}
</script>
</syntaxhighlight>
 
;'''解説'''▼
まず、HTML側での onchange プロパティ属性 (onChange) で、何か変更があったごとに起動する関数を指定できる。ただし、このonchangeプロパティ属性は、テキスト入力ボックスの入力の場合には、入力後にそのテキストボックスからマウスカーソルが外れてからでないと反応しないので、これだけではあまり実用的ではない。▼
 
なので、さらに onkeyup プロパティ (onKeyUP)という、何かキーボードのボタンが押されて持ち上げられた場合に起動するイベント処理のプロパティに関する属性を使う。▼
▲;解説
▲まず、HTML側で onchange プロパティ (onChange) で、何か変更があったごとに起動する関数を指定できる。ただし、このonchangeプロパティは、テキスト入力ボックスの入力の場合には、入力後にそのテキストボックスからマウスカーソルが外れてからでないと反応しないので、これだけではあまり実用的ではない。
 
 
▲なので、さらに onkeyup プロパティ (onKeyUP)という、何かキーボードのボタンが押されて持ち上げられた場合に起動するイベント処理のプロパティを使う。
 
 
書式は
72 ⟶ 62行目:
である。(onchangeも同様)
 
JavaScript で関数を定義する場合は、型名予約語「function」を忘れないようにしよう。▼
 
よくあるミスで、初心者は、C言語などJavaScript以外の他言語の癖で、型名予約後「function」を忘れることがある。▼
 
▲JavaScript で関数を定義する場合は、型名「function」を忘れないようにしよう。
 
▲よくあるミスで、初心者は、C言語などJavaScript以外の他言語の癖で、型名「function」を忘れることがある。
 
 
さて、
onload="funcChange()"
というのは、「先JavaScriptで操作出来るようにブラウザが funcChange() なってから関数を読呼び出す仕組み込んでから、あとから、このonloadプロパティのあるタグ要素（上記コード例ではform）をへの操作が可能になり次第 funcChange() が実行しなさい」という命令れる。
 
 
document.getElementById("button1") は、HTML文書の中から "button1" を id とする要素を探し Element オブジェクトとして返す。
document.getElementById("button1") は、Id「button1」への命令の指令で、つづくプロパティ「.disabled」によって無効化することによって、ボタンとして機能しなくなる。（また、ブラウザがディスプレイ上で、自動的にdisabledされた対象物の色をうすくしてくれるので、無効化された事がユーザー視点でも分かる。）
Element オブジェクトは JavaScript で操作するためのオブジェクトで、この場合は Element オブジェクト の disabled プロパティを true を代入すると要素は無効になり、falsee を代入すると要素は有効になります。
 
form タグ要素はHTMLのタグ要素の一種。わからなければwikibooks『form要素の詳細については[[HTML/フォーム]]』を読め参照。▼
 
▲form タグはHTMLのタグの一種。わからなければwikibooks『[[HTML/フォーム]]』を読め。
== 関連項目 ==
[[HTML　ラベル]]:HTMLとの連携でラベルのイベント
"https://ja.wikibooks.org/wiki/JavaScript/イベント処理" より作成