ccc
こんにちわ！東京都内でサラリーマンをしているAI・育児ブロガーのCCCです。 AI(人工知能)と子育てに関する記事を執筆しています。 WebシステムをベースとしたAIを活用することで生活をより便利にする方法を紹介し、育児について衣食住における役立つグッズや情報を配信しています。
JavaScriptにおけるイベント処理の使い方を教えてください。
ccc
JavaScriptはクライアント側で実行されるオブジェクト指向型のスクリプト言語です。主にブラウザ上で実行され、ユーザのアクションに応じて動的にWebページの内容を書き換えたり、フォームに入力された内容をチェックしたりといったことがクライアント側で実現できます。また、Ajaxという仕組みを利用することで、Webサーバーとブラウザとの間で非同期通信を行えるので、ページを切り替えることなくページの内容を書き換えることができます。Web系AIとJavaScriptの親和性はピカイチで、AIをWebブラウザから使うためのライブラリが公開されています。
ccc
今回はJavaScriptの使い方として、JavaScriptにおけるイベント処理の使い方をサンプルを用いて解説します。
ページ読み込み時の処理
ページ読み込み時にJavaScriptで処理を行いたい場合、<body>タグのonLoad属性に呼び出す関数を記述します。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(){
document.write("Hello World from JavaScript");
}
</script>
</head>
<body onLoad="test();">
</body>
</html>ボタンやリンクをクリックしたときの処理
ボタンやリンクをクリックしたときにJavaScriptで処理を行いたい場合、要素タグのonClick属性に呼び出す関数を記述します。
引数に”this”を指定すると、オブジェクトとして関数に要素が渡されます(参照渡し)。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(temp){
temp.value="クリックされました";
}
</script>
</head>
<body>
<input type="button" value="クリックしてちょ" onClick="test(this);">
</body>
</html>選択リストやラジオボタンを変更したときの処理
選択リストやラジオボタンを変更したときにJavaScriptで処理を行いたい場合、要素タグのonChange属性に呼び出す関数を記述します。
selectedIndexプロパティで現在選択されているインデックスを取得できます。
<html>
<head>
<meta charset="UTF-8">
<script>
function test(temp){
index=temp.selectedIndex;
temp2=temp.options[index].value;
document.write(temp2+"が選択されました");
}
</script>
</head>
<body>
<select onChange="test(this);">
<option value="">選択してちょ</option>
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
</body>
</html>