Header First HTML5读书笔记

关于JSON数据，相比xml更加可读，流行的数据格式
js中数字，字符串， 数组等基本类型都可以转化为JSON数据，方法不能
js中使用，
JSON.stringify( )，js类型转化为JSON数据
JSON.parse( )；解析JSON数据

var plan9movie = new Movie('Plan 9 form Outer Space', 'Cult Classic', 2, ['3:00pm', '7:00pm']);
var jsonString = JSON.stringify(plan9Movie);

var jsonMovieObject = JSON.parse(jsonString);

AJAX

window.onload = function(){
  var url = 'http://wickedlysmart.com/ifeelluckytoday';
  var request = new XMLHttpRequest();
  request.onload = function(){
    if (request.status = 200){
      displayLuck(request.responseText)
    }
  };
  request.open('GET', url);
  request.send(null);
}

function displayLuck(luck) {
  var p= document.getElementById('luck');
  p.innerHTML = 'today you are' +luck;
}

request.onload定义一个函数，从服务器获取数据的请求完成时，就会调用这个函数， 这是XMLHttpRequest Level 2的写法 （IE8，Opera 10等更低版本的浏览器并不支持Leve 2）
XMLHttpRequest Level 1的写法

function init(){
  var url = 'http://localhost/gumball/sales.json';
  var request = new XMLHttpRequest();
  request.onreadystatechange = function(){
    if(request.readyState ==4 && request.status ==200){
      updateSales(request.responseText);
    }
  };
  request.open('GET', url);
  request.send(null);
}

跨域浏览器的安全策略

浏览器不允许你对原先提供的域以外的其他域发出XMLHttpRequest请求
也就是说不能用XMLHttpRequest去请求第三方的网站数据
可以使用JSONP绕过这个问题

JSONP 是指用

具体例子：

Mighty Gumball Sales






********************************
在mightygumball.js中定义回调函数updateSales

function updateSales(sales){
var salesDiv = document.getElementById('sales');
for(var i=0; i

HTML5中的画布元素

默认为透明的，画布大小为300px * 150px, 在css中设置宽高会缩小或者放大画布的像素，在标签中指定则不会回出现此类问题
（IE9才支持画布功能）

function previewHandler(){
  var canvas = document.getElementById('lookwhiatdrew');
  var context = canvas.getContext('2d');
  context.fillStyle = 'lightbule';
  context.fillRect(10, 10, 100, 100);
}

canvas.getContext('2d')获得画布的上下文
context.fillStyle 设置像素填充颜色
context.fillRect（x, y, w, h）画矩形方法，x y为画布坐标， w, h 矩形大小
画布路径
context.beginPath(); 开始画路径
context.moveTo(x,y)
context.lineTo(x, y)
context.closePath();

如画三角
context.beginPath();
context.moveTo(100,150);
context.lineTo(250, 75);
context.lineTo(125, 30);
context.closePath();
context.lineWidth = 5; //设置线宽
context.stroke();      //绘制三角形
context.fillStyle = 'red'; //设置颜色
context.fill();         //填充颜色

画圆方法
** context.arc(x, y, radius, startAngle, endAngle, direction)**
x, y圆心在画布的坐标
radius 半径
startAngle 起始角，x轴与弧的起点之间的角度
endAngle 终止角， y轴与弧的重点之间的角
direction， True或者False, True指逆时针画弧， false为顺时针

//角度转化为弧度函数
function degreesToRadians(degrees){
   return (degree * Math.PI）/180；
}

//画圆例子
function drawCircle(canvas, context){
  var radius = Math.floor(Math.random()*40);
  var x = Math.floor(Math.random()*canvas.width);
  var y = Math.floor(Math.random()*canvas.height);
  context.beginPath();
  context.arc(x, y, radius, 0,degreesToRadians(360), true)
  context.fillStyle = 'lightblue'; 
  context.fill();
}