2021年最新H5网页开发前端课程目录介绍

一阶段：WEB网页基础

1 HTML5+CSS3基础入门

课程内容

熟悉HTML5入门基本内容（代码文件、基本结构、注释、编程问题规范、基本标签等）；掌握CSS3的基础入门知识；

项目实战

京东登录注册案例（HTML+CSS）登录界面指的是需要提供帐号密码验证的界面，有控制用户权限、记录用户行为，保护操作安全的作用。登录界面是所有在线系统的入口。

2 HTML5+CSS3进阶

课程内容

掌握继承与优先级；选择器、盒子模型、布局样式等使用方法；能够进行合理的网页布局。

项目实战

个人博客（HTML5+CSS3）个人博客是学员涉足前端领域的第一个项目，运用前端基础知识，培养项目思维，在入学2周内搭建属于自己的个人信息分享平台。

3 Photoshop

课程内容

采用商业案例来学习Photoshop使用，掌握Photoshop基本操作；能够独立的进行网页切图。

项目实战

企业网站

（HTML5+CSS3+Photoshop+PxCook）企业网站作为一家公司的互联网名片，是每家企业必备。强化学员对HTML+CSS+PS(切图)、各种布局等初期所学全部知识的综合应用，由于是第一个企业级项目，着重熟悉项目开发流程和培养使用HTML+CSS遇到问题时的分析和调试能力。

第二阶段：WEB编程基础

1 JavaScript基础

课程内容

了解最前沿JavaScript知识。掌握JS基础基本语法和基本语句以及ES6&ES7新特性，培养编程逻辑思维，实现网页的动态交互。

2 BOM+DOM编程

课程内容

认识和了解BOM和DOM模型；掌握window、 location、 history、 navigator、document、 Form、Table等对象的使用；掌握事件处理和DOM节点。理解BOM和DOM模型：掌握各浏览器API的使用、熟练操作元素节点理解网站事件类型与机制

项目实战

案例实践-H5音乐播放器、H5小游戏（HTML5+CSS3+Javascript）通过游戏应用开发，培养学员开发兴趣和参与感，强化Javascript基础、DOM操作和事件机制在实际场景的应用。

3 JavaScript交互及动画效果

课程内容

掌握运动框架的封装(匀速运动缓冲运动多物体运动) 分享到案例右侧边栏滚动案例透明度运动轮播效果案例

项目实战

企业网站交互进阶（HTML5+CSS3+JavaScript）掌握动画原理，利用原生JS技术编写动画交互效果实现企业站的轮播，选项卡，楼层跳转等常规功能

4 jQuery＋交互及动画＋jQuery优质插件

课程内容

认识jQuery；熟悉选择器；属性与样式； jQuery基本DOM操作；事件处理；文档处理；数组和对象操作。学会使用jQuery和JavaScript 和DOM编程的动画效果制作。掌握jQuery生态圈的流行框架使用；培养学员利用前端工具解决开发过程中问题的能力。

项目实战

案例实践-楼层跳动&轮播&表单验证（HTML5+ CSS3+jQuery）jQuery的流行得益于他庞大的插件生态圈，掌握jQuery插件的使用，将是前端开发者网站开发的利器。

5 版本控制工具SVN&GIT

课程内容

掌握SVN/GIT版本控制工具来维护项目的整个蓝图；熟练使用github 来管理云端代码仓库，快速项目组成员多人协作。

6 jQuery EasyUI

课程内容

熟悉jQueryEasyUI框架环境搭建，掌握EasyUI常用插件，使用Easy UI快速搭建后台

项目实战

电子购物网站（HTML5+CSS3+jQuery +EasyUI）通过本阶段的学习，具备常见动画需求的开发能力常用插件的使用及开发；逐步培养良好的编程习惯强化企业项目开发流程，培养团队协作能力。

第三阶段：响应式网站与项目自动化开发

1 HTML5、CSS3高级进阶

课程内容

掌握HTML5时代多媒体、Web存储技术及基于浏览器的(LBS)地理定位技术，熟悉基于高德地图、百度地图等地图API的应用开发；介绍了H5图形技术SVG和Canvas；能够动手编写图形报表和使用百度 echarts地图API的能力。掌握CSS3新选择器，响应式原理及CSS3媒体查询，移动端流行的伸缩布局，Web字体、渐变、过渡动画等技术使用动画库实现基于网页的酷炫动画效果。

项目实战

H5动效简历/H5原生移动商城（HTM L5+CSS3+Swiper+动画框架）H5动效简历是每一

个H5er的个性化名片，H5原生移动商城和适配调试是面向前端是时代的必须技术。

2 Bootstrap4

课程内容

掌握来自Twitter工程师开发的目前流行度很高的前端响应式框架，包括内置样式、组件和JavaScript插件；掌握基于Bootstrap 打造的电影主题页设计。

项目实战

电影主题页设计（HTML5+CSS3+Bootstrap）快速打造能够适应多端的信息展示网站

3 前端依赖管理+CSS预处理语言（Less+Sass）

课程内容

熟练使用bower来管理前端库，达到一个命令搞定所有项目依赖。

掌握基于CSS的预处理框架Less/Sass，以最简单的代码实现复杂样式；目前主流的前端框架都是基于css预处理语言搭建，学会后具备Bootstrap等框架的阅读和使用能力。

项目实战

响应式股票交易平台（Bootstrap4+Sa ss+PHP+Mysql+GIT）通过本阶段学习，通过Boot

strap等框架具备响应式开发能力；并使用多种版本控制工具，进行企业项目的迭代；同时使用预处理框架完成样式重用和扩展。具备高效快速开发企业项目的能力。

4 Grunt/Gulp自动化构建工具

课程内容

了解前端自动化构建工具的原理；掌握基于Node平台的Grunt和Gulp 两大自动化构建工具。

5 Mysql

课程内容

了解Mysql背景，快速搭建Mysql环境，熟悉Sql基础语法，实现对数据的CRUD操作

项目实战

响应式股票交易平台（Bootstrap4+Sa ss+PHP+Mysql+GIT）通过本阶段学习，通过Boot

strap等框架具备响应式开发能力；并使用多种版本控制工具，进行企业项目的迭代；同时使用预处理框架完成样式重用和扩展。具备高效快速开发企业项目的能力

第四阶段：Web高级编程与框架原理

1 JavaScript高级编程

课程内容

掌握jJavaScript面向对象思想；原型设计原理及使用。了解 JavaScript程序的编译原理；掌握递归、惰性载入、匿名、闭包及回调等高级函数的使用。掌握ES6前沿新特性。

2 jQuery插件开发

课程内容

学习插件开发模式,并自己动手实现动态表格查询和表单验证等插件。

案例实践

原生表单验证插件（HTML5+CSS3+ ES6）能够通过面向对象思想开发jQuery插件，学

习实践JS设计模式，具备初级JS框架的编写能力。

3 NodeJS

课程内容

掌握Node服务端编程技术，Expres搭建服务器，基于Express框架编写后端代码，实现前端和后端全栈开发

4 WebSocket

课程内容

掌握掌握HTTP协议、客户端数据传输方式，掌握WebSocket 在 HTML5 领域的应用场景，用于实现客户端和服务器的长链接。

案例实战

在线聊天室（HTML5+CSS3+JS+WebSocket）快速打造能够多人在线聊天的聊天室案例。

5 MVVM架构源码解析

课程内容

掌握MVC、MVP和MVVM架构的演变历史，掌握分层开发的思想，了解双向绑定原理，实现基于面向对象方式实现一个基于MVVM架构的 minVue框架。

案例实践

miniVue框架（面向对象编程）动手打造第一款属于自己的前端主流框架。

第五阶段：VUE全家桶与多端项目管理

1 VUE2-VUE3

课程内容

掌握Vue2框架的环境搭建，指令，表达式，计算属性、侦听器、生命周期和组件开发，掌握主流的VUE2组件高阶、消息通讯，熟悉Vant、 iView、MintUI移动端框架，使用Vue-cli来搭建工程和开发Vue项目。

2 ElementUI＋ Koa2(Node.js)＋Mysql

课程内容

熟练使用基于Vue2的饿了么前端视图框架ElementUI，高效打造大型复杂的用户界面。Koa是Express 原班人马打造更小、更健壮、更富有表现力Node框架，使用Koa2打开更前沿的后台开发模式，使用甲骨文公司的Mysql关系数据库来管理更为大型并发的数据。

项目实战

大型超市管理系统、外卖后台管理系统（ElementUI＋Koa2＋Mysql+GIT）通过最热门的Node+Koa2+Mysql开发模式独立完成网站开发通过NPM生态圈通过分享和实践编码进行自我提升成为一名真正的全栈工程师。

3 TypeScript

课程内容

TypeScript是一种由微软开发的自由和开源的编程语言。它是 JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

4 webpack模块加载器 &打包工具

课程内容

掌握最前沿模块化打包工具，形成组件化开发思想，极大简化项目开发的成本。

项目实战

外卖APP、源码音乐App （TS+Vue+Vuex+Vant+axios+GIT）熟练掌握Vue全家桶项目架构。

5 uniapp/Taro微信小程序

课程内容

微信小程序作为引爆H5时代的标识技术，通过学习了解视图层、逻辑层相关知识，深入小程序框架和组件的使用。uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到 iOS、Android、H5、小程序等多个平台。Taro是来自京东凹凸实验室的多端统一开发框架Taro，可以让你使用一套代码打通WebApp、微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序等。

项目实战

源码电影小程序/四海香美食小程序（WXML + WXSS + JS + 豆瓣开放接口API）通过

本阶段学习，具备微信、支付宝小程序、百度智能小程序和字节跳动小程序的开发能力。

第六阶段：React移动混合式开发

1 React

课程内容

掌握来自Facebook工程师开发的流行前端框架-ReactJs；熟练使用ReactJs基本语法、声明周期、React-Router及基于ES6的 React组件开发；掌握React Redux架构在实际项目中的应用。掌握基于ReactJS衍生出来的本地化跨平台框架；

项目实战

源码房产App、源码电影App （TS+React+Redux+Webpack+Antd-mobile+ GIT）熟练掌握React全家桶项目架构

2 React Native/Flutter

课程内容

熟练搭建ReactNative环境、掌握本地化布局和常见组件。 Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面（原生应用）。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

项目实战

源码生活APP（ReactNative/Flutter +AntD+DVA+高德地图API）通过本阶段学习，具

备与移动端开发人员的合作完成低成本、高性能、高健壮的App应用的能力。

第七阶段：就业与服务

1 就业指导

企业通用面试技巧、知识点面试技巧、模拟面试、项目面试技巧、语言表达练习、互面总结、总结和复习面试题。

2 面试直通车

面试经验交流、面试技术解惑、面试项目跟踪。

3 售后服务

随时随地为同学们提供全方位工作问题解决方案！源码时代是独家具有售后的服务机构！

VG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？

一、SVG 的 animation

SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为：

set
animate
animateColor
animateTransform
animateMotion

1.1、set

set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是他并没有动画效果。

使用语法：

<set attributeName="" attributeType="" to="" begin="" />

attributeName ：是要改变的元素属性名称。
attributeType ：是表明attributeName属性值的列表，支持三个固定参数 CSS/XML/auto，如x,y以及transform属于XML，opacity属于CSS。auto是浏览器自动判别的意思，也是默认值，如果你不知道该选哪个就填auto，浏览器自己判别。
to ：动画结束的属性值。
begin ：动画延迟时间。

eg：绘制一个半径为200的圆，4秒之后，半径变为50。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <set attributeName="r" attributeType="XML" to="50" begin="4s" />
 </circle>
</svg>

1.2、animate

是基础的动画元素，实现单属性的过渡效果。

使用语法：

<animate 
 attributeName="r" 
 from="200" to="50" 
 begin="4s" dur="2s" 
 repeatCount="2"
></animate>

from ：过渡效果的属性开始值。
to：过渡效果的属性结束值。
begin：动画开始时间。
dur：动画过渡时间，控制动画速度。
repeatCount：动画重复次数。

eg：绘制一个半径为200的圆，4秒之后半径在2秒内从200逐渐变为50。

<circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
 <animate attributeName="r" from="200" to="50" 
  begin="4s" dur="2s" repeatCount="2"></animate>
</circle>

1.3、animateColor

控制颜色动画，animate也可以实现这个效果，所以该属性目前已被废弃。

1.4、animateTransform

实现transform变换动画效果，与css3的transform变换类似。实现平移、旋转、缩放等效果。

使用语法：

<animateTransform attributeName="transform"  type="scale" 
 from="1.5" to="0" 
 begin="2s"  dur="3s" 
 repeatCount="indefinite"></animateTransform>

repeatCount：重复次数，设置为 indefinite 表示无限循环，一直执行。
type：添加 transform 变换类型。
eg：绘制一个半径为200的圆，4秒之后开始缩放，在2秒内从1.5缩小到0倍。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="200" style="stroke: none; fill: #0000ff;">
  <animateTransform attributeName="transform" begin="4s"  
   dur="2s" type="scale" from="1.5" to="0" 
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

1.5、animateMotion

可以定义动画路径，让SVG各个图形，沿着指定路径运动。

使用语法：

<animateMotion 
 path="M 0 0 L 320 320" 
begin="4s" dur="2s"></animateMotion>

path：定义路径，使用语法与《HTML5(八)——SVG 之 path 详解》path的d属性一致。
begin：延迟时间。
dur：动画执行时间。

eg：绘制一个半径为10的圆，延迟4秒从左上角运动的右下角。

<svg width="320" height="320">
 <circle cx="0" cy="0" r="10" style="stroke: none; fill: #0000ff;">
  <animateMotion 
   path="M 0 0 L 320 320" 
   begin="4s" dur="2s"
   ></animateMotion>
 </circle>
</svg>

实际制作动画的时候，动画太单一不酷，需要同时改变多个属性时，上边的四种元素可以互相组合，同类型的动画也能组合。以上这些元素虽然能够实现动画，但是无法动态地添加事件，所以接下来我们就看看 js 如何制作动画。

二、JavaScript 控制

上篇文章我们介绍js可以操作path，同样也可以操作SVG的内置形状元素，还可以给任意元素添加事件。

给SVG元素添加事件方法与普通元素一样，可以只用on+事件名或者addEventListener添加。

eg：使用SVG绘制地一条线，点击线条地时候改变 x1 ,实现旋转效果。

<svg width="800" height="800" id="svg">
    <line id="line" x1="100" y1="100" 
    x2="400" y2="300" 
    stroke="black" stroke-width="5"></line>  
  </svg>
<script>
 window.onload = function(){
  var line = document.getElementById("line")
  line.onclick = function(){
   let start = parseInt(line.getAttribute("x1")),
       end=400,dis = start-end
   requestAnimationFrame(next)
   let count = 0;
   function next(){
    count++
    let a = count/200,cur = Math.abs(start+ dis*a)
    line.setAttribute('x1',cur)
    if(count<200)requestAnimationFrame(next)
   }
  }
 }
</script>

js制作的SVG动画，主要利用 requestAnimationFrame 来实现一帧一帧的改变。

我们上述制作的 SVG 图形、动画等，运行在低版本IE中，发现SVG只有IE9以上才支持，低版本的并不能支持，为了兼容低版本浏览器，可以使用 VML ,VML需要添加额外东西，每个元素需要添加 v:元素，样式中还需要添加 behavier ，经常用于绘制地图。由于使用太麻烦，所以我们借助 Raphael.js 库。

三、Raphaël.js (拉斐尔)

Raphael.js是通过SVG/VML+js实现跨浏览器的矢量图形，在IE浏览器中使用VML，非IE浏览器使用SVG，类似于jquery，本质还是一个javascript库，使用简单，容易上手。

使用之前需要先引入Raphael.js库文件。cdn的地址为：https://cdn.bootcdn.net/ajax/libs/raphael/2.3.0/raphael.js

3.1、创建画布

Rapheal有两种创建画布的方式：

第一种：浏览器窗口上创建画布

创建语法：

var paper = Raphael(x,y,width,height)

x,y是画布左上角的坐标，此时画布的位置是绝对定位，有可能会与其他html元素重叠。width、height是画布的宽高。

第二种：在一个元素中创建画布

创建语法：

var paper = Raphael(element, width, height);

element是元素节点本身或ID width、height是画布的宽度和高度。

3.2、绘制图形

画布创建好之后，该对象自带SVG内置图形有矩形、圆形、椭圆形。他们的方法分别为：

paper.circle(cx, cy, r); // (cx , cy)圆心坐标 r 半径
paper.rect(x, y, width, height, r); // (x,y)左上角坐标 width宽度 height高度 r圆角半径(可选)
paper. ellipse(cx, cy, rx, ry); // (cx , cy)圆心坐标 rx水平半径 ry垂直半径

eg：在div中绘制一个圆形，一个椭圆、一个矩形。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 paper.circle(150,150,150)
 paper.rect(0,0,300,300)
 paper.ellipse(150,150,100,150)
</script>

运行结果如下：

除了简单图形之外，还可以绘制复杂图形，如三角形、心型，这时就使用path方法。

使用语法：paper.path(pathString)

pathString是由一个或多个命令组成，每个命令以字母开始，多个参数是由逗号分隔。

eg：绘制一个三角形。

let sj = paper.path("M 0,0 L100,100 L100,0 'Z'")

还可以绘制文字，如果需要换行，使用 \n 。

文字语法：paper.text(x,y,text)

(x,y)是文字坐标，text是要绘制的文字。

3.3、设置属性

图形绘制之后，我们通常会添加stroke、fill、stroke-width等让图形更美观，Raphael使用attr给图形设置属性。

使用语法：circle.attr({"属性名","属性值","属性名","属性值",...})

如果只有属性名没有属性值，则是获取属性，如果有属性值，则是设置属性。

注意：如果只设置一个属性时，可以省略‘{}’。如：rect.attr('fill','pink')

eg：给上边的矩形添加边框和背景色。

<div id="box"></div>
<script>
 var paper = Raphael("box",300,300)
 let rect = paper.rect(100,100,150,200)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
</script>

3.4、添加事件

RaphaelJS一般具有以下事件：
click、dblclick、drag、hide、hover、mousedown、mouseout、mouseup、mouseover等以及对应的解除事件，只要在前面加上“un”就可以了（unclick、undblclick）。

使用语法：

obj.click(function(){
 //需要操作的内容
})

3.5、添加动画

animate为指定图形添加动画并执行。

使用语法：

obj.animate({
 "属性名1":属性值1,
 "属性名2":属性值2,
  ...
},time,type)

属性名和属性值就根据你想要的动画类型加就ok。

time：动画所需时间。

type：指动画缓动类型。常用值有：

linear - 线性渐变
ease-in | easeIn | < - 由慢到快
ease-out | easeOut | > - 由快到慢
ease-in-out | easeInOut | <> - 由慢到快再到慢
back-in | backIn - 开始时回弹
back-out | backOut - 结束时回弹
elastic - 橡皮筋
bounce - 弹跳

eg：点击矩形，矩形缓缓变大。

<div id="box"></div>
<script>
 var paper = Raphael("box",800,500)
 let rect = paper.rect(100,100,150,100)
 rect.attr({'fill':'red','stroke':'blue','stroke-width':'10'})
 rect.attr('fill','pink')
 rect.click(function(){
  rect.animate({
   "width":300,
   "height":300
  },1000,"bounce")
 })
</script>

复制上边的代码，分别在各个浏览器和低版本IE浏览器运行，发现都可以正常运行。SVG的动画库挺多了，我们介绍了拉斐尔，有兴趣的小伙伴可以自行找找其他库。

目录总览

1、对象

在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

对象是由属性和方法组成的：

属性：事物的特征，在对象中用属性来表示（常用名词）
方法：事物的行为，在对象中用方法来表示（常用动词）

1.1、创建对象

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

利用字面量创建对象
利用 new Object创建对象
利用构造函数创建对象

①利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法

{ } 里面采取键值对的形式表示

键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

var star = {
  name : 'pink',
    age : 18,
    sex : '男',
    sayHi : function(){
        alert('大家好啊~');
    }
};
// 多个属性或者方法中间用逗号隔开
// 方法冒号后面跟的是一个匿名函数

对象的调用

对象里面的属性调用 : 对象.属性名，这个小点 . 就理解为“ 的 ”
对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

变量、属性、函数、方法总结

变量：单独声明赋值，单独存在
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征
函数：单独存在的，通过==“函数名()”==的方式就可以调用
方法：对象里面的函数称为方法，方法不需要声明，使用==“对象.方法名()”==的方式就可以调用，方法用来描述该对象的行为和功能。

②利用 new Object 创建对象

跟之前的 new Array() 原理一致：var 对象名 = new Object();

使用的格式：对象.属性 = 值

var obj = new Object(); //创建了一个空的对象
obj.name = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}

//1.我们是利用等号赋值的方法添加对象
//2.每个属性和方法之间用分号结束
console.log(obj.name);
console.log(obj['sex']);
obj.sayHi();

③利用构造函数创建对象

构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写
构造函数要和 new 一起使用才有意义

//构造函数的语法格式
function 构造函数名() {
    this.属性 = 值;
    this.方法 = function() {}
}
new 构造函数名();

//1. 构造函数名字首字母要大写
//2. 构造函数不需要return就可以返回结果
//3. 调用构造函数必须使用 new
//4. 我们只要new Star() 调用函数就创建了一个对象
//5. 我们的属性和方法前面必须加this
function Star(uname,age,sex) {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}
var ldh = new Star('刘德华',18,'男');
console.log(typeof ldh) // object对象，调用函数返回的是对象

console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
//把冰雨传给了sang

var zxy = new Star('张学友',19,'男');

构造函数名字首字母要大写
函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法。
构造函数中不需要 return 返回结果。
当我们创建对象的时候，必须用 new 来调用构造函数。

构造函数和对象

构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）
创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化

new关键字

new 在执行时会做四件事:

在内存中创建一个新的空对象。
让 this 指向这个新的对象。
执行构造函数里面的代码，给这个新对象添加属性和方法
返回这个新对象（所以构造函数里面不需要return）

1.2、遍历对象的属性

for...in 语句用于对数组或者对象的属性进行循环操作

语法如下

for(变量 in 对象名字){
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for(var k in obj) {
    console.log(k);		//这里的 k 是属性名
    console.log(obj[k]);//这里的 obj[k] 是属性值
}

var obj = {
    name: '秦sir',
    age: 18,
    sex: '男',
    fn:function() {};
};
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);

//for in 遍历我们的对象
//for (变量 in 对象){}
//我们使用for in 里面的变量 我们喜欢写k 或者key
for(var k in obj){
    console.log(k); // k 变量 输出得到的是属性名
    console.log(obj[k]); // obj[k] 得到的是属性值
}

2、内置对象

JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象
内置对象就是指 JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能
JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

2.1、查文档

学习一个内置对象的使用，只要学会其常用成员的使用即可，我们可以通过查文档学习，可以通过MDN/W3C来查询

MDN: https://developer.mozilla.org/zh-CN/

2.1.1、如何学习对象中的方法

查阅该方法的功能
查看里面参数的意义和类型
查看返回值的意义和类型
通过 demo 进行测试

3、Math对象

Math 对象不是构造函数，它具有数学常数和函数的属性和方法。跟数学相关的运算（求绝对值，取整、最大值等）可以使用 Math 中的成员。

// Math数学对象，不是一个构造函数，所以我们不需要new 来调用，而是直接使用里面的属性和方法即可
Math.PI		 			// 圆周率
Math.floor() 	 		// 向下取整
Math.ceil()             // 向上取整
Math.round()            // 四舍五入版 就近取整   注意 -3.5   结果是  -3 
Math.abs()		 		// 绝对值
Math.max()/Math.min()	// 求最大和最小值

注意：上面的方法必须带括号

console.log(Math.PI);  
console.log(Math.max(1,99,3)); // 99

练习：封装自己的数学对象

利用对象封装自己的数学对象，里面有PI 最大值和最小值

var myMath = {
  PI: 3.141592653,
    max: function() {
        var max = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] > max) {
                max = arguments[i];
            }
        }
        return max;
    },
    min: function() {
        var min = arguments[0];
        for (var i = 1; i < arguments.length; i++) {
            if (arguments[i] < min) {
                min = arguments[i];
            }
        }
        return min;
    }
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.min(1, 5, 9));

3.Math绝对值和三个取整方法

Math.abs() 取绝对值
三个取整方法：
Math.floor() : 向下取整
Math.ceil() : 向上取整
Matg.round() : 四舍五入，其他数字都是四舍五入，但是5特殊，它往大了取

//1.绝对值方法
console.log(Math.abs(1));  // 1
console.log(Math.abs(-1)); // 1
console.log(Math.abs('-1')); // 1 隐式转换，会把字符串 -1 转换为数字型
//2.三个取整方法
console.log(Math.floor(1.1)); // 1 向下取整，向最小的取值 floor-地板
console.log(Math.floor(1.9)); //1

console.log(Math.ceil(1.1)); //2 向上取整，向最大的取值 ceil-天花板
console.log(Math.ceil(1.9)); //2 

//四舍五入 其他数字都是四舍五入，但是5特殊，它往大了取

console.log(Math.round(1.1)); //1 四舍五入
console.log(Math.round(1.5)); //2
console.log(Math.round(1.9)); //2
console.log(Math.round(-1.1)); // -1
console.log(Math.round(-1.5)); // -1

4.随机数方法random()

random() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括第一个数，不包括第二个数

// 得到两个数之间的随机整数，并且包含这两个整数
function getRandom(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1,10));

1.随机点名

var arr = ['张三', '李四','王五','秦六']；
console.log(arr[getRandom(0,arr.length - 1)]);

2.猜数字游戏

function getRandom(min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1,10);
while(true) { //死循环 ，需要退出循环条件
     var num = prompt('请输入1~10之间的一个整数:');
     if(num > random) {
         alert('你猜大了');
     }else if (num < random) {
         alert('你猜小了');
     }else {
         alert('你猜中了');
         break; //退出整个循环
     }
}

4、Data()日期对象

Date 对象和 Math 对象不一样，他是一个构造函数，所以我们需要实例化后才能使用
Date 实例用来处理日期和时间

4.1、Date()方法的使用

4.1.1、获取当前时间必须实例化

var now = new Date();
console.log(now);

4.1.2、Date()构造函数的参数

如果括号里面有时间，就返回参数里面的时间。例如日期格式字符串为 ‘2019-5-1’，可以写成new Date('2019-5-1') 或者 new Date('2019/5/1')

如果Date()不写参数，就返回当前时间
如果Date()里面写参数，就返回括号里面输入的时间

// 1.如果没有参数，返回当前系统的当前时间
var now = new Date();
console.log(now);


// 2.参数常用的写法 数字型 2019,10,1  字符串型 '2019-10-1 8:8:8' 时分秒
// 如果Date()里面写参数，就返回括号里面输入的时间 
var data = new Date(2019,10,1);
console.log(data);  // 返回的是11月不是10月

var data2 = new Date('2019-10-1 8:8:8');
console.log(data2);

4.2、日期格式化

我们想要 2019-8-8 8:8:8 格式的日期，要怎么办？

需要获取日期指定的部分，所以我们要手动的得到这种格式

方法名	说明	代码
getFullYear()	获取当年	dObj.getFullYear()
getMonth()	获取当月(0-11)	dObj.getMonth()
getDate()	获取当天日期	dObj.getDate()
getDay()	获取星期几(周日0到周六6)	dObj.getDay()
getHours()	获取当前小时	dObj.getHours()
getMinutes()	获取当前小时	dObj.getMinutes()
getSeconds()	获取当前秒钟	dObj.gerSeconds()

示例：

var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年 2019
console.log(date.getMonth() + 1);  //返回的月份小一个月 记得月份 +1
console.log(date.getDate); //返回的是几号
console.log(date.getDay());  //周一返回1 周6返回六 周日返回0



// 写一个 2019年 5月 1日 星期三
var date = new Date(); 
var year =  date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
console.log('今天是' + year +'年' + month + '月' + dates +'日' );

// 封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

4.3、获取日期的总的毫秒形式

date.valueOf() ：得到现在时间距离1970.1.1总的毫秒数
date.getTime() ：得到现在时间距离1970.1.1总的毫秒数

// 获取Date总的毫秒数 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数
// 实例化Date对象
var date = new Date();

// 1 .通过 valueOf()  getTime() 用于获取对象的原始值
console.log(date.valueOf());  //得到现在时间距离1970.1.1总的毫秒数
console.log(date.getTime());

// 2.简单的写法
var date1 = +new Date();  // +new Date()返回的就是总的毫秒数，
console.log(date1);

// 3. HTML5中提供的方法 获得总的毫秒数 有兼容性问题
console.log(Date.now());

倒计时效果

示例：

function countDown(time) {
    var nowTime = +new Date(); //没有参数，返回的是当前时间总的毫秒数
    var inputTime = +new Date(time); // 有参数，返回的是用户输入时间的总毫秒数
    var times = (inputTime - nowTime) / 1000; //times就是剩余时间的总的秒数

    var d = parseInt(times / 60 / 60 / 24); //天数
    d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); //小时
    h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); //分
    m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); //秒
    s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2020-11-09 18:29:00'));
var date = new Date;
console.log(date); //现在时间

5、数组对象

5.1、数组对象的创建

创建数组对象的两种方式

字面量方式
new Array()

5.2、检测是否为数组

instanceof 运算符，可以判断一个对象是否属于某种类型
Array.isArray() 用于判断一个对象是否为数组，isArray() 是 HTML5 中提供的方法

var arr = [1, 23];
var obj = {};
console.log(arr instanceof Array); // true
console.log(obj instanceof Array); // false
console.log(Array.isArray(arr));   // true
console.log(Array.isArray(obj));   // false

5.3、添加删除数组元素

方法名	说明	返回值
push(参数1…)	末尾添加一个或多个元素，注意修改原数组	并返回新的长度
pop()	删除数组最后一个元素	返回它删除的元素的值
unshift(参数1…)	向数组的开头添加一个或更多元素，注意修改原数组	并返回新的长度
shift()	删除数组的第一个元素，数组长度减1，无参数，修改原数组	并返回第一个元素

示例：

// 1.push() 在我们数组的末尾，添加一个或者多个数组元素 push 推
var arr = [1, 2, 3];
arr.push(4, '秦晓');
console.log(arr);
console.log(arr.push(4, '秦晓'));
console.log(arr);
// push 完毕之后，返回结果是新数组的长度


// 2. unshift 在我们数组的开头 添加一个或者多个数组元素
arr.unshift('red');
console.log(arr);

// pop() 它可以删除数组的最后一个元素，一次只能删除一个元素
arr.pop(); //不加参数
// shift() 它剋删除数组的第一个元素,一次只能删除一个元素
arr.shift(); //不加参数

筛选数组

有一个包含工资的数组[1500,1200,2000,2100,1800],要求把数组中工资超过2000的删除，剩余的放到新数组里面

var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        newArr.push(arr[i]);
    }
}
console.log(newArr);

5.4、数组排序

方法名	说明	是否修改原数组
reverse()	颠倒数组中元素的顺序，无参数	该方法会改变原来的数组，返回新数组
sort()	对数组的元素进行排序	该方法会改变原来的数组，返回新数组

示例：

// 1.翻转数组
var arr = ['pink','red','blue'];
arr.reverse();
console.log(arr);

// 2.数组排序(冒泡排序)
var arr1 = [3,4,7,1];
arr1.sort();
console.log(arr1);

// 对于双位数
var arr = [1,64,9,61];
arr.sort(function(a,b) {
     return b - a;  //降序的排列
     return a - b; //升序
 	}
 )

5.5、数组索引

方法名	说明	返回值
indexOf()	数组中查找给定元素的第一个索引	如果存在返回索引号，如果不存在，则返回-1
lastIndexOf()	在数组的最后一个索引，从后向前索引	如果存在返回索引号，如果不存在，则返回-1

示例：

//返回数组元素索引号方法 indexOf(数组元素)  作用就是返回该数组元素的索引号
//它只发返回第一个满足条件的索引号
//如果找不到元素，则返回-1
var arr = ['red','green','blue','pink','blue'];
console.log(arr.indexOf('blue'));  // 2

console.log(arr.lastIndexOf('blue')); // 4

5.5.1、数组去重

分析：把旧数组里面不重复的元素选取出来放到新数组中，重复的元素只保留一个，放到新数组中去重。

核心算法：我们遍历旧数组，然后拿着旧数组元素去查询新数组，如果该元素在新数组里面没有出现过，我们就添加，否则不添加。

我们怎么知道该元素没有存在？利用新数组.indexOf(数组元素) 如果返回是 -1 就说明新数组里面没有改元素

// 封装一个去重的函数 unique 独一无二的
function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);

5.6、数组转化为字符串

方法名	说明	返回值
toString()	把数组转换成字符串，逗号分隔每一项	返回一个字符串
join(‘分隔符’)	方法用于把数组中的所有元素转换为一个字符串	返回一个字符串

示例：

// 1.toString() 将我们的数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2.join('分隔符')
var arr1 = ['green', 'blue', 'red'];
console.log(arr1.join()); // 不写默认用逗号分割
console.log(arr1.join('-')); //  green-blue-red
console.log(arr1.join('&')); // green&blue&red

5.7、其他方法

方法名	说明	返回值
concat()	连接两个或多个数组不影响原数组	返回一个新的数组
slice()	数组截取slice(begin,end)	返回被截取项目的新数组
splice()	数组删除splice(第几个开始要删除的个数)	返回被删除项目的新数组，这个会影响原数组

6、字符串对象

6.1、基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型：String、Number和 Boolean。

基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

我们看看下面代码有什么问题吗？

var str = 'andy';
console.log(str.length);

按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把基本数据类型包装为复杂数据类型，其执行过程如下：

// 1.生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2.赋值给我们声明的字符变量
str = temp;
// 3.销毁临时变量
temp = null;

6.2、字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变
// 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for(var i = 0; i < 10000;  i++){
    str += i;
}
console.log(str);
// 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

6.3、根据字符返回位置

字符串所有的方法，都不会修改字符串本身(字符串是不可变的)，操作完成会返回一个新的字符串

方法名	说明
indexOf(‘要查找的字符’，开始的位置)	返回指定内容在元字符串中的位置，如果找不到就返回-1，开始的位置是index索引号
lastIndexOf()	从后往前找，只找第一个匹配的

// 字符串对象  根据字符返回位置  str.indexOf('要查找的字符', [起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春')); //默认从0开始查找 ，结果为2
console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找，结果是8

6.3.1、返回字符位置

查找字符串 “abcoefoxyozzopp” 中所有o出现的位置以及次数

核心算法：先查找第一个o出现的位置
然后只要 indexOf返回的结果不是 -1 就继续往后查找
因为 indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找

var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);

6.4、根据位置返回字符

方法名	说明	使用
charAt(index)	返回指定位置的字符(index字符串的索引号)	str.charAt(0)
charCodeAt(index)	获取指定位置处字符的ASCII码(index索引号)	str.charCodeAt(0)
str[index]	获取指定位置处字符	HTML,IE8+支持和charAt()等效

返回字符位置

判断一个字符串 “abcoefoxyozzopp” 中出现次数最多的字符，并统计其次数

核心算法：利用 charAt() 遍历这个字符串
把每个字符都存储给对象，如果对象没有该属性，就为1，如果存在了就 +1
遍历对象，得到最大值和该字符

<script>
  // 有一个对象 来判断是否有该属性 对象['属性名']
    var o = {
        age: 18
    }
    if (o['sex']) {
        console.log('里面有该属性');

    } else {
        console.log('没有该属性');

    }

    //  判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
    // o.a = 1
    // o.b = 1
    // o.c = 1
    // o.o = 4
    // 核心算法：利用 charAt() 遍历这个字符串
    // 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
    // 遍历对象，得到最大值和该字符
    var str = 'abcoefoxyozzopp';
    var o = {};
    for (var i = 0; i < str.length; i++) {
        var chars = str.charAt(i); // chars 是 字符串的每一个字符
        if (o[chars]) { // o[chars] 得到的是属性值
            o[chars]++;
        } else {
            o[chars] = 1;
        }
    }
    console.log(o);
    // 2. 遍历对象
    var max = 0;
    var ch = '';
    for (var k in o) {
        // k 得到是 属性名
        // o[k] 得到的是属性值
        if (o[k] > max) {
            max = o[k];
            ch = k;
        }
    }
    console.log(max);
    console.log('最多的字符是' + ch);
</script>

6.5、字符串操作方法

方法名	说明
concat(str1,str2,str3…)	concat() 方法用于连接两个或对各字符串。拼接字符串
substr(start,length)	从 start 位置开始(索引号), length 取的个数。
slice(start,end)	从 start 位置开始，截取到 end 位置，end 取不到 (两个都是索引号)
substring(start,end)	从 start 位置开始，截取到 end 位置，end 取不到 (基本和 slice 相同，但是不接受负)

示例：

<script>
    // 1. concat('字符串1','字符串2'....)
    var str = 'andy';
    console.log(str.concat('red'));

    // 2. substr('截取的起始位置', '截取几个字符');
    var str1 = '改革春风吹满地';
    console.log(str1.substr(2, 2)); // 第一个2 是索引号的2   第二个2 是取几个字符
</script>

6.6、replace()方法

replace() 方法用于在字符串中用一些字符替换另一些字符

其使用格式：replace(被替换的字符,要替换为的字符串)

<script>
  // 1. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
    var str = 'andyandy';
    console.log(str.replace('a', 'b'));
    // 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
    var str1 = 'abcoefoxyozzopp';
    while (str1.indexOf('o') !== -1) {
        str1 = str1.replace('o', '*');
    }
    console.log(str1);
</script>

6.7、split()方法

split() 方法用于切分字符串，它可以将字符串切分为数组。在切分完毕之后，返回的是一个新数组。

例如下面代码：

var str = 'a,b,c,d';
console.log(str.split(','));
// 返回的是一个数组 ['a', 'b', 'c', 'd']

<script>
// 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
    var str2 = 'red, pink, blue';
    console.log(str2.split(','));
    var str3 = 'red&pink&blue';
    console.log(str3.split('&'));
</script>

6.8、大小写转换

toUpperCase() 转换大写
toLowerCase() 转换小写

7、简单类型于复杂类型

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型

string ，number，boolean，undefined，null

引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址（引用），因此叫做引用数据类型

通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等

7.1、堆和栈

堆栈空间分配区别：

栈（操作系统）：由操作系统自动分配释放存放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；

简单数据类型存放到栈里面

2，堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收。

复杂数据类型存放到堆里面

注意：JavaScript中没有堆栈的概念，通过堆栈的方式，可以让大家更容易理解代码的一些执行方式，便于将来学习其他语言。

7.2、简单类型的内存分配

值类型（简单数据类型）： string ，number，boolean，undefined，null
值类型变量的数据直接存放在变量（栈空间）中

引用类型（复杂数据类型）：通过 new 关键字创建的对象（系统对象、自定义对象），如 Object、Array、Date等
引用类型变量（栈空间）里存放的是地址，真正的对象实例存放在堆空间中

<script>
    // 简单数据类型 null  返回的是一个空的对象  object 
    var timer = null;
    console.log(typeof timer);
    // 如果有个变量我们以后打算存储为对象，暂时没想好放啥， 这个时候就给 null 
    // 1. 简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
    // 2. 复杂数据类型 首先在栈里面存放地址 十六进制表示  然后这个地址指向堆里面的数据
</script>

7.3、简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。

<script>
   // 简单数据类型传参
    function fn(a) {
        a++;
        console.log(a);
    }
    var x = 10;
    fn(x);
    console.log(x);
</script>

7.4、复杂类型传参

函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

在线咨询

上一篇：9个视觉感出彩的网页首屏设计「心」作者：Maxim Nilov
下一篇：HTML培训：如何在HTML中更改文本大小

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

2021年最新H5网页开发前端课程目录介绍

一、SVG 的 animation

二、JavaScript 控制

三、Raphaël.js (拉斐尔)

目录总览

1、对象

1.1、创建对象

①利用字面量创建对象

对象的调用

变量、属性、函数、方法总结

②利用 new Object 创建对象

③利用构造函数创建对象

构造函数和对象

new关键字

1.2、遍历对象的属性

2、内置对象

2.1、查文档

2.1.1、如何学习对象中的方法

3、Math对象

3.Math绝对值和三个取整方法

4.随机数方法random()

4、Data()日期对象

4.1、Date()方法的使用

4.1.1、获取当前时间必须实例化

4.1.2、Date()构造函数的参数

4.2、日期格式化

4.3、获取日期的总的毫秒形式

倒计时效果

5、数组对象

5.1、数组对象的创建

5.2、检测是否为数组

5.3、添加删除数组元素

筛选数组

5.4、数组排序

5.5、数组索引

5.5.1、数组去重

5.6、数组转化为字符串

5.7、其他方法

6、字符串对象

6.1、基本包装类型

6.2、字符串的不可变

6.3、根据字符返回位置

6.3.1、返回字符位置

6.4、根据位置返回字符

返回字符位置

6.5、字符串操作方法

6.6、replace()方法

6.7、split()方法

6.8、大小写转换

7、简单类型于复杂类型

7.1、堆和栈

7.2、简单类型的内存分配

7.3、简单类型传参

7.4、复杂类型传参

您的项目需求