本文介绍了HTML5的新特性及其与JavaScript的结合使用方法，包括文档结构的变化、脚本的执行时机选择、DOM操作原理及常见JS语法。
HTML5=新标记（老标记）+JavaScript API+CSS
API：Application Programming Interface 应用编程接口，提供一组对象：方法和属性
HTML: <!DOCTYPE html PUBLIC
“-//W3C//DTD HTML 4.01//EN” “http://www.w3.prg/TR/html4/strict.dtd”>
HTML5: <!DOCTYPE html >
HTML:<meta http-equiv=”content-type” content=”text/html;
chatset=UTF-8”>
HTML5:<meta charset=”utf-8”>
HTML: <link type=”text/css” rel=”stylesheet” href=”lounge.css”>
HTML5:<link rel=”stylesheet” href=”lounge.css”>
HTML5 Script标记：
<script src=”lounge.js”></script>
<script>
代码；
</script>
兼容性：
对Document和<meta>标记作出修改不会影响页面在老的浏览器上的显示。
CH2 JS&DOM
JS代码位置
1. <head>
<script> //最先执行，浏览器开始解析head时就会执行此代码。此时DOM尚未建立，之后再解析页面其余部分。
//为了解决此问题，告知浏览器完全加载页面并创建DOM之后再运行代码
function init(){ JS代码；} //创建一个名字为init的函数，将代码放在此函数。
window.onload=init; //将window.onlaod属性的值 设置为此函数名。表明，页面完全加载时执行init中的代码。
</script>
<script src=”.js”></script>
</head>
2. <body>
<script></script> //深度优化时，放在最下面
</body>
JS工作流程
1.编写indext.html(包含JSCode)或者index.js（放在html文件夹中）
2.加载 浏览器获取并加载页面，从上到下解析内容，在JSCode时，首先检查正确性，然后执行。建立内部模型DOM。
DOM：Document Object Model文档对象模型
3.JS继续执行，使用DOM检查页面/完成修改\从页面接收时间，要求浏览器从web服务器获取其他数据。
JS与页面交互过程
1. 浏览器加载页面
2. 浏览器解析HTML
3. 浏览器创建内部模型DOM，包含HTML标记的所有内容。Document-html-head&body
4. JS通过DOM访问元素以及元素中的内容。JS通过DOM创建或删除元素。
5. JS修改DOM时，浏览器会动态更新页面。
JS与HTML进行通信
getElementById，从DOM得到元素
向DOM创建/增加元素（内容）
从DOM删除元素（内容）
获取/设置元素的属性：通过元素的类，改变所属的类。
JS语句
- 动态类型
- 引号：字符串用双引号。布尔量不加引号。
- 空格没有影响
- 单行注释：//
- 语句以分号结束
- 区分大小写；HTML不区分大小写
- 变量名，以字母、下划线或者$开始，之中可以有数字。用var声明。
- 只有充分理由才使用_以及$开头，$多是为JS库保留，_多是程序员由于约定而定义的变量。
常用语句
- For 对于固定数目的值完成迭代，如购物车中的数目。
- While 不断循环直至满足某个条件，如提供测验直到做对。
- If Else if Else
- Math.random() //生成0-1之间的一个浮点数，不为1。
- Math.floor() //去除浮点数中小数点后面的数字
变量可存储的有：
1. 基本类型：数字、串、布尔值
2. 对象
3. 特殊类型的对象——数组。与其他对象的区别在于，可以使用数值索引访问数组中的存储数据。
创建数组
- Var 数组名=new Array();
数组名[0]=;//赋值
数组名[1]=;
2. Var 数组名=[值1, 值2, 值3]
3.数组名.length 可以获知数组长度.
数组删除元素
- 数组元素值设置为null
- Splice函数。
扫一扫
3372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
