JavaScript
独立的语言,浏览器具有js解释器
javascript可以单独放在一个文件中,然后在html中调用:
<script src="commons.js"></script>
javascript可以放在head标签里,也可以放到body标签的最下面,一般推荐放到body标签的最下面
单行注释://
多行注释:/* 要注释的内容 */
变量
全局变量,如:name = 'jack'
局部变量,如:var name = 'jack'
javascript 中不区分整数值和浮点数值,javascript中所有数字均用浮点数值表示
parseInt(...):将某值转换成数字,不成功则NaN
parseFloat(...):将某值转换成浮点数,不成功则NaN
写js代码
可以在html文件中写,
临时写,在浏览器的console
字符串
字符串是由字符组成的数组,但在JavaScript中字符串是不可变的:可以访问字符串任意位置的文本,但是JavaScript并未提供修改已知字符串内容的方法。
obj = 'hello' "hello" obj.length 5 obj.charAt(0) "h" obj.trimLeft() "hello" obj.trimRight() "hello" obj.indexOf() -1 obj.lastIndexOf() -1 obj.concat(' world') "hello world" obj.substring(1,3) "el" obj.slice(1,3) "el" obj.toLowerCase() "hello" obj.toUpperCase() "HELLO" obj.split() ["hello"] obj.search('l') 2 obj.match('l') ["l", index: 2, input: "hello", groups: undefined]
定时器
setInterval(“执行代码函数()”,间隔时间单位毫秒)
关于定时器的一个使用例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function f1(){ console.log(1) } setInterval("f1()",2000) </script> </body> </html>
从结果可以看出每两秒就会打印一个1
console.log()可以调试输出信息
通过定时器实现一个跑马灯的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">欢迎光临</div> <script> function f1(){ //根据标签获取指定标签的内容 var tag=document.getElementById('i1') //获取标签内的内容 var conent = tag.innerText; var f = conent.charAt(0); var l = conent.substring(1,conent.length); var new_content = l + f; tag.innerText = new_content; } setInterval("f1()",200) </script> </body> </html>
其中document.getElementById('i1') 可以通过id找到相应的标签
通过innerText可以找到对应的文本内容
布尔值
这里的true和false是小写的
== 比较值相等
!= 不等于
=== 比较值和类型都相等
!== 不等于
|| 或
&& 且
数组(即Python里的列表)
names = ['tom','jack','lily','lucy','linda'] (5) ["tom", "jack", "lily", "lucy", "linda"] names.length 5 names.push('dave') 6 names (6) ["tom", "jack", "lily", "lucy", "linda", "dave"] names.pop() "dave" names.unshift('jones') 6 names (6) ["jones", "tom", "jack", "lily", "lucy", "linda"] names.shift() "jones" names.splice(1,0,'mike') [] names (6) ["tom", "mike", "jack", "lily", "lucy", "linda"] names.splice(3,1,'jim') ["lily"] names (6) ["tom", "mike", "jack", "jim", "lucy", "linda"] names.splice(4,1) ["lucy"] names (5) ["tom", "mike", "jack", "jim", "linda"] names.slice(1,3) (2) ["mike", "jack"] names.reverse() (5) ["linda", "jim", "jack", "mike", "tom"] names.join('-') "linda-jim-jack-mike-tom" names.concat('zhangsan','lisi') (7) ["linda", "jim", "jack", "mike", "tom", "zhangsan", "lisi"] names (5) ["linda", "jim", "jack", "mike", "tom"] names.sort() (5) ["jack", "jim", "linda", "mike", "tom"]
for 循环
循环列表
l = [11,22,33,44] for (var item in l){ console.log(l[item]) } 11 22 33 44
这样的循环是循环的索引
循环字典
d = {'k1':'v1','k2':'v2','k3':'v3'}
for (var item in d){ console.log(d[item]) } v1 v2 v3
循环字典是循环的key
另外一种for循环方式
for(var i=0;i<10;i++){ }
但是这种循环不能支持字典
条件语句
if (条件){ } else if (条件){ } else{ }
还支持另一种条件语句,如下:
name = '3' switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }
函数
普通函数
function 函数名 (形参){ 函数体 }
匿名函数
setInterval(function(){ console.log(123) },5000)
自执行函数(函数创建并且自动执行)
//普通函数 function func(arg){ console.log(arg); } func(1) //自执行函数 (function(arg){ console.log(arg); })(1)
转义
decodeURI() URI中未转义的字符
decodeURIComponent() URI组件中的未转义字符
encodeURI() URI中的转义字符
encodeURIComponent() 转义URI组件中的字符
escape() 对字符串转义
unescape() 给转义字符串解码
URIError 由URI的编码和解码方法抛出
演示例子如下:
所以转义的一个应用就是:将数据转义后保存在cookie
eval
python:
val=eval(表达式)
=exec(执行代码)
JavaScript:
eval是Python中eval和exec的集合。
时间
Date类
var d = new Date()
d.getXXX 表示获取
d.setXXX 表示设置
作用域(非常重要)
其他语言大部分是以代码块为作用域
C#中:
public void Func(){ if(1==1){ string name = "C#" } console.writeline(name) }
如果按照上面的执行Func()调用函数就会报错,因为这里是以代码块为作用域
即if后面的{}为作用域,name是在if的代码块里定义的所以当出了这个代码块就无法找到定义的name
所以代码需要改为如下:
public void Func(){ if(1==1){ string name = "C#" console.writeline(name) } }
python中:
def func(): if 1==1: name = "python" print(name) func()
python的作用域和C#中就不相同了,python的这种调用方式就不会报错
因为在python中是以函数作为作用域
JavaScript中:
关于js的作用域的一个总结:
1. 以函数作为作用域(默认,除了let)
function func(){ if(1==1){ var name = "js" } console.log(name) } func() //运行结果 js
2. 函数的作用域在函数未被调用之前,已经创建
function func(){ if(1==1){ var name = "js" } console.log(name) } func() //运行结果 js
3. 函数的作用域存在作用域链,并且也是在被调用之前创建
示例一:
xo = "alex" function func(){ //var xo = 'eric'; function inner(){ //var xo = 'tony'; console.log(xo); } inner() } func() //运行结果 alex
示例二:
xo = "alex" function func(){ var xo = 'eric'; function inner(){ console.log(xo); } return inner; } var ret = func() ret() //运行结果 eric
示例三:
xo = "alex" function func(){ var xo = 'eric'; function inner(){ console.log(xo); } var xo = 'tony' return inner; } var ret = func() ret() //运行结果 tony
4. 函数内局部变量提前声明
function func(){ console.log(xxoo); } func() //程序直接报错 function func(){ console.log(xxoo); var xxoo = 'alex'; console.log(xxoo); } func() //执行结果 undefined alex
JavaScript面向对象
function Foo(n){
this.name=n;
}
var obj = new Foo('ww');
this代指对象(类似python 中的self)
创建对象时,new函数()
原型
function Foo(n){
this.name=n;
}
#Foo的原型
Foo.prototype={
"sayName":function(){
console.log(this.name)
}
}
调用
obj1 = new Foo('we')
obj1.sayName()
obj2=new Foo('ss')
obj2.sayName()
JavaScript的高级知识:词法分析 参考 https://www.cnblogs.com/zhaof/p/6100472.html
JS正则
-test 判断字符串是否符合规定的正则表达式
-exec 获取匹配的数据
test示例
从上述的例子我们可以看出,如果rep.test匹配到了就返回true,否则返回false
exec示例
上述匹配的结果是一个数组,但是不管匹配几次都只显示第一个
正则中的分组
全局匹配
没有分组的情况下,会依次从第一个开始取,获取到最后一个如果再次获取,就会获得null,然后再从第一个开始
如果这个时候采用分组效果如下:
正则表达式
/…/ 用于定义正则表达式
/…/g 表示全局匹配
/…/i 表示不区分大小写
/../m 表示多行匹配
这里的多行匹配需要注意:
默认情况下js的正则匹配就是多行匹配
通过下面例子理解加上m之后的正则匹配
从例子可以看出只匹配到第一行的内容,第二行的并没有匹配,这里是因为整个text是一个字符串,所以当出现^以什么开头的时候,是从这个字符串开头开始的,所以只能匹配到一个,如果这个时候想要匹配到多个,实现方法就是通过m参数
这样相当于都是把每一行作为一个字符串去匹配,所以匹配到第二行的Java
关于事件的执行顺序
有很多标签有自己的事件,同时我们也可以再次给他赋予权限,这样就会产生顺序的问题
默认事件先执行:
checkbox标签
自定义事件先执行(大部分都是自定义事件优先级高):
a标签 submit标签
关于checkbox事件执行顺序的一个验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="checkbox" /> <script src="jquery-1.12.4.js"></script> <script> $(":checkbox").click(function () { var v = $(this).prop('checked'); console.log(v); }) </script> </body> </html>
分析:
如果是自己定义的事件先执行,那么当选中的时候首先应该打印false,然后被选中,但是打印的是true,所以,可以判断是checkbox是默认事件先执行