兄弟连javascript学习笔记

Posted 2020-08-26

  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)+"&nbsp")
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 */