從零開始的畢設--JavaScript-認識物件
阿新 • • 發佈:2018-12-13
資料+行為=物件
物件在一個儲存容器內連結變數與函式。 物件需要建構函式,並且用關鍵字new建立物件:
function Blog(body, date) {
// Assign the properties
this.body = body;
this.date = date;
}
var blog = [ new Blog("Got the new cube I ordered. It's a real pearl.", new Date("08/14/2008")),
new Blog("Solved the new cube but of course, now I'm bored and shopping for a new one." , new Date("08/19/2008")),
new Blog("Managed to get a headache toiling over the new cube. Gotta nap.", new Date("08/16/2008")),
new Blog("Found a 7x7x7 cube for sale online. Yikes! That one could be a beast.", new Date("08/21/2008")) ];
使用方法:(因為有了建構函式,所以我們可以直觀的看出它有哪些成員變數)
// Generate the formatted blog HTML code
blogText += "<strong>" + (blog[i].date.getMonth() + 1) + "/" +
blog[i].date.getDate() + "/" +
blog[i].date.getFullYear() + "</strong><br />" +
blog[i].body + "</p>";
Date物件
Date提供了以下的方法:
getMonth()
getDate
:一個月的天數,由1-31表示
getFullYear()
:完整的四位整數年份
var now = new Date()
var now=new Date("08/14/2008")
計算時間:
function getDaysBetween(date1,date2){
var days=(date2-date1)/(1000*60*60*24);
return Math.round(days);
}
由程式碼可知,date是以毫秒計數的。 物件轉換為文字 如果直接使用Date物件預設的toString(),輸出是這樣的:The Aug 14 2008 00:00:00 GMT-0500(CDT) 所以,我們要轉化為方便我們理解的文字格式:
blogText += "<strong>" + (blog[i].date.getMonth() + 1) + "/" +
blog[i].date.getDate() + "/" +
blog[i].date.getFullYear() + "</strong><br />" +
blog[i].body + "</p>";
Date把排序變簡單
陣列Array有個方法叫sort()
,當然如果只靠陣列的sort還不夠,我們需要一個比較函式決定我們的排序行為。
function compare(x,y){
return x-y;
}
呼叫sort()方法時,把你自定義的compare()函式注射到陣列排序的等式裡: nums.sort(compare); 利用函式字面量,使得排序變得簡單:
blog.sort(function(blog1,blog2){
return blog2.date-blog1.date;
});
陣列Array以及String
字串是一個可以搜尋的物件,它有以下方法:
length
屬性:字串長度
indexOf()
:查詢子串起始位置
charAt()
:查詢字元位置
toLowerCase()
:轉換為小寫
toUpperCase()
:轉換為大寫
現在我們試著來搜尋匹配文字。
搜尋字串內部:indexOf()
for (var i = 0; i < blog.length; i++) {
// See if the blog entry contains the search text
if (blog[i].body.toLowerCase().indexOf(searchText.toLowerCase()) != -1) {
alert("[" + (blog[i].date.getMonth() + 1) + "/" + blog[i].date.getDate() + "/" +
blog[i].date.getFullYear() + "] " + blog[i].body);
break;
}
}
Math物件
Math物件包括瞭如下的方法和屬性:
PI
屬性:π值-3.14
round()
:四捨五入
floor()
:向下取整
ceil()
:向上取整
random()
:0-1之間的隨機數
產生1-6的隨機數:
var oneToSix=Math.floor(Math.random()*6)+1;
函式轉變為方法
在建構函式裡,寫上this.方法名即可,如下:
function Blog(body, date) {
// Assign the properties
this.body = body;
this.date = date;
// Return a string representation of the blog entry
this.toString = function() {
return "[" + (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" +
this.date.getFullYear() + "] " + this.body;
};
// Return a formatted HTML representation of the blog entry
this.toHTML = function(highlight) {
// Use a gray background as a highlight, if specified
var blogHTML = "";
blogHTML += highlight ? "<p style='background-color:#EEEEEE'>" : "<p>";
// Generate the formatted blog HTML code
blogHTML += "<strong>" + (this.date.getMonth() + 1) + "/" + this.date.getDate() + "/" +
this.date.getFullYear() + "</strong><br />" + this.body + "</p>";
return blogHTML;
};
// See if the blog body contains a string of text
this.containsText = function(text) {
return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1);
};
}