第一章 JS速览
1 限制时间处理事件
1 <script> 2 3 setTomeout(wakeUpUser,5000); 4 5 function wakeUpUser() 6 7 { 8 9 alert("Are you going to start at this boring page forever?"); 10 11 } 12 13 </script>
2 变量 var 可以声明 数值 字符 布尔类型,可以声明加赋值,也可以只声明。
变量命名规则:*以字母、下划线、美元符号打头;*字母数字下划线美元
*避免关键字
3 语法规则:
*每条语句分号结尾;
*单行注释 //
*空白无关紧要
*字符串可以单引号也可以双引号穿起来
*不用括号括起 true和false
*声明变量可以不给他指定值
*区分大小写
4 表达式:表达式的结果都为某种值(数字 字符串 布尔)
*var total=price-(price*(discount/100));
*"dear"+"reader"+""+name(变量)
*phonenum.substring(0,3);//
5 与用户交流
创建提箱框:alert("提醒文本");
直接写入文档:document.write();
控制台:console.log();
【控制台主要作用是写入日志,不在网页最终版本中使用,仅在开发网页期间调试代码
1 <script> 2 3 var message="Howdy"+" "+"partber"; 4 5 console.log(message); 6 7 </script>
】
直接操作文档:文档对象模型;
6 Javascript代码的放置位置:<head>(在加载整个网页内容前加载script代码)
<body>当然也可以在这两个部位使用外部<script src="xx.js"></script>
外部文件中直接放js代码,不需要<script>
!不能在引入外部文件的同时嵌入内部的js代码
7 开发一款战舰游戏
认识函数:var m=prompt("提示字符");//prompt函数返回输入的字符串
Math.random();//生成随机数0-1,如果生成0-100则*101
Math.floor();//将数字四舍五入
源:
1 <!doctype html> 2 3 <html lang="en"> 4 5 <head> 6 7 <title>Battleship</title> 8 9 <meta charset="utf-8"> 10 11 </head> 12 13 <body> 14 15 <h1>Play battleship!<h1> 16 17 <script language="JavaScript" type="text/JavaScript"> 18 19 var location1,location2,location3; 20 21 var guess; 22 23 var hits1=0,hits2=0,hits3=0; 24 25 var guesses=0; 26 27 var isSunk=false; 28 29 while(!isSunk) 30 31 { 32 33 //生成新的随机战舰位置 34 35 location1=Math.floor(Math.random()*7); 36 37 location2=Math.floor(Math.random()*7); 38 39 while(location2==location1) 40 41 location2=Math.floor(Math.random()*7); 42 43 location3=Math.floor(Math.random()*7); 44 45 while(location3==location1||location3==location2) 46 47 location3=Math.floor(Math.random()*7); 48 49 //获取用户输入 50 51 guess=prompt("Ready,aim,fire!(enter a number 0-6):"); 52 53 if(guess>6||guess<0) 54 55 { 56 57 alert("Please enter a valid cell number!"); 58 59 }else 60 61 { 62 63 guesses=guesses+1; 64 65 if(guess==location1) 66 67 { 68 69 alert("HIT 1!"); 70 71 if(hits1==3) 72 73 { 74 75 alert("You sank my battleship 1!"); 76 77 } 78 79 else 80 81 hits1=hits1+1; 82 83 } 84 85 else if(guess==location2) 86 87 { 88 89 alert("HIT 2!"); 90 91 if(hits2==3) 92 93 { 94 95 alert("You sank my battleship 2!"); 96 97 } 98 99 else 100 101 hits2=hits2+1; 102 103 } 104 105 else if(guess==location3) 106 107 { 108 109 alert("HIT 3!"); 110 111 if(hits3==3) 112 113 { 114 115 alert("You sank my battleship 3!"); 116 117 } 118 119 else 120 121 hits3=hits3+1; 122 123 } 124 125 else 126 127 alert("MISS!"); 128 129 130 131 if(hits1==3&&hits2==3&&hits3==3) 132 133 { 134 135 isSunk=true; 136 137 alert("You sank all my battleship!"); 138 139 } 140 141 } 142 143 } 144 145 var states="You took "+guesses+" guesses to sink the battleship, "+"which means your shooting accuracy was "+(3/guesses); 146 147 alert(states); 148 149 </script> 150 151 </body> 152 153 </html>