zoukankan      html  css  js  c++  java
  • 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是默认事件先执行

  • 相关阅读:
    springmvcdemo
    src/main/resorces applicationContext.xml
    maven 中setting.xml
    Git
    刘相兵 AWR
    Oracle 查询SQL 执行次数---hash value
    Oracle 查询重复索引列
    Oracle 史上最全近百条Oracle DBA日常维护SQL脚本指令
    Oracle 查询表对应的索引
    11g RAC 自动升级 PSU
  • 原文地址:https://www.cnblogs.com/cyfiy/p/9493106.html
Copyright © 2011-2022 走看看