開発環境
- OS X Yosemite - Apple (OS)
- Safari, Firefox, Google Chrome(Webプラウザ)
- Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
- JavaScript (プログラミング言語)
Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 3(JQuery Events and Functions: Making Things Happen on Your Page)、EXERCISE(No. 1903)を解いてみる。
その他参考書籍
EXERCISE(No. 1903)
JavaScript(BBEdit, Emacs)
sample1903.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jump for Joy</title>
<link rel="stylesheet" href="styles/my_style1903.css">
</head>
<body>
<header>
<h2>Jump for Joy Sale</h2>
</header>
<section id="main">
<div class="guess_box"><img src="images/jump1.jpg" alt="jump1"></div>
<div class="guess_box"><img src="images/jump2.jpg" alt="jump2"></div>
<div class="guess_box"><img src="images/jump3.jpg" alt="jump3"></div>
<div class="guess_box"><img src="images/jump4.jpg" alt="jump4"></div>
<span id="result"></span>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="scripts/my_script1903.js"></script>
</body>
</html>
JavaScript(BBEdit, Emacs)
scripts/my_script1903.js
$(document).ready(function (){
var getRandom = function(num) {
return Math.floor(Math.random() * num);
},
hideCode = function () {
var numRand = getRandom(4);
$('.guess_box').each(function(index, value) {
if (numRand === index) {
$(this).append('<span id="has_discount"></span>');
return false;
}
});
},
checkForCode = function () {
var discount,
my_num;
$('.guess_box').each(function() {
if ($.contains(this, document.getElementById('has_discount'))) {
my_num = getRandom(100);
discount = '<p>Your Discount Code is ' + my_num + '%</p>';
$(this).addClass('discount');
} else {
discount = '<p>Sorry, no discount this time!</p>';
$(this).addClass('no_discount');
}
$(this).unbind('click');
});
$('#result').append(discount);
};
hideCode();
$('.guess_box').click(checkForCode);
$('.guess_box').hover(
function () {
$(this).addClass('my_hover');
},
function () {
$(this).removeClass('my_hover');
});
});
CSS(BBEdit, Emacs)
styles/my_style1903.css
header, section, div{
float:left;
height:245px;
text-align:left;
border: solid #000 3px;
}
header{
width:100%;
border:0px;
height:50px;
}
#main{
background-color:grey;
height: 500px;
}
.guess_box {
height: 245px;
}
.my_hover {
border: solid #00f 3px;
}
.discount{
border: solid #0f0 3px;
}
.no_discount {
border: solid #f00 3px;
}
0 コメント:
コメントを投稿