Web 开发基础之JavaScript
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是默认事件先执行