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

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

第一阶段:JavaScript基础

第一章:认识JavaScript 获取元素 操作DOM 事件 函数 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 DOM0级事件 事件、方法/函数 、this的简单认识

10、定义变量 (es5:var es6:let 、const)

本节课案例+作业

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

第二章:操作属性 操作样式(1课时)

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

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

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

4、js对象的自定义属性 和标签属性的区别

5、[]的初步认识 代替点操作符

本节课案例+作业

  • 案例1_点击图片自动替换
  • 案例3_页面添加新闻功能

第三章:数据类型 显示类型转换 判断(1课时)

1、ES5数据类型 number、string、boolean、null、undefined、object

2、ES6数据类型 symbol(出现的原因,能解决的问题)

3、数组/ json的简单介绍 下标、length、属性、值

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

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

本节课案例+作业

  • 作业1_文字放大缩小功能
  • 作业2_QQ说说发表功能

第四章:迭代器 自定义属性运用(2课时)

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

2、while while介绍 、do while 介绍

3、自定义属性 设置序号、结合for循环的运用

本节课案例+作业

  • 案例1-选项卡的原理
  • 案例2-for循环生成10个div
  • 作业1-.生成左尖括号图形
  • 作业2-多方位九九乘法表

第五章:运算符 类型转换(1课时)

1、算术运算符 + - * / % **

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

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

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

5、位运算符 ~ | & ^ << >> >>>

6、隐式类型转换 各运算的隐式转换

本节课案例+作业

  • 案例1_二级下拉菜单
  • 案例2_自定义复选框
  • 作业1_图片的点击轮播切换
  • 作业2_360左侧滑动导航
  • 作业2_JS制作QQ选项卡功能

第六章:函数(2课时)

1、函数分类 具名函数、匿名函数 、函数定义、 函数表达式、函数表达式自执行、箭头函数(es6)

2、参数 实参、形参、不定参 、 rest参数(es6)、 参数的默认值(es6)

3、return return的用途

4、this深刻认识自执行this指向、事件函数this指向、对象方法this指向

5、严格模式use strict模式,以及this在严格模式的表现(严格模式下获取顶层对象)

6 、改变this指向call、apply、bind

本节课案例+作业

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

第七章:js解析顺序和作用域(面试必考)(1课时)

1、作用域详解 作用域、作用域链

2、解析顺序 es5解析顺序与es6的异同

3、变量提升 es5变量提升的原因(编译、执行阶段介绍)

4、闭包 什么是闭包、创建闭包、运用、注意事项

5、递归 (案例-斐波那契数列)

本节课案例+作业

  • 多道经典面试题详解

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

1、 ES5数组方法 length 、 [] 、push() 、 unshift() 、 pop() 、 shift()、splice( )、sort()、concat()、join()、filter()、isArray( )、forEach()、map()等

2、ES6数组方法Array.from()、Array.of()、copyWithin()、find()、findIndex() 、fill()、entries(),keys() 和 values()、includes()等

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

4、ES6字符串方法 includes()、startsWith()、endsWith()、repeat()、padStart()、padEnd()等

5、ES6模板字符串

本节课案例+作业

  • 文字增删改查案例
  • 商品按照价格排序

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

1、定时器 setTimeout、setInterval、requestAnimationFrame

2、定时器参数注意事项eval方法的介绍

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

4、弧度与角度弧度和角度的相互转换

5、三角函数 Math.sin Math.cos Math.tan Math.asin Math.atan Math.acos等

6、es6扩展Math.trunc()、Math.sign()、Math.cbrt()、Math.hypot()等

本节课案例+作业

  • 案例1_倒计时跳转
  • 案例2_图片滑门效果
  • 案例3_随机色卡
  • 案例4_圆周运动
  • 作业1_内容竖直向上向下滚动

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

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_倒计时
  • 作业2_图片时钟

第十一章:DOM、BOM(2课时)

1、dom简介、dom结构

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

3、node属性常用操作 getAttribute、setAttribute、removeAttribute、getAttibuteNode、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

8、BOM 核心对象window location、screen、history navigator

9、窗口事件与方法 onscroll、onresize、onfocus、onblur、open()、close() 等

本节课案例+作业

  • 案例01_节点操作
  • 案例02_碰撞小球
  • 作业01_多个小球的运动
  • 作业02_节点增删改操作
  • 作业03_景点勾选操作

第十二章: event事件对象、DOM2级方法(2课时)

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

2、事件监听 attachEvent、addEventListener 事件绑定、事件解绑、事件捕获、事件冒泡

3、滚轮事件 wheelDelta、detail 、nmousewheel

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

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

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

本节课案例+作业

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

第十三章:cookie和Local Storage(1课时)

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

2、本地存储Local Storage 与 cookie的区别

本节课案例+作业

  • 案例1- cookie封装
  • 案例2- 用户名的存储
  • 案例3- 历史访问时间

第十四章:正则表达式(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(2课时)

1、什么是ajax

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

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

4、简单实例运用

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

6、jQuery里面的ajax

7、异步编程的回调地狱

8、promise 异步编程的解决方案(解决回调地狱)

9、fetch 对比XMLHTTPRequest、更优雅的发送请求

10、关于跨域:jsonp、CORS

本节课案例+作业

  • 案例1_瀑布流延时加载特效
  • 案例2_模仿百度搜索

第十六章:面向对象写法(4课时)

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

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

3、原型prototype

4、链式操作

5、包装对象

6、封装性

7、继承性(继承的多种方式 、 类继承 、 复制继承、对象继承、更多继承方式省)

8、多态

9、es6 class面向对象写法

本节课案例+作业

  • 案例1_可扩展的轮播组件开发

第十七章:jQuery特效(4课时)

1、jquery基础语法认识 jQuery 、下载jQuery 、JQ获取元素 、 $符号详解 、各种选择器的介绍、JQ操作元素内容、JQ操作元素样式

2、JQ对象和JS对象 JQ对象和JS对象 、什么叫JQ对象、什么叫JS对象、JQ对象和JS对象的互相转换、JQ序列号相关、JQ里面的事件

3、元素操作 遍历每个元素 、JQ操作标签属性、对class名的操作

4、jQ动画特效 JQ的显示隐藏相关动画、animate函数详解、stop方法

5、元素属性操作 各种宽高/距离width / height方法、scrollTop方法、offset方法、position方法

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

7、jquery高级运用 delay方法、extend的运用、map方法、Ajax相关方法(高级课程)

本节课案例+作业

  • 案例1_常用网页特效30例
第二阶段:Node.js基础到实战全栈课程

第一章 Node.js介绍,CommandJS模块化标准,NPM

1.Node.js简介与安装

2.Node.js在现代企业级开发中的作用

3.CommandJS模块化标准

4.NPM包管理工具

第二章 标准常用模块,HTTP协议,web服务器搭建,pm2工具

1.异步I/O,事件驱动解析

2.fs,stream,http,Buffer,events等常用标准模块

3.HTTP传输原理,交互方式,HTTP首部报文

4.结合http,fs,querystring模块搭建web服务器

5.使用pm2管理Node.js应用

第三章express/koa2 企业级web应用框架

1.关于express/koa2 企业应用框架

2.基于MVC架构构建项目目录

3.middleware中间件概念

4.app.js主程序文件配置,bin/www启动模块配置

5.路由的概念与设计

6.nunjucks后台模板引擎

第四章 MongoDB数据库,mongoose模块

1.MongoDB安装环境变量配置

2.noSQL与关系型数据库的对比

3.MongoDB数据库增删改查方法,模糊查询

4.mongoose模块连接数据库

5.Schema,Model,entity三者之间关系

6.mongoose静态实例方法

第五章 博客登陆注册文章上传功能开发

1.博客登陆注册功能

2.seesion会话管理,登陆状态保存

3.后台数据安全加密,md5,哈希加密加盐方式

4.富文本编辑器与Node.js应用连接

5.文章上传,图片上传,formidable

6.评论数据库表数据结构设计

7.异步回调黑洞,ES8 async异步函数

8.error错误信息处理

9.博客文章模糊搜索功能

第六章 RESTful风格接口开发

1.RESTful web架构思想理念

2.脚手架自动搭建express/koa2服务

3.RESTful接口设计规范

4.HTTP请求方式在REST中的重新定义

5.Postman工具发送http请求

6.HypermediaAPI