JavaScript

桃扇骨 2021-12-22 15:34 245阅读 0赞

### 文章目录 ###

*   *  介绍和引入
     *  声明
     *  变量
     *  运算符
     *  逻辑结构
     *  数组
     *  数组的常用方法
     *  对象
     *  函数
     *  JS常用对象和方法
     *  事件机制
     *  window对象
     *  document对象
     *  document获取元素对象
     *  document操作元素的属性

## 介绍和引入 ##

问题:  
在学习了HTML和CSS 之后可以完成一张网页的开发，并让网页更加的美观。  
随着网民的递增，网页搜集的用户数据种类也变的比较多。  
搜集的数据是要提交给服务器使用的，而用户在网页中书写数据的时候，不一定会按照要求  
进行数据的书写，这样造成数据提交给后台服务器，后台服务器在使用数据  
之间需要先校验数据的正确性，如果数据不正确，还需要重新提示用户数据  
不正确，需要重新填写，但是如果数据的校验放在后台服务器，造成效率极低  
造成用户的体验极差。怎么办？  
解决：  
如果将数据的格式校验放在服务器端校验，效率比较低，从服务器的角度考虑  
希望获取的数据直接是格式正确的数据。所以呢，我们将HTML搜集的数据的格式  
校验动作发生在浏览器端，也就是在数据提交之前就完成数据的校验。  
实现：  
使用JavaScript语言完成。  
特点：  
1、必须依赖HTML网页运行。  
2、独立的语言，需要在HTML网页中独立声明。  
3、由浏览器解析执行。  
作用：  
1、完成网页搜集的数据的校验  
2、完成网页特效的开发。  
3、实现网页和用户之间的互动。

曾用名：ECMAScript。  
历史：  
1、网景公司发明的，8天。导航者浏览器。  
2、火狐。  
总结：  
学习使用js技术让网页和用户之间可以实现互动。

## 声明 ##

作用：在HTML代码中声明一块区域用来编写js代码，便于阅读和浏览器的解析。  
和其他语言代码进行区分  
内容：  
内联方式:  
在head标签中使用script标签声明  
特点：代码仅在当前网页有效。  
外联方式:  
在head标签中使用script标签引入外部声明的js文件  
src的值为js文件的相对路径|网络路径(url)  
  
特点：  
降低代码的冗余，提升代码的重用性。  
降低网页和js代码的耦合性。

作用：  
都是声明js的代码域，我们可以在声明中书写当前网页的js代码。  
注意：  
不要二合一！  
注意：  
注释和java代码的注释一致。

外联方式:引入外部声明的js文件

## 变量 ##

问题：  
HTML可以格式化展现数据，页可以收集数据，在没有js以前，  
我们将HTML收集的数据直接提交给后台服务器处理，在有了  
js之后，我们希望先使用js对要提交的数据进行格式化校验，  
没有问题后再提交给后台服务器处理，js代码处理的数据的来源  
是HTML网页收集的数据，就意味着我们需要在js中使用变量记录  
下要处理的数据。  
解释：  
网页数据–js变量–js代码处理  
实现：  
js的变量学习。  
内容：  
var 变量名=值；  
数据的类型:  
number:数值类型  
string类型:字符串类型  
boolean：布尔类型  
Object:对象类型  
特殊值：  
null:object类型  
undefined:undefined类型  
注意：变量声明不赋值，默认值为undefined  
NaN:number类型，not a number 使用Number方法字符转换数值失败时返回.  
变量的转换  
Number(数据)：将其他数据转换为数值类型，如果转换失败，返回NaN  
注意：  
true 1  
false 0  
Boolean(数据)：  
判断变量是否有实际意义的值  
“” 0 null—false  
其他的都是----true  
注意：  
在做逻辑判断时Boolean可以省略不写。  
特点：  
1、只存储数据没有数据类型的描述。  
2、js允许同名变量的声明，新的值会覆盖原有值。  
3、字符串声明可以使用单引号也可以使用双引号。  
缺点：  
没有变量类型，意味着没有数据存储的类型，意味着运算不好区分。  
优点：  
降低变量声明的个数，节省内存空间。  
变量：  
存储数据，变量的类型是描述存储的数据的类型的，变量  
的类型越多，则数据的处理越方便，只需要看变量的类型  
就知道存储的是什么数据。但是在js中变量全部是var类型。  
这样造成数据的类型没有直接的描述，运算时需要程序员  
自己区分数据来运算，比较麻烦。

## 运算符 ##

作用:进行数据运算。  
内容:和java一致。  
算术运算符:  
\+，-，\*，/,++,–,%  
比较运算符:  
>,>=,<,<=,!=,,=  
逻辑运算符:  
!,&&,||  
赋值运算符:=  
运算优先级：().  
注意：  
因为变量没有类型，但是数据有类型，所以运算时需要  
程序员做到心中有数，天下我有。  
特殊字符：  
==：等值符  
先判断类型，类型一致，则直接比较内容，内容相同true，内容不同false  
类型不一致，则先使用Number将数据全部转换为数值类型，然后在比较内容。  
内容相同true，内容不同false  
===：等同符  
先判断类型，类型不一致，直接false  
类型一致，则再比较内容， 内容相同true，内容不同false

## 逻辑结构 ##

作用：根据不用的实际场景完成数据的运算。  
内容:  
判断结构  
if()\{\}  
if()\{\}else\{\}  
if()\{\}else if()\{\}…else\{\}  
switch  
循环结构  
for循环  
while循环  
do\{\}while()循环  
用法和java一致。  
注意：  
变量的声明只有var！！！

## 数组 ##

问题：  
在学习了js之后，js中的数据和数据运算。  
js中的数据可以使用变量记录即可，但是如果数据量比较大  
使用变量记录就会比较麻烦，因为一个变量只能记录一个数据。  
而且数据与数据之间也有关系，而变量是无法将数据之间的关系  
也记录来的。  
解决:  
使用数组。  
学习：  
数组的声明:  
var arr=new Array();  
var arr=new Array(length);  
var arr=\[\];  
注意：  
js中的数组可以存储任意类型的数据。  
数组的赋值:  
arr\[角标\]=值;  
arr\[角标\] 返回该角标对应的数据，如果没有数据默认返回undefined  
注意：  
js中的数组长度是不固定的，根据内容动态改变。  
数组的length属性:  
数组名.length 获取当前数组的长度  
数组名.length=新的长度  
注意：如果长度小于原有长度，则会将超出的数据自动删除。  
数组的遍历：  
使用for循环。  
数组特点总结：  
存储数据长度不固定。  
作用：  
存储数据。

## 数组的常用方法 ##

concat方法：  
作用：将当前数组和其他的数据合并后返回新的数组  
join方法：  
作用：将当期数组的元素拼接在一起返回字符串数据，以指定的符号隔开。  
pop方法：  
作用：移除数组中的最后一个元素并返回该元素。  
push方法：  
作用:将新元素添加到一个数组中，并返回数组的新长度值。  
reverse方法：  
作用：返回一个元素顺序被反转的 Array 对象。  
slice方法：  
作用：返回一个数组的一段。  
注意：  
slice 方法一直复制到 end 所指定的元素，但是不包括该元素。  
如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度。  
如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度。  
如果省略 end ，那么 slice 方法将一直复制到 arrayObj 的结尾。  
如果 end 出现在 start 之前，不复制任何元素到新数组中。

## 对象 ##

问题：  
我们在学习了函数后，可以使用函数对象某些特定的功能进行封装  
然后呢调用即可，在一定程度上降低了代码的冗余，如果函数比较多  
我们希望对函数也进行封装，便于使用，怎么使用呢？  
解决:  
使用js对象  
内容：  
js对象的创建:  
var 对象名=new Object();  
var 对象名=\{\}  
js对象的特点:  
在js中声明的对象可以自定义存储任意数据。  
js对象的数据存储方式:  
对象名.属性=值。  
对象名.属性 返回存储的数据  
js对象的作用：  
存储数据，可以存储键值对数据。  
js对象的json格式声明:  
var 对象名=\{  
键名:值,  
键名:值,  
…  
键名:值  
\}

## 函数 ##

问题：  
在学习了js的变量，运算符，逻辑结构，以及数组后，我们可以声明  
代码完成数据的运算，但是在真实业务场景中，数据虽然在改变，但是  
处理数据的代码是相同，这样造成同类型的代码我们需要多次声明，造成  
代码的冗余。  
解决：  
将处理某功能的代码进行封装，对外暴露数据的传入即可。  
实现：  
函数。  
作用：  
封装功能代码，降低代码的冗余。  
内容：  
函数的声明:  
声明一：  
function 函数名(形参1,形参2,…)\{函数体\}  
声明二：  
var 变量名=new Function(“形参1”,“形参2”,…,“函数体”);  
声明三：  
var 变量名=function(形参1,形参2,…)\{函数体\}  
注意：  
在js中函数是以对象的形式存在。  
函数的参数:  
在调用函数的时候，形参可以不赋值也可以不赋完，但是按照顺序给值。  
形参的默认值是undefined。  
函数的返回值：  
如果有返回值则直接返回，没有则默认返回undefined。  
函数的执行符:  
函数对象()  
函数作为参数传递:  
因为在js中函数是对象，而对象是可以作为实参传递的。  
函数的调用:  
1、在js的代码域中直接调用。  
2、根据用户在网页中的行为动作触发调用。(事件机制)  
注意：  
目前声明的代码是直接声明在Script代码域中的，  
这些代码会在HTML网页加载的时候就完成执行了。  
注意2:  
js的只有一个全局代码域就是script声明的代码域

## JS常用对象和方法 ##

Date日期对象:

var d=new Date();  
 d.getYear() :从1900年距今的年份数  
 d.getFullYear() :当前年份  
 d.getMonth()+1 :当前月份  
 d.getDate() :返回当前日期  
 d.getDay() :返回星期数，但是周日返回0

d.getHours() :返回当前时间的小时数  
 d.getMinutes() :返回当前时间的分钟数  
 d.getSeconds() :返回当前时间的秒数

String字符对象:

var str=“abcdefg”;  
 str.indexOf(“g”) :返回指定字符的角标  
 str.toUpperCase() :返回装换的大写字符串  
 str.substring(0,2) :返回从指定的开始角标到结束角标的子字符串，含头不含尾。

Math数学对象：  
 该对象不用new，直接调用即可，Math.方法名()

Math.abs("-2") :返回数值的绝对值,自带Number转换。  
 Math.ceil(12.22) :向上取整  
 Math.floor(11.11) :向下取整  
 Math.round(3.5) :四舍五入  
 Math.random() :返回0-1之间的随机数，含0不含1。

Math.floor(1000+Math.random()\*9000));\} :返回四位数的随机数

Global对象：  
 从来不能new，也不能对象.方法名调用，而是直接调用。

eval方法：可以将字符串类型的js代码作为真实的js代码执行。

isNaN方法:判断数据是否为数值，是数值返回false，不是数值返回true

## 事件机制 ##

问题：  
在学习了js的函数后，可以声明函数对功能进行封装，然后调用函数  
完成功能的处理，但是目前我们函数的调用是在js代码域中直接调用的  
也就是在浏览器将网页加载成功后，函数就已经执行完毕了，而我们希望  
可以根据用户在网页中的行为动作来触发对应的函数执行，怎么办？  
解决：  
js的事件机制  
解释：  
事件机制：根据某个特定的行为动作触发对应的代码的执行。  
核心：监听。  
内容：  
单双击事件：  
单击事件：onclick: 用户在指定的HTML元素上发生单击行为，触发对应的函数执行。  
双击事件：ondblclick: 用户在指定的HTML元素上发生双击行为，触发对应的函数执行。  
鼠标事件  
鼠标悬停事件: onmouseover  
鼠标移出事件: onmouseout  
鼠标移动事件: onmousemove  
键盘事件：  
键盘下压事件: onkeydown  
键盘弹起事件: onkeyup  
值改变事件: onchange  
焦点事件:  
获取焦点: onfocus  
失去焦点: onblur  
页面加载事件:专门给body标签使用。  
注意：  
1、一个HTML元素上可以增加多个监听事件  
但是不同的监听会有监听的耦合性，要注意。  
2、一个HTML元素上可以增加任意监听，根据需求。  
3、一个监听事件可以触发多个函数

## window对象 ##

问题：  
js的出现是为了实现网页和用户之间的互动，而js  
代码由浏览器解析执行，而浏览器本身也是代码书写的  
那么在一些情况下，我们希望可以使用js来调用浏览器的  
一些功能，达到网页和用户互动更好的目的。比如:操作浏览器  
的地址栏信息。怎么办呢？  
解决：  
让浏览器厂商对外提供一个遵循js语法规范的对象，该对象  
中映射了浏览器的很多功能，而js开发人员直接调用该对象  
提供的方法和属性完成功能开发即可。  
BOM浏览器对象模型：  
规范了浏览器的中的命名规范。  
实现：  
window对象。  
作用：  
使用window对象可以调用浏览器自己的一些效果完成网页开发。  
内容：  
window对象的方法:  
框体方法：  
警告框：window.alert(“警告内容”)  
确认框:window.confirm(“确认你内容”)  
在页面中显示一个带有取消和确定按钮的提示框，点击取消返回false  
点击确定返回true  
搜集框:  
window.prompt(“提示语”)  
在页面显示一个搜集框，用户可以输入数据，点击取消返回null  
点击确定返回用户输入的数据。  
定时执行:  
window.setTimeout(fn,msecs);//返回当前线程的ID  
作用：指定的时间执行指定的函数  
window.clearTimeout(number id)  
作用：关闭指定的定时执行。  
间隔执行:  
window.setInterval(fn,msecs);//返回当前线程的ID  
作用：间隔指定的时间执行指定的函数  
window.clearInterval(number id)  
作用：关闭指定的间隔执行。  
子页面方法:  
window.open(url,“newwindow”,“配置信息”);  
作用：打开一个子页面  
配置信息：  
height=400, width=600, top=200,left=400,  
toolbar=yes,menubar=yes,scrollbars=yes,  
resizable=yes,location=yes,status=yes  
window.close()  
作用：关闭window.open打开的子页面。  
opener属性学习：  
作用:可以在子页面中触发调用父页面的函数执行  
注意：  
函数执行在父页面，触发在子页面。  
window对象的属性:  
地址栏属性：  
window.location.href//返回当前网页的地址信息  
window.location.href=“新的地址”//跳转新的网页资源  
window.location.reload();//刷线当前网页资源。  
历史记录属性  
window.history.forward()//前进  
window.history.back()//后退  
window.history.go(角标)  
0:表示当前网页  
正整数：表示前进指定的网页  
负整数：表示后台指定的网页  
屏幕属性：  
window.screen.width:返回客户端的屏幕的宽的分辨率  
window.screen.height:返回客户端的屏幕的高的分辨率  
浏览器属性:  
window.navigator.userAgent：返回当前浏览器的版本信息

## document对象 ##

问题:  
HTML网页是由浏览器解析执行的，但是目前我们想让正在运行的网页中  
增加一些其他的HTML元素，或者删除一些元素，或者修改一些元素，需要  
在源码中完成，并重新刷新网页加载资源才能出现效果，但是这么做，用户  
的体验就极差了。怎么办？  
解决：  
根据代码的执行机制，先声明源码，源码加载进内存执行。源码，内存中执行的代码。  
直接修改内存中执行的代码，修改后的效果会立马出现。  
实现：  
document对象  
解释：  
document表示当前浏览器正在运行的HTML网页。  
作用：  
通过document对象完成对当前浏览器正在运行的网页的操作  
增加一个新的元素  
删除一个元素  
修改元素  
等等  
使用：  
获取HTML元素对象  
操作元素的属性  
操作元素的内容  
操作元素的样式  
操作元素的文档结构  
总结：  
通过document对象完成对正在运行的HTML网页的操作。

## document获取元素对象 ##

直接方式：  
ID方式：  
document.getElementById(“id值”)//返回指定ID的HTML元素的对应的Js对象。  
作用：  
唯一获取一个指定的HTML元素对象  
name属性方式:  
document.getElementsByName(“name属性值”)//返回存储了相同name属性值的HTML元素的数组。  
作用：  
获取指定name属性值的HTML元素对象，便于整体操作。  
标签名方式：  
document.getElementsByTagName(“标签名”)//返回HTML文档中指定标签的HTML元素对象的数组  
作用：  
获取指定标签的所有HTML元素便于整体操作。  
类样式方式：  
document.getElementsByClassName(“类样式名”);  
作用：  
返回使用了相同类样式的HTML元素对象的数组，便于整体操作。  
间接方式：  
父获取子元素:  
作用：通过父元素获取子元素。  
使用：  
父元素对象.childNodes//返回所有的子节点对象的数组。  
父元素对象.getElementsByTagName(“标签名”)//返回父元素下指定标签的子元素对象的数组。  
子获取父元素：  
作用：通过子元素获取父元素对象  
使用：  
子元素对象.parentNode;  
兄弟关系:  
作用：获取同级元素对象  
使用:  
元素对象.previousSibling//返回兄元素  
元素对象.nextSibling//返回弟元素对象。

## document操作元素的属性 ##

先获取要操作HTML元素。  
获取元素属性：  
元素对象.属性名 //返回属性值  
修改元素属性  
元素对象.属性名=新的值  
案例：  
用户校验