HTML+CSS+JS-第13章 JavaScript对象

HTML+CSS+JS-第12章 JavaScript数组

第一阶段（A）（前端） 20天 120学时

第13章 JavaScript对象（6）

[学习课时] 本章共需要学习 6 课时

[目的要求]

掌握对象的定义
掌握对象在程序中使用和实现
掌握系统自带对象的使用方法

[教学内容]

JavaScript 对象

对象的单词是object（目标；物体）

对象抽象的理解就是显示生活中的任何一个事物（可以是具体存在的，也可以是虚拟的），如：一个人、一架飞机、一个商品等等。

而在程序代码中对象就表现为变量和函数

如：现实中的人和软件中的会员

人		——>	会员
名字	张三	——>	真实姓名	张三	var $realname="张三"
小名	小三	——>	昵称	张大仙	var $nickname="张大仙"
性别	男	——>	性别	女	var $sex="女"
生日	1999/1/1	——>	生日	1996/12/12	var $birthday="1996-12-12
籍贯	贵州贵阳	——>	籍贯	北京	var $location="北京"

上面这种情况，会员对象在程序中就是多个变量组成的，而有些情况只有变量是无法表示一个对象的，需要使用函数来共同表示。如：

对话框对象
标题文字	温馨提示	var $title="温馨提示"
内容文字	操作成功	var $content="操作成功"
底部文字	感谢支持	var $thinks="感谢支持"
确定按钮	确定	function sure(){//代码}
取消按钮	取消	function cancel(){//代码}

所以，在程序代码中就是使用变量和函数共同来描述一个对象。

变量在对象中叫做属性（成员变量）

函数在对象中叫做操作（成员函数）

JavaScript 创建对象

通过new Object()创建

实例：demo01

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $person=new Object();

        $person.realname="张三";

        $person.nickname="张大仙";

        $person.age=23;

        $person.sex="男";



        document.write($person.realname);

    </script>

</html>

输出：张三

通过{'realname':"张三"}创建

实例：demo02

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        $person={

            'realname':"张三",

            'nickname':"张大仙",

            'age':23,'sex':"男",

            "fun":function(){

                console.log("你好！")

            }

        };



        document.write($person.realname);

        $person.fun();

    </script>

</html>

输出：张三

构造函数创建

function ShowTime() {

    this.timeout = null;

    this.start = function() {

       this.timeout = setInterval(this.todo, 500);

    };

    this.todo = function() {

       today = new Date();

       h = today.getHours();

       m = today.getMinutes();

        s = today.getSeconds();

       document.body.innerHTML = h + ":" + m + ":" + s;

    };

    this.stop = function() {

       clearTimeout(this.timeout);

    };

}

st = new ShowTime();

st.start();

JavaScript Math 对象

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值。
acos(x)	返回 x 的反余弦值。
asin(x)	返回 x 的反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入（Math.ceil(1.4) = 2）。
cos(x)	返回数的余弦。
exp(x)	返回 Ex 的指数。
floor(x)	对 x 进行下舍入（Math.floor(1.6) = 1）。
log(x)	返回数的自然对数（底为e）。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值（Math.max(n1,n2,n3,...,nX)）。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值（Math.min(n1,n2,n3,...,nX)）。
pow(x,y)	返回 x 的 y 次幂（Math.pow(4,3) = 64）。
random()	返回 0 ~ 1 之间的随机数。
round(x)	把数四舍五入为最接近的整数。
sin(x)	返回数的正弦。
sqrt(x)	返回数的平方根。
tan(x)	返回角的正切。

JavaScript String 对象

String 对象方法

方法	描述
charAt(x)	返回在指定位置的字符【"HELLO WORLD".charAt(2) = L）】
charCodeAt(x)	返回在指定的位置的字符的 Unicode 编码【"HELLO".charCodeAt(0)=72）】
concat(x)	连接两个或更多字符串，并返回新的字符串【"Hello ".concat("world!")= Hello world!）】
fromCharCode(x)	将 Unicode 编码转为字符【String.fromCharCode(65) = A】。
indexOf(‘xx’)	返回某个指定的字符串值在字符串中首次出现的位置。
lastIndexOf(‘xx’)	从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match()	查找找到一个或多个正则表达式的匹配。
replace(‘xx’,’yy’)	在字符串中查找匹配的子串，并替换【string.replace(searchvalue,newvalue)】
search()	查找与正则表达式相匹配的值。
slice(‘xx’)	提取字符串的片断，并在新的字符串中返回被提取的部分。
split(‘,’,x)	把字符串分割为字符串数组【string.split(separator,limit)】
substr(x,y)	从起始索引号提取字符串中指定数目的字符【"Hello world!".substr(2,3) = llo】
substring(x,y)	提取字符串中两个指定的索引号之间的字符。
toLowerCase()	把字符串转换为小写。
toUpperCase()	把字符串转换为大写。
trim()	去除字符串两边的空白

JavaScript Date 对象

以下四种方法同样可以创建 Date 对象：

var d = new Date();

var d = new Date(milliseconds);

var d = new Date(dateString);

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Date 对象方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。
parse()	返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds()	设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)。
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setTime()	setTime() 方法以毫秒设置 Date 对象。
toDateString()	把 Date 对象的日期部分转换为字符串。
toJSON()	以 JSON 数据格式返回日期字符串。
toString()	把 Date 对象转换为字符串。
toTimeString()	把 Date 对象的时间部分转换为字符串。

实例：demo03

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

    </body>

    <script type="text/javascript">

        var $date = new Date();

        document.body.innerHTML += new Date() + "<br/>";

        document.body.innerHTML += new Date("July 21, 1983 01:15:00") + "<br/>";

        document.body.innerHTML += new Date('2012-11-12 01:15:32') + "<br/>";

        document.body.innerHTML += new Date('2014/01/12 11:35:30') + "<br/>";

        document.body.innerHTML += new Date(1524241260431) + "<br/>";



        document.body.innerHTML += "年：" + $date.getFullYear() + "<br/>";

        document.body.innerHTML += "月：" + $date.getMonth() + "<br/>";

        document.body.innerHTML += "日：" + $date.getDay() + "<br/>";

        document.body.innerHTML += "小时：" + $date.getHours() + "<br/>";

        document.body.innerHTML += "分：" + $date.getMinutes() + "<br/>";

        document.body.innerHTML += "秒：" + $date.getSeconds() + "<br/>";

        document.body.innerHTML += "毫秒：" + $date.getMilliseconds() + "<br/>";

        document.body.innerHTML += "时间戳：" + $date.getTime() + "<br/>";

        document.body.innerHTML += "时间戳：" + Date.parse('2014/01/12 11:35:30') + "<br/>";

    </script>

</html>

显示时钟：

function startTime() {

    var today = new Date();

    var h = today.getHours();

    var m = today.getMinutes();

    var s = today.getSeconds(); // 在小于10的数字前加一个‘0’

    document.getElementById('txt').innerHTML = h + ":" + m + ":" + s;

    t = setTimeout(function() {

        startTime();

    }, 500);

}

JavaScript Array对象

方法	描述
concat()	连接两个或更多的数组，并返回结果。
every()	检测数值元素的每个元素是否都符合条件。
fill()	使用一个固定值来填充数组。
filter()	检测数值元素，并返回符合条件所有元素的数组。
find()	返回符合传入测试（函数）条件的数组元素。

findIndex()	返回符合传入测试（函数）条件的数组元素索引。

forEach()	数组每个元素都执行一次回调函数。

includes()	判断一个数组是否包含一个指定的值。
indexOf()	搜索数组中的元素，并返回它所在的位置。
join()	把数组的所有元素放入一个字符串。
lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()	通过指定函数处理数组的每个元素，并返回处理后的数组。
pop()	删除数组的最后一个元素并返回删除的元素。
push()	向数组的末尾添加一个或更多元素，并返回新的长度。

reduce()	将数组元素计算为一个值（从左到右）。

reduceRight()	将数组元素计算为一个值（从右到左）。
reverse()	反转数组的元素顺序。
shift()	删除并返回数组的第一个元素。
slice()	选取数组的的一部分，并返回一个新数组。
some()	检测数组元素中是否有元素符合指定条件。
sort()	对数组的元素进行排序。
splice()	从数组中添加或删除元素。
toString()	把数组转换为字符串，并返回结果。
unshift()	向数组的开头添加一个或更多元素，并返回新的长度。
valueOf()	返回数组对象的原始值。

[作业实验]

显示如下秒表时钟

实现如下日期选择

HTML+CSS+JS-第13章 JavaScript对象

[学习课时] 本章共需要学习 6 课时

[目的要求]

[教学内容]

[作业实验]

HTML+CSS+JS-第14章 JavaScript DOM对象和BOM对象

猜你喜欢