Web前端JavaScript笔记（3）对象

在JavaScript中没有类这个概念，只有对象，在新ECMA6新版中增加了类的概念，和数组，字符串类似，对象的声明方法也有三种：

1. 通过new运算符进行传件对象

2. 省略new运算符创建对象

3. 对象常量赋值

<script>var obj1 = new Object();var obj2 = Object();var obj3 = {};
</script>

类的新增属性：

1. 可以给对象添加属性

2. 可以给对象添加方法

delete:

可以删除对象的属性和方法：

<script>let person = {};person.name = "Bob";person.age = 19;person.sex = "male";person.show = function(){alert("Welcome" + " " + person.name);};// 访问对象的属性alert(person.name + " " + person.age + " " + person.sex);// 访问对象方法person.show();// 另一种声明对象的方式let man = {name: "wang",age: 55,show: function () {alert("hello");}};delete man.age;   // delete可以删除对象的属性和方法
</script>

Math对象：

在JS中，很多关于数学运算的函数，由一个叫Math的对象提供，例如：

Math.random(),Math.max(),Math.min(),Math.floor()等，包括三角函数，以及常数。

日期对象：

日期对象的声明：

1. 直接声明，获取的是当前时间；

2. 传入参数，参数的格式：2019-03-03，2019/03/03

3. 传入毫秒数：

<script>let dd = new Date();    // 创建日期对象，默认输出的是当前的日期alert(dd);let dd1 = new Date("2020-01-01");alert(dd1)
</script>

日期对象格式化的方法：（返回新的字符串）

toDateString()	以特定的格式显示星期几，月，日和年
toTimeString()	以特定的格式显示时，分，秒和时区
toLocaleDateString()	以特定地区格式显示时，分，秒，时区
toLocaleTimeSting()	以特定地区格式显示时，分，秒和时区
toUTCString()	以特定的格式显示完整的UTC日期

定时器：

格式: setInterval(func(), time);

功能：每隔固定的时间间隔time（单位：ms）,执行依次func()函数

返回值：启动定时器时，系统分配的编号

在拿到返回值的时候，可以通过clearInterval()取消定时器。

<script>var i = 0;function showNum() {document.write(i++ + "<br>");if(i===10){clearInterval(timer1)}}var timer1 = setInterval(showNum, 1000);/*匿名函数的写法*/var count = 0;var timer2 = setInterval(function () {document.write(count++ + "<br>");if(count===8){clearInterval(timer2);}}, 1200);
</script>

案例：在网页上实时显示时间：

tool.js文件：


function timeTrans(n) {    // 对时间中的数字进行补齐let res = "";if(n<10){res += ("0" + n);}else{res += n;}return res;
}function showTime() {let d = new Date();let year = d.getFullYear();   //获取年份let month = d.getMonth() + 1;  // 0~11let date = d.getDate();       // 日期let week = d.getDay();         // 一周中的某一天0~6，0代表星期天let hour = d.getHours();let minute = d.getMinutes();let second = d.getSeconds();let week_name = ["日", "一", "二", "三", "四", "五", "六"];let time_stamp = year + "年" + month + "月" + date + "日 星期" +week_name[week] + " " + timeTrans(hour) + ":" + timeTrans(minute) + ":" +timeTrans(second);return time_stamp;
}

html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>setInterval(function () {document.getElementById("box").innerHTML = showTime();}, 1000);</script><style>#box{width: 600px;height: 70px;line-height: 70px;border: 2px solid black;margin: 30px auto;font-size: 25px;color: red;text-align: center;}</style>
</head>
<body><div id="box">显示时间</div>
</body>
</html>

效果如下所示：

案例：实现秒表：

要求：秒表有三个按钮，开始，暂停和复位

（补充知识）：在html文档中，JS代码一般写在head中的script标签中，但是如果在这样的代码中通过document.getElementById()来获取标签的话，得到的返回值就是null, 因为代码的执行是按照从上到下依次进行的，在没有执行后的body中的html代码的时候，当然是获取不到标签的。

解决方法：

window.onload = function(){

// 写在这里的代码，是在页面加载完后才运行的

}

html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>var seconds = 0;   // 全局的总秒数var timer = null;   // 保存定时器的返回值window.onload = function () {$("start").onclick = function () {// 开始计时，设置定时器，每隔一每秒seconds+1timer = setInterval(function () {seconds++;$("second").innerHTML = timeTrans(seconds % 60);$("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);$("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));}, 100);};$("pause").onclick = function () {clearInterval(timer);      // 关闭定时器};$("reset").onclick = function () {clearInterval(timer);seconds = 0;$("second").innerHTML = timeTrans(seconds % 60);$("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);$("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));};}</script><style>#box{width: 150px;height: 200px;border: 2px solid black;margin: 30px auto;font-size: 20px;background: darkorange;}#box div.time{width: 70%;margin: 5px auto;display: flex;flex-direction: row;justify-content: space-evenly;margin-bottom: 20px;margin-top: 20px;}#box div.time span{display: block;}#box div.btns{width: 100%;margin: 0 auto;display: flex;flex-direction: row;justify-content: space-evenly;}</style>
</head>
<body><div id="box"><div class="time"><span id="hour">00</span><span>:</span><span id="minute">00</span><span>:</span><span id="second">00</span></div><div class="btns"><button id="start">开始</button><button id="pause">暂停</button><button id="reset">复位</button></div></div>
</body>
</html>

JS文件：


function timeTrans(n) {    // 对时间中的数字进行补齐let res = "";if(n<10){res += ("0" + n);}else{res += n;}return res;
}function showTime() {let d = new Date();let year = d.getFullYear();   //获取年份let month = d.getMonth() + 1;  // 0~11let date = d.getDate();       // 日期let week = d.getDay();         // 一周中的某一天0~6，0代表星期天let hour = d.getHours();let minute = d.getMinutes();let second = d.getSeconds();let week_name = ["日", "一", "二", "三", "四", "五", "六"];let time_stamp = year + "年" + month + "月" + date + "日 星期" +week_name[week] + " " + timeTrans(hour) + ":" + timeTrans(minute) + ":" +timeTrans(second);return time_stamp;
}function $(id){return document.getElementById(id);   // 是为了简化获取标签的函数
}

定时器效果：

这种定时器存在一个问题，当连续点击两次开始按钮后，会开启两个定时器，此时秒表的计数速度会加快，且不能够暂停下来。

分析：因为前一个定时器还没有被停止，新开的定时器编号已经覆盖原来的编号，所以当点击暂停的时候，新开的定时器被关闭，而原来的定时器编号丢失，不能被关闭了。

对定时器做如下改进：

修改后的代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>var seconds = 0;   // 全局的总秒数var timer = null;   // 保存定时器的返回值var timer_state = 0;   // 定义定时器初始的状态window.onload = function () {$("start").onclick = function () {if(timer_state === 0){timer_state = 1;// 开始计时，设置定时器，每隔一每秒seconds+1timer = setInterval(function () {seconds++;$("second").innerHTML = timeTrans(seconds % 60);$("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);$("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));}, 100);$("start").innerHTML = "暂停"}else{timer_state = 0;clearInterval(timer);      // 关闭定时器$("start").innerHTML = "开始"}};// $("pause").onclick = function () {//     clearInterval(timer);      // 关闭定时器// };$("reset").onclick = function () {clearInterval(timer);seconds = 0;$("second").innerHTML = timeTrans(seconds % 60);$("minute").innerHTML = timeTrans(Math.floor(seconds/60) % 60);$("hour").innerHTML = timeTrans(Math.floor(seconds/60/60));};}</script><style>#box{width: 150px;height: 200px;border: 2px solid black;margin: 30px auto;font-size: 20px;background: darkorange;}#box div.time{width: 70%;margin: 5px auto;display: flex;flex-direction: row;justify-content: space-evenly;margin-bottom: 20px;margin-top: 20px;}#box div.time span{display: block;}#box div.btns{width: 100%;margin: 0 auto;display: flex;flex-direction: row;justify-content: space-evenly;}</style>
</head>
<body><div id="box"><div class="time"><span id="hour">00</span><span>:</span><span id="minute">00</span><span>:</span><span id="second">00</span></div><div class="btns"><button id="start">开始</button><button id="reset">复位</button></div></div>
</body>
</html>

认识BOM:

BOM：浏览器对象模型，在浏览器中，可以打开多个网页，每一个网页就是一个BOM

BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工作组目前正在努力促进BOM的标准化）
BOM最初是Netscape浏览器标准的一部分

BOM结构如下所示：

BOM提供了一些访问窗口对象的一些方法，可以用这些方法移动窗口位置，改变窗口大小，打开和关闭窗口，弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的入口，document对象，以使得我们可以通过这个入口来使用DOM的强大功能。

window对象下面的系统对话框：（方法）完成系统与用户的交互

1. alert() : 弹出窗口对话框

2. confirm(): 带确定和取消的对话框：

3. prompt()：带输入框的提示对话框: (点击确定：如果输入内容，返回的是输入内容，否则返回默认值，点击取消，返回null)

<script>let res = confirm("Do  want to quit?");alert(res);let res1 = prompt("Quit or not?", "nothing");  // 第二个参数是默认值alert(res1);
</script>

4. open(url, name) : 打开新的窗口

第一个参数表示要打开的url，

第二个参数表示给打开的网页起的别名，当再次点击按钮时，不会打开新的网页，而是表示在name页面加载打开的新窗口，所以新的网页就会继续在name页面重新加载。

第三个参数：表示打开页面的大小以及位置设置，这里的大小的单位不是px，可以控制打开窗口的属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>function open_page() {open("https://www.baidu.com");open("https://www.baidu.com", "new");open("https://www.baidu.com", "new", "width:200,height=200,top=100, left=100");}</script>
</head>
<body><button id="newPage" onclick="open_page()">Open</button>
</body>
</html>

认识history对象：

history掌握的是当前窗口的历史记录，只要窗口加载的URL不一样，就会产生历史记录。

属性：

history.length 输出当前窗口历史记录的条数

方法：

history.back() 返回上一条历史记录

history.forward() 前进到下一条历史记录

history.go() ：参数(0) 刷新当前页面 , 参数(n)前进n条记录，参数(-n)后退n条记录

认识location对象：

url: 统一资源定位符：

协议://IP(域名)/:端口号/路径 /？查询字符串#锚点

protocol://hostname:port/pathname/?search#hash

1. 协议：通过

2. hostname: 主机名 IP (域名)

3. 端口号：系统给当前电脑上正在使用网络的软件随机分配的编号。一本职能分配0-65535之间的数字

一些常用的软件在设备上具有默认的端口号：

例如：浏览器： 8080 http: 80 https: 443

4. 路径：

5. 查询字符串： loaction.search(); 在URL上，有问号拼接的部分就是查询字符串。

查询字符串必须通过问号拼接，具有属性和值，?name=value&name=value, 查询字符串中是以键值对的形式呈现的。主要用于前后端交互。

6. hash: 锚点：实现在当前页面内进行跳转

window下的location对象与document下的location对象相同，loaction:中的方法：

a. location.assign(url): 跳转到指定页面，即在当前窗口进行跳转

b. location.replace(url): 用新的url将当前页面上的url进行替换。

c. location.reload(): 直接刷新当前窗口，

location.reload(true)：不经过浏览器缓存直接强制从服务器重载

assign与replace的区别：

assign在页面跳转后会生成历史记录，可以再通过记录返回之前的页面

replace在跳转到新的页面后，不会产生历史记录。

认识DOM：

dom: document object model: 文档对象模型

documen表示<html></html>之间的部分

document中所有的节点可以分为三类：

1. 元素节点 <div>

2. 属性节点 id = "", class = ""

3. 文本节点 div标签内的文本

元素节点获取的方法：

1. document.getElementById(), 通过id获取节点

2. node.getElementsByTagName()，通过标签名获取节点（这里node节点可以是document中的任何节点，document相当于从全局开始查找节点），返回值是节点对象构成的数组

3. node.getElementsByClassName(), 通过class属性获取节点

4. document.getElementsByName(), 通过name属性获取节点，只能从全局开始查找，一般只使用在表单元素

5. 也通过节点获取其他的属性值

6. 也可以通过节点修改相节点的属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let content_box = document.getElementById("box");alert(content_box.title);    // 获取title属性alert(content_box.id);       // 获取id;alert(content_box.className);    // 获取class属性alert(content_box.style);    // 获取样式 但是只能访问行内间的样式content_box.style.background = "blue";}</script>
</head>
<body><div id="box" class="cotent" title="hello" style="width: 100px;height: 100px; background: red"></div>
</body>
</html>

7. document.querySelector(): 返回值是符合条件的第一个元素节点，参数是CSS选择器

8. document.querySelectorAll(): 不管找到一个还是多个，返回值都是数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script rel="script" src="../JavaScript/tool.js"></script><script>window.onload = function () {let content_box = document.querySelector("#box");let content_box1 = document.querySelectorAll(".content");  // 返回对象数组let per_1 = document.querySelector("ul .per");let per_2 = document.querySelector("[name=hello]");   // 获取name属性等于hello的节点}</script>
</head>
<body><div id="box" class="cotent" title="hello" style="width: 100px;height: 100px; background: red"></div><div class="box1"></div><ul><li class="per"></li><li></li></ul>
</body>
</html>

自定义byClassName方法：

因为在IE8一下的浏览器中，不支持通过node.getElementsByClassName()查找节点，所以需要自定义实现这个函数：

<script>function elementsByClassName(node, className){// node : 开始查找的节点  classNamelet arrNodes = [];let nodes = node.getElementsByTagName("*");   // 查找node下所有节点for(let i=0; i<node.length; i++){if(nodes[i].className === className){arrNodes.push(nodes[i]);}     }return arrNodes;}window.onload = function () {};
</script>

获取当前有效样式：

通过.style方法自能获取卸载行间的CSS样式；因为CSS样式只能在程序运行的时候进行计算得到权重后，才能最终展现在元素上。系统提供了两个获取CSS样式的方法：
1. node.currenStyle(["height"]) // IE浏览器支持

2. getComputedStyle(node)["height"] // 火狐，谷歌浏览器支持

需要封装一个自适应的获取样式的函数，以兼容所有的浏览器：

<script>function getStyle(node, style) {return node.currentStyle ? node.currentStyle[style]:getComputedStyle(node)[style];            }
</script>

---------------------------------------------------------------------------------------------------------------------------

Web前端JavaScript笔记（3）对象相关推荐

Web前端JavaScript笔记（4）节点
如何获取元素节点的属性: 在Web前端JavaScript笔记(3)对象中,介绍了访问行间属性的方法,除此之外,系统还提供了三个方法访问元素的属性: 1. setAttribute: 2. getAt ...
Web前端Javascript笔记（6）正则表达式
在web前端中,假设用户需要提交表单,在表单提交到服务器进一步处理之前,Javascript程序会检查表单,以确认用户输入的信息是符合规范要求的.这些工作可以使用正则表达式完成,正则表达式是一个描述字 ...
Web前端Javascript笔记（8）Ajax前后端交互
认识Ajax 全名Asynchronous Javascript and XML(异步JavaScript和XML),节省用户操作时间,提高用户体验,减少数据请求,传输获取数据.Ajax相当于前后台数 ...
Web前端Javascript笔记（5）事件
1. 什么是事件:事件是指发生并得到处理的操作 JavaScript中的事件是由访问web页面的用户引起的一系列操作,例如,用户的点击操作,JavaScript中有两种事件模型:内联模型,脚本模型. ...
Web前端 Javascript笔记（1）数组
结构 :html构建样式:css控制行为:JavaScript实现什么是JavaScript? JavaScript是一种跨平台的脚本语言,平台,即运行环境,一般指操作系统. --------- ...
Web前端JavaScript笔记（5）事件-拖拽
阻止默认行为和超链接在浏览器上运行网页后,右击会弹出菜单,这属于浏览器的默认行为.如何禁止这一默认行为: <script>window.onload = function () {doc ...
Web前端JavaScript笔记（7）ECMA6新增数组方法
新增数组方法: 1. Array.from(): 将伪数组转化为真数组 <script>window.onload = function () {let tag_li = documen ...
Web前端JavaScript笔记（2）字符串
字符串: 字符串的声明方式: 1. 通过new运算符声明字符串 // 声明的是对象 2. 省略new运算符 3. 字符串常量赋值 <script>var str1 = n ...
Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

Web前端JavaScript笔记（3）对象

Web前端JavaScript笔记（3）对象相关推荐

最新文章

热门文章