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 是指用<script>标记去获取JSON对象的方法,类似下面的这种，callback 是定义的一个回调函数
<script src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
具体例子：
<!DOCTYPE html>
<html><head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="mightygumball.css">
<title></title>
</head>
<body>
<h1>Mighty Gumball Sales</h1>
<div id="sales"></div>
<script src="mightygumball.js"></script>
<script src="http://gumball.wickedlysmart.com/?callback=updateSales"></script>
</body>
</html>
********************************
在mightygumball.js中定义回调函数updateSales
function updateSales(sales){
var salesDiv = document.getElementById('sales');
for(var i=0; i<sales.length; i++){
var sale = sales[i];
var div = document.createElement('div');
div.setAttribute('class', 'saleItem');
div.innerHTML = sale.name + ' sold '+ sale.sales + ' gumballs'; salesDiv.appendChild(div);
}
}
HTML5中的画布元素
默认为透明的，画布大小为300px * 150px, 在css中设置宽高会缩小或者放大画布的像素，在标签中指定则不会回出现此类问题
（IE9才支持画布功能）
<canvas id="lookwhatIdrew" width="600" height="200"></canvas>
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();
}
