快捷链接：
js系列教程1-数组操作全解
js系列教程2-对象和属性全解
js系列教程3-字符串和正则全解
js系列教程4-函数与参数全解
js系列教程5-容器和算法全解
js系列教程6-BOM操作全解
js系列教程7-DOM操作全解
js系列教程8-事件全解
js系列教程9-表单元素全解
js系列教程10-canvas绘图全解
js系列教程11-json、ajax、comet全解
js系列教程12-离线应用与存储全解
这篇demo较长，包含了js基本的内容，若不是出于校验自己js能力的朋友，建议按照上面的链接分章节学习。本demo包含了js的数组、对象、对象属性、字符串、正则表达式、函数、参数、容器、算法、BOM、DOM、事件、表单、cancas绘图、json、ajax、comet、离线应用、客户端存储等方面的知识，可以全面检验你的js学习效果。
此demo除了必须的链接文件外，主要包括文件：index.html和index.js、index.css、index1.js、index2.js、index3.js、index4.js、index5.js文件
index.html文件为一个简单的演示页面。包括js代码的打印输出和js与css的嵌入代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsdemo</title>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no"> <!--适应移动屏幕-->
<link rel="stylesheet" href="index.css" />
<style type="text/css">
.hintclass{ display: inline; float: left; left: 30%; height: 35%; width: 70%;color: white;overflow: auto} /*设置样式类样式*/
#hint1{display:inline;float:left;height: 25%;width: 70%;left:30%;background-color: aqua;color: white} /*设置指定id样式*/
/*background-image:url(\'chaoxian.jpg\');background-size: cover*/
</style>
<style type="text/css">
body div{background-color: green} /*设置元素类别样式，多重限定，使用空格连接，样式的计算以最新的设置为主*/
div input{width: 200px;height: 40px}
</style>
</head>
<!--当遇到<body>开始呈现内容-->
<body>
<div style="width: 100%;height: 900px;" id="hintdiv">
<label style="display:inline;float:left;height: 100%;width: 30%;">id="hint" name="tity"></label>
<label id="hint1" name="tity"></label> <!--name是元素被包含在集合中时的key-->
<label class="hintclass" style="" id="hint2" name="tity" title="label text" lang="en" dir="ltr" myatt="age" data-myname="luanpeng"></label>
<!--id唯一标识，title元素附件说明，lang语言，dir语言方向，class特性，myatt自定义属性，data-myname自定义数据属性-->
</div>
<div style="width: 100%;height: 600px" id="hintdiv1"> <!-- onclick="alert(\'div接收到事件\')"-->
<input type="button" id="input1" value="点击1" onclick="alert(\'点击了\')" > <!--可以在事件中直接输入函数表达式-->
<input type="text" id="input2" value="输入内容" name="mytext" oninput="printf(event.type.toString()+this.value)" ><!--事件中自动具有event时间对象和this表示的元素本身，名称name的值就代表了当前元素对象的引用-->
<br> <!--换行-->
<textarea rows="2" cols="25">textare初始化值</textarea> <!--rows行数，cols列数-->
<form accept-charset="GBK" action="" method="post" name="hello" id="myform" novalidate><!--novalidate表单不用验证-->
<input name="text1" type="text" size="15" maxlength="20" placeholder="提示字" value="input初始化值" id="text1" autofocus