JavaScript笔记

一、什么是javascript？

JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能。

本文配套练习代码，点击下载

二、javascript组成部分

EMCAScript、BOM（浏览器对象模型）、DOM（文档对象模型）

三、js的书写位置

行内:可以在具体的事件属性中直接写js程序

内部:在网页的任意位置通过<script></script>标签来写js程序

外部:在一个js文件中编写js程序,需要使用改程序的网页通过<script src="js文件地址"></script>引入外部js文件

四、js中支持的数据类型

数字

字符串

布尔类型(true false)

对象

五、js中的运算符

赋值运算符:使用赋值运算符可以给变量赋值

           =、+=、-=、*=、/=、%=

           =:将等号右侧的数据赋值给左侧变量,右侧如果有计算部分会优先计算右侧的数据

结果

           +=:将运算符右侧的数据累加到左侧的变量中

           -=:将左侧的变量的数据减去运算符右侧的数据得到的差赋值给左侧的变量

           *=:将左侧的变量的数据乘以运算符右侧的数据得到的积赋值给左侧的变量

           /=:将左侧的变量的数据除以运算符右侧的数据得到的商赋值给左侧的变量

           %=:将左侧的变量的数据除以运算符右侧的数据得到的余数赋值给左侧的变量

算术运算符:对数据进行算术运算

           +、-、*、/、%、++、--

          注意:

                  在做加法运算时,如果算式中包含任意一个字符串,计算结果一定是一个字符串

                  当字符串参与加法计算时,不在是进行算式累加而是字符串的拼接

                  ++在变量原本的数据上加1 --在变量原本的数据上减1

                  ++和--写在变量之后,当这个算式正在被使用时,会先使用原来的值参与计算,然后在进行+1的操作

                  ++和--写在变量之前,当这个算式正在被使用时,会先进行+1的操作,然后使用新的值参与计算 

条件运算符:组成条件表达式,表达式的结果是true或者false

           >、<、>=、<=、==、!=

逻辑运算符:连接多个条件表达式,表达式的结果是true或者false

           &&、||、!

           &&:表示并且

           ||:表示或者

           !:非

四种运算符执行的先后顺序:算术运算符(先乘除后加减)>条件运算符>逻辑运算符>赋值运算符,可以使用()优先执行某一部分的运算

三元运算符

         语法:条件表达式?数据:数据

         作用:根据前面条件的结果,三元表达式的结果等于第一个数据或者第二个数据

              当前面的条件成立时,三元表达式的结果为一个数据否则结果第二个数据

六、js中的流程控制

选择结构:

         if选择结构完整语法:

                  if(条件){

                  }

                  else if(条件){

                  }

                  else if(条件){

                  }

                  else{

                  }

         每个if结构必须包含if块,可以有任意多个else if块,最多只能有一个else块

         在完整的if结构中,如果if条件成立或者else if条件成立那么剩下的所有else if块不会在执行,整个if结构会结

束,如果所有的else if条件都不成立,else中的语句块才会执行

         switch选择机构:

                  switch(变量或表达式){

                           case 值1:

                                    代码块;

                                    break;

                           case 值1:

                                    代码块;

                                    break;

                           case 值2:

                                    代码块;

                                    break;      

                           ...

                           default:

                                    代码块;

                  }        

循环结构:

         while循环:

                  while(条件表达式){

                  }

         程序执行到while结构,先判断循环条件,条件成立执行while块中的语句，语句块执行结束会再次判断循环条件是否成立,如果成立继续执行while块中的语句,如果条件不成立则结束while结构。

         do-whlie循环:

                  do{

                           循环代码

                  }while(循环条件);

         for循环:

                  for(变量初始化;循环条件;迭代){循环体}

break和continue:

         break作用是结束break关键字所在的这一个循环

         continue作用是跳过continue所在的循环中的一次循环继续下一次循环

七、函数

         函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

         定义函数:

                  无参函数:

                           语法:function 函数名称(){代码块}

                  带参函数:

                           语法:function 函数名称(参数1,参数2......){代码块}          

         执行函数:

                  执行函数可以通过函数名调用函数或者通过事件来驱动

                  通过函数名称调用函数:

                           调用无参函数语法:函数名称();

                           调用带参函数语法:函数名称(可选的数据);

                  通过事件驱动函数:

                           某个标签内部使用对应的事件属性来驱动某个函数

                           例如:<button οnclick="函数名称()">按钮<button>

                                <button οnclick="函数名称(可选的数据)">按钮</button>

         返回值:

                  如果我们需要通过执行函数得到一个数据结果,可以在函数中将需要返回给外界的数据使用return返回出去

                  return有两个作用:

                                    1.结束当前函数的运行

                                    2.返回一个数据给调用者

八、事件

         点击事件:onclick    单击鼠标左键触发事件

         双击事件:ondblclick 快速双击鼠标左键两次触发事件

         鼠标按下事件:onmousedown 按下鼠标的任意一个键触发事件

         鼠标弹起事件:onmouseup 当鼠标在标签上弹起按键时

         鼠标移动事件:onmousemove 当鼠标在标签上移动时

         鼠标进入标签区域:onmouseover 当鼠标进入标签区域

         鼠标离开标签区域:onmouseout  当鼠标离开标签区域

         键盘按下事件:onkeydown 当键盘的任意按键被按下时触发事件

         键盘按住事件:onkeypress 当键盘的任意按键按住时触发事件

         键盘弹起事件:onkeyup 当键盘的任意按键弹起时触发事件

         域改变事件:onchange 当下拉框、文件域、单选框、多选框的内容发生改变时

         输入框内容改变事件:oninput onpropertychange 当文本框的内容发生改变时

         获取焦点事件:onfocus 当输入框获取焦点时触发事件

         失去焦点事件:onblur 当输入框失去焦点时触发事件

         表单提交事件:onsubmit 当使用submit按钮提交表单时触发事件

         滚动条滚动事件:onscroll 当滚动条发生滚动时触发这个事件

         使用滚动事件解决动态问题时可能要用到的属性:

         document.documentElement.scrollHeight:滚动条总高度

         document.documentElement.scrollTop:滚动条距离顶端的距离

         document.documentElement.clientHeight:网页的可见部分高度

判断滚动条滚动到底部条件是:

document.documentElement.scrollHeight-document.documentElement.scrollTop == document.documentElement.clientHeight

九、对象

         对象是一个特殊的数据类型

         对象是多个数据的一个综合体

         例如:我们要描述一块手机的信息

         1.创建对象

                  var phone=new Object();

         2.使用对象的属性来保存数据(任意数据)

                  phone.bland="iphone";

                  phone.price=7699.00;

                  phone.size=5.5;

         3.从对象中取出某一个属性所保存的数据

                  phone.bland

         我们可以将函数保存到对象的属性中

         当我们需要执行函数时,直接使用对象名.属性名()执行函数

         由于对象的属性可以保存任何类型的数据,所以一个对象(电池)也可以保存到另外一个对象(手机)的属性中。这种情况下,电池对象是手机对象的子对象。

十、JSON

         描述数据的一种特殊格式

         格式:{"属性名":"属性的值","属性名":"属性的值".....}

         JSON主要用于跨平台的数据传输

         我们可以使用JSON这种特殊的数据格式来描述一段文本信息,然后将这一段文本信息传递到服务器,但是这段文本本身并不是js对象,不能使用.的方式来使用属性

         我们可以使用JSON这种特殊的数据格式来描述一个对象的信息,这个对象可以使用.的方式来使用属性,但是并不能用于数据传递     

         js提供了一个JSON对象可以用于json字符串和js对象的相互转换

         JSON.parse(json字符串)将json字符串对应的js对象作为返回值返回给调用者

         JSON.stringify(js对象)将js对象转为json格式的字符串并返回给调用者

十一、JS中的常用的内置对象

         JSON:完成json字符串和js对象的相互转换

         数组:在连续的内存空间中保存多个数据的数据格式,数组中可以保存任何的数据类型

              数组.push(数据) 可以将数据保存在数组中

              数组[下标] 可以获取数组中的数据,下标从0开始

              数组.length表示数组的数据个数,数组的长度

         Math:数学对象,保存了一些数学中的常量,定义了一些和数学相关的函数

              Math.PI:圆周率

              Math.E:自然数

              Math.abs(数字):求绝对值

              Math.round(数字):四舍五入

              Math.floor(数字):向下取整

              Math.ceil(数字):向上取整

              Math.random():获取一个0-1之间的随机小数

         Data:日期对象,可以获取当前浏览器所在的计算机时间

              var time=new Date();

              time.getFullYear():获取时间对象中的年份

              time.getMonth():获取时间对象中的月份

              time.getDate():获取时间对象中的日期

              time.getHours():获取时间对象中的时

              time.getMinutes():获取时间对象中的分

              time.getSeconds():获取时间对象中的秒

              time.getDay():获取时间对象中的星期

              time.getTime():获取时间对象中的1900年到现在的毫秒数

         String:字符串对象,主要定义关于字符串的一些操作

              字符串.length 获取字符串中的字符个数(字符串长度)

              字符串.charAt(index) 获取字符串中下标等于index的一个字符

              字符串.substring(indexA,indexB) 获取indexA至indexB之间的一段字符串(包括indexA的字符不包括indexB的字符)

              字符串.substr(index,length) 获取从index开始后面length长度的字符串(包含index)

              字符串A.indexOf(字符串B) 返回字符串B在字符串A中首次出现的下标(从左向右搜索),没有搜索到返回-1

              字符串A.lastIndexOf(字符串B) 返回字符串B在字符串A中首次出现的下标(从右向左搜索),没有搜索到返回-1

              字符串.toUpperCase() 返回字符串的全大写格式

              字符串.toLowerCase() 返回字符串的全小写格式

              字符串.trim() 去掉字符串的前后空格

              字符串.replace(目标字符串,替换之后的字符串) 替换字符串中找到的第一个目标字符

              字符串A.split(字符串B): 通过字符串B将字符串A拆分为一个数组

十二、BOM(Browser Object Model)

js提供了一组对象，通过这一组对象提供的属性或者函数可以操作一个浏览器的某些部分(窗口,历史记录,地址栏)。同时这一组对象共同构成了一个树状模型。

BOM模型的结构:

window对象提供的属性和函数:

window.open(url):在新窗口打开网页,第一个参数表示地址,第三个参数表示窗口的特定属性

window.close():关闭当前窗体

window.alert(内容):弹出一个提示框

window.confirm(内容):弹出一个带确定和取消按钮的提示框,该函数的返回值是true或者false,当用户点击确定返回true,点击取消返回false

window.prompt(内容):弹出一个带输入框的提示框,返回值是用户输入的内容

window.parseInt(字符串):将字符串转为整数,前提是字符串中的内容必须由数字组成

window.parseFloat(字符串):将字符串转为小数,前提是字符串中的内容必须由数字组成

window.setTimeout(“函数名称()”,n):在n毫秒之后执行一次目标函数

window.setInterval(“函数名称()”,n):在n毫秒之后每隔n毫秒执行一次目标函数

window.clearTimeout(计时器的名称):清除目标计时器

window.clearInterval(计时器的名称):清除目标计时器

window.location:窗口对象下的地址栏属性保存的是地址栏对象

window.history:窗口对象下的历史记录属性保存的历史记录对象

window.document:窗口对象下的文档对象属性保存窗口中的文档信息

location对象提供的常用属性:

location.host:获取当前地址中的主机地址和端口

location.hostname:获取当前地址的主机地址

location.post:获取当前地址的端口

location.href:获取或者设置地址栏的地址,可以用来实现页面跳转

history对象提供的常用函数

history.back():后退一个页面

history.forward():前进一个页面

history.go(n):n为正则前进n个页面,n为负则后退n个页面

十三、DOM（文档对象模型）

DOM(Document  Object  Model)

DOM分为三个大类:Core DOM、HTML DOM、XML DOM

将一个网页的中的每一个标签都抽象为一个对象(标签对象、节点、元素)，整个网页中的所有对象按照标签的书写顺序组成了一个树状的模型，这个模型就是文档对象模型。

例如，网页A有如下内容:

<html>

<head>

<title>网页标题</title>

</head>

<body>

<div>

<div>

<img src=”logo.png” width=”200” height=”100”>

</div>

<div>

<ul class=”ul1”>

<li>男装</li>

<li>女装</li>

<li>香水</li>

<li>手表</li>

</ul>

</div>

</div>

<body>

</html>

网页A在JS中的文档对象模型的结构如下:

在js中一个网页的内容会抽象为一个文档对象模型,模型中的每一个对象都对应页面中的一个标签，通过修改这个对象的属性或者调用某些函数可以修改标签在页面中的状态。

要通过标签对应的对象修改标签的某些状态,首先要获取这个标签对应的对象,要获取标签对象就需要使用一系列的选择器:

选择器

在js中一系列用来获取标签对象的函数统称选择器

id选择器:

标签对象.getElementById(标签对应的id),返回值是该id值对应的这个标签对象

标签选择器:

标签对象.getElementsByTagName(标签名称),返回值是标签对应的所有对象所构成的一个数组

name属性选择器:

标签对象.getElementsByName(name属性的值),返回值是name属性匹配的所有标签对应的对象所构成的一个数组

class属性选择器

标签对象.getElementsByClassName(class属性的值),返回值是class属性匹配的所有标签对应的对象所构成的一个数组

节点属性

通过一个标签对应的对象找到这个标签的父级标签对象或者是子级标签对象

标签对象A.parentNode:找到标签对象A的直接父级标签

标签对象A.childNodes:获取标签对象A下面的所有子节点,返回一个数组,内部的空白文本也会作为节点的一种

ps:节点的分类可以使用标签对象.nodeType来查询等于1:标签节点 等于2:属性节点 等于3:文本节点

标签对象A.children:获取标签对象A下面所有的子标签节点

节点操作

父标签对象.removeChild(子标签对象):从父级对象中删除子级标签

document.createElement(标签名称):创建一个标签对象

父标签对象.appendChild(子标签对象):将子标签追加到附标签的最后

• HTML DOM

在JS中提供了针对于HTML中某些特殊标签的特殊节点操作

表格:

表格对象.insertRow(index):向表格中新增一行,该行所处的位置由参数index决定,

               使index等于当前表格的总行数,可以将新行插入到最后

               新增的这一行对象会作为返回值返回

表格对象.rows:获取表格当前所有的行对象,返回值是一个数组

行对象.insertCell(index):向一行中新增一列,该列所处的位置由参数index决定,

               使index等于当前行的总列数,可以将新列插入到最后，

               新增的这一列对象会作为返回值返回

行对象.cells:获取当前行的所有列,返回值是一个数组

表格对象.deleteRow(index):从表格中删除一行,删除的位置取决于index

行对象.deleteCell(index):从行中删除一列,删除的位置取决于index

行对象.rowIndex:获取这一行在当前表格中的行号

列对象.cellIndex:获取这一列在当前行中的序号

下拉框:

创建option标签对象:new Object(option的文字,option的value);

下拉框对象.options:获取下拉框中所有的下拉选项

• 标签对象的属性

通过修改标签对象的某些属性达到修改标签内容或者样式的目的

html标签中的属性在对应的标签对象中都存在

例如:图片标签src属性、width属性、height属性在图片标签对象中依然存在,通过修改对象的这3个属性的值可以修改标签属性

获取标签属性的值:标签对象.getAttribute(“属性名称”)

设置标签属性的值:标签对象.setAttribute(“属性名称”,属性的值);

上述两个函数可以用于HTML规范中的属性设置也可以用于规范之外的自定义HTML属性

由于HTML规范中的某些属性具备特殊功能，当我们使用setAttribute()来设置属性的值时,也能够把该属性的特殊功能带给这个标签

一些标签对象的常用属性:

标签对象.style:修改标签的行内样式

用法1:标签对象.style=”样式表”;

 用法2:标签对象.style.样式属性=”值”;

标签对象.className:用于获取或者设置标签class属性的值

标签对象.classList:用于增减class属性的值

标签对象.innerHTML:获取或者设置双标签之间的内容

标签对象.InnerText:获取或者设置双标签之间的内容

innerHTML属性会将内容识别为html标签

innerText属性会将内容识别为普通文本

我们可以使用innerHTML属性设置父标签中的子标签

表单控件.value:获取表单控件的值

单选框或者多选框.checked:判断单选标签或者多选标签是否选中,选中则返回true

• 动态注册事件

方式1:

语法:

标签对象.事件属性=funtion(){

代码体

}

常用的事件在标签对象中都能找到一个对应的属性,通过该属性可以给标签动态注册各种事件

方式2:

语法:

标签对象.addEventListener(“事件名称”,function(){},boolean);

this关键字:

在标签的事件属性对应的函数参数中使用this,this表示的是绑定事件的这个标签对象

在动态注册事件时,事件对应的函数中可以使用this,this表示的是绑定事件的这个标签对象

• 事件源对象和事件流

   事件源对象是在事件触发时,由js所创建的一个对象,这个对象只能在事件绑定的函数中使用,它记录了跟事件相关的一些信息。

   使用该事件源对象的方式:

   在事件绑定的函数中使用event来操作事件源对象

   event.button:获取在鼠标点击事件中,点击的鼠标按键的序号(0左键1滚轮2右键)

   event.keyCode:获取在键盘输入事件中,按下的键盘的键号

   event.clientX:获取鼠标当前距离文档左侧的间距

   event.clientY:获取鼠标当前距离文档顶部的间距

   event.screenX:获取鼠标当前距离屏幕左侧的间距

   event.screenY:获取鼠标当前距离屏幕顶部的间距

事件流:

事件流指的是事件传递的方向,默认情况下采用的是事件冒泡,也就是事件会从内层标签初步传递到外层标签,可以使用addEventListener(“事件名称”,fucntion(){},true)将事件流方向进行反转。

假如我们需要停止事件的传递,使用事件源来停止事件传递。

   event.stopPropagation();

   event.target:触发该事件的最初的标签对象

   event.srcElement: 触发该事件的最初的标签对象

   event.currentTarget:绑定事件的这个标签对象

  

• 表单验证与正则表达式

表单验证有两种常见的方式:

方式一:

当我们使用的是submit按钮提交表单数据时，可以在表单标签中使用onsubmit事件来进行表单验证

语法:

<form οnsubmit=”return fun()”><form>

<script>

function fun(){

if(表单中的数据满足条件){

return true;//提交表单

}else{

return false;//不提交表单

}

}

</script>

        方式二:

当我们使用普通按钮的点击事件来提交表单时,可以通过表单对象.submit()来提交表单数据,在数据合法的情况下执行submit()函数,数据不合法不执行submit()函数

 

正则表达式:

又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本

正则表达式.test(字符串):验证字符串是否满足正则表达式的规则,满足返回true不满足返回false

语法:

/正则表达式内容/修饰符

修饰符(可选):

i:匹配字符串时忽略大小写

g:替换字符串时多次匹配

        在描述正则表达式内容时,需要使用一些特殊的符号,如下:

 

\o     null

\t      制表符

\n     换行符

\v     垂直制表符

\f     换页符

\r     回车符

\xnn   由十六进制nn指定的拉丁字符 如\xoA等价于\n

\uxxx  有十六进制数xxxx指定的Unicode字符，如\u00009等价于\t

\cX    控制字符^X,如\cJ等价于\n

[…]    方括号内的任意字符

[^…]   不在方括号内的任意字符

.      出换行符和其他Unicode行终止符之外的任意字符

\w     任何ASCII字符组成的单词 等价于[a-zA-Z0-9]

\W     任何非ASCII字符组成的单词 等价于[^a-zA-Z0-9]

\s     任何Unicode空白符

\S      任何非Unicode空白符

\d     任何ASCII数字 等价于[0-9]

\D     除了ASCII数字之外的任何字符 等价于[^0-9]

{n,m}  匹配前一项至少n次，但不能超过m次

{n, }  匹配前一项n次或更多次

{n }   匹配前一项n次

?      匹配前一项0次或1次 等价于{0,1}

+      匹配前一项1次或多次 等价于{1,}

*      匹配前一项0次或多次 等价于{0,}

|      选择，匹配的是该符号左边的子表达式或右边的子表达式

(…)    组合，将几个项组合为一个单元，这个单元可通过*,+,?,|等符号加以修饰，而且可以记住和这个组合相匹配的字符串以供此后的引用使用

(?:…)  只组合，把项组合到一个单元，但不记忆与该组相匹配的字符

\n     和第n个分组第一次匹配的字符相匹配，组是圆括号中的子表达式（也有可能是嵌套的）,组索引是从左到右的左括号数，(?:形式的分组不编码

^      匹配字符串的开头，在多行检索中，匹配一行的开头

$      匹配字符串的结尾，在多行检索中，匹配一行的结尾

\b     匹配一个单词的边界，简言之，就是位于字符\w和\W之间的位置，或位于字符\w和字符串的开头或结尾之间的位置（注意：[\b]匹配的是退格符）

\B     匹配一个非单词的边界的位置

(?=p)  零宽正向先行断言，要求接下来的字符都与p匹配，但不能包括匹配p的那些字符

(?!p)  零宽正向先行断言，要求接下来的字符都与不p匹配