Javascript基础到实战系列课程(共2.5个月+)

本课程将打破传统教学,独一无二的特色,全程以知识点+案例进行讲解,让你吃透每一个知识点

第一阶段:JavaScript基础

第一章:认识JavaScript 获取元素 改变内容 事件 函数 this简单认识 定义变量(2课时)

1、学前准备 开发工具

2、学习方法 作业 QQ群交流 互动 解决问题的方法

3、初识JavaScript(JS)

4、JS代码写在哪里? script标签位置 引用js文件 标签属性操作

5、写JS代码需要注意什么

6、JS里的系统弹窗代码 alert()、 confirm()、prompt()

7、JS的注释 单行 多行

8、获取元素以及修改内容 getElementById、getElementsByClassName、getElementsByTagName、 getElementsByName、querySelector 、 querySelectorAll、innerHTML 、innerText 、write()方法

9、JS里的事件 事件、方法/函数 、this的简单认识

10、定义变量

本节课案例+作业

  • 案例1-点击替换a标签
  • 案例2-弹窗取值
  • 作业1-引入外部JS
  • 作业2-两个DIV内容的各种变化

第二章:操作属性 操作样式 数据类型 判断(2课时)

1、操作标签属性 getAttribute/setAttribute/removeAttribute 自定义属性和自定义标签属性区别

2、+ 号的初步认识 数字相加 、字符拼接 、各种缩写

3、操作css样式 改变css样式 .style.属性 .style.cssText 属性操作注意事项

4、[]的初步认识 下标 、代替.

5、JS数据类型 六大类数据 number string boolean function object undefined 数组/ json的简单介绍

6、if switch判断语句 if介如 条件判断 if的多种格式 switch介绍

本节课案例+作业

  • 案例1_点击图片自动替换
  • 案例2_文字放大缩小功能
  • 案例3_页面添加新闻功能
  • 作业1_QQ说说发表功能
  • 作业2_图片选项卡切换

第三章-循环 自定义属性运用(2课时)

1、for循环 for介绍 、 break/continue 、嵌套for、死循环

2、while while介绍 、do while 介绍

本节课案例+作业

  • 案例1_for循环生成10个div
  • 案例2_生成左尖括号图形
  • 案例3_打印星型三角形
  • 作业1_多方位九九乘法表
  • 作业2_二级下拉菜单
  • -------以下是第二节课内容--------
  • 案例1_自定义复选框
  • 案例2_简单图片轮播
  • 案例3_选项卡特效
  • 作业1_360左侧导航滑动导航
  • 作业2_js制作QQ选项功能

第四章:运算符 类型转换(2课时)

1、算术运算符 + - * / % 隐式类型转换

2、赋值运算符 = += -= *= /= %= ++ --

3、比较运算符 < > == <= >= != === !==

4、逻辑运算符 && || ! 逻辑运算符做流程控制

5、位运算符

6、显式类型转换 Number( ) 、 parseInt() 、parseFloat()

7、隐式类型转换 四则运算的隐式转换、if/for的隐式转换

8、Math方法 Math.random() Math.floor() Math.ceil() Math.round()

本节课案例+作业

  • 案例1-点击添加替换a标签
  • 案例2-弹窗取值
  • 作业1-外部数据导入
  • 作业2-两个DIV内容的各种改变

第五章:函数参数传递(2课时)

1、函数分类 有名函数、匿名函数 、函数定义、 函数表达式

2、参数 实参、形参、不定参

3、return 返回值介绍 、undefined return与break/continue区别

本节课案例+作业

  • 案例1_购物中心结算功能
  • 案例2_星级打分功能
  • 作业1_点击可编辑表格
  • 作业2_多层图片选项卡效果

第六章:js解析顺序和作用域(1课时)

1、javascript解析顺序

2、定义 先解析var、function、参数

3、执行 再从上至下执行其他代码

4、作用域

本节课案例+作业

  • 5道经典题目讲解

第七章:字符串和数组方法(2课时)

1、字符串方法 [] 、 charAt() 、charCodeAt()、String.fromCharCode()、indexOf / lastIndexOf、substring 、slice、toUpperCase() / toLowerCase()、split()

2、数组方法 length 、 [] 、push() 、 unshift() 、 pop() 、 shift()、splice( index , num , info ) sort()、concat()、join()、filter()过滤、isArray( )

本节课案例+作业

  • 案例1_ 文字查找、替换,高亮显示特效
  • 作业1_ 商品按照价格排序

第八章:json 和 call,apply,bind(2课时)

1、json对象 创建 读取 增删改 对象的解析(for in)

2、创建对象,对象存在的意义

3、读取对象的属性,方法,以及增删改

4、对象的解析for in JSON.parse() 、JSON.stringify()

5、简单实现jq中css,html功能

6、call,apply,bind

本节课案例+作业

  • 本节课主要以做题为主5道

第九章:定时器 Math数学函数(2课时)

1、定时器 setTimeout、setInterval

2、定时器参数不标准使用法 、eval方法

3、数学函数 Math.random、Math.ceil,Math.floor,Math.round,Math.max,Math.min

4、Math.sin(弧度),Math.cos(弧度); 一弧度 = π/180;

本节课案例+作业

  • 案例1_倒计时跳转
  • 案例2_图片滑门效果
  • 案例3_随机色卡
  • 案例4_Math.sin Math.cos圆周运动
  • 作业1_练习上课讲的内容,发挥想象力,自由发挥
  • 作业2_图片竖直向上和向下滚动

第十章:日期对象(2课时)

1、日期对象data 创建一个时间点 new data()等更多参数

2、Date.parse(),Date.UTC()

3、几种日期格式化方法 toDateString()、toTimeString()、toLocaleDateString()、toLocaleTimeString()、toUTCString()、toLocalString()

4、关于日期的方法 getTime()、getFullYear() 、getMonth()、getDate() 、getHours() 、getMinutes()、getSeconds()、getDay()

5、getTimezoneOffset

本节课案例+作业

  • 案例1_系统时间
  • 案例2_倒计时
  • 案例3_世界时间worldTime
  • 作业1_1000天之后是日期几何
  • 作业2_图片时钟

第十一章:速度运动框架(1课时)


本节课案例+作业

  • 案例1_淡入淡出banner
  • 案例2_左右banner
  • 作业1_图片时间滚动
  • 作业2_无缝

第十二章:时间版运动Tween.js(1课时)


本节课案例+作业

  • 案例1:封装时间版运动框架
  • 案例2:单张抖动特效
第二阶段:DOM操作+BOM操作+cookie操作+RegExp正则表达式+Ajax

第一章:DOM操作(2课时)

1、dom简介、dom结构、querySelector、querySelectorAll

2、node节点类型 12种,重点介绍三种(元素、属性、文本)

3、node属性常用操作 getAttribute、setAttribute、removeAttribute、getAtttibuteNode、childNodes、firstChild、lastChild、nextSibling、previousSibling、parentNode

4、常用的方法DOM元素创建以及节点追加 createElement、 appendChild、 createTextNode、insertBefore、removeChild

5、offsetWidth,clientWidth,scrollWidth(height同理)

6、offsetTop,offsetLeft,offsetParent

7、可视区大小滚动高度 clientWidth / clientHeight 、innerWidth /innerHeight 、scrollTop / scrollLeft

本节课案例+作业

  • 案例01_节点操作
  • 案例02_碰撞小球
  • 作业01_多个小球的运动
  • 作业02_无缝滚动自适应个数

第二章:BOM操作(2课时)

1、BOM(Brower Object Model) 核心对象window

2、表单中的操作 onfocus()、onblur()、 onchange()

3、event事件对象 每个浏览器中的event 、event.pageX / event.pageY 、event.clientX / event.clientY

4、事件绑定 attachEvent、addEventListener 事件捕获、事件冒泡 、定义事件解绑 、定义on方法

5、滚轮事件 wheelDelta、detail 、nmousewheel 滚轮事件兼容

6、事件冒泡 onmouseover/onmouseout和onmouseenter/onmouseleave区别 表格操作点击、cancelBubble、stopPropagation()

7、键盘事件 keyCode、onkeydown、 onkeypress、onkeyup、altKey、ctrlKey、shiftKey、which等

8、阻止浏览器默认事件 preventDefault 、屏蔽浏览器的右键菜单、禁止选中复制

9、window其他的补充 open()、close()、location.href/search/hash

本节课案例+作业

  • 案例1_表格table
  • 案例2_滚轮图片放大缩小
  • 案例3_拖拽
  • 作业1_简单画板的实现
  • 作业2_自定义滚动条

第三章:cookie操作(1课时)

1、什么是cookie 、存储/获取cookie 、 封装方法 getCookie(key)、 setCookie(key,value,time)、removeCookie(key)

本节课案例+作业

  • 案例1-获取上次访问时间

第四章:正则表达式(2课时)

1、什么是正则表达式

2、创建正则表达式常用方法 / /、 new RegExp()、test()、exec()

3、String中正则表达式方法 match、replace、 search、 split

4、标识符 \n \r \t .\s \S \d \D \w \W ^a a$

5、量词 * + ? {m,n}

6、贪婪和惰性

7、子集 () |

8、replace应用

本节课案例+作业

  • 案例1_常用的正则
  • 作业1:表单验证

第五章:Ajax(1课时)

1、什么是ajax

2、本地服务器环境的搭建

3、Ajax工作流程及代码 、创建ajax对象 、open方法 、send方法、最终接受

4、HTTP状态码 status属性返回值所代表的意思

5、Ajax封装

6、简单实例运用

1、jsonp

2、实例:跨域调用百度搜索数据

3、jQuery里面的ajax

本节课案例+作业

  • 案例1_瀑布流延时加载特效
  • 案例2_模仿百度搜索
第三阶段:面向对象

第一章:面向对象(上)(1课时)

1、什么叫面向对象 面向过程、面向对象、两者区别

2、构造函数 什么叫构造函数 、什么是工厂模式

3、原型prototype

4、实例:面向对象写轮播

本节课案例+作业

  • 案例1_面向对象方法编写简易轮播
  • 作业1_在实例基础上添加轮播功能

第二章:面向对象(中)(1课时)

1、方法链

2、包装对象

3、原型链

4、原型的默认属性和方法

5、继承的多种方式 、 类继承 、 复制继承、对象继承、更多继承方式省

第三章:面向对象(下)(1课时)

1、闭包 什么叫闭包 、闭包有什么特点

2、递归 什么是递归、哪些时候会用递归

3、如何开发插件

第四章:面向对象实战(每期不同,以下是往期视频免费送的)

1、开发类似jquery类库插件(8节课)

2、推箱子游戏(3节)

3、打飞机游戏(3节)

第四阶段:Jquery特效

第一课:jquery基础语法(1课时)

1、认识jQuery 、下载jQuery 、引入的注意事项

2、JQ获取元素 、 $符号详解 、各种选择器的介绍

3、JQ操作元素内容、html 方法、text 方法、val 方法

4、JQ操作元素样式、css方法、设置样式、设置多个样式、获取样式

第二课:JQ对象和JS对象(1课时)

1、JQ对象和JS对象 、什么叫JQ对象、什么叫JS对象

2、JQ对象和JS对象的互相转换、get 方法

3、JQ序列号相关 、eq方法、index方法

4、JQ里面事件的写法 mouseover .......

第三课:元素操作(1课时)

1、遍历每个元素 、each方法

2、JQ操作标签属性、prop方法、attr方法

3、对class名的操作、添加类名addClass、移除类名removeClass、切换类名toggleClass

第四课:jQ动画特效(1课时)

1、JQ的显示隐藏相关动画 show / hide / toggle方法、fadeIn / fadeOut / fadeToggle方法、slideDown / slideUp / slideToggle方法

2、JQ动画:animate函数详解、stop方法

第五课:元素属性操作(1课时)

1、各种宽高/距离width / height方法、innerWidth / innerHeight方法、outerWidth / outerHEight方法

2、scrollTop方法、offset方法、position方法

第六课:元素节点操作(1课时)

1、关于节点的操作:is方法、has方法、parent / parents方法、next / prev方法、siblings方法、find方法、children方法

第七课:jquery高级运用(1课时)

1、JQ高级运用:delay方法、extend的运用、map方法、Ajax相关方法(高级课程)

大型项目实战(每期不一样,免费下载往期视频)(5节课)

个性化网站开发

响应式网站开发

第五阶段:年薪10W以上企业必用插件技术(免费赠送视频)

第一章:gulp 代码自化压缩工具

1、Gulp是什么

2、获取gulp

3、使用seajs 入口文件 、task 、读写文件、watch、globs、插件

4、github 代码版本管理器

第二章:require.js 国外-js模块化管理工具

1、了解和获取require js

2、使用require js data-main属性 、 require方法 、定义模块

第三章:sea.js 阿里-js模块化管理工具

1、sea的作用

2、了解和获取seajs

3、使用seajs use方法、define方法

4、模块儿开发好处

5、seajs引入jquery

6、模块别名、目录别名

第六阶段:ECMAScript6

ECMAScript 6简介

1、ECMAScript 和 JavaScript 的关系

2、ES6 与 ECMAScript 2015 的关系

3、ECMAScript 的历史

4、部署进度

5、Babel 转码器

6、Traceur 转码器

第一章:Let和const命令

1、let 命令

2、块级作用域

3、const 命令

4、顶层对象的属性

5、global 对象

第二章:变量的解析赋值

1、数组的解构赋值

2、对象的解构赋值

3、字符串的解构赋值

4、数值和布尔值的解构赋值

5、函数参数的解构赋值

6、圆括号问题

7、用途

第三章:字符串的拓展

1、字符的 Unicode 表示法

2、codePointAt()

3、String.fromCodePoint()

4、字符串的遍历器接口

5、at()

6、normalize()

7、includes(), startsWith(), endsWith()

8、repeat()

9、padStart(),padEnd()

10、模板字符串

11、实例:模板编译

12、标签模板

13、String.raw()

14、模板字符串的限制

第四章:正则的拓展

1、RegExp 构造函数

2、字符串的正则方法

3、u 修饰符

4、y 修饰符

5、sticky 属性

6、flags 属性

7、s 修饰符:dotAll 模式

8、后行断言

9、Unicode 属性类

10、具名组匹配

第五章:数值的拓展

1、二进制和八进制表示法

2、Number.isFinite(), Number.isNaN()

3、Number.parseInt(), Number.parseFloat()

4、Number.isInteger()

5、Number.EPSILON

6、安全整数和Number.isSafeInteger()

7、Math对象的扩展

8、Math.signbit()

9、指数运算符

10、Integer 数据类型

第六章:函数的拓展

1、函数参数的默认值

2、rest 参数

3、严格模式

4、name 属性

5、箭头函数

6、绑定 this

7、尾调用优化

8、函数参数的尾逗号

第七章:对象的拓展

1、扩展运算符

2、Array.from()

3、Array.of()

4、数组实例的 copyWithin()

5、数组实例的 find() 和 findIndex()

6、数组实例的 fill()

7、数组实例的 entries(),keys() 和 values()

8、数组实例的 includes()

9、数组的空位

第八章:Symbol

1、概述

2、作为属性名的 Symbol

3、实例:消除魔术字符串

4、属性名的遍历

5、Symbol.for(),Symbol.keyFor()

6、实例:模块的 Singleton 模式

7、内置的Symbol值

第九章:Set和Map数据结构

1、Set

2、WeakSet

3、Map

4、WeakMap

第十章:Proxy

1、概述

2、Proxy 实例的方法

3、Proxy.revocable()

4、this 问题

5、实例:Web 服务的客户端

第十一章:Reflect

1、概述

2、静态方法

3、实例:使用 Proxy 实现观察者模式

第十二章:Promise对象

1、Promise 的含义

2、基本用法

3、Promise.prototype.then()

4、Promise.prototype.catch()

5、Promise.all()

6、Promise.race()

7、Promise.resolve()

8、Promise.reject()

9、两个有用的附加方法

10、应用

11、Promise.try()

第十三章:Iterator 和for...of 循环

1、Iterator(遍历器)的概念

2、默认 Iterator 接口

3、调用 Iterator 接口的场合

4、字符串的 Iterator 接口

5、Iterator接口与Generator函数

6、遍历器对象的return(),throw()

7、for...of循环

第十四章:Generator函数的语法

1、简介

2、next 方法的参数

3、for...of 循环

4、Generator.prototype.throw()

5、Generator.prototype.return()

6、yield* 表达式

7、作为对象属性的Generator函数

8、Generator 函数的this

9、含义

10、应用

第十五章:Generator函数的异步应用

1、传统方法

2、基本概念

3、Generator 函数

4、Thunk 函数

5、co 模块

第十六章:async函数

1、含义

2、基本用法

3、语法

4、async 函数的实现原理

5、与其他异步处理方法的比较

6、实例:按顺序完成异步操作

7、异步遍历器

第十七章:Class的基本用法

1、简介

2、严格模式

3、constructor 方法

4、类的实例对象

5、Class 表达式

6、不存在变量提升

7、私有方法

8、私有属性

9、this 的指向

10、name 属性

11、Class 的取值函数(getter)和存值函数(setter)

12、Class 的 Generator 方法

13、Class 的静态方法

14、Class 的静态属性和实例属性

15、new.target属性

第十八章:Class的继承

1、简介

2、Object.getPrototypeOf()

3、super 关键字

4、类的 prototype 属性和__proto__属性

5、原生构造函数的继承

6、Mixin 模式的实现

第十九章:Decorator

1、类的修饰

2、方法的修饰

3、为什么修饰器不能用于函数?

4、core-decorators.js

5、使用修饰器实现自动发布事件

6、Mixin

7、Trait

8、Babel转码器的支持

第二十章:Module 的语法

1、概述

2、严格模式

3、export 命令

4、import 命令

5、模块的整体加载

6、export default 命令

7、export 与 import 的复合写法

8、模块的继承

9、跨模块常量

10、import()

第二一章:Module 的加载实现

1、浏览器加载

2、ES6 模块与 CommonJS 模块的差异

3、Node 加载

4、循环加载

5、ES6模块的转码

第二二章:ArrayBuffer

1、ArrayBuffer 对象

2、TypedArray视图

3、复合视图

4、DataView视图

5、二进制数组的应用

6、SharedArrayBuffer

7、Atomics 对象

第七阶段:JavaScript设计模式

第一章:学习设计模式的准备

1、js面向对象回顾

2、什么是设计模式

3、为什么我们要学习设计模式?

4、设计模式的分类

第二章:创建型设计模式

1、单例模式

2、简单工厂模式

3、工厂方法模式

4、抽象工厂模式

5、原型模式

6、创建者模式

第三章:创建型设计模式

1、装饰者模式

2、外观模式

3、代理模式

4、适配器模式

5、亨元模式

第四章:行为型设计模式

1、迭代器模式

2、中介者模式

3、访问者模式

4、观察者模式

5、策略模式

6、命令模式

第五章:技巧性设计模式

1、委托模式

2、节流模式

3、数据访问对象模式

4、参与者模式

5、等待者模式

第六章:架构型设计模式

1、同步模块模式

2、异步模块模式

3、MVC模式

4、MVP模式

5、MVVM模式