JavaScript
0407——JavaScript
1. 自定义对象【重要】
引用对象成员，使用"."运算符 或者 [] 运算符来引用属性成员 ：
对象.属性|方法(?)
对象[属性]
1）方式一
初始化定义一个对象，定义对象之后仍然可以为该对象增加属性和方法
var objName = {
属性1 : 值 ,
属性2 : 值 ,
..
方法名 : function(?){
// 方法体
// 该方法中如有引用对象的属性，必须使用 this 关键字
// return语句
}
}
// 方式一
var stuObj = {
name : '张三' ,
gender : 1 ,
birth : '2000-02-23',
display : function() {
return this.name + " , " + this.gender + " , " + this.birth ;
}
} ;
console.log(stuObj.name) ;
console.log(stuObj.display()) ;
// 增加属性
stuObj.score = 100 ;
// 重新定义 display成员
stuObj.display = function() {
return this.name + " , " + this.gender + " , " + this.birth + " , " + this.score ;
}
console.log(stuObj.display()) ;
2）方式二
先利用Object创建一个对象变量，然后再为该对象变量增加成员属性和方法
var 对象变量 = new Object() ;
对象变量.属性 = 值 ；
对象变量.属性 = 值 ；
...
对象变量.方法 = function( ？){
// 方法体
// 该方法中如有引用对象的属性，必须使用 this 关键字
// return语句
} ；
// 方式二
var studentObj = new Object() ;
studentObj.name = "赵六小" ;
studentObj.code = "S000001" ;
studentObj.show = function() {
console.log(this.name + " , " + this.code) ;
}
studentObj.show() ;
studentObj.code = "S000002" ;
studentObj.show() ;
3）方式三
先定义一个函数[构造函数]，然后通过new方式来创建对象
// 定义函数
function construcObj(参数列表) {
this.属性 = 值 ;
....
this.方法名 = function(?) {
...
}
}
// new对象
var 对象变量 = new construcObj(参数列表) ;
function stuConstructor (name , code) {
this.name = name ;
this.code = code ;
this.display = function() {
return this.name + " , " + this.code ;
}
}
var stu1 = new stuConstructor('张三' , 'S001') ;
var stu2 = new stuConstructor('李四' , 'S002') ;
console.log(stu1.display()) ;
console.log(stu2.display()) ;
console.log("--------------")
stu1.gender = '0' ;
stu1.display = function() {
return this.name + " , " + this.code + " , " + this.gender ;
}
console.log(stu1.display()) ;
console.log(stu2.display()) ;
2. forEach循环遍历数组或者对象 ：
遍历数组时，循环变量获取到的是数组元素下标
遍历数组时，循环变量获取到的是对象成员名
for(循环变量 in 数组或者对象) {
。。。
}
3. json数据【重要重要】
1）简介
JSON 英文全称 JavaScript Object Notation
字符串——需要符合一定的规范
常用的数据交换格式 -- 前后端数据交互
2）规范
-- "属性" : 值
-- 若干属性之间逗号间隔
-- json对象使用 {} 引起来
-- json 数组使用[]引起来
{
"errorCode" : 200 ,
"msg" : "请求成功" ,
"count" : 123 ,
"data" : [
{
"name" : "mike" ,
"code" : "U001"
} ,
{
"name" : "rose" ,
"code" : "U002"
} ,
{
"name" : "joe" ,
"code" : "U002"
}
]
}
3）js对象和json字符串之间的互相转换
【js对象属性不需要使用双引号引起来】
JSON.parse(JSON文本) ==> json文本转换为js对象或者数组
JSON.stringfy(js对象) ==> js 对象转换为json文本
4. DOM对象
https://www.runoob.com/js/js-htmldom.html
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
document
html
head body
子元素 子元素。。。（element）
每个子元素，可以有属性（attribute），或者文本（text）
1）查找页面元素（笔记见上方）
比如 document.getElementById()
- 处理html元素的内容（文本或者子元素）（笔记见上方）
表单元素 ==》value
其他页面元素 ==》 innerHTML和innerText
3）处理html元素的样式（笔记见上方）
页面元素的.style.css样式属性
页面元素的.setAttribute('class' , '类选择器名')
4）页面元素绑定事件并进行处理（笔记见上方）
方式三 ：
页面元素.addEventListener(event, function, useCapture);
【说明】
第一个参数是事件的类型 (如 "click" 或 "mousedown")【没有on】
第二个参数是事件触发后调用的函数,如果是具名函数，记得不需要加(),只需要函数名。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的，默认为false--冒泡。
【特点】
该方式绑定事件处理，可以通过removeEventListener()来移出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.box {
width: 200px;
height: 100px;
border : solid red 1px;
padding : 10px;
}
div.box p {
width : 100px;
height : 50px;
border : solid blue 1px;
}
</style>
<script>
window.onload = function() {
var isCapture = false ;
document.querySelector("div.box").addEventListener('click' , function(){alert('div')} , isCapture) ;
document.querySelector("div.box p").addEventListener('click' , function(){alert('~~~p')} , isCapture) ;
document.querySelector("div.box button").addEventListener('click' , btnHandler, isCapture) ;
document.querySelector("div.controlBox button").onclick = function() {
document.querySelector("div.box button").removeEventListener('click' , btnHandler) ;
}
}
function btnHandler() {
alert('button~~~')
}
</script>
</head>
<body>
<div class="box">
<p>
<button type="button">Click</button>
</p>
</div>
<div class="controlBox">
<button type="button">removeListener</button>
</div>
</body>
</html>
5）利用document对象和页面元素对象的相关方法来创建元素、文本内容、属性
创建标记对象 : document.createElement()
创建属性对象：document.createAttribute()
创建文本对象：document.createTextNode()
页面元素对象相关方法
setAttributeNode()
appendClid()
-- 创建元素
var 变量名 = document.createElement("标记名") ;
-- 创建属性
var 变量名 = document.createAttribute("属性名") ;
- 为创建的属性赋值
变量名.value = 值
-- 创建文本（开始标记与结束标记之间的内容）
var 变量名 = document.createTextNode("文本内容");
-- 属性绑定到元素
页面元素引用.setAttributeNode(属性变量名) ;
-- 文本内容绑定到元素
页面元素引用.appendChild(文本变量名) ;
-- 元素绑定到页面
所要放置位置父元素的引用.appendChild(元素变量名) ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div.writeBox {
border : solid red 1px;
}
</style>
<script>
window.onload = function(){
var pTag = document.createElement("p") ;
var txtNode = document.createTextNode("这是一个段落") ;
pTag.appendChild(txtNode) ;
var btnTag = document.createElement("button") ;
var attrNode = document.createAttribute("type") ;
attrNode.value = "button" ;
var btnTxtNode = document.createTextNode("按钮") ;
btnTag.appendChild(btnTxtNode) ;
btnTag.setAttributeNode(attrNode) ;
pTag.appendChild(btnTag) ;
document.querySelector("div.controlBox button").onclick = function() {
document.querySelector("div.writeBox").appendChild(pTag) ;
}
}
</script>
</head>
<body>
<div class="writeBox">
</div>
<div class="controlBox">
<button type="button">Click</button>
</div>
</body>
</html>
6）和表单相关的方法与属性--掌握
-- 表单元素支持的方法
select()
focus()
-- radio与checkbox支持的属性
checked
-- 下拉列表支持的属性
selected
7）document的两个方法
向页面中写入内容
document.write()
document.writeln()
5. BOM对象
浏览器对象模型（Browser Object Model (BOM)）
window ， screen，location，history，navigator，。。。
掌握 window对象的几个方法
掌握 location.href 的使用
其他了解
1）window对象 -- 窗体
-- 主要方法
弹框 alert()、confirm()、prompt()
[var handler = ]setInterval(function, 毫秒数) 以固定的频率来调用函数
setTimeout(function, 毫秒数) 在指定毫秒数后调用函数
clearInterval(handler)
clearTimeout()
open() https://www.runoob.com/jsref/met-win-open.html
close()
-- 主要属性
opener 返回对打开或者创建该窗口的window对象的引用
-- 事件（一个页面中只能有一次）
onload
onunload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="controlBox">
<button type="button">打开10-json(已存在页面）</button>
<button type="button">关闭10-json</button>
<button type="button">打开一个新窗口</button>
<button type="button">打开14-windowSon</button>
</div>
<div class="writeBox"></div>
<script>
var newWin ;
var btnTags = document.querySelectorAll("div.controlBox button") ;
btnTags[0].onclick = function() {
// window.open('10-json.html') ;
newWin = window.open('10-json.html' , 'newWin' , 'width=500') ;
}
btnTags[1].onclick = function() {
newWin.close() ;
}
btnTags[2].onclick = function() {
newWin2 = window.open('' , 'userInfo' , 'width=300,height=300') ;
newWin2.document.write("<h3>Hello</h3>") ;
newWin2.document.write("<h3>world</h3>")
}
btnTags[3].onclick = function() {
window.open('14-windowSon.html') ;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button">
向打开者写入内容
</button>
<script>
// console.log(opener) ;
document.querySelector("button").onclick = function() {
opener.document.querySelector("div.writeBox").innerHTML = '<h2>通过子窗口写入的内容</h2>' ;
}
</script>
</body>
</html>
2）screen
window.screen 对象包含有关用户屏幕的信息。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h3>你的屏幕:</h3>
<script>
document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("<br>");
document.write("可用宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("<br>");
document.write("色彩深度: ");
document.write(screen.colorDepth);
document.write("<br>");
document.write("色彩分辨率: ");
document.write(screen.pixelDepth);
</script>
</body>
</html>
3）location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。【href属性】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button">跳转到10-json</button>
<script>
console.log(location.href) ;
document.querySelector("button").onclick = function() {
location.href= "10-json.html" ;
}
</script>
</body>
</html>
其他属性 ：
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
4）history
window.history 对象包含浏览器的历史。
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go(整数) | 加载 history 列表中的某个具体页面 |
5）navigator
Navigator 对象包含有关浏览器的信息，获取到的不一定正确
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>
6. Canvas【h5】
https://www.runoob.com/html/html5-canvas.html
【绘制出验证码】
HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.
注意: 默认情况下 <canvas> 元素没有边框和内容。
<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>
获取画布（js） ：
var c=document.getElementById("myCanvas"); // 获取到canvas标记
var canvas=c.getContext("2d"); // 调用 getContext("2d") 来获取到画布
绘制相关方法 -- 参考api
浙公网安备 33010602011771号