1. 程式人生 > >從零開始的畢設--JavaScript-認識物件

從零開始的畢設--JavaScript-認識物件

資料+行為=物件

物件在一個儲存容器內連結變數與函式。 物件需要建構函式,並且用關鍵字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()

:月份數,由0-11表示 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);
        };
      }