转载请注明原始出处: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:
浏览器控制台输出:
function
function
每个函数对象都含有如下属性及方法:
- 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()方法用来在超时之前删除计时事件绑定。比如:
cookie
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的博客)或者为这篇文章点赞,谢谢!