码迷,mamicode.com
首页 > Web开发 > 详细

Web前端学习-第六课HTML篇

时间:2015-08-19 00:23:46      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

Q13HTML5CanvasWebWorkersStorage三者出现的意义?使用方式(使用代码展示)?优点?

Canvas为了客户端矢量图形而设计,自己没有行为,但却把一个绘图API展现给客户端JavaScript以使脚本能够把想绘制的东西都绘制在一块画布上;

使用:大多数canvas绘图API都没有定义在<canvas>元素本身上,而是定义在通过画布的getConText()方法获得的一个绘图环境对象上;canvas也使用了路径的表示法,但是路径有一系列的方法调用来定义,而不是描述为字母和数字的字符串,比如调用beginPath()和arc()方法;一旦定义了路径,其他的方法如fill(),都是对此路径操作,绘图环境的各种属性,比如fillstyle,说明了这些操作如何使用;

代码:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

优点:动态创建图形图像,图形是在一个特定的上下文中创建的,而上下文对象目前有两种:2D上下文,可移植性原始的绘图操作:设置填充,描边颜色和模式;绘制矩形;绘制路径;绘制文本;创建渐变和模式;3D上下文,即WebGL(从OpenGL ES2.0移植到浏览器中,OpenGL ES2.0是游戏开发人员在创建计算机图形图像时经常使用的一种语言)上下文,支持比2D上下文更丰富的更强大的图形图像处理能力:用GLSLOpenGL Shading Language OpenGL着色语言)编写的顶点和片段着色器;支持类型化数组,既能够将数组中的数据限定为某种特定的数值类型;创建和操作纹理。(2D上下文浏览器基本都支持,WebGLobal目前只有Firefox 4+Chrome支持)

 

 

Web Workers:当在HTML页面中执行脚本时,页面的状态是不可相应的,直到脚本已经完成;Web workers是运行在后台的JavaScript,独立于其他脚本,不会影响页面的性能,可以继续做任何愿意做的事情,点击 选取内容等等,而此时web workers在后台进行。

 

 

 

 

 

代码:

 

 

 

优点:作为在后台运行的JavaScript脚本 ,不会影响页面的性能。

 

Storage可以在客户端本地存储数据,类似HTML4cookie,但可实现功能要比cookie强大得多,cookie大小被限制在4KBWeb Storage官方建议为每个网站5MB

Web Storage 分为两种:session Storagelocal storage

保存数据:localStorage.setItem(key,value)

读取数据:localStorage.getItem(key)

删除单个数据:localStorage.removeItem(key)

删除所有数据:localStorage.clear()

得到某个索引的keylocalStorage.key(index)

示例代码:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<title>Web Storage</title>

</head>

<body>

<div style = "border:2px dashed #ccc;width:320px;text-align:center">

<label for = "user_name">姓名:</label>

<input type = "text" id = "user_name" name = "user_name" class = "text" />

<br />

<label for = "mobilephone">手机:</label>

<input type = "text" id = "mobilephone" name = "mobilephone" />

<br />

<input type = "button" onclick = "save()" value = "新增记录" />

<hr />

<label for = "search_phone">输入手机号:</label>

<input type = "text" id = "search_phone" name = "search_phone" />

<input type = "button" onclick = "find()" value = "查找机主" />

<p id = "find_result"><br /></p>

</div>

<br />

<div id = "list">

</div>

</body>

<script>

 

//保存数据

function save(){

var mobilephone = document.getElementById("mobilephone").value;

var user_name = document.getElementById("user_name").value;

localStorage.setItem(mobilephone,user_name);

}

 

//查找机主

function find(){

var search_phone = document.getElementById("search_phone").value;

var name = localStorage.getItem(search_phone);

var find_result = document.getElementById("find_result");

find_result.innerHTML = search_phone + "的机主是:" + name;

}

 

//将所有存储在localStorage中的对象提取出来,并展现到界面上

function loadAll(){

var list = document.getElementById("list");

if(localStorage.length > 0){

var result = "<table border = ‘1‘>";

result += "<tr><td>姓名</td><td>手机号码</td></tr>"

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

var mobilephone = localStorage.key(i);

var name = localStorage.getItem(mobilephone);

result += "<tr><td>" + name + "</td><td>" + mobilephone +"</td></tr>";

}

result += "</table>";

list.innerHTML = result;

}else{

list.innerHTML = "目前数据为空,赶紧加入联系人吧";

}

}

</script>

</html>

Q14HTML5为什么适合做移动端?目前移动端框架有哪些?

Html5 可以直接在网页上调试和修改,在移动设备上支持媒体,引进新功能可以真正改变用户跟文档的交互方式。(新的解析规则增强了灵活性,新属性,淘汰过时的冗余的属性,一个html5文档到另一个文档间的拖放功能,离线编辑,信息传递增强,详细的解析规则,多用互联网邮件扩展和协议处理程序注册,在SQL数据库中存储数据的通用标准、。。。)

目前移动端框架:PhoneGap(开源开发框架,使用htmlcss,和JavaScript来构建跨平台的移动应用程序)、Sencha Touch(让Web APP看起来像Native App,美丽的用户界面组件个丰富的数据管理全部基于最新的HTML5css3web标准全面兼容AndroidiOS设备,是开发者最常用的UI工具箱)、Media Queries(提供了一种基于不同的平台写css的技术,能很快让网站兼容移动设备,保证产品实现最快的跨平台的兼容性和多平台的可用性。)、Zepto.js(专为mobile webkit浏览器而开发的JavaScript框架开发理念是简约,帮助开发人员简单快速的完成开发 交付任务,超轻量级,语法借鉴且兼容jQuery)、bootstrapTwitter推出的开源的用于前端开发的工具包,是一个css/html框架,提供了优雅的HTMLcss规范,由动态css语言less写成,与css框架blueprint存在很多相似之处,2.0版本添加响应式布局,更新了一些进度拦及可定制的图片缩略图,增加了一些新样式,非常轻量级的框架)、SeaJs(遵循CMD规范的模块加载框架,可以加载任意JavaScript模块和css模块,SeaJs很小巧,两个核心:模块的定义以及加载)、MEtro UI(自成体系,也可以与其他框架一起用,使用less创建,拥有网络系统,排版样式,表格 按钮 和 图片也拥有内建的JavaScript组件,生成片状,菜单,边栏,进度条和提示)、Hype(可以在网页上做出悦目的动画效果,无需Flash插件,是第一个可用的创作HTML5产品的可视化工具,HTML5的应用程序更加倾向于工具生成)、IScroll(使用原生JavaScript编写的一个模拟滚动效果的小类库)

Web前端学习-第六课HTML篇

标签:

原文地址:http://www.cnblogs.com/Decmber/p/4741003.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!