web前端基础——第六章

已于 2022-12-24 22:19:34 修改
阅读量256 收藏 1
点赞数
分类专栏： 技术栈笔记 文章标签： 前端 javascript
于 2022-12-02 15:13:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZiminLi/article/details/128058768
版权

目录

六十四、JavaScript简介

什么是语言

  • 计算机就是一个由人来控制的机器，人让它干嘛，它就得干嘛。
  • 我们要学习的语言就是人和计算机交流的工具，人类通过语言来控制、操作计算机。
  • 编程语言和我们说的中文、英文本质上没有区别，只是语法比较特殊。
  • 语言的发展 ：
      纸带机 ：机器语言
      汇编语言 ：符号语言
      现代语言 ：高级语言

起源

  • JavaScript诞生于1995年，它的出现主要是用于处理网页中的前段验证。
  • 所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。
  • 比如 ：用户名的长度，密码的长度，邮箱的格式等。
    Netscape
    Sun microsystems
    Microsoft

电话

简史

  • JavaScript是由网景公司发明，起初命名为LiveScript，后来由于SUN公司的介入更名为JavaScript。
  • 1996年微软公司在其最新的IE3浏览器中引入了自己对JavaScript的实现Jscript。
  • 于是在市面上存在两个版本的JavaScript，一个网景公司的JavaScript和微软的Jscript。
  • 为了确保不同的浏览器上运行的JavaScript标准一致，所以几个公司共同定制了JS的标准名命名为ECMAScript。

时间表

年份事件
1995年网景公司开发了JavaScript
1996年微软发布了和JavaScript兼容的Jscript
1997年ECMAScript第1版（ECMA-262）
1998年ECMAScript第2版
1998年DOM Level1的制定
1998年新型语言DHTML登场
1999年ECMAScript第3版
2000年DOM Level2的制定
2002年ISO/IEC 16262:2002的确立
2004年DOM Level3的制定
2005年新型语言AJAX登场
2009年ECMAScript第5版
2009年新型语言HTML5的登场

实现

  • ECMAScript是一个标准，而这个标准需要由各个厂商去实现。
  • 不同的浏览器厂商对该标准会有不同的实现。
浏览器JavaScript实现方式
FirefoxSpiderMonkey
Internet ExploerJScript/Chakra
SafariJavaScriptCore
Chromev8
CarakanCarakan
  • 我们已经知道ECMAScript是JavaScript标准，所以一般情况下这两个词我们认为是一个意思。
  • 但是实际上JavaScript的含义却要更大一些。
  • 一个完整的JavaScript实现应该由以下三个部分构成 ：
      ECMAScript
      DOM
      BOM

学习内容

  • 我们已经知道了一个完整的JavaScript实现包含了三个部分 ：ECMAScript、DOM和BOM。
  • 由此我们知道了我们所要学习的内容就是这三部分。
      ECMAScript
      DOM
      BOM

特点

  • JS的特点
      解释型语言
      类似于C和Java的语法结构
      动态语言
      基于原型的面向对象

六十五、JS的Hello World

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        alert("哥，你好帅！");/* 控制浏览器弹出一个警告框 */
        document.write("看我出不出来~~~");/* 让计算机在页面中输出一个内容 */
        console.log("你猜我在哪出来呢？");/* 向控制台输出一个内容 */
    </script>
</head>
<body>
    
</body>
</html>

六十六、编写位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        可以将js文件编写到外部js文件中，然后通过script标签引入
        写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
        推荐使用的方式
    -->
    <!-- 
        script标签一旦用于引入外部文件了，就不能再编写代码了，即使编写了浏览器也会忽略
        如果需要则可以再创建一个新的script标签用于编写内部代码
     -->
    <script src="js/script.js"></script>
    <script>
        alert("我是内部的JS代码");
    </script>
    <!-- 
        可以将js代码编写到script标签    
    <script>
        alert("我是script标签中的代码！！");
    </script> 
    -->
</head>
<body>
    <!-- 
        可以将js代码编写到标签的onclick属性中
    当我们点击按钮时，js代码才会执行
    虽然可以写在标签的属性中，但是他们属于结构与行为偶合，不方便维护，不推荐使用 
    -->
    <button onclick="alert('讨厌，你点我干嘛~~');">点我一下</button>
    <!-- 
        可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码 
    -->
    <a href="javascript:alert('让你点你就点！！');">你也点我一下</a>
    <a href="javascript:;">你也点我一下</a>
</body>
</html>

六十七、基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            JS注释
            多行注释，注释中的内容不会被执行，但是可以在源代码中查看
            要养成良好的编写注释的习惯，，也可以通过注释来对代码进行一些简单的调试
        */
       //单行注释
       //alert("hello");
       //document.write("hello");
       console.log("hello");//该语句用来在控制台输出一个日志
       /* 
            1.JS中严格区分大小写
            2.JS中每一条语句以分号（;）结尾
                -如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
                    而且有一些时候，浏览器会加错分号，所以在开发中分号必须写
            3.JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化
       */
      alert("hello");
    </script>
</head>
<body>

</body>
</html>

六十八、字面量和变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            字面量，都是一些不可改变的值
                比如：1 2 3 4 5
                字面量都是可以直接使用，但是我们一般都不会直接使用字面量
            变量 变量可以用来保存字面量，而且变量的值是可以任意改变的
                变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量
                可以通过变量对字面量进行描述
        */
        //声明变量
        //在js中使用var关键字来声明一个变量
        var a;
        //为变量赋值
        a=123;
        a=456;
        a=16345678912156496;
        //声明和赋值同时进行
        var b=789;
        var c=0;
        var age=80;
        console.log(age);
    </script>
</head>
<body>

</body>
</html>

六十九、标识符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            标识符
                在JS中所有的可以由我们自主命名的都可以称为是标识符
                例如：变量名、函数名、属性名都属于标识符
                命名一个标识符需要遵守如下的规则：
                    1.标识符中可以含有字母、数字、_、$
                    2.标识符不能以数字开头
                    3.标识符不能是ES中的关键字或保留字
                    4.标识符一般都采用驼峰命名法
                        首字母小写，每个单词的开头字母大写，其余字母小写
                        helloWorld xxxYyyZzz
                JS底层保存标识符时实际上是采用的Unicode编码。
                    所以理论上讲，所有的utf-8中含有的内容都可以作为标识符
        */
     /*   var if=123;
       console.log(if); */
       //千万不要这么用
       var 锄禾日当午=789;
       console.log(锄禾日当午);
    </script>
</head>
<body>

</body>
</html>

七十、数据类型（6种）

基本数据类型（5种）

1.字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            数据类型指的就是字面量的意思
                在JS中一共有六种数据类型
                    String 字符串
                    Number 数值
                    Boolean 布尔值
                    Null 空值
                    Undefined 未定义
                    Object 对象
            其中String Number Boolean Null Undefined属于基本数据类型
                而Object属于引用数据类型        
        */
        /* 
            String字符串
            在JS中字符串需要使用引号引起来
            使用双引号或单引号都可以，但是不要混着用
            引号不能嵌套，双引号不能放双引号，单引号不能放单引号
        */
        var str='hello';
        str='我说："今天天气真不错！"';
        /* 
            在字符串中我们可以使用\作为转义字符，
                当表示一些特殊符号时可以使用\进行转义
                \" 表示"
                \' 表示'
                \n 表示换行
                \t 制表符
                \\ 表示\
        */
        str="我说：\"今天\t天气真不错！\"";
        str="\\\\\\";
        //输出字面量 字符串str
        //alert("str");
        //输出变量str
        //alert(str);
        var str2="hello";
        str2="你好";
        str2=3;
        //alert("hello，你好");
        //console.log("我就是不出来~~~");
    </script>
</head>
<body>

</body>
</html>

2.Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            在JS中所有的数值都是Number类型，
                包括整数和浮点数（小数）
                JS中可以表示的数字的最大值
                    Number.MAX_VALUE
                        1.7976931348623157e+308
                    Number.MIN_VALUE    大于0的最小值
                        5e-324
                    如果使用Number表示的数字超过了最大值，则会返回一个
                        Infinity    表示正无穷
                        -Infinity    表示负无穷
                        使用typeof检查Infinity也会返回Number
                    NaN是一个特殊的数字，表示Not A Number
                        使用typeof检查一个NaN也会返回number
        */
        //数字123
        var a=123;
        //字符串123
        var b="123";
        /* 
            可以使用一个运算符typepf
                来检查一个变量的类型
            语法：typeof 变量
            检查字符串时，会返回string
            检查数据时，会返回number
        */
        //console.log(typeof a);
        a=-Number.MAX_VALUE*Number.MAX_VALUE;
        a="abc"*"bcd";
        a="NaN";
        //console.log(typeof a);
        a=Number.MIN_VALUE;
        //console.log(a);
        /* 
            在JS中整数的运算基本可以保证精确
        */
        var c=1865789+7654321;
        /* 
            如果使用JS进行浮点运算，可能得到一个不精确的结果
                所以千万不要使用JS进行对精确度要求比较高的运算
        */
        var c=0.1+0.2;
        console.log(c);
    </script>
</head>
<body>

</body>
</html>

3.布尔值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            Boolean 布尔值
                布尔值只有两个，主要用来做逻辑判断
                true
                    表示真
                false
                    表示假
            使用typeof检查一个布尔值时，会返回boolean
        */
       var bool=false;
       console.log( typeof bool);
       console.log(bool);
    </script>
</head>
<body>

</body>
</html>

4.Null和Undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            Null（空值）类型的值只有一个，就是null
                null这个值专门用来表示一个为空的对象
                使用typeof检查一个null值时，会返回object
            Undefined（未定义）类型的值只有一个，就undefined
                当声明一个变量，但是并不给变量赋值时，它的值就是undefined
                使用typeof检查一个undefined值时也会返回undefined
        */
       var a=null;
       var b=undefined;
       console.log(typeof b);
    </script>
</head>
<body>

</body>
</html>

七十一、强制类型转换

1.String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            强制类型转换
                指将一个数据类型强制转换为其他的数据类型
                类型转换主要指，将其他的数据类型，转换为
                    String Number Boolean
        */
        /* 
        将其他的数据类型转换为String
            方式一：
                调用被转换数据类型的toString()方法
                该方法不会影响到原变量，它会将转换的结果返回
                但是注意：null和undefined这两个值没有toString()方法，
                    如果调用他们的方法，会报错
            方式二：
                调用String()函数，并将被转换的数据作为参数传递给函数
                使用String()函数做强制类型转换时，
                    对于Number和Boolean实际上就是调用的toString()方法
                    但是对null和undefined，就不会带哦用toString()方法
                        它会将null直接转换为"null"
                        将undefined直接转换为"undefined"
        */
        var a=123;
        //调用a的toString()方法
        //调用xxx的yyy()方法，就是xxx.yyy()
        a=a.toString();
        a=true;
        a=a.toString();
        a=null;
        //a=a.toString();//报错
        a=undefined;
        //a=a.toString();//报错
        a=123;
        //调用String()函数，来将a转换为字符串
        a=String(a);
        a=null;
        a=String(a);
        a=undefined;
        a=String(a);
        console.log(typeof a);
        console.log(a);
    </script>
</head>
<body>

</body>
</html>

2.Number

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            将其他的数据类型转换为Number
            转换方式一：
                使用Number()函数
                    字符串→数字
                        1.如果是纯数字的字符串，则直接将其转换为数字
                        2.如果字符串中有非数字的内容，则转换为NaN
                        3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
                    布尔→数字
                        true转成1
                        false转成0
                    Null→数字 0
                    undefined→数字 NaN
            转换方式二：
                这种方式专门用来对付字符串
                parseInt() 把一个字符串转换为一个整数
                parseFloat() 把一个字符串转换为一个浮点数
        */
        var a="123";
        //调用Number()函数来讲a转换为Number类型
        a=Number(a);
        a=true;
        a=Number(a);
        a=null;
        a=Number(a);
        a=undefined;
        a=Number(a);
        a="123567a567px";
        //调用parseInt()函数将a转换为Number
        /* 
            parseInt()可以将一个字符串中的有效的整数内容取出来，
                然后转换为Number
        */
        a=parseInt(a);
        /* 
            parseFloat()作用和parseInt()类似，不同的是它可以获得有效的小数
        */
        a="123.456px";
        a=parseFloat(a);
        /* 
            如果对非String使用parseInt()或parseFloat()
                它会先将其转换为String然后再操作
        */
        a=true;
        a=parseInt(a);
        a=198.23;
        a=parseInt(a);
        console.log(typeof a);
        console.log(a);
    </script>   
</head>
<body>

</body>
</html>

3.Boolean

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            将其他的数据类型转换为Boolean
                使用Boolean()函数
                    数字→布尔
                        除了0和NaN,其余的都是true
                    字符串→布尔
                        除了空串，其余的都是true
                    null和undefined都会转换为false
                    对象也会转换为true
                为任意的数据类型做两次非运算，即可将其转换为布尔值
        */
        var a=123;//true
        a=-123;//true
        a=0;//false
        a=Infinity;//true
        a=NaN;//false
        //调用Boolean()函数来将a转换为布尔值
        a=Boolean(a);
        a=" ";
        a=Boolean(a);
        a=null;//false
        a=Boolean(a);
        a=undefined;//false
        a=Boolean(a);
        //console.log(typeof a);
        //console.log(a);
        var a="hello";
        a=!!a;//true
    </script> 
</head>
<body>

</body>
</html>

七十二、其他进制的数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a=123;
        /* 
            在js中，如果需要表示16进制的数字，则需要以0x开头
                如果需要表示8进制的数字，则需要以0开头
                如果需要表示2进制的数字，则需要以0b开头
                    但是不是所有的浏览器都支持
        */
        //十六进制
        a=0x10;
        a=0xff;
        a=0xCafe;
        //八进制数字
        a=070;
        //二进制数字
        //a=0b10;
        //像"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
        a="070";
        //可以在parseInt()中传递一个第二个参数，来指定数字的进制
        a=parseInt(a,10);
        console.log(typeof a);
        console.log(a);
    </script>   
</head>
<body>

</body>
</html>

七十三、算数运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            运算符也叫操作符
                通过运算符可以对一个或多个值进行运算,并获取运算结果
                比如：typeof就是运算符，可以来获得一个值的类型
                    它会将该值的类型以字符串的形式返回
                    number string boolean undefined object
            算数运算符
                当对非Number类型的值进行运算时，会将这些值转换为Number然后再运算
                    任何值和NaN做运算都得NaN
                +
                    + 可以对两个值进行加法运算，并将结果返回
                    如果对两个字符串进行加法运算，则会做拼串
                        会将两个字符串拼接为一个字符串，并返回
                    任何的值和字符串做加法运算， 都会先转换为字符串，然后再和字符串做拼串的操作
                -
                    - 可以对两个值进行减法运算，并将结果返回
                *
                    * 可以对两个值进行乘法运算
                /
                    / 可以对两个值进行除法运算
                %
                    % 取模运算（取余数）
        */
        var a=123;
        var result=typeof a;
        //console.log( typeof result);
        result=a+1;
        result=456+789;
        result=true+1;
        result=true+false;
        result=2+null;
        result=2+NaN;
        result="你好"+"大帅哥";
        var str="锄禾日当午，"+
                "汗滴禾下土，"+
                "谁知盘中餐，"+
                "粒粒皆辛苦";
        result=123+"1";
        result=true+"hello";
        //任何值和字符串相加都会转换为字符串，并做拼串操作
        /* 
            我们可以利用这一特点，来将一个任意的数据类型转换为String
                我们只要为任意的数据类型+一个""即可将其转换为String
                这是一种隐式的类型转换，由浏览器自动完成，实际上它也是调用String()函数
        */
        var c=123;
        c=c+"";
        //c=null;
        //c=c+"";
        //console.log(result);
        //console.log(typeof c);
        //console.log("c="+c);
        result=1+2+"3";//33
        result="1"+2+3;//123
        result=100-5;
        result=100-true;
        result=100-"1";
        result=2*2;
        result=2*"8";
        result=2*undefined;
        result=2*null;
        result=4/2;
        result=3/2;
        /* 
            任何值做- * /运算时都会自动转换为Number
                我们可以利用这一特点做隐式的类型转换
                    可以通过为一个值-0 *1 /1来将其转换为Number
                    原理和Number()函数一样，使用起来更加简单
        */
        var d="123";
        //console.log("result="+result);
        d=d-0;
        /* console.log(typeof d);
        console.log(d); */
        result=9%3;
        result=9%4;
        result=9%5;
        console.log("result="+result);
    </script>
</head>
<body>
    
</body>
</html>

七十四、一元运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            一元运算符，只需要一个操作数
            + 正号
                正号不会对数字产生任何影响
            - 负号
                负号可以对数字进行负号的取反
            对于非Numbeer类型的值，
                它会将先转换为Number,然后再运算
                可以对一个其他的数据类型使用+，来讲其转换为number
                它的原理和Number()函数一样
        */
        var a=-123;
        a=-a;
        a=true;
        a="18";
        a=+a;
        /* console.log("a="+a);
        console.log(typeof a); */
        var result=1+ +"2"+3;
        console.log("result="+result);
    </script>
</head>
<body>
    
</body>
</html>

七十五、自增和自减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            自增 ++
                通过自增可以使变量在自身的基础上增加1
                对于一个变量自增以后，原变量的值会立即自增1
                自增分成两种：后++（a++）和前++（++a）
                    无论是a++还是++a，都会立即使原变量的值自增1
                        不同的是a++和++a的值不同
                    a++的值等于原变量的值（自增前的值）
                    ++a的值等于原变量新植（自增后的值）
            自减 --
                通过自减可以使变量在自身的基础上减1
                自减分成两种：后--（a--）和前--（--a）
                    无论是a-- 还是--a 都会立即使原变量的值自减1
                        不同的是a-- 和--a的值不同
                            a-- 是变量的原值（自减前的值）
                            --a 是变量的新值（自减以后的值）
        */
        var num=10;
        //num--;
        //--num;
        //console.log(num--);
        console.log(--num);
        console.log("num="+num);
        var a=1;
        //使a自增1
        //a++;
        //++a;
        //console.log(a++);
        //console.log("++a="+ ++a);
        /* console.log("a++="+ a++);
        console.log("a="+a); */
        var c=10;
        //第一次c++，是在10的基础上自增
        //console.log(c++);
        //第二次c++，是在11的基础上自增
        c++;
        var d=20;
        //console.log(++d);//21
        //console.log(++d);//22
        //20+22+22
        //var result=d++ + ++d +d;
        //d=20
        d=d++;
        /* 
            var e=d++;
            d=e;
        */
        //console.log("d="+d);
    </script>
</head>
<body>
    
</body>
</html>

自增练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var n1=10;
        var n2=20;
        var n=n1++;//n1=11 n1++=10
        console.log('n='+n);//10
        console.log('n1='+n1);//11
        n=++n1;//n1=12 ++n1=12
        console.log('n='+n);//12
        console.log('n1='+n1);//12
        n=n2--;//n2=19 n2--=20
        console.log('n='+n);//20
        console.log('n2='+n2);//19
        n=--n2;//n2=18 --n2=18
        console.log('n2='+n2);//18
        console.log('n2='+n2);//18
    </script>  
</head>
<body>

</body>
</html>

七十六、逻辑运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            JS中为我们提供了三种逻辑运算符
            !非
                !可以用来对一个值进行非运算
                所谓非运算就是值对一个布尔值进行取反操作，
                    true变false，false变true
                如果对一个值进行两次取反，它不会变化
                如果对非布尔值进行运算，则会将其转换为布尔值，然后再取反
                    所以我们可以利用该特点，来将其他的数据类型转换为布尔值
                    可以为一个任意数据类型取两次反， 来将其转换为布尔值，
                    原理和Boolean()函数一样
            &&与
                &&可以对符号两侧的值进行与运算并返回结果
                运算规则
                    两个值中只要有一个值为false就返回false，
                        只有两个值都为true时，才会返回true
                    JS中的“与”属于短路的与，
                        如果第一个值为false，则不会看第二个值
            ||或
                ||可以对符号两侧的值进行或运算并返回结果
                    运算规则：
                        两个值中只要有一个true，就返回true
                            如果两个值都为false，才返回false
                        JS种的“或”属于短路的或
                            如果第一个值为true，则不会检查第二个值
        */
       //如果两个值都是true则返回true
       var result=true&&true;
       //只要有一个false，就返回false
       result=true&&false;
       result=false&&true;
       result=false&&false;
       //console.log("result="+result);
       //第一个值为true，会检查第二个值
       //true&&alert("看我出不出来！！");
       //第一个值为false，不会检查第二个值
       //false&&alert("看我出不出来！！");
       result=false||false;
       //只要有一个true，就返回true
       result=true||false;
       result=false||true;
       result=true||true;
       //console.log("result="+result);
       //第一个值为false，则会检查第二个值
       //false||alert("123");
       //第一个值为true，则不再检查第二个值
       //true||alert("123");
       var a=false;
       //对a进行非运算
       a=!a;
       //console.log("a="+a);
       var b=10;
       b=!!b;
       //console.log("b="+b);
       //console.log(typeof b);
    </script>  
</head>
<body>
    
</body>
</html>

非布尔值的与或运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            && ||非布尔值的情况
                对于非布尔值进行与或运算时，
                    会先将其转换为布尔值，然后再运算，并且返回原值
                与运算：
                    如果第一个值为true，则必然返回第二个值
                    如果第一个值为false，则直接返回第一个值
                或运算：
                    如果第一个值为true，则直接返回第一个值
                    如果第一个值为false，则返回第二个值
        */
       //true&&true
       //与运算：如果两个值都为true，则返回后边的
       var result=5&&6;
       //与运算：如果两个值中有false，则返回靠前的false
       //false&&true
       result=0&&2;
       result=2&&0;
       //false&&false
       result=NaN&&0;
       result=0&&NaN;
       //true||true
       //如果第一个值为true，则直接返回第一个值
       result=2||1;
       result=2||NaN;
       result=2||0;
       //如果第一个值为false，则直接返回第二个值
       result=NaN||1;
       result=NaN||0;
       result=""||"hello";
       result=-1||"你好";
       console.log("result="+result);
    </script>  
</head>
<body>
    
</body>
</html>

七十七、赋值运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            =
                可以将符号右侧的值赋值给左侧的变量
            +=
                a+=5等价于a=a+5
            -=
                a-=5等价于a=a-5
            *=
                a*=5等价于a=a*5
            /=
                a/=5等价于a=a/5
            %=
                a%=5等价于a=a%5
        */
       var a=10;
       //a=a+5;
       //a+=5;
       //a-=5;
       //a*=5;
       //a=a%3;
       //a%=3;
       console.log("a="+a);
    </script>  
</head>
<body>
    
</body>
</html>

七十八、关系运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            通过关系运算符可以比较两个值之间的大小关系，
                如果关系成立它会返回true，如果关系不成立则返回false
            > 大于号
                判断符号左侧的值是否大于右侧的
                如果关系成立，返回true，如果关系不成立则返回false
            >= 大于等于
                判断符号左侧的值是否大于或等于右侧的值
            < 小于号
            <= 小于等于
            非数值的情况
                对于非数值进行比较时，会将其转换为数字然后再比较
                如果符号两侧的值都是字符串时，不会将其转换为数字进行比较
                    而会分别比较字符串中字符的Unicode编码
        */
        var result=5>10;//false
        result=5>4;//true
        result=5>5;//false
        result=5>=5;//true
        result=5>=4;//true
        result=5<4;//false
        result=5<=4;//false
        result=4<=4;//true
        //console.log("result="+result);
        //console.log(1>true);//false
        //console.log(1>=true);//true
        //console.log(1>="0");//true
        //console.log(10>null);//true
        //任何值和NaN做任何比较都是false
        //console.log(true>false);//true
        //console.log("1"<"5");//true
        //console.log("11"<"5");//true
        //比较两个字符串时，比较的是字符串的字符编码
        //console.log("a"<"b");//true
        //比较字符编码时是一位一位进行比较
        //如果两位一样，则比较下一位，所以借用它来对英文进行排序
        //console.log("abc"<"bcd");//true
        //比较中文时没有意义
        //console.log("戒">"我");//true
        //如果比较两个字符串型的数字，可能会得到不可预期的结果
        //注意：在比较两个字符串型的数字时，一定一定一定要转型
        console.log("11246468421246"<+"5");//false
    </script>  
</head>
<body>
    
</body>
</html>

七十九、Unicode编码表

点击查看详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            在字符串中使用转义字符输入Unicode编码
                \u四位编码
        */
        console.log("\u2620");
    </script>  
</head>
<body>
    <!-- 在网页中使用Unicode编码
        &#编码;这里的编码需要的是10进制
    -->
    <h1 style="font-size:200px;">&#9760;</h1>
    <h1 style="font-size:200px;">&#9856;</h1>
</body>
</html>

八十、相等运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            相等运算符用来比较两个值是否相等，
                如果相等会返回true，否则返回false
            使用==来做相等运算
                当使用==来比较两个值时，如果值的类型不同，
                    则会自动进行类型转换，将其转换为相同的类型
                    然后再比较
            不相等
                不相等用来判断两个值是否不相等，如果不相等返回true，否则返回false
                    使用!=来做不相等运算
                    不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false
            ===
                全等
                    用来判断两个值是否全等，它和相等类似，不同的是它不会做自动的类型转换
                        如果两个值的类型不同，直接返回false
            !==
                不全等
                    用来判断两个值不全等，和不等类似，不同的是它不会做自动的类型转换
                        如果两个值的类型不同，直接返回true
        */
        //console.log(1==1);//true
        var a=10;
        //console.log(a==4);//false
        //console.log("1"==1);//true
        //console.log(true=="1");//true
        //console.log(null==0);//false
        /* 
            undefined衍生自null
                所以这两个做相等判断时，会返回true
        */
        //console.log("undefined==null");
        /* 
            NaN不和任何值相等，包括它本身
        */
        //console.log(NaN==NaN);//false
        var b=NaN;
        //判断b的值是否是NaN
        //console.log("b==NaN");
        /* 
            可以通过isNaN()函数来判断一个值是否是NaN
                如果该值是NaN则返回true，否则返回false
        */
        //console.log(isNaN(b));
        //console.log(10!=5);//true
        //console.log(10!=10);//false
        //console.log("abcd"!="abcd");//false
        //console.log("1"!=1);//false
        //console.log("123"===123);//false
        //console.log(null===undefined);//false
        console.log(1!=="1");//true
    </script>  
</head>
<body>

</body>
</html>

八十一、条件运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
            条件运算符也叫三元运算符
                语法：
                        条件表达式?语句1:语句2;
                    执行的流程：
                        条件运算符在执行时，首先对条件表达式进行求值，
                            如果该值为true，则执行语句1，并返回执行结果
                            如果该值为false，则执行语句2，并返回执行结果
                        如果条件的表达式的求值结果是一个非布尔值，
                            会将其转换为布尔值然后再运算
        */
        //false?alert("语句1"):alert("语句2");
        var a=300;
        var b=143;
        var c=50;
        //a>b?alert("a大"):alert("b大");
        //获取a和b中的最大值
        //var max=a>b?a:b;
        //获取a b c中的大值
        //max=max>c?max:c;
        //这种写法不推荐使用，不方便阅读
        var max=a>b?(a>c?a:c):(b>c?b:c);
        //console.log("max="+max);
        //"hello"?alert("语句1"):alert("语句2");
    </script>  
</head>
<body>

</body>
</html>

如何学好web前端

感兴趣,够努力。

ZiminLi
关注
专栏目录
Web前端：JavaScript基础篇之运算符
XZ85201的博客
12-16 2665
运算符分类： 1、算数运算符：+-*/% 2、关系运算符：> >= < <= == != === !== 3、逻辑运算符：&& || ！ 4、一元运算符：++/-- 5、赋值运算符：= 、+=、-=、*=、/=、%= 算术运算符： 算术运算符简单来说，就是加+减-乘*...
web前端开发技术——第六章课后习题实验
钟声悠久的博客
06-23 6837
实验6 1、设置图像的相关对齐属性，编程实现如下图所示的效果。 代码如下： 2、设计一个图像画廊，页面效果如下图所示。采用无序列表加载五幅图像，并利用滚动文字marquee标记及其属性的设置实现五幅图像从右向左交替滚动显示。 代码如下： ...
【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）
专注于dreamweaver网页设计制作
01-04 630
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语
Web前端大作业—电影网页介绍8页(html+css+javascript) 带登录注册表单
qq_365392777
11-26 1219
精彩专栏推荐👇🏻👇🏻👇🏻👇🏻 ❤ 【作者主页——获取更多优质源码】 ❤ 【web前端期末大作业——毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Websto
简单网页版的注册登录案例（JSP+CSS+MySQL+Servlet+MVC设计思想，含源码！）
qq_44495081的博客
02-15 6804
一、登陆注册小案例 1、数据库创建与连接测试 创建数据库weblogin，创建users用户表 #创建表users CREATE TABLE `weblogin`.`users`( `uid` INT(10) ZEROFILL NOT NULL AUTO_INCREMENT COMMENT '用户ID', `username` VARCHAR(100) COMMENT '用户名', `...
第六篇 1+X考证 Web前端测试题（续-含答案）
灵魂学者的博客
06-01 3601
第六篇 1+X考证 Web前端测试题（续-含答案）
Web前端基础——Javascript(JS)
weixin_40013461的博客
09-06 1985
针对JavaScript简单做了解，熟悉基础使用方式。
web前端开发基础——在网页中使用表格
热门推荐
陈沫尘的博客
10-19 1万+
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录系列文章目录前言一、如何插入表格1.关于表格1.二、使用步骤1.引入库2.读入数据总结 前言 本篇主要解释了如何在web中建立表格设置表格的大小，单元格宽高、背景色以及表格内字体的大小 提示：以下是本篇文章正文内容，下面案例可供参考 一、如何插入表格 由于关于web网页制作的软件多种多样
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
小宇y的博客
08-21 1429
目录前言一、超链接标签（一）链接其它子网页（二）链接其它站点（三）虚拟超链接二、从当前页面链接到指定位置三、链接的访问情况四、在新窗口中打开链接例题结语 前言 本节介绍超链接标签即a标签的用法以及相关应用例题。 一、超链接标签 a标签，也叫超链接标签，在图片或者文字上使用，或者可以用在导航栏上，点击后跳到新的页面，以供用户浏览。超链接表示为<a href ="网址">文字或图片</a>，这里的"href=“是该标签的属性即超链接，通过赋值符号”="，来对该属性进行赋值，而网址是要跳
《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf
06-10
根据提供的文件内容，我们可以整理出以下Web前端设计基础的知识点： 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言，用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
web前端第三版习题参考答案_.docx.docx
04-04
【HTML基础】 ...网页由两部分构成：头部（）和...这些都是Web前端开发中不可或缺的部分，对于理解和创建基本的网页内容至关重要。通过练习和实际操作，可以进一步巩固这些知识点，并为更深入的前端学习打下坚实的基础。
《Web前端开发最佳实践》——第1章 Web前端开发概述1.1　Web前端开发的范畴
bobo79888的博客
08-06 532
本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第1章，第1.1节,作者:党　建 第1章 Web前端开发概述 本章首先会简单介绍Web前端开发的历史由来，以及前端开发的概念及其范畴，让读者对前端开发有个整体的认识，同时还会对前端开发的一些错误认识进行更正。其次会介绍一下Web前端的现状，包括互联网整体环境、浏览器的发展、网站的设计和开发现状等，让读者认识到前端开发的现状和趋势，以便...
1.10Web前端基础笔记——练习
m0_64838786的博客
03-18 254
字体族、行高、文本样式... ＋顶部导航栏练习
06_实现watch
qq_53109172的博客
10-16 1202
watch 本质上就是监听一个响应式数据，这个响应式数据发生变化的时候，进行通知并触发相应的回调函数。
004-按照指定功能模块名称分组
xiaogang1226的博客
10-16 524
需要把一个功能模块的几个功能点放在同一个文档目录下，这几个功能点分布在不同的 Controller。需要把他们单独分组，方便前端对接。在@ApiOperation 里面增加属性 tags 赋值。
前端开发攻略---8种方法实现在浏览器中跨页面通信
nibabaoo的博客
10-15 1333
浏览器实现跨标签页通信的多种方式
Vue3动态组件component不生效问题解决方法
Java_fenxiang的博客
10-14 906
问题：vue3循环渲染动态组件component不生效，页面空白在vue3使用component动态组件展示组件时，组件就是不展示显示空白。在vue2中使用动态变量component展示组件都是没问题。试了很多方法 踩了很多坑，所以记录下：登录后复制 <div class="preview-list" id="c...
计算机毕业设计 | SSM 校园线上订餐系统(附源码)
说书客
10-14 1255
本系统基于SSM实现了餐馆点餐系统。项目功能（用户点餐子系统）：登录注册，选座，商品购买，我的订单等。（后台管理子系统）：用户管理，餐桌管理，菜品管理，菜系管理，订单管理等
react 中的hooks中的useState
最新发布
m0_61265297的博客
10-16 348
有两种方式,第一种方式直接写值，第二种方式（第一个参数是原来的值，第二个参数返回一个新的值）
JavaScript权威指南(第6版)：Web前端开发必备
"JavaScript权威指南(第6版)" 是由David Flanagan编写的经典JavaScript教程，专注于Web前端开发。本书自1996年首次发行以来，历经多次更新，最新的第六版于2011年出版，反映了JavaScript语言的最新发展。 在第六版...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值