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是默认事件先执行

原文地址:https://www.cnblogs.com/cyfiy/p/9493106.html