JavaScript - Handling events: Asynchronous Coding(event handler, mouse move event(onmousemove) event object(clientX, clientY properties))

Head First JavaScript Programming
( O'Reilly Media)
Eric T. Freeman (著), Elisabeth Robson (著)

開発環境

OS X Mavericks - Apple(OS)
Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
JavaScript (プログラミング言語)

Head First JavaScript Programming (Eric T. Freeman (著)、 Elisabeth Robson (著)、 O'Reilly Media )のChapter 9(Handling events: Asynchronous Coding)、EXERCISE(p.405)を解いてみる。

EXERCISE(p.405)

coordinates 200, 190

HTML5 (BBEdit, Emacs)

pirates_booty.html

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
 <title>Pirates Booty</title>
 <script src="pirates_booty.js"></script>
</head>
<body>
    <img id="map" src="map.jpg" />
    <p id="coords">Move mouse to find coordinates…</p>
</body>
</html>

コード (BBEdit, Emacs)

pirates_booty.js

var init = function () {
        var msg = document.getElementById('map');
        
        map.onmousemove = showCoords;
    },
    showCoords = function (event_obj) {
        var coords = document.getElementById('coords'),
            x = event_obj.clientX,
            y = event_obj.clientY;
        
        coords.innerHTML = 'Map coordinates: ' + x + ', ' + y;
    };

window.onload = init;

Kamimura's blog

2014年9月5日金曜日

JavaScript - Handling events: Asynchronous Coding(event handler, mouse move event(onmousemove) event object(clientX, clientY properties))

0 コメント:

コメントを投稿