1. 认识对象

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型。

1.1 哪些内容是对象

布尔型可以是一个对象
数值型可以是一个对象
字符串可以是一个对象
日期也是一个对象
数学和正则表达式也是对象
数组是一个对象
甚至函数也可以是对象

1.2 访问对象的属性

属性时与对象相关的值，访问对象的方法是objectName.propertyName

var message = "Hello World!";var x = message.length;//这里就访问了一个字符串对象的属性

1.3 访问对象的方法

方法是在对象上执行的动作，访问对象的方法是objectName.methodName()

var message = "Hello World!";var x = message.toUpperCase(); //这里是访问了一个字符串对象的方法

2. 创建 JavaScript 对象

通过 JavaScript，能够定义并创建自己的对象。创建对象有两种方法。

使用 Object 定义并创建对象

使用函数来定义对象，然后创建新的对象实例。

2.1 使用 Object 定义

2.1.1 构造函数定义

//1.以构造函数形式定义var meinv = new Object();//2.添加属性meinv.name='苍';meinv.sex='女';meinv.age=35;//3.添加方法meinv.clean = function(){alert('我在帮你打扫卫生！');}

2.1.2 使用花括号定义

//1.以花括号方式定义 var shuaige = {name: '于谦',sex: '男',age: '50',smoke:function(){alert('正在抽烟');},drink:function(){alert('正在喝酒');},};

2.2 使用对象构造器定义

//定义一个人物对象function person(name,sex,age){this.name = name;this.sex = sex;this.age = age;this.changeName=changeName;function changeName(name){this.name=name;}}//创建一个对象var myFriend = new persion("张三","男","18");//查看属性与使用方法console.log(myFriend.name);console.log(myFriend.changeName('李四'));

3. 常用对象

3.1 字符串对象

//定义一段字符串var str1 = "get busy living, or get busy dying...";var str2 = "要么忙着去生存，要么忙着去死亡";//1.length：获取字符串长度console.log(str1.length); //37console.log(str2.length); //15//2.charAt(): 获取指定位置上的字符【下标从0开始】console.log(str1.charAt(4)); //b//3.indexOf(): 获取指定字符或字符串首次出现的位置console.log(str1.indexOf('u')); //5//4.lastIndexOf(): 获取指定字符或字符串最后一次出现的位置console.log(str2.lastIndexOf('忙着')); //10//5.split(): 按照指定字符或字符串来拆分字符串var str3 = "张三##李四##王五##马六##赵七";console.log(str3.split('##'));

3.2 数学对象

//数学对象常用方法var num1 = 3.67;var num2 = 3.14;var num3 = 3.47;//1.Math.floor()：向下取整console.log(Math.floor(num1)); //3//2.Math.ceil()：向上取整console.log(Math.ceil(num2)); //4//3.Math.round()：四舍五入console.log(Math.round(num3)); //3//4.Math.max()：从一组值中取出最大值console.log(Math.max(3,1,5,3,8,10)); //10//5.Math.min()：从一组值中取出最小值console.log(Math.min(0.1,3,5,10,0.01)); //0.01//6.Math.abs()：求绝对值var num4 = -3.1583;console.log(Math.abs(num4)); //3.1583//7.Math.random()：随机数，随机一个指定范围的数字console.log(Math.random());//0.xxxxxxxxxxconsole.log(rand(100,255));//小案例：随机一个m与n之间的数function rand(m, n){return Math.ceil(Math.random()*(n-m+1))+m-1;}

3.3 日期对象

//1. 数组定义//① 使用 [] 定义var movies = ['肖申克的救赎','阿甘正传','拯救大兵瑞恩','霸王别姬','控方证人'];console.log(movies);//② 使用 new Array() 定义var fruit = new Array('苹果','香蕉','橘子','柚子');console.log(fruit);//2.数组常用属性：length，统计数组当中元素个数console.log(fruit.length);//3.数组元素的增、删、改、查//① 往数组中追加一个元素movies[5] = '怦然心动';console.log(movies);//② 删除数组中的一个元素delete movies[3];console.log(movies); //empty：代表空的意思//③ 修改数组中的一个元素movies[0] = '刺激1995';console.log(movies);//④ 查找数组中的一个元素console.log(movies[2]); //拯救大兵瑞恩//4.遍历数组【将数组中的元素一一取出的过程叫做遍历】//① 使用for循环遍历for(var i=0; i<fruit.length; i++){console.log(fruit[i]);}//② 使用for...in...方式遍历【把数组的下标放到 i 中】for(var i in fruit){document.write(i+'>>>>>'+fruit[i]+'<br/>');}

3.4 数组对象

//定义一个数组var stars = ['张国荣','张学友','梁朝伟','郭富城','黎明','陈百强','谭咏麟'];//1.push：从数组尾部追加一个新的元素进去stars.push('梅艳芳');console.log(stars);//2.pop：从数组尾部删除一个元素stars.pop();console.log(stars);//3.splice：从指定位置，删除指定元素个数stars.splice(4,2);console.log(stars);//4.sort：数组排序 var arr = [10,100,38,20,448,1004];arr.sort(function(a,b){if(a>b){return 1;}else if(a==b){return 0;}else if(a<b){return -1;}});console.log(arr);//5.reverse：数组进行翻转console.log(arr.reverse());//6.join：用特定的分隔符将数组连接成一个字符串console.log(stars.join('=='));//7.concat：将多个数组合并成一个大数组var China = ['天安门','颐和园','圆明园'];var England = ['白金汉宫','泰晤士河','伦敦塔桥'];var America = ['纽约','拉斯维加斯','洛杉矶'];console.log(China.concat(England, America));

3.5 时间对象

//1.获取一个时间对象【可以获取系统时间】var timer = new Date(); //Sat Nov 14 17:11:19 GMT+0800 (中国标准时间)//2.常用方法//① getFullYear()：获取完整年份console.log(timer.getFullYear()); ////② getMonth()：获取月份 - 1console.log(timer.getMonth()); //10//③ getDay()：获取日console.log(timer.getDay()); //6//④ getHours()：获取小时console.log(timer.getHours()); //17//⑤ getMinutes()：获取分钟console.log(timer.getMinutes()); //15//⑥ getSeconds()：获取秒console.log(timer.getSeconds()); //12

3.6 页面时钟

<!DOCTYPE html><html><head><meta charset="utf-8"/><title> JavaScript：页面时钟 </title><style type="text/css">#time{width:300px;height:50px;border:1px solid #ccc;text-align:center;line-height: 50px;font-size:20px;}</style></head><body><div id="time"></div><script type="text/javascript">//完成页面时钟//1.获取追加时钟的标签var time =document.getElementById('time');//2.开启定时器setInterval(function(){//3.实例化日期对象var timer = new Date();//4.获取年月日时分秒var year = timer.getFullYear();var month = timer.getMonth();var day = timer.getDay();var hours = timer.getHours();var minutes = timer.getMinutes();var seconds = timer.getSeconds();//5.拼装时钟字符串var clock = year+'年'+month+'月'+day+'日 '+hours+'时'+minutes+'分'+seconds+'秒';//6.在网页上输出时钟time.innerHTML = clock;},1000);</script></body></html>

3.7 倒计时小程序

<!DOCTYPE html><html><head><meta charset="utf-8"/><title> JavaScript：[扩展]倒计时 </title><style type="text/css">#box{width:500px;height:200px;line-height:200px;margin-top:100px;border:1px solid #eee;font-size:100px;}</style></head><body><center><h2>倒计时小程序</h2>请输入倒数秒数：<input type="text" id="second" value="0" name=""><button id="start">开始倒计时</button><div id="box"></div></center><script type="text/javascript">//获取节点var second = document.getElementById('second');var box = document.getElementById('box');var button = document.getElementById('start');//1.button按钮的单击事件button.onclick = function(){//2.获取用户输入的秒数var time = second.value;//3.判断用户输入的描述是否大于2if(time <= 2){alert('请输入大于2的数字');}else{//4.将second和button设置为不可操作box.style.background = 'white';box.style.color = 'black';box.innerHTML = time;second.setAttribute('disabled','disabled');button.setAttribute('disabled','disabled');//5.开启定时器var dingshi = setInterval(function(){//6.时间自减time--;//7.写入box盒子box.innerHTML = time;//8.判断是否数到了0if(time<=0){time.value = 0;box.innerHTML = '时间到';box.style.background = 'red';box.style.color = 'white';second.removeAttribute('disabled');button.removeAttribute('disabled');//9.清除定时器clearInterval(dingshi);}},1000);}}</script></body></html>