Javascript学习笔记 (2)

精通 HTML 语言 擅长 css div 布局 css3 html5 响应式布局 能快速手写兼 容各类常用浏览器的前端代码 精通 Photoshop Dreamweaver Flash 等美工制作软件 对各类常用 Javascript 效果 query 框架有一定的研究 熟悉 java 和 JSP 编程 SQL 语言 数据库 面试题 1 Class box 与 Box 这两者有区别 大小写必须一致 3 剃刀文件是一个 js 文件 4 Js 只写在行为层 html 只写在结构层 不要串写 5 选项卡 水平菜单 6 什么是函数 一个程序块 执行一项单一任务或一系列任务 好处是具有重 用性 降低程序复杂度 7 什么是闭包 有有权权限限访问访问另一个函数作用域的另一个函数作用域的变变量的函数量的函数 创建闭包的常见方式就是 在一个函数 a 内部创建另一个函数 b 即内部函数 当内部函数在定义它的作用域的外部 被引用时 就创建了该内部函数的一个闭包 称外部函数的调用环境为封闭闭包的环境 如果内部函数引用了位于外部函数中的变量 相当于授权该变量能够被延迟使用 因此 当外部函数调用完成后 这些变量的内存不会被释放 最后的值会保存 闭包仍然需要 使用它们 闭包的作用作用就是在 a 执行完并返回后 闭包使得 Javascript 的垃圾回收机制 GC 不会收回 a 所占用的资源 因为 a 的内部函数 b 的执行需要依赖 a 中的变量 8 1 var s confirm 2 var s s confirm 1 方法声明变量立即赋值更好 2 书写 CSS 样式步骤 a 先做 reset 样式 将浏览器内置的样式复位 即覆盖 b 按照结构层盒子的嵌套 并列关系写好盒子关系 c 按照效果图分析效果给每个盒子添加相应的属性和值 9 页面一 alert s 报错 找不到 页面二 var s alert s undefined 页面三 alert window XMLHttpRequest 不报错 弹出内容 10 面向对象 无需关心内部如何 只要知道如何使用它 封装 抽象 把主要的内容抽出 创建对象 再进行封装 继承 子级继承 父级的属性和方法 用面向对象做选项卡 11 属性和变量的区别 函数和方法的区别 属性和方法是属于某对象 是私有的 变量是自由自在的 变量能变成属性 属性不能变成变量 全局变量和函数相当于 window 的属性 var a window a function aa window aa function 面向对象叫 方法 面向过程叫 函数 函数是有返回值的方法 用对象调用的叫方法 this 直接调用函数名的叫函数 事件 就是文档或浏览器窗口中发生的一些特定的交互瞬间 事件处理程序的名字以 on 开头 因此 click 事件的事件处理程序就是 onclick 分类 读取事件 页面载入事件 onload 对象 window 用户事件 1 onmouseover onmouseout onmousemove onmouseup onmousedown onclick onkeydown onkeyup oncontextmenu 环境菜单 对象 document 2 onsubmit 对象 form onsubmit 在 form 上加 不能在 submit 按钮上加 3 keycode clientX clientY button 指示哪一个鼠标键被按下 0 无 1 左 2 右 4 中 offsetX offsetY pageX pageY 对象 event clientX clientY 以可视区域来定坐标 4 clientWidth 可视区域的宽度 clientHeight 对象 documentElement html offset 可读不可写 offsetWidth 物体自身宽度 包含边框 填充 不包边界 offsetLeft 左偏移量 包含左边界 scroll scrollTop 滚动离开顶端的距离 scrollWidth onfocus onblur onreadystatechange setTimeout setInterval 对象 window 设置定时器前可以先关定时器 解决许多问题 cookie 对象 document 火狐 查看页面信息 function eventHandler e 获取事件对象 e e window event IE 和 Chrome 下是 window event FF 下是 e 获取事件源 var target e target e srcElement IE 和 Chrome 下是 srcElement FF 下是 target 用 CSS3 做简单的动画效果但兼容性低 Javascript 做复杂的动画效果 JQuery 也可做动画效果且兼容性高 8 个 div 语义化不强 表格 加载速度慢 列表 ul li span a dl dt dd 最好 解决样式冲突 Javascript 最佳实践 交互就是网页的元素针对用户的特定行为 产生指定的变化 响应事件 1 是什么 JS 是用来实现交互的 它是纯文本的 用任何的纯文本编辑器都能编辑它 同 时它是网页的一部分 随着一个 html 页面被请求 JS 脚本也随之下载到了用户 的计算机本地 在用户计算机本地渲染运行 它是可读的 2 不是什么 1 Javascript 不是 Java Javascript 是轻量级运行在浏览器中的语言 而 Java 是跨平台的开发多种应用的 语言 Jsp 网站 安卓都是 Java 开发的 2 Javascript 和 php asp jsp 完全不同 Javascript 是运行在用户计算机中的 是前台的脚本 php asp jsp 是运行在服务 器上的 Javascript 的功能单一 仅仅是用来开发页面效果的 php 等语言可以 与数据库交互 开发网站程序的 3 有 Javascript 的网页是静态网页 不是动态网页 动态 静态是指是否与 数据库产生交互 只有 php asp jsp 这些网页 才是动态网页 3 学习重点 引用类型引用类型 高级程序设计 121 页 Object Array Date RegExp Function 对象对象 小铅笔第六章 内置对象 DOM Object Array Date String Event Number Math Boolean Function Global RegExp Math 对象是一个固有的对象 无需创建它 直接把 Math 作为对象使用就可 以调用其所有属性和方法 这是它与 Date String 对象的区别 浏览器对象 BOM document window 作用域作用域 局部 全局 作用 控制读写操作 域 空间 范围 只有只有 script 内 或内 或 js 文件内 和函数内叫域文件内 和函数内叫域 对读写操作可控范围的一个描述 浏览器对 js 程序的解析机制 碰到域就会发生的操作 1 JS 预解析预解析 先把函数和变量以及参数 var function 提取出来 放入库中 alert a undefined alert fn1 function fn1 alert 1 var a 1 function fn1 alert 1 a 未定义 fn1 function fn1 alert 1 2 逐行读代码逐行读代码 表达式会修改预解析的值 正则表达式正则表达式往往配合 search match replace 方法使用 小写和大写字母相反 Search 只能查位置 match 可以返回字符 数组 asd pc apc spc dpc ECMAScript 通过 RegExp 类型来支持正则表达式 var expression pattern flags Perl pattern 正则表达式 flags g 全局模式 i 不区分大小写模式 m 多行 模式 Ecmascript 规范 要执行什么事情 就要找负责这个事情的对象 DOM 文档对象模型 Document Object Model 统一 在页面中可见 负责一 切和文档相关的事 BOM 浏览器对象模型 不统一 负责一切和浏览器窗口相关的事 Console 负责一切和控制台有关的事 面试 window 的对象 document event frame history location navigator screen document 的对象 anchor applet area embed form 及其属性 image link 1 JS 对象 JavaScript 中的所有事物都是对象 字符串 数值 数组 函数 允许自定义对象 提供多个内建对象 Object Array Date RegExp String event Number Math 等 对象只是带有属性属性和方法方法的特殊数据类型 自定义自定义属性属性 oP name oP i index i 2 创建对象的几种方法 164 页 1 工厂模式 function createPerson name age job 形参 var o new Object o name name 属性 形参 o age age o job job o sayName function alert this name return o var person1 createPerson Nicholas 29 Software Engineer 对 象 var person2 createPerson Greg 27 Doctor 工厂模式虽然解决了创建多个相似对象的问题 但却没有解决对象识别的问题 即怎样知道一个对象的类型 2 构造函数模式 this 发生在当前事件上的对象 function Person name age job this name name this age age this job job this sayName function 我的名字叫 this name var person1 new Person Nicholas 29 Software Engineer var person2 new Person Greg 27 Doctor 此方法没有显式地创建对象 直接将属性和方法赋给了 this 对象 没有 return 语句 调用构造函数 必须使用 new 操作符 构造函数的主要问题 就是每个方法都要在每个实例上重新创建一遍 3 原型模式 prototype 170 页 function Person 构造函数成了空函数 Person prototype name Nicholas Person prototype age 29 Person prototype job Software Engineer Person prototype sayName function alert this name var person1 new Person person1 sayName Nicholas var person2 new Person person2 sayName Nicholas alert person1 sayName person2 sayName true 同时使用 hasOwnProperty 方法和 in 操作符 就可以确定该属性到底是存在 于对象中 还是存在于原型中 简化原型模式 function Person Person prototype name Nicholas age 29 job Software Engineer sayName function alert this name 原型模式的不足 它省略了为构造函数传递初始化参数这一环节 结果所有实 例在默认情况下都将取得相同的属性值 它最大问题是由其共享的本性所导致 原型中所有属性是被很多实例共享的 这种共享对于函数非常合适 然而 对 于包含引用类型值的属性来说 问题就比较突出了 4 组合使用构造函数模式和原型模式 推荐 176 页 5 动态原型模式 6 寄生构造函数模式 7 稳妥构造函数模式 安全 常见的三种节点 元素节点 p 属性节点 id 文本节点 text 查找时的先后 顺序 text 4 如何学 增 删 改 查 读 写 对 html css innerHTML createTextNode appendChild parentNode insertBefore childNodes nodeValue 行为层的样式优先级最高 Js 控制 css 用 style 行间样式 className setAttribute oP style background 设置行间样式 para oP className para 设置外部样式 oP setAttribute class para 设置外部样式 对象 名词 属性 方法 事件 万物皆是对象 属性 名词 描述对象特征 无 相当于变量用 方法 动词 描述对象的行为 有 相当于函数用 函数名 参数 事件 指令 表达式 由运算符和操作数链接起来的式子 对象 属性 新的值 赋值 对象 方法 参数 调用方法 JS 对大小写敏感 一个盒子可以响应单击事件 也称为为它添加了事件监听 如 事件的三要素 事件源 有监听的 HTML 标签 即能响应事件的 HTML 标签 如 事件名 用户的特定行为 如 onclick onmouseover 事件的响应 一个个 function HTML 事件处理 在标记上加事件然后调用函数 写在结构层 DOM0 级事件处理 例 window onload html 事件源 事件发生在谁身上 ie 下 window event srcElement 标准下 event target nodeName 找到元素标签名 循环影响性能 找东西放循环体外性能更好 事件委托事件委托 让别人做 利用冒泡原理 把事件加到父级上 触发执行效果 浏览器解析 事件捕获 目标阶段 冒泡阶段 事件委托好处 1 提高性能 2 新添加的元素还会有之前的事件 性能好 代码少 完成的功能多 window onload function var oUl document getElementById ul var aLi oUl getElementsByTagName li var oBtn document getElementById btn var iNow 4 oUl onmouseover function ev var ev ev window event var target ev target ev srcElement alert target innerHTML if target nodeName toLowerCase li target style background red oUl onmouseout function ev var ev ev window event var target ev target ev srcElement alert target innerHTML if target nodeName toLowerCase li target style background oBtn onclick function iNow var oLi document createElement li oLi innerHTML 1111 iNow oUl appendChild oLi 函数 内置函数 系统中的函数 自定义函数 有名函数 可实现函数重用 匿名函数 A 三个对话框方法 内置函数 alert confirm prompt 这三个方法是 window 对象的方法 如何学习函数 1 掌握该函数的功能 2 函数有没有返回值 1 var s alert true 警告框 document write s 得出 undefined 变量不加引号 如 s 2 var s confirm 你确定吗 确认框 document write s 得出 true 或 false 3 var s prompt 请输入你的大名 提示框 document write s 得出第二个参数的值或 null 3 函数的参数 参数的数据类型及参数的个数 4 函数的定义和调用 针对自定义函数 B 自定义函数的定义和调用 简单格式 function abc 功能语句 var i 2 var j 1 var s i j alert s 调用函数的格式 abc 执行环境及作用域 var color blue function changeColor var anotherColor red function swapColors var tempColor anotherColor anotherColor color color tempColor 这里可以访问 color anotherColor 和 tempColor 这里可以访问 color 和 anotherColor 但不能访问 tempColor swapColors 这里只能访问 color changeColor 注 无论全局环境还是 changeColor 的局部环境都无权访问 tempColor 但在 swapColor 内部可访问其他两个环境中的所有变量 因为他们是它的父执行环 境 使用 var 声明的变量会自动被添加到最接近的环境中 在函数内部 最接近的 环境就是函数的局部环境 在 with 语句中 最接近的环境是函数环境 如果初 始化变量时没有使用 var 声明 该变量会自动被添加到全局环境 JS 高级程序 设计 第三版 94 页 JavaScript 变量可以用来保存两种类型的值 基本类型值和引用类型值 基本 类型的值源自以下几种基本数据类型基本数据类型 Undefined Null Boolean Number String function 编写利器 sublime webstorm Sublime Html 5 div Ctrl e Ctrl 滚动鼠标 调整字号 按鼠标中键可以多行编辑 Ctrl shift K 删除当前行 Ctrl shift D 复制当前行 Ctrl shift 上下键 调整当前行的位置 Ctrl alt