JavaScript高级笔记

JavaScript高级

函数(重点)

1.基本语法

用于代码封装，提高复用性
格式:

function 函数名(参数列表){  
    函数体;  
    return;  
}  

函数定义,关键字function

定义参数列表时，不必使用var关键字，否则报错。

如果没有需要返回的参数，return可以不写，函数默认返回undefined

函数需要调用才能执行，这点和Java一样

JavaScript不存在重载形式:
因为每个JavaScript函数中，都存在一个数组arguments，用于存储参数列表
arguments.length;//可以查看传入了几个参数
arguments[0];可以看传入的第一个参数值

注：如果调用方法时忘记加()，那么对把函数具体打印
注：函数即对象，对象即函数

JS是不严谨的.

2.动态函数和匿名函数

动态函数  
    通过JS的内置对象Function来动态创建  
    格式：new Function(参数1,参数2)  
         参数1是函数形参列表
         参数2是函数体  

---

匿名函数（较常用）
    没有名称的函数，简化形式
    格式：var str=function(参数列表){   
        函数体;
        return;
    };

3.全局变量和局部变量

JavaScript的变量作用域和Java的类似，有俩种：
全局变量： 就是在<script>标签中定义的变量，在整个页面都有效 全局变量都是window对象的属性
生命周期:在页面打开时创建，在页面关闭时销毁
注：JavaScript的作用域为大括号的划分(块级作用域)

局部变量:
就是在函数体内用var 关键字 定义的变量
生命周期：在函数使用时创建，在函数关闭时销毁
注：未使用var 关键字定义的都是全局变量（JavaScript新手会经常留下各种全局变量，导致程序出现很多奇葩问题，所以建议大家遵循规范，定义变量用var关键字）

BOM(重点)

1.BOM概述

BOM是什么？有什么用？
Browser Object Model 浏览器对象模型
浏览器：例如：IE，火狐，谷歌、
对象：包含属性和行为
模型：共性的体现

Window JavaScript 层级中的顶层对象，表示浏览器窗口。
Navigator 包含客户端浏览器的信息。
Screen 包含客户端显示屏的信息
History 包含了浏览器窗口访问过的 URL。
Location 包含了当前 URL 的信息。

2.Window

对象方法：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
close() 关闭浏览器窗口。（IE）
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
对象属性：
opener 返回对创建此窗口的窗口的引用。

DOM(重点)

DOM概述

1.DOM是什么?有什么用?

1、DOM是什么？有什么作用？
Document Object Model文档对象模型
文档：标记行文档(HTML，XML)
对象：包含属性和行为
模型：共性特征体现

DOM用来将标记型文档中所有内容（标签、文本、属性）都封装成对象。
作用：
HTML：展示并封装数据
CSS：提供样式
JAVASCRIPT & DOM：获取并操作HTML对象。例如：动态操作HTML或CSS

2.DOM的解析方式

节点类型(Node Type)：
• 整个文档是一个文档节点 （document）
• 每个 HTML 标签是一个元素节点 （element）
• 包含在 HTML 元素中的文本是文本节点 （text）
• 每一个 HTML 属性是一个属性节点 （attribute）
• 注释属于注释节点
以上都属于节点Node

3.DOM和BOM的关系图

BOM对象包含DOM对象

4.DOM节点操作

使用节点特征获取节点对象：
Document对象方法：
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。

使用节点对象获取节点内容：
W3C标准属性（所有对象）
innerHTML 值是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML

JavaScript事件

1.事件概述

通常鼠标或热键的动作我们称之为事件(Event)

JavaScript和HTML的交互功能主要就是通过事件驱动来完成的。

事件驱动：
1、事件
2、事件源
3、监听器
4、注册监听器

2.常用事件

onclick 点击某个对象（例如点击某个按钮）
onfocus 元素获取焦点
onblur 元素失去焦点
onload 某个页面或图片被加载完成
onsubmit 提交按钮被点击
onchange 用户改变域的内容

以下事件安卓不用
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onmousedown 某个鼠标按键被按下
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开

3.JavaScript事件绑定方式

3.1HTML属性事件

1、HTML属性事件
例如：<input type=”text” onclick=”aa()”/>
为该input标签的鼠标单击事件属性绑定一个aa()的函数。

*多个函数之间用逗号分隔

3.2HTML DOM分配事件

例如：为input标签的鼠标单击事件绑定一个aa()的函数

<script type="text/javascript">
function aa(){
alert("a");
} //整个窗口加载完毕后调用该匿名函数
window.onload=function(){
//获取id为aa的HTML元素，并将其onclick事件绑定aa函数。注意，此处用的 //是函数的引用，若加(),则是获取函数的返回值 document.getElementById("aa").onclick=aa; };

<input type="text" id="aa"/>

两种事件的区别： *属性事件绑定方式传递参数很方便，但是HTML元素和JavaScript代码无法分离。 *DOM绑定方式无法传递参数，但是HTML元素和JavaScript代码分离。

综上，首先可以根据方法是否需要传参来决定使用哪种方式，其次要看公司要求。

JSON(重重点)

1.JSON概述

JSON是什么?有什么用？

JSON的格式和JavaScript中的数组和对象格式相似。

2.JSON语法

2.1.JSON语法规则

表示数组：
[值1,值2,值3,…….]
例如：var language ="['java','ios','php']";

表示对象：
{“键1”:”值1”,”键2”:”值2”,……}
注：键仅为字符串
例如：var person ="{'name':'zhangsan','age':'13','sex':'man'}";

注：最好是双引号 套 单引号。否则有些浏览器会引起截断字符串的风险
通过这两种结构可以表示各种复杂的结构:

示例1： var persons = "[
{'name':'zs','age':23,'sex':'man'},
{'name':'ls','age':24,'sex':'woman'},
{'name':'ww','age':25,'sex':'man'}
]"
示例2：
var persons = "{
'persons':[
{'name':'zs','age':23,'sex':'man'},
{'name':'ls','age':24,'sex':'woman'},
{'name':'ww','age':25,'sex':'man'}
]
}"

2.2.JSON值的访问

以var person = ‘{“name”:”zhangsan”,”age”:”13”,”sex”:”man”}’;为例

我们如果要以操作数组或者操作对象的方便手法操作JSON数据，就需要将JSON数据转换成为JavaScript的数组或者对象。

转换方式为： eval(“(”+person+”)”);

有两种取值方式： person.name;//zhangsan person[“name”];//zhangsan