重温H5之初探H5
缘由
作者原来是标准的java程序员，对于前端只是简单的会用，小样式、Js等问题百度、谷歌搞定，复杂了就找前端兄弟来帮忙。
最近随着工作的变动，工作的重点逐步转移向前端，才发现前端的世界目前也是异常的精彩。
reactJs/requirjs/vuejs/webpack/nodejs，我这里写的这些名词都不分类，原因是最初一个也不会，后来啃过一段reactjs，demo会了，webpack编译也懂一些，npm大体上也会用了，不过我发现脱离了demo，出了任何问题，首先想到的是搜索去。不像原来做java首先想到的是调试。
我觉得，这与个人前端基础薄弱有直接关系。所以工作之余请教了一下，同事推荐了《HTML5权威指南》，我想在阅读的同时积累和记录下来。
初探概要
HTML5规范中最重要的3项技术是
- HTML5核心规范
- CSS
- JavaScript
初探HTML
用一张图可以表示，表述不详细的再下面再补充
Paste_Image.png
HTML实体
HTML 实体是最常用到的一些基础性内容，我在网上找了一些常用的，贴图示意。
Paste_Image.png
初探CSS
还是用一张图来表示
Paste_Image.png
外部样式
外部样式可以导入多个，如果属性重复，起作用的是最后一个。
样式起作用的顺序
Paste_Image.png
CSS小工具
- CSS性能支持情况 http://caniuse.com
- CSS生成选择器 http://www.selectorgadget.com
Paste_Image.png
- Less http://lesscss.org
- Blueprint http://www.blueprint.org 其实这个我还没有看明白
初探JavaScript
这里主要介绍了JavaScript的核心特性，它是HTML5的有机组成部分。
还是以一张思维导图开始
Paste_Image.png
tips
- 嵌在html中的script，一般写在最后。
- JavaScript 依次执行，可以不使用分号结尾，不过为了看起来清晰，推荐使用";"结尾。
- JavaScript 区分大小写
- +号，作为字符串连接符号的优先级高于 作为数字运算的加号
变量
使用var 声明变量，在es2015中，增加了let什么的。
定义在Script中的，称为全局变量，定义在function中的成为局部变量。
对象
对象是JavaScript的重要的内容
定义方式
//1
var myData = new Object();
//2
var myData = {};
属性操作
// 1. 增加属性
myData.name = "zhang san";
myData["weather"] = "sunny";
myData.jfunc = function(){
document.writeln(' Hello') ;
}
//2. 读取属性
myData.weather;
myData["name"];
//3.枚举属性
for(var prop in myData){
document.writeln("Name:"+ prop+" value is :" + myData[prop])
}
//4. 删除属性
delete myData.name;
// 5. 判断对象是否具有某个属性
var hasName = "name" in myData // true
运算符
特别说明的运算符是 == 和 ===
== 判断相等，默认把两个比较的值转化成相同的类型，然后比较值
=== 等同，不但判断 两个比较的值，同时判断两个的类型，都相等才是相等
对于JavaScript的基本类型（字符串、数值等内置类型）比较值，对象的比较是引用的比较。
显示转换
数字转换为字符串
//1
(5).toString
//2
String(5)
//说明
toString(2) //二进制表示
toString(8)//八进制表示
toString()//十进制表示
toString(16)//十六进制表示
toFixed(n) //小数点后有n位
toExponential(n) // 以指数表示法表示数值
toPrecision(n) //有n位有效数字表示数值
字符串转换为数值
Number(<str>)
parseInt(<str>)
parseFloat(<str>)
数组
数组循环
var myArray = new Array();
var myArray2 = [1,2,3,"sss",true];
for(var i = 0 ; i< myArray2.length ; i ++){
document.writeln(myArray2[i]);
}
错误处理
try {
} catch(e){
} finally {
}
undefined 和 null
undefined : 在读取未赋值的变量或者读取对象没有的属性时，得到的就是undefined
null: null 表示已经赋值，但不是一个有效的object，string ，number 或者 boolean
undefined == null 返回 true
undefined === null 返回 false
//有用，无论 undefined 或者 null (!)都做boolean检查，为false
if(!myData.city){
alert("city is null or undefined!")!
}
Adam Freeman 推荐的书
《JavaScript:The Definitive Guide》--犀牛
《Pro JavaScript Design Patterns》
先记录一下，这里不是js书籍的推荐会。
网友评论