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

  • 相关阅读:
    POJ 3114 Tarjan+Dijkstra
    278. First Bad Version
    209. Minimum Size Subarray Sum
    154. Find Minimum in Rotated Sorted Array II
    153. Find Minimum in Rotated Sorted Array
    710. Random Pick with Blacklist
    767. Reorganize String
    524. Longest Word in Dictionary through Deleting
    349. Intersection of Two Arrays
    350. Intersection of Two Arrays II
  • 原文地址:https://www.cnblogs.com/cyfiy/p/9493106.html
Copyright © 2011-2022 走看看