【web前端】JavaScript总结

JavaScript

1、是什么？

历史背景

由网景公司开发（网景公司早期是开发浏览器的 Netscape公司）

​ 是一种脚本语言 （不需要编译 例如 sql javascript python 是由解释器，逐行执行）

​ 原名叫LiveScript ，是面向对象语言，可由浏览器直接解释执行，运用在网页中，对网页进行操作

​ 网景公司和sun公司合作，改名为JavaScript

​ java是先编译，后交给jvm执行，java运行在jvm，属于后端开发语言

​ java是强类型语言

javaScript含义

​ JavaScript是一种直译式的脚本语言，嵌入到HTML中，运行到浏览器，为网页添加各种动态效果

​ 嵌入到HTML中实现自身功能

html css javaScript 关系：

​ html是网页内容（骨架）

​ css是网页样式（皮肤）

​ javaScript 是网页行为 (动作)

2、能干什么？

1）响应各种鼠标，键盘事件

​ onclick当点击标签时，标签会产生一个事件（动作）可以通过事件调用js函数

​

2）客户端表单验证（百度登录注册页面输入验证）

​ 把前端一些无效的数据过滤一下，减轻服务器端的压力

3）动态改变标签的样式（动态操作）

3、 怎么干？

怎么写？写在哪？

​ 写在一组

head中，或写在外部的.js文件中后导入

<script src="js/out.js" type="text/javascript" charset="utf-8"> //导入外部.js文件

• ​ alert（）；警报
• ​ alert(‘welcome!’); 提示对话框

1）基本语法

变量

● 声明变量用var关键字

例如 var name;

● 声明变量的同时对其赋值

var test=“THIS IS A BOO

数据类型

● JavaScript支持的数据类型

1、数值型(number)：

​ 其中包括整型数和浮点型数。

2、布尔型(boolean)：

​ 即逻辑值，true或flase。

3、字符串型：

​ 由单个或多个文本字符组成。字符串是用单引号或双引号来说明的。

（使用单引号来输入包含引号的字符串。）

4: undefined类型

5: Object类型

算术运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qaJMtbtd-1645265309960)(C:\Users\16431\AppData\Roaming\Typora\typora-user-images\image-20220216155129978.png)]

赋值运算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JM2QGUc8-1645265309963)(C:\Users\16431\AppData\Roaming\Typora\typora-user-images\image-20220216155108207.png)]

比较运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-acBJwCqg-1645265309963)(C:\Users\16431\AppData\Roaming\Typora\typora-user-images\image-20220216155044900.png)]

逻辑运算符

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T7eEuOa8-1645265309964)(C:\Users\16431\AppData\Roaming\Typora\typora-user-images\image-20220216155013288.png)]

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

语法：var result = (条件表达式)?结果1:结果2

​ 当条件成立返回?后的内容，否则返回:后的内容

控制语句

• 第一种是选择结构

1.单一选择结构（if）

2.二路选择结构（if/else）

3.多路选择结构（switch）

• 第二种类型的程序控制结构是循环结构。

1.由计数器控制的循环（for）

2.在循环的开头测试表达式（while）

3.在循环的末尾测试表达式（do/while）

4.break continue

2）函数

定义函数

function functionName([arguments]){ 
	javascript statements 

	[return expression] 
} 

• function: 表示函数定义的关键字;

• functionName:表示函数名;

• arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;

• statements: 表示实现函数功能的函数体;

• return expression:表示函数将返回expression的值，同样是可选的的语句。

调用函数

由函数来调用

<script type="text/javascript"> 
	function fun(){ 
		alert("test”); 
	}
          
	fun();//函数名调用 
	function fun2(){ 
		fun();//在其他函数中调用 
	}
</script>

全局函数

• parseInt(arg)

​ 把括号内的内容转换成整数之后的值。

​ 如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。

• parseFloat(arg)

​ 把括号内的字符串转换成浮点数之后的值.

​ 字符串开头的 数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。

• typeof (arg)

​ 返回arg值的数据类型。

• eval(arg)

​ 可运算某个字符串。

3）事件

一些常用的事件

1. onclick 鼠标点击时；
2. ondblclick 鼠标双击时;
3. onblur 标签失去焦点;
4. onfocus 标签获得焦点;
5. onmouseover 鼠标被移到某标签之上;
6. onmouseout 鼠标从某标签移开;
7. onload 是在网页加载完毕后触发相应的的事件处理程序;
8. onchange 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。
9. Onkeydown 键盘按下
10. Onkeyup 键盘抬起

Event对象

● Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。

1. type 事件类型
2. Button 被点击的鼠标键位
3. altKey 按下altKey返回true
4. ctrlKey 按下ctrlKey返回true
5. shiftKey 按下shiftKey返回true
6. keyCode 返回被按下的键位编码
7. offsetX 当前标签内的鼠标X轴
8. offsetY 当前标签内的鼠标Y轴
9. clientX 鼠标在浏览器内部X轴
10. clientY 鼠标在浏览器内部Y轴
11. screenX 鼠标在显示器内的X轴
12. screenY 鼠标在显示器内的Y轴

4）内置对象

String字符串

属性

​ length 用法：返回该字符串的长度.

方法

​ charAt(n)：返回该字符串位于第n位的单个字符.

​ indexOf(char)：返回指定char首次出现的位置.

​ lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

​ substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位

置到end位置的前一位置的一段.

​ substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位

置开始，长度为length的一段.

​ split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔

符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

​ 例如：

​ 1&2&345&678’.split(’&’)返回数组：1,2,345,678

Array数组

​ 数组的定义方法：

​ var <数组名> = new Array();

​ 这样就定义了一个空数组。以后要添加数组元素，就用：

​ <数组名>[下标] = 值;

​ 如果想在定义数组的时候直接初始化数据，请用：

​ var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);

​ 还可以

​ var <数组名> = [<元素1>, <元素2>, <元素3>…];

属性

​ length ：数组的长度，即数组里有多少个元素。

方法

1. concat() 用于连接两个或多个数组 arrayObject.concat(arrayX,arrayX,…,arrayX)

2. pop() 用于删除并返回数组的最后一个元素。

3. push() 可向数组的末尾添加一个或多个元素，并返回新的长度。

4. join(<分隔符>) 返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔 符>置于元素与元素之间。

5. reverse() : 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数 组变成：[3, 2, 1]。

6. sort() ： 使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺 序排列。

对数字排序需要调用排序函数。

function sortNumber(a,b){ 

	return a - b; 
}

Date

​ ● 获取日期

1. new Date() 返回当日的日期和时间
2. getFullYear() 返回四位数字年份
3. getDate() 返回一个月中的某一天 (1 ~ 31)
4. getMonth() 返回月份 (0 ~ 11)
5. getDay() 返回一周中的某一天 (0 ~ 6)
6. getHours() 返回 Date 对象的小时 (0 ~ 23)
7. getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
8. getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

Math

​ Math 对象，提供对数据的数学计算。

属性

​ PI 返回π（3.1415926535…)。

方法

1. Math.abs(x) 绝对值计算；
2. Math.pow(x,y) 数的幂；x的y次幂
3. Math.sqrt(x) 计算平方根；
4. Math.ceil(x) 对一个数进行上舍入
5. Math.floor(x) 对一个数进行下舍入。
6. Math.round(x) 把一个数四舍五入为最接近的整数
7. Math.random() 返回 0 ~ 1 之间的随机数
8. Math.max(x,y) 返回 x 和 y 中的最大值
9. Math.min(x,y) 返回 x 和 y 中的最小值

5）htmlDOM对象

● DOM是Document Object Model文档对象（网页中的标签）模型的

缩写.

● 通过html dom，可用javaScript操作html文档的所有标签

查找元素

● 通常，通过 JavaScript，您需要操作 HTML 标签。

● 为了做到这件事情，您必须首先找到该标签。

● 要操作，先得到

● 有四种方法来做这件事：

1. 通过 id 找到 HTML 标签 document.getElementById(“id");

2. 通过标签名找到 HTML 标签 document.getElementsByTagName(“p”);

3. 通过类名找到 HTML 标签 document.getElementsByClassName(“p”);

4. 通过name找到 HTML 标签 document.getElementsByName(“name");

改变 HTML

• Html dom允许javaScript 改变html标签的内容。

  改变 HTML 标签的属性

  document.getElementById(“username").value=“new value";

  document.getElementById(“image”).src=“new.jpg";

• 修改 HTML 内容的最简单的方法时使用 innerHTML 属性

  document.getElementById(“div”).innerHTML=new HTML

改变 CSS

• html dom允许 javaScript改变html标签的样式。

​ 语法：

​ document.getElementById(“id”).style.property=new style;

​ 例：

​ document.getElementById(“p2”).style.backgroundImage=“url(bg.jpg)”;

6）浏览器对象

• window

• location

• 计时

windows

● 它表示浏览器窗口。

● 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 html dom 的 document 也是 window 对象的属性之一。

window.document.getElementById(“header”);

Window对象常用的属性：

window.innerHeight - 浏览器窗口的内部高度

window.innerWidth - 浏览器窗口的内部宽度

window.parent获得父级窗口对象(父子级之间调用)

Window对象常用的方法

window.open(‘

url’, ‘

name’,’features’) - 打开新窗口

features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。

width=100,height=100,top=100,left=100

Location对象

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

的页面。

● window.location 对象在编写时可不使用 window 这个前缀。

方法：

assign(url)加载一个新的文档

reload()重新加载当前文档

replace(url) 可用一个新文档取代当前文档。

计时

• 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执

行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

方法:

setTimeout(“函数”,”时间”)未来的某时执行代码

clearTimeout()取消setTimeout()

setInterval(“函数”,”时间”)每隔指定时间重复调用

clearInterval()取消setInterval()