webページのつくり方 | 学びの道

webページのつくり方、web制作、web作成、学びの道を歩み中!フェリカテクニカルアカデミー「東京・池袋」にてWeb作成を勉強中です。学んだ事をメモしていきます。

JavaScript イベントハンドラ

JavaScript イベントハンドラ

本日は、イベントについて記載したいと思います。

  1. イベントハンドラ

 webページを見ている閲覧者が、クリックをする、マウスを乗せる、ボタンを押す、入力をする、等のアクションを起こした際に、イベントが起こるスイッチの様なものです。

 

例】閲覧者が開くボタンを押すと、地図が開く 

 

f:id:kaoru01-05:20140330055042j:plain

 

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウを開く</title>
<script>
function openWin() { //windowを開く
var win = window.open('', '', 'width=520, height=400'); //windowを幅520 高さ400で開く
  win.document.open();  //documentオブジェクトを開く
  win.document.write('<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1619.4862278799387!2d139.71230443229513!3d35.72689593000951!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188d6830fba123%3A0x26aa4cb874468aea!2zKOagqinjgrjjg6Xjg7Pjgq_loILmm7jlupcg5rGg6KKL5pys5bqX!5e0!3m2!1sja!2sjp!4v1395637499033" width="600" height="450" frameborder="0" style="border:0"></iframe>'); //イメージを表示
  win.document.write('<button onclick="window.close()">閉じる</button>'); //[閉じる]ボタンを表示
  win.document.close(); //documentオブジェクトを閉じる
}
</script>
</head>
<body>
<button name="openBtn" onclick="openWin()">開く</button>
</body>
</html>