第五天 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);
//比较数值，返回true
document.write(a === b);
//全等于先比较类型，a类型是number，b类型是object,所以false
document.write(new Number(12) == new Number(12));
//这是两个不同的对象，所以false
document.write(new Number(12) === new Number(12));
//同上，false
document.write(new Number(12).valueOf() == new Number(12).valueOf());
//比较两个对象的值，都是12，所以true
document.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);
//对象比较，false
document.write(b.valueOf() == c.valueOf());
//值比较，true
document.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);
//上取整，13
Math.floor(12.34);
//下取整，12
Math.round(12.54);
//四舍五入，13
Math.round(12.35);
//12
Math.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);//指定长度
//每一项的默认值是undefined
var 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，并赋初值为null
bill.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>