JavaScript

概述

JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在HTML页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。

引入（script）

内部引入

在HTML文档中可以使用 <script>... </script>标记将JavaScript脚本嵌入到其中。 ​script属性：

script属性	说明
language	不常用
type	用于指定使用的脚本类型
src	指定外部脚本文件路径
defer	不常用

type属性的语法格式：

<script type = "text/javascript">
	···
</script>

外部引入

多了个src属性 URL 或 本地路径

<script type = "text/javascript" src = "js文件的rul路径">
	···
</script>

注意：

1. 外部JavaScript文件中只能包含JavaScript代码，不能包含HTML和<script>标签。
2. 在<script>标签内部不要存在其他的JavaScript代码。
3. 在链接外部JavaScript文件时</script>结束标签不能省略。

标签属性值引用

在HTML文档中可以在<a>标签、<input>标签 中使用JavaScript脚本作为它们的属性值 通过“JavaScript”调用

<a href="javascript:alert('你好JavaScript')">测试</a>

与实践结合调用

<input type="button" value="测试" onclick="alert('你好JavaScript ')" />

基本语法

1. 执行顺序 程序按照在HTML文件中出现的顺序逐行执行
2. 大小写敏感 在输入语言的关键字、函数名、变量时，都必须采用正确的大小写形
3. 空格与换行 在JavaScript中会忽略程序中的空格、换行和制表符
4. 每行结尾的分号可有可 为了养好习惯，经量写上分号

注释

注释就是向文件代码中添加的--些说明性的文字，或者对代码进行暂时屏蔽。//内容ro /*内容*/

数据类型

数值型

数值类型	说明
十进制	由0~9组成的数字序列
十六进制	“0X”或“0x”开头数字序列
八进制	以0开头
浮点型	传统计数法、科学计数法e或E后面的整数表示10的指数次幂
特殊值Infinity	超出最大值范围，则正 超出最小范围，则负
特殊值NaN	非数字

科学计数法 语法格式：

[digits] [.digits] [E|e[(+| -)]]

例子： $$ 4E+2 = 4*10^{2} = 400 $$

$$ 3.14e4 = 3.14*10^{4} = 31400 $$

$$ .14e4 = 0.14*10^{4} = 1400 $$

$$ 314E-2 = 314*10^{-2} = 3.14 $$

字符串型

字符串型数据是包含在 单引号或双引号 中的

由单引号定界的字符串中可以含有双引号 由双引号定界的字符串中也可以含有单引号

"I'm legend" = I'm legend 
var greetings = "hello";

布尔型

布尔数据类型只有两个值，一 个是true （真），一个是false （假）

特殊类型

转义字符

转义字符 是\，通过转义字符可以在字符串中添加不可显示的特殊字符（例如\n, \t），或者防止引号匹配混乱的问题

转义字符	描述
\r	回车符
\t	水平制表符，Tab空 格
\b	退格
\v	垂直制表符
\f	换页
\n	换行符
\ \	反斜杠
\OOO	八进制，范围000~777
\ '	单引号
\xHH	十六进制整数，范围00~FF
\ "	双引号
\uhhhh	十六进制编码Unicode字符

在document. write()语句中使用转义字符时，只有将其放在格式化文本块中才会起作用，即脚本必须放在<pre></pre>标签内。 代码：

<script type="text/javascript">
    document.write("<pre>");
    document.write("网页基础:\nHTML\nCSS\nJavascript");
    document.write("<pre>");
</script>

空值 (null)

用于定义空的或不存在的引用

未定义（undefined）

表示还没赋值，类似于java中的 空指针异常

常量与变量

常量：固定不变数据 变量：存储要用的数据 如果只是声明了变量，并未对其赋值，则其值默认为undef ined。可以使用var语句重复声明同一个变量，也可以在重复声明变量时为该变量赋一个新值。 在JavaScript中的变量必须要先定义后使用，没有定义过的变量不能直接使用。

算术运算符

用于在程序中进行加、减、乘、除等运算。

比较运算符

对操作数进行比较，然后返回一个布尔值true或faIse.

< , <= , > , >= , == , != , === (绝对等于) , !==(绝对不等于)

赋值运算符

简单赋值运算符： = 符合赋值运算符： += , -= , *= , /= , %=

字符串运算符

用于两个字符串型数据之间的运算符，它的作用是将两个字符串连接起来。 如果比较字符串，则逐个比较字符的ASCIl码值，ASCII码值大的字符串大。ASCII码值都相等，字符数多的字符串大。

逻辑运算符

用于对一个或多个布尔值进行逻辑运算：&&（与 ）、||（或） 、!(非）

条件运算符

表达式?结果1:结果2 结果1为: true 结果2为: false

逗号运算符

用于将多个表达式排在一起，整个表达式的值为最后一个表达式的值。 例子：

var a , b , c , d;
a = (b=3 , c=4 , d=1);
document.write("a最终值为"+a);
//结果为 1

运算符 (typeof)

typeof 用于判断操作数的数据类型。语法格式：

typeof 操作数;

数据类型（操作数）	返回值
数值型	number
字符串型	string
布尔型	boolean
undefined	nudefined
null	object
对象	object
函数	functio

运算符 (new)

new 用来创建一个新的对象实例。语法格式：

格式1： 对象实例名称 = new 对象类型(参数);

格式2： 对象实例名称 = new 对象类型2;

运算符的优先级

优先级	结合性	运算符
最高	向左	、[]、()
由高到低依次排列		++、--、-、！、delete、new、typeof、void
	向左	*、/、%
	向左	+、-
	向左	<<、>> 、>>
	向左	<、<=、>、>=、in、instanceof
	向左	=、!=、=== 、 绝对不等于
	向左	&
	向左	^
	向左	|
	向左	&&
	向左	||
	向右	?:
	向右	=
	向右	=、/=、%=、+=、-=、<<=、>>=、>>>=、&=、^=、|=
最低	向右	,

结合性 左结合：除了赋值、条件和单目运算符 右结合：赋值运算符、条件运算符

表达式

是运算符和操作数组合而成的式子。运算结果可分为：算术表达式、字符串表达式、逻辑表达式 表达式是一个相对的概念，在表达式中可以含有若千个子表达式，而且表达式中的一个常量或变量都可以看作是一个表达式。

转换为数值型

转前类型	转后的数值（数值）
undefined	NaN
null	0
逻辑型	true,则为 1 ;false,则为 0
字符串型	若内容为数字，则相应的数字，否则为NaN
其他对象	NaN（非数字）

转换为布尔型

转前类型	转后的布尔型
undefined	false
null	false
数值型	值为0或NaN,则结果为false,否则为true
字符串型	长度为0，则结果为false,否则为true
其他对象	true

转换为字符串型

转前类型	转后的字符串型
undefined	"undefined"
null	"null"
数值型	NaN、0或者与数值相对应的字符串
逻辑型	值true,则为"true",值为false,则结果为"false"
其他对象	若存在，结果为toString()方法的值，否则结果为"undefined"

语句结构

赋值语句

···

判断语句

if[...else]

if判断语句

if(表达式){
  ···
}

if语句的嵌套

套娃格式，if中的if

if(表达式1){
    if(表达式2){
        ···
    }else{
        ···
    }
}else{
    if(表达式3){
         ···
    }else{
      ···
    }
}

switch

switch分支语句，根据一个表达式的值，选择不同的分支执行

注意 ：在JavaScript中 case 指定的值可以应用表达式，而Java不能应用表达式

switch (表达式){
    case 常量表达式1 :
        语句1;
        ···;
        break;
    case 常量表达式2 :
        语句2;
        ···;
        break;
        ···
    case 常量表达式n :
        语句n;
        ···;
        break;
    default:
		语句n+1;
        break;
}

default语句可以省略，case语句没有匹配的则不进行任何操作。

循环语句

while

一个表达式来控制循环

while(表达式)(
    ···
)

do...while

先执行在判断是否循环

do{
   ···
}while(表达式);

for

计次循环，可控制循环数

if(初始化表达式 ; 条件表达式 ; 迭代表达式){
     ···
}

for...in

迭代语句，遍历组中的所有元素（循环次数 = 组中的数量）

for(element in group){
    ···
}
//element：遍历组的元素
//group：需要遍历的组

continue

continue跳转语句 跳过本次循环，并开始下一次循环

break

**break跳转语句 ** 在循环语句中，break语句用于跳出循环

异常语句

try...catch...finally

try语句会捕捉到Error对象（exception），该对象可以描述错误

Error对象属性

name ：表示异常类型的字符串 message ：实际的异常信息

try{
    ...
   //捕捉异常代码区域
}catch(exception){
    var name = exception.name;
    var message = exception.message;
    ...	
    //异常提示区域
}finally{
    ...
    //最后执行的区域
}

try： 尝试执行代码 catch： 捕捉异常 finally： 最终处理

throw

throw语句抛出异常，有目的性的抛出异常

//以下代码执行直接抛出异常
throw new Error("错误");

对象

String对象

String对象是动态对象，对象需要实例后才能引用属性和方法，主要用于处理或格式化文本字符串

点击String对象方法 (opens new window)

var str = "我爱学习 ，学习使我快乐";
var str2 = new String("我爱学习 ，学习使我快乐");
console.log("字符串长度："+str.length);

Array对象

Array 对象用于在变量中存储多个值，也就是数组

点击Array对象方法 (opens new window)

//No.1
var nameArray = new Array();
nameArray[0] = "zhangsan";
nameArray[1] = "lisi";
nameArray[2] = "wangwu";

//No.2
var nameArray2 = ["zhangsan","lisi","wangwu"];
document.write("遍历 ： <br/>");
for(var i = 0 ; i< nameArray2.length ; i++){
	document.write(nameArray[i]+"<br/>");
}

Date对象

Date对象 实现对日期和时间的控制

点击Date对象方法 (opens new window)

//No.1 现在时间
var date1 = new Date();
//No.2 时间戳的偏移量 （1970.1.1开始）
var date2 = new Date(milliseconds);
//No.3 字符串时间（需要补全）
var date3 = new Date(dateString);
//No.4 数值时间值（月份：0 - 11）
var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);

Math对象

Math对象 实现数学应用，和java差不多

点击Math对象方法 (opens new window)

自定义对象

自定义对象可以包含多个值（多个变量）

定义

var 对象名 = {
    属性: 值,
    属性: 值,
    函数名:function(){
        //函数体···
    }
    ···
};

访问

//No.1 
对象名.属性名;

//No.2
对象名["属性名"];

//函数调用
对象名.函数名();

注意：

1. 定义对象属性需要花括号括住
2. 属性与值之间是需要逗号分开 ,
3. 属性与属性之间需要冒号分开 : ，最后的属性不需要冒号分开
4. 定义对象的末尾需要分号结束 ;

实例

var student={
	id:12,
	name:"zhangsan",
	age:18,
	height:179,
	Inspirational:function(){
		print("","好好学习天天向上");
	}
};

print("id:",student.id);
print("name:",student.name);
print("age:",student["age"]);
print("height:",student.height);
//调用函数
student.Inspirational();

function print(text,str){
	document.write(text+str);
	document.write("<br/>");
}

/*
id:12
name:zhangsan
age:18
height:179
好好学习天天向上
*/

Window对象

Window对象 是浏览器对象DOM模型。所有浏览器都支持 window对象 表示一个浏览器窗口或一个框架

点击Window详细 (opens new window)

Window方法

Window方法	说明
setInterval(<函数名>,<时间间隔毫秒>)	指定的周期 调用函数
clearInterval(<定时对象>)	取消 setInterval() 设置的 定时器
setTimeout()	延迟器 休眠
提示
alert(<提示信息>)	提示
prompt(<提示信息>,<默认值>)	用户输入
confirm(<提示信息>)	信息确认

// 启动定时器
let time = window.setInterval("renew()",1000);

function renew(){
    console.log("定时加载");
}

// 关闭定时器
window.clearInterval(time);

常用对象属性

History对象

window.history 对象 包含浏览器的历史History 对象

history方法	说明
back()	加载历史 history 列表中的前一个 URL
forward()	加载历史 history 列表中的下一个 URL
go(int)	加载历史 history 列表中的某个具体页面 整数 前；负数 后

<body>
	<a href="https://www.baidu.com/">baidu</a>
	<br>
	<a href="https://www.google.cn/">google</a>
	<br>
	<a href="window返回页.html">进入</a>
	<br>
	<br>
	<a  href="#" onclick="winMethods.forward()">前进</a>
	<br>
	<a href="#" onclick="winMethods.back()">后退</a>
	<br>
	<a href="#" onclick="winMethods.go(-99)">置低</a>
	<br>
	<a href="#" onclick="winMethods.go(99)">置顶</a>
</body>
<script type="text/javascript">
	var winMethods = {
		forward:function(){
			javascript:window.history.forward();
		},
		back:function(){
			javascript:window.history.back();
		},
		go:function(num){
			javascript:window.history.go(num);
		}
	};
</script>

location对象

window.location 对象 获得当前页面地址 (URL)，并把浏览器重定向到新的页面

location方法	描述
assign(rul)	加载新的文档
reload()	重新加载当前文档
replace(url)	用新的文档替换当前文档

 <a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a>
<br />
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br
/>
<br/>
<a href="javascript:location.assign('https://www.baidu.com')">跳转到百度</a><br
/>

RegExp 对象

RegExp对象 正则表达式, 用于对 字符串 进行 描述/匹配 规则的字符串, 对其替换或扫描

点击RegExp对象详细 (opens new window) 正则匹配网页应用: 链接1 (opens new window) , 链接2 (opens new window)

var reg = new RegExp(正则表达式 [, 修饰符]);

修饰符说明

全局匹配、区分大小写的匹配和多行匹配

修饰符	说明
i	无视大小写匹配
g	查找所有匹配的 内容
m	多行匹配

//No.1
var reg1 = new RegExp("abc");
alert(reg2.test("abc"));

//No.2
alert(/[abc]/.test("bca"));

//应用示范
/[Abc]/i.test("aac");	//true

//方法应用
//search()
console.log("I like javaScript".search(/java/));    //java存在 第七个 字符头
//match()
console.log("Do you like java?No,I don't like java!".match(/java/g));    //Array={'
//replace()
console.log("I like javaScript".replace(/javaScript/, "Java"));     //将 Java 覆盖
console.log("'a','b','c'".replace(/'([^']*)'/g,'"$1"'));    //将单引号替换至双引号 
//split()
console.log("I like javaScript".split(" "));    //Array={'I','like','javaScript'}
console.log("a : b : c".split(/ : /g));    //Array={'a','b','c'}

//修饰符
console.log(/[Abc]/i.test("aac"));	//tuse
console.log("Is this all there is?".match(/is/));    //is
console.log("Is this all there is?".match(/is/g));    //Array={'is','is'}

常用正则表达式:

1. 匹配 **身份证号码 **

   /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2] [1-9])|10|20|30|31)\d{3}[0-9Xx]$/

   [1-9]\d{5} 前六位地区，非0打头 (18|19|([23]\d))\d{2} 出身年份，覆盖范围为 1800-3999 年 ((0[1-9])|(10|11|12)) 月份，01-12月 (([0-2][1-9])|10|20|30|31) 日期，01-31天 \d{3}[0-9Xx] 顺序码三位 + 一位校验码

2. 匹配 手机号

   /^1[3|4|5|7|8][0-9]{9}$/

3. 匹配 邮箱

   /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/

4. 匹配 URL

   /http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/

函数

数值内置函数

isNan

isNan(param) 检查其参数是否是非数字值

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

parseFloat

parseFloat(String) 解析一个字符串，返回一个浮点数

console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN

注意：

1. 字符串中只返回第一个数值
2. 头尾允许空格
3. 首字符不为数字，则NaN

parseInt

parseInt(string[,radix]) 解析一个字符串，并返回一个整数 **string：**解析字符串；**radix：**数字基数(2 - 36) （进制数）

console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN

console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16

注意：

1. 字符串中只返回第一个数值
2. 开头和结尾的空格是允许的
3. 首字符不为数字，则NaN
4. radix 进制数可自选

字符串内置函数

eval

eval(String) 计算字符串中的表达式的值 将其执行结果返回

escape

escape(String) 字符串编码 特殊字符(不包括字母和数字字符以及*、@、一、_、+、.和/)进行编码，可将特殊字符转换为“%XX” 格式的数字

escape("You & Me");
// escape("You & Me") →You%20%26%20Me

unescape

unescape(String) 字符串解码 对应用escape()函数编码后的字符串进行解码。可将字符串中“%XX”格式的数字转换为字符串

unescape("You%20%26%20Me");
//如: unescape("You%20%26%20Me") →You & Me

encodeURI

encodeURI(uri) 将URL字符串进行编码

decodeURI

decodeURI(url) 对已编码URL字符串进行解码

自定义函数

函数定义

function 函数名(参数列表){
	//函数体
	[return 返回值]
}

注意：

1. 参数可直接写参数名称，无需定义类型
2. 函数是否返回取决于是否有 return 关键字

匿名函数

var 变量名 = function(参数列表){
	//函数体
    return 返回值;
};

事件

HTML页面的元素都有自带的行为, 自要他们进行操作 , 就会触发相应事件

点击事件详细 (opens new window)

示例

<script type="text/javascript">
    function eventOnchange() {
        alert("元素值更变!!!");
    }
    function eventOnclick() {
        alert("用户点击了元素!!!");
    }
    function eventOnmouseover(){
        document.getElementById("test1").innerHTML = "鼠标移到触发(onmouseover)";
    }
    function eventOnmouseout(){
        document.getElementById("test1").innerHTML = "鼠标移出触发(onmouseout)";
    }
    function eventOnkeydown(){
        document.getElementById("test3").innerHTML = document.getElementById("test2").value;
    }
</script>
<body>
	<span>元素改变(onchange):</span>
	<select name="listTest" id="listTest" onchange="eventOnchange()">
	    <option value="no1">1</option>
	    <option value="no2">2</option>
	    <option value="no3">3</option>
	    <option value="no4">4</option>
	</select>
	
	<br>
	<br>
	<a href="#" onclick="eventOnclick()">点击(onclick)</a>
	
	<br>
	<br>
	<span id="test1" onmouseover="eventOnmouseover()" onmouseout="eventOnmouseout()">鼠标移到这里试试(onmouseover | onmouseout)</span>
	
	<br>
	<br>
	<span>敲击键盘响应(onkeydown):</span>
	<input id="test2" type="text" onkeydown="eventOnkeydown()">
	<span id="test3"></span>
</body>

DOM模型

DOM可 访问 HTML文档所有元素的对象 当HMTL页面加载完毕后浏览器会创建文档对象模型

HTML DOM 模型 被构造为对象的数: (html文档示例)

JavaScript01.png

可动态的更改HTNL页面

• 更改元素
• 更改HTML属性
• 更改CSS样式
• 更改事件

Document对象

每个载入浏览器的 HTML 文档都会成为 Document 对象 Document对象 是 HTML文档的 根节点, 通过该对象可访问HTML文档进行编辑

点击Document对象详细 (opens new window)

点击XML Document对象详细 (opens new window)

Element 对象

Element 对象 表示 HTML 元素. Element 对象拥有类型为元素节点、文本节点、注释节点的子节点

点击Element对象详细 (opens new window)

节点对象的获取

返回	方法	说明
Element	document.getElementById(<id>)	根据id获取
Element[]	document.getElementsByName(<name>)	根据name属性获取
Element[]	document.getElementsByTagName(<标签名>)	根据标签名获取
Element[]	document.getElementsByClass(<类名>)	根据类名获取

节点对象找节点

返回	属性	说明
Element[]	childNodes	节点所有子节点
Element	firstElementChild	节点第一个子节点
Element	lastElementChild	节点最后一个子节点
Element	parentNode	当前父节点
Element	nextElementSibling	当前节点的下一同级节点
Element	previousElementSibling	当前节点的上一同级节点

示例

<script type="text/javascript">
    function domTest(){
        var id = document.getElementById("idTest");
        id.innerHTML = id.innerHTML+"  以获取节点对象1!";

        // 后面指定 该类名 节点的第几个 (从0开始)
        var classTest = document.getElementsByClassName("classTest")[0];
        classTest.innerHTML = classTest.innerHTML + "  以获取节点对象2!";

        var names = document.getElementsByName("nameTest");
        for(var i = 0 ; i < names.length ; i++){
            names[i].innerHTML = names[i].innerHTML + "  以获取节点对象!";
        }

        var tagName = document.getElementsByTagName("li");
        for (var i = 0; i < tagName.length; i++) {
            tagName[i].innerHTML = tagName[i].innerHTML + "  以通过li获取对象节点!!!!";
        }
    }
</script>
<!-- 加载完后执行函数 (onload)-->
<body onload="domTest()">
    <p id="idTest">ID 测试</p>
    <p id="idTest">ID2 测试</p>
    <p class="classTest">Class 测试</p>
    <p>name 测试:</p>
    <ol>
        <li name="nameTest">111</li>
        <li name="nameTest">222</li>
        <li name="nameTest">333</li>
    </ol>
    <br>    
</body>

HTML文档编辑

HTML内容

innerHTML 更改HTML内容

innerTest 更改标签文本内容

<button>test</button>
<button>html</button>
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>
<p id="msg"></p>
<script>
    let key = document.getElementById("msg");
    document.getElementsByTagName("button")[0].onclick = function () {
        key.innerText = document.getElementsByTagName("div")[0].innerText;
    };
    document.getElementsByTagName("button")[1].onclick = function () {
        key.innerText = document.getElementsByTagName("div")[0].innerHTML;
    };
</script>

HTML属性

setAttribute() 更改HMTL属性

//获取节点
var node = ...;
node.setAttribute(属性名 , 属性值);

CSS元素

内行样式的更改

style 更改/添加 内行样式

//获取节点
var node = ...;
node.style.color="blue";
node.style.padding="4px";

添加节点

appendChild() 添加节点, 在节点最后 insertBefore() 添加节点, 在指定节点前

//创建新节点
var newNode = document.createElement("p");
//文本内容
newNode.innerHTML = "新段落!";

//添加方式No.1
//在节点最后添加 新节点
document.getElementById("test").appendChild(newNode);

//No.2
//指定节点前面添加 新节点
var node = ...;
document.getElementById("test").insertBefore(newNode , node);

删除节点

removeChild() 删除节点

// 删除 父节点指定的子节点
//父节点
var parentNode = ...;
//子节点
var childNode = parentNode.[...];
//删除方式No.1
parentNode.removeChild(childNode);

//No.2
//获取节点
var node = ...;
//parentNode: 获取父节点
node.parentNode.removeChild(node);

更改节点

replaceChild() 替换节点

//创建新节点
var newNode = ...;
//新节点文本内容
newNode.innerHTML = "覆盖";
//旧节点获取
var oldNode = ...;
//parentNode: 获取父节点
oldNode.parentNode.replaceChild(newNode , oldNode);