41.Javascript脚本语言详解（下）

来源：互联网发布：php高并发解决方案编辑：程序博客网时间：2024/06/09 20:22

函数
- 函数参数
- 匿名函数
- Function对象
- 函数调用
- 异常处理
- 闭包
Javascript事件
- 函数与事件绑定举例
变量提升
严格模式
- 严格模式保留字
HTML DOM
- 定位元素
- 添加删除HTML DOM节点
- 更新HTML DOM节点
- 添加事件响应函数绑定
- 删除事件响应函数绑定
浏览器BOM
- window
  - windowopen
  - windowclose
  - windowlocation
  - windowhistory
  - 确认框
  - 提示框
  - 计时事件
    - setIntervalclearInterval
    - setTimeoutclearTimeout
  - cookie
    - 添加cookie
    - 修改cookie
    - 获取cookie
    - 删除cookie

转载请注明原始出处：http://blog.csdn.net/a464057216/article/details/52420509

函数

Javascript函数采用位置参数，返回值通过return语句返回给调用者（return也可以用于跳出函数）。

在函数内部采用var声明的是局部变量，函数运行完毕删除变量；在函数外部采用var声明的变量是全局变量，关闭网页后会被删除。
如果把值赋值给未用var声明的变量，该变量自动作为全局变量，在函数外部也可以访问：

function a(){    x = 3;}a();console.log(x);

浏览器控制台输出3。在HTML中，全局变量是window对象，所有数据都属于window对象，上面的变量x也可以写成window.x。

Javascript函数经常与页面事件绑定使用。

函数参数

Javascript对函数的参数不进行检查。定义函数时提供的参数叫做显式参数，调用函数时提供的参数叫做隐式参数。显式参数没有指定数据类型，隐式参数没有进行类型检测，隐式参数的个数也没有检查。如果提供的隐式参数个数不足，则显式参数的值为undefined：

这里写图片描述

浏览器控制台输出3 undefined。一种为参数提供默认值的变通方法如下：

这里写图片描述

浏览器控制台输出3 0。针对参数个数可变的函数，无法为每个隐式参数找到对应的参数名，可以使用函数对象的arguments属性，它是隐式参数的数组：

这里写图片描述

如果函数的隐式参数是一个对象，则是传引用，函数内对对象的修改在函数外是可见的。其他情况都是传值，函数内对值的修改，在函数外是不可见的。

匿名函数

匿名函数是没有函数名的函数，可以将其定义赋值给一个变量：

这里写图片描述

也可以定义时直接自调用：

这里写图片描述

定义函数的目的是重复利用一段代码，采用自调用的匿名函数没有这种优势。

Function对象

使用Function对象也可以定义函数：

这里写图片描述

对函数使用typeof返回function：

这里写图片描述

浏览器控制台输出：

functionfunction

每个函数对象都含有如下属性及方法：

arguments：函数调用时的隐式参数组成的数组，比如通过数组的length属性获取函数调用时提供的参数个数：

这里写图片描述

toString：以字符串形式返回函数定义。

这里写图片描述

浏览器调试窗口输出为：

这里写图片描述

函数调用

Javascript中函数有多种调用方式，不同调用方式之间，其实是this所指向的对象的区别。

作为全局函数调用：最基本的函数定义及调用方法，直接使用函数名调用和使用“window.函数名”的方式效果是一样的。这种情况下在函数内部访问this返回的是window对象：

这里写图片描述

浏览器控制台输出如下：

这里写图片描述

通过对象方法调用：将函数定义在对象的定义中，这种情况下在函数内部访问this返回的是函数所属的对象：

这里写图片描述

通过构造函数调用函数：

这里写图片描述

浏览器页面显示Mars Loo，控制台输出myFunction {}。

通过函数方法调用：
- 通过call()方法调用：
- 通过apply()方法调用：

异常处理

Javascript支持异常的抛出和捕捉，比如捕获异常（弹窗中换行使用\n）：

这里写图片描述

效果为：

这里写图片描述

使用debugger语句配合浏览器调试器可以进行单步调试：

这里写图片描述

浏览器（Firefox）中开启单步调试效果如下：

这里写图片描述

闭包

Javascript中，函数的作用域内可以访问到全局作用域的变量，但是全局作用域无法访问函数作用域内的变量。
为了在函数外能够访问到函数内的变量，可以在函数内再定义一个函数，这个内部函数能够读取外层函数的变量，并且在外层函数中返回这个内层函数：

这里写图片描述

上面的f2()函数就叫闭包，简单地讲就是能够读取其他函数内部变量的函数。其实闭包还有另外一个作用——让外层函数的变量常驻内存中：

这里写图片描述

因为f1的闭包f2被赋值给全局变量r，导致f2常驻内存，又因为f2依赖变量va，所以变量va常驻内存。函数f1内定义的add函数是全局的，可以在外部访问。

一个使用闭包封装计数器的例子：

这里写图片描述

Javascript事件

事件说明 onclick 鼠标单击 ondblclick 鼠标双击 onmousedown 鼠标按下 onmouseup 松开鼠标 onmouseover 鼠标第一次移动到元素上方 onmouseout 鼠标离开元素 onmousemove 鼠标在元素上方移动 onkeydown 键盘被按下 onkeypress 键盘被按下后，字符弹出 onkeyup 松开键盘 onaborted 适合<img>标签，图片加载被用户中断触发（只有IE支持） onload 页面加载完成 onresize 页面被调整大小时触发 onblur 元素失去焦点 onchange 元素失去焦点且内容发生改变 onfocus 元素获得焦点 onsubmit 表单提交到服务器前触发

函数与事件绑定举例

点击改变本元素文本内容：

这里写图片描述

本地表单验证：
将表单验证放在客户端执行，减小服务器压力（onsubmit中的代码返回false时，表单不向服务器提交）：

这里写图片描述

弹窗：

这里写图片描述

改变文字颜色：

这里写图片描述

动态改变图片：

这里写图片描述

向HTML输出流中输出内容：

这里写图片描述

因为document.write()在HTML文档的头部先运行，所以输出的内容在HTML文档的body元素的前部：

这里写图片描述

变量提升

在Javascript非严格模式下，函数的声明会被提升到脚本的开始处，变量的声明会被提升到所属代码块的最顶部，也就是变量和函数可以先使用后声明，比如：

这里写图片描述

上述代码输出：3。变量的初始化不会被提升，比如：

这里写图片描述

上述代码输出：undefined。

严格模式

在ES5标准中，Javascript引入了严格模式。严格模式为了和后续新标准兼容，同时也可以帮助编写更符合标准的Javascript代码。声明使用严格模式的方法是在脚本或函数的开始使用"use strict";语句，如果该语句出现在函数定义的开头，则只在函数内部使用严格模式。

严格模式不允许使用未声明的变量，但是还是允许函数上浮：

这里写图片描述

浏览器控制台报错：

这里写图片描述

严格模式的其他要求如下：

不允许删除变量：

这里写图片描述

浏览器控制台报错：

这里写图片描述

不允许删除函数：

这里写图片描述

浏览器控制台报错：

这里写图片描述

不允许变量重名：

这里写图片描述

浏览器控制台报错：

这里写图片描述

不允许使用八进制及其转义字符：

这里写图片描述

使用八进制值时浏览器控制台报错：

这里写图片描述

使用八进制转义字符时浏览器控制台报错：

这里写图片描述

禁止为只读属性赋值：

这里写图片描述

浏览器控制台报错：

这里写图片描述

禁止为一个使用getter方法读取的属性赋值：

这里写图片描述

浏览器控制台报错：

这里写图片描述

禁止删除一个不允许删除的属性：

这里写图片描述

浏览器控制台报错：

这里写图片描述

禁止使用with语句：

这里写图片描述

浏览器控制台报错：

这里写图片描述

在作用域 eval() 内创建的变量在其域外不能调用：

这里写图片描述

上述代码会改变网页中id="demo"的<p>元素的内容，但是浏览器控制台报错：

这里写图片描述

禁止this指向全局window对象：

这里写图片描述

浏览器控制台输出为：

mars [object Window]loo undefined

所以在严格模式下使用构造函数时，如果忘了加new，因为this不再指向全局对象：

这里写图片描述

所以浏览器会报错：

这里写图片描述

严格模式保留字

implements interface let package private protected public static yield eval arguments

HTML DOM

HTML DOM是w3c标准，将HTML文档中所有内容都定义为节点。整个文档是document节点，每个元素是元素节点，HTML元素内的文本是文本节点（文本节点的父节点是对应的元素节点，可以通过元素节点的innerHTML属性访问文本节点的值），每个HTML属性是属性节点，注释是注释节点。

浏览器渲染HTML文档时，将整个页面解析成如下的DOM树（节点之间有父、子、同胞关系，其中root节点（<html>元素）没有父节点。）：

这里写图片描述

注：图片引自菜鸟教程。

Javascript能够通过HTML DOM改变所有的HTML元素及其属性，改变页面中所有CSS样式、对页面中所有事件做出反应。

定位元素

通过id获取唯一性元素：document.getElementById("id名")，返回找到的DOM节点，未找到返回null。
通过class获取不唯一元素：document.getElementsByClassName("class名")，返回DOM节点组成的列表，没找到返回空列表。

这里写图片描述

通过标签获取不唯一元素：document.getElementsByTagsName("tag名")

这里写图片描述

添加、删除HTML DOM节点

添加或删除HTML DOM节点时，必须指定要操作节点的父节点。
添加HTML DOM节点的方法如下：

这里写图片描述

删除HTML DOM节点的方法如下：

这里写图片描述

假设s是一个HTML DOM节点，获取其父节点的快捷方法是访问其parentNode属性。

更新HTML DOM节点

改变HTML元素的内容：改变对象的innerHTML属性。
改变元素属性：使用“对象.属性名=属性值”的语法。使用节点的attributes属性可以获取节点的所有属性。
改变元素的CSS样式：使用“对象.style.样式名=样式值”的语法（style.visibility='hidden'或者'visible'可以控制元素不可见、可见）。
响应HTML事件：
- 用户点击时，改变文本：
- 使用Javascript分配HTML DOM事件：
onload事件：页面加载完成后触发，比如判断浏览器是否开启了cookie的支持：
各个浏览器对于onunload的支持并不好。

添加事件响应函数绑定

HTML DOM节点的addEventListener()函数可以添加事件响应监控。如果对同一个HTML DOM节点的同一个事件添加多个响应函数，这些函数不会覆盖，而是会顺序执行。
addEventListener()函数参数如下：

event：事件，如"click"、"mouseup"等。
function：与事件绑定的响应函数。
flag：false（默认）——按照先子元素再父元素的顺序捕获事件，true——按照先父元素再子元素的顺序捕获事件。

这里写图片描述

上面的代码的效果是点击First paragraph文字后，先改变为日期并弹出对话框，在对话框点击确定后，文字颜色改变，因为事件监听顺序是先子元素再父元素。如果改变事件监听顺序如下：

这里写图片描述

效果变成了点击First paragraph文字后，先改变文字颜色，再改变文字内容，最后弹出对话框。

删除事件响应函数绑定

HTML DOM对象的removeEventListener()可以删除一个事件响应函数绑定，参数如下：

event：事件，如"onchange"、"onfocus"等。
function：事件绑定函数。

浏览器BOM

浏览器对象模型（Browser Object Model）使Javascript可以操作客户端浏览器，由于BOM并没有正式的标准，所以很多BOM的方法是不兼容的。

window

window对象表示浏览器窗口，全局变量、对象是window对象的属性，全局函数是window对象的方法。

window.open()

window.open(URL)开启一个新的浏览器窗口，该窗口将访问URL参数指定的地址。

window.close()

window.close()方法关闭一个浏览器窗口。

window.location

window.location对象用于获取当前页面的URL，其含有如下属性：

href属性可以获取当前页面的URL。
protocal属性获取使用的协议。
hostname属性获取web主机的域名。
port属性获取web主机的端口。
pathname属性获取页面的路径。
assign()方法加载新的文档。

console.log(window.location.href);console.log(location.protocol + "//" + location.hostname + ":" + location.port + location.pathname);location.assign('http://www.baidu.com');

window.history

window.history对象访问浏览器历史，其back()方法返回上一页，forward()方法返回前一页。

确认框

除了window.alert()以外，confirm(msg)方法可以弹出确认框，msg是确认框中的提示信息，比如：

var r = window.confirm("Leave or not?");console.log(r);

效果为：

这里写图片描述

其返回值为true/false，分别对应点选“确定”/”取消”。

提示框

window.prompt(msg, default)可以弹出提示框，其中msg参数是提示框中的提示信息，default参数提供提示框的默认值，方法返回用户在提示框中填写的值，比如：

var name = window.prompt("Input your name", "Mars Loo");console.log(name);

效果如下：

这里写图片描述

计时事件

setInterval()/clearInterval()

setInterval(function_name, interval)方法将function_name对应的函数间隔interval时间（以ms为单位）执行，返回一个计时器对象用于作为clearInterval()的参数以清除这个计时器对象，比如：

这里写图片描述

function_name也可以是定义函数的字符串，比如：

这里写图片描述

setTimeout()/clearTimeout()

setTimeout()方法的参数和setInterval()方法的参数相同，不同之处在于setTimeout()指定在一段时间间隔之后执行一次函数，clearTimeout()方法用来在超时之前删除计时事件绑定。比如：

这里写图片描述

document.cookie对象代表浏览器端的cookie，直接将如下格式的字符串赋值给这个对象即可："key=value;expires=Thu, 18 Dec 2013 12:00:00 GMT;path=/;domain=localhost"。

添加cookie

这里写图片描述

浏览器控制台可以看到设置了name=mars，过期时间3天以后，访问路径为/，访问域为localhost的cookie:

这里写图片描述

添加新的cookie可以再次直接赋值给document.cookie对象：

这里写图片描述

浏览器中可以看到增加了一项cookie：

这里写图片描述

修改cookie

修改cookie可以直接在key=value;中替换新的value，然后将新的字符串赋值给document.cookie即可：

这里写图片描述

浏览器中可以看到，username这项cookie值已经被改变：

这里写图片描述

获取cookie

读取cookie可以采用正则表达式，比如：

这里写图片描述

如果cookie不止一条，则多个cookie之间可能存在分号及空格：

这里写图片描述

浏览器控制台输出如下：

username=marsloo; name=susonloo

删除cookie

删除cookie，将其有效期设置为当前时间之前即可：

这里写图片描述

浏览器控制台可以看到username=marsloo的cookie已经被删除：

这里写图片描述

如果觉得我的文章对您有帮助，欢迎关注我(CSDN:Mars Loo的博客)或者为这篇文章点赞，谢谢！

1 0

41.Javascript脚本语言详解（下）

函数

函数参数

匿名函数

Function对象

函数调用

异常处理

闭包

Javascript事件

函数与事件绑定举例

变量提升

严格模式

严格模式保留字

HTML DOM

定位元素

添加、删除HTML DOM节点

更新HTML DOM节点

添加事件响应函数绑定

删除事件响应函数绑定

浏览器BOM

window

window.open()

window.close()

window.location

window.history

确认框

提示框

计时事件

setInterval()/clearInterval()

setTimeout()/clearTimeout()

cookie

添加cookie

修改cookie

获取cookie

删除cookie

41.Javascript脚本语言详解（下）

更新HTML DOM节点