前端：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>

 

posted @ 2016-08-18 18:21  evil_liu  阅读(791)  评论(0)  编辑  收藏  举报