JavaScript基础
[toc]
# JavaScript历史背景
- 布兰登 • 艾奇(Brendan Eich,1961年~至今),1995年在网景公司,发明的JavaScript。
- 一开始JavaScript叫做LiveScript,但是由于当时Java这个语言特别火,所以为了傍大牌,就改名为JavaScript。
- 同时期还有其他的网页语言,比如VBScript、JScript等等,但是后来都被JavaScript打败了,所以现在的浏览器中,只运行一种脚本语言就是JavaScript。
# 什么是JavaScript
JavaScript是web上一种功能强大的编程语言,用于开发交互式的web页面。它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行。
- JavaScript被设计用来向HTML页面添加交互行为。
- JavaScript是一种脚本语言(脚本语言是一种轻量级的编程语言)。
- JavaScript由数行可执行计算机代码组成。
- JavaScript通常被直接嵌入HTML页面。
- JavaScript是一种解释性语言(就是说代码执行不进行预编译)。
# JavaScript的组成
- 核心(ECMAscript):语法,语句。
- 文档对象模型(DOM):document object model,操作文档中的元素和内容。
- 浏览器对象模型(BOM):浏览器对象。
# JavaScript的作用
- 使用JavaScript添加页面动画效果,提供用户操作体验。
- 主要应用有:嵌入动态文本于HTML页面、对浏览器事件作出响应、读取HTML元素、验证提交数据、检测访客的浏览器信息等。
# JavaScript的引入
在HTML文件中引入JavaScript有3种方式,一种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式,另一种是链接外部JavaScript脚本文件,称为外联式。
行内引入,在标签元素中引入js代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内引入js</title> <style> #div1 { background-color: red; width: 80px; height: 40px; } </style> </head> <body> <div id="div1" onclick="alert('点击了哈哈哈')">哈哈哈</div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17内嵌式,在HTML文档中,通过
<script>
标签引入<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引入js的方式</title> <style> #div1 { background-color: red; width: 80px; height: 40px; } </style> <!-- style标签只能放在head头部标签中,script标签即可以放在head头部标签中,也可以放在body标签中。--> <!-- html页面加载顺序是从上往下开始加载的。所以当script标签(里边有对页面元素进行操作的代码)放在head头部中可能会出现,无法执行script标签内的代码的情况。--> <script type="text/javascript"> alert("哈哈哈哈哈哈哈") </script> </head> <body> <!--<div id="div1" onclick="alert('点击了哈哈哈')">哈哈哈</div>--> <div id="div1">哈哈哈</div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23外联式,在HTML文档中,通过
<script src="">
标签引入xxx.js
文件quote_js.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>引入js的方式</title> <style> #div1 { background-color: red; width: 80px; height: 40px; } </style> <!-- 外联式引入js--> <script type="text/javascript" src="main.js"></script> <!-- style标签只能放在head头部标签中,script标签即可以放在head头部标签中,也可以放在body标签中。--> <!-- html页面加载顺序是从上往下开始加载的。所以当script标签(里边有对页面元素进行操作的代码)放在head头部中可能会出现,无法执行script标签内的代码的情况。--> <!-- <script type="text/javascript">--> <!-- alert("哈哈哈哈哈哈哈");--> <!-- </script>--> </head> <body> <!--<div id="div1" onclick="alert('点击了哈哈哈')">哈哈哈</div>--> <div id="div1">哈哈哈</div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25main.js
alert("外联js");
1
# 基本语法
# 注释
通过添加注释来对JavaScript代码进行注释,增强代码可读性
- 单行注释:以
//
开头 - 多行注释:以
/*
开始,以*/
结尾
# 变量命名规则
- 必须以字母或下划线开头
- 变量名不能包含空格等符号
- 不能使用JavaScript关键字作为变量名,如:
function
- 变量名对大小写敏感,JavaScript严格区分大小写。
- 小驼峰命名
# 变量声明
- 必须使用
var
关键字来声明变量,JavaScript变量可以不声明,直接使用。默认值:undefined
var name;
1 - 声明变量并赋值
//JavaScript是弱类型语言,即同一个变量可以存放不同类型的数据。(js在声明变量时不用指定变量的数据类型,这点跟Java不同。) var name = "小花花"; var age = 21; var gender; // console.log()打印变量值到控制台 console.log("name:" + name); console.log("age:" + age);
1
2
3
4
5
6
7 - 同时声明多个变量并赋值
//同时给多个变量赋值 var a = 10, b = 20, c = 30; console.log(a, b, c);
1
2
3
# 数据类型
- 数字类型
var bookName = "疯狂Python讲义"; var price = 59.99; console.log("《" + bookName + "》" + "售价" + price + "元");//输出:《疯狂Python讲义》售价59.99元
1
2
3 - 字符串
var bookName = "疯狂Python讲义"; var price = 59.99; console.log("《" + bookName + "》" + "售价" + price + "元");//输出:《疯狂Python讲义》售价59.99元
1
2
3 - 数组
//类似于Python中的列表,通过下标进行取值 var myArrayList = Array(1, 2, 3, "哈哈哈"); console.log(myArrayList[0]); console.log(myArrayList[1]); console.log(myArrayList[2]); console.log(myArrayList[3]); //length返回数组的长度 console.log("myArrayList数组的长度为:" + myArrayList.length);//myArrayList数组的长度为:4 //push向数组末尾插入元素 myArrayList.push("Go"); console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go"] myArrayList.push("Python", "Java"); console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go", "Python", "Java"] //pop删除数组中最后一个元素并将被删除的元素返回 console.log(myArrayList.pop());//Java console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go", "Python"] console.log(myArrayList.pop());//Python console.log(myArrayList);//[1, 2, 3, "哈哈哈", "Go"] console.log(myArrayList.pop());//Go console.log(myArrayList);//[1, 2, 3, "哈哈哈"]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 null
,类似于Python中的None
//null:空类型,类似于Python中的None var myHobby = null; //变量已声明未赋值,此变量不是空类型,是undefined var myHeight; console.log("myHobby:" + myHobby + ", myHeight:" + myHeight);//myHobby:null, myHeight:undefined
1
2
3
4
5undefined
//null:空类型,类似于Python中的None var myHobby = null; //变量已声明未赋值,此变量不是空类型,是undefined var myHeight; console.log("myHobby:" + myHobby + ", myHeight:" + myHeight);//myHobby:null, myHeight:undefined
1
2
3
4
5boolean
var areYouOK = true; var areWeOK = false; console.log("areYouOK:" + areYouOK);//areYouOK:true console.log("areWeOK:" + areWeOK);//areWeOK:false
1
2
3
4
# 运算符
- 算术运算符:
+(加)
,-(减)
,*(乘)
,/(除)
,%(取余)
- 赋值运算符:
=(赋值)
,+=(加等于)
,-=(减等于)
,*=(乘等于)
,/=(除等于)
,%=(取余等于)
- 条件运算符:
==(代表相等,比较的两个值内容相等即可,数据类型可以不一样)
,===(代表严格相等:数据类型和值都相等)
,>
,>=
,<
,<=
,!=
- 逻辑运算符:
&&(并且)
,||(或者)
,!(否)
# 条件语句
if ... else if ... else...
语句var age = 21; if (age > 21) { console.log("年龄大于21岁!"); } else if (age === 21) { console.log("年龄等于21岁!"); } else { console.log("年龄小于21岁!"); } //输出:年龄等于21岁!
1
2
3
4
5
6
7
8
9switch
语句var a = 9, b = 7; switch (a - b) { case 4: console.log(a + " - " + b + " = " + 4); break; case 2: console.log(a + " - " + b + " = " + 2); break; case 3: console.log(a + " - " + b + " = " + 3); break; default: console.log(a + " - " + b + " = 默认值"); break; } //输出:9 - 7 = 2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 循环
while
循环
var a = 21;
while (a <= 30) {
console.log(a);//输出:21到30
a++;
}
2
3
4
5
for
循环
for (var i = 1; i <= 10; i++) {
console.log(i);//输出1到10
}
2
3
for in
循环
for in
循环遍历数组var myArray = Array("小花花", 21, "女", "打羽毛球"); for (j in myArray) { // console.log(j);//输出0到3,输出的是myArray数组的元素下标 console.log(myArray[j]);//输出:小花花 21 女 打羽毛球 }
1
2
3
4
5for in
循环遍历对象var objA = { name: "小花花", age: 21, gender: "女", hobby: "旅行" }; for (n in objA) { // console.log(n);//输出的是对象的属性:name age gender hobby console.log(objA[n]);//输出对象的属性值:小花花 21 女 旅行 }
1
2
3
4
5
6
7
8
9
10
# 函数
# 函数定义
定于本函数的关键字function
,函数内的代码块包裹在花括号内
//函数定义 使用function关键字
function test() {
console.log("这是一个函数!");
}
//函数调用
test();
//输出:这是一个函数!
2
3
4
5
6
7
8
# 函数参数
//函数定义 使用function关键字
function addition(a, b) {
result = (a + b);
console.log(a + " + " + b + " = " + result);
}
//函数调用
addition(100, 199);
//输出:100 + 199 = 299
2
3
4
5
6
7
8
9
# 函数返回值
//在使用return语句时,程序执行到return语句时会立刻终止,并返回函数的返回值
function addition(a, b) {
result = (a + b);
return result;
}
//函数调用
var res = addition(100, 199);
console.log("res = " + res);
//输出:res = 299
2
3
4
5
6
7
8
9
10
# 对象
# 创建对象
创建对象的两种方式
- 方式一
objA = new Object();
1 - 方式二,类似于Python中的字典
var objB = {};
1
# 对象属性
- 对象的属性以键值对(name:value)的形式定义,属性由逗号分离。
var objC = {name: "python", age: 21, gender: "男"};
1 - 创建对象属性声明可以横跨多行
var objD = { name: "小花花", age: "21", gender: "女" };
1
2
3
4
5
# 操作对象的属性
var objC = {name: "小华华", age: 21, gender: "男"};
//获取objC对象的属性
console.log(objC.name);//小华华
console.log(objC["age"]);//21
console.log(objC);//{name: "小华华", age: 21, gender: "男"}
//修改objC对象的属性值
objC.name = "小刚刚";
console.log(objC);//{name: "小刚刚", age: 21, gender: "男"}
objC["age"] = 22;
console.log(objC);//{name: "小刚刚", age: 22, gender: "男"}
2
3
4
5
6
7
8
9
10
# 对象方法
//对象方法:对象方法是作为属性来存储的函数
var objD = {
name: "小花花",
age: "21",
gender: "女",
func: function (a, b) {
alert("对象方法");
this.name = "大花花";//this来修改了objD对象的name属性的值为"大花花"
return a + b;
}
};
res = objD.func(10, 15);
console.log(res);//25
console.log(objD);//{name: "大花花", age: "21", gender: "女", func: ƒ}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# JS操作页面
# DOM简介
通过HTML DOM可以访问JavaScript文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM被构造为对象的树。
HTML DOM树
节点树中的节点彼此拥有层级关系
- 父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
通过可编程的对象模型,JavaScript获得了足够的能力来创建动态的HTML。
- 如何改变HTML元素的内容(innerHTML)。
- 如何改变HTML元素的样式(CSS)。
- 如何对HTML DOM事件做出反应。
- 如何添加或删除HTML元素。
# 获取页面标签
通常通过JavaScript操作HTML元素,可以使用内置的对象document的方法来找到标签。
test_js.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js操作页面</title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div class="div3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="div4">div4</div>
</body>
</html>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- 通过
id
找到HTML元素(常用)。document.getElementById();
//等到页面全部加载完成后再执行 window.onload = function () { //通过id选择元素 var div2 = document.getElementById("div2"); div2.style.backgroundColor = 'red'; div2.style.width = "50px"; div2.style.height = "50px"; };
1
2
3
4
5
6
7
8 - 通过标签名找到HTML元素
- 获取出来的是列表
getElementsByTagName();
//等到页面全部加载完成后再执行 window.onload = function () { //通过tagName标签名字来选择,返回的是选择集 var div3_col = document.getElementsByTagName('li'); console.log("div3_col:", div3_col); for (var j = 0; j < div3_col.length; j++) { if (j % 2 !== 0) { console.log(div3_col[j]); div3_col[j].style.backgroundColor = 'pink'; } } };
1
2
3
4
5
6
7
8
9
10
11
12
13 - 通过
class
类名找到HTML元素(通过class查找HTML元素在IE5,6,7,8中无效)- 获取出来的是列表
getElementsByClassName();
//等到页面全部加载完成后再执行 window.onload = function () { //通过class选择元素,返回的是选择集 var div4_col = document.getElementsByClassName('div4'); console.log("div4_col:", div4_col);//HTMLCollection [div.div4] var div4 = document.getElementsByClassName('div4')[0]; div4.style.background = '#9297a2'; };
1
2
3
4
5
6
7
8
执行以上js代码后,在浏览器中test_js.html
渲染效果如下
# 操作标签内容
innerHTML
用来获取/替换HTML元素的内容。
- 读取HTML元素内容
var div1 = document.getElementsByClassName("div1")[0]; //输出被选择标签(div1)内的所有HTML内容 console.log(div1.innerHTML); /* div1.innerHTML输出: <ul> <li>li1</li> <li>li2</li> <li>li3</li> <li>li4</li> <li>li5</li> </ul> <h3>哈啊啊啊啊啊啊啊</h3> */
1
2
3
4
5
6
7
8
9
10
11
12
13
14 - 只读取HTML元素文本
var div1 = document.getElementsByClassName("div1")[0]; //只获取被选择标签(div1)内的HTML内容的文本 console.log(div1.innerText); /* div1.innerText输出: li1 li2 li3 li4 li5 哈啊啊啊啊啊啊啊 */
1
2
3
4
5
6
7
8
9
10
11
12 - 替换HTML元素内容
var div1 = document.getElementsByClassName("div1")[0]; //innerHTML修改被选择标签里的内容 div1.innerHTML = "<h1>人生苦短,Let's Go!</h1>"; //输出被选择标签(div1)内的所有HTML内容 console.log(div1.innerHTML);//console控制台输出:<h1>人生苦短,Let's Go!</h1>
1
2
3
4
5
代码示例
action_label_content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作标签内容</title>
<script src="action_label_content.js"></script>
</head>
<body>
<br>
<form action="">
请输入:<input type="text" id="input1">
</form>
<br>
<div class="div1">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<h3>哈啊啊啊啊啊啊啊</h3>
</div>
<a href="https:www.baidu.com" target="_blank" id="baidu1" class="baidu2">百度一下</a>
</body>
</html>
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
action_label_content.js
window.onload = function () {
var div1 = document.getElementsByClassName("div1")[0];
//输出被选择标签(div1)内的所有HTML内容
console.log(div1.innerHTML);
/*
div1.innerHTML输出:
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<h3>哈啊啊啊啊啊啊啊</h3>
*/
//只获取被选择标签(div1)内的HTML内容的文本
console.log(div1.innerText);
/*
div1.innerText输出:
li1
li2
li3
li4
li5
哈啊啊啊啊啊啊啊
*/
/**
* innerHTML写入节点文本
*/
//innerHTML修改被选择标签里的内容
div1.innerHTML = "<h1>人生苦短,Let's Go!</h1>";
//输出被选择标签(div1)内的所有HTML内容
console.log(div1.innerHTML);//console控制台输出:<h1>人生苦短,Let's Go!</h1>
//只获取被选择标签(div1)内的HTML内容的文本
console.log(div1.innerText);//console控制台输出:人生苦短,Let's Go!
};
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
# 修改标签属性
html代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作标签内容</title>
<script src="action_label_content.js"></script>
</head>
<body>
<br>
<form action="">
请输入:<input type="text" id="input1">
</form>
<br>
<div class="div1">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<h3 id="h3Id" class="h3Class">哈啊啊啊啊啊啊啊</h3>
</div>
<div class="div2">哈哈哈哈哈哈哈</div>
<a href="https:www.baidu.com" target="_blank" id="baidu1" class="baidu2">百度一下</a>
</body>
</html>
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
JavaScript代码示例
window.onload = function () {
/**
* 修改元素属性
*/
var a = document.getElementById("baidu1");
//将a标签的超链接`https:www.baidu.com`改为`https:www.jd.com`
a["href"] = "https:www.jd.com";
//将a标签的文本`百度一下`改为`点我跳转至京东`
a["text"] = "点我跳转到京东";
//修改a标签的class属性名(两种方式都可以修改)
a["className"] = "a_CLASS";
//操作Class的时候,需要将`class`修改为`className`
a.className = "a_CLASS1";
var input = document.getElementById("input1");
//input文本输入框修改为密码输入框
input.type = "password";
/**
* 修改元素CSS样式
*/
var div2 = document.getElementsByClassName("div2")[0];
div2.style.background = "pink";
div2.style.width = "50%";
div2.style["height"] = "100px";
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# onclick事件
onclick事件是指HTML元素绑定了点击事件,在前端页面只要点击了该HTML元素就会触发点击事件。
HTML
行内标签绑定onclick
事件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作标签内容</title> <script src="action_label_content.js"></script> </head> <body> <div class="div3" style="background-color: #1E90FF;width: 100px;height: 80px" onclick=alert("你点击了div3")>div3</div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11- HTML行内标签绑定
onclick
事件,onclick
事件绑定需要调用的函数(函数需要声明在当前HTML页面的head中)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作标签内容</title> <script src="action_label_content.js"></script> <script> //定义一个函数,作为div4的onclick点击事件 function myClick() { alert("你点击了div4!"); } </script> </head> <body> //给div定义一个onclick事件,触发该事件时,调用onclick绑定的函数 <div class="div4" style="background-color: chartreuse;width: 100px;height: 80px" onclick="myClick()">div4</div> </body> </html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- 01
- Python实现对字符串的加解密02-25
- 02
- Python3对大文件中指定字符进行排序再写入到新的文件10-24
- 03
- Ubuntu下配置adb环境连接Android设备进行调试08-17