组成部分:
ECMAScript,描述了该语言的语法和基本对象。
- 文档对象模型(DOM),描述处理网页内容的方法和接口。
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口。
1. ECMAScript
ECMAScript:描述了该语言的语法和基本对象
1.1. 基本语法:
1.1.1. 与html结合方式:
- 内部js:
- 定义script标签,标签内容就是js代码。
- 外部js
- 定义script标签,通过属性src引入外部js文件的路径。
- 注意:
- script标签可以定义在html页面的任何地方,但是定义的位置会影响执行顺序。
- 可以定义多个,通常放在HTML文档的头部。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
内部js
-->
<input type="text" />
<script>
alert("hello js")
</script>
<!--
外部js
-->
<script src="test.js"></script>
</body>
</html>
1.1.2. 注释
单行注释://注释内容
- 多行注释:/* */
alert("hello js")
//我是注释
/*我是注释*/
1.1.3. 数据类型
原始数据类型:
number:数字,整数/小数/NAN
- string:字符串,单引号或者双引号
- boolean:布尔型,true或false
- null:空,一个对象为空的占位符
undefined:未定义,如果一个变量没有给初始化值,则会被默认赋值为undifined
- 引用数据类型:对象
特点:
基本类型的值是不可变的
- 在从一个变量向另一个变量赋值基本类型时,会在该变量上创建一个新值,然后再把该值复制到为新变量分配的位置上。
引用类型的值是可变的
1.1.4. 变量
JavaScript是弱类型语言:
- 在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
- 语法:
- 只有一个var标识符来定义变量。
//定义number类型
var num1 = 1;
var num2 = NaN;
document.write(num1);
document.write(" is a "+typeof(num1)+"<br>");
document.write(num2);
document.write(" is a "+typeof(num2)+"<br>");
//定义string类型
var str1 = "zyx";
document.write(str1);
document.write(" is a "+typeof(str1)+"<br>");
//定义boolean类型
var flag = false;
document.write(flag);
document.write(" is a "+typeof(flag)+"<br>");
//定义null类型
var obj = null;
var obj2 = undefined;
var obj3;
document.write(obj);
document.write(" is a "+typeof(obj)+"<br>");//null被typeof()视为一个object对象
document.write(obj2);
document.write(" is a "+typeof(obj2)+"<br>");
document.write(obj3);
document.write(" is a "+typeof(obj3)+"<br>");
/*
1 is a number
NaN is a number
zyx is a string
false is a boolean
null is a object
undefined is a undefined
undefined is a undefined
*/
1.1.5. 运算符
一元运算符:只有一个运算数的运算符
- ++(自加),--(自减),+(正号)
- ++在后先运算再赋值,
算数运算符:
- 加减乘除
比较运算符:
- 大于,小于,>=,<=,==,
- ===绝对等于(值和类型均相等)
- !== 不绝对等于(值和类型有一个不相等,或两个都不相等)
逻辑运算符:
- &&,||,!
三元运算符:
- a>1?a=1:a=2;
js中的类型转换:
- 在js中,如果运算数不是运算符要求的类型,那么js引擎会自动的将运算数进行类型转换
1.1.6. 流程控制语句
- if{}else{}
- switch
- while
- do...while
- for
1.1.7. 特殊语法
变量的定义使用var关键字:
- var a = 1;表名a是局部变量
- a = 1;表明a是全局变量
1.2. 基本对象
对象是一种特殊的数据。对象拥有属性和方法
引用类型:
引用类型有这几种:object、Array、RegExp、Date、Function
特殊的基本包装类型(String、Number、Boolean)以及单体内置对象(Global、Math)。
1.2.1. Function对象:
- 创建
直接量方法:var 方法名称 = new Function(形参列表,方法体);
- 静态方法:function 方法名称(形参列表){
方法体;
[return[函数返回值]];
}; 动态匿名方法:var 方法名称 = function(形参列表){
方法体
};
- function对象的属性
- length:代表形参的个数。
- 方法也是一个对象,定义名称相同的方法会被覆盖。
- 如果形参个数不对,可以运行,只接受参数。
- 在方法声明中
- 注意
- 形参的var不用写;
- 方法也是一个对象,定义名称相同的方法会被覆盖。
- 可以接受任意的参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
//方法一
var fun1 = new Function("a","b","alert(a);");
fun1(3,4);
//方法二
function fun2(a,b){
alert(a);
}
fun2(3,4);
//方法三
var fun3 = function(a,b){
alert(a);
}
fun3(3,4);
</script>
</body>
</html>
1.2.2. array对象
var obj1 = new Array("123",123,NaN);
document.write(obj1);
数组可以有不同的对象,数组长度会自动扩充。
- 创建
- var obj = new Array() ;
- var obj = new Array(size);
- var obj = new Array(元素列表);
- var obj = [];
- 数组的增删改查
- 使用obj[0] 来访问元素
- 数组属性
- length:得到数组的长度
- 数组的方法
1.2.3. Date对象
- 创建
- var obj = new Date();
- 方法
- 属性
1.2.4. Math对象
- 创建
- 特点:此对象不用创建,直接使用(相当于静态类) 。
- 方法
- Math.random() ,返回0到1直接的随机数,含0不含1 。
- Math.ceil(x),对x进行上舍入 。
- floor(x),对x进行下舍入 。
- round(x),把数四舍五入为最接近的整数 。
- 属性
- Math.pi
1.2.5. Number对象
1.2.6. String对象
1.2.7. Boolean对象
1.2.8. RegExp对象(正则表达式对象)
- 正则表达式:定义字符串组成的规则。
单个字符:[ ]
- [a]:表示a
- [ab]:表示a或b
- [a-zA-Z0-9_]:大小写字母数字下划线
- 特殊符号含义表示的字符集:
- \d:为单个数字字符[0-9],
- \w:单个单词字符为[a-zA-Z0-9_]
- 量词符号
- ?:表示出现零次或一次
- +:表示一次或多次
- *:表示零次一次或多次
- {m,n}:表示数量大于m,小于n
- ^开始字符,$结束字符
正则表达式对象RegExp
- 创建:
- var obj = new RegExp(pattern,modifiers);如:("//w{6,10}")
- var obj = /pattern/modifiers;如:/w{6,10}
- 方法:
- obj.test(参数):验证参数是否符合obj正则表达式的规范,如果正确返回true,错误返回false
- 创建:
1.2.9. Global全局对象(即直接调用方法)
- 方法:
- decodeURI():解码某个编码的URI
- encodeURI():把字符串编码为URI
2. BOM:
概念:BroswerObjectModel(浏览器对象模型)
2.1. 组成:
2.1.1. Window:窗口对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 创建
- 不需要被创建就可以使用如(window.alert())。
- 也可以省略对象名如(alert())。
- 方法
- 与弹出框有关的方法:
- alert() 显示带有一段信息和一个确认按钮的警告框
- confirm() 显示带有一段信息以及确认和取消按钮的警告框
- prompt() 显示提示用户输入的对话框
- 与打开关闭有关的方法:
- close() 关闭浏览器窗口(浏览器对象调用这个方法则关闭这个对象)
- open(参数可为url) 打开浏览器窗口或者查找一个已命名的窗口(会返回一个window对象,可以用来关闭)
- 与定时器有关的对象:
- setTimeout() 在指定的毫秒数后调用函数或计算表达式
- 两个参数(function,time);
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout
- setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
- clearInterval() 取消由 setInterval() 设置的 timeout
- setTimeout() 在指定的毫秒数后调用函数或计算表达式
- 与弹出框有关的方法:
- 属性
- 可以用来获取其他BOM对象。
var h1 = window.history
- 获取DOM对象。
windows.document.write("test");
document.write("test");
<script>
//测试定时器
var id = setTimeout(fun,2000)
clearTimeout(id);
function fun(){
alert("time");
}
</script>
//使用open(),close()来打开与关闭窗口
<input type="button" id="openbtn" value="open"/>
<input type="button" id="closebtn" value="close"/>
<script>
var openbtn = document.getElementById("openbtn");
var newwindow;
openbtn.onclick=function(){
//打开新窗口
newwindow = open("https://www.baidu.com");
}
var closebtn = document.getElementById("closebtn");
closebtn.onclick=function(){
newwindow.close();
}
</script>
2.1.2. History:历史记录对象
History对象为当前浏览器窗口的历史url
- 创建
- window.history
- history
- 方法
- back() 加载 history 列表中的前一个 URL
- forward() 加载 history 列表中的下一个 URL
- go(参数) 加载 history 列表中的某个具体页面
- 正数1,前进一个历史记录
- 负数1,后退一个历史记录
- 属性
- 返回当前窗口历史列表中的url数量
2.1.3. Location:地址栏对象
location对象时window对象的一个部分,location对象包含有关当前URL的信息
创建(获取):
- window.location
- location
- 方法
- reload() 重写加载
- 属性
- href,设置或返回浏览器的URL
<body> <input type="button" id="locat" value="刷新"/> <script> var locat = document.getElementById("locat"); locat.onclick=function(){ location.reload(); } var href = location.href; alert(href); </script> </body>
2.1.4. Navigator:浏览器对象
window.navigator 对象包含有关访问者浏览器的信息(如浏览器版本浏览器名称等)
2.1.5. Screen:显示器屏幕对象
Screen 对象包含有关客户端显示屏幕的信息(如屏幕的高度或者宽度等)。
3. DOM:
Document Object Model(文档对象模型)
当浏览器载入 HTML 文档, 它就会成为 document 对象,可以操作对象对标签进行改变
HTML DOM树:
<!DOCTYPE html>
<html>
<head>
<title>
My title
</title>
</head>
<body>
<h1>My header</h1>
<a href="https://github.com/innerup">My link</a>
</body>
</html>
在 HTML DOM (Document Object Model) 中, 每个都是节点。
Element节点与Text节点存在父子关系
Element节点与Attribute节点不存在父子关系,Attribute节点使用Element.Attribute访问
兄弟结点是指同一双亲结点的子结点之间互为兄弟结点,同一父亲的孩子之间互为兄弟结点。
3.0.6. Document:文档对象
创建:
- 使用window.document
- document
- 方法:
- getElementById():根据ID值获取元素对象,
- getElementByTagName():根据元素名称获取元素对象,返回值为数组
- getElementByClassName():根据Class属性值获取元素对象
- getElementByName():根据Name属性值获取元素对象
- document.createElement() 创建元素节点
属性
//方法使用
<body>
<h1 id="test1">h1</h1>
<h1 id="test2">h1</h1>
<h2 id="test3">h1</h2>
<input name="put" type="button" value="put"/>
<div class="box2">www.text.com</div>
<script>
var elementId = document.getElementById("test1");
alert(elementId);
var elementtag = document.getElementsByTagName("h1");
alert(elementtag);
var elementClass = document.getElementsByClassName("box2");
alert(elementClass);
var elementname = document.getElementsByName("put");
alert(elementname);
</script>
</body>
3.0.7. Element:元素对象(节点)
- 创建:
- 通过document对象创建。
- 方法
- removaAttribute():删除属性
- setAttribute():设置属性
<body>
//setAttribute使用
<a>clik me</a>
<input type="button" name="test" value="设置属性" id="btn_set"/>
<script>
var btn_set = document.getElementById("btn_set")
btn_set.onclick=function (){
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href","dom树.html");
alert("设置成功")
}
</script>
</body>
3.0.8. Attribute:属性对象(节点)
3.0.9. Event:事件对象(节点)
3.0.10. Node:节点对象(为所有对象的父类)
所有的DOM对象都可以被认为是一个节点。
- 方法:
- appendChild(添加的新节点):向节点的子节点列表的结尾添加新的子节点
- removeChild(要删除的节点):删除(并返回)当前节点的指定子节点
- replaceChild(要插入的新元素,被替换的旧元素):用新节点替换一个子节点
4. HTMLDOM的新增特点
标签体的设置和获取:innerHTML
<body> <div id="div1"> div </div> <script> var div = document.getElementById("div1"); //div标签替换一个html语句 div.innerHTML = "<input type='text' />"; //div标签追加一个文本输入框 div.innerHTML+="<input type='text' />"; </script> </body>
- 使用HTML元素对象的属性(标签的使用)
- 设置样式,控制样式
- 使用元素style属性修改样式
- 使用classname属性修改样式
<body> <div id="div1"> div </div> <script> var div = document.getElementById("div1"); div.onclick = function(){ div.style.width = "200px"; div.setAttribute("class","d1"); div.className="d1"; //通过css类选择器 // .d1{ // border: 1px; // width: 300px; // height: 300px; } </script> </body>
5. 事件
某些组件执行了某些操作后,触发某些代码的执行
5.1. 怎样绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1. 直接在html标签上,指定事件的属性,属性值为js代码
1. 单击事件:onclick="js函数或者js代码"
2. 然后在js代码块中定义函数
2. 通过js获取元素对象,指定事件属性,设置一个js函数
1. 通过document.getElementById("id的值")获取对象
2. 对象.onclick=js函数(或者使用匿名定义)
3. 在js代码块中定义函数
-->
<h1 onclick="fun()" id="t">22222</h1>
<br />
<h1 id="q">22222</h1>
<script>
var obj = document.getElementById("q");
obj.onclick=fun;
function fun(){
alert("123");
}
</script>
</body>
</html>
5.2. 常用事件:
- 点击事件:
- onclick :当用户点击某个对象时调用的事件句柄。
- ondblclick: 当用户双击某个对象时调用的事件句柄。
- 焦点事件:
- onblur :元素失去焦点
- 可以用来表单验证
- onfocus :元素获得焦点
- onblur :元素失去焦点
- 加载事件:
- onload :一张页面或一幅图像完成加载
- 鼠标事件:
- onmousedown:鼠标按钮被按下
- onmouseup:鼠标按键被松开
- onmousemove:鼠标被移动
- onmouseover:鼠标移到某元素之上
- 键盘事件:
- onkeydown 某个键盘按键被按下。
- onkeypress 某个键盘按键被按下并松开。
- onkeyup 某个键盘按键被松开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//1.onload 事件会在页面或图像加载完成后立即发生,window浏览器对象加载完成后获得句柄
window.onload = function(){
//2.onblur 事件(绑定的标签)在失去焦点时触发
document.getElementById("event2").onblur = function(){
alert("失去焦点");
}
//3.onmouseover 事件在移动到元素之上被触发
document.getElementById("event1").onmouseover = function(){
alert("mouse is coming")
}
//4.onmousedown 在点击此元素后事件触发(event.button判断哪一个鼠标按键被按下)
document.getElementById("event2").onmousedown = function(event){
alert(event.button);
}
//5.onkeydown 在键盘的某个键被按下则他的keyCode等于某个值
document.getElementById("event2").onkeydown = function(event){
alert(event.keyCode);
}
}
</script>
</head>
<body>
<!--
1. 失去焦点
-->
<input id="event1" />
<br />
<input id="event2" />
</body>
</html>