JavaScrip

JavaScript简介

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编

程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1]

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

总结：

1. JavaScript前端人简称JS。是一门编程语言。
2. JavaScript属于脚本语言。脚本语言特征：可以嵌套在网页中，给网页添加一些动态效果。
3. JavaScript在1995年由Netscape公司的Brendan Eich。

 JavaScript用途

概述：JavaScript是一门脚本语言。脚本语言的特征是：可以给网页添加一些动态效果

比如：node平台，开发服务器。利用的也是JS；React、Vue框架。他们底层也是通过JS实现的。

 JavaScript组成

JavaScript由三部分组成：ECMAScript、DOM、BOM

 是由欧洲计算机协会，大概每年六月中旬定制语法规范

即document object model，文档对象模型

即browser object model，浏览器对象模型

内置语法

内置函数：内置即浏览器自带的，函数即某个功能

alert 警告框

alert 即警告、警报的意思

概述：alert是JS当中内置函数，他的主要作用是，在浏览器的正上方弹出一个警示框

<script type="text/javascript">
//内置函数alert alert("这是一个警示框");
alert('这是另一个警示框');
</script>

JS单行注释：使用 //

prompt 提示框

prompt 即提示、提示符的意思

概述：prompt也是JS中的内置函数，主要作用是在浏览器的上方，弹出一个提示框

<script>
prompt("这是一个提示框"); prompt('这是另一个提示框');
</script>

变量

变量的基本使用

variable即变量、可变情况

变量可以理解为一个容器，容器中可以存放任意类型的字面量数值、或者装载数学计算完的结果可以通过访问变量名字、获取到变量存储的结果

变量在使用的时候分为三步：声明、赋值和使用

1、声明：我们在使用变量之前，要通过关键字var进行声明一次

2、赋值：可以将任意类型的字面量数值、数字计算完结果，赋值给变量

3、使用：通过访问变量名字，获取到变量存储结果

变量声明是必不可少的。

​​​​​​​变量使用注意事项

声明一个变量但是不赋值。默认初始值为为定义类型值 undefined

一个变量在声明一次后，可以进行多次赋值。后者赋值的数据会层叠前者赋值的数据

接访问一个未声明的变量，会直接报错

数据类型的转换

数字转换为字符串

在 JS 当中，可以通过连字符（ + ）将数字类型的数据转换为字符串

如果语句当中没有出现字符串，这个加号就是数学的加法，可以进行数学的加法运算如果语句中出现了字符串，这个加号就不是数学的加法了，是所谓的连字符，可以将数据从左到右变成字符串

字符串转换为数字

概述：在 JS 当中，我们可以通过 parseInt ，和 parseFloat 将字符串转换为数字

内置函数 parseInt ，可以将字符串中的数字形式字符串转换为数字（只能得到整数）

内置函数 parseFloat ，可以将字符串中的数字形式的字符串转换为数字（可以精确到小数部分）

二者都使用的是驼峰命名，即 I 和 F 必须大写，否则会报错

在进行转换时，从左到右转换，如果数字形式字符，转换为数字，遇见了非数字形式的字符，后面

的数据就不进行转换了

parseInt 和 parseFloat 的使用方法都是一模一样的，只是精确度不同

数学运算符

在 JS 语言中，也有数学运算符；其实数学运算都就是加、减、乘、除，取余数（ % ）

数学对象

在 JS 中，给我们提供了一个内置的数学对象 Math ，这个对象拥有很多的属性和方法

对象：在 JS 中，我们经常讲引用类型的数据称为对象

Math 数学对象，提供了很多数学方法

Math 对象的属性后面不需要加上小括号

MAth 对象的方法后面要加上小括号

Math 数学对象的方法中，如果传递多个参数，需要用逗号隔开

比较运算符

概述：在 JS 语言当中也有所谓比较运算符（比较操作符）。比如：大于、小于、大于等于、小于等于等 。

比较运算符作用：进行数据对比，如果对比结果是真的，返回布尔值 true ，如果对比的结果为假的，返 回布尔值false 。

特别注意：在生活、学习当中，经常出现数字和数字进行比较大小。但是需要注意的是，在 JS 这门语言 当中，不仅仅数字类型的数据可以参与比较运算符。其他类型的数据（字符串、布尔值、未定义、空对 象）也可以参与比较运算。只不过浏览器中的解析器，将其他类型的数据自动的‘ 隐式转换 ’ 为数字进行比较。

>	大于
>=	大于等于
<	小于
<=	小于等于
==	相等
===	全等（值和数据类型都等）
!=	不等
!===	不全等

一个等号称之为赋值运算符（经常给变量进行赋值）。不是比较运算符（不是用来比较大小的）

两个等号（比较运算符：相等的判断），判断依据是数值是否相等。

三个等号（比较运算符：全等的判断），判断的依据是数值和数据类型是否全等。

Number类型的数值参与

正常的 Number 类型间的加减乘除以及取余计算都是正常的按法计算即可，返回的结果是 true 和 false 相等和全等：

三个等号全等，是要判断数值和数据类新是否都相等的

Number类型的特殊值参与

Infinity 参与比较运算时，按正常计算即可， Infinity 全等于其本身

NaN ，在 JS 当中，全部特殊值【数字类型： Infinity 、 NaN ；未定义： undefined ；空对象： null 】

当中，只有数字类型的特殊值 NaN 和自身比较的时候不等。其余的特殊值和自身比较的时候都是相

等的。

数字类型的特殊值 NaN 参与比较运算：只有带！ ( 不 ) ，返回的是布尔值 true ，其余都是 false 。

其他类型数据参与（不包含字符串类型）

概述：在 JS 当中，其他类型数据（布尔、未定义、空对象）也可以参与比较运算。

需要注意的是，其他类型的数据参与比较运算的时候，需要 ‘ 隐式转换 ’ 为数字参与比较运算。

下面是其他类型数据隐士转换为数字

字符串类型参与

概述：字符串类型数据也可以参与比较运算。

1. 其他类型数据（数字、布尔、未定义、空对象）和字符串进行对比。 -- 通过隐式转换为数字进行对 比，隐式转换的值和上面数学计算的值相同

2. 字符串和字符串进行对比。通过 ACSII 进行对比。

注意：字符串和字符串进行对比的时候是通过 ASCII 进行对比。如果是字符串和字符串进行对比。

是通过从左到右一个一个字符进行比较，直到比较除结果为止。

0~9<A-Z<a-z: 这些字符从左到右依次变大。

字符串与字符串对比：

DOM

DOM认知

问题 :JavaScript 是由几部分组成的呀？

ECMAScript ：简称【 ES 】，它是欧洲计算机协会，大概每年的六月中旬定制语法规范。

DOM ：全称【 document object model 】即为文档对象模型

BOM ：全称【 browser object model 】即为浏览器对象模型

节点树

概述 : 节点即为标签。节点之间这种关系，我们称之为 ‘ 节点树 ’ 。

DOM 【 document object model 】 : 文档对象模型，可以理解为是整个节点树最外层 ‘ 根元素 ’ 。

DOM 其实就是 JS 语言中内置引用类型 document 对象， DOM 对象经常用来操作节点（标签）

比如：操作节点样式、属性、文本等等。

DOM属性

概述 :DOM 【 document object model 】：它在 JS 当中，是引用类型数据，官方给我们提供很多属性、方 法进行操作。

<script>
//DOC常用属性
//documentElement:获取节点树html标签 console.log(document.documengtElement);
//head：获取节点树的head标签
console.log(document.head);
//title：获取节点数的title标签 console.log(document.title);
//body:获取节点树中的body标签 console.log(document.body);
</script>

DOM方法

概述 :DOM 对象，官方也给我们提供很多方法用来操作节点树上的标签。

getElementById: 它是 DOM 对象方法，可以通过标签 ID 选择器，在 JS 当中获取标签

getElementById 方法：可以通过标签 ID 选择获取对应的节点

一般我们将 script 标签放在程序最底部

不管节点（标签）在网页中嵌套关系如何让复杂，都可以通过这个方法获取到，即可以获取任意位

置的标签

注意：标签（节点）在 JS 当中属于引用类型数据

操作节点的属性

概述：我们可以通过 DOM 方法获取到节点树上的任意节点（标签），通过点语法来操作节点属性、文本 和样式等

<div id="box" class="cur">你好哇</div>
//其中id和class是属性，你好哇是文本

<script>
var div=document.getElementById("box");
//获取节点属性 console.log(div.id);
//获取class属性需要用className console.log(div.className);
//设置节点属性值
console.log(div.id="nn");
</script>

可以通过 DOM 方法获取节点，进而操作节点属性

通过节点名字利用点语法【属性名字】，可以获取节点某一个属性的属性值，也可以通过 JS 动态设 置新的属性值

class 属性值需要通过 className 获取

操作节点文本

概述：可以通过点语法操作节点的文本

注意：操作节点本文有两种情况

操作表单元素文本，需要通过value属性操作

操作非表单元素文本，需要通过 innerHTML 属性操作

<script>
//操作非表单元素
var p=document.getElementById("no1");
//获取文本 console.log(p.innerHTML);
//修改文本
p.innerHTML="芜湖";
//操作非表单元素
var input_dom=document.getElementById("no2");
//获取文本 console.log(input_dom.value);
//修改文本 input_dom.value="改一下";
console.log(input_dom.value);


</script>

可以通过 Js 动态操作节点文本

表单元素需要通过 value 属性进行操作文本

非表单元素需要通过 innerHTML 属性操作文本

操作节点样式

概述：可以利用 DOM 方法获取节点，操作节点行内样式

样式：层叠样式表，样式可以美化网页，可以让元素通过浮动、定位改变他们在网页中的位置

样式分为三种写法：行内样式、内部样式、外部样式

行内样式

<div  
style=width:100px;height:100px;color:red;background-color:aquamarine>你好哇
</div>

内部样式

<style>
.container{
color: red; width: 200px; font-size: 30px;
}
</style>//写在head里面，title下面，可以使用标签筛选器，类筛选器等等，选择单个标签指定样
式

外链标签

//外链标签需要新建一个css文件，在文件中直接书写样式内容，通过link标签在需要使用的文件中引入css
文件样式
<link rel="stylesheet" href="css1.css">

操作节点样式：

<script>
var div = document.getElementById("no1");
//获取行内样式 console.log(div.style); console.log(div.style.color);
//设置行内样式
div.style.color="blue"; div.style.width="200px";
</script>

在 JS 当中点语法操作的是行内样式

通过 JS 代码可以获取和设置行内样式（设置时需要用字符串且部分需要带单位 px ）

节点样式： background-color,font-size 等等（中间带有横线的），变为驼峰写法

事件绑定

概述：在网站中，用户经常用鼠标移上某个元素，单击某一元素，这个元素可以对用户这个行为进行响 应。这种现象称为“ 事件绑定 ” ，是人和机器的交互

注意：在 JS 中只有标签才可以绑定事件。数组、 JSON 、函数、变量、循环语句这些都不能绑定事件的。

语法格式：

element.onxxxx=function(){
}

onxxxxx这些都是小写

​​​​​​​右侧部分是一个函数（事件处理函数）：当用户触发事件的时候才会执行一次

onclick和ondbclick

概述：我们可以使用onclick和ondbclick进行单击或双击事件

<script>
//给元素绑定单击（双击事件只要换onclick即可）事件 var div=document.getElementById("box"); div.onclick=function(){
//修改背景颜色 div.style.backgroundColor="red";
//修改文字大小 div.style.fontSize="40px";
}
</script>

右侧函数（事件处理函数）：当用户触发事件的时候才会执行

可以给任意一个元素绑定单击事件，一般给非表单元素绑定事件

onmouseenter和onmouseleave

概述：任意节点，都可以给他们添加鼠标上移和移除事件

鼠标进入：onmouseenter或onmouseover

鼠标移除：onmouseleave或onmouseout

<script>
//获取节点
var img=document.getElementById("box");
//绑定鼠标进入事件 img.onmouseenter=function(){
img.src="./1.jpeg";
}
//绑定鼠标移出事件 img.onmouseleave=function(){
img.src="./0.jpeg";
}
</script>

任意一个节点可以同时绑定多个事件

onfouse和onblur

概述：可以给任意元素绑定，但是一般与表单元素 input 使用

<body>
<p>
请您输入您的手机号：<input type="text" id="cur">
<span id="phone"></span>
</p>
</body>
</html>
<script>
//获取节点
var input=document.getElementById("cur"); var span=document.getElementById("phone");
//绑定聚焦事件 input.onfocus=function(){
//文字颜色为绿色
input.style.color="green";
}
input.onblur=function(){
//获取文本框中的文本 var txt=input.value;
//正则表达：验证字符串是不是手机格式 if(/^1[3456789]\d{9}/.test(txt)){
span.innerHTML="是手机格式";
}else{
span.innerHTML="不是手机格式";
}
}
</script>

鼠标系列的事件

概述：我们可以给任意节点绑定鼠标系列事件

onmousedown: 鼠标按下事件

onmousemove: 鼠标移动事件

onmouseup: 鼠标抬起事件

<script>
//鼠标按下 document.onmousedown=function(){ document.body.style.background="red";
}
//鼠标移动事件 document.onmousemove=function(){
var R=parseInt(Math.random()*255); var G=parseInt(Math.random()*255); var B=parseInt(Math.random()*255);
document.body.style.background="rgb("+R+","+G+","+B+")";
}
//鼠标抬起事件 document.onmouseup=function(){
document.body.style.background="white";
}
</script>

事件对象

事件对象

概述：任意节点树上得节点（标签）。都可以绑定一个或多个事件。当用户触发事件得时候，系统会自动给事件处理函数传递实参，而这个参数就是事件对象，可以传递很多信息

<script>
//获取节点
var div = document.querySelector("div"); div.onclick = function(event){
//对于高级浏览器：谷歌、IE8以上的浏览器	>event
//对于低级浏览器：IE8以下的，事件对象作为BOM对象属性 var e = event||window.event; console.log(e);
}
</script>

当事件处理函数执行得时候，系统会自动注入实参，我们用形参接收即事件对象

在不同浏览器中事件对象是有兼容性问题得，使用短路语句进行兼容

获取鼠标位置

概述：当用户触发时间的时候，系统会自动给事件处理函数注入实参，他可以给我们提供鼠标得位置信息

screenX||screenY

概述：他们两者是事件对象属性，主要可以获取鼠标位置。获取鼠标位置零零点在电脑屏幕左上角。

pageX||pageY

概述：他们两者也是事件对象属性，主要作用也是获取鼠标位置。是网页主题部分左上角为零零点

clientX||clientY

概述：他们两者也是事件对象属性，主要作用是获取鼠标位置。但他得零零点是按照可视区域左上角为零零点

offsetX||offsetY

概述：他们两者也是事件对象属性，他们两者主要的作用也是获取鼠标位置。

获取数据类似 pageX||pageY 。但是这个获取数据零零点，会收到子元素坐标体系影响。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 10000px;
}
.outer{
position: fixed; width: 600px; height: 300px;
background: skyblue; left: 30%;
top: 30px;
}
.inner{
width: 300px; height: 150px; background: red; margin:20px auto;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>


</body>
</html>
<script type="text/javascript">
//获取节点
var inn = document.querySelector('.inner');
//鼠标在整个网页当中移动 document.onmousemove = function(event){
//短路语法进行兼容
var e = event||window.event;
inn.innerHTML = "screenX:"+ e.screenX + "screenY"+e.screenY+"
<br/>";
inn.innerHTML += "pageX:"+e.pageX +"pageY:"+e.pageY+"<br/>"; inn.innerHTML +="clientX"+e.clientX +"clinetY"+e.clientY+"<br/ >"; inn.innerHTML +="offsetX"+e.offsetX +"offsetY"+e.offsetY;
}
</script>

原生JS实现拖拽效果

 

概述 : 在前端领域当中拖拽是一个非常常见效果。拖拽三板斧鼠标按下 => 鼠标移动 => 鼠标抬起。

<script type="text/javascript">
//移除事情
var div = document.querySelector('.cur');
//鼠标按下
div.onmousedown = function(event){
//短路语法兼容事件对象
var e = event||window.event;
//获取鼠标距离元素左侧顶部数据 var startX = e.offsetX; var startY = e.offsetY;
//鼠标在整个网页中移动
document.onmousemove = function(event1){
//短路语法兼容事件对象
var e1 = event1||window.event;
//元素进行拖拽
div.style.left = e1.clientX - startX +"px"; div.style.top = e1.clientY - startY +"px";
}
}
//鼠标抬起事情	将鼠标移动事件移除
document.onmouseup =function(){ document.onmousemove = null;
}
</script>

可以将元素事件移除：就是给这个元素绑定多次事件。让后者覆盖前者。