• JavaScript简介


    第一章 JavaScript 是什么

    JavaScript是一门编程语言,虽然含有Java这个字眼,但是它和java没有半毛钱关系,就跟雷锋和雷峰塔关系一样;

    如果说html是一个网页的骨架,那么css即为网页绚丽的外衣;我们的网站想要动起来,有一些动画效果,就需要js这个灵魂;

    js能够帮我们完成一些页面的效果,比如轮播,回到顶部,弹出广告等等;

    第二章 js如何引入

    2.1 正确的引入方式

    写在script标签内部,注意script是闭合标签
    在script标签上有一些属性,比如type="text/javascript",或者language='javascript',在html5中,此类属性可写可不写,但是写一定要写对
    script标签可以放置于html的任何位置(style标签内除外),但是一般会被解析到body尾部和head内部;
    script内部书写的是我们的js代码,其他代码会不予解释或者报错;

    <script type="text/javascript">
            alert(123);
        </script>
        <p>123</p>
    
    常见的调试方法`alert()`

    2.2 多段script的执行顺序?

    按引入顺序,逐段执行(思考为什么n多页面把js写在最后边)

    2.3 注释

    单行代码使用双斜杠 // 进行注释
    多行代码可以使用 /**/包裹进行注释

    第三章 变量声明

    3.1 命名规范

    在js中,我们需要方便的寻找或者使用某个数据,需要给该数据取一个名字(相当于人类的名字,你可以叫籍无名,我也可以叫籍无名,去除这个名字,就是人,也就是数据,而籍无名就是变量)。这个"名字"在编程语言中的概念就是变量;

    var a = 123;
    //看到等号 从右往左读取 把某个值赋予..
    alert(a);
    

    同时 因为是"变"量,所以我们可以吧变量中的内容替换掉

    var a = 123;
    a = 456;
    alert(a);
    
    • 标志符 标志符是指变量,函数,属性的名字或者函数的参数
      • 变量的声明要用var
      • 第一个字符可以是字母,下划线,美元符号.
      • 其他字符可以是字母,下划线,美元符号或者数字.
      • 不能和JS原本的关键词和保留字冲突 有很多... 标志符中的字母也可以包括含拓展的ASCII或者Unicode字母字符
    var a = 34;
    var b = 45;
    alert(a+b);
    var $ = 'jquery';
    alert($);
    c = 56;
    alert(c);
    

    注意: 如果变量声明不加var 会污染全局变量

    第四章 变量类型

    既然我们理解了变量的概念,那么变量也是分为种类的(就好比有些名字男生用,有些名字女生用),一个数字和一句话在我们计算机上是分别理解的

    js中存在六大数据类型

    1. number 数值类型
    2. string 字符串类型
    3. boolean 布尔值类型(true/false,注意大小写)
    4. function 函数
    5. object 对象(包括null 数组)
    6. undefined 未定义

    我们使用typeof关键字来判断数据类型

    var x = 10; //number
    //数值型不分小数和整数,注意整数的计算精度要远高于小数计算;
    //我分了两次丢了3毛钱,别人捡了还给我反而多还了; 0.1+0.2 不等于 0.3
    
    
    var y = '10'//string
    //一句话 一篇文章 我们可以看做字符串
    //alert(y+y);
    //alert(x+1+'x'+1);
    //普通字符串使用单引号和双引号都可以
    
    var x = false; //boolean值 
    //对和错 也可以看做数据类型
    //为true/false 注意要严格区分大小写
    
    var x; //undefined 
    //表示声明但是并没有被赋值的未定义,也是一种特殊的数据类型,需要注意的是未定义表示的是有过声明,但是没有具体的值,而并不代表没有声明
    
    alert(x);
    alert(typeof x);
    

    剩下的几种数据类型我们在后面接触的过程中继续学习;

    第五章 运算符

    加减乘除运算符为 +,-,*,/ 不做赘述;

    5.1 取模运算 %

    var a = 3;
    var b = 2;
    alert(a%b); //1
    

    5.2 字符串拼接+

    从左往右加时,碰到第一个非数值类型之后,就理解为字符串拼接;

    alert('hello' + 3 + 'world');
    
    alert(2 + 3 + 'hello' + 5 + 'world');
    

    5.3 逻辑运算符

    || 表示"或者"的意思,左右两侧有一者为真则为真
    && 表示"且"的意思,左右两侧有一者为假则为假

    在逻辑运算符进行运算的时候,会进行隐式类型转换,需要注意的是,以下六种值的结果表示为假(false)

    0 , '' , false , null , undefined, NaN

    NaN表示"不是数" 是number类型中比较特立独行的一个值,发起飙来连自己都不认,即NaN不等于NaN

    是数的场景只有一个a = 1;但是不是数的结果可能有很多,所以NaN不等于自身;(NaN 先不讲,会增加学生理解上的困扰)

    var a = 3; 
    var b = 2;
    var c = a||b;
    console.log(c);//3
    // || 逻辑运算的值为第一个确定该运算结果的值;
    
    var a = 3;
    var b = undefined;
    var c = a && b;
    console.log(c);//undefined
    // 和 || 运算一致, && 运算的返回值依旧为第一个确定该运算结果的值;
    

    我们可以依靠逻辑运算符完成流程控制

    var a = 1;
    var b = null;
    var c = 3;
    var d = a || b || c;
    console.log(d)
    //同理 a , b , c 不仅仅可以是某个'值',也可以是某个运算或其结果
    

    5.4 比较运算符

    常见的比较符有

    >, <, >=, <=,==,!=,===,!==

    大于,小于,大于等于,小于等于,等于,不等于,全等于,不全等于;

    注意在js中=是赋值操作的运算符,而==是在做比较的时候采用的比较符号

    在比较的时候,结果只有两种情况,真(true)或者假(false),为布尔值;

    var num1 = 4;
    var num2 = 10;
    console.log(num1 = num2);
    console.log(num1 == num2);
    console.log(num1 <= num2); //满足小于条件,判断正确
    

    对于全等于和等于的判断,在一般情况下的表现是相同的;

    弱类型:在运算的时候,变量会进行隐式的类型转换,我们可以称为弱类型语言;

    悄悄的进行数据类型的转换;

    var num1 = 4; //number
    var num2 = '4'; //string
    
    console.log(num1 == num2);
    console.log(num1 === num2);
    

    比较运算的时候有时会进行隐式的类型转换,在此例中,==悄悄的把num2类型转换成为数值型做比较,如果我们需要对num1和num2严格相比,采用===,===会首先判断比较的数据的数据类型是否相同,性能要好一些;

    第六章 控制结构(1)

    6.1 if语句

    if语句是我们常见的控制结构;

    如果某些条件是正确的(成立的),我们就去执行某段代码

    书写方式很简单;

    var x = 10;
    var y = "10";
    var z = x===y;
    
    if(x === y){
        alert(1);
    }
    if(z){
        alert(1);
    }
    

    一条语句中可以有多个if判断.直到决定结果的值出现.不继续下查找;

    实际是if是在判断true/false,不管我们写一些什么,括号里的结果最终都会是布尔值,它也会做一些类型转换;

    任何数据在被判断的时候,都会有自己对应的布尔值转换

    var num = 10;
    var str = "你好";
    var t = true;
    var obj = document;
    
    
    if(num){
        alert('hello');
    }
    //...
    

    能被转换成false的依然是以下几种

    • false
    • 数值 0
    • 空字符串 ""
    • null
    • undefined
    • NaN

    再写几个案例,if后面的条件不是变量,而是表达式,指明会首先计算表达式,然后再计算if

    6.2 if...else/if...else if

    6.2.1 if...else

    if表示条件成立时执行,条件不成立时执行else中的语句

    比较两个数的大小

     var num1 = 100;
     var num2 = 200;
     if (num1>num2) {
         console.log("num1:大")
     }else{
        console.log("num2:大")
     }
    

    6.2.2 if...else if

    如果条件分支比较多,则采用if...else if进行判断

    判断一个整数,属于哪个范围:大于0;小于0;等于0

    我们可以采用另外一种弹窗 prompt 保存我们输入的数据;

    var iNum = prompt("请输入一个整数");
    if (iNum>0) {
        alert(+iNum+"大于0");
    }else if (iNum<0) {
        alert(+iNum+"小于0");
    }else{
        alert(+iNum+"等于0");
    }
    

    6.3 三目写法

    
    var a = 111;
    if(a > 123){
        a = '你好';
    }else{
        a = "emmmm";
    }
    

    对于条件是一条语句,真一条语句,假一条语句的判断,可以改写成三目的写法

    条件?真语句:假语句
    a>123?a = '你好':a = 'emmmm';
    

    最好的写法为:

    a = a>123?"你好":"emmmm";
    

    一般逻辑很长的语句也不会用三目进行书写,结果没有if清晰,它也并不能加快执行顺序;

    6.3.1 案例

    判断一个整数是奇数还是偶数

    var a=1001;
    alert( a+"的值:"+(a%2?"是奇数":"是偶数"));
    

    6.4 switch

    我们代码在讲究功能的同时要考虑可读性

    var a = 1;
    if(a === 1){
        alert(a);
    }else if(a === 2){
        alert(a);
    }else if(a === 3){
        alert(a);
    }else{
        alert('我也不知道');
    }
    

    当我们if else提出的条件过多,并且都为全等于的判断时.可以使用switch基于不同的条件执行不同的动作,我们可以使用switch语句来选择要执行的多个代码块之一;

    switch(a){
        case 1:
            console.log('等于1');
            break;
        case 2:
            console.log("等于2");
            break;
        case 3:
            console.log("等于3");
            break;
        default :
            console.log('等于4');
            break;
    }
    

    如果我们不写break的话,会一直进行比较,不会跳出循环,我们只需要找到匹配的即可停止了; 如果都木有找到,使用默认的default;

    就比如

    var a = 3;
    switch(a){
        case 1:
            console.log('等于1');
        case 2:
            console.log("等于2");
        case 3:
            console.log("等于3");
        default :
            console.log('等于4');
            break;
    }
    

    会一直console.log所有的结果直到结束;

    6.4.1 案例

    判断输出结果

    var x =2;
    switch(x){
         case 1: console.log(1);
         case 2: console.log(2);
         default:break;
         case 3: console.log(3);
    }
    

    根据输入的成绩,判定成绩的等级ABCD

    switch(core){
        case 10:
        case 9: return 'A';
        case 8: return 'B';
        case 7: return 'C';
        case 6: return 'D';
        
    }
    

    作业:

    1. 使用if进行成绩判定

      大于85  优秀
       大于等于75小于等于85 良好
       大于等于60小于75 及格
       小于60  不及格
    2. 使用三元运算符判断给定一个4位年份是平年还是闰年(自己网上搜索平年和闰年的计算方法)。

    3. 使用switch或者if判断给定的某年某月有几天 (两个变量: year表示年 ,month表示月,弹出天数)

    答案:

    1.  
        var sNum = prompt("查询成绩");
        var iNum = (sNum-0);
        if (iNum>85) {
            console.log("优秀"); 
        }else if ((iNum>=75)&&(iNum==85)) {
            console.log("良好");
        }else if ((iNum>=60)&&(iNum<75)) {
            console.log("及格");  
        }else{
            console.log("不合格"); 
        }
    
    1. alert(a%400==0||(a%100!=0&&a%4==0)?"闰年":"不是闰年")
    2.  
        var year = 2014;
        var month = 4;
        switch(month){
            case 1:
            case 3:
            case 5:
            case 7:
            case 8:
            case 10:
            case 12: return 31;
            case 2: 
                    if(year%400==0||(year%100!=0&&year%4==0))
                        return 29;					
                    else
                        return 28;
                    
            default:return 30;
        }
  • 相关阅读:
    关于mysql 中schema的相关操作
    ASP.NET Core MVC 之过滤器(Filter)
    docker-Error: No such container
    java多种加密和解密方式
    linux 下的rpm 和ivh各是什么意思
    新生赛题目准备
    Figma 学习笔记 – Keyboard Shortcut and Tips 小技巧
    Figma 学习笔记 – Frame
    Chart.js 学习笔记
    SQL Server STRING_AGG
  • 原文地址:https://www.cnblogs.com/wjlbk/p/11783861.html
Copyright © 2020-2023  润新知