JavaScript小结

最新推荐文章于 2022-03-26 15:09:58 发布

coder chen

最新推荐文章于 2022-03-26 15:09:58 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/weixin_44226752/article/details/113528157

版权

1. 什么是javascript

javascript是一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有javascript的解析引擎。
脚本语言不需要编译，直接可以被浏览器解析执行。

2. javascript的作用

用来增强HTML页面和用户之间的交互，比如表单提交时进行用户名是否为空的判断。也可以用来控制HTML元素，让页面有一些动态效果，增强用户的体验。

3. javascript的发展史

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为： C-- ，后来更名为：ScriptEase
1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
1996年，微软抄袭JavaScript开发出JScript语言
1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式，但不同脚本语言都有自己的特性。
综上所述，我们要学的JavaScript=ECMAScript + JavaScript自己特有的东西(BOM+DOM)

语言基础，BOM和DOM

4. ECMAScript

4.1 基本语法

如何将JavaScript引入HTML中
- 内部js：
```
<script>
	js代码
</script>
    
```
- 外部js：
```
<script src="xx/xxx.js"></script>//src是相对路径
```
```
//定义一个位于xx目录的xxx.js文件
js代码
```
- 注意：
  - 如果引入的是内部js，则不要定义src，在<script>标签内写js代码就好。如果引入的是外部js，则定义src,把外部的js代码url赋给src,<script>内不写东西。
  - <script>标签可以定义在HTML的任意位置，包括head内，body内，<!DCOTYPE HTML>上面等，但为了不影响页面内容的加载，有时会把script代码放在body快结束的位置，来保证先将大体页面加载出来。
  - script标签可以定义多个。执行时按顺序执行。
  - 在定义外部js文件时，不要写<script>标签，直接写js代码即可。
  - js中的代码每一句都要用;结尾
注释

单行注释：//注释内容

多行注释：/*注释内容*/
js的变量
- java是强类型语言，javascript是弱类型语言。java在开辟变量存储空间时，定义了空间将来存储的数据的数据类型，只能存储固定类型的数据。JavaScript在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
```
//定义变量的语法
var s=10;
//也可以不用var关键字
用：定义的变量是局部变量
不用：定义的变量是全局变量（不建议使用）
```
基本数据类型
- number :数字。包括整数，小数和NaN(not a number –不是数字的数字类型) var x=10;
- string：字符串。js中没有字符和字符串的区别，所以单个字符和字符串都用string定义，单引号和双引号都可以用。‘abc’,“abc”,"a’'都是字符串。var x="hello;"
- boolean：true和false。var x=true;
- null：表示一个对象不存在。
- undefined：声明了一个变量但没有赋值，默认就会赋值undefined。var x; x的值为undefined
null和undefined的区别与联系https://www.runoob.com/js/js-typeof.html
注意：
1. 由于五种基本数据类型都是用var定义的，所以有时我们不能判断出变量的类型，例如123和"123"，这时就需要typeof()来获取变量的类型。
2. 由于js是弱类型语言，在定义时并不指定变量的类型，所以变量的类型是动态的，给变量什么类型的数据，它就是什么类型的变量，同时类型是动态的，可以改变。
```
<script>
	var x=10;//x的类型是number
	x="hello";//x的类型是string
</script>
```
3. js中，如果运算数不是运算符所要求的类型，则js引擎会进行自动的类型转换。

基本数据类型的转换

其他类型转string

//number转string：
var a=10;
a.toString();//number10转为字符串10.
a.toString(2);//将数字10转为不同进制的数字，再将其转为字符串
a.toString(8);
a.toString(16);


//boolean转string：
var a=true;
a.toString();//结果为true，true和false直接转为字符串true和false就好

其他类型转number

//string转number：使用parseInt()方法
var x="10";
parseInt(x);//数字10，纯数字的字符串按照字面值转换
var y="10abc";
parseInt(y);//数字10，字符和数字都有的字符串要从第一个字符判断是否是数字，直到不是数字为止，将前边的数字部分转为number，如果第一个字符不是数字，则直接转为NaN类型。
var y1="a10bc";
parseInt(y1);//NaN类型
var z="hello";
parseInt(z);//NaN类型，纯字符转换为NaN，不是数字的数字类型

//boolean转number
true转为1，false转为0

其他类型转boolean

//number转boolean
0或者NaN转false  其他为true

//string转boolean
除了空字符串都是true

//null 和undefined
都是false

//对象
所有对象都是true

运算符

一元运算符

一元运算符就是只有一个运算数的运算符
i++,i--,++i,--i
具体访问这篇：https://blog.csdn.net/weixin_44226752/article/details/107420878

算数运算符
```
+ - * / %
```
赋值运算符
```
= , +=, -=, /=, %= 
x+=y  <==>x=x+y
```

比较运算符

>, <, <=, >=, ==, ===(全等于)
== ：类型相同，直接比较。类型不同，先进行类型转换后再比较。
	 例如123和"123"比较后返回true
=== ：比较之前先判断类型，如果类型不一样，直接返回false。

注意：在字符串比较时，按照字典顺序比较(即ASCII码大小)。按位逐一比较，直到得出大小为止。

逻辑运算符

&&，||，!  与或非
与：全1则1
或：有1则1

三元运算符

表达式？ 值1：值2:
判断表达式的值为true则取值1，如果为false则取值2 .

流程控制语句

if...else...
switch...case: switch可以接收五种基本类型中任一种
while
do...while
for

4.2 基本对象

Function函数（方法对象）
- 两种定义方法
```
//两种定义方法
<script>
function 方法名称(形式参数列表){
	方法体
}
 
var 方法名称= function(形式参数列表){
	方法体
}
</script>
```
- 注意：
1. 在定义方法时，不需要写形参的类型和返回值类型。因为都是var类型。
2. 方法是一个对象，定义名称相同的方法会覆盖之前的方法。
3. 方法的调用只与方法名有关，和参数列表无关，不会出现java中方法的重载，所以说在js中，每一个可执行的方法都有不同的名字。
4. JS中每个方法可接受的参数不受限，可以传入多个，但方法中只会接收已经定义的参数，其他的参数会丢弃。
5. 方法中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数。可以通过arguments[0],arguments[1]…来获取传入的第1,2…个参数.
Number对象
1. Number对象是基本类型number的包装类，可以用new Number(123);来创建一个number值为123的对象。
2. Number对象的方法：
  - Number.MIN_VALUE和Number.MAX_VALUE ：Number对象所能取的最小值最大值。
  - isNaN()：判断一个值是否是NaN。
  - toFixed(n)：返回一个保留n位小数的数
  - toExponential()：返回数字的科学计数法表达
  - valueOf():返回一个数字对象的基本类型
3. Number和number类型的区别
```
var x=new Number(123);
var y=123;
typeof(x);//结果是object
typeof(y);//结果是number
```
String对象
1. String是string的包装类，可以用new String(“123”)来创建一个对象
2. String对象的方法：
  - length():返回字符串长度
  - charAt(n):返回指定位置字符
  - charCodeAt(n):返回指定位置的字符对应的Unicode码
  - x.concat(y):将字符串x和y拼接起来
  - 详细方法访问：https://how2j.cn/k/javascript/javascript-string/439.html
3. String和string的区别
```
var x='hello';
var y=new String('world');
typeof(x);//string类型
typeof(y);//object类型
```
Boolean对象

Boolean是boolean的包装类
Array数组对象
1. 创建数组对象：
  
  var a=new Array(5);//创建一个长度为5的数组，每个元素都是undifine.
  
  var b=new Array(1,2,3,4,5);//创建一个有元素1,2,3,4,5的数组。
2. 方法：
  - length():数组的长度
  - join(参数)：将数组中的元素按指定的分隔符拼接成字符串
  - push(x):向数组的末尾添加一个值为x的元素
  - pop(x):在数组的末尾删除一个值为x的元素。
  - 更多方法：https://how2j.cn/k/javascript/javascript-array/441.html
3. js中，数组的长度可变，数组元素的类型可变。
Date对象
1. 创建日期对象：var d=new Date();//对象d就表示当前日期。
2. 方法：
  - getFullYear(),getMonth(),getDate()获取年月日
  - getTime()：获取毫秒值。返回当前date对象对应的时间到1970年1月1日零点的毫秒值差。
  - 更多方法：https://how2j.cn/k/javascript/javascript-date/440.html
Math对象
1. Math对象不用创建对象，直接使用。
2. 方法：
  - Math.random()：生成一个[0,1)的随机数。
  - Math.PI：圆周率
  - Math.ceil(x)：对数x进行上舍入。即大于这个数的最小整数。
  - Math.floor()：对数进行下舍入。即小于这个数的最大整数。
  - Math.round(x)：对数四舍五入为最接近的整数。
RegExp正则表达式对象
1. 正则表达式：定义字符串的组成规则
  - 单个字符：[ ]
    
    如 [a] ,[ab] ,[a-zA-Z0-9_]，[a]匹配字符a,[ab]匹配字符ab,[a-zA-Z0-9 _]匹配字符a-z,A-Z,0-9,_。
    
    特殊单个字符：\d等价于[0-9]
    
    \w等价于[a-zA-Z0-9_]
  - 量词符号：
    
    ？：表示出现0次或者1次
    
    *：表示出现0次或者多次
    
    +：出现1次或者多次
    
    {m,n}：表示数量在[m,n]范围内。
    
    如果m缺省，{,n}:最多n次
    
    如果n缺省，{m,}:最少m次
  - 开始结束符号：
    
    ^：开始 $：结束
  - /^\w{6,12}$/：表示匹配连续的6-12个字符，字符范围是a-z,A-Z,0-9,_
2. 正则对象：
  - 创建：
    
    var reg=new RegExp(“正则表达式”);
    
    var reg=/正则表达式/;
  - 方法：
    
    reg.test(要检验的字符串)：验证指定的字符串是否符合正则表达式的规范。
Global对象
1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
2. 方法：
  
  encodeURI()：url编码
  
  decodeURI()：url解码
  
  encodeURIComponent():url编码，编码的字符更多
  
  decodeURIComponent():url解码
  
  eval(参数):计算JavaScript字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval()函数将执行表达式，如果参数是js代码，则执行js语句。

5.BOM

5.1 什么是BOM

BOM（Browser Object Model）浏览器对象模型，它将浏览器的各个组成部分封装成对象。

5.2 BOM的组成

封装的浏览器对象有;Window(窗口对象),Navigator(浏览器对象),Screen(显示屏对象),History(历史记录对象),Location(地址栏对象)

5.3 BOM的作用

通过调用BOM封装的对象的方法来间接控制浏览器的一些部件，使js有能力与浏览器对话。

5.4 五种对象的关系图

5.5 Window对象(重要)

在页面加载时，会自动创建window对象，无需手动创建。
调用方法时，window引用可以省略。window.方法名()==方法名()

window对象可以获取其他BOM对象和DOM对象：

window.history
window.location
window.Navigator
window.Screen

window.document

window对象与弹出框有关的方法：

alert()//显示带有一段消息和一个确认按钮的警告框
confirm()//显示带有一段消息以及确认按钮和取消按钮的对话框
	* 如果用户点击确定按钮，方法返回true
	* 如果用户点击取消按钮，则方法返回false

prompt()//显示可提示用户输入的对话框
	* 返回值：获取用户输入的值

window对象与打开关闭窗口有关的方法

close() //关闭浏览器的窗口
	* 谁调用我，我关谁，想要关闭open()打开的窗口，则要用open返回的window对象来调用close()方法
open()//打开一个新的浏览器窗口
	* 返回新的window对象

与定时器有关的方法

setTimeout(a,b)  在指定的毫秒数后调用函数或计算表达式。
	* 参数1:js代码或者方法对象
	* 参数2：毫秒值
	* 返回值：唯一标识，用于取消定时器
clearTimeout(id) 取消由setTimeout方法设置的timeout.
	* id参数是setTimeout()方法的返回参数，即var id=setTimeout()
		
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval() 取消由setInterval()设置的timeout

获取文档显示区域的高度和宽度
```
window.innerWidth
window.innerHeight
```
获取外部窗体的宽度和高度
```
window.outerWidth
window.outerHeight
```

5.6 Navigator对象

浏览器对象，提供浏览器相关的信息

navigator.appName//浏览器产品名称：
navigator.appVersion//浏览器版本号：
navigator.appCodeName//浏览器内部代码
navigator.platform//操作系统
.......

5.7 Screen对象

Screen对象表示用户的屏幕相关信息

因为任务栏的存在，可用区域大小会比屏幕高度小一点

screen.height//用户屏幕分辨率
screen.availHeight//可用区域大小

5.8 History对象

历史记录对象

history.back()//加载history列表中的前一个url
history.forward()//加载history列表中的下一个url
history.go(参数)//加载history列表中的某个具体页面。
	* 参数：正数：前进几个历史记录。负数：后退几个历史记录。
history.length//返回当前窗口历史列表中的url数量

5.9 Location对象

地址栏对象

location.reload()//重新加载当前文档，即刷新当前页面
location.href//返回当前页面的url

6.DOM

6.1 什么是DOM

DOM即Document Object Model,文档对象模型，它将HTML文档的各个组成部分封装成对象。可以通过操作这些对象来对HTML进行一些crud的操作。

6.2 DOM的分类

DOM被分为三类，核心DOM，XML DOM以及HTML DOM。
核心DOM是针对任何结构化文档的标准模型
XML DOM：针对XML文档的标准模型，定义了所有XML元素的对象，属性以及访问他们的方法。
HTML DOM：针对HTML文档的标准模型，定义了所有HTML元素的对象和属性以及访问他们的方法。即关于如何获取，修改，添加或删除HTML元素的标准

6.3 HTML DOM节点

在HTML DOM中，HTML文档的所有内容都是节点：

整个文档是是一个文档节点 Document

每个HTML元素是元素节点 Element

HTML元素内的文本是文本节点 Text

每个HTML元素的属性是属性节点 Attribute

注释是注释节点 Comment
HTML DOM将HTML文档视作树结构，这种结构称为节点树。

节点树中的各节点具有三种关系。父(parent),子(child)，同胞(sibling)。上一级的节点是父节点，下一级的节点是子节点，同级的节点是同胞。同胞指的是具有相同的父节点，一个节点可拥有任意数量的子节点。

Node tree

6.4 节点的属性

nodeName:节点的名字

文档的节点名是固定的#document

标签的节点名，是对应的标签名

标签内属性的节点名，是对应的属性名

内容的节点名是固定的#text
nodeValue:

文档的节点值是null

标签的节点值是null

标签内属性的节点值是对应的属性值

内容的节点值是#text
nodeType:

6.5 节点的关系

节点关系图

parentNode 父节点
previousSibling,nextSibling 同胞节点
childNodes 子节点
childNodes和children的区别是前者包括文本节点，后者不包括。

6.6 获取节点

获取元素节点

<script>
document.getElementById()//通过id获取元素节点
document.getElementsByClassName()//通过类名获取元素节点
document.getElementsByTagName()//通过标签名称获取元素节点。div,p,h1....
document.getElementsByName()//通过表单元素的name获取元素节点
</script>

获取元素的属性节点

获取属性节点时要先获取元素节点，然后通过元素节点的attributes获取其下的所有属性节点。由于属性节点有多个，所以以数组形式返回。
<div id="d1" align="center" class="abc">hello htmlDOM</div>
<script>
var div1=document.getElementById("d1");
var as=div1.attributes;//as获取的是div元素的所有属性组,是一个数组的引用
as[i].nodeValue//获取的是数组as中第i个属性的值，下标从0开始
as[i].nodeName//获取的是数组as中第i个属性的名字
as["id"].nodeValue//获取数组中属性名为id的属性的值
</script>

获取内容节点

首先通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。 其中第一个子节点，就是其内容节点。
<div id="d1" align="center" class="abc">hello HTML DOM</div>
<script>
var  div1 = document.getElementById("d1");
var content = div1.childNodes[0];// 返回内容节点
content.nodeName//#text
content.nodeValue//hello HTML DOM
</script>

6.7 创建节点

创建元素/标签节点

var p=document.createElement("p");//创建一个p标签

创建文本节点

var p=document.createElement("p");
var text=document.createTextNode("文本内容");//创建一个文本节点，要注意创建文本节点前要先创建元素节点，然后将文本节点加入元素节点
p.appendChild(text);

创建属性节点

var a= document.createAttribute("属性名")；//创建一个属性
标签.setAttributeNode(a)//将属性加入标签中

创建注释节点
```
createComment()
```

6.8 删除节点

删除元素节点

先获取父节点
通过父节点的removeChild删除该节点

删除属性节点

先获取该元素的节点
调用该节点的removeAttribute删除指定属性节点
节点.removeAttribute(属性)

删除文本节点

方法一：比较麻烦
通过childNodes[0]获取文本节点
通过removeChild删除该文本节点
方法二：常用
获取文本节点的父节点
调用该节点的innerHTML=" ";方法

6.9 替换节点

1. 获取父节点
2. 创建子节点
3. 获取被替换子节点
4. 通过replaceChild进行替换
注: replaceChild 第一个参数是保留的节点，第二个参数是被替换的节点

6.10 增加节点

在最后边插入节点

1. 创建新节点
2. 获取父节点
3. 通过appendChild追加(父节点.appendChild(子节点))

在前边的指定位置插入节点

1. 创建新节点
2. 获取父节点
3. 获取需要加入的子节点
4. 通过insertBefore插入
注: insertBefore的第一个参数是新元素，第二个参数是插入位置

6.11 事件监听机制

概念：某些组件被执行了某些操作后触发某些代码的执行。
- 事件：某些操作。如：单击，双击，键盘按下了，鼠标移动
- 事件源：组件。如按钮，文本输入框……
- 监听器：代码
- 注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码、
常见的事件：

单击事件

onclick:单击事件
ondblclick:双击事件

焦点事件

onblur：失去焦点
onfocus:元素获得焦点

加载事件

onload：一张页面或一幅图像完成加载。

鼠标事件

onmousedown	鼠标按钮被按下。
onmouseup	鼠标按键被松开。
onmousemove	鼠标被移动。
onmouseover	鼠标移到某元素之
onmouseout	鼠标从某元素移开

键盘事件

onkeydown:某个键盘按键被按下
onkeyup:某个键盘按键被松下
onkeypress:某个键盘按键被按下并松开

选择和改变

onchange:域的内容被改变
onselect:文本被选中

表单事件

onsubmit:确认按钮被点击
onreset:重置按钮被点击

绑定事件：

1.直接在html标签上，指定事件的属性(操作)，属性值就是js代码
2.通过js获取元素对象，指定事件属性，设置一个函数.（这样做可以降低HTML与js的耦合度）


	<body>
			<img id="light" src="img/off.gif"  onclick="fun();">
			<img id="light2" src="img/off.gif">
			
			<script>
			    function fun(){
			        alert('我被点了');
			        alert('我又被点了');
			    }
			
			    function fun2(){
			        alert('咋老点我？');
			    }
			
			    //1.获取light2对象
			    var light2 = document.getElementById("light2");
			    //2.绑定事件
			    light2.onclick = fun2;
			</script>
	</body>

6.12 DOM 元素样式

使用元素的style属性来设置

div1.style.border=“1px solod red”

div1.style.width=“200px”;

div1.style.fontsize=“20px”;

div1.style.backgroundColor=“green”
提前定义好类选择器的样式，通过该元素的className属性来设置其class属性值。

6.13 innerHTML方法

innerHTML方法主要用来替换文本内容的值，节点.innerHTML="xxx"

coder chen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript小结

1. 什么是javascriptjavascript是一门客户端脚本语言，运行在客户端浏览器中，每一个浏览器都有javascript的解析引擎。脚本语言不需要编译，直接可以被浏览器解析执行。2. javascript的作用用来增强HTML页面和用户之间的交互，比如表单提交时进行用户名是否为空的判断。也可以用来控制HTML元素，让页面有一些动态效果，增强用户的体验。3. javascript的发展史1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：
复制链接

扫一扫