文章目录
1 概述
JavaScript发展史
- 1992年,Nombase(网景)公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为 : C-- ,后来更名为:ScriptEase
- 1995年,Netscape公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript
- 1996年,微软抄袭 JavaScript 开发出 JScript 语言
- 1997年,ECMA(欧洲计算机制造商协会),制定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。
- 故JavaScript = ECMAScript + BOM+DOM (JavaScript自己特有的东西)
2 ECMAScript
- ECMAScript即客户端脚本语言的标准。
2.1 基本语法
html引入 | 介绍 |
---|---|
内部js | 定义<script> ,标签体内容就是js代码 |
外部js | 定义<script> ,通过src属性引入外部的js文件 |
<!-- 内部js -->
<script>
alert("hello world")
</script>
<!-- 外部js -->
<script src="js/helloWorld.js"></script>
<script>
可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。比如获取元素时,script不能写在html页面之前,这样因为控件还没创建,故获取不到元素。- 语句以分号(;)结尾,如果一行只有一条语句则分号可以省略 (但不建议)
<script>
可以定义多个
2.1.1 数据类型
-
原始数据类型(基本数据类型)
类型 含义 备注 number 数字 整数/小数/NaN string 字符串 “abc” ‘abc’ (单双引号都可) boolean 布尔值 true或false null 空 undefined 未定义 默认 -
引用数据类型:对象
2.1.2 变量
-
变量是指一小块存储数据的内存空间。Java语言是强类型语言,而JavaScript是弱类型语言,区别如下:
类型 特点 强类型 在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据 弱类型 在开辟变量存储空间时,不定义空间将来的存储数据类型。可以存放任意类型的数据 -
语法:
var 变量名 = 初始化值;
-
变量的定义使用var关键字,也可以不使用。用:定义的变量是局部变量;不用:定义的变量是全局变量(不建议)。
-
typeof运算符:获取变量的类型。注:null运算后得到的是object
2.1.3 运算符
一元运算符
运算符 | 含义 | 备注 |
---|---|---|
++/– | 自增/ 自减 | 在前,先自增,再运算; 在后,先运算,再自增。 |
+/- | 正号/ 负号 | 在js中,如果运算数不是运算符所要求的类型, 那么js引擎会自动的将运算数进行类型转换 |
- 注: 其他类型转number
- string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
- boolean转number:true转为1,false转为0
算数运算符
运算符 | 含义 |
---|---|
+ | 加 |
- | 减 |
* | 乘 |
/ | 除 |
% | 模 |
赋值运算符
运算符 | 含义 |
---|---|
= | 赋值 |
+= | 加等 |
-= | 减等 |
*= | 乘等 |
/= | 除等 |
比较运算符
运算符 | 含义 |
---|---|
> | 大于 |
< | 小于 |
>= | 大于等于 |
<= | 小于等于 |
== | 等于 |
=== | 全等于 |
-
比较方式:
- 类型相同:直接比较 。字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
- 类型不同:先进行类型转换,再比较。全等于(即 === )在比较之前,先判断类型,如果类型不一样,则直接返回false。
<script> document.write(("123" == 123) + "<br>"); // true document.write(("123" === 123) + "<br>"); // false </script>
逻辑运算符
运算符 | 含义 |
---|---|
&& | 与 |
l l | 或 |
! | 非 |
-
其他型转boolean
- number:0或NaN为假,其他为真
- string:除了空字符串(""),其他都是true
- null & undefined:都是false
- 对象:所有对象都为true
三元运算符
- 语法:
表达式?值1:值2
。判断表达式的值,如果是true则取值1;如果是false则取值2。
<script>
var result = 3 > 4 ? 1 : 0;
document.write(result); //0
</script>
2.1.4 流程控制语句
语句 | 功能 |
---|---|
if…else… | 选择语句 |
switch | 选择语句 |
for | 循环语句 |
while | 循环语句 |
do…while(不常用) | 循环语句 |
- switch 注意事项
- js中,switch语句可以接受任意的原始数据类型(上面的五种)
- java中,switch语句可以接受 char、byte、short、int、枚举(jdk1.5) ,String(jdk1.7)
2.2 基本对象
2.2.1 Function:函数(方法)对象
-
创建
<script> //法1.var fun = new Function(形式参数列表,方法体); (不常用) var fun1 = new Function("a", "b", "c", "document.write(a+b+c);"); fun1(1, 2, 3); //调用==>结果6 //法2: //function 方法名称(形式参数列表){ // 方法体 //} function fun2(a, b, c) { document.write(a + b + c); } fun2(4,5,6); //法3 //var 方法名 = function(形式参数列表){ // 方法体 //} var fun3 = function(a,b,c){ document.write(a + b + c); } fun3(7,8,9); </script>
-
属性
<!-- vscode格式化代码快捷键:shift + alt + f --> <script> var fun1 = new Function("a", "b", "c", "document.write(a+b+c);"); fun1(1, 2, 3); // 结果:6 document.write("<br/>"); // length属性:代表形参的个数。调用时是fun1,不是fun1() document.write(fun1.length); //结果:3 </script>
-
特点
- 方法定义是,形参的类型不用写,返回值类型也不写。(因为都为 var,故可省)
- 方法是一个对象,如果定义名称相同的方法,会覆盖。(java不允许定义同名同参的方法,会报错)
- 在js中,方法的调用只与方法的名称有关,和参数列表无关。(参数多写少写也没事,因为有argumens对象)
- 在方法声明中有一个隐藏的内置对象(数组),arguments 封装所有的实际参数
2.2.2 Array:数组对象
-
创建
<script> //法1.var arr = new Array(元素列表); var arr1 = new Array(1, 2, 3); document.write(arr1 + "<br/>"); // 结果 1,2,3 //法2. var arr = new Array(默认长度); var arr2 = new Array(3); //默认长度是3 document.write(arr2 + "<br/>"); //结果 ,, (即三个都为空) //法3. var arr = [元素列表]; var arr3 = [1, 2, 3]; document.write(arr3 + "<br/>"); // 结果 1,2,3 </script>
-
方法
<script> //1.join(参数):将数组中的元素按照指定的分隔符拼接为字符串 var arr4 = new Array(520, "I love you", true); document.write(arr4.join("--") + "<br/>"); // 结果 520--I love you--true //2.push() 向数组的末尾添加一个或更多元素,并返回新的长度。 arr4.push(1314); document.write(arr4.join("--") + "<br/>"); // 结果 520--I love you--true--1314 </script> <!-- 特点:js中,数组元素的类型是可变的、数组长度是可变的!!! -->
2.2.3 Date:日期对象
- 创建
var date = new Date();
- 方法
- toLocaleString():返回当前date对象对应的时间本地字符串格式
- getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
<script>
var date = new Date();
document.write(date + "<br/>");
document.write(date.toLocaleString() + "<br/>");
document.write(date.getTime() + "<br/>");
//结果
//Sat Sep 05 2020 16: 33: 11 GMT + 0800(中国标准时间)
//2020 / 9 / 5 下午4: 33: 11
//1599294791298
</script>
2.2.4 Math:数学对象
- 创建:Math对象不用创建,直接使用即可,如 Math.方法名()。
- 方法
- random():返回 0 ~ 1 之间的随机数。 含0不含1,即 [ 0 , 1)。
- ceil(x):对数进行上舍入。
- floor(x):对数进行下舍入。
- round(x):把数四舍五入为最接近的整数。
<script>
document.write(Math.random() + "<br/>");
document.write(Math.ceil(3.14) + "<br/>");
document.write(Math.floor(3.14) + "<br/>");
document.write(Math.round(3.14) + "<br/>");
document.write(Math.PI + "<br/>");
/**
* 结果
* 0.19438063168102482
* 4
* 3
* 3
* 3.141592653589793
*/
</script>
2.2.5 RegExp:正则表达式对象
正则表达式
- 正则表达式是定义字符串的组成规则
-
单个字符:如 [a] [ab] [a-zA-Z0-9_]
符号 含义 \d 单个数字字符 [0-9] \w 单个单词字符[a-zA-Z0-9_]
即数字字母下划线 -
量词符号
符号 含义 ?
表示出现0次或1次 *
表示出现0次或多次 +
出现1次或多次 {m,n} 表示 m<= 数量 <= n m如果缺省,即{,n} 最多n次 n如果缺省,即{m,} 最少m次 -
开始结束符号
符号 含义 ^
开始 $
结束
正则对象
-
创建
-
法1:var reg = new RegExp(“正则表达式”);
-
法2:var reg = /正则表达式/; (注不能加引号,否则当字符串)
-
方法
- test(参数):验证指定的字符串是否符合正则定义的规范
<script> // reg与reg2等价 var reg = new RegExp("^\\w{6,12}$"); var reg2 = /^\w{6,12}$/; document.write(reg + "<br/>"); document.write(reg2 + "<br/>"); var username = "zhangliang"; var flag1 = reg.test(username); var flag2 = reg2.test("123"); document.write(flag1 + "<br/>"); document.write(flag2 + "<br/>"); /** * 结果 * /^\w{6,12}$/ * /^\w{6,12}$/ * true * false */ </script>
2.2.6 Global:全局对象
-
特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。方法名();
-
方法
方法 作用 encodeURI() url 编码 decodeURI() url 解码 encodeURIComponent() url 编码
(比 encodeURI() 编码的字符更多)decodeURIComponent() url 解码 parseInt() 将字符串转为数字
(逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number)isNaN() 判断一个值是否是NaN
(isNaN六亲不认,连自己都不认。NaN参与的==比较全部为false)eval() 将 JavaScript 字符串,并把它作为脚本代码来执行 -
URL编码
- 略
2.2.7 Boolean、Number、String对象
- 略,同java
3 BOM
3.1 概述
- Browser Object Model 浏览器对象模型
3.2 组成
- Window:窗口对象
- Navigator:浏览器对象
- Screen:显示器屏幕对象
- History:历史记录对象
- Location:地址栏对象
3.3 窗口对象(window)
-
创建
-
方法
-
主要分为以下三类:弹出框相关、打开关闭相关、定时器相关
序号 方法 说明 1 alert() 显示带有一段消息和一个确认按钮的警告框 2 confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
如果用户点击确定按钮,则方法返回true
如果用户点击取消按钮,则方法返回false3 prompt() 显示可提示用户输入的对话框
返回值:获取用户输入的值4 close() 关闭浏览器窗口
(谁调用我,我关谁)5 open() 打开一个新的浏览器窗口
(返回新的Window对象)6 setTimeout() 在指定的毫秒数后调用函数或计算表达式;返回值为唯一标识,用于取消定时器
(参数1:js代码或者方法对象;参数2:毫秒值)7 clearTimeout() 取消由 setTimeout() 方法设置的 timeout 8 setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式 9 clearInterval() 取消由 setInterval() 设置的 timeout
-
-
属性
- 获取其他 BOM 对象
- history
- location
- navigator
- screen
- 获取 DOM 对象
- document
- 获取其他 BOM 对象
-
特点
- window对象不需要创建可以直接使用 window 使用。window.方法名();
- window引用可以省略。方法名();
3.4 地址栏对象(Location)
- 获取
- window.location
- location
- 方法
- reload():重新加载当前文档,即刷新
- 属性
- href:设置或返回完整的 URL
3.5 历史记录对象(History)
- 创建(获取)
- window.history
- history
- 方法
- back():加载 history 列表中的前一个 URL
- forward():加载 history 列表中的下一个 URL
- go(参数):加载 history 列表中的某个具体页面
- 参数为正数:前进几个历史记录;参数为负数:后退几个历史记录
- 属性
- length:返回当前窗口历史列表中的 URL 数量
4 DOM
4.1 概念
-
Document Object Model:文档对象模型
-
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作
4.2 W3C DOM 标准
- W3C DOM 标准被分为 3 个不同的部分
- 核心 DOM:针对任何结构化文档的标准模型
- Document:文档对象
- Element:元素对象
- Attribute:属性对象
- Text:文本对象
- Comment:注释对象
- Node:节点对象,其他5个的父对象
- XML DOM:针对 XML 文档的标准模型
- HTML DOM:针对 HTML 文档的标准模型
4.3 核心DOM
Document:文档对象
- 创建(获取):在html dom模型中可以使用window对象来获取
- window.document
- document(一般window可省略)
- 方法
- 获取Element对象
1. getElementById():根据id属性值获取元素对象。id属性值一般唯一
2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组 - 创建其他DOM对象
1. createAttribute(name)
2. createComment()
3. createElement()
4. createTextNode() - 属性
Element:元素对象
- 获取/创建:通过document来获取和创建
- 方法
- removeAttribute():删除属性
- setAttribute():设置属性
Node:节点对象,其他5个的父对象
-
特点:所有dom对象都可以被认为是一个节点
-
方法
CURD DOM 树
- appendChild():向节点的子节点列表的结尾添加新的子节点。
- removeChild() :删除(并返回)当前节点的指定子节点。
- replaceChild():用新节点替换一个子节点。
-
属性
- parentNode 返回节点的父节点。
4.4 HTML DOM
-
标签体的设置和获取:innerHTML
-
使用html元素对象的属性
-
控制元素样式
-
使用元素的style属性来设置
-
提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。
// 样例代码 // 修改样式方式1 div1.style.border = "1px solid red"; div1.style.width = "200px"; // font-size--> fontSize div1.style.fontSize = "20px";
-
4.5 事件监听机制
-
事件绑定
<!--法1:利用属性绑定--> <img id="light" src="img/off.gif" onclick="fun();" /> <img id="light2" src="img/off.gif" /> <script> function fun() { alert("我被点了"); } function fun2() { alert("我也被点了"); } var ligth2 = document.getElementById("light2"); //法2:绑定事件 light2.onclick = fun2(); </script>
-
概念
- 事件:某些操作。如:单击,双击,键盘按下了,鼠标移动了
- 事件源:组件。如:按钮,文本输入框…
- 监听器:代码
- 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
-
常见事件
-
点击事件
事件 说明 onclick 单击事件 ondblclick 双击事件 -
焦点事件
事件 说明 onblur 失去焦点 onfocus 元素获得焦点 -
加载事件
事件 说明 onload 一张页面或一幅图像完成加载 -
鼠标事件
事件 说明 onmousedown 鼠标按钮被按下 onmouseup 鼠标按键被松开 onmousemove 鼠标被移动 onmouseover 鼠标移到某元素之上 onmouseout 鼠标从某元素移开 -
键盘事件
事件 说明 onkeydown 某个键盘按键被按下 onkeyup 某个键盘按键被松开 onkeypress 某个键盘按键被按下并松开 -
选择和改变
事件 说明 onchange 域的内容被改变 onselect 文本被选中 -
表单事件
事件 说明 onsubmit 确认按钮被点击 onreset 重置按钮被点击
-