JavaScript小结

1. 什么是javascript

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

2. javascript的作用

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

3. javascript的发展史

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

• window.onload()

  1. 是什么：window.onload()方法用来在页面完全载入后（包括图片，css文件等）才去执行脚本代码。

  2. 为什么：因为JavaScript中的函数需要HTML文档加载完才可以使用，如果没有加载完，此时的DOM树是不完整的，在调用js代码是可能出现undefined错误。

  3. 怎么做：window.onload=function(){

     ​ func1();//脚本代码

     ​ func2();

     ​ ……..

     ​ }

• 注释

  单行注释：//注释内容

  多行注释：/*注释内容*/

• 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的区别与联系www.runoob.com/js/js-typeo…

  注意：

  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拼接起来
     • 详细方法访问：how2j.cn/k/javascrip…

  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的元素。
     • 更多方法：how2j.cn/k/javascrip…

  3. js中，数组的长度可变，数组元素的类型可变。

• Date对象

  1. 创建日期对象：var d=new Date();//对象d就表示当前日期。
  2. 方法：
     • getFullYear(),getMonth(),getDate()获取年月日
     • getTime()：获取毫秒值。返回当前date对象对应的时间到1970年1月1日零点的毫秒值差。
     • 更多方法：how2j.cn/k/javascrip…

• 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)。上一级的节点是父节点，下一级的节点是子节点，同级的节点是同胞。同胞指的是具有相同的父节点，一个节点可拥有任意数量的子节点。

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"