第三天：关于CMS内容管理系统-JavaScript相关知识及小游戏开发实例
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。以下简称JS。
通俗的讲，JS是嵌入到HTML中的，是客户端的行为，是浏览器支撑JS运行。
JS组成：
1、ECMAScript：JS核心语法
2、DOM：文档对象模型DOM的对象是document
3、BOM：浏览器对象模型BOM的对象是window
注意：
1. 写在html中，使用标签对。一般写在head里，从上到下执行
2. 写在单独文件里
3. 将脚本程序代码作为属性值
！！！重要：引入外部文件时，不能在标签对里写代码，无效
<script src="hhh.js" type="jjj"></script>基本知识点简要介绍：（大部分的语法以及程序流程和java相似）
变量：var是声明变量的关键字。弱类型 不需要声明类型就可以用
JS有五种基本数据类型：null Booleanundefined number string
一种复杂数据类型：object对象类型
其中：undefined：未声明变量和未初始化的变量使用typeof都会返回undefined
Null专门针对对象：表示已经有值，但是值为空。
小贴士：
JS是基于对象的语言。
JS中的typeof操作符：来检测数据类型
双引号里面只能是单引号，单引号里面只能是双引号，不能两双 两单
函数：
声明：定义函数放在标签中，或者放在外部文件中，引用。
Function 函数名后的参数列表可以不写，多写，少写。不需要写返回值（可以返、可以不返）
调用：放在标签中，或者放在外部文件中，引用。
匿名函数：没有名字的函数，只用一次的，省掉名字的。
Var area=function(width,height){…}
变量的作用域：
全局变量：在标签对中定义，在函数外定义的，不管位置先后，整个页面任何地方都可以访问。
局部变量：在function中定义的。
系统函数：
（1） parseInt（） 将字符串转换为整数 parseInt(string) “150abc”转换为150 “6.56”转换成6
（2） parseFloat()函数返回一个浮点数
（3） isNaN()函数用于判断参数是否是NaN（不是数字）。如果是NaN，那么isNaN函数返回true，否则返回false。（函数判断的是：不是数字为真）“134”转换为false“2a34”转换成true【空格 false和0都认为是0返回false】
（4） eval()运行以字符串形式表示的js代码串，并返回执行代码串后的结果。（高级中用的比较多）
事件：在某些情况下触发的，js处理事件（以on开头的都是事件）
function changeSize(){…}
例如：写点击事件以及点击事件对应的函数：
（1）在html的对应标签中写点击事件：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/new_file.js" ></script>
</head>
<body>
<p id="p1" onclick="changeSize()">aaa</p>
</body>
</html>
在和new_file.js文件中写函数：（上述html中有对相应JS文件的引用才能生效）
function changeSize(){
var p=document.getElementById("p1");
p.style.fontSize="30px";
p.innerText="bbb";
}
常用的事件：
Onclick：点击事件，用的最多
Onload和unonload事件会在页面加载完成后立即发生。用户关闭或刷新网页时触发onload事件【放在window或者body中，等全部加载完成才能操作页面元素】
Onblur事件：指光标或者焦点消失时触发（输入完用户名或密码后）
Onchange事件：下拉框，（选省份时出现该省后面的城市）
Onmouseover和onmouseout事件 鼠标移动到对象上和移开对象时
浏览器对象模型：window整个浏览器对象模型的顶层对象、history代表返回、location代表地址栏、document控制真正的文档
Window对象的常用方法：
Alert、prompt、confirm（弹出3种不同提示框）
Close、open、（有很多对应的属性：窗口的设置）
setTimeout定时器
文档对象模型：
DOM编程：DOM把html文档看成由元素、属性和文本构成的一棵倒立的树。可以定位到所有想定位的元素、属性、文本。html是根，两个分支是body和head 。可以把html中的每一个成分堪称一个节点，DOM的核心是查看节点、创建和删除替换节点。
Document里的属性：
fgcolor文本的前景颜色
write向文档写内容
getElementById获取指定id的html页面元素对象 返回对象
getElementByTagName 指定标签的html元素对象 返回数组
createElement
getElementByClassName找到所有应用同一个类的控件
下面通过对一个简单的拼图小游戏的代码书写来巩固JS：(用数字代表图片)
Game游戏：（3*3拼图）
1、 新建一个Game.html：在html中做一个3*3的表格用来存放数字（并为其写CSS样式）：
（注：写table和td的css中：margin的定义是顺时针：即上右下左的顺序）
table{
border: 1px solid red;
width: 300px;
height: 300px;
padding: 0px;
margin: 0px auto;
margin-top: 100px;
}
td{
border: 1px solid red;
font-family: "微软雅黑";
font-size: 35px;
text-align: center;
}
2、在格子中填入数据。写js文件：用数组对象来填写数据：Js中初始化一个数组：
var arr=[1,2,3,4,5,6,7,8];需要一个按钮（用来开始游戏），在html中定义一个容器div在其中写入
<input type="button" value="开始游戏" onclick="initGame()"/>3、在js中写初始化游戏的函数（将函数签名作为click的值 点击时执行initGame方法）用sort（）方法将数组中的数乱排序：不管数据的大小排序，一次返回大于0的数，一次返回小于0的数。思路是用random返回0-1的数，来对比0.5来实现乱序。
将上述的方法结果放在一个新的数组中。
//打乱数组
var arr1=arr.sort(function(){
if(Math.random()>0.5)
{
return 1;
}else{
return -1;
}
});
设置按钮的样式
（1）找content中的input：
#Content input{
}
（2）这是表示平级的：
#Content,input{
margin-left: 50px;
}
4、把打乱的数据放入单元格：获取所有的td再给每一个td设置值（操纵数据要用DOM）
tds=document.getElementsByTagName("td"); //返回了所有td的数组将arr数据用for循环往每一个数组中放置
//把数组中的值写到table的ID中去
//1.获取所有的ID
tds=document.getElementsByTagName("td");
//2.循环给td赋值
for (var i=0;i<arr1.length;i++) {
tds[i].innerText=arr1[i];
}
此时已经完成了：当点击开始游戏按钮时，实现界面初始化的乱序排序。
5、接下来是，点击单元格需要让单元格移动：
写一个函数MoveNum（）并设置点击事件
<table cellpadding="0" cellspacing="0" onclick="MoveNum()" >JS中，事件对象event：有一个属性是target获取点击的td对象
//找到点击的td
var td=event.target;
因为td数组的下标不变，打乱的是数据
数组下标从0开始，分析知移动时：
向上移动：数组的下标-3
向下移动：+3
向左移动：-1
向右移动：+1
获取当前的索引：
//获取当前的索引
var index=getCurrIndex(td.innerText);
function getCurrIndex(num){
for (var i=0;i<tds.length;i++) {
if(tds[i].innerText==num){
return i;
}
}
}
移动的代码：
//向上移动
if(index-3>=0&&tds[index-3].innerText==""){
tds[index-3].innerText=td.innerText;
td.innerText="";
return;
}
//向左移动
if(index-1>=0&&tds[index-1].innerText==""&&index%3!=0){
tds[index-1].innerText=td.innerText;
td.innerText="";
}
//向右移动
if(index+1<9&&tds[index+1].innerText==""&&(index+1)%3!=0){
tds[index+1].innerText=td.innerText;
td.innerText="";
}
//向下移动
if(index+3<9&&tds[index+3].innerText==""){
tds[index+3].innerText=td.innerText;
td.innerText="";
}
判断是否游戏结束：
function GameWin(){
for (var i=0;i<tds.length-1;i++) {
if(tds[i].innerText!=(i+1)){
return false;
}
}
为了方便操作以及熟悉代码，现在把3个文件的代码都粘贴下来：
Game.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/Game.css"/>
<script src="js/Game.js" type="text/javascript">
</script>
<title></title>
</head>
<body>
<div id="Content" >
<input type="button" value="开始游戏" onclick="initGame()"/>
<table cellpadding="0" cellspacing="0" onclick="MoveNum()" >
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
</div>
</body>
</html>
Game.css:
table{
border: 1px solid red;
width: 300px;
height: 300px;
padding: 0px;
margin: 10px auto;
margin-top: 10px;
}
td{
border: 1px solid red;
font-family: "微软雅黑";
font-size: 35px;
text-align: center;
}
#Content{
width: 400px;
height: 400px;
padding: 0px;
margin: 0px auto;
margin-top: 100px;
}
#Content,input{
margin-left: 50px;
}
Game.js:
var arr=[1,2,3,4,5,6,7,8];
var tds;
function initGame()
{
//打乱数组
var arr1=arr.sort(function(){
if(Math.random()>0.5)
{
return 1;
}else{
return -1;
}
});
//把数组中的值写到table的ID中去
//1.获取所有的ID
tds=document.getElementsByTagName("td");
//2.循环给td赋值
for (var i=0;i<arr1.length;i++) {
tds[i].innerText=arr1[i];
}
}
function MoveNum(){
//找到点击的td
var td=event.target;
//获取当前的索引
var index=getCurrIndex(td.innerText);
//向上移动
if(index-3>=0&&tds[index-3].innerText==""){
tds[index-3].innerText=td.innerText;
td.innerText="";
return;
}
//向左移动
if(index-1>=0&&tds[index-1].innerText==""&&index%3!=0){
tds[index-1].innerText=td.innerText;
td.innerText="";
return;
}
//向右移动
if(index+1<9&&tds[index+1].innerText==""&&(index+1)%3!=0){
tds[index+1].innerText=td.innerText;
td.innerText="";
return;
}
//向下移动
if(index+3<9&&tds[index+3].innerText==""){
tds[index+3].innerText=td.innerText;
td.innerText="";
return;
}
if (GemeWin()) {
alert("恭喜你过关！！！");
initGame();
}
}
function getCurrIndex(num){
for (var i=0;i<tds.length;i++) {
if(tds[i].innerText==num){
return i;
}
}
}
function GameWin(){
for (var i=0;i<tds.length-1;i++) {
if(tds[i].innerText!=(i+1)){
return false;
}
}
return true;
}
简易数字版的拼图游戏就可以实现了，但是还不够完善。这个小游戏只是为了让刚接触JS的同学熟悉JS的使用，真正想要开发拼图游戏的同学不建议使用此例中的乱序函数。