xiaosamianbao/my-javascript-is-a-clover

JavaScript学习总结；前端变化太快，只有把JS基础打扎实了，才能游刃有余；为了让我的JavaScript基础异常牢固，思路更加清晰，我会把以前总结过的知识和平时看到的资料放在这里，把以前零零散散的知识点全部串起来！我把JavaScript理解成一朵三叶草；这个项目也许写到最后会是一个非常不错的JavaScript教程，希望可以帮到更多的人；收藏请点star；关注请点watch，如果发现我有写错误的，欢迎随时帮我指出来，谢谢！

#我的JavaScript是一朵三叶草

JavaScript由ECMAScript、DOM（Document Object Model）、BOM（Browser Object Model）三部分组成；其中ECMAScript定义了JS的书写规范和语法；BOM可以操作与浏览器的交互；DOM可以让我们操作网页的内容；根据宿主（浏览器）的不同，具体的表现形式也不尽相同，ie和其他的浏览器风格不同。

javacsript是通过访问BOM对象来访问、控制、修改客户端(浏览器);window对象的属性和方法是直接可以使用而且被感知的;由于BOM的window包含了document，因此可以直接使用window对象的document属性；通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM模型的根节点。

可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而JavaScript可以操作浏览器以及浏览器读取到的文档。

JavaScript中我们学的所有的知识点其实都是基于浏览器内置类实现的，这也说明了js是由一个个类组成的，而我们要学习的就是类、实例的关系和类上面的私有或者公有的属性或者方法---这就是我们经常听到的面向对象编程 #1、JS基础；

• 1、编程语言是干什么的？HTML中怎么用javascript、JS由三部分组成；G1.2/2/Q1/Q13；
  • 编程语言是干什么的？javascript由DOM,BOM,ES组成、HTML中怎么使用javascript（嵌入式、外链式、行内）。noscript、DOM树的认识、变量，强类型，若类型，面向对象编程的最基本概念；typeof检测累吗；
• 2、变量、注释、严格模式、G3.1/Q2/Q3.6/Q3.9
• 3、数据类型、计算器、G3.4/G4.1/Q3.7/Q3.1234/
• 4、运算符、流程语句G3.5/Q4
• 5、流程语句、/G3.6/Q5
• 6、函数、数组，类数组、G007
• 7、本章小结、G3.8
• 8、题目

##目录----以下内容暂时作废；

1、ECMAScript

由ECMA-262定义，提供核心语言功能。

1. 基本概念
   • 语法规范
   • 关键字和保留字
   • 变量命名、声明、变量类型、作用域、闭包、垃圾回收机制
   • 数据类型（基本数据类型和引用数据类型）
   • 运算符/操作符
   • 流程语句（循环、跳转、判断/选择、异常处理）
   • 函数的参数理解
   • 定时器
2. 预解释
   • 语法规范
   • 关键字和保留字
   • 变量
   • 数据类型
3. this关键字和函数表达式
   • 定义
   • 调用
   • 方法call和apply
   • arguments
   • 函数参数指针标识
4. 深入解读具体的引用数据类型以及它们的方法
   • Object类型
   • Array类型
   • Date类型以及日历控件
   • RegExp
   • Function类型
   • 基本包装类型（Boolean/Number/String）
   • 单体内置对象（Global对象/Math对象）
5. 面向对象的程序设计
   • 面向对象
   • 创建对象
   • 继承
   • 使用面向对象的**扩展数组类
6. JSON数据高20
   • 模块化开发
   • 模块化开发
7. 兼容性处理、错误处理与调试高17章
   • 模块化开发
   • 模块化开发

2、DOM

文档对象模型，提供访问和操作网页内容的方法和接口，DOM 是W3C的标准；所有浏览器公共遵守的标准。

1. 节点获取
   • 通过上下文获取节点
   • 通过节点指针获取节点
2. 节点操作
   • 增删改查
3. 属性操作
   • 获取属性
   • 设置属性
   • 判断属性
4. 文本操作
   • 获取属性
   • 设置属性
   • 判断属性
5. JS中的盒子模型
   • 盒子模型
   • 图片加载机制
   • 图片延迟加载实例
6. 自己动手封装DOM库
   • 单例子模式
   • 构造函数模式
   • 构造函数模式2
7. 案例练习
   • 模块化开发之日历控件开发
   • 模块化开发之选项卡组件
8. 事件
   • 事件的实现（事件的绑定）
   • DOM元素的默认行为
   • 事件传播和阻止事件传播
   • 事件委托
9. DOM二级事件
   • DOM2和DOM3
   • 事件的常见兼容性问题总结
   • DOM二级时间兼容性问题解决质疑：this关键字；
   • DOM二级时间兼容性问题解决质疑：执行顺序问题；
10. 拖拽效果
    • 拖拽效果的编写和优化
    • 写在HTML标签里的事件是 如何被浏览器解析并执行的
    • 给拖拽加效果并且发现代码在设计**上的问题；
    • 优化上一章讲的事件库；
    • 给拖拽加更多动画效果；
11. 照片墙示例
    • 基于模块化开发
    • 观察者模式
    • 面向对象及原型的继承；
    • 事件原理；
    • 事件库；

3、BOM

提供与浏览器交互的方法和接口，BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]。

BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

BOM主要是学window对象；window包括以下

1. 对话框

   • 模块化开发
   • 模块化开发

2. 定时器

   • 模块化开发
   • 模块化开发

3. 焦点控制

   • 模块化开发
   • 模块化开发

4. 窗口控制

   • 模块化开发
   • 模块化开发

5. 打开关闭窗口

   • 模块化开发
   • 模块化开发

6. 属性

   • 模块化开发
   • 模块化开发

7. navigation 导航器对象

   • 模块化开发
   • 模块化开发

8. screen 显示器对象

   • 模块化开发
   • 模块化开发

9. history 历史对象

   • 模块化开发
   • 模块化开发

10. location 位置对象

    • 模块化开发
    • 模块化开发

11. document 文档对象

    • 模块化开发
    • 模块化开发

12. 客户端检测高9章

    • 模块化开发
    • 模块化开发

13. HTTP

    • WEB客户端和服务器
    • HTTP事务
    • HTTP报文
    • HTTP方法
    • GET和POST的区别
    • HTTP状态码
    • MIME Type
    • URI、URL、URN

14. AJAX与Comet

    • 什么是AJAX
    • 网页渲染的同步和异步区别
    • 浏览器兼容性
    • 如何发起AJAX
    • 使用XMLHttpRequest
    • 在低版本IE浏览器中使用ActiveXObject时需要注意的地方
    • 模仿jQuery封装AJAX库
    • 表单操作/表单脚本高三14章
    • 利用AJAX模拟表单提交
    • 跨域请求操作
    • W3C规定的跨域资源共享中服务器可以返回的头信息

15. 离线应用与客户端存储高23章

    • 离线监测
    • 应用缓存
    • 数据存储

16. 高级技巧高22章

    • 高级函数
    • 防篡改对象
    • 高级定时器
    • 自定义事件
    • 拖放

17. 最佳实践高24章

    • 可维护性
    • 性能
    • 部署

↑ 返回目录

如果把JavaScript看成三叶草的话，那么jQuery就是三叶草的第四片叶子

jQuery is fourth leaves of JavaScript