《HTML5权威指南》阅读--初探H5

重温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()
parseInt()
parseFloat()

数组

数组循环

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书籍的推荐会。