JavaScript - ブラウザを調べる(clientHeight)

Head First JavaScript
頭とからだで覚えるJavaScriptの基本
(オライリージャパン)
Michael Morrison (著) 豊福剛 (翻訳)

開発環境

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

Head First JavaScript ―頭とからだで覚えるJavaScriptの基本( Michael Morrison (著), 豊福剛 (翻訳)、オライリージャパン)の3章(ブラウザを調べる)、自分で考えてみよう(p.103)を解いてみる。

その他参考書籍

自分で考えてみよう(p.103)

コード(BBEdit)

sample.html

<!DOCTYPE html>
<html>
<head>
 <meta charset='utf-8' />
 <title>sample</title>
 <link rel="stylesheet" type="text/css" href="sample.css" />
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js' type='text/JavaScript'>
 </script>
 <script src="sample.js">
 </script>
</head>
<body>
<div id="smile_div">
 <img id="smile_img" src="http://farm8.staticflickr.com/7455/12009424956_d02b583696_o.png" alt="smile" onclick="touchSmile();" /> 
</div>
</body>
</html>

sample.css

#smile_div{
    margin-top: 100px;
    text-align: center;
}
#smile_img{
    cursor:pointer;
}

sample.js

var smile_div,
    smile_img,
    smile = 'http://farm8.staticflickr.com/7455/12009424956_d02b583696_o.png',
    smile_happy = 'http://farm4.staticflickr.com/3799/12008611555_9737b8ac4b_o.png',
    user_name,
    greetUser = function (){
        alert('こんにちは、私は SMILE です。');
    },
    touchSmile = function (){
        if(user_name){
            alert(user_name + 'さん、声をかけてくれてありがとう。');
        } else {
            user_name = prompt('あなたのお名前は？');
            if(user_name){
                alert('はじめまして、' + user_name + 'さん。');
                $('#smile_img').attr('src', smile_happy);
            }
            setTimeout(function () {
                smile_img.attr('src', smile);
            }, 5 * 60 * 1000);
        }
    },
    // 自分で考えてみよう
    resizeSmile = function (){
        $('#smile_img').css('height',
            (document.body.clientHeight - 100) * 0.9 + 'px');
    };

$(document).ready(function (){
    smile_div = $('#smile_div');
    smile_img = $('#smile_img');
    resizeSmile();
    greetUser();
});

完成ページ

Kamimura's blog

ほしい物リスト

2014年1月22日水曜日

JavaScript - ブラウザを調べる(clientHeight)

0 コメント:

コメントを投稿