Head first javascript(七)
object
javascript也是面向对象的语言,与其他的面向对象语言例如C++类似。每个对象包含的变量称为property,函数则成为method。
constructor
构造函数也与c++类似,this表示对象本身
function Blog(who, what, when, where){ this.who = who; ... }
声明对象的时候用new:
var blogEntry = new Blog(...);
创建一个Blog对象
<html> <head> <title>YouCube - The Blog for Cube Puzzlers</title> <script type="text/javascript"> // Blog object constructor function Blog(body, date) { // Assign the properties this.body = body; this.date = date; } // Global array of blog entries var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", "08/14/2008"), new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one.", "08/19/2008"), new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", "08/16/2008"), new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", "08/21/2008") ]; // Show the list of blog entries function showBlog(numEntries) { // Adjust the number of entries to show the full blog, if necessary if (!numEntries) numEntries = blog.length; // Show the blog entries var i = 0, blogText = ""; while (i < blog.length && i < numEntries) { // Use a gray background for every other blog entry if (i % 2 == 0) blogText += "<p style='background-color:#EEEEEE'>"; else blogText += "<p>"; // Generate the formatted blog HTML code blogText += "<strong>" + blog[i].date + "</strong><br />" + blog[i].body + "</p>"; i++; } // Set the blog HTML code on the page document.getElementById("blog").innerHTML = blogText; } </script> </head> <body onload="showBlog(5);"> <h3>YouCube - The Blog for Cube Puzzlers</h3> <img src="cube.png" alt="YouCube" /> <div id="blog"></div> <input type="button" id="showall" value="Show All Blog Entries" onclick="showBlog();" /> </body> </html>
很明显上面代码创建了4个Blog对象,直接用了innerHTML的方式修改<div>里面的内容。上面的博客内容只是简单排列,下面增加一个按照日期排序显示的功能,由于上面的日期只是字符串的形式,为了排序需要转化为更加具体的时间,需要用到一些自带的函数:
- setMonth()
- setYear()
- getDate()
- getDay()
- getFullYear()
为了比较两个日期的大小,加入以下函数:
function getDaysBetween(date1, date2){ var daysBetween = (date2 - date1) / (1000 * 60 * 60 * 24);//毫秒转化为天 return Math.round(daysBetween); }
Date
在构建Blog对象的时候,日期的输入格式是字符串,我们可以用自带的Date()函数创建日期对象作为输入参数:
var blog = [ new Blog('...', new Date('08/14/2008')), ... ];
toString()
toString()函数可以把一个对象变成字符串的表示
var blogDate = new Date('08/08/2008'); alert(blogDate.toString());
sort
数组对象本身也提供了排序的函数,可以给sort一个比较函数的参数来设置排序的方式:
function compare(x, y){ return x - y; } nums.sort(compare);
如果x < y,compare返回负值,排序后x会在y的前面。日期大的博客要显示在前面,比较函数比较简单可以不用给它命名,类似于python的匿名函数:
blog.sort(function(blog1, blog2){ return blog2.date - blog1.date; });
indexOf() : 在字符串中搜索子字符串,返回子字符串首字母出现的下标位置
var str = 'i love this game'; alert(str.indexOf('love'); > 2
还有一些用于字符串搜索的函数:
- charAt() : 搜索单个字符的位置
- toLowerCase()
- toUpperCase()
Math
Math对象包含一些常用的数学函数,包括常数PI,产生随机数等
- PI
- round()
- floor()
- ceil()
- random() : 0 ~ 1内的随机小数
Object Oriented
javascript是面向对象的语言,处理数据一般可以把数据封装在对象里面,如果和对象里面的某些数据的处理联系紧密的功能则可以成为对象的一个method,这样做不仅可以使数据的处理逻辑更加鲜明,也简化了代码和增加了代码的复用。