美文网首页
day5--js基础

day5--js基础

作者: 我才是鳄鱼宝宝 | 来源:发表于2018-11-02 20:48 被阅读0次

    <!DOCTYPE html>
    <html>
    <head>
    <title>JS基础</title>

    <!-- 2.内部 -->
    <script type="text/javascript">
        // 在这儿写js代码
        // alert('你好吗')  //弹出一个提示框
    </script>
    
    <!-- 3.外部 -->
    <!-- 通过script标签的src属性来导入对应的js文件 -->
    <script type="text/javascript" src="04-分之结构.js"></script>
    

    </head>
    <body>

    <p id="p1">你好</p>
    <p id="p2">hello</p>
    
    
    <!-- 1.内联 -->
    <!-- onclick属性后写js代码 -->
    <button onclick="document.getElementById('p1').innerHTML='Hello JS'">点我一下</button>
    
    
    <script type="text/javascript">
        // 在这儿写js代码
        // alert('你好吗')  //弹出一个提示框
        document.write('hi');
        document.getElementById('p2').innerHTML='我最棒';
    
    </script>
    

    </body>

    </html>

    // 1.语句
    // a.js语法上,一条语句结束可以写分号也可以不写分号;但是根据习惯需要在每条的语句的后面添加分号。
    // 如果一行要写多条语句,那么每条语句之间必须写分号!
    // b.js中没有缩进的规范,但是在实际开发的时候还是要按照python的要求去规划缩进

    // 2.注释
    // a. 单行注释就是'//注释内容'
    // b. 多行注释:'/注释内容/'

    // 3.标识符:用来给变量和函数命名的....
    // a.由字母数字和下划线以及美元符号()组成,并且数字不能开头(硬性要求) // b.不能是关键字(硬性要求) // c.下划线和不开头
    // d.见名知义

    // 4.字面量(具体的值)
    // a.数字:12, 12.3, 12e2
    // b.字符串:'abc12' "231hj"
    // c.数组:[1,2,3,4,'a','b']
    // d.对象:{'a':1, 'c':32}
    // e.布尔:true,false
    // f.特殊值:null, undefined

    // 1.变量:用来存储数据
    /*
    a.变量的声明:
    格式: var 变量名; 或者 var 变量名 = 初值
    var: js中声明变量的关键字
    变量名: 标识符,驼峰式命名(除了第一个单词首字母小写,其他单词的首字母大写,例如:userName,peopleNumber)
    初值: 字面量(表达式)

    说明:js中声明变量的时候不用声明变量的类型。同一个变量可以存储不同类型的值
    */

    // 声明变量:就是在内存中开辟空间存储数据;
    // 变量赋值的时候:数字、字符串和布尔数据存的是值。数组和对象存的是地址

    // 1.声明的时候可以给变量赋值,也可以不赋值
    // 声明一个变量 num
    var num = 20;
    // 给num变量赋值
    num = 10;
    num = 'abc';
    // 在控制台打印num的值(console.log相当于python的print)
    console.log(num);

    // 2.同时声明多个变量
    var num1, num2 = true, num3;
    console.log(num2);

    var arr = [1, 2, 3, 4]
    console.log(arr)

    // 2.基本数据类型
    // typeof 表达式; 查看表达式结果的数据类型
    /*
    JS中的基本数据类型有: Number(数字)、String(字符串)、Boolean(布尔)、Array(数组)、Object(对象)、null(清空变量的内容)、undefined(定义的变量没有赋值)

    Number:a.包含所有的数字(整数、浮点数、科学计数, NaN->不合法的数字) -- 数字类型只有一种,值类型
    b.Number() --> 可括号中的数据转换成Number类型。
    将字符串转换成数字的时候,只有去掉字符串的引号后剩下的部分是一个数字的字符串才能转换成合法数字,否则结果是NaN
    布尔true会转换成1,false转换成0

    */

    var num1 = 10
    console.log(typeof num1)

    var num2 = 2e3
    num2 = Number(true)
    console.log(num2)

    // ================================
    /*
    String: ---> 值类型
    a.可以使用单引号或者双引号引起来的字符集,就是字符串数据:'abc',"12gh"....
    b.JS中也可以使用转义字符来表示有特殊功能和特殊意义的字符: \ ,' ," , \t ,\n等
    c.JS字符也是Unicode字符
    d.通过下标获取某个字符:下标范围是0~字符串长度-1.
    注意:js中下标不能是负数;也不可以切片

    e.通过 new String()去创建一个Object类型的字符串。
    */

    var str1 = 'a"bc';
    var str2 = "abc"d21";
    var str3 = 'a'bc';
    var str4 = 'abc\nhujn';
    console.log(str4);

    // 通过下标获取字符
    console.log(str4[0]);

    // 获取字符串的长度
    console.log(str4.length);

    // 创建一个对象类型的字符串123abc
    var str5 = new String('123abc');

    console.log(str1.charAt(0), typeof str1);
    console.log(str5.charAt(0), typeof str5);

    // ================================================
    // Boolean: true,false
    // 1.数字转换成Boolean值,0和NaN会转换成false,其他数字会转换成true
    // 2.字符串转换成Boolean值,空串是false,其他的都会转换成true
    // 3.null,undefined都会转换成false
    var b1 = Boolean(undefined)
    console.log(b1)

    // ================================================
    // Array: 数组类型就是python中的列表
    // 1.存数组数据存的是地址
    // 2.数组的元素可以是任何类型的数据,可以通过下标去获取对应的元素
    // 3.下标的范围:0~长度-1
    // 4.通过length可以获取数组元素的个数

    var a1 = [1,2,3,'acd',true];
    console.log(a1);
    console.log(a1[2]);
    console.log(a1.length);

    // 添加元素
    // push:在数组的最后添加一个或者多个元素,返回最新的数组的长度
    a1.push(10);
    count = a1.push('a','abab');
    console.log(a1, count);

    // 删除元素
    // pop:将数组中的最后一个元素删除,并且返回被删除的元素
    del = a1.pop();
    console.log(a1, del);

    // 切片
    // slice(起始下标,结束下标):从数组的起始下标开始,到结束下标前的所有元素,作为一个新的数组的元素并且返回
    newArray = a1.slice(0,3);
    console.log(newArray);

    // 删除指定下标的元素
    // splice(下标,个数): 从指定下标开始删除指定个数元素
    var a2 = [1,2,3,4,5];
    a2.splice(1,2);
    console.log(a2);

    // 在指定位置添加元素
    // splice(下标,0,元素1,元素2,元素3...):在指定的下标前插入指定的一个或者多个元素
    var a3 = [1,2,3,4,5];
    a3.splice(2,0,'a','b');
    console.log(a3);

    // 在数组的开头添加一个或者多个元素
    a3.unshift('a','b');
    console.log(a3);

    // 修改元素
    a2[0] = 100;
    console.log(a2);

    // ========================对象========================
    // Object: 对象类型就是python中的字典
    // 变量存储对象,存的是对象的地址
    // 存的时候以键值对的形式去存储数据,这个键可以看成对象的属性

    // 创建了一个变量,存的是一个对象的地址
    var obj1 = {'a':1, 'b':2, 'c':'abc'};

    // 取值: 通过key去取值
    console.log(obj1['a']);
    // 取值:通过点语法获取属性的值
    console.log(obj1.c);

    // 修改
    obj1['a'] = 100;
    obj1.c = '你好';
    console.log(obj1);

    // 增加: 给不存在的key或者属性去赋值
    obj1['d'] = 1001;
    console.log(obj1);
    obj1.e = 'aaaa';
    console.log(obj1);

    // 删除指定的键值对/属性
    delete obj1.b;
    delete obj1['a'];
    console.log(obj1);

    // 声明对象的时候,属性名可以不用加引号
    var obj2 = {name:'yuting', age:18, sex:'女'};
    console.log(obj2['name']);
    console.log(obj2.name);

    // 算术运算符、比较运算符、逻辑运算符、赋值运算符
    // 1.算术运算符(+,-,,/, %, ++, --)
    // +,-,
    ,/,%和python中的是一样的

    // a. 任何数据和字符串相加,结果都是字符串拼接的操作
    var str1 = 'aaa'+[1,2,3,4];
    console.log(str1);

    // b.两个数组相加,并不是数组元素的拼接。而是将数组转换成字符串,然后拼接成一个新的字符串
    var arr1 = [1,2,3] + [4,5,6];
    console.log([1,2,3])
    console.log(arr1);

    // c.操作只能作用于两个数字类型
    var str2 = 'abc'
    2;
    console.log(str2);

    // e.++:自加1操作
    var num1 = 10;
    var num11 = 10;
    num1++; //相当于: num1 += 1, num1 = num1+1
    ++num11
    console.log(num1, num11);

    // f.--:自减1操作
    var num2 = 10;
    num2--;
    console.log(num2);

    // 坑
    var num3 = 10;
    var num33 = 10
    var num4 = num3++; // var num4 = num3; num3 += 1;
    var num5 = ++num33; // num33 += 1; var num5 = num33;
    console.log(num4, num5);

    // 2.比较运算符:>, <, >=, <=, == , !=, ===, !==
    // ==和===的区别:
    // ==是只要两个数据的值相等,结果就是true,否则是false
    // ===是只有两个数据的值相等,并且数据类型也相等的时候,结果才是true,否则是false

    console.log(5==5) //true
    console.log(5=='5') //true

    console.log(5===5) //true
    console.log(5==='5') //false

    console.log(5!=5) //false
    console.log(5!='5') //false

    console.log(5!==5) //false
    console.log(5!=='5') //true

    console.log(5 >='5') //判断等的是判断值是否相等

    console.log(12 > '16') //字符串和数字之间比较大小,会把字符串转换成数字

    // 注意:比较大小的时候,一般数字就和数字进行比较;字符串和字符串进行比较

    // 3.逻辑运算符:&&(与),||(或),!(非)
    console.log(true && true,true && false,false && false); //true false false
    console.log(true || true,true || false,false || false); //true, true, false
    console.log(!true, !false); //false, true

    // 4.赋值运算符: =, +=, -=, =, /=, %=
    // 注意:赋值符号的左边是变量
    // js中的分之结构有:if语句和switch语句两种
    /

    1.if语句
    python:
    if 条件:
    语句块1
    elif 条件:
    语句块2
    else:
    语句块3

    js:
    if(条件){
    语句块1
    }
    else if(条件){
    语句块2
    }
    else{
    语句块3
    }

    */
    // 写一个程序判断成绩的等级:80-100优秀,60-80:中等,60以下:不及格
    // 不能连续判断:x<=a<=y 只能写成:a>=x && a<=y
    var score = -55
    if (score>=80 && score<=100) {
    console.log('优秀');

    }else if(score>=60 && score<80){
    console.log('中等');

    }else if (score>=0 && score<60) {
    console.log('不及格')

    }else{
    console.log('error');
    }

    // 2.switch语句
    /*
    switch(表达式){
    case 值1:
    语句块1;
    case 值2:
    语句块2;
    ...
    defult:
    语句块3;
    }

    执行过程: a.从第一个case语句后的值开始和表达式的值进行判断,
    如果相等,那么就将那个case作为入口,依次执行后面所有的语句块直到遇到break或者全部执行完为止。
    b.如果所有的case后面的值,都和表达式的值不相等,那么就会去执行default后面的语句块。
    c.case后面的值不能一样

    */
    var a = 100;
    switch(a){
    case 10:
    console.log('10');
    case 1:
    console.log('1');
    case 2:
    console.log('2');
    break;
    case 11:
    console.log('11');
    case 12:
    console.log('12');
    default:
    console.log('13');
    }

    // 输入一个数字(1-7),根据数据打印结构为(周一~周天)
    var num1 = 4
    switch(num1){
    case 1:
    console.log('周一');
    break;
    case 2:
    console.log('周二');
    break;
    case 3:
    console.log('周三');
    break;
    case 4:
    console.log('周四');
    break;
    case 5:
    console.log('周五');
    break;
    case 6:
    console.log('周六');
    break;
    case 7:
    console.log('周天');
    break;
    default:
    console.log('错误');

    }

    // 要求,num2的值是1,2,3,4,5的时候打印’不及格‘,6,7,8打印中等,9,10打印优秀。
    var num2 = 4;
    switch (num2){
    case 1:
    case 2:
    case 3:
    case 4:
    case 5:
    console.log('不及格');
    break;
    case 6:
    case 7:
    case 8:
    console.log('中等');
    break;
    case 9:
    case 10:
    console.log('优秀');
    break;
    default:
    console.log('成绩有误');
    break;

    }

    相关文章

      网友评论

          本文标题:day5--js基础

          本文链接:https://www.haomeiwen.com/subject/vcbcxqtx.html