Head First javaScript_#9_对象

  最下方有本章例子使用的代码(做一个网上博客)


构造函数负责创建对象

创建对象时,需调用构造函数以初始化对象

创建对象的构造函数,看起来就像调用方法。一定要使用new运算符起始对象的创建,而非仅仅直接调用对象的构造函数。
  var invitation = new Invitation("Somebody","Something","Sometime","Somewhere");

构造函数大部分工作就是创建对象的特性,还有对象的初始值。在构造函数里创建特性时,你需要使用JavaScript的关键字this。this指派对象特性的所有权,同

时设置特性的初始值。
function Invitation(who,what,when,where){   构造函数都采用首字母大写,如图对象名称
   this.who = who;        关键字this区分对象的特性与一般变量
   this.what = what;
   this.when = when;
   this.where = where;
}

  关键字this是于构造函数里创建对象特性的重点.
对象特性的创建和初始化需使用对象标注(点运算符)和关键字this。没有this,构造函数不会知道你正在创建对象特征
但只有用了new才算是创建出对象。
到底是new运算符创建对象还是用构造函数创建对象?
都是!new运算符负责设定对象的创建,它的工作在与确定了调用构造函数。仅像调用函数般调用构造函数,而未使用new运算符,并不会创建对象;只使用

new运算符,而没有构造函数,也不会有任何意义。

this是个JavaScript的关键字,用于引用对象。this从对象内部引用同一个对象
@标准的JavaScript Data 对象,以毫秒表达瞬间
@Date对象具有一些访问各部分时间值得方法
@Date对象聪明到能够对日期做四则运算,还有比较日期。
@与大部分对象相同(String 对象除外),Date对象需以new运算符创建。

每个JavaScript对象都具有toString()方法,它试图为对象提供文本字符串版的表达方式。
toString()方法的棘手之处在于它会主动冒出来工作。若对象的运作上下文期待字符串的出现,toString()方法即自动为对象加上格式。


Date对象不止支持这3个方法{
        getMonth()
        getDate()
        getFullYear()
}
注意Date的方法返回的值
getMonth()方法返回的月份数,从0(一月)开始,到11(十二月)为止,但getDate()方法返回的天数却是从1到31.

数组时对象,数组不只拥有length特性,还有其他根据数组数据而行动,为数据带来生命的方法。又一个叫sort()。可为数组里的数据排列顺序。默认采取由

小排大的升幂顺序。
自定义数组排序方式
排序行为可由比较函数决定。sort()调用比较函数,用于比较数组中各个等着排序的元素。自己提供比较函数,即可调整排序方式。
function compare(x,y){

  return x-y;
}

利用函数字面量,排序变得简单
compare()的用途使它成为函数字面量的理想候补。事实上,若把compare()转换成函数字面量,直接传入sort()方法

blog.sort(function(blog1,blog2){  
    return blog2.date - blog1.date;});

字符串是个可以搜索的对象
有个方法可以搜索字符串里的文本片段。字符串里的字符串有时候被称为子字符串。

String
        length 字符串里的字符数量
        indexOf() 寻找字符串是否包含特定子字符串
        charAt()  寻找特定字符在字符串里的位置
        toLowerCase(),toUpperCase() 转换字符串为小写或大写

搜索字符串内部:indexOf()
indexOf()方法,可在String对象里搜素一段文本,或称子字符串。以子字符串作为自变量,传给indexOf()方法---因为你在String对象里调用这个方法,故

无需传入其他数据。indexOf()方法返回子字符串位置的索引值,或于找不到匹配子字符串时返回-1.
   var str = "Got the new cube I odered.It's a real pearl.";
  alert(str.indexOf("new"));

配合例子,为博客添加搜索功能:
<input type="button" id="search" value="Search the Blog" onclick="searchBlog();"/>
   <input type="text" id="searchtext" name="searchtext" value="" />

function searchBlog(){
      var searchText = document.getElementById("searchtext").value;
      for(var i=0;i<blog.length;i++){
          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;
          }
        
    }
    if(i ==  blog.length)
        alert("sorry, there are no blog entries containing the search text.");
}

@toString方法用于转换任何对象为文本表达形式
@数组和字符串事实上都是对象,依靠JavaScript的标准对象Array和String提供方法与数据的存储。
@Array对象的sort()方法能依任何顺序排列数组
@String对象的indexOf()方法在字符串内搜索另一个字符串,返回搜索目标的索引位置。


Math对象是个organizational object
为了给博客加上随机功能,我们需要产生随机数的方式。这项工作关系到某个使用JavaScript的内置对象。
Math对象是产生随机数的地方,而且它是个很独特的对象,没有回改变的数据,也没有作用于内部数据的方法、
{
  PI 常量3.14
  round()把浮点数四舍五入为整数
  floor() 把浮点数无条件舍去为整数
  ceil() 把浮点数无条件进位为整数
  random()产生介于0与1间的随机数
}
Math 对象是个组织对象。它只是数学相关的公用方法与常量的集合。Math对象中没有变量,意即这个对象没有状态---不能用于存储任何事物。它唯一包含的

数据只是几个常量;

使用Math.random产生随机数
var oneTosix = Math.floor(Math.random() * 6);      (0-5)
var oneTosix = Math.floor(Math.random() * 6) + 1;    (1-6)
使用Math 对象前不需要先创建这个对象
 既然Math对象并未事件包含可以使用的数据,所以不需要创建对象。Math对象只是静态方法和常量的集合,进入Math对象里的所有事物均已存在--没有创建任

何事物的需要。

this.toString = function(){  toString()方法返回字符串格式的博客日志。
   return "[" + (this.date.getMonth() +1)+ "/" +this.date.getDate() + "/" + this.date.getFullYear() + "]" + this.body;
};




此处贴上代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<script type="text/javascript">

    function Blog(body,date){
          this.body = body;
          this.date = date;
    }
    
    var blog = [ new Blog("this is my first blog",new Date("08/14/2017")),
    new Blog("today,I have study a lot ...",new Date("08/19/2017")),
    new Blog("do you have any happy?",new Date("08/16/2017")),
    new Blog("aha,It's beatiful!",new Date("08/21/2017"))];
    
    function showBlog(numEntries){
       if(!numEntries)
           numEntries = blog.length;
           
           
           blog.sort(function(blog1,blog2){
        return blog2.date - blog1.date;
    });//用函数字面量因为这个函数只用一次就行了。
    
        var i=0,blogText = "";
        while(i < blog.length && i < numEntries){
            if( i%2 == 0)
            blogText +="<p style='background-color:#EEEEEE'>";
            
            else
              blogText += "</p>";
              
              //blogText +="<strong>" + blog[i].date +"</strong><br />" + blog[i].body + "</p>";
              blogText +="<strong>"+(blog[i].date.getMonth()+1) + "/" +blog[i].date.getDate() + "/" +blog[i].date.getFullYear()+ "</strong><br/>" + blog[i].body+"</p>";
                i++;
        
    }
    
    document.getElementById("blog").innerHTML = blogText;    
}
    
    function searchBlog(){
      var searchText = document.getElementById("searchtext").value;
      for(var i=0;i<blog.length;i++){
          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;
          }
        
    }
    if(i ==  blog.length)
        alert("sorry, there are no blog entries containing the search text.");
}

function randomBlog(){
      var i= Math.floor(Math.random() * blog.length);
      alert("[" + (blog[i].date.getMonth() +1)+ "/" +blog[i].date.getDate() + "/" + blog[i].date.getFullYear() + "]" + blog[i].body);
}
                    
</script>
</head>

<body onLoad="showBlog(5);">
   <h3>YouCube - This Blog for Cube Puzzlers</h3>
   <img src="images/dog.jpg" alt="YouCube" />
   <div id="blog"></div>
   <input type="button" id="showall" value="show All Blog Entries" onClick="showBlog();"/>
   <input type="button" id="search" value="Search the Blog" onclick="searchBlog();"/>
   <input type="text" id="searchtext" name="searchtext" value="" />
</body>
</html>


猜你喜欢

转载自blog.csdn.net/lp15203883326/article/details/76595306