JavaScript - Handling events: Asynchronous Coding(event handler, mouse over(onmouseover), mouse out(onmouseout))

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.414)を解いてみる。

EXERCISE(p.414)

HTML5 (BBEdit, Emacs)

image_guess.html

<!DOCTYPE html>
<head>
 <meta charset="utf-8" />
 <title>Image Guess</title>
 <script src="image_guess.js"></script>
 <link type="css/text" href="image_guess.css" rel="stylesheet">
</head>
<body>
    <img id="zero" src="zeroblur.jpg">
    <img id="one" src="oneblur.jpg">
    <img id="two" src="twoblur.jpg">
    <img id="three" src="threeblur.jpg">
    <img id="four" src="fourblur.jpg">
    <img id="five" src="fiveblur.jpg">
</body>
</html>

Cascading Style Sheets(CSS)(BBEdit, Emacs)

image_guess.css

body {
    margin: 20px;;
}
img {
    margin: 20px;
}

コード (BBEdit, Emacs)

image_guess.js

var init = function () {
        var images = document.getElementsByTagName('img'),
            i,
            max;
        
        for (i = 0, max = images.length; i < max; i += 1) {
            images[i].onmouseover = showAnswer;
            images[i].onmouseout = reblur;
        }
    },
    showAnswer = function (event_obj) {
        var image = event_obj.target,
            name = image.id;
            
        name += '.jpg';
        image.src = name;
    },
    reblur = function (event_obj) {
        var image = event_obj.target,
            name = image.id;
        
        name += 'blur.jpg';
        image.src = name;
    };

window.onload = init;

Kamimura's blog

2014年9月6日土曜日

JavaScript - Handling events: Asynchronous Coding(event handler, mouse over(onmouseover), mouse out(onmouseout))

0 コメント:

コメントを投稿