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、模块别名、目录别名