1 /*
2 Javascript:用来在页面中编写特效，和HTML、CSS一样都是有浏览器解析
3
4 Javascript语言：
5 一、JS如何运行（javascript,jscript,vbscript,applet...）
6
7 二、输出
8 alert(什么类型都可以)；可以做调试用
9 document.write("字符串")；
10
11 三、如何在HTML文档中使用JS
12 使用<script></script>将js语法嵌入到html中，可以使用多个，每一个之间都是有关联的。
13 <script src="demo.js"></script>引入外部js文件，多个文件之间是相通的，但是有先后顺序。
14 <a href="javascript:alert("111111");"></a>点击A链接时执行Javascirpt程序
15 事件:事件触发时运行js
16 js语法：
17 命名规范：
18 1.命名一定要有意义。
19 2.不以数字开头的字母、数字、下划线、$符号。
20 3.不能是关键字和保留字。
21 大小写：javascript严格区分大小写
22 驼峰式命名法：变量名和函数，第一个单词小写，以后每个单词首字母大写showColor();
23 对象：每个单词首字母都要大写 Data();new Object();
24 分号：
25 结构定义语句后面不用加分号。if(){} for(){} function(){}
26 功能执行语句后面加分号。var a=1;如果有回车换行的地方可以省略（因为js认为换行表示语句结束），但是建议都加上分号。
27 注释：写注释文档
28 //单行
29 多行
30
31 四、变量
32 var a=10;
33 注：声明的变量调运后保存在内存里随时使用，只有当关闭浏览器才会释放内存，与别的语言不同。
34
35 var 变量名=值；
36 注：javascript是弱类型语言（和PHP相同）
37
38 var a=10; 声明
39 a=10; 赋值
40
41 五、数据类型
42 1.number(int float double)包括整形浮点型，计算时还是按整形和浮点型分开看。
43 2.string（string char）
44 3.boolean
45 4.object(object array null)注意：使用时分别处理
46 5.undefind没有声明的变量
47
48 整数：
49 var a=10;十进制
50 var a=045;八进制
51 var a=0xff;十六进制
52
53 浮点型：
54 浮点数是近似数，不能用作判断两个浮点数等于（ 0.1=0.0999999999）
55 var f=10.5;
56 var f=10.55;
57 var f=10.5e+10;
58
59 字符串
60 ''
61 ""
62 没有区别，所有的转义都可以使用
63 用+号连接字符串
64
65 六、运算符和表达式
66 算数运算符
67 + - * / % ++ --
68 var a=10+5+"12abc"+20 //1512abc20 javascript里所有与字符串运算的都按字符串处理。
69 %（最后值的正负与前面值正负一致）求余数的话，最好都是整数，如果有浮点数的话，求出来的值没意义。4%2.7 值为1.29999998
70 赋值运算符
71 = += -= *= /= %=
72 条件运算符
73 > < == != >= <= === !==
74 两边比较时最好是相同类型，比较完之后值是布尔型
75 var a=false;
76 if(a){alert("111");}else{alert("000");}
77 逻辑运算符
78 && || ！ ^
79 位运算符号(C语言里面加密和算法的时候用到)
80 >> >>> << | & ~
81 其他 ?:
82
83 七、流程控制
84 顺序结构
85 条件结构/分支结构/选择结构
86 1.单路分支
87 if(boolean){
88 }
89 2.双路分支
90 if(boolean){
91 }else{
92 }
93 3.多路分支
94 if(boolean){
95 }else if(boolean){
96 }
97 }else if(boolean){
98 }用于范围
99
100 switch(变量){ //变量值最好用整形或字符型
101 case:值1；
102 表达式1；
103 break;
104 case:值2；
105 表达式2；
106 break;
107 default;
108 }单个值匹配
109 4.嵌套分支
110 if(bool){
111 if(bool){
112 ...
113 }
114 }
115 循环结构
116 条件循环(js用的不多)
117 var i=0;
118 while(i<100){
119 document.write("###");
120 i++;
121 }
122
123 do-while()
124 计数循环
125 st:
126 for(var i=1;i<=9;i++){
127 for(var j=0;j<=9;j++){
128 if(j==5)
129 break st; //退出双重循环的办法，输出5例后跳出
130 document.write(j+"*"+i+"="+(j*i)+" ")
131 }
132 document.write("<br>");
133 }
134 break退出循环
135 continue退出本次循环
136 八、函数：是一段完成“指定功能”的已经”命名“的代码段
137 函数只用”调用“才能使用到,通过函数名称调用（可以在声明之前，也可以在声明之后）
138 function test(obj){ //obj是形参
139 功能段
140 return 值；//退出函数
141 }
142 test(x); //x实参
143 函数名不加（）时，这个函数名就代表整个函数
144 alert(typeof(test));//function
145 alert(test);//函数可以看成是变量，弹出test()的函数声明
146 var demo=test;
147 demo(x);//和test(x)一样的效果
148 1.函数名
149 2.参数
150 3.函数体（功能）
151 4.返回值（可选）有返回值才能称之为函数，没有返回值只能称之为过程
152 回调函数：函数通过传递变量不能解决问题，通过传递函数来完成
153
154 九、对象（首字母大写）
155 1.基于对象的操作方式（面向对象主要有三大特性：封装、继承、多态）
156 2.将相关的操作使用一个对象完成，看做是一个整体
157
158 字符串对象
159 数学对象
160 数组对象
161 时间对象
162
163 对象里存的内容：
164 1.属性（变量）
165 2.方法（函数）
166
167 声明对象；
168 使用对象；
169 使用系统对象；
170
171 十、内置JS对象
172 重要：
173 Array对象
174 String对象
175 属性：length
176 方法：
177 bold 把HTML<b>标记放置在对象中的文本两端
178 var str1="abc";
179 str2=str1.bold();//<b>abc</b>
180 charAt 返回指定索引位置处的字符
181 replace 返回根据正则表达式进行文字替换后的字符串的复制。
182 lastIndexOf 返回string对象中字符串最后出现的位置
183 match 使用正则表达式模式对字符串执行查找
184 substr 返回一个从指定位置开始的指定长度的子字符串
185 var s="acdscdgaefes"；
186 var ss=s.substr(2,6);//dscdg
187 toString
188 toUpperCase 所有字母都转换为大写字母
189 toLowerCase 所有字母都转换为小写字母
190 Math对象
191 属性：E、PI
192 方法：
193 abs 绝对值
194 ceil 返回大于等于其数字参数的最小整数
195 floor 返回小于等于其数值参数的最大整数
196 random 返回介于0到1的伪随机数
197 round 返回与给出的数值表达式最接近的整数。
198 max 返回数值表达式中的较大者。
199 min 返回数值表达式中的较小者。
200 var i=300;
201 var x=Math.max(-6,Math.min(6,i));x在正6负6之间
202 RegExp对象
203 Data对象
204 Global对象
205
206 了解：
207 Boolean对象
208 Function对象
209 Number对象
210 Object对象
211
212 十一、数组
213 Array对象
214 数组的作用：只要是批量的数据都需要使用数组声明；
215 声明数组：
216 1.快速声明
217 var arrs=[item1,item2,item3,,,,,,];
218 var arrs=[[1,2,3],[4,5,6],[7,8,9]];
219 2.使用Array对象
220 var arr=new Array("item1","item2","item3");
221 属性：length、prototype
222 方法：
223 concat 连接数组
224 join 连接数组元素
225 pop 移除数组中最后一个元素并返回改元素
226 shift 移除数组中第一个元素并返回改元素
227 push 将新元素添加到一个驻足中
228 reverse 返回一个元素顺序被反转的数组对象
229 slice 返回数组的一段arrayobj.slice(start,end);
230 sort 排序
231 splice 移除数组中的一个或多个元素
232 toString 返回对象的字符串表示objname.toString(进制);
233 DOM:
234 DOM操作：
235
236 事件：
237 一、事件源：任何一个HTML元素body,div,button,p,a,h1等等
238 二、事件：你的操作
239 鼠标事件：
240 click
241 dbclick
242 textcontentmenu(在body)文本菜单（鼠标右键事件）
243 <body oncontextmenu="return test()">
244 <script>
245 function test(){
246 alert("ok");
247 return false;
248 }
249 </scirpt>
250 </body>
251 mouseover
252 mouseout
253 mousedown
254 mouseup
255 mousemove
256 键盘事件：
257 keypress 键盘事件 只能获取数字和字母键（不包括功能键、方向键等）
258 keyup 所有按键
259 keydown 所有按键
260
261 文档：
262 load 页面加载完之后触发
263 unload
264 beforeunload 关闭之前
265
266 表单：
267 submit
268 focus
269 blur
270 change 表单内容改变
271
272 其他：
273 scroll滚动事件
274 selected选择事件
275
276 三、事件处理
277 三种方法加事件：
278 1.标签里加
279 <p on事件="事件处理程序"></p>
280 2.<script></script>标签里加
281 <script>
282 对象.on事件=function(){
283 事件处理程序
284 }
285 </script>
286 3.不常用
287 <script for="事件ID" event="事件">事件处理程序</script>
288
289 事件对象： 事件发生时产生的事件对象
290 属性：
291 1.srcElement 事件源对象，不需要用this一般用this，不过可以用来解决兼容性
292 <p onclick="show()">aaaaa</p>
293 <script>
294 function show(){
295 window.srcElement.innerText="aaa";
296 }
297 </script>
298 2.keyCode 事件发生时的键盘码
299 <body onkeydown="show()">
300 <script>
301 function show(){
302 alert(event.keyCode);
303 }
304 </script>
305 </body>
306 3.clientX,clientY
307 4.screenX,screenY
308 5.returnValue
309 window.event.returnValue=false;
310 6.cancelBubble取消冒泡
311 <body onclick="one()">
312 <img src="images/ren_s_1.png" onclick="two">
313 <script>
314 function one(){
315 alert("body click");
316 }
317 function two(){
318 alert("img click");
319 window.event.cancelBubble=ture; //当出现冒泡事件后，程序执行到这里就不在往下执行。
320 }
321 </script>
322 </body>
323
324 BOM:浏览器对象模型
325 一、浏览器本身就有一些对象，这些对象不用创建就能使用；
326 1.window:当前浏览器窗体的
327 属性：
328 status
329 opener
330 closed
331 方法：
332 alert();
333 confirm(); onclick="return confirm("你确认删除吗？");"
334 setInterval();
335
336 var num=0;
337 var dir=1;
338 setInterval(function(){
339 if(num>40||num<0){
340 dir=-1*dir;
341 }
342 num+=dir;
343 var space="";
344 for(var i=0;i<num;i++){
345 space+=" "； //通过添加空格来实现滚动向右显示；
346 }
347
348 window.status=space+"滚动显示的内容"；
349 },100);
350
351
352 clearInterval();
353 seTimeout();
354 clearTimeout();
355 open(); window.open("url","windowName","windowFeature");
356
357 */
