本文档适合初学者学习JavaScript时参考
万字以上的总结,包括基本的程序演示以及简略的对正则表达式的介绍,相信初学者看完一定有所收获
看完这篇还可以看看博主对HTML和CSS的总结,超级适合初学者,传送地址:HTML & CSS 初学者必知必会
文章目录
一、JavaScript介绍
二、JavaScript和HTML代码结合的方式
- 在head或body标签中使用script标签书写JavaScript代码
- 单独的创建JS文件,通过script标签引入
三、变量 - JavaScript中变量的类型
- JavaScript中的特殊值
- JavaScript中定义变量的格式
代码示例
四、关系运算
五、逻辑运算 - &&:且运算
- ||:或运算
- !:取反运算
代码示例
六、数组
七、函数 - 函数的定义方式一
- 函数的定义方式二
八、函数的arguments隐形参数
九、JavaScript中的自定义对象 - Object形式的自定义对象
- 花括号形式的自定义对象
十、JavaScript中的事件 - 事件的概念
- 常用的事件
- 事件的注册(绑定)
JavaScript 事件的代码演示
十一、正则表达式
十二、DOM模型 - Document对象
- Document对象的理解
- HTML标签对象化
- Document对象中的方法介绍
getElementById方法代码示例
getElementsByName方法代码示例
十三、DOM模型中节点的常用属性和方法 - 方法
- 属性
createElement代码示例
一、JavaScript介绍
简介:
JavaScript语言可以动态的美化页面、验证表单的数据,需要浏览器解析执行JS代码
特点:
交互性(JS可完成信息的动态交互)
安全性(不允许直接访问本地硬盘)
跨平台性(只要是可以解析JS的浏览器都可执行,与平台无关)
注意:JavaScript与Java无关联,JS是弱类型,Java是强类型
强类型是定义变量时类型已经确定且不可变,弱类型是类型可变
二、JavaScript和HTML代码结合的方式
- 在head或body标签中使用script标签书写JavaScript代码
1
代码示例:
- 单独的创建JS文件,通过script标签引入
1
(1)创建单独的JS文件
(2)使用script标签引入JS文件
-
JavaScript中的特殊值
undefined:未定义,所有JS变量未赋予初始值时默认值均为undefined
null:空值
NaN:非数字,因为运算不能执行而导致,如数值和字符串运算,属于number类型 -
JavaScript中定义变量的格式
var 变量名;
var 变量名 = 值; -
补充知识:
(1) typeof()是JS语言提供的一个函数,它可以返回参数的类型
(2) JS语言中的注释写法与java一致
代码示例
-
||:或运算
第一种情况:表达式全为假,返回最后一个表达式的值
第二种情况:表达式有一个为真,返回第一个为真的表达式的值(不是返回第一个表达式的值) -
!:取反运算
注意:
&&与||采取短路的策略,即确定了结果后,后面的表达式不再进行判断
在JS语言中所有的变量都可以作为一个boolean类型使用,且0、null、undefined、
””(空串)都认为是false
代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
六、数组
数组的定义方式:
var 数组名 = [];//空数组
var 数组名 = [1,’abc’,true];//定义数组的同时赋值,元素可多种类型
注意:
通过数组下标赋值,会根据最大下标值给数组自动扩容,默认值为undefined
读取数组中已定义元素范围之外的元素,值为undefined,且读取不会自动扩容
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
七、函数
- 函数的定义方式一
使用function关键字
格式:(形参列表无需声明类型)
function 函数名(形参列表) {
函数体
}
注意:在JS语言中只需在函数体内直接使用return语句即可返回值,无需声明返回值类型
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2. 函数的定义方式二
格式:(形参列表无需声明类型)
var 函数名 = function(形参列表) {
函数体
}
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
注意:在JS中没有重载的概念,如果声明了多个重名的函数,不管函数的形参个数是否一致,不管调 用时传入几个参数,只会调用同名函数中的最后一个(会覆盖掉之前),如:
function fun(a,b) {
alert(“有参函数fun(a,b)”);
}
function fun() {
alert(“无参函数fun()”);
}
fun(1,“ad”); //“无参函数fun()”
1
2
3
4
5
6
7
8
八、函数的arguments隐形参数
在函数调用时,浏览器每次都会传递进封装实参的对象arguments,虽然没有给被调用者定义形参, 但依然可以通过arguments调用传递进来的实参:
arguments[i]: 获得传入的下标为i的参数值
arguments.length: 获得传入的参数个数
arguments.callee: 获得该函数本身(返回定义时的写法)
注意:arguments是函数内固有变量,以数组的形式保存了调用方给该函数传入的所有参数
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
九、JavaScript中的自定义对象
- Object形式的自定义对象
var 对象名 = new Object();//创建了一个空对象
对象名.属性名 = 值;//给此对象定义属性
对象名.函数名 = function() {} //给此对象定义函数
对象名.属性名/函数名();//对象的访问
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2. 花括号形式的自定义对象
(注意标点符号,最后一个成员不加逗号)
var 对象名 = {
属性名 :值,
函数名 :function() {}
};
代码示例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
十、JavaScript中的事件
-
事件的概念
电脑输入设备与页面进行交互的响应 -
常用的事件
onload:页面加载完成事件,浏览器解析完页面之后就会自动触发的事件
onclick:单击事件,常用于按钮的点击响应操作
onblur:失去焦点事件(点中输入框准备输入数据时,光标闪烁,称为焦点),常用于输入 框失去焦点后验证其输入内容是否合法
onchange:内容发生改变事件,常用于下拉列表选中项发生改变后操作
onsubmit:
①表单提交事件,常用于表单提交之前验证所有表单项是否合法
②onsubmit事件中return false可以阻止表单提交 -
事件的注册(绑定)
告诉浏览器当事件响应后要执行哪些代码
静态注册事件:通过HTML标签的事件属性直接赋予事件响应后的代码(写成函数形式)
动态注册事件:步骤:
(1) 通过document对象获取标签对象(Dom对象)
(2) 通过标签对象.事件名 = function() {} 赋予事件响应后的代码,代表此标签具有此事件
JavaScript 事件的代码演示
代码示例:静态注册onload事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
代码示例:动态注册onload事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
代码示例:静态注册onclick事件
1
2
3
4
5
6
7
8
9
10
代码示例:动态注册onclick事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
代码示例:静态注册onblur事件
1
2
3
4
5
6
7
8
9
10
11
12
运行结果:当光标不在输入框中时,在控制台输出指定字样:
代码示例:动态注册onblur事件
代码示例:动态注册onchange事件:
代码示例:动态注册onsubmit事件
-
Document对象
-
Document对象的理解
(1) Document管理了HTML文档的所有内容,将这些内容都对象化
(2) Document是一种树形结构,有层级关系
(3) 可以通过Document访问所有的对象 -
HTML标签对象化
-
Document对象中的方法介绍
(注意加s的是返回对象集合)
注意:
查询优先顺序:id --> name --> tagName(越往后查询结果范围越大,还需过滤)
三个查询方法一定要在页面加载完成之后执行才能查询到标签对象
getElementById方法代码示例
getElementsByName方法代码示例
要求实现:
全选 全不选 反选 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 十三、DOM模型中节点的常用属性和方法 节点即标签对象
-
方法
(1) appendChild(ChildNode);添加一个子节点,ChildNode为添加的子节点
(2) createTextNode(Text);创建一个以Text为内容的文本节点 -
属性
(1) childNodes:当前节点的所有子节点
(2) firstChild:当前节点的第一个子节点
(3) lastChild:当前节点的最后一个子节点
(4) parentNode:当前节点的父节点
(5) nextSibling:当前节点的下一个节点
(6) previousSibling:当前节点的上一个节点
(7) className:标签的class属性值
(8) innerHTML:标签中的内容(包括两边的标签)
(9) innerText:标签中的文本(不包括两边的标签) -
注意:可以连写:document.getElementById(“xxx”).事件名 = function () {}
createElement代码示例
————————————————
版权声明:本文为CSDN博主「[Arcadian]」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_49343190/article/details/107510571