• JavaScript基础


    JavaScript

    Javascript简称JS,是脚本语言,JS语言开发的文件以.js为后缀,通过在HTML文件中引入该js文件来控制html代码的交互功能以及前台数据处理的业务逻辑(js语言代码也可以直接写在html文件中),采用的ECMAScript语法,属于编程语言。

    ECMAScript目前普遍使用的存在ES5与ES6两个版本

    JS的引入方式

    1. 行间式:JS代码书写在标签的事件全局属性中
    2. 内联式:写在scrip标签中,一般放在body标签的最下面,因为代码自上而下运行,放在body标签的最下方,会保证页面所有标签都加载完毕,html再去加载js文件,那么js脚步文件就会更好的控制页面标签的人机交互了
    3. 外联式:写在外部js文件中,在html页面中用script标签引入js文件,建议放在body最下方
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>引入</title>
        <style>
            #box {
                 200px;
                height: 200px;
                background-color: orange;
            }
            /*#box:active {*/
                /*background-color: red;*/
            /*}*/
        </style>
    
    </head>
    <body>
        <!-- 行间式 -->
        <!--<div id="box" onclick="this.style.backgroundColor = 'red'"></div>-->
        <div id="box"></div>
    
    </body>
    <!-- 内联式 -->
    <!--<script>-->
        <!--box.style.backgroundColor = 'pink'-->
    <!--</script>-->
    <script src="js/外联.js">
        // 链接了外部js的script标签,就相当于单标签,内部代码块会自动屏蔽
        box.style.borderRadius = '50%'
    </script>
    </html>
    
    # js/外联.js
    
    box.style.background = 'blue'
    

    JS的基础语法

    变量

    JS变量不同于python变量,但是变量结构相差不大,也有变量名,赋值符号,变量值,但是需要特定的关键字来定义,现在JS有两种语法共同存在,ES5/ES6这两个版本,但浏览器会自动识别版本,无需担心语法问题

    四种定义变量的关键字

    1. 不写:全局变量
    2. var:局部变量
    3. let:块级变量
    4. const:常量
    n1 = 10;  // 全局变量
    // console.log(n1);  //打印
    var n2 = 20;  // 局部变量
    // alert(n2);
    let n3 = 30;  // 块级变量
    // document.write(n3);
    const N4 = 40;  // 常量
    // console.log(N4);
    // N4 = 50;  // 报错,常量值不能修改
    

    变量名命名规范

    1. 由字母,数字,_,$组成,不能以数字开头(可以包含中文字符)
    2. 区分大小写
    3. 不能出现关键字及保留字
    abstract arguments boolean break byte
    case catch char class* const
    continue debugger default delete do
    double else enum* eval export*
    extends* false final finally float
    for function goto if implements
    import* in instanceof int interface
    let long native new null
    package private protected public return
    short static super* switch synchronized
    this throw throws transient true
    try typeof var void volatile
    while with yield

    四种变量的分析

    function fn() {
        n1 = 10; // 只有全局变量外界才能访问
        var n2 = 20;
        let n3 = 30;
        const n4 = 40;
    }
    fn();
    console.log(n1);
    
    if (true) {  // 块级作用域
        n1 = 10;
        var n2 = 20;
        let n3 = 30;  // let与const声明的变量有块级作用域
        const n4 = 40;  // 常量
    }
    console.log(n1);
    console.log(n2);
    {
        let aaa = 10
        }
    

    基本数据类型

    值类型

    // 数字类型:number
    var num = 10;
    const PI = 3.14;
    console.log(typeof(num), num);  // 结果:number  10
    
    // 字符串类型:string
    var s1 = "双引号可以表示字符串";
    var s2 = '单引号可以表示字符串';
    var s3 = `多行字符串:
    再来一行`;
    console.log(typeof(s1), s1);  // 结果:string  双引号可以表示字符串
    
    // 布尔类型:boolean
    var b1 = true;
    var b2 = false;
    console.log(typeof(b1), b1);  // 结果:string  双引号可以表示字符串
    
    // 未定义类型:undefined
    var u1;
    var u2 = undefined;
    console.log(typeof(u1), u1);  // 结果:undefined  undefined
    

    引用类型

    // 函数类型:function
    function fn1() {}
    var fn2 = function() {};
    console.log(typeof(fn1), fn1);  // 结果:function  ƒ fn1() {}
    
    // 对象类型:object
    var obj1 = {}
    console.log(typeof(obj1), obj1);  // 结果:function  {}
    
    

    其它

    // 空类型
    var jerry = null;
    console.log(typeof jerry, jerry);
    
    // Array对象类型:
    var arr1 = [1, 2, 3, 4, 5]
    console.log(typeof(arr1), arr1);  // 结果:object  (5) [1, 2, 3, 4, 5]
    
    // 时间
    var date = new Date();
    console.log(typeof date, date);
    
    // 功能性
    随机数: Math.random() - (0, 1)
    console.log(Math.random());
    
    
    
    // 需求:在正整数区间[m, n]随机一个数
    // (0, 1) * 10 => (0, 10) 取值parseInt() => [0, 9] + 5 => [5, 14]
    // parseInt(Math.random() * 11) + 5 => [5, 15]
    // [m, n] => +的值就是m,*的值 n - m + 1
    
    // ① parseInt(Math.random() * (n - m + 1)) + m => [m, n]
    var r_num = parseInt(Math.random() * (14 - 7 + 1)) + 7;
    console.log(r_num);
    
    // ② (0, 1) * 超大的数 取整
    // 一个正整数 % num => [0, num-1] + m => [m, num-1+m] => n = num+m-1 => num = n-m+1
    // 一个正整数 % (n-m+1) + m => [m, n]
    var random_num = parseInt( Math.random() * 10000000000 % (14 - 7 + 1) ) + 7;
    console.log(random_num)
    

    数据类型的使用

    • 字符串
    // string => str
    // 1)声明
    // 单引号 | 双引号 | 反引号
    
    // 2)字符串拼接
    res = 'you are' + ' ' + 'good man!';
    console.log(res);
    
    // 3)字符串的切片
    s = 'you are good man!';
    n_s = s.slice(8, 12);
    console.log(n_s);  // good
    
    // 4)字符串替换
    s = 'you are good man!';
    n_s = s.replace('man', 'woman');
    console.log(n_s);
    
    // 5)字符串拆分
    s = 'you are good man!';
    res = s.split(' ');
    console.log(res);
    
    // 6)字符串迭代
    s = 'abcdef';
    for (num of s) {
        console.log(num)
    }
    
    • 数组
    // array => list
    // 1)声明
    arr = [1, 4, 2, 3, 5];
    console.log(arr);
    // 2)反转
    arr.reverse();
    console.log(arr);
    // 3)组合
    str = arr.join('@');
    console.log(str);
    // 4)切片
    new_arr = arr.slice(1, 4);
    console.log(new_arr);
    // 5)排序
    arr.sort();
    console.log(arr);
    // 6)增删改查
    // 查:只有正向索引
    console.log(arr[2]);
    // 增
    arr.push(888);  // 尾增
    console.log(arr);
    arr.unshift(666);  // 首增
    console.log(arr);
    // 删
    res = arr.pop();  // 尾删
    console.log(arr, res);
    res = arr.shift();  // 首删
    console.log(arr, res);
    
    // 增删改 综合方法:splice
    // 三个参数:开始操作的索引 操作的位数 操作的结果(可变长)
    arr = [1, 2, 3, 4, 5];
    // 数组长度:arr.length
    arr.splice(arr.length, 0, 666, 888);
    console.log(arr);
    
    • 字典(对象)
    // object => dict
    // 1)定义
    height = 180;
    dic = {
        'name': 'Owen',  // 本质是对象
        age: 18,  // 所有的key(属性名)都是字符串类型,所以可以省略引号
        height,  // 当value为变量,且变量名与key同名,可以省略value
    };
    console.log(dic);
    
    // 2)访问
    console.log(dic.name);
    console.log(dic['age']);
    
    // 3)增删改
    // 增
    dic.sex = '男';
    console.log(dic);
    // 删
    delete dic.sex;
    console.log(dic);
    // 改
    dic.name = 'Nick';
    console.log(dic);
    

    基本运算符

    算数运算符

    假设:n = 5

    运算符 描述 例子 x结果 n结果
    + 加法 x=n+2 7 5
    - 减法 x=n-2 3 5
    * 乘法 x=n*2 10 5
    / 除法 x=n/2 2.5 5
    % 取模(余数) x=n/2 1 5
    ++ 自增 x=++n 6 6
    x=n++ 5 6
    -- 自减 x=--n 4 4
    x=n-- 5 4

    赋值运算符

    假设:x=5,y=5

    运算符 例子 等同于 运算结果
    = x=y 5
    += x+=y x=x+y 10
    -= x-=y x=x-y 0
    *= x*=y x=x*y 25
    /= x/=y x=x/y 1
    %= x%=y x=x%y 0

    比较运算符

    假设:x = 5

    运算符 描述 比较 结果
    == 等于 x=="5" true
    === 绝对等于 x==="5" false
    != 不等于 x!="5" fales
    !== 不绝对等于 x!=="5" true
    > 大于 x>5 false
    < 小于 x<5 false
    >= 大于等于 x>=5 true
    <= 小于等于 x<=5 true

    逻辑运算符

    假设:n = 5

    运算符 描述 例子 结果
    && x=n>10&&++n x=false,n=5(短路)
    || x=n<10||n-- x=true,n=5(短路)
    ! x=!n x=false,x=5

    三目运算符

    语句:结果 = 条件表达式 ? 结果1 : 结果2;

    假如条件表达式成立,则把结果1赋值给结果,否则就把结果2赋值给结果

    案例

    // 1)算术运算符
    console.log(5 / 2);  // 2.5
    console.log(parseInt(5 / 2));
    console.log(parseFloat(5 / 2));
    
    // parseInt | parseFloat 可以完成 string => number
    res = parseInt('3.14.15abc');
    console.log(res);  // 从头往后找整数部分
    
    res = parseFloat('3.14.15abc');
    console.log(res);  // 从头往后找小数部分(最多只识别一个小数点)
    
    res = parseInt('a3.14.15abc');  // NaN
    console.log(typeof res, res);
    
    // 2) 弱语言类型的js
    res = 10 + '5';
    console.log(res);  // 字符串:105
    res = 10 - '5';
    console.log(res);  // 数字:5
    // 数字 => 字符串
    res = '' + 5;
    console.log(typeof res, res);
    // 字符串 => 数字
    res = +'5';
    console.log(typeof res, res);
    
    // 3) 自增自减
    num = 10;
    num += 1;
    console.log(num);
    num++;
    console.log(num);
    num--;
    console.log(num);
    // 了解:符号 在前优先级高于一切运算符,在后优先级比赋值符还低
    // ++在前先自增再运算;++在后先运算再自增
    num = 10;
    res = num++;
    console.log(num, res);
    
    num = 10;
    res = ++num;
    console.log(num, res);
    
    // 4) 比较运算符的比较
    console.log(5 == '5');  // true,只做值比较
    console.log(5 === '5');  // false,做值与类型比较
    console.log(5 != '5');  // false,只做值比较
    console.log(5 !== '5');  // true,做值与类型比较
    
    // 5)逻辑运算符
    console.log(true && true);
    console.log(false || false);
    console.log(!true);
    // 短路现象
    // &&: 有假则假,前为假,后不用判断
    num = 10;
    console.log(false && ++num);  // num++ | ++num 都被短路不会被执行
    console.log(num);
    
    console.log(true || ++num);  // num++ | ++num 都被短路不会被执行
    console.log(num);
    
    // 6)三元运算符(三目运算符)
    res = 5 == '5' ? '值相等':'值不等';
    console.log(res);
    

    流程控制

    分支结构

    • if分支结构
    /*
     * if (条件) {
     *     代码块1
     * }
     * else if (条件) {
     *     代码块2
     * }
     * else {
     *     代码块3
     * }
     */
    var num = parseInt(Math.random() * 16);
    console.log(num);
    if (num > 10) {
        console.log("产生的数超过10")
    } else if (5 <= num && num <= 10) {
        console.log("产生的数间于5~10")
    } else {
        console.log("产生的数不超过5")
    }
    
    • switch分支结构
    /*
     * switch(值) {
     * case 条件1:
     * 		代码块1;
     *		break;   // 没有break会自动执行下一个case里面的代码块,直到遇到break或程序结束
     * case 条件2:
     *		代码块2;
     *		break;
     * ...
     * default:   // 没有走任何case,会进入default分支
     * 		代码块3;
     */
    
    month = parseInt(Math.random() * (12 - 1 + 1)) + 1;
    console.log(month);
    switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            console.log('%s月31天', month);
            break;  // 用来结束case,跳出switch分支结构,多个分支可以共享一个break
        case 2:
            console.log('2月28天');
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            console.log('%s月30天', month);
            break;
        default:
            console.log('月份参数有误');
    }
    

    循环结构

    • for循环
    for (循环变量①; 条件表达式②; 循环变量增量③) {
        代码块④;
    }
    // for循环执行的顺序:① ②④③ ... ②④③ ②,入口为①,出口为②,②④③就是循环过程
    
    // 案例:
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    
    // 结果:
    0
    1
    2
    3
    4
    
    // for…in迭代器
    var arr = [1, 2, 3, 4, 5]
    for (num in arr) {
    	console.log(num);
    }
    
    // 结果:
    0
    1
    2
    3
    4
    
    • while循环
    while (条件表达式) {
        代码块;
    }
    // 条件满足执行代码块,条件不满足跳出循环
    
    // 案例:
    var i = 0;
    while (i < 5) {
        console.log(i);
        i++;
    }
    
    // 结果:
    0
    1
    2
    3
    4
    
    • do...while 循环:先执行一次循环体,再判断条件
    var num = 90;
    do {
        console.log(num);
        num++;
    } while (num <= 10);
    
    //结果:
    90
    
    """
    1) for:解决知道循环次数的循环
    
    2) while:
      	  解决一切for与do...while能解决的问题(结合函数的思想)
       	  解决不知道循环次数的循环(循环用break结合)
    
    3) do...while:完成循环体必须要提前执行一次的循环
    """
    

    函数

    函数的组成

    • 函数名 :函数名存放的就是函数的地址
      通过 函数名() 调用函数的

    • 参数列表:将外界资源传给内部的桥梁
      你传你的,我收我的,用...接收可变长

    • 函数体 : 解决需求的代码块
      功能代码块

    • 返回值 : 将内部数据反馈给外部
      只能返回一个值,不写或空return返回undefined

    定义函数的三种方式

    """ 
    第一种:
    关键字 函数名(参数列表) {
            函数体;
            返回值
        }
        
    第二种:
    var 函数名 = 关键字(参数列表) {
            函数体;
            返回值
        }
        
    第三种:
    var 函数名 = (参数列表) => {
            函数体;
            返回值
        }
    """
    

    有名函数

    // 定义
    function add(n1, n2) {
        return n1 + n2
    }
    // 使用
    res = add(10, 20);
    console.log(res);
    
    // 函数名的运用
    my_add = add;
    console.log(my_add(100, 200));
    
    // 少传未接收到的形参赋值为undefined,多传的实参自动被丢弃
    function fn(n1, n2) {
        console.log('传输的n1:%s | n2:%s', n1, n2)
    }
    fn(10, 20);
    fn();
    fn(100);
    fn(1000, 2000, 3000);
    
    // 可变长参数
    function func(...num) {
        console.log(num)
    }
    func(1, 2, 5, 3, 4);
    
    // 用变量接收 - 函数的第二种声明方式
    var fun = function () {
        console.log('函数的第二种声明方式')
    };
    fun();
    
    // 函数的第三种声明方式
    var fun2 = (n1, n2) => {  // 有函数体标明{}
        console.log('n1:%s | n2:%s', n1, n2);
        return n1 + n2
    };
    console.log(fun2(222, 444));
    
    var fun3 = (n1, n2) => n1 + n2;  // 只有返回值可以省略{}
    console.log(fun3(222, 444));
    

    匿名函数

    // 匿名函数
    // 匿名函数的自调用 - 调用一次后就会被回收资源
    (function () {
        console.log('匿名函数')
    })();
    
    
    // 匿名函数自调用,可以产生局部作用域与外界隔离
    (function () {
        let number = 888
    })()
    // console.log(number)  // 外界不可以直接访问
    
  • 相关阅读:
    无言
    计算机网络的所有课件
    Linux 分区
    Linux 文件管理权限
    DropDownList 控件
    CssClass初步语法了解
    BulletedList用途
    BulletedList项目控件基础CSS基础
    Checkbox与foreach循环
    RadioButton控件
  • 原文地址:https://www.cnblogs.com/Hades123/p/11305465.html
Copyright © 2020-2023  润新知