本章ではJavascriptでかける様々なイベントや機能について紹介します。
まずは、以下のjavascriptをscriptタグに記載しましょう。
alert('ページが読み込まれました')
ページの再読み込みを押すと、アラートが表示されます。
まずは、以下のjavascriptをscriptタグに記載しましょう。
confirm('ページを読み込みますか？')
すると、「キャンセル」と「OK」ボタンが出てきました。
「OK」を押されたときに、alertを実行したい場合は、以下のようなプログラムで実行できます。
if(confirm('ページを読み込みますか？')){
alert('OKが押されました！')
}
confirmでOKを押すと、confirm関数が”true”を返します。
よって、if文の条件式にconfirmを入れることで、OKが押された時の処理をすることができます。
キャンセルを押したときは、”false”を返します。
まずは、alert機能を実行する関数を定義してみましょう。
function buttonClick(){
alert('クリックされました')
}
buttonClick();
上記の関数は、buttonClickという関数が実行されたときに、alertを表示します。
それでは、上記のjavascriptのコードを以下のように変更して、実行しましょう。
function buttonClick(){
alert('クリックされました')
}
var button1 = document.getElementById('button1')
// クリックイベントを追加
button1.addEventListener('click', buttonClick)
これは、button1の情報にaddEventListenerによって、イベントを追加しています。
以下のように指定することができます。
ノード.addEventListener('イベント名', 関数名)
下記のコードでは、
button1.addEventListener('click', buttonClick)
button1がclickされた際、buttonClick関数を実行するという意味になります。
イベントはclick以外にも以下のようなイベントもあります。
① button2のvalueをコンソールに出力しなさい。
② alertで”button2がクリックされました”と表示する関数を定義しなさい。（関数名は、button2Click）
③ button2がクリックされた時、button2Click関数を呼びなさい。
④ button2クリックが押された時、alertの文字を”pタグの文字”に変更しなさい。
⑤ button2がクリックされた時、alertの文字をpタグ(idがtest)のテキスト情報が出るようにしなさい。
⑥ button2がクリックされた時、pタグのテキストを”ボタンが押されました！”に変更しなさい。
⑦ button2がクリックされた時、textbox1のテキストを取得し、alertに表示しなさい。
⑧ button2がクリックされた時、textbox1のテキストをpタグの値に書き換えなさい。