1.初识
- 客户端脚本语言:运行在客户端浏览器中,每一个浏览器都有JavaScript的解析引擎
- 脚本语言:不需要编译,就可以直接被浏览器解析执行
- 可以来增强用户和html界面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户体验
- JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
2.基本语法
2.1 与HTML的结合方式
内部JS
<script>
alert("Aye~");
</script>
外部JS:通过src加载外部JS文件
alert("Aye");
<script src="JS/alert.js"></script>
2.2 注释
//单行注释
/*
多行注释的
*/
2.3 数据类型
原始数据类型(基本数据类型)
- number:数字。整数/小数/NaN(not a number)
- string:字符串。“abc”、‘a’
- boolean:true和flase
- null:一个对象为空的占位符
- undefined:未定义。如果一个变量没有给初始化值,则被默认赋值为undefined
//定义number类型
var num = 1;
var num2 = 1.1;
var num3 = NaN
//定义string类型
var str = "abc";
var str = 'def';
//定义boolean类型
var is = true;
var is2 = false;
//定义null、undefined类型
var obj = null;
var objk2 = undefined;
var obj3;//没有初始值,默认为undefined
//输出到页面上
document.write(num + "<br>");
document.write(num2 + "<br>");
引用数据类型(对象)
2.4 变量
- 一小块存储数据的内存空间
- Java是强类型语言,JS的弱类型语言
- 强类型:在开闭变量存储空间时,定义了将来固定存储的数据的数据类型
- 弱类型:在开闭变量存储空间时,不定义将来存储的数据类型,可以存放任意数据类型的数据
定义变量
//var 变量名 = 初始值
2.5 运算符
-
一元运算符:++,–,+
-
算数运算符:+,-,*,/,%,…
-
赋值运算符:=,+=,-=…
-
比较运算符:<,=,…===(全等于)
-
逻辑运算符:&&,||,!
-
三元运算符:?:
注意
-
在JS中,如果运算数不是运算符所要求的的类型,那么JS引擎会自动的将运算数进行类型转换
-
string转number,按照字面值转换,如果字面值不是数字,则转为NaN
var a = +"abc";//+号会强转为number类型,因为只有number才有正负之分 alert(typeof(b));//number alert(a);//NaN
-
boolean转number,true转为1,false转为0
===(全等于)
在比较之前进行类型判断,如果类型判断不一样,直接返回false
2.6 特殊语法(知道就行,不推荐使用)
-
语句以’’;’‘结尾,如果一行只有一条语句,’’;’'可以省略(不建议)
-
变量的定义可以使用var,可以不使用
//用,定义的变量是 局部变量 var a = 4; //不用,定义的变量是 全局变量 b = 4;
2.7 流程控制语句
- if…else
- switch:JS中swtich可以接收任意的原始数据类型
- while
- do…while
- for
3.基础对象
3.1 Function:函数对象
创建
//方式1
function 方法名(参数列表){
方法体
}
//方式2
var 方法名 = function(参数列表){
方法体
}
属性
- length:形参的个数
特点
-
方法定义时,形参的类型不用写(因为都是var,没有写的必要)
-
方法是一个对象,如果定义名称相同的方法,会覆盖
-
在JS中,方法的调用只与方法的名称有关,和参数列表无关(可以不传或者传多个实参)
-
方法声明中有一个隐藏的对象,存放了arguments数组,存放了所有的实参参数
function fun1(){ var sum = 0; for(var i = 0 ; i < arguments.length ; i++){ sum += arguments[i]; } return sum; } alert(fun1(1,2,3));
调用
- 方法名称(实参参数列表)
3.2 Array:数组对象
创建
//方法1
var arr = new Array(元素列表);
//方法2
var arr = new Array(默认长度);
//方法3
var arr = [元素列表]
方法
-
join(参数):将数组中的元素按照指定的分隔符(参数)拼接为字符串,如使用 ‘-’,就可以得到"arr[0]-arr[1]-arr[2]",分隔符默认为逗号
-
push(参数):在尾部添加一个元素
-
…其他的查看官方文档
属性
length:数组的长度
特点
-
JS中,数组元素的类型是可变的
var arr = [1,"abc",true];
-
数组的长度是可变的
3.2 Data:日期对象
创建
var date = new Date();
方法
- tolocaleString():返回本地时间的字符串格式
- getTime():获取毫秒值,返回当前对象描述的时间和1970年1月1日0点的毫秒值差
- …官方文档
3.3 Math:数学对象
特点
不用创建,直接调用方法;Math.方法名()
方法
- random():返回0-1的随机数,含0不含1
- ceil(x):向上取整
- floor(x):向下取整
- round(x):四舍五入为最接近的整数
3.4 RegExp:正则表达式对象
概念:定义字符串的组成规则
语法
https://www.runoob.com/jsref/jsref-obj-regexp.html
- 单个字符
- 量词字符
- ? 0次或1次
- *0次或多次
- +1次或多次
- {m,n},m到n次
- 开始结束的符号
- ^开始
- $结束
创建
var reg = new RegExp("正则表达式");
方法
text(参数):验证指定的字符串是否符合正则定义的规范
var reg = new RegExp("正则表达式");
var flag = reg.test("字符串");
3.5 Global
方法
- encodeURI():uri编码
- decodeURI() :uri解码
- encodeURIComponent():uri编码,编码字符更多
- decodeURIComponent():uri解码
传输数据的时候,如果是中文要进行相应的编码和解码,所以需要uri编码和解码
- parseInt():逐一判断每一个字符是否数组,直到不是数字位置,将前面数字部分转化为number
- isNaN():判断是否为NaN
- eval():将字符串解析成js代码执行
特点
- 是全局对象,不需要对象就可以直接调用,直接 方法名()就可以使用
4.BOM
概念
Browser Object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象
-
window:窗口对象
-
Navigator:浏览器对象(不重要)
-
Screen:显示屏对象(不重要)
-
History:历史记录对象
-
Location:地址栏对象
4.1 Window:窗口对象
特点
- 不需要创建对象,直接使用对象调用方法,如window.alert()
- window可以省略,直接使用方法。如 alert()
弹出框
- alert():显示带有一段消息和确认按钮的警告框
- confirm():显示带有一段消息和确认按钮和取消按钮的警告框
- 点击确定,返回true
- 点击取消,返回false,。23
- prompt():显示可提示
打开和关闭窗口
- open():打开一个新窗口,返回新的窗口window对象
- close():关闭窗口,谁调用谁关闭。
定时器
-
setTimeout(参数1,参数2):只会执行一次
- 参数1:JS代码或方法对象
- 参数2:经过多少时间后触发
- 返回一个唯一标识,用于取消定时器
-
clearTimeout(定时器id):关闭定时器
-
setInterval(参数1,参数2):循环执行
-
clearInterval(定时器id):关闭循环定时器
属性
- 可以获取其他的BOM对象,如Navigator、Screen、History、Location
- 获取DOM对象,如window.document,因为window可以省略,所以一般document.方法名()
4.2 Location:地址栏对象
获取
- window.location.方法()
- 因为window可以省略,所以直接location.方法()即可
方法
- reload():刷新页面。重新加载当前文档
属性
- href:设置或返回完整的URL,hyperlink reference连接参考
<input type="button" id="but1" value="刷新">
<input type="button" id="but2" value="百度">
<script>
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
but1.onclick = function (){
location.reload();
}
but2.onclick = function (){
location.href = "https://www.baidu.com";
}
</script>
4.3 History:历史记录对象
获取
- window.history
- history
属性
- length:返回当前窗口历史列表中的URL数量
方法
- back():加载history列表中 前一个URL
- forward():加载history列表中 后一个URL
- go(参数):加载history列表中 某个具体页面
- 正数:前进几个历史记录
- 负数:后退几个历史记录
5.DOM
概念
- Document Object Model 文档对象模型
- 将标记语言文档的各个组成部分,封装成对象,可以使用这些对象,对标记语言文档进行CRUD的动态操作
- 定义了访问HTML和XML文档的标准
- W3C DOM分为三个部分,核心DOM;XML DOM;HTML DOM
对象
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,是其他5个的父对象
功能:控制html文档的内容
5.1 Document:文档对象
DOM树
html会转变成dom数
获取
- 在html dom模型中可以使用window对象来获取
- window.document
- document
方法
1.获取element对象
- getElementById():根据ID获取元素对象。id属性唯一
- getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
- getElementsByClassName():根据Class属性获取元素对象们。返回值是一个数组
- getElementsByName():根据name属性获取元素对象们。返回值是一个数组
2.创建其他DOM对象
- createAttribute()
- createComment()
- createElement()
- createTextNode()
5.2 Element:元素对象
获取
<img src="image/off.png" id="light">
<script>
//通过id获取element对象
var light = document.getElementById("light");
</script>
修改属性值
- 明确获取的对象时哪一个
- 查看API文档,找其中有哪些属性可以设置
<script>
var light = document.getElementById("light");
//修改light对象中的src属性
light.src="image/on.png";
</script>
修改标签体内容
<script>
var title = document.getElementById("title");
//innerHTML
title.innerHTML = "修改标签体内容";
</script>
方法
- setAttribute(参数1,参数2):设置属性
- 参数1:属性名
- 参数2:属性值
- removeAttribute(参数1):删除属性
- 参数1:属性名
5.3 Node:节点对象
特点
- 所有dom对象都可以被认为是一个节点
方法
1.CRUD dom数
-
appendChild():向节点的子节点列表的结尾添加新的子节点
-
removeChild():删除(并返回)当前节点的指定子节点
-
replaceChile():用新节点替换一个子节点
<script> var element_but1 = document.getElementById("del"); var element_but2 = document.getElementById("add"); //删除 element_but1.onclick = function (){ var element_div1 = document.getElementById("div1"); var element_div2 = document.getElementById("div2"); element_div1.removeChild(element_div2); } //添加 element_but2.onclick = function (){ var element_div1 = document.getElementById("div1"); var div3 = document.createElement("div"); div3.setAttribute("id","div3"); element_div1.appendChild(div3); } </script>
属性
- parentNode:获取该节点的父节点
5.4 HTML DOM
标签体的设置和获取
-
innerHTML
<script> var div1 = document.getElementById("div1"); div1.innerHTML += "<input type='text'>"; </script>
控制样式
-
style.样式名:单个设置样式,适合设置的样式少
-
className:直接设置css的定义的好的样式,适合设置的样式多
<script> var div1 = document.getElementById("div1"); //修改方式1,通过style div1.style.color = "red"; //修改方式2,使用className div1.className = "div1";//div1是css的一个选择器 </script>
6.事件
功能
- 某些组件被执行了某些操作后,触发某些代码的执行
- 如:我方水晶(某些组件)被摧毁后(某些操作),我就开始骂人(触发某些代码的执行)
事件
https://www.runoob.com/tags/ref-eventattributes.html
绑定
<!--方式1 通过JS获取元素对象,然后指定JS事件属性,设置函数对象-->
<img src="image/off.png" id="light2">
<script>
function fun(){
alert("light on");
}
let light2 = document.getElementById("light2");
//注意:函数不用加括号,代表函数对象
light2.onclick = fun;
/*
或者直接
light2.onclick = function(){
alert("light on");
}
*/
</script>
<!--方式2 在html标签中指定事件触发的JS代码-->
<!--不建议使用,因为耦合度高-->
<img src="image/off.png" id="light" onclick="fun()">
<script>
function fun(){
alert("light on");
}
</script>
6.1 常见事件
点击事件
- onclick:单击事件
- ondblclick:双击事件
焦点事件
- onblur:失去焦点(需要先获取焦点)
- onfocus:获得焦点
加载事件
- onload:一张页面或图形被完成加载
鼠标事件
- onmousedown:鼠标被按下
- onmousemove:鼠标被移动
- onmouseout:鼠标从元素移开
- onmouseover:鼠标移到某元素之上
- onmouseup:鼠标按键被松开
键盘事件
- onkeydown:某按键按下
- onkeyup:某按键被松下
- onkeypress:按下并松开
选择和改变
- onchange:域的内容被改变
- onselect:文本被选择
表单
-
onsumbit:确认按钮被点击
- 方法返回false则表单被阻止提交
6.2 形参event
- 执行事件function的时候会传入一个事件对象
- 用event接收后,可以访问event的属性查看事件信息
- 如event.button可以知道按下了哪个键
- https://www.runoob.com/jsref/dom-obj-event.html