Skip to content

Commit c42f7d9

Browse files
huang303513huang303513
committed
第十章代码
1 parent b203744 commit c42f7d9

File tree

5 files changed

+114
-0
lines changed

5 files changed

+114
-0
lines changed

‎Head First Javascript学习代码/chapter10/youcube/cube.png

22.1 KB
Loading

‎Head First Javascript学习代码/chapter10/youcube/cube777.png

24.4 KB
Loading

‎Head First Javascript学习代码/chapter10/youcube/youcube.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>类、类方法、类变量、实例方法、实例变量</title>
6+
7+
<script type="text/javascript" src="youcube.js"></script>
8+
</head>
9+
<body>
10+
<h3>YouCube - The Blog for Cube Puzzlers</h3>
11+
<img src="cube.png" alt="YouCube" />
12+
<input type="button" id="search" value="Search the Blog" onclick="searchBlog();" />
13+
<input type="text" id="searchtext" name="searchtext" value="" />
14+
<div id="blog"></div>
15+
<input type="button" id="showall" value="Show All Blog Entries" onclick="showBlog();" />
16+
<input type="button" id="viewrandom" value="View a Random Blog Entry" onclick="randomBlog();" />
17+
</body>
18+
</html>

‎Head First Javascript学习代码/chapter10/youcube/youcube.js

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
//Date类扩展一个类方法
2+
Date.prototype.shortFormat = function() {
3+
return (this.getMonth() + 1) + "/" + this.getDate() + "/" + this.getFullYear();
4+
5+
};
6+
7+
//Blog类的初始化方法
8+
function Blog (body, date, image) {
9+
this.body = body;
10+
this.date = date;
11+
this.image = image;
12+
}
13+
//Blog类的实例方法，所有实例对象都只有这么一份
14+
Blog.prototype.toString = function(){
15+
return "[" + this.date.shortFormat() + "]" + this.body;
16+
};
17+
Blog.prototype.toHTML = function(highlight) {
18+
var blogHTML = "";
19+
blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";
20+
//blog对象是否有image元素
21+
if (this.image) {
22+
blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br /><table><tr><td><img src='" +
23+
this.image + "'/></td><td style='vertical-align:top'>" + this.body + "</td></tr></table><em>" +
24+
this.signature + "</em></p>";
25+
}
26+
else {
27+
blogHTML += "<strong>" + this.date.shortFormat() + "</strong><br />" + this.body +
28+
"<br /><em>" + this.signature + "</em></p>";
29+
}
30+
return blogHTML;
31+
};
32+
Blog.prototype.containsText = function(text){
33+
return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
34+
};
35+
36+
//添加一个类属性,所有的Blog对象分享一份。
37+
Blog.prototype.signature = "签名：黄成都你还";
38+
39+
//类方法。这个方法只有Blog类可以调用。Blog类的对象也不可以调用，而且不能访问Blog的成员属性
40+
Blog.blogSorter = function(blog1, blog2){
41+
return blog2.date - blog1.date;
42+
};
43+
44+
45+
var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
46+
new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", new Date("08/19/2008")),
47+
new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),
48+
new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008")),
49+
new Blog("Met up with some fellow cubers to discuss the prospect of a 7x7x7 cube. Mixed feelings.", new Date("08/29/2008")),
50+
new Blog("Went ahead and ordered the scary 7x7x7 cube. Starting a mental exercise regimen to prepare.", new Date("09/01/2008")),
51+
new Blog("Attended a rally outside of a local toy store that stopped carrying cube puzzles. Power to the puzzlers!", new Date("09/03/2008")),
52+
new Blog("Got the new 7x7x7 cube. Could be my last blog post for a while...", new Date("09/05/2008")),
53+
new Blog("Wow, it took me a couple of weeks but the new cube is finally solved!", new Date("09/19/2008"), "cube777.png") ];
54+
55+
// Show the list of blog entries
56+
function showBlog(numEntries) {
57+
// First sort the blog
58+
blog.sort(Blog.blogSorter);
59+
60+
// Adjust the number of entries to show the full blog, if necessary
61+
if (!numEntries)
62+
numEntries = blog.length;
63+
64+
// Show the blog entries
65+
var i = 0, blogListHTML = "";
66+
while (i < blog.length && i < numEntries) {
67+
blogListHTML += blog[i].toHTML(i % 2 == 0);
68+
i++;
69+
}
70+
71+
// Set the blog HTML code on the page
72+
document.getElementById("blog").innerHTML = blogListHTML;
73+
}
74+
75+
// Search the list of blog entries for a piece of text
76+
function searchBlog() {
77+
var searchText = document.getElementById("searchtext").value;
78+
for (var i = 0; i < blog.length; i++) {
79+
// See if the blog entry contains the search text
80+
if (blog[i].containsText(searchText)) {
81+
alert(blog[i]);
82+
break;
83+
}
84+
}
85+
86+
// If the search text wasn't found, display a message
87+
if (i == blog.length)
88+
alert("Sorry, there are no blog entries containing the search text.");
89+
}
90+
// Display a randomly chosen blog entry
91+
function randomBlog() {
92+
// Pick a random number between 0 and blog.length - 1
93+
var i = Math.floor(Math.random() * blog.length);
94+
alert(blog[i]);
95+
}

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,3 +47,4 @@
4747

4848
第九章：JS对象的介绍、使用、Date与string对象的相互转换。数组排序、面向对象编程。string的搜索等用法。
4949

50+
第十章：实例属性实例方法、变量属性变量方法、通过prototype关键字在设置和扩展实例属性实例方法。类方法只能类访问而且可以方法实例属性但是不能访问变量属性。具体看代码。

0 commit comments

Comments
 (0)