第一阶段(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-第14章 JavaScript DOM对象和BOM对象
- HTML+CSS+JS精细化教程(新)适合学习和巩固基础(必掌握技能)
- JAVA语言(面向对象都不是事,重点是多线程、反射、网络编程、界面编程、设计模式、工程架构、文件系统)
- JAVA WEB(MySQL、JDBC、JSP、JSTL、EL、Servlet、Spring、Struts、MyBatis、SpringData等)
- Spring Boot2(新版2.X、底层原理深入剖析、更有点餐系统、大型博客系统、商铺平台等完整项目开始视频和源码)
- Python(小白基础语法、RESTfull API开发、爬虫、Django、Linux系统、制作小工具)
- Photoshop(CS5、CS6、CC2018视频教程、海量素材、酷炫特效制作、经典案例几百集)
- Unity2D/3D(手游开发、脚本开发、3D人物模型设计、3D动画、3D塔防游戏、第一人称游戏案例视频跟着做)
- Android原生开发(大型OA系统、游戏开发、物联网开发、3D模型显示、单机游戏开发)
- IOS原生开发(各种收费应用、游戏开发、工具开发、物联网开发)
- PHP(HTML+CSS+JS+PHP+MySQL+MVC+ThinkPHP+Linux+Nginx+Redis)