JavaScript：
参考文章：
http://www.cnblogs.com/wupeiqi/articles/5369773.html
http://javascript.ruanyifeng.com/oop/basic.html
http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html
http://www.cnblogs.com/wupeiqi/articles/5602773.html
介绍：
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。内置支持类型。它解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，
用来给HTML网页增加动态功能。
解释器：浏览器。
代码存在位置：
1）单独的js文件。
2）<head>或者<body>标签内。
推荐在<body>标签底部。
原因：因为如果我们加载的js的代码或者文件比较耗时的话，会导致用户查看不到网页的静态资源。而放在<body>标签底部，即时看不到效果或者效果加载过慢，对用户来说，可以直接看到网页的静态资源。
code：
<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>
<script>
alert('123');
</script>
3）变量定义：
局部变量：var 变量名=xx。
全局变量：变量名=xxx
需要注意：局部变量有var关键字。容易出错！！！！
code：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <script>
function f1(){
var i=;
}
alert(i);
</script>
</body>
</html>
由于i我们声明的是局部变量所以alert(i)会报错。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAATUAAAApCAIAAADbHikHAAAHrElEQVR4nO1cUUhbVxi+L8JlUPDNl1CY7GX4YpmVrINsVdE5u1FMVSgIde2GocbqGGyMubCtNCtlD60BB6UUN182qqUgC6LQ0gnj1nYjEoxdvE3SmWuz3SZHaEc3Zr893MtNTM7NvbbR3m3/x/cg4fznnP9857vnvycSAQQCwakQnvUECASCKcifBIJzQf4kEJwL8ieB4FwIvxAIBKeCzk8CwbkQEIsRiURnUgBjRCLRmSR/EonOJfmTSHQuyZ9EonNJ/iQSnctif2bnZpYOdkQb9kQb9iwd7MjOzTzzKRKdxakp7NuH5WWLZsvL2LcPU1PPfsI7kOy2cZM/kycDqQb37y/vN5hqcCdPBkzjp6cxNKT/Lcvo6oIs78S8QyGEQpzPP/kE4bB1rCBAEFBXZ9E4l8PFi3C5IAj5NHeesoyGBn3OgoDp6Wc2E43O8acduQuXsfz+5Mr99P4s9MjWmfcnu3Y1tfeV31/ef/9gj2ZO7Y/U3lfYtavWYzvBn0ND1ttXi83lMDkJjwcrK6YtV1bg9eLnn3ciozLcyYX9d9GO3PaXcZvkrpQ/4729mic31Pusf5D1D26o9zWLxnt7rcc28g+FcOYMPB6IIgIBqCoYg6pibEx/OHV1QVGgKOjqgiCgqgq9vUgmwQqMpyg4ehSSBMYQDqOuTj89du+GJCEUwsAAmpshiggGoaqYns6fMIKAhgZTJYwhZBltbbh5E4zh2jV4PKiqwltvYXFRbylJOHoUipKPvXMHPh9EEXV1mJxELgdZRmcngkG4XKipwZUrps18Pnz0EaqrUV+vD6o9I7TUjAlzY0s3ViiEDz6A16uv3uoqFAV9fTh9GnV1EEWMjSGXw+oq/H6IImpqcO6crkVprNbnZ5+hrw+ZjOl2MSQrs7zG9IpOe+10euEFi3DuQpVmYV9uYz2few6NjXozO3Jzk5Uk+P36ZNrbEY/zJTOGEATs2lUhfza1ascm6x/cYOuP19dZ/6D2SbypdWv+dLtx6xaiUbz+OiIRMIZLl3DoEGIxTifZLD7/HOPjfH8mEmhvxw8/IJPBe+9hYkJv9tJL+PHHTUOwrZyf2Sy+/RZeL1ZXkUjg2DFEo/qHPh9isU0lpfZQyOXw6ae6AJEIvF4sLkKW4Xbjyy+xtobZWfT1YW2N36yxEWfO4N49nD6NkREwhvl5tLRgYUFXVNvE3NjS+jYUgseDhQXcu4djxxAOQ1HQ3Y2hIaRSiETQ2Yk7dxAIIBBAJoNYDB0dmJnhx9r0Z5HQlturUA5Zxptv5pUq03nRQuVy/CzsyK2qGBjA2bNQVdy+jc5OyLJdubnJShJefBETE/jtN/h8GB/nSxaLoa0N168jl8PUVGX8udJ6wPDn4/X1DZb350rrga35s/QMHBrSz5bCtQsGUVOjL4oWUt6fw8OmNt6SP7URm5r0x/PcHHbtysujHe+s5IGaSmH//mIVSzerZTNj0UIhnD27aW42h2C8Cr9oKRjDr7/i8GE9x8IQs7cDm3wyf2YyOHECbW24fBlra7Y61xbKLAs7cssyvF79lDN6tik3N9nCNtpMuJJNT8Pv1x+7lapvk/1+s/o22e/nxxeOvbQErxeJhF1/zs3B40E0yt866TSOHIEkIZPB22/D5YIowu/Xi7Gn9GcohLt30dmJ48ehqgiH4fPptV8hiwRLJOD1YmnJYrNaNivjT5tDsH+hPxlDNotIBCMj2LMHN25Yd14Rfxq9xePweiHLduXmJlvqT65khb64cqUy/nxw42ba01Z6P5T2tD24cZMfPz+P1la9VBgdxcAAVJVvngsX0NODRCIfGw6jowPJJBYW4PHoIV99hQ8/hKpidBTPPw9JgiShtxepFH93Fm3KkREEg8hmy+VsxM7Oor4ekQhiMTQ34/vviwOLBFNVHD+OYHDT4790s1o2M8SbmUFTU/79x/4QzJ4/td6++AKZDKJRtLTg6lV+rMZtrW8LZ+XzmfqqdKHMsrAjt6Lg8GFMTiKdht+vv0nalJubbKk/uZJJEtrbEYvh1i243ZXxJxjLnP9aee2Nwu9XlNfeyJz/2jTeuJKuqsoXElzzrK0hEEB1db6iWF3FkSOoqoLHg3fe0UOWl9HUBFHE8DC6uyFJSCbR0qIXD6KIEyegKKb+1Kxu835I2ygXLoAxhMOor99UaXMFi8fR3Q1RzGfB3azlmxn+LLwzMybMjeW+f1r6s7A3lwsXL+oV1xP7s2gmRmXIdWZRySdJ2L0bgoDqagwO5i+lLP1ploVNucNh1NbC5cLoqH5+2pSbm2ypP7mSqSpOnYIoorkZ585VzJ9g7OFPi+n3A3cP9d091Jd+P/Dwp8Un7royvHQJPT1Ip/UVfPVV6zsGIvG/Qsf/f5/2Wqs9nOrr8/fXROL/gI73J5H4Pyb5k0h0Lun3TYhE55J+H4xAcC7InwSCc0H+JBCci6fyZ21tbaXmQSAQSkH+JBCcC/IngeBccPyp5DbGZh89fmwdTP4kELYVHH9OzP/Z+PH6yHd//L1hEUz+JBC2Ffz6dvz6o8aP14e/efjor3LB5E8CYVth+v55eeFP98j6u+cfPHhkWumSPwmEbQX5k0BwLqi+JRCcC7ofIhCcC/p+hUBwLv4BFFEooo/dKtIAAAAASUVORK5CYII=" alt="" />
5）数据类型：
JavaScript中，数据类型分为：原始类型和对象类型。
原始类型：
1：数字
2：字符串
3：布尔值
对象类型：
1：字典
2：数组
字典和python里的字典类似。而数组和python里的列表差不多，但并不完全一样。
a:数字：（number）在js中没有浮点型、整型只有数字类型。
var a=;
var age=Number()；
parseInt("")； parseFloat("1.2")；
1.2
b：字符串（string）：在python中字符和字符串含义是一样。但是在js中，字符是组成字符串的一部分。
obj.length：字符长度。
a='tom'
"tom"
a.length
obj.trim：去掉字符前后的空格 字符中间的空格不去掉。
a=' t o m '
a.trim()
"t o m"
obj.trimLeft()去掉左边的空格。
obj.trimRight()去掉右边的空格。
a=' t o m '
" t o m "
a.trimLeft()
"t o m "
a=' t o m '
" t o m "
a.trimRight()
" t o m"
charAt(n)获取字符串的第几个字符。n是索引。在js中索引也是从0开始。
a='evil'
"evil"
a.charAt()
"e
obj.concat(obj2,obj3,obj3......)字符串的拼接，类似python中的+
a='evil'
b='man'
"man"
t=a.concat(b)
"evilman"
obj.indexOf(substring,start):求子字符的索引。如果start不指定索引位置，默认是从左 0开始。
a
"evil"
a.indexOf('i')
a='evill'
"evill"
a.indexOf('l',)
obj.lastIndexOf(substring,start):从右边开始查找子字符串。如果不指定位置，默认从-1开始查找。
a='mimi'
a.lastIndexOf('m')
a.lastIndexOf('m',)
obj.substring(from,to):从from到to之间的字符输出。不写的话，默认是输出所有字符。
a.substring(,)
"im"
a.substring()
"mimi"
obj.slice(start,end)：切片，和python切片一样；左闭右开。
a
"mimi"
a.slice(,-)
"im
obj.toLowercase();obj.toUpercase()字符串的转换小写、转换大写。
a.toLowerCase()
"mimi"
a.toUpperCase()
"MIMI"
a="MIMI"
"MIMI"
a.toLowerCase()
"mimi"
obj.split()以什么进行分割。
a='mi,mi'
"mi,mi"
a.split(',')
["mi", "mi"]
写一个跑马灯:
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<span id="sex" style="background-color: yellow">欢迎苍老师来京东视察</span>
<script>
//1000单位是毫秒 湖之一调用函数用引号。
setInterval('f1()',);
function f1() {
//获取对应的<div>标签
var tag = document.getElementById('sex');
// 获取对应的<div>标签的内容。
var tex = tag.innerText;
// 获取字符串的第一个字符。
var fitst = tex.charAt();
// 获取剩余最后字符。
var last_tex = tex.substring(, tex.length);
var new_str = last_tex.concat(fitst);
// 给id=sex标签的text文件重新赋值。
tag.innerText = new_str;
} </script>
</body>
</html>
效果：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAAAqCAIAAACcKEYsAAACQElEQVR4nO2UYW5DIQyDuf95pl5v+zFpSoAYG3jdpNlC1SsvBCf52vb6eHl5/az2aVlBBsJKMhBWkoGwkgyElWQgrCQDYSUZCCvJQFhJUyDaz2qtxa/TnXExMWrkyUH1lrs13jp+eGNYfwCI6tT3PtA7Z6wGxzBsnte2K2VSIhCCfaJm7FUpgw3b838OhPQWJKxMLpPEyO45F/ur/xDTeBWIk+mSk+Dzk9MaX3Ux+Gs1ZlDv9KLZ5g0gQOXSvPeAABmuLykz6M+0tDhLPN3uCqlRDwKBPY11LgXaVwXjOveM8QMm0QGlVcGgBCnbu4FgWo89MX1ftgC8BUBs798FIhKAycBHqsgO9AeBGB2onXoaCHCXBIT0E4xjII1Vs1/65zF9FohY7bQX/CuwQz7wOgFCzTx+AiBiZJd22jSVngeBiP5Aa6Zt6qwsS2UewPBAd/CM8cHl7RiL1iYZSLcjPWCHNDYc3PqHqMqoDMXrl00/AQI0fW/ApDEmZ4XC2JwloJUTEgh46nkgyCmSZYPKtwdWPd+KJy0tc1a3S35WwZeAiM4OewcOVjR0v6Tumc9f+cEBy/wMEGTT1FokkzeBUGve8rpGgQyTCCDzqwPm/VR9U80wkTeBYAqoRGbArdnooNIpFA9uWf5szv0wNeL+hykcAMEPWFqYp3MgToJVD9Ng3CXeD8+9smQgrP8rA2ElGQgryUBYSQbCSjIQVpKBsJIMhJVkIKwkA2ElGQgryUBYSQbCSjIQVpKBsJIMhJX0BVYj2HdPh1UeAAAAAElFTkSuQmCC" alt="" />
注意：
在写js代码的时候，每行结束用分号结束。因为css可以进行压缩。如果js压缩成一行的时候，如果不行；分号进行分割的话，会报错。~~~！！！！！！！！
c:布尔类型。
== ：比较2个值是否相等。
!= ：不等于。
===：比较值和类型相等。
!===:值和类型不相等。
||：或。
&&：且。
注意：在js中，慎用==。因为在js中比较只要值相等类型不一样也是相等！！！
a='';
""
b=; a==b;
true
如果比较2个对象的值和类型是否相等。用===
a='';
""
b=; a==b;
true
a===b;
false
同样!=和!==也需要注意：前一个比较值，后一个比较值和类型！！！
a='';
""
b=; a==b;
true
a===b;
false
a!==b;
true
a!=b;
false
d:数组。js中的数组和python中的列表类型。但是也有不同。
常见方法：
obj.length :数组大小。
a=[,,,]
[, , ]
a.length
obj.push()：数组尾部追加元素。和python中append方法类型。
obj.pop()：获取数组尾部一个元素。并删除！！！！
obj.unshift():头部插入元素。
obj.shift()：头部删除元素。
a
[, , ]
a.push() a
[, , , ]
a.pop() a.unshift() a
[, , , ]
a.shift() a
[, , ]
obj.splice(start,deletcount,value....)插入、删除、替换数组中的元素。
1：obj.splic(start,0,value):插入元素。
a=[,,,]
[, , , ]
a.splice(,,)
[]
a
[, , , , ]
2：obj.splic(start,1,value):替换数组中元素。
a
[, , , , ]
a.splice(,,)
[]
a
[, , , , ]
3：obj.splic(start,1) 删除元素，1表示一个 2表示删除2个元素 start起始元素。
a=[, , , , ];
[, , , , ]
a.splice(,)
[]
a
[, , , ]
[, , , ]
a.splice(,)
[, ]
a
[, ]
obj.slice():数组切片。和python切片一样。
a=[, , , , ];
[, , , , ]
a.slice(,)
[, , ]
obj.reverse():数组反转。
a=[, , , , ];
[, , , , ]
a.reverse()
[, , , , ]
obj.join():将数组的元素连接起来。python中字符串join和js不一样，python中'连接符'.join(x)，而js相反。
a
[, , , , ]
a.join('|')
"4|9|2|0|1"
obj.contact(val,val1...)：连接数组。
a=['a','b']
["a", "b"]
b=[,]
[, ]
a.concat(b)
["a", "b", , ]
obj.sort():对数组元素进行排序。
t
["a", "b", , ]
t.sort()
[, , "a", "b"]
JSON.stringify(obj):反序列化，将对象转换成字符串。
JSON.parse(str):序列化，将字符串转换对应的数据类型。
t
[, , "a", "b"]
JSON.stringify(t)
"[1,2,"a","b"]"
str=JSON.stringify(t)
"[1,2,"a","b"]"
JSON.parse(str)
[, , "a", "b"]
e:字典。js中的字典和python中字典类同。
a={'a':,'g':}
Object {a: , g: }
a['g']
f:转义：包括2种，一种是URL的转义，一种是字符串的转义。
URL转义：
decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
code：
<script>
var url="https://www.baidu.com/?n=王宝强;";
var t=encodeURI(url);//将字符串转义
console.log(t);//输出到浏览器console控制台。
var s=decodeURI(t);
console.log(s);
var n=encodeURIComponent(url);
console.log(n)
</script>
s10.html: https://www.baidu.com/?n=%E7%8E%8B%E5%AE%9D%E5%BC%BA;
s10.html: https://www.baidu.com/?n=王宝强;
s10.html: https%3A%2F%2Fwww.baidu.com%2F%3Fn%3D%E7%8E%8B%E5%AE%9D%E5%BC%BA%3B
字符串的转义：
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出
escape(' ')
"%20"
unescape("%20")
" "
g:eval:js中的eval不仅仅可以处理表达式。也可以处理复杂for循环。相当于python中的evial和exec的结合体。
eval('1-2')
-
h：js的时间处理。
当js创建新的对象 需要用new关键字 类似于要创建变量需要var关键字一样。
t=new Date
Fri Aug :: GMT+ (中国标准时间)
t.getFullYear(); t.getMonth();
t=new Date
Fri Aug :: GMT+ (中国标准时间)
t.getMonth(); t.getMinutes;
getMinutes() { [native code] }
t.getMinutes(); t.setMinutes();//直接设置分钟。 t
Fri Aug :: GMT+ (中国标准时间)
t.getMinutes(); t=new Date
Fri Aug :: GMT+ (中国标准时间)
t.setMinutes(t.getMinutes() +);//设置比t时间快20分钟 t.getMinutes();
6：语句：
if 和switch 语句：
if(条件){
}else if(条件){
}else{
}
if语句
switch(name){
case '':
age = ;
break;
case '':
age = ;
break;
default :
age = ;//匹配case条件，最后没有匹配的话，匹配default语句。
}
switch语句
循环语句;
for循环：
1：
<script>
var a=[,,];
for (var i =;i< a.length;i++){
console.log(i,a[i])
}
</script>
2：推荐使用第2种。
<script>
var a=[,,];
for (var i in a){
console.log(i,a[i])
}
</script>
字典循环的，使用的是第2中for循环。循环字典中的key值。
<script>
var a={'k1':,'k2':};
for (var i in a){
console.log(i,a[i])
}
</script>
k1
k2
while循环：
<script>
var i=;
while (i<){
console.log(i);
i++;
}
</script
也有break和continue。
7：异常处理：
语法：
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
对于js创建对象需要new关键字。
主动抛出异常：
throw new Error('xxxx')
和python不一样，python主动抛出异常：raise Exception('xxx')
7:函数：三种形式。
//普通函数
function fus() {
console.log('fus');
return ''
}
var a = fus();
console.log(a);
function aaa(arg) {
console.log(arg);
}
aaa();
//匿名函数
var aas = function (arg) {
console.log(arg);
};
aas();
//自执行函数
(function (arg) {
console.log(arg)
})(); //223为参数
函数的作用域：
http://www.cnblogs.com/wupeiqi/p/5649402.html
8：面向对象：
//面向对象
function MyFoo(name,age) {
this.Name = name;
this.Age = age;
this.Func = function (arg) {
return this.Name + arg;
}
} var obj = new MyFoo('liu',);
var ret = obj.Func('meide');
console.log(ret);
模拟对话框：
1：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 对话框 </title>
<style type="text/css">
html,body {
height: %;
}
.dialog {
position: fixed;
top: %;
left: %;
margin-left: ;
margin-top: ;
width: ;
height: ;
overflow: hidden;
border: 1px solid #;
text-align: center;
border-radius: 25px;
box-shadow: 5px 5px 5px #;
background: #88f;
transition: all .3s;
}
.dialog .close {
position: absolute;
bottom: 10px;
left: %;
margin-left: -25px;
width: 50px;
height: 20px;
border: 1px solid #;
background: #;
color: #fff;
text-align: center;
}
#dialogswitch {
display: none;
}
#dialogswitch:checked+.dialog {
margin-left: -150px;
margin-top: -100px;
width: 300px;
height: 200px;
} </style>
</head>
<body>
<label for="dialogswitch">点击弹出对话框</label>
<input type="checkbox" id="dialogswitch" />
<div class="dialog">
<h3>对话框</h3>
<input type="text" value="输入内容"/>
<label class="close" for="dialogswitch">commit</label>
</div>
</body>
</html>
2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" onclick="duihua()" value="点击显示提示框" />
<script>
function duihua()
{
var s=prompt("请输入提交内容");
if (s!=null && t!="")
{
document.write("提交内容：" + t);
}
}
</script>
</body>
</html>
终结版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none !important;
}
.shade{
position: fixed;
top:;
bottom: ;
left: ;
right: ;
/*background-color: black;*/
/*opacity: 0.6;*/
background-color: rgba(,,,.);
z-index: ;
}
.modal{
height: 200px;
width: 400px;
background-color: white;
position: fixed;
top: %;
left: %;
margin-left: -200px;
margin-top: -100px;
z-index: ;
}
</style>
</head>
<body>
<div id="o" style="width: 2000px"> </div>
<input id='cc'type="button" value="点击" onclick="ADD()"/>
<div id="p" class="shade hide"></div>
<div id="l" class="modal hide" >
<a href="javascript:void(0)" onclick="HIDE()">取消</a><!--javascript:void()表示标签不执行任何操作相当于python里的pass
onclick 绑定点击事件-->
</div>
<script>
function ADD() {
var t=document.getElementById('p');
var t1=document.getElementById('l');
t.classList.remove('hide');//显示遮罩层和对话框
t1.classList.remove('hide');
}
function HIDE() {
var t=document.getElementById('p');
var t1=document.getElementById('l');
t.classList.add('hide');//显示遮罩层和对话框
t1.classList.add('hide');
}
</script>
</body>
</html>