前端:js
JavaScript:
参考文章:
1 http://www.cnblogs.com/wupeiqi/articles/5369773.html 2 http://javascript.ruanyifeng.com/oop/basic.html 3 http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html 4 http://www.cnblogs.com/wupeiqi/articles/5602773.html
介绍:
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。内置支持类型。它解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,
用来给HTML网页增加动态功能。
解释器:浏览器。
代码存在位置:
1)单独的js文件。
2)<head>或者<body>标签内。
推荐在<body>标签底部。
原因:因为如果我们加载的js的代码或者文件比较耗时的话,会导致用户查看不到网页的静态资源。而放在<body>标签底部,即时看不到效果或者效果加载过慢,对用户来说,可以直接看到网页的静态资源。
code:
1 <script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script> 2 <script> 3 alert('123'); 4 </script>
3)变量定义:
局部变量:var 变量名=xx。
全局变量:变量名=xxx
需要注意:局部变量有var关键字。容易出错!!!!
code:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <script> 10 function f1(){ 11 var i=2; 12 } 13 alert(i); 14 </script> 15 </body> 16 </html>
由于i我们声明的是局部变量所以alert(i)会报错。
5)数据类型:
JavaScript中,数据类型分为:原始类型和对象类型。
原始类型:
1:数字
2:字符串
3:布尔值
对象类型:
1:字典
2:数组
字典和python里的字典类似。而数组和python里的列表差不多,但并不完全一样。
a:数字:(number)在js中没有浮点型、整型只有数字类型。
1 var a=123; 2 var age=Number(8); 3 parseInt("789"); 4 789 5 parseFloat("1.2"); 6 1.2
b:字符串(string):在python中字符和字符串含义是一样。但是在js中,字符是组成字符串的一部分。
obj.length:字符长度。
1 a='tom' 2 "tom" 3 a.length 4 3
obj.trim:去掉字符前后的空格 字符中间的空格不去掉。
1 a=' t o m ' 2 a.trim() 3 "t o m"
obj.trimLeft()去掉左边的空格。
obj.trimRight()去掉右边的空格。
1 a=' t o m ' 2 " t o m " 3 a.trimLeft() 4 "t o m " 5 a=' t o m ' 6 " t o m " 7 a.trimRight() 8 " t o m"
charAt(n)获取字符串的第几个字符。n是索引。在js中索引也是从0开始。
1 a='evil' 2 "evil" 3 a.charAt(0) 4 "e
obj.concat(obj2,obj3,obj3......)字符串的拼接,类似python中的+
1 a='evil' 2 b='man' 3 "man" 4 t=a.concat(b) 5 "evilman"
obj.indexOf(substring,start):求子字符的索引。如果start不指定索引位置,默认是从左 0开始。
1 a 2 "evil" 3 a.indexOf('i') 4 2
1 a='evill' 2 "evill" 3 a.indexOf('l',4) 4 4
obj.lastIndexOf(substring,start):从右边开始查找子字符串。如果不指定位置,默认从-1开始查找。
1 a='mimi' 2 a.lastIndexOf('m') 3 2
1 a.lastIndexOf('m',1) 2 0
obj.substring(from,to):从from到to之间的字符输出。不写的话,默认是输出所有字符。
1 a.substring(1,3) 2 "im" 3 a.substring() 4 "mimi"
obj.slice(start,end):切片,和python切片一样;左闭右开。
1 a 2 "mimi" 3 a.slice(1,-1) 4 "im
obj.toLowercase();obj.toUpercase()字符串的转换小写、转换大写。
1 a.toLowerCase() 2 "mimi" 3 a.toUpperCase() 4 "MIMI" 5 a="MIMI" 6 "MIMI" 7 a.toLowerCase() 8 "mimi"
obj.split()以什么进行分割。
1 a='mi,mi' 2 "mi,mi" 3 a.split(',') 4 ["mi", "mi"]
写一个跑马灯:
code:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 </head> 7 <body> 8 <span id="sex" style="background-color: yellow">欢迎苍老师来京东视察</span> 9 <script> 10 //1000单位是毫秒 湖之一调用函数用引号。 11 setInterval('f1()',1000); 12 function f1() { 13 //获取对应的<div>标签 14 var tag = document.getElementById('sex'); 15 // 获取对应的<div>标签的内容。 16 var tex = tag.innerText; 17 // 获取字符串的第一个字符。 18 var fitst = tex.charAt(0); 19 // 获取剩余最后字符。 20 var last_tex = tex.substring(1, tex.length); 21 var new_str = last_tex.concat(fitst); 22 // 给id=sex标签的text文件重新赋值。 23 tag.innerText = new_str; 24 } 25 26 </script> 27 </body> 28 </html>
效果:
注意:
在写js代码的时候,每行结束用分号结束。因为css可以进行压缩。如果js压缩成一行的时候,如果不行;分号进行分割的话,会报错。~~~!!!!!!!!
c:布尔类型。
== :比较2个值是否相等。
!= :不等于。
===:比较值和类型相等。
!===:值和类型不相等。
||:或。
&&:且。
注意:在js中,慎用==。因为在js中比较只要值相等类型不一样也是相等!!!
1 a='123'; 2 "123" 3 b=123; 4 123 5 a==b; 6 true
如果比较2个对象的值和类型是否相等。用===
1 a='123'; 2 "123" 3 b=123; 4 123 5 a==b; 6 true 7 a===b; 8 false
同样!=和!==也需要注意:前一个比较值,后一个比较值和类型!!!
1 a='123'; 2 "123" 3 b=123; 4 123 5 a==b; 6 true 7 a===b; 8 false 9 a!==b; 10 true 11 a!=b; 12 false
d:数组。js中的数组和python中的列表类型。但是也有不同。
常见方法:
obj.length :数组大小。
1 a=[1,2,3,] 2 [1, 2, 3] 3 a.length 4 3
obj.push():数组尾部追加元素。和python中append方法类型。
obj.pop():获取数组尾部一个元素。并删除!!!!
obj.unshift():头部插入元素。
obj.shift():头部删除元素。
1 a 2 [1, 2, 3] 3 a.push(4) 4 4 5 a 6 [1, 2, 3, 4] 7 a.pop() 8 4 9 a.unshift(0) 10 4 11 a 12 [0, 1, 2, 3] 13 a.shift() 14 0 15 a 16 [1, 2, 3]
obj.splice(start,deletcount,value....)插入、删除、替换数组中的元素。
1:obj.splic(start,0,value):插入元素。
1 a=[1,2,3,4] 2 [1, 2, 3, 4] 3 a.splice(1,0,0) 4 [] 5 a 6 [1, 0, 2, 3, 4]
2:obj.splic(start,1,value):替换数组中元素。
1 a 2 [1, 0, 2, 3, 4] 3 a.splice(3,1,9) 4 [3] 5 a 6 [1, 0, 2, 9, 4]
3:obj.splic(start,1) 删除元素,1表示一个 2表示删除2个元素 start起始元素。
1 a=[1, 0, 2, 9, 4]; 2 [1, 0, 2, 9, 4] 3 a.splice(1,1) 4 [0] 5 a 6 [1, 2, 9, 4]
1 [1, 2, 9, 4] 2 a.splice(1,2) 3 [2, 9] 4 a 5 [1, 4]
obj.slice():数组切片。和python切片一样。
1 a=[1, 0, 2, 9, 4]; 2 [1, 0, 2, 9, 4] 3 a.slice(0,3) 4 [1, 0, 2]
obj.reverse():数组反转。
1 a=[1, 0, 2, 9, 4]; 2 [1, 0, 2, 9, 4] 3 a.reverse() 4 [4, 9, 2, 0, 1]
obj.join():将数组的元素连接起来。python中字符串join和js不一样,python中'连接符'.join(x),而js相反。
1 a 2 [4, 9, 2, 0, 1] 3 a.join('|') 4 "4|9|2|0|1"
obj.contact(val,val1...):连接数组。
1 a=['a','b'] 2 ["a", "b"] 3 b=[1,2] 4 [1, 2] 5 a.concat(b) 6 ["a", "b", 1, 2]
obj.sort():对数组元素进行排序。
1 t 2 ["a", "b", 1, 2] 3 t.sort() 4 [1, 2, "a", "b"]
JSON.stringify(obj):反序列化,将对象转换成字符串。
JSON.parse(str):序列化,将字符串转换对应的数据类型。
1 t 2 [1, 2, "a", "b"] 3 JSON.stringify(t) 4 "[1,2,"a","b"]" 5 str=JSON.stringify(t) 6 "[1,2,"a","b"]" 7 JSON.parse(str) 8 [1, 2, "a", "b"]
e:字典。js中的字典和python中字典类同。
1 a={'a':1,'g':2} 2 Object {a: 1, g: 2} 3 4 a['g'] 5 2
f:转义:包括2种,一种是URL的转义,一种是字符串的转义。
URL转义:
1 decodeURI( ) URl中未转义的字符 2 decodeURIComponent( ) URI组件中的未转义字符 3 encodeURI( ) URI中的转义字符 4 encodeURIComponent( ) 转义URI组件中的字符
code:
1 <script> 2 var url="https://www.baidu.com/?n=王宝强;"; 3 var t=encodeURI(url);//将字符串转义 4 console.log(t);//输出到浏览器console控制台。 5 var s=decodeURI(t); 6 console.log(s); 7 var n=encodeURIComponent(url); 8 console.log(n) 9 </script>
1 s10.html:11 https://www.baidu.com/?n=%E7%8E%8B%E5%AE%9D%E5%BC%BA; 2 s10.html:13 https://www.baidu.com/?n=王宝强; 3 s10.html:15 https%3A%2F%2Fwww.baidu.com%2F%3Fn%3D%E7%8E%8B%E5%AE%9D%E5%BC%BA%3B
字符串的转义:
1 escape( ) 对字符串转义 2 unescape( ) 给转义字符串解码 3 URIError 由URl的编码和解码方法抛出
1 escape(' ') 2 "%20"
1 unescape("%20") 2 " "
g:eval:js中的eval不仅仅可以处理表达式。也可以处理复杂for循环。相当于python中的evial和exec的结合体。
1 eval('1-2') 2 -1
h:js的时间处理。
当js创建新的对象 需要用new关键字 类似于要创建变量需要var关键字一样。
1 t=new Date 2 Fri Aug 19 2016 22:32:30 GMT+0800 (中国标准时间) 3 t.getFullYear(); 4 2016 5 t.getMonth(); 6 7
1 t=new Date 2 Fri Aug 19 2016 22:34:45 GMT+0800 (中国标准时间) 3 t.getMonth(); 4 7 5 t.getMinutes; 6 getMinutes() { [native code] } 7 t.getMinutes(); 8 34 9 t.setMinutes(10);//直接设置分钟。 10 1471615845983 11 t 12 Fri Aug 19 2016 22:10:45 GMT+0800 (中国标准时间) 13 t.getMinutes(); 14 10 15 t=new Date 16 Fri Aug 19 2016 22:36:08 GMT+0800 (中国标准时间) 17 t.setMinutes(t.getMinutes() +20);//设置比t时间快20分钟 18 1471618568063 19 t.getMinutes(); 20 56
6:语句:
if 和switch 语句:
1 if(条件){ 2 3 }else if(条件){ 4 5 }else{ 6 7 } 8 9 if语句
1 switch(name){ 2 case '3': 3 age = 12; 4 break; 5 case '1': 6 age = 15; 7 break; 8 default : 9 age = 7;//匹配case条件,最后没有匹配的话,匹配default语句。 10 } 11 12 switch语句
循环语句;
for循环:
1:
1 <script> 2 var a=[5,6,7]; 3 for (var i =0;i< a.length;i++){ 4 console.log(i,a[i]) 5 } 6 </script> 7 0 5 8 1 6 9 2 7
2:推荐使用第2种。
1 <script> 2 var a=[5,6,7]; 3 for (var i in a){ 4 console.log(i,a[i]) 5 } 6 </script>
字典循环的,使用的是第2中for循环。循环字典中的key值。
1 <script> 2 var a={'k1':2,'k2':2}; 3 for (var i in a){ 4 console.log(i,a[i]) 5 } 6 </script> 7 k1 2 8 k2 2
while循环:
1 <script> 2 var i=0; 3 while (i<3){ 4 console.log(i); 5 i++; 6 } 7 </script
也有break和continue。
7:异常处理:
语法:
1 try { 2 //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行 3 } 4 catch (e) { 5 // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。 6 //e是一个局部变量,用来指向Error对象或者其他抛出的对象 7 } 8 finally { 9 //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。 10 }
对于js创建对象需要new关键字。
主动抛出异常:
throw new Error('xxxx')
和python不一样,python主动抛出异常:raise Exception('xxx')
7:函数:三种形式。
1 //普通函数 2 function fus() { 3 console.log('fus'); 4 return '222' 5 } 6 var a = fus(); 7 console.log(a); 8 function aaa(arg) { 9 console.log(arg); 10 } 11 aaa(222); 12 //匿名函数 13 var aas = function (arg) { 14 console.log(arg); 15 }; 16 aas(333); 17 //自执行函数 18 (function (arg) { 19 console.log(arg) 20 })(223); //223为参数
函数的作用域:
http://www.cnblogs.com/wupeiqi/p/5649402.html
8:面向对象:
1 //面向对象 2 function MyFoo(name,age) { 3 this.Name = name; 4 this.Age = age; 5 this.Func = function (arg) { 6 return this.Name + arg; 7 } 8 } 9 10 var obj = new MyFoo('liu',18); 11 var ret = obj.Func('meide'); 12 console.log(ret);
模拟对话框:
1:
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 6 <title> 对话框 </title> 7 <style type="text/css"> 8 html,body { 9 height: 100%; 10 } 11 .dialog { 12 position: fixed; 13 top: 50%; 14 left: 50%; 15 margin-left: 0; 16 margin-top: 0; 17 width: 0; 18 height: 0; 19 overflow: hidden; 20 border: 1px solid #999; 21 text-align: center; 22 border-radius: 25px; 23 box-shadow: 5px 5px 5px #999; 24 background: #88f; 25 transition: all 0.3s; 26 } 27 .dialog .close { 28 position: absolute; 29 bottom: 10px; 30 left: 50%; 31 margin-left: -25px; 32 width: 50px; 33 height: 20px; 34 border: 1px solid #999; 35 background: #339; 36 color: #fff; 37 text-align: center; 38 } 39 #dialogswitch { 40 display: none; 41 } 42 #dialogswitch:checked+.dialog { 43 margin-left: -150px; 44 margin-top: -100px; 45 width: 300px; 46 height: 200px; 47 } 48 49 </style> 50 </head> 51 <body> 52 <label for="dialogswitch">点击弹出对话框</label> 53 <input type="checkbox" id="dialogswitch" /> 54 <div class="dialog"> 55 <h3>对话框</h3> 56 <input type="text" value="输入内容"/> 57 <label class="close" for="dialogswitch">commit</label> 58 </div> 59 </body> 60 </html>
2:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <input type="button" onclick="duihua()" value="点击显示提示框" /> 9 <script> 10 function duihua() 11 { 12 var s=prompt("请输入提交内容"); 13 if (s!=null && t!="") 14 { 15 document.write("提交内容:" + t); 16 } 17 } 18 </script> 19 </body> 20 </html>
终结版:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .hide{ 8 display: none !important; 9 } 10 .shade{ 11 position: fixed; 12 top:0; 13 bottom: 0; 14 left: 0; 15 right: 0; 16 /*background-color: black;*/ 17 /*opacity: 0.6;*/ 18 background-color: rgba(0,0,0,.6); 19 z-index: 1000; 20 } 21 .modal{ 22 height: 200px; 23 width: 400px; 24 background-color: white; 25 position: fixed; 26 top: 50%; 27 left: 50%; 28 margin-left: -200px; 29 margin-top: -100px; 30 z-index: 1001; 31 } 32 </style> 33 </head> 34 <body> 35 <div id="o" style="width: 2000px"> </div> 36 <input id='cc'type="button" value="点击" onclick="ADD()"/> 37 <div id="p" class="shade hide"></div> 38 <div id="l" class="modal hide" > 39 <a href="javascript:void(0)" onclick="HIDE()">取消</a><!--javascript:void(0)表示标签不执行任何操作相当于python里的pass 40 onclick 绑定点击事件--> 41 </div> 42 <script> 43 function ADD() { 44 var t=document.getElementById('p'); 45 var t1=document.getElementById('l'); 46 t.classList.remove('hide');//显示遮罩层和对话框 47 t1.classList.remove('hide'); 48 } 49 function HIDE() { 50 var t=document.getElementById('p'); 51 var t1=document.getElementById('l'); 52 t.classList.add('hide');//显示遮罩层和对话框 53 t1.classList.add('hide'); 54 } 55 </script> 56 </body> 57 </html>