2018 年『升级版』前端全栈 JS 高级工程师课程

最新开班信息 
  • 火热报名中,报名请点击:  我要报名 
  • 付款方式:官方唯一支付宝【131****4820】
简介 
凝聚妙味讲师 10 年心血、锤炼出最佳前端开发课程体系,今天以全新面貌呈现在大家面前:注重基础修炼与原生方法的剖析是这门课的灵魂,课程包括 6 大学习阶段、21 个章节、1600 多个知识点和丰富的前端开发案例…… 这是国内唯一一家敢于亮出细致入微的课程大纲体系的机构。凭借本套课程体系,最终能让学员们开发出基于 vue 或 react 的工程级全栈项目为结课标准,并成长为技术过硬的 WEB 全栈高级工程师。
课程相关视频 
1 - 最新 vue 课程介绍 3:21
vue-cli 脚手架、webpack 配置、vue-router 管理视图、vuex 状态管理、axios 数据请求、开发工具、工作流程 …
 
2 - vue-cli 脚手架 16:03
vue 提供的脚手架、脚手架的功能、生成目录结构、开发调试、代码部署、热加载、单元测试 …
 
课程价格12000

课程时长:3个月

讲课方式:周一至周五 讲师全天 现场面授,周六安排值班讲师辅导

上课时间:上午:09:30~12:30 下午:13:50~18:30 自习:18:30~20:00(自习有讲师现场辅导)

优惠报名方式

提前报名:即在 2018年2月26日 ~ 3月7日 期间报名付款成功者,可享受 11000 元优惠价;

参加 3 人团购:在开班前,成功组合成 3 人团报名者,按 11200 元优惠价执行;

参加 2 人团购:在开班前,成功组合成 2 人团报名者,按 11500 元优惠价执行;

特别提醒:

在 2018 年 2 月 11 日之前(春节假期前)报名者,均可享受 2017 年课程优惠价;
 我要咨询 
 
 
 
课程大纲
详细课程大纲
 
 
01-02
课程目录
  • javascript入门2
  • 数据类型和流程控制3
  • function详解4
  • 字符串和数组方法5
  • 对象、JSON、Math6
  • 定时器和动画帧7
  • 动画函数封装8
  • transform相关9
  • Date对象10
  • BOM11
  • 事件基础12
  • 事件应用13
  • 移动端事件14
  • Node.js15
  • AJAX 原理及应用16
  • DOM 与综合实例17
  • 正则表达式18
  • 面向对象19
  • jQuery320
  • ECMAScript621
  • React 全家桶22
  • vue 2.0 全家桶23
01
03-04
javascript入门
javascript是用来做什么的、 常见网页特效的原理、 js书写位置、 getELementById()、 什么是事件、 初识函数、 变量、 命名规范、 属性操作的第一种方法、 案例:热身练习讲解、 字符串、 属性操作的第二种方式、 练习:简易留言板、 if判断、 常用运算符"+","-","*","/"、 初始数组、 小例子: 点击按钮 加减数字、 案例:上一张下一张图片切换(数字版)、 案例2:上一张下一张图片切换(数组版)、 新的获取元素的方法、 获取一组元素操作、 for循环、 取模、 this关键字、 案例:简易仿select控件、 案例:单选模拟、 选项卡思路讲解
02
03-04
数据类型和流程控制
数据类型划分、 不同的数据类型,决定了我们后期可以进行的操作、 基本类型(简单类型)、 引用类型(复合类型,复杂类型)、 传值与传址、 typeof运算符、 强制数据类型转换、 parseInt()、 parseFloat()、 number()、 NaN和isNaN、 String()、 Boolean()、 算术运算符、 赋值运算符、 关系运算符、 逻辑运算法、 条件操作符 ?:、 、 运算符优先级、 案例:简易计算器、 判断:if、switch(case break default)、 循环:while、for、 跳出:break、continue
03
05-06
function详解
function 函数、 定义函数、 函数调用、 函数传参、 形参、 实参、 arguments 不定参、 函数返回值、 计算后的样式值、 getComputedStyle(element)、 计算后样式,元素最终渲染出来的样式、 函数封装、 案例:多个选项卡传参、 练习:修改文本框的值、 预解析机制、 作用域、 全局作用域 局部作用域 作用域链、 闭包、 闭包,有权访问另一个函数作用域的函数、 常见形式,函数嵌套函数、 闭包的使用、 匿名函数表达式、 递归、 案例:商品累计
04
05-06
字符串和数组方法
字符串的格式、 string.length、 string.charAt(index)、 string.charCodeAt(index)、 string.indexOf("str")、 string.lastIndexOf("str")、 string.slice(start,end)、 string.split(separator)、 string.substr(start,length)、 string.substring(start,end)、 string.toLowerCase()、 string.toUpperCase()、 string.trim()、 模板字符串、 arr.length、 arr.push(data) arr.unshift(da、 arr.pop()、 arr.shift()、 arr.sort()、 arr.concat(arr2)、 arr.reverse()、 arr.join(separator)、 arr.slice(start,end)、 arr.splice()、 arr.forEach()、 arr.map()、 arr.filter()
05
07-08
对象
创建对象、 new Object()、 {}、 in 操作符 for-in语句、 JSON(JavaScript Object Notation)、 Math 对象、 Math.abs() 返回绝对值、 Math.ceil() 返回向上取整后的数值、 Math.floor() 返回向下取整后的数值、 Math.round() 返回四舍五入后的数值、 Math.max(x,y) 、 Math.min(x,y) 、 Math.random() 、 Math.sqrt() 返回平方根、 Math.PI 圆周率、 角度和弧度的相互转换、 Math.sin() 返回正弦值、 Math.cos() 返回余弦值、 Math.tan() 返回正切值、 Math.asin() 返回反正弦值、 Math.acos() 返回反余弦值、 Math.atan() 返回反正切值
06
07-08
定时器和动画帧
setInterval(执行函数,间隔时间) 间隔型定时器、 间隔一定时间,重复执行,执行函数、 返回值是定时器的编号、 setTimeout(执行函数,延迟时间) 延迟型定时器、 延迟一定时间执行,执行函数、 返回值是定时器的编号、 关闭定时器、 clearInterval(定时器编号) 关闭setInterval开启的定时器、 clearTimeout(定时器编号) 关闭setTimeout开启的定时器、 定时器管理、 requestAnimateFrame(function) 动画帧、 CancelAnimationFrame(动画帧编号)、 关闭动画帧、 CancelAnimationFrame的兼容处理、 封装兼容的动画帧处理方法
07
09-10
动画函数封装
tween.js tween类来自于flash,在tween中封装了各种各样的动画算法、 tween的动画,主要依赖于t,b,c,d四个参数:、 t 动画当前执行至第几次、 b 需要动画的样式的初始值、 c 需要动画的样式的初始值和结束值的差值、 d 动画执行总次数、 案例: 控制小方块移动、 单个元素,单个属性动画封装、 多个元素,单个属性动画封装、 多个元素,多个属性动画封装、 添加回调函数、 在动画结束之后,添加callBack() 回调函数、 在动画执行中,添加callIng() 回调函数、 call 修改函数在执行中的this执行
08
09-10
transform相关
transoform 变换、 rotate 元素旋转、 角度单位、 scale 元素缩放、 skew、 translate、 transform的执行顺序、 transform-origin、 transoform3D rotate3D、 translate3D、 transform-style 、 perspective 、 perspective-origin 、 backface-visibility 、 案例:3d盒子、 利用transform做动画的好处、 transform在获取时,获取到的是矩阵,不能直接进行计算、 封装transform获取和设置方法、 把封装好的transform方法引入css方法、 transition过渡 为元素的样式变化时添加动画、 animation、 分析3种动画实现方式的不同
09
11-12
Date对象
Date对象主要用于获取或设置时间,用法 new Date()、 日期获取相关参数: Date() 、 getDate() 、 getDay() 、 getMonth() 、 getFullYear() 、 getHours() 、 getMinutes() 、 getSeconds() 、 getMilliseconds() 、 getTime() 、 Date.now() 、 案例:时钟效果、 日期获取相关参数、 new Date(2018,4,1,0,0,0)、 new Date('June 10,2018 0:0:0')、 new Date(new Date().getTime())、 setDate() 、 setMonth() 、 setFullYear() 、 setYear() 、 setHours() 、 setMinutes() 、 setSeconds() 、 setMilliseconds() 、 setTime()
10
11-12
BOM
BOM (browser object model) 浏览器对象模型,、五大对象:window、navigator、locaation、history、screen window 对象、 window.open(URL,name,features,replace) 打开新窗口、 window.close() 关闭窗口、 页面相关距离获取、 可视区大小、 页面大小、 窗口滚动条距离、 window常用事件、 scroll 监听滚动条滚动、 resize 监听窗口大小发生变化、 location 对象、 href hash search host hostname pathname port protocol reload()、 navigator、 screen、 history
11
13-14
事件基础
事件、 事件监听器 、 el.removeEventListener("event",func,事件流)、 事件流、 事件对象、 e.target 事件源,发生事件的元素、 e.type 事件类型、 阻止冒泡、 阻止默认行为、 鼠标位置获取、 e.button 返回用户按下的是鼠标的哪个键、 键盘事件、 滚轮事件、 常用事件汇总:、 鼠标事件、 键盘事件、 keydown 键盘按下、 keyup 键盘抬起、 表单事件、 change 状态发生改变、 input value发生变化、 blur 失去焦点、 focus 获得焦点、 reset 重置时、 submit 提交时、 submit() 提交表单
12
13-14
事件应用
拖拽的原理分析、 事件:mousedown鼠标按下,mousemove 鼠标移动、mouseup 鼠标抬起、 记录信息、 move时获取新的鼠标坐标,计算出move于down之间的位移值、 用down时的鼠标坐标加上位置值求出元素拖拽后的坐标、 案例:限制范围拖拽、 碰撞检测、 检测元素所有不会碰撞的状态,剩余状态便是碰撞了、 综合案例:拖拽图片,碰撞交换位置、 自定义滚动条、 根据内容高度和外框高度计算滚动条高度、 为滚动条添加限制范围拖拽、 添加滚轮操作移动滚动条位置、 根据滚动条移动距离同步内容移动距离
13
15-16
移动端事件
touch事件、 touchEvent、 touches 当前屏幕上的手指列表、 targetTouches 当前元素上的手指列表、 changedTouches 触发当前事件的手指列表、 案例:移动端幻灯片效果实现、 orientationchange 事件,监听手机横竖屏切换、 window.orientation 获取当前手机横竖屏状态、 devicemotion 事件,监听手机加速度发生变化、 -accelerationIncludingGravity 加速度对象 deviceorientation 事件, 监听手机旋转角度发生变化、 ev.alpha 围绕Z轴的旋转角度、 ev.beta 围绕X轴的旋转角度、 ev.gamma 围绕Y轴的旋转角度
14
15-16
Node.js
node环境搭建、 node模块使用、 commonJS规范、 内置模块、 第三方模块、 使用http模块搭建web server、 nodejs-web开发框架介绍、 express、 sails、 koa、 express.io、 express的安装、 npm init配置安装、 package.json配置安装、 express项目初始化、 项目的创建、 项目的启动运行、 Routing的使用、 路由方法:http method、get、post、body-parse模块、 route paths(路由路径):字符串路由、字符串模式路由、正则路由、 swig模板引擎、 安装swig、 express中使用swig、 数据库
15
17-18
Ajax
ajax全称为Asynchronous JavaScript And XML,即异步的JavaScript和XML,主要用来与服务器进行通信,在不重新加载页面的情况下发送请求给服务器,做到无刷新页面更新数据,接受并使用从服务器发来的数据。创建包含发送请求和响应功能的对象:new XMLHttpRequest。课程包括原生ajax知识点:get,post,状态码status,原生ajax库的封装使用,jQuery中ajax的使用,axios库的使用,ajax文件上传 、跨域产生和解决方案、cookie介绍,http 协议、获取cookie,设置cookie、localStorage介绍。
16
17-18
DOM
DOM(文档对象模型):DOM树,DOM根据文档结构描绘出的一个层次化的节点树。DOM节点childNodes 子节点、节点的层级关系:parentNode父节点,children子元素、元素相关尺寸及位置获取:offsetLeft / offsetTop,clientLeft / clientTop,getBoundingClientRect() 、元素的属性操作:getAttribute,setAttribute,removeAttribute、元素操作:createElement,appendChild/insertBefore,removeChild、表格操作。综合案例:配后端的留言板案例(添加留言、删除留言)
17
19-10
正则表达式
正则表达式,又称规则表达式,查找匹配某些符合规则的字符串,正则表达式就是写这种规则的工具。课程包括创建正则表达式、表达式规则(普通字符,元字符)、修饰符(影响整个正则规则的特殊符号)、正则的方法(执行一个检索,用来查看正则表达式与指定的字符串是否匹配)、字符串的方法:search(),match(),replace()、元字符:\d,\s,\w、边界符:\b,^,$、数词量:{n},{n,m}、分组、字符集合:中文[\u4e00-\u9fa5],ASCII码等。
18
19-20
面向对象
面向对象编程面向对象编程(oop)是一种编程思想,用抽象方式创建基于现实世界模型的一种编程模式。目的是在编程中促进更好的灵活性和可维护性。JavaScript是基于构造函数(constructor)和原型链(prototype),JavaScript 语言使用构造函数(constructor)作为对象的模板。所谓”构造函数”,就是专门用来生成对象的函数。它提供模板,描述对象的基本结构。一个构造函数,可以生成多个对象,这些对象都有相同的结构。面向对象三大特性:封装、 继承、多态。
19
21-22
JQuery3
jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。它的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax、编写和使用jQuery插件以及其他功能。课程包含:选择器jQuery( selector [context ] )、工具方法:$.type()、$.isFunction()、$. isNumeric()、DOM/BOM过滤操作,增删改操作、jQuery事件系统、jQuery动画、编写和使用jQuery插件,$.extend()扩展JQuery静态方法,$().extend()扩展JQuery动态方法
20
21-22
ECMAScript6
ECMAScript6是目前ECMAScript语言规范的标准,通常被称为"ES2015"。可用var、let、const声明不同类型的关键字。ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。除此之外还新增了:模板字符串(增强版的字符串)、箭头函数(使用“箭头”(=>)定义函数)、函数的扩展(给形参直接赋值)、数组的扩展、字符串的扩展(str.repeat(n)返回一个新字符串,表示将原字符串重复n次。)、对象的扩展(函数可省略function关键字)和简写等内容。
21
23-24
React+redux 开发
React.js 是一个帮助你构建页面 UI 的库,它不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。组件的显示和行为有可能是由某些数据决定的。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。内容包括:React.js、react-router-dom、redux状态管理、webpack...
22
23-24
vue2.0
Vue是一个构建数据驱动的Web界面的库,通过简单的API提供高效的数据绑定和灵活的组件系统。具有简洁、轻量、快速、数据驱动、组件化等特点,除此之外,还具有上手快,简单易学,学完即用,快速开发的优势。可把页面组件化、模块化,分工明确,互不干涉,低耦合的设计使组件可复用、可测试,更易于维护。响应式编程,开发者只需要聚焦在状态的逻辑处理上,让框架来进行DOM操作,不需要自己手动更新视图、官方提供健全的周边工具,例如vue-cli、vue-router、vuex...
23
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
学前须知 

1、独立完成一个类似 uc.cn 这样的静态页面;

2、JS学前测试题下载 地址:http://www.miaov.com/UC.zip

3、要求 100% 还原设计图,并注意标签语义化;

4、在 PC 端各个浏览器兼容性没有问题:火狐、谷歌、Safari、360、IE7+;

学员作品 
 
 
课程服务 
报名该课程,您将获得:
 
 
常见问题 
Q
 
一遍学不会的话,还可以重听吗?
学不会当然可以重听,具体请咨询客服 QQ:2852509866
A
 
Q
 
课程可以退费吗?
是的,妙味支持随时退费,详细的退费流程可以让客服为你详细介绍。QQ:2852509866
A
 
Q
 
能分阶段学习吗?
是的,可全套学习,也可根据自身基础分阶段报名学习,具体可咨询 QQ:2852509866
A
 
课程咨询QQ:2852509868、2852509867
课程咨询电话:010-57269690

客服在线时间:周一至周五 9:30-18:00 周六 10:00-17:00

地址:北京海淀区西二旗辉煌国际大厦西6号楼319室

上海市闵行区新龙路399弄1号七宝宝龙城T4号楼9层905

开班信息
课程视频
课程大纲
学前须知
学员作品
我要报名