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~11
let 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+1
timer = 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~11
let 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+1
timer = 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" οnclick="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 : 开始查找的节点 className
let 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>---------------------------------------------------------------------------------------------------------------------------
