html5高级

Html5高级

项目回顾

Day 01

第三阶段知识体系：

(1)AJAX异步请求

数据库、PHP、HTTP、原生AJAX、jQuery中的AJAX

(2)HTML5高级特性

九大新特性

(3)Boostrap框架

五部分

1.前端开发常用的工具软件

(1)轻量级(>3MB)：小巧快速，但功能简单

Editplus、Notepad++、VIM

(2)中量级(xxMB)：功能相对丰富

SublimeText

(3)重量级(xxxMB)：启动速度慢，但功能丰富

IDE(Integrated Development Environment)

IDE = 编辑器(代码提示) + 调试器 + 文件管理 + 项目管理 + 文件转换程序

Dreamweaver

ApatanaStudio(基于Eclipse)

WebStorm(基于IntelJ IDEA)

常用快捷键：

(1)Ctrl+Alt+↓ 快速复制当前行

(2)Alt+↑/↓ 移动当前行

(3)Ctrl+D 删除当前行

(4)Ctrl+/ 快速（取消）注释当前行

(5)Ctrl+Alt+L 格式化当前文档

WebStorm的多行编辑模式：

开始多行编辑：按住Alt，点击鼠标左键

退出多行编辑：ESC或点击鼠标左键

今日目标：

1)HTML5高级新特性

面试题：HTML5中添加了哪些新的标签？废弃了哪些标签？

面试题：HTML5中添加了哪些新的标签属性？废弃了哪些标签属性？

2.HTML5高级新特性——九大新特性

1)表单新特性(表单2.0)

2)视频和音频

3)Canvas绘图

4)SVG绘图

5)地理定位

6)拖放API

7)WebWorker

8)WebStorage

9)WebSocket

提示：上述特性彼此没有关联！学习过程中有些凌乱！

normalize.css：用于统一浏览器中标签的默认样式值——CSS Reset（重置）

3.HTML5新特性之表单新特性——新的input type

已经学过的input type：

text、password、radio、checkbox、button、reset、submit、image、 file、hidden

HTML5新添的input type：

(1)number：显示一个数字输入框

(2)email：显示一个邮件地址输入框，提交时会进行格式验证，中间一个@符号，前后至少一个字符

(3)url：显示一个URL地址输入框，提交时会进行格式验证，冒号前存在任意字符

(4)tel：显示一个电话号码输入框，没有格式验证，仅在手机浏览器中弹出数字输入键盘

(5)search：显示搜索输入框，PC中Chrome下有X号；手机中弹出键盘右下角按钮显示文字“搜索”

(6)range：显示一个范围选择滑块，让用户在特定范围内选择一个整数值

练习：实现一个调色板，修改某个滑块的位置，可以改变背景颜色

(7)color：显示一个颜色选择窗口，浏览器会调用操作系统提供颜色选择窗口，提交的是颜色值

(8)date：显示一个日期选择窗口，浏览器弹出一个日期选择窗口，不是DIV，不能定制样式

(9)month：显示一个月份选择器

(10)week：显示一个“星期/周”选择器

4.HTML5新特性之表单新特性——新的表单元素

HTML5之前已有的表单元素——可与用户交互并提交：

input、select/option、textarea、button

HTML5中新增的表单元素——不能与用户交互，不能提交，仅用于信息展示：

(1)datalist：数据列表，为某个输入框提供输入建议

</datalist>

(2)progress：进度条，显示前进的进度提示条

练习：使用定时器，修改progress的进度，实现不断前进的效果

(3)meter：度量衡，刻度尺，使用不同的颜色标示出数据所处的区间

最优值在上下限：黄 - 绿 - 黄

最优值小于下限：绿 - 黄 - 红

最优值大于上限：红 - 黄 - 绿

(4)output：输出值，用于表示数据的计算结果，是一个语义标签

5.HTML5新特性之表单新特性——表单元素新的属性——重点

HTML5之前表单标签的常用属性：

name、value、readonly、disabled、checked、for

HTML5中表单标签的新属性：

(1)placeholder：占位消息，为输入框中添加提示消息，注意：占位消息仅用作提示，与value属性根本不同，不能被提交

(2)autofocus：自动获得焦点，标识了该属性的输入框会自动的获得输入焦点

(3)multiple：多项，用于email和file输入框，允许其中输入多个值，用逗号分隔

(4)autocomplete：自动完成，可取值on/off，指定输入域是否记录上一次提交的输入，下次输入时给予提示

(5)form：表单，指定当前输入域所属的表单的ID，可以将声明了form的输入框放到表单元素的外面，仍然可以一同被提交

=========与输入验证相关新属性========

(6)required：必填项，若没有输入则无法提交

<input required> 提交时才会验证

(7)min：最小值，若输入值小于该值则无法提交

(8)max：最大值，若输入值大于该值则无法提交

(9)minlength：最小长度，若输入的字符串长度小于该值无法提交，此属性不是H5标准属性，FF不支持，Chrome支持

(10)maxlength：最大长度，若输入的字符串长度大于该值无法提交

(11)pattern：正则表达式样式，若输入的字符串不符合指定的正则表达式则无法提交

归纳总结练习——表单新特性：

(1)新的input type——10个

number、email、url、tel、search、range、color、date、month、week

(2)新的表单元素——4个

datalist、progress、meter、output

(3)表单元素新的属性——11个

placeholder、autofocus、autocomplete、multiple、form

----------------------

required、min、max、minlength、maxlength、pattern

提示：上述红色的特性可能在提交表单时弹出错误提示。

6.如何自定义表单错误提示消息

HTML5为每个表单输入域添加了一个属性：validity（有效性）

ValidityState {

valid : true

badInput : false 无效的输入，number

customError : false 自定义错误，setCustomValidity('')参数字符串有内容，curstomError就变为true；参数值是空字符串，customError变为false

patternMismatch : false 样式不匹配，pattern

rangeOverflow : false 范围上溢出，max

rangeUnderflow : false 范围下溢出，min

stepMismatch : false 步长不匹配，step

tooLong : false 字符串太长，maxlength

tooShort : false 字符串太短，minlength

typeMismatch : false 类型不匹配，email/url

valueMissing : false 值缺失，required

}

该对象中的属性值随着输入域中值的改变而立即改变，不会等到表单提交。其中只有valid为true时，表示输入域中的值是有效的，才能被提交；只要其它的某个属性值为true，valid属性值就会变为false。

注意：只要自定义了错误消息，浏览器默认的错误消息就不再显示。

晚间练习：

在输入域失去焦点时，使用其validity属性的各个布尔类型的值，验证用户的输入是否合法。下面的效果图可以放大。

*******************************************************************************

Day 02

复习：

第三阶段课程

(1)AJAX：数据库、PHP、HTTP、AJAX、jQuery-AJAX

(2)HTML5：

表单新特性

视频和音频

Canvas绘图

SVG绘图

地理定位

拖放API

WebWorker

WebStorage

WebSocket

(3)Boostrap框架

表单新特性：

(1)新的input type——10个

number、email、url、tel、search、range、color、date、month、week

(2)新的表单元素——4个

datalist、progress、meter、output

(3)表单元素新的属性——11个——重点

placeholder、autofocus、autocomplete、multiple、form

--------------------------------------------

required、min、max、minlength、maxlength、pattern

修改错误提示消息的弹出时间、修改错误提示的内容

input.validity {

valid : true,

customError: false, //setCustomValidity('XX')

valueMissing: false,

rangeOverflow: false,

rangeUnderflow: false,

tooLong: false,

tooShort: false,

typeMismatch: false,

.....

}

作业回顾

今日目标：

(1)视频和音频 —— 小重点

(2)Canvas绘图 —— 最重点

1.HTML5取代Flash体现在哪些方面

Flash-绘图、动画、游戏 —— HTML5 - Canvas & SVG

Flash-视频、音频 —— HTML5 - Video & Audio

Flash-客户端存储 —— HTML5 - WebStorage

2.HTML5高级新特性——视频播放

<video src=""></video>在HTML5中专用于播放视频。

VIDEO标签默认是一个300*150的inline-block；

Video标签/对象常用的成员：

成员属性：

autoplay: false，是否自动播放

controls: false，是否显示播放控件

currentTime: 1.4901，当前播放到的时间

duration: 60.1012，总时长

defaultMuted: false, 默认是否静音

loop: false，是否自动循环播放

muted: false，当前是否静音

paused: false，当前是否处于暂停状态

poster：''，仅在影片开始播放之前显示的“电影海报”

volumn：1, 当前播放音量

preload: 'auto'，如何预加载影片内容，可取值有三个：

auto：自动预加载影片元数据，并缓冲一定的长度

metadata：仅预加载影片元数据（宽高、时长）

none：不预加载影片的任何数据

成员方法：

play() 让影片开始播放，paused属性变为false

pause() 让影片开始暂停，paused属性变为true

成员事件：

onplay：fn 当调用了v.play()方法时触发

onpause: fn 当调用了v.pause()方法时触发

练习：禁用Video的默认播放控件，自定义播放和暂停按钮，悬停在影片的正上方，点击则播放，再点击则暂停——仿优酷的效果

<div>

</div>

练习：不使用Video的海报(poster)属性，自定义一个广告图片，当影片播放时候，广告要隐藏；影片暂停时，显示广告。

v.onplay = function(){}

v.onpause = function(){}

3.HTML5高级新特性——音频播放

<audio src=""></audio>在HTML5中专用于播放声音。

AUDIO标签默认是一个300*30的inline-block；若不显示播放控件则display为none。

AUDIO标签/对象常用的成员：

成员属性：

autoplay: false，是否自动播放

controls: false，是否显示播放控件

currentTime: 1.4901，当前播放到的时间

duration: 60.1012，总时长

defaultMuted: false, 默认是否静音

loop: false，是否自动循环播放

muted: false，当前是否静音

paused: false，当前是否处于暂停状态

volumn：1, 当前播放音量

preload: 'auto'，如何预加载音频内容，可取值有三个：

auto：自动预加载音频元数据，并缓冲一定的长度

metadata：仅预加载音频元数据（宽高、时长）

none：不预加载音频的任何数据

成员方法：

play() 让音频开始播放，paused属性变为false

pause() 让音频开始暂停，paused属性变为true

成员事件：

onplay：fn 当调用了v.play()方法时触发

onpause: fn 当调用了v.pause()方法时触发

练习：根据复选框是否勾选，暂停/播放背景音乐 14:27

说明：

(1)早期的IE浏览器中，可以使用body的bgsound属性控制背景，但此属性不是HTML标准属性，且无法精确的控制播放和暂停：

(2)iOS系统自带的Safari浏览器目前不支持AUDIO标签，只能使用隐藏的VIDEO标签来代替。

4.前端技术中可以实现绘图的技术

(1)WebGL技术 —— 当前还没有纳入HTML5标准

(2)Canvas技术 —— 在HTML5标准中提出的技术

(3)SVG技术 —— 早就存在的技术，纳入了HTML5标准

5.Canvas绘图技术 —— 比较难

提示：有两个难点

(1)属性/方法比较多，不好记忆

(2)小学数学计算(坐标轴，坐标点的位置计算)

Canvas：画布，在HTML5中默认是一个300*150的inline-block。设定画布的宽和高不能使用CSS Style，只能使用width和height属性。

您的浏览器不支持Canvas标签！

</canvas>

画布本身不能绘制内容，只用于承载被绘制的内容——使用画笔来往画布绘制内容。获得画笔使用原生JS：

var ctx = canvas.getContext('2d'); //绘图上下文对象

画布上所有内容的绘制都要依靠“绘图上下文”对象。

Context对象常用的属性和方法：

常用属性：

fillStyle:"#000000" 填充样式

strokeStyle:"#000000" 描边/轮廓样式

font:"10px sans-serif"

textAlign:"start"

textBaseline:"alphabetic" 文本基线

globalAlpha:1 全局不透明度

lineWidth:1 线/描边的宽度

shadowOffsetX:0 阴影在X轴上的偏移量

shadowOffsetY:0

shadowColor:"rgba(0, 0, 0, 0)"

shadowBlur:0 阴影模糊半径

常用方法：

arc() 绘制一个拱形/圆形

beginPath() 开始绘制一条路径——PS:钢笔工具

closePath() 闭合一条路径——PS

fill() 对路径进行填充

stroke() 对路径进行描边

moveTo() 移动到某一点

lineTo() 到另一个点绘制一条直线

fillRect() 填充一个矩形

strokeRect() 描边一个矩形

clearRect() 清空一个矩形范围内所有内容

fillText() 填充一个字符串

strokeText() 描边一个字符串

drawImage() 绘制图像

Content Context

6.使用绘图上下文——绘制矩形(rectangle)

提示：矩形的定位点在自己的左上角

ctx.fillStyle = '#000'/渐变对象填充样式

ctx.strokeStyle="#000"/渐变对象描边样式

ctx.lineWidth = 2; 描边的宽度

ctx.fillRect(x, y, w, h) 填充一个矩形

ctx.strokeRect(x,y,w,h) 描边一个矩形

ctx.clearRect(x,y,w,h) 清除一个矩形范围内的内容

创建一个线性渐变对象：

var g = ctx.createLinearGradient(x1,y1, x2, y2);

g.addColorStop(offset1, color1);

g.addColorStop(offset2, color2);

练习1：画布500*400，左上角填充一个红色的矩形100*80；右上角描边一个绿色的矩形100*80；描边+填充一个矩形100*80；右下角描边+填充另一个颜色的矩形100*80；正中央描边+填充与右下角完全一样的矩形。

练习2：绘制如下的图形

练习3：绘制一个可以在画布上左右晃动的矩形——最基础的动画模型

练习4：绘制一个上下晃动的矩形

练习5：练习一个斜向右下角30度晃动的矩形

7.使用绘图上下文——绘制文本(text)

提示：文本的定位点在整个字符串的文本基线的最左边

ctx.textBaseline = 'alphabetic'; //文本基线，可取值为top/middle/alphabetic/bottom

ctx.font = "10px sans-serif";

ctx.fillText( txt, x, y )

ctx.strokeText( txt, x, y )

ctx.measureText( txt ).width //测量文本的宽度

课后练习：

(1)使用视频做元素的背景

提示：Video自动播放、循环播放、静音，绝对定位到目标元素下面，z-index为负值即可

(2)假设使用AJAX从服务器端获取到如下的数据：

[

{"label": "部门1", "value":300},

{"label": "部门2", "value":500},

{"label": "部门3", "value":150},

{"label": "部门4", "value":400},

{"label": "部门5", "value":600},

{"label": "部门6", "value":250}

]

根据这样的数据，绘制出如下图所示的统计图：

*****************************************************************************************************

Day 03

复习：

HTML5新特性

(1)表单新特性

新的input type 10

新的标签 4

标签的新属性 11

(2)视频和音频

video audio

(3)Canvas绘图

(4)SVG绘图

(5)地理定位

(6)拖放API

(7)WebWorker

(8)WebStorage

(9)WebSocket

使用Canvas绘图——JS绘图

c1.width = 500;

c1.height = 400;

提示：Canvas的尺寸不能使用CSS来设置

var ctx = c1.getContext('2d');

常用属性：

ctx.fillStyle = '#f00'/gradient;

ctx.strokeStyle = '#f00'/gradient;

ctx.lineWidth = 1;

ctx.font = '10px sanse-sarfi';

ctx.textBaseline = 'alphabetic';

ctx.shadowBlur = '';

常用方法：

绘制矩形

ctx.fillRect()

ctx.strokeRect()

ctx.clearRect()

绘制文本

ctx.fillText()

ctx.strokeText()

ctx.measureText(txt).width

绘制路径

绘制图像

今日目标：

(1)绘制路径 —— 麻烦

(2)绘制图像 —— 抽象

(3)Chart.js —— 掌握

1.使用Canvas进行绘图——绘制路径

路径：Path，类似于Photoshop中的钢笔工具，可以绘制直线、各种曲线；但路径本身是不可见的，有三种用途：

(1)创建选区(clip)，对画布内容进行裁剪

(2)进行描边(stroke)，绘制任意形状的折线

(3)进行填充(fill)，填充出任意形状的图形

相关函数：

ctx.beginPath() 开始一条新的路径

ctx.arc() 绘制一条圆形/椭圆/拱形路径

ctx.moveTo(x,y) 移动到指定点

ctx.lineTo(x,y) 从上一点到指定点绘制直线

ctx.busierCurve() 绘制贝塞尔曲线

ctx.closePath() 闭合路径

---------------------------------

ctx.clip() 基于当前路径进行裁切

ctx.stroke() 基于当前路径进行描边

ctx.fill() 基于当前路径进行填充

练习：

(1)使用路径绘制一个坐标轴

(2)使用定时器配合路径实现一个圆环状进度条

(3)创建两个函数，openMouth()和closeMouth()，分别绘制如下的两幅图形

2.使用Canvas绘图——绘制图像

提示：图像的定位点在自己的左上角

ctx.drawImage( img, x, y ) //原始大小绘制

ctx.drawImage( img, x, y, w, h ) //使用指定的宽高绘制图像——可能进行图像大小缩放

注意：绘制图像时，必须等待图片异步加载完成

var img = new Image();

img.src = "xx.png"; //向服务器异步请求图片

img.onload = function(){ //图片加载完成

ctx.drawImage( img, x, y )

}

练习：

(1)在画布的左上角、右上角、左下角、右下角绘制小星星；正中央绘制一个2倍大小的星星

(2)在画布上随机绘制大大小小随机出现的20个星星

(3)在画布上绘制一个从左上角到右下角移动的小星星

(4)在画布上原地旋转的小星星

图像的旋转问题：

(1)Canvas中的旋转不是画布旋转！而是“绘图上下文（画笔）”旋转。

ctx.rotate(deg)

(2)旋转必须有一个轴点——默认是坐标轴的原点；若想以某个固定的点旋转，就必须平移画布的坐标原点：

ctx.translate(x, y) //指定新的坐标轴原点

练习(比较难)1：绘制四个小飞机，各在一个角落以自己为轴点原地旋转

提示：绘制每个小飞机都要平移一次坐标轴原点，平移后再恢复到原来的位置供下一次使用。

练习(比较好玩)2：绘制一个可以随着鼠标移动的飞机

3.总结：Canvas绘图技术相关属性和方法——重点 17:18

ctx.fillStyle = 颜色/渐变色/样式;

ctx.strokeStyle =颜色/渐变色/样式;

ctx.font = "10px sanse-sarif";

ctx.textBaseline = '';

ctx.lineWidth = 1;

-------------------------------

(1)绘制矩形

ctx.fillRect() ctx.strokeRect() ctx.clearRect()

(2)绘制文本

ctx.fillText() ctx.strokeText() ctx.measureText()

(3)绘制路径

ctx.beginPath()

ctx.moveTo() ctx.lineTo() ctx.arc() ctx.rect()

ctx.stroke() ctx.fill() ctx.clip()

(4)绘制图像

ctx.drawImage(img,x,y,[w],[h])

ctx.rotate( deg )

ctx.translate( x, y )

4.基于Canvas的图表绘制框架/工具库

(1)Chart.js —— 免费开源，有九类图表可供使用

(2)Echart.js —— 免费的，百度提供，中文手册易上手

(3)FusionCharts.js —— 收费的，功能强大

5.第三方图表绘制工具——Chart.js的使用

(1)寻找官网：http://www.chartjs.org

(2)看官网介绍：

Simple yet flexible JavaScript charting for developers

(3)看官网提供的使用文档(API Document)

http://www.chartjs.org/docs/

(4)根据官网上的实例编写代码：

new Chart(c2, {

type: 'bar', //图表类型

data: { }, //图表数据

options: { } //可选参数

});

</script>

课后练习：

1) 使用Canvas绘制一个随机改变的验证码图片——注意：真正项目中验证码图片都是由后台程序，如PHP生成的，此例子仅仅是为了练习Canvas的使用。

var str = 'ABCDEFGHJKLMNPQRSTWXY3456789';

var char = str[ 0~字符串长度间的随机数 ];

要求：

画布背景颜色随机(浅色) ctx.fillRect()

文字内容随机、大小随机，颜色随机(深色)、旋转角度随机。

5条随机干扰线（每个颜色随机深色），处于文字上方。

100个杂色点（半径为1为圆），处于文字上方。

2.使用Canvas仿写网易云音乐的播放界面

点击播放按钮，碟片开始旋转，背景音乐开始播放；

再次点击播放按钮，碟片停止旋转，背景音乐停止播放。

*****************************************************************************************************Day 04

复习：

HTML5新特性

(1)表单新特性 —— 重点

新的input type、新标签、标签的新属性

(2)视频和音频 —— 重点

video、audio

(3)Canvas绘图 —— 最重点

绘制矩形、文本、路径(裁剪/描边/填充)、图像

(4)SVG绘图 —— 最重点

(5)地理定位

(6)拖放API —— 次重点

(7)WebWorker —— 次重点

(8)WebStorage —— 重点

(9)WebSocket —— 次重点

Canvas绘图使用方法：

var ctx = c2.getContext('2d');

ctx.fillStyle = 颜色/渐变/样式;

ctx.strokeStyle =颜色/渐变/样式;

ctx.lineWidth = 1;

ctx.font = '10px sans-serif';

ctx.textBaseline = 'alphabetic';

ctx.showdowXxx =

---------------------------

ctx.fillRect() ctx.strokeRect() ctx.clearRect()

ctx.fillText() ctx.strokeText() ctx.measureText()

ctx.beginPath()

ctx.moveTo() ctx.lineTo() ctx.arc()

ctx.closePath

ctx.clip() ctx.fill() ctx.stroke()

ctx.drawImage()

ctx.rotate() ctx.translate()

1.补充知识点：

若Canvas绘图中需要绘制多张图片，必须等待所有图片加载完成才能开始绘制；而每张图片的加载都是异步请求，彼此没有先后顺序，哪一张先加载完成完全无法预测。

var progress = 0; //全局加载进度

var img = new Image();

img.src = 'xx.jpg';

img.onload = function(){

progress += 10; //该图片权重

if(progress===100){

startDraw();

}

2.补充知识点：如何为Canvas中的某个图形/图像添加事件监听

HTML中，只有标签/元素才能添加事件监听。

Canvas绘图技术，只有一个标签——Canvas。

为某个部分中的图形/图像添加事件监听，只能委托给Canvas，获取事件发生的坐标，是否处于目标图像/图形范围内。

结论：为Canvas的某个图形/图像添加事件监听非常麻烦！

今日目标：

(1)SVG绘图 —— 重点

(2)Two.js第三方绘图工具库

1.SVG绘图概述

矢量图： Flash/AI，每个线条/色块有独立的颜色，可以无限缩放，不善于描述颜色细节。—— SVG

位图： PS 每个点都是一个独立的颜色，善于表现丰富的颜色细节，放大后会失真。—— Canvas

SVG：Scalable Vector Graphics，可缩放的矢量图

SVG和Canvas的比较

SVG	Canvas
绘制的是矢量图	绘制的是位图
每个图形/图像都是独立的标签	只有画布是标签
容易为每个图形添加事件监听	不能为每个图形添加独立的事件监听
可以无限缩放，适合地图	不能无限放大，适合表现颜色细节，例如游戏

2.SVG的使用方法

SVG标准诞生于2001年，远早于HTML5，后来纳入H5标准，去除了一些原有的特性。

SVG图形的使用方法

(1)HTML5之前：

把SVG标签写在独立的XML文档中；

在HTML文档中使用IMG、IFRAME、EMBED、OBJECT等标签引入svg文件

(2)HTML5之后(SVG标签直接纳入H5标签库)：

可以直接在HTML文档中使用SVG标签——HTML解释器已经可以直接解析SVG标签了。

3.使用SVG绘图——绘制矩形

注意：SVG图形的属性可以使用HTML标签属性来声明，也可以使用类似CSS的形式来声明——SVG标签专用样式；但这两种方式本质不一样。

可用属性：

width 矩形的宽

height 矩形的高

x 定位点的X坐标

y 定位点的Y坐标

fill 填充颜色

fill-opacity 填充颜色透明度

stroke 描边颜色

stroke-width 描边宽度

提示：上述属性不属于HTMLDOM范畴，不能直接rect.x读写。但可以使用核心DOM的setAttribute()方法来操作。

练习：

(1)点击一个矩形，它就隐藏

(2)一个矩形，从左向右移动

(3)随机生成20个大大小小的矩形

结论：使用JS创建新SVG元素有两种方法：

1)svg.innerHTML = '<rect></rect>';

2)document.createElementNS('http://www.w3.org/2000/svg', 'rect');

4.使用SVG绘图——绘制圆形

可用属性：

r 半径

cx 圆心的X坐标

cy 圆心的Y坐标

fill 填充颜色，默认为#000

fill-opacity 填充颜色透明度

stroke 描边颜色，默认为transparent

stroke-width 描边宽度

练习：

(1)使用HTML在SVG四个角各创建一个圆形

(2)使用JS创建20个随机大小、位置、颜色随机的圆形，点击某一个变大变淡，直至消失，从DOM上删除它

(3)点击SVG的某处，生成一个圆形，变大变大直至消失

5.使用SVG绘图——绘制椭圆

可用属性：

rx 横向半径

ry 纵向半径

cx 圆心的X坐标

cy 圆心的Y坐标

fill 填充颜色，默认为#000

fill-opacity 填充颜色透明度

stroke 描边颜色，默认为transparent

stroke-width 描边宽度

6.使用SVG绘图——绘制直线

可用属性：

x1 起点的横坐标

y1 起点的纵坐标

x2 终点的横坐标

y2 终点的纵坐标

stroke 描边颜色，默认为transparent，必须进行修改

stroke-width 描边宽度

练习：使用line元素实现下述小图标

提示：可以使用“元素组”<g></g>把多个元素包含起来，这样每个组员可以共享<g>元素声明的属性。 16:21

7.使用SVG绘图——绘制折线

可用属性：

points 折线上的点，值形如："0,0 10,0 50,100 ..."

fill 填充颜色，默认为#000

fill-opacity 填充颜色透明度，必须设置为0，否则会自动填充

stroke 描边颜色，默认为transparent，必须设置

stroke-width 描边宽度

练习：根据下列数据，绘制折线图，鼠标悬停时，线条的颜色改变

var data = [ [ 260, 180, 280, 150, 270 ], [130,180,220,210, 260] ];

8.使用SVG绘图——绘制多边形

可用属性：

points 多边形上的点，值形如："0,0 10,0 50,100 ..."

fill 填充颜色，默认为#000

fill-opacity 填充颜色透明度

stroke 描边颜色，默认为transparent

stroke-width 描边宽度

练习：使用polygon绘制下述图标

提示：真正项目中，如果需要这样的SVG图标，可以使用AI进行手绘，再使用插件导出为svg文件即可。

9.使用SVG绘图——绘制文本

可用属性：

font-size

font-family

fill 填充颜色，默认为#000

fill-opacity 填充颜色透明度

stroke 描边颜色，默认为transparent

stroke-width 描边宽度

10.使用SVG绘图——绘制图像

提示：若绘制了位图在SVG上，这个SVG图放大也会产生失真。

可用属性：

xlink:href 指定图片的URL

width 图片的宽，默认为0，不显示

height 图片的高，默认为0，不显示

矩形、圆形、椭圆、直线、折线、多边形、文本、图像

11.在绘制图形时使用渐变色

渐变对象是SVG中的特效对象——特效对象都必须定义在<defs></defs>标签内：

</linearGradient>

</defs>

</svg>

课后练习：

1) 用折线绘制五角星

2) 假设前端页面获取到后台返回了如下的JSON数据：

'[{"label":"HTML",value:3}, {"label":"CSS",value:5},....]'

根据这段JSON字符串，绘制出如下的统计图，要求每个柱在鼠标悬停时都会加粗显示边框：

3)提前自学 Two.js工具的使用，理解其作用，仿写官方示例代码，学会使用方法，实现如下效果——月亮绕着地球转，地球绕着太阳转：

*****************************************************************************************************

Day 05

复习：

HTML5新特性

(1)表单新特性

(2)视频和音频

(3)Canvas绘图

(4)SVG绘图

(5)地理定位

(6)拖放API

(7)WebWorker

(8)WebStorage

(9)WebSocket

SVG绘图：

方法1： 1.svg <img src="1.svg">

方法2： <body><svg></svg></body>

绘制矩形：

绘制圆形：

绘制椭圆：

绘制直线：

绘制折线：

绘制多边形：

绘制文本：

绘制图像：

使用渐变：

<svg>

<defs>

</linearGradient>

</defs>

</svg>

今日目标：

(1)补充：SVG中使用滤镜

(2)Two.js第三方工具

(3)地理定位

(4)拖放API —— 比较重要

1.SVG补充知识点

在SVG中使用滤镜(filter)——对图像图像进行像素化处理。使用方法：

<defs>

</feGaussianBlur>

</filter>

</defs>

2.三种绘图技术

(1)WebGL —— 3D渲染

(2)Canvas —— 2D动画游戏

(3)SVG —— 矢量图无限缩放

上述三个技术都可以用于绘制统计图——线、柱、圆...。

各自的使用方法不同，增加学习和使用难度。

two.js 2D绘图函数库

three.js 3D绘图函数库

3.第三方绘图工具库——Two.js

官网：https://two.js.org/

官方介绍：

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same API to draw in multiple contexts: svg, canvas, and webgl.

一个2D绘图函数库，可以使用完全一样的API实现在不同的环境(svg/canvas/webgl)下绘制图形

使用方法：

var two = new Two({}).appendTo(container);

two.makeCircle(.....);

two.makeRectangle(....);

//two.update();

//two.play();

</script>

4.HTML5新特性——地理定位

window.navigator.geolocation：获取当前浏览器所在的地理位置，如

经度 longitude

纬度 latitude

海拔 altitude

速度 speed

浏览器如何定位：

(1)手机浏览器：使用内置GPS模块或通过信号基站

(2)PC浏览器：使用IP地址反向解析出对应的地址

浏览器地理定位涉及到个人隐私，所以浏览器都会询问用户，是否给予某个网页读取的权限。

navigator.geolocation {

getCurrentPosition: fn, //一次性的获取定位信息

watchPosition: fn, //周期性的监视定位信息

clearWatch: fn //清除定位监视器

}

使用方法：

navigator.geolocation.getCurrentPosition(

function(pos){ //获取成功

console.log(pos.coords.longtude); 经度

console.log(pos.coords.latitude); 纬度

console.log(pos.coords.altitue); 海拔

console.log(pos.coords.speed); 速度

function(err){ //获取失败

console.log(err.code);

console.log(err.message);

}

);

5.扩展知识点：如何在网页中使用百度地图

(1)注册一个百度开发者账号

http://lbsyun.baidu.com/

(2)登录百度账号

(3)查看使用JS调用百度地图说明文档：

http://lbsyun.baidu.com/index.php?title=jspopular

(4)申请使用密钥

(5)创建HTML页面，调用百度地图API

查看使用手册——非常通俗易懂。 16:10

6.HTML5新特性——拖放API——今日重点

Drag & Drop：HTML5为拖放事件定义了7个事件

被拖动的对象——源对象(source)可以触发的事件：

(1)ondragstart 拖动开始

(2)ondrag 拖动中

(3)ondragend 拖动结束

可以拖动着进入上方并松手的对象——目标对象(target)可以触发的事件：

(1)ondragenter 拖动着进入上方

(2)ondragover 拖动着在上方悬停

(3)ondrop 松开

(4)ondragleave 拖动着离开

提示：ondragover事件后续的默认行为是ondragleave，即ondragover后默认必然触发ondragleave，必须阻止浏览器此事件默认行为！！

练习：

(1)创建一个可以随着拖动而移动的飞机图片

提示：IMG必须定位！拖动过程中读取事件发生的坐标，及时修改IMG的left和top。

(2)垃圾箱默认是半透明，拖动小飞机到垃圾箱上方时浏览器完全不透明；拖动着离开浏览器继续变为半透明；

若飞机在垃圾箱上方释放，则从DOM树上删除飞机；垃圾箱继续变为半透明

(3) 把练习1 和练习2 组合在一起

课后练习：英雄选择

要求：

(1)拖动某架飞机到目标区域(随鼠标移动)，则在上方显示出该飞机；下方没有改飞机了；

(2)拖动另一架飞机到目标区域，则显示出该飞机，之前选中的飞机重回待选区域；

(3)从目标区域将某架飞机拖走，则该飞机重回待选区域；目标区域变回？飞机。

*****************************************************************************************************

Day 06

复习：

HTML5新特性

(1)表单新特性

(2)视频和音频

(3)Canvas绘图

(4)SVG绘图

(5)地理定位

navigator.geolocation.getCurrentPosition

(6)拖放API——7个事件

源对象：

ondragstart

ondrag

ondragend

目标对象：

ondragenter

ondragover - e.preventDefault()

ondragleave

ondrop

(7)WebWorker

(8)WebStorage

(9)WebSocket

今日目标：

(1)补充拖放API：dataTransfer

(2)扩展拖放API应用 —— 掌握

(3)WebWorker

(4)WebStorage —— 重点

1.拖放API补充知识点

如何在源对象的事件和目标对象的事件间传递数据？

方法1：创建一个全局变量——污染全局对象

var 全局变量 = null;

src.ondragstart = function(){

全局变量 = 数据值;

}

target.ondrop = function(){

console.log(全局变量);

}

方法2：使用H5拖放API提供的dataTransfer对象

提示：源对象事件的dataTransfer与目标对象事件的dataTransfer不是同一个对象！但二者之间可以传递数据。

src.ondragstart = function(e){

//利用数据传递对象保存数据

e.dataTransfer.setData('key', 'value');

}

target.ondrop = function(e){

//读取数据传递对象中的得到的数据

var data = e.dataTransfer.getData('key');

}

提示：H5标准中dataTransfer对象可以保存的数据必须有key，key只能叫 'text/html'、' text/uri-list'、'Files'三者之一。但经过实测，该key名称可以为任意名称。

2.扩展知识点：如何拖放客户端本地的图片到网页中显示

一般来讲，网页中的图片都应该来自于服务器；一般情况下，网页中不能使用客户端的图片。

可以使用拖放的方式把客户端的图片在网页中显示出来：

客户端的图片文件是拖放事件的源对象；

网页中的元素是拖放事件的目标对象；

container.ondrop = function(e){

var f0 = e.dataTransfer.files[0]; //File对象

var fr = new FileReader(); //读取文件中的内容

fr.readAsDataURL(f0); //把图片作为dataURL来读取

fr.onload = function(){ //文件读取完成

var img = new Image(); //创建IMAGE元素

img.src = fr.result; //dataURL

container.appendChild(img);

}

HTML5新增的文件读取相关的对象：

File 代表一个文件

FileList 代表一个文件列表

FileReader 用于读取一个文件中的内容

FileWriter 用于向一个文件中写出内容

3.面试题：请描述一下浏览器中的线程模型。

Program：程序，编写好的代码经过处理，可以在计算机上执行，放在文件系统(磁盘)上

Process：进程/任务，程序从磁盘中调入内存，分配必须可执行代码空间、数据空间，随时准备被CPU执行

Thread：线程，是进程内部执行代码的基本单位

进程和线程的关系：

进程是操作系统分配内存基本单位；

线程是执行代码(JS/HTML/CSS)的基本单位；

线程处于进程内部，一个进程内部必须至少有一个线程，也可以有多个线程，这些线程间彼此可以没有影响——并发执行（宏观上看是同时执行，微观上看是在CPU上交替执行）

Chrome.exe进程中至少有6个线程，可以并发的向Web服务器发起请求（有的请求HTML、有的请求CSS、有的请求JS）。但是最终负责内容渲染(HTML解析/JS执行)的只有1个线程——UI主线程。

4.HTML5新特性——Web Worker

由于浏览器中负责渲染/监听只有一个UI主线程，所有的HTML/CSS/JS的执行都在这一个线程内，若页面中加载了非常耗时（算法复杂）的JS操作，会阻塞后续的HTML/CSS/JS的渲染和事件监听。

如何解决？—— 创建一个新的并发线程来执行这样的耗时操作。

JS中没有创建新线程的方法，替代方案——Web Worker

var w = new Work( 'xx.js' );

含义：在当前UI主线程中创建并启动一个新的并发的工作线程，该线程执行耗时操作，可能阻塞；但不会对当前UI主线程产生影响。

注意：Worker线程的致命问题——不能执行任何DOM操作，不能使用任何DOM&BOM元素——浏览器中只允许UI主线程修改DOM树。jQuery之类的JS文件决不能使用Worker来执行！！

(1)如何让UI主线程给Worker线程传递数据：

UI主线程：

var w = new Work('xx.js');

w.postMessage('data');

Worker线程：

onmessage = function(event){

var data = event.data;

}

(2)如何让Worker线程把运算结果传递给UI主线程：

Worker线程：

postMessage('data');

UI主线程：

var w = new Worker('xx.js');

w.onmessage = function(event){

var data = event.data;

}

练习：UI主线程中读取用户输入，发送给Worker线程；Worker线程开始运算，完毕后，把运算结果发送回给UI主线程，显示在DIV元素中。

总结：Worker用于执行耗时的JS任务，在一个独立的线程中，可以避免UI主线程的阻塞问题。

5.HTML5新特性——WebStorage——重点

项目中的数据如何保存？

方式1：保存在服务器端——商品信息、用户信息、帖子

方式2：保存在客户端——浏览记录、登录信息、内容定制

Web的客户端端存储技术有哪些？

(1)Cookie

优势：兼容性好

不足：操作繁琐，数据长度有限制（如4KB）

(2)Flash

优势：大小没有限制

不足：依赖于Flash允许环境

(3)Web Storage

优势：大小可达到8MB，操作简单

不足：HTML5新特性

(4)IndexedDB —— 课下自学

优势：大小没有限制，使用JS操作的一种客户端的数据库

不足：操作稍显复杂

HTML5中的Web Storage技术涉及两个新对象：

window.sessionStorage——会话级存储，其中的数据可以在一次会话中的多个页面中共享——数据存储在浏览器进程内存中。

sessionStorage.setItem(key, value)

var value = sessionStorage.getItem(key)

sessionStorage.removeItem(key)

sessionStorage.clear()

sessionStorage.key(i)

sessionStorage.length

window.localStorage——跨会话级存储/本地存储，其中的数据即使关闭浏览器/电脑，下次仍然可以访问——数据存储在文件系统的磁盘文件中。

localStorage.setItem(key, value)

var value = localStorage.getItem(key)

localStorage.removeItem(key)

localStorage.clear()

localStorage.key(i)

localStorage.length

注意：如果localStorage中的数据发生了改变，所有已打开的当前网站的浏览器窗口，都会自动触发window.onstorage事件，从而可以得到本地存储的数据已被修改。

Session：一个会话，指客户端连接到服务器后，在一段时间内的先后发起的多个请求，即一个会话中可能包含多个页面内容。只要浏览器不关闭，此次会话就一直存在；反之浏览器一关闭，会话就结束了。

练习：

(1)创建productlist.html页面，显示登录输入框，登录成功后可以点击“查看购物车”跳转到shoppingcart.html，此页面中显示出“欢迎回来：xxx”。还有一个超链接“退出登录”，删除登录的用户名。

(2)创建index.html页面，包含一个下拉列表，让用户选择自己喜欢网页风格，如：蔚蓝天空、芭比公主、杀马特等；接下来跳转到usercenter.html，该页面也呈现上一页面所选的风格；即使重启浏览器，再访问这些页面仍然是用户之前所选的风格。

提示：在客户端存储选中的主题的className

课后练习：单词测试系统

(1)用户可以在save.html中不停的录入新单词；

(2)进入test.html开始测试，需要对之前录入过的所有单词进行测试；

(3)提交答案后，在result.html中显示出测试成绩。

提示：录入的单词需要永久保存；而此次测试结果只需要在当前会话中保存。

//遍历客户端存储的数据

for(var i=0; i<localStorage.length; i++){

var key = localStorage.key(i) //获取第i个key

}

课下任务：

(1)挑战性任务：不使用传统的表单，使用AJAX+拖放API实现文件上传。

*****************************************************************************************************

Day 07

复习：

见思维导图

今日目标：

(1)HTML5新特性——WebSocket——了解

(2)HTML5阶段项目

1.HTML5新特性——WebSocket

HTTP协议的不足：基于“请求-响应”模型，只有客户端发了请求，服务器才会给响应，即没有请求就没有响应；一次请求也只能得到一次响应。在特殊应用场景有不足：

使用HTTP协议的解决方案： setInterval+AJAX => 心跳请求

注意：心跳过于频繁服务器压力太大；不频繁客户端获取消息有延迟。

最佳解决方案：——改用其它协议：

WebSocket协议：基于“广播-收听”模型，客户端连接到服务器上就不再断开，服务器有了消息可以随时发送给客户端，同时客户端也可以不停的给服务器发消息，服务器可以没有一次应答。即一方可以连续发多个消息，对方不停的接收。不足：客户端和服务器是永久连接——服务器端可以同时容纳的连接数有限制的。适用于“聊天室”、“实时走势图”等应用场景。

WebSocket应用需要服务器端和客户端都要使用WebSocket协议。传统的ApacheWeb不再适用。可以使用PHP或Node.js编写这样的服务器。

运行PHP编写的Socket服务端程序：

c:/xampp/php/php.exe e:/socket_server.php

2.HTML5阶段项目

所用技术：

MySQLDB + PHP + AJAX + HTML5-Video + HTML5-Canvas + HTML5-SVG + HTML5-WebStorage

实现功能：

(1)用户注册

(2)确定下单

(3)用户中心 - 我的订单

(4)用户中心 - 消费统计

(5)用户中心 - 幸运抽奖

实现步骤：

(1)修改SQL，为jd_user表添加新的字段：

uid,uname,upwd,email,homepage,age,birthday(bigint)

(2)创建PHP，user_add.php，接收客户端提交的注册信息，保存入数据库，返回 {"msg": "succ", "uid": 3} 或 {"msg":"err", "sql":"INSERT...."}

(3)创建HTML，register.html（需要编写register.css），使用视频做背景，所有的输入域都要有输入验证，点击“注册”，使用AJAX异步提交注册信息，成功则跳转到产品列表页面（productlist.html）

--------------------------------------------

(4)修改SQL，添加jd_order（订单信息表），包含字段：oid, orderNum, shopName, rcvName, price, payment(付款方式，INT), orderTime(下单时间,BIGINT), status(订单状态,INT), userId(下单用户的ID号)

(5)修改SQL，添加jd_order_detail（订单详情表），包含字段： did, orderId, productId, count(购买数量)

(6)创建PHP，order_add.php，接收客户端提交的订单信息，添加到订单表和订单详情表，返回{"msg":"succ","oid",12, "orderNum": 1234567890 } 或 {"msg":"err", "sql":"INSERT ...."}

SQL1: INSERT INTO jd_order VALUES... 获得oid

SQL2: INSERT INTO jd_order_detail VALUES... 循环执行

(7)创建HTML，addorder.html，根据当前购物车中的内容，生成订单，点击“下单购买”异步提交给服务器，进行订单生成，成功后在一个新的页面(addorder_result.html)中显示出订单编号——sessionStorage

(8)创建HTML，usercenter.html，页头和页尾异步加载，主体内容分为左侧的“附加导航”和“右侧主体”

*****************************************************************************************************

Day 08

1.HTML5阶段项目

所用技术：

MySQL + PHP + AJAX + HTML5-Form + HTML5-Video + HTML5-Canvas + HTML5-SVG + HTML5-WebStorage

实现功能：

(1)用户注册

(2)用户登录

(3)浏览商品列表

(4)查看商品详情

(5)添加到购物车

(6)修改购物车

(7)确定下单难点

(8)用户中心 - 我的订单难点

(9)用户中心 - 消费统计

(10)用户中心 - 幸运抽奖

实现步骤：

(1)修改SQL，为jd_user表添加新的字段：

uid,uname,upwd,email,homepage,age,birthday(bigint)

(2)创建PHP，user_add.php，接收客户端提交的注册信息，保存入数据库，返回 {"msg": "succ", "uid": 3} 或 {"msg":"err", "sql":"INSERT...."}

订单表 <=多对多=> 产品表

(5)修改SQL，添加jd_order_detail（订单详情表），包含字段： did, orderId, productId, count(购买数量)

SQL1: INSERT INTO jd_order VALUES... 获得oid

SQL2: INSERT INTO jd_order_detail VALUES... 循环执行

(7)修改之前的productlist.html和shoppingcart.html，把登录后的用户名保存在sessionStorage

(8)创建HTML，addorder.html，根据当前购物车中的内容，生成订单，点击“下单购买”异步提交给服务器，进行订单生成，成功后在一个新的页面(addorder_result.html)中显示出订单编号——sessionStorage

(9)创建HTML，usercenter.html，页头和页尾异步加载，主体内容分为左侧的“附加导航”和“右侧主体”形式的布局——使用CSS实现该布局

(10)创建JS，usercenter.js，随着附加导航的切换，右侧主体的内容会随之改变——类似“标签页签”效果

(11)创建PHP，order_select.php，接收客户端提交的用户名，查询出该用户所有的订单，以JSON格式返回给客户端——难点

---------------------------------------------------------

(12)修改HTML，usercenter.html，页面加载完成后，异步请求当前登录用户的订单信息，追加在TABLE中

(13)选做：实现“我的订单”分页显示

(14)创建PHP，buy_stat.php(消费统计)，根据客户端提交的用户名，模拟创建过去12个月中的消费总金额（无需访问数据库，直接伪造出JSON数据即可），返回数据形如：[{"label":"10月","value":3500}, {"label":"11月","value":3000}...]

(15)修改JS，usercenter.js，待页面加载完成后，异步请求当前登录用户的消费统计信息，根据这些信息绘制Canvas统计图——注意：所有图形都要使用动态变量创建

(16)修改JS，usercenter.js，待页面加载完成后，异步请求当前登录用户的消费统计信息，根据这些信息绘制SVG统计图——注意：所有图形都要使用动态变量创建

2.扩展JSON字符串在项目中的应用

PHP服务器给客户端JS发送JSON响应数据：

PHP： $arr = [ ... ]; echo json_encode($arr);

JS： var obj = JSON.parse( str )

客户端JS给发送PHP服务器JSON响应数据：

JS： var arr = [ ... ]; var str = JSON.stringify(arr);

PHP： $arr = json_decode( $_REQUEST['str']);

提示：JSON中的{}会被PHP解析为Object,使用->符号读取对象的成员

3.面试题：使用纯CSS实现如下的布局

.main { }

.left {

width: 210px;

float: left;

}

.right-body {

margin-left: 210px;

}

3.如何根据订单编号查询出其对应的产品信息

需要的数据都在产品表中，不是跨表查询；

SELECT pid,pname,pic FROM jd_product

WHERE pid = 10 OR pid=15 OR pid=18;

--------------------------------------------

SELECT pid,pname,pic FROM jd_product

WHERE pid IN (10, 15, 18);

--------------------------------------------

SELECT pid,pname,pic FROM jd_product

WHERE pid IN (SELECT productId FROM jd_order_detail WHERE orderId=101);

此处根据订单编号，查询出多个产品编号，再根据这些产品编号查询产品信息——查询中嵌套另一个查询——子查询

*****************************************************************************************************

Day 09

复习：

需求 -> PSD -> HTML -> PHP ->数据库

京东用户中心项目设计技术：

jQuery + AJAX + PHP/MySQL + Form + Video + Canvas + SVG + WebStorage

今日目标：

(1)京东用户中心——消费统计（Canvas版本）

(2)京东用户中心——消费统计（SVG版本）

(3)京东用户中心——幸运抽奖

1.项目实现步骤：

(17)创建SQL，添加jd_lottery表，保存用户的抽奖记录，包含如下列：(lid, uid,lotteryTime, level(INT,所中奖项))，添加三行测试数据

(18)创建PHP，lottery_stat.php，接收客户端提交的用户名，返回该用户的抽奖统计情况，形如：{"uname":"qiangdong", "uid":1, "totalCount":39, "usedCount": 3, "leftCount":36}

总抽奖次数根据订单总金额来计算，每有1000元消费，就自动有一次抽奖机会

SELECT SUM(price) FROM 订单表 WHERE userId=?

SELECT COUNT(*) FROM 抽奖表 WHERE userId=?

(19)修改HTML，待页面加载完成，异步请求当前登录用户的抽奖统计情况，显示在“开始抽奖”按钮上。剩余抽奖次数为0，则按钮保持禁用状态，否则按钮显示为可用状态。

--------------------------------------------

2.第三方绘图工具库

使用原生的Canvas或SVG实现统计图表的绘制比较麻烦。

许多第三方统计图表绘图工具产生：

(1)Chart.js：免费，小巧，八种图形

(2)EChart.js：百度提供的，免费，容易上手

(3)FreeChart：免费开源

(4)FusionCharts：收费的，功能强大，90+种图形

FC使用步骤：

(1)登录官网，查看介绍

(2)找示例程序，使用手册(API Document)

(3)上手编写简易程序

var c = new FusionCharts( {....} );

c.render('divId');

3.如何让旋转先加速再减速

本质是一个二次函数，X轴为旋转的持续时间，Y轴是旋转角度：

课后练习：

继续完善幸运抽奖，把抽奖结果异步提交给服务器，可以继续下一次抽奖；并让旋转先加速再减速。

posted @ 2016-12-22 10:45 寒霜27 阅读(1680) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

寒霜27

html5高级

公告