CH05 JavaScript BOM和DOM优质教学课件.ppt

5.3.3案例制作40. //有效性判断41. if(isNaN(myNum)){42. alert(您输入的不是数字，请重新输入！);43. continue;44. }45. elseif(myNum%1!==0){46. alert(您输入的不是整数，请重新输入！);47. continue;48. }49. elseif(myNumminNum||myNummaxNum||myNumstoneNum){50. alert(您输入的数字不在有效范围，请重新输入！);51. continue;}53. else{54. //更新剩余石子总数55. stoneNum=stoneNum-myNum;56. alert(玩家拿走了+myNum+个，当前剩余石子总数为+stoneNum);57. }58. }5.3.3案例制作59. //AI的回合60. else{61. //AI随机产生一个要拿走的石子数62. varbotNum=getRandomNum(minNum,maxNumstoneNum?stoneNum:maxNum);63. //更新剩余石子总数64. stoneNum=stoneNum-botNum;65. alert(AI拿走了+botNum+个，当前剩余石子总数为+stoneNum);66. }67. 68. //判断游戏是否结束（如果剩余石子数为0则游戏结束）69. if(stoneNum==0){70. //判断谁赢了71. varwinner=myTurn?AI:玩家;72. alert(游戏结束！+winner+胜利。);73. break;//停止循环}75. else{76. myTurn=!myTurn;//切换当前玩家77. }78. }} /script/body/html5.3.4案例思考【拓展练习】可否改成AI先手？修改石子总数、可以取走的石子最大值等增加可玩性。【进阶改造】当玩家先手时，可否把AI改造成必胜模式，即有策略地生成每次应该拿去的石子数让玩家失败？本章小结本章小结本章主要介绍了JavaScript对于文档对象模型DOM以及浏览器对象模型BOM的使用方法。其中DOM部分主要介绍了如何查找/添加/删除HTML元素、修改元素的内容/属性、改变元素的CSS样式、以及元素事件处理；BOM部分主要介绍了Window、Screen、Location、History和Navigator对象的用法。本章阶段案例介绍了Nim博弈小游戏，讨论了真人玩家或电脑AI先后手的必胜策略和玩法。Thankyou！5.1.4DOM事件【例5-6】DOM事件的简单应用5.1.5DOM节点使用JavaScript也可以为HTML页面动态地添加和删除HTML元素。5.1.5DOM节点1.添加HTML元素添加HTML元素有两个步骤，先要创建需要添加的HTML元素，然后将其追加在一个已存在的元素中去。使用document对象的createElement()方法可以创建新的元素，其语法结构如下：例如，创建一个新的段落标签p：document.createElement(元素标签名);document.createElement(p);5.1.5DOM节点1.添加HTML元素使用appendChild()方法可以将创建好的元素追加到已存在的元素中，其语法结构如下：例如，将上一个示例中创建的段落标签p追加到id=test的div标签中去：已存在的元素对象.appendChild(需要添加的新元素对象);varp=document.createElement(p);vartest=document.getElementById(test);test.appendChild(p);5.1.5DOM节点1.添加HTML元素【例5-7】JavaScriptDOM添加HTML元素5.1.5DOM节点2.删除HTML元素删除已存在的HTML元素也需要两个步骤：首先使用document对象的