第五天 Javascript面向对象和一些常用对象

万物皆对象，在Js中所有事物都是对象：字符串、数字、数组、日期，等等。它们都有自己的属性和方法。
属性就是一个事物是什么，有哪些特征，用变量表示。比如桌子，材料是木头，名字叫桌子一号，那么就可以设置material=”木头”,name=”桌子一号”这两个属性。方法就是一个事物能干什么，用函数表示。比如鸟会飞，飞这个动作就是它的一个方法，可以 function fly(){} 这样定义，调用 鸟.fly() 这只鸟就飞了。

---

Js自定义对象

无参构造函数

function Person() {    //定义了一个Person类，和函数声明一样都是使用fuction关键字}var person = new Person();//使用new关键字生成一个Person对象person.name = "jack";person.age = 23;//定义属性person.work = function() {    window.document.write("在工作<br/>");};//定义方法window.document.write(person.constructor + "<br/>");window.document.write(person.name + "," + person.age + "<br/>");person.work();//调用这个person对象的属性和方法

有参构造函数

function Person(name, age) {    this.name = name;    this.age = age;    this.work = function() {        alert(this.name + ":" + this.age);    }    //this关键字指代类本身}var person = new Person("jack", 28);person.work();//需要传对应的参数才能创建对象

Object方式

var person = new Object();person.name = "jack";person.age = 28;person.sayHello = function() {    document.write(this.name + ":" + this.age);}person.sayHello();//不声明类，而是直接用Object类来生成对象//缺点是不能复用

---

Js基本数据类型包装类

Js提供了3个特殊的引用类型：Boolean,Number,String。
当读取基本数据类型时，后台就会创建一个对应的基本包装类对象。
我们在操作基本数据类型时，可以直接调用一些方法。

Boolean

var a = false;var a1 = new Boolean(false);//第二种方式是采用生成对象的方法创建一个Boolean对象，但明显第一种方式会简洁些，两者功能上并无区别，因为采用第一种方式时后台已经帮我们包装成一个对象了。document.write(a.constructor + "<br/>");//会输出a的构造器代码document.write(a.toString() + "<br/>");//会把a转换成String输出，也就是"false"document.write(a.valueOf() + "<br/>");//返回a的原始值if (a.valueOf()) {    document.write("条件成立<br/>");} else {    document.write("条件不成立<br/>");}

Number

Number的比较

var a = 12;var b = new Number(12);//创建number对象document.write(a == b);//比较数值，返回truedocument.write(a === b);//全等于先比较类型，a类型是number，b类型是object,所以falsedocument.write(new Number(12) == new Number(12));//这是两个不同的对象，所以falsedocument.write(new Number(12) === new Number(12));//同上，falsedocument.write(new Number(12).valueOf() == new Number(12).valueOf());//比较两个对象的值，都是12，所以truedocument.write(new Number(12).valueOf() === new Number(12).valueOf());//同上，true

属性和方法

最大值：Number.MAX_VALUE
最小值：Number.MIN_VALUE
方法：
toString()转字符串
toString(x)转字符串，不过数字会转为x进制表示
toFixed()保留整数
toFixed(x)保留x位小数

String

//通过构造函数创建String 对象var b = new String("java");var c = new String("java");document.write(b + "," + c);document.write(b == c);//对象比较，falsedocument.write(b.valueOf() == c.valueOf());//值比较，truedocument.write(a.length);//获得a的长度

常见的方法：
Anchor() 添加锚点，用于页面内跳转
Blink() 为元素添加blink标签，只有火狐浏览器支持，文字会闪烁
charAt() 返回字符串指定索引位置处的字符。
charCodeAt() 返回一个整数，代表指定位置上字符的 Unicode 编码。
Concat() 返回字符串值，该值包含了两个或更多个提供的字符串的连接。
Fontcolor() 把带有 color属性的 <font> 标签放置在字符串两端
indexOf() 返回 String 对象内第一次出现子字符串的字符位置
italics() 把 HTML <i> 标签放置在字符串两端
Link() 把一个有href 属性的 HTML 锚点放置在字符串两端
Replace() 返回根据正则表达式进行文字替换后的字符串的副本
Split() 切割
Substr() 截取子串
toUpperCase() 转大写
toLowerCase 转小写

---

Js常用对象

Math

Math.ceil(12.34);//上取整，13Math.floor(12.34);//下取整，12Math.round(12.54);//四舍五入，13Math.round(12.35);//12Math.random();//生成0~1中的随机数Math.max(12, 100, -1, 200, 320, 500);//取最大值Math.min(12, 100, -1, 200, 320, 500);//取最小值

Date

function showDate() {    var date = new Date();    //获取系统时间    var str = date.getFullYear() + "年"     + (date.getMonth() + 1) + "月"  //注意月这里要加一     + date.getDate() + "日"      + "星期" + date.getDay() + " "      + date.getHours() + "时"      + date.getMinutes() + "分"      + date.getSeconds() + "秒";    //获取年月日时分秒    document.getElementById("time").innerHTML=str;    //显示在html中    window.setTimeout("showDate()", 1000);    //调用定时函数}//调用函数showDate();

运行结果：
2017年10月23日星期1 11时0分0分11秒

定时函数有两个：
setInterval(代码, 毫秒数) 每经过指定毫秒值后执行指定的代码。
setTimeout(代码, 毫秒数) 经过指定毫秒值后执行指定的代码（只执行一次）。
上面的代码中，使用setTimeout能重复执行更新时间是因为在函数中又调用了setTimeout，形成了递归。

Array

数组定义：

//JS数组可以动态增长var arrs1=new Array();//不指定长度var arrs2=new Array(20);//指定长度//每一项的默认值是undefinedvar arrs3=new Array("hello");//指定元素var arrs4=["aa","bb","cc"];//创建一个包含3个字符串的数组var arrs5=[];//创建一个空数组arrs5[0]="xx";//新增第1项

数组遍历：

for(var i = 0; i < arr.length; i++){    alert(arr[i]);}   //或for(var i in arr){    alert(arr[i]);}//i是遍历出的数组中的索引，从0开始，一直到最大索引。//如果有其他属性，也会遍历出来，其实索引就是数组对象的属性。

常见方法：

• sort()
  对当前数组进行排序，并返回已经进行了排序的此Array对象。
  不会创建新对象，是在指定数组中直接进行排序。
• reverse()
  对当前数组进行反转排序，返回一个元素顺序被反转的 Array 对象。
  不会创建新对象，是在指定数组中直接进行排序。
• push( [item1 [item2 [… [itemN ]]]] )
  将以新元素出现的顺序添加这些元素。
  如果参数之一为数组，那么该数组将作为单个元素添加到数组中。
• pop()
  移除数组中的最后一个元素并返回该元素。
  如果该数组为空，那么将返回 undefined。
• shift()
  移除数组中的第一个元素并返回该元素。
  如果该数组为空，那么将返回 undefined。
• unshift([item1[, item2 [, … [, itemN]]]])
  将指定的元素插入数组开始位置并返回该数组。
• splice(start, deleteCount, [item1[, item2[, … [,itemN]]]])
  移除从 start 位置开始的指定个数的元素，并插入新元素，从而修改
• concat([item1[, item2[, … [, itemN]]]])
  返回一个新数组，这个新数组是由两个或更多数组组合而成的。原数组不变。
  要加的项目（item1 … itemN）会按照从左到右的顺序添加到数组。
  如果某一项为数组，那么添加其内容到 array1 的末尾。
  如果该项目不是数组，就将其作为单个的数组元素添加到数组的末尾。
• slice(start, [end])
  返回一个包含了指定的部分元素的数组。
  将返回索引大于等于start且小于end的一段。
  原数组不变。
• join(separator)
  把所有元素由指定的分隔符分隔开来组成一个字符串，返回这个字符串值。
  如果数组中有元素没有定义或者为 null，将其作为空字符串处理。
  

  ---

prototype(Js原型)

“prototype”翻译成”原型”，是js实现继承的主要手段。
粗略来说就是：prototype是js中的函数(function)的一个保留属性，并且它的值是一个对象（我们可以称这个对象为”prototype对象”）。
原型法的主要思想是，有1个A类,我想要创建一个B类,这个类以A类作为原型,并且能进行扩展。我们称B类的原型为A。

<script type="text/javascript">function employee(name,job,born){this.name=name;this.job=job;this.born=born;}//定义了一个employee类var bill=new employee("Bill Gates","Engineer",1985);//生成了bill对象employee.prototype.salary=null;//为employee的原型类(默认是object类)添加一个属性salary，并赋初值为nullbill.salary=20000;//bill本来没有salary属性的，但经过上一步操作就从原型类中继承到了salary属性document.write(bill.salary);</script>

---

作业

Js实现进度条控制

单击开始按钮进度条开始增加，开始按钮不可再被点击。
单击暂停按钮，进度条暂停，暂停按钮变为继续按钮。
单击继续按钮，进度条继续增加，继续按钮变为暂停按钮。
进度条100%后停止增加，此时所有按钮不可被点击。
代码：

<head>    <title>进度条</title>    <meta charset="utf-8" />    <style type="text/css">        .processcontainer {            width: 450px;            border: 1px solid #6C9C2C;            height: 25px;        }           #processbar {            background: orange;            float: left;            height: 100%;            text-align: center;            line-height: 150%;        }    </style>    <script type="text/javascript">        var bartimer;        var pausebutton;        var startbutton;        window.onload=function(){            pausebutton = document.getElementById("pause");            startbutton = document.getElementById("start");            pausebutton.disabled=true;        }        function start() {            bartimer = window.setInterval(function() {                setProcess();            }, 100);            startbutton.disabled=true;            pausebutton.disabled=false;        }        function pause() {            window.clearInterval(bartimer);            pausebutton.innerText = "继续";            pausebutton.onclick = function(){goon()};        }        function goon() {            start();            pausebutton.innerText = "暂停";            pausebutton.onclick = function(){pause()};;        }        function setProcess() {            var processbar = document.getElementById("processbar");            processbar.style.width = parseInt(processbar.style.width) + 1 + "%";            processbar.innerHTML = processbar.style.width;            if(processbar.style.width == "100%") {                pausebutton.disabled=true;                window.clearInterval(bartimer);            }        }    </script></head><body>    <div class="processcontainer">        <div id="processbar" style="width:0%;"></div>    </div>    <button id="start" onclick="start()">开始</button><button id="pause" onclick="pause()">暂停</button></body>

Js按键控制div块

如图一个div块，用上下左右箭头键控制其移动。
代码：

<head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .block {            position: relative;            background: orange;            width: 100px;            height: 100px;        }    </style>    </head><body>    <div id="block" class="block"></div>        <script>        var block;        window.onload = function() {            block = document.getElementById("block");            block.style.left="100px";            block.style.top="100px";        }        document.onkeydown = function(event) {            var evt = event || window.event || arguments.callee.caller.arguments[0];            if(evt.keyCode) {                //keycode 37 = Left                //keycode 38 = Up                //keycode 39 = Right                //keycode 40 = Down                if(evt.keyCode == 37) {                    block.style.left=block.offsetLeft-20-8+"px";                }                if(evt.keyCode == 38) {                    block.style.top=block.offsetTop-20-8+"px";                }                if(evt.keyCode == 39) {                    block.style.left=block.offsetLeft+20-8+"px";                }                if(evt.keyCode == 40) {                    block.style.top=block.offsetTop+20-8+"px";                }            }        }    </script></body>