远程课:JavaScript 全栈一小步,职场前进一大步(上)

7 年线下课程沉淀,换回一次有口皆碑的远程课。在网络时代背景下,以企业需求为导向,秉承实体课模式,将 JavaScript 课程系统细致的呈现在网络上。这里有 206 个知识点 37 个实战案例,由浅入深,作业批改 + 群问题解答;针对不同基础学员 JavaScript 课程分上下两部,时间更自由,知识任意选 JavaScript 全栈一小步,职场前进一大步。

场景一:(学员咨询)

  • 对话一:什么时候在成都开班?我想学前端,但是北京上海太远了。
  • 对话二:最近有 javascript 课程吗?上次没时间,下次课程什么时候课?
  • 对话三:想转行学 javascript ,需要什么基础?
  • 对话四:有远程课吗?自己看视频有点枯燥。

场景二:(公司面试题)

  • 问题一:如何理解和使用函数的作用域和闭包?
  • 问题二:递归是怎么工作的,该如何理解递归?递归应用在哪里?
  • 问题三:数组和类数组的相同和不同的地方?
  • 问题四:为什么 getElementsByTagName 获取元素要使用下标获取?

既然众望所归,那就来一堂 javascript 远程课吧~

课程服务

资深全栈式 javascript 远程课即将在妙味课堂倾情上线:

1、极尽详细的课程大纲:按照科学的教学方式,按计划做好详尽的课程大纲进行教学;

2、由浅入深的教学方式:课程讲解必定遵循循序渐进,知识点由易变难;接受能力由难变易;

3、超多丰富的实战案例:系统深入的知识点配上精选实战案例,一道生动易懂的课程活生生的摆在你面前;

4、指定线上提交练习版块:课程讲解期间,遇到问题可及时在远程课群内、妙味社区:http://2017.miaov.com/bbs 提出,讲师会给到解答;

5、 指定 QQ 群全程安排班主任、讲师、助教定期固定时间回复大家的提问;

6、练习作业批改:每堂课结束后,讲师会留针对本堂课的作业题,交作业后讲师会认真做好批改,并给出详尽的回复;

7、课程全程录制视频:课程有效期内可在腾讯课堂 PC 和移动端视频反复观看,不怕错过课程;

课程说明:在课程直播期间可享受全部课程服务;直播课程结束后一个月内依然提供指定板块给予问题解答;直播课程结束一个月后,由于讲师有新的课程需要讲解,大家可以直接将问题在妙味社区进行提问,讲师在课后会去给大家解答。

课程福利

在 2017 年 9 月 16 日 17:00 前报名,即可享受 100 元学习优惠券用于抵扣报名费用;

报名地址:https://ke.qq.com/course/237017#tuin=90de623d

讲师介绍

学前基础

熟练掌握各种 HTML 标签、CSS 语法,能独立完成各种 PC 端及移动端静态页面,例如:

视频介绍:http://2016.miaov.com/index.php/news/newsDetail/nid/77


课程大纲

第一节:变量、事件、函数、style 属性操作

  • javascript 介绍
    • 使用 javaScaript 能做点什么?
    • javaScript 特点
  • javascript 出现的位置
    • 行间
    • 内嵌
    • 外链
      • 从实例开始
    • 实例的需求和实现
    • 涉及的知识点学习
      • 获取元素
    • 通过 id 获取元素:document.getElementByld
      • 变量
    • 什么是变量
    • 什么是数据
    • 声明变量
    • 变量初始化
    • 赋值运算符
    • 变量命名组成和命名规则
    • 关键字保留字
    • 命名风格
      • 事件
    • 什么是事件
    • 绑定监听器
      • 初始函数
    • 函数的作用
    • 函数的定义:函数声明和函数表达式
    • 函数的调用
      • 属性操作
    • 什么是属性
    • 增加属性、删除属性、改写属性、查找属性
    • 操作属性的方式:点(.)、中括号([])
    • 操作元素的 style 属性改变样式
    • 【案例】:设置改变元素样式

第二节:元素的其他属性、字符串、classList 的使用、流程控制—-if、数组

  • 元素的其他属性
    • id、
    • className
    • value
    • innerHTML
    • [案例]:留言板
      • 需求分析、实现步骤
      • 涉及知识点:+=运算符、value、innerHTML
  • 字符串
    • 字符串定义
    • 字符串的注意事项
    • 字符串拼接符:+
  • classList 的使用
    • 增加 class — node.classList.add()
    • 删除 class — node.classList.remove()
    • 切换 class — node.classist.toggle()
  • 程序的流程控制
    • 顺序执行
    • 条件分支
    • 循环语句
  • 流程控制—- if 分支语句
    • 使用 if 的场景
    • if 语句的语法
    • 两个或多个条件分支:if…else…、if…else if…else…
      • 运算符:==、<、>
      • 布尔值:true、false
      • ing 的 src
      • 自增和自减
      • 【案例】:切换两张图片
      • 【案例】:切换多张图片
  • 数组
    • 数组的定义
    • 数组的 length
    • 数组取值:下标
    • 下标从 0 开始
    • 判断边界

第三节:获取元素的方法、类数组、流程控制—-for、this 关键字、模拟单选/多选、选项卡思维

  • 获取元素的方法
    • 通过 id 获取元素:document.getElementById()
    • 通过标签获取元素:document / node.getElementsByTagName(标签名)
    • 通过 class 获取元素 document /node.getElementsByClassName( class 名字)
    • 通过 css 选择器获取元素:document / node.querySelector/ querySelectorAll( css 选择器)
  • 类数组
    • 和数组的相似和不同之处
    • 类数组的 length
    • 类数组取值:下标
  • 流程控制—- for 循环语句
    • for 语句使用的场景
    • for 循环语法分析和执行过程示意
    • 【实例】生成多个 div
    • 【实例】给每一个元素绑定点击处理
  • this 关键字
    • 位于全局和函数中
    • this 的值不固定,随着执行环境(上下文)的改变而改变
    • 点击处理中 this 的指向
    • 【实例】模拟单选
    • 【实例】模拟多选
  • 选项卡思维
    • 选项卡基本原理分析
    • 应用场景
    • 自定义属性

第四节:京东无缝滚动幻灯片、百度音乐全选

第五节:数据类型、数据类型转换、运算符、【实例】找数据

  • 数据类型
    • 简单(基本)数据类型:Number、String、Boolean、Undefined、Null
    • 复合(引用)数据类型:Object
  • 数据类型转换
    • 显示类型转换、隐式类型转换
    • 转数字类型 => Number (要转换的值)
    • 转字符串类型 => String (要转换的值)
    • 转布尔值类型 => Boolean (要转换的值)
    • parseInt、parseFloat
    • NaN
    • isNaN
  • 运算符
    • 算术运算符:+ 加、- 减、* 乘、/ 除、% 取模(求余数)、++、—
    • 赋值运算符:=、+=、-=、*=、/=、%=
    • 关系运算符: <、>、<=、>=、==、!=、===、!==
    • 逻辑运算符:&& 与、|| 或、! 否 、三目运算符
    • 运算符优先级、结合性
  • 【实例】找数据

第六节:深入理解函数、作用域、作用域链、闭包

  • 深入理解函数
    • 函数作用
    • 函数定义:函数声明和函数表达式
    • 匿名函数、模块化
    • 函数调用和注意点
    • 函数参数:形参和实参
    • arguments 对象
    • 函数返回值
    • [实例]获取计算后元素的指定样式
  • 作用域
    • 标识符(变量和函数)可被访问的范围
    • 全局作用域和局部作用域
    • 变量对象和活动对象
    • 作用域链的形成和作用
    • 闭包的使用
    • 声明提升:进入执行环境和执行代码
    • 【实例】商品累计

第七节:开启定时器、停止定时器、延迟消失的广告、无缝轮播图片

  • 开启定时器
    • 定时器的应用场景
    • 重复执行定时器:setInterval()
    • 延迟执行定时器:setTimeout()
    • 定时器中this的问题
    • offsetLeft、offsetTop
    • 【实例】让一个元素运动起来
    • 【实例】延迟消失菜单
  • 停止定时器
    • 定时器编号
    • 停止重复执行定时器:clearInterval ()
    • 停止延迟执行定时器:clearTimeout ()
  • 【实例】延迟消失的广告
    • mTween 函数的使用
    • 参数说明
  • 【实例】无缝轮播图片
    • 需求分析
    • 无缝轮播图片的原理

第八节:日期对象、获取/设置时间和日期的方法、字符串方法学习、打字机案例

  • 日期对象
    • 创建日期对象:new Date ()
    • 参数:不传参、传入字符串、传入时间戳
  • 获取时间和日期的方法
    • 设置时间和日期的方法
      • 【例子】获取当前月份有多少天
      • 【例子】获取一个月的 1 号星期几
      • 【例子】倒计时
    • 如何学习一个方法
      • 这个方法操作哪一类数据
      • 这个方法的作用是什么
      • 传入指定类型的参数
      • 返回值,类型
      • 是否影响原数据
  • 字符串方法学习
    • charAt():返回字符串中指定位置的字符
    • indexOf():返回指定值在调用该方法的字符串中首次出现的位置
    • slice():截取指定位置之间的字符串
    • substring():截取指定位置之间的字符串
    • substr():截取指定起始位置和指定长度的子字符串
    • split():通过一个指定的字符串把原字符串分割成一个数组
    • toLowerCase():把字符串全部转成小写
    • toUpperCase():把字符串全部转成大写
    • trim():去掉字符串首尾的全部空格
    • repeat():重复指定个数
  • 【实例】打字机

第九节:数组方法学习、筛选人物信息、数组去重、Math 方法

  • 数组方法学习
    • push():添加一个或多个元素到数组的末尾
    • unshift():添加一个或多个元素到数组的头部
    • pop():删除数组最后一个元素
    • shift():删除数组第一个元素
    • concat():将传入的数组或非数组值与原数组合并,返回合并后的新数组
    • reverse():颠倒数组中元素的位置
    • join():将数组中的所有元素连接成一个字符串
    • slice():截取数组中一部分,并返回这个新的数组
    • splice():用新元素替换旧元素,以此修改数组的内容
    • forEach():循环数组的每一项
    • map():每个元素都调用一个提供的函数后返回的结果,放在新数组中
    • filter():根据回调函数的返回值过滤数组中的项,放在新数组中
  • 【案例】筛选人物信息
  • 数组去重
    • 对比方式
    • 对象 key 值唯一性
  • Math方法
    • Math.ceil () 对数进行向上取整
    • Math.floor () 对数进行向下取整
    • Math.round () 对数进行四舍五入
    • Math.abs () 取数的绝对值
    • Math.random () 返回 0-1 之间的随机数,不包含 1

第十节:冒泡排序、快速排序、sort 方法、递归原理分析、无限级菜单

  • 冒泡排序和快速排序原理分析
  • sort 方法排序时候的注意点
  • 递归原理分析
  • 【实例:递归的运营—-无限级菜单】

第十一节:Es6 基础语法、let、const、解构赋值、数组扩展、对象扩展、函数的扩展

  • 声明变量的方式
  • let 和 var 的异同点
  • 定义常量 const
  • 数组的解构赋值
  • 数组扩展:Array.from()、Array.isArray()
  • 对象扩展:Object.is()、Object.assign()
  • 函数的扩展:rest 参数、参数默认值、箭头函数=>

第十二节:DOM 介绍、DOM节点类型和关系、DOM 属性操作、无限级菜单展开收缩操作

  • DOM 节点类型和关系
  • DOM 属性操作:getAttribute、setAttribute、removeAttribute
  • DOM 元素操作:createElement、appendChild、insertBefore、removeChild、replaceChild、cloneNode
  • 【实例—-无限级菜单展开收缩操作】

第十三节:元素尺寸、登录框实例、定位父级、getBoundingClientRect

  • 元素尺寸:可视区域宽高、元素宽高
  • 滚动触发事件、浏览器大小改变触发事件
  • 定位父级:offsetParent
  • getBoundingClientRect :返回元素的大小及其相对于视口的位置
  • 【实例:居中显示的登录框】
  • 【实例:tip 特别提醒框】

第十四节:BOM 介绍、用户代理信息、BOM 常用方法、地址栏信息、BOM 常用事件、招聘信息的实例

  • 回顾 js 的组成:ECMAscript 、DOM —- 文档对象模型、BOM —- 浏览器对象模型
  • BOM 介绍
    • BOM 常用方法:open、close
    • 用户代理信息:window.navigator.userAgent
    • URL 完整的组成
    • 【实例:判断是否是移动端】
    • 【实例:招聘信息】

第十五节:事件、绑定事件处理程序、事件对象、事件流、冒泡的利弊、阻止浏览器默认行为

  • 事件的产生
  • 绑定事件处理程序:HTML 事件处理程序、DOM1 级事件处理程序、DOM2 级事件处理程序
  • 事件对象的获取
  • 事件流:事件流描述的是从页面中接收事件的顺序。
    • 事件的三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
  • 冒泡的利弊、阻止浏览器默认行为
    • 【实例:事件委托的利用】
    • 【实例:拖拽元素的实现】

第十六节:鼠标事件、鼠标事件实例—-放大镜、鼠标滚轮事件、call 和apply、焦点事件

  • 鼠标滚轮事件和兼容处理:mousewheel、DOMMouseScroll
  • call 和 apply 的使用和异同点
  • 焦点事件:onfcus、onblur
    • 【实例:封装mousewheel函数】

第十七节:键盘事件、事件对象上的功能属性、自定义滚动条、生成自由选区、碰撞检测

  • 键盘事件:onkeydown、onkeyup
  • 事件对象上的功能属性:shiftKey、ctrlKey、altKey
  • 自定义滚动条:滚动条的原理分析、比例计算
  • 生成自由选区
  • 九宫格碰撞检测
    • 【实例:框选选中元素】

第十八节: 实战案例:云盘《一》

  • 事件扁平化格式介绍
  • 渲染无限极属性菜单
  • 封装操作数据的算法
  • 利用事件委托写进入目录的交互
  • 自定义全选单选框

第十九节:实战案例:云盘《二》

  • 新建文件夹
  • 删除文件夹
  • 重命名文件夹
  • 框选文件夹

第二十节:总结

  • 课程回顾和梳理
  • 常见问题解答
  • 学习情况总结序、事件对象、事件流、冒泡的利弊、阻止浏览器默认行为、兼容问题

课时安排:20 : 00 ~ 22 : 00 共计:20 节课

课程价格:2799 元/套

报名地址:https://ke.qq.com/course/237017#tuin=90de623d

课程咨询:

QQ:2852509866、2852509867、2852509868
TEL:010-57269690
在线时间:周一至周五 9:30 - 18:00
想要了解妙味课堂最新开课消息吗?长按二维码关注吧!

妙味网友
请登录后留言,请登录注册