0
0

JS入门到精通完整版

前言

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。它是作为开发Web页面的脚本语言而出名，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

从今天开始就和大家一起分享JavaScript的基础知识，如果您有疑问可以在评论区留言或者私信我，感谢观看！ 

  1. 提示：以下是文章正文内容，下面案例可供参考

一、JavaScript是什么？

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言 。

1.主要的功能：

  1. 嵌入动态文本于HTML页面。
  2. 对浏览器事件做出响应。
  3. 读写HTML元素。
  4. 在数据被提交到服务器之前验证数据。
  5. 检测访客的浏览器信息。控制cookies，包括创建和修改等。
  6. 基于Node.js技术进行服务器端编程

2.语言的组成：

ECMAScript，描述了该语言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

二、JS基础内容

1.js基础——hello world

代码如下（示例）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- js代码需要编写在scrpit标签内 -->
  9.     <script>
  11.         // 控制浏览器弹出警告框
  12.         alert("这是我的第一行js代码!");
  14.         // 让计算机在页面输出内容
  15.         document.write("Hello World!!!");
  17.         // 向控制台输出内容
  18.         console.log("你猜猜我在哪呢!!!");
  20.         // alert("这是一个弹窗！！");
  21.         // document.write("这是一个文本内容！！");
  22.         // console.log("这是控制台输出内容");
  23.     </script>
  24. </head>
  25. <body>
  26.     
  27. </body>
  28. </html>

** 运行效果（示例）：**

2.js基础——js编写的位置

js有三种编写位置的方式

第一种：直接在标签内部使用

第二种：在script标签内使用

第三种：在外部js文件中编写，通过script标签引入（推荐使用）

代码如下（示例）：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>js编写位置</title>
  8.     <!-- 
  9.         可以将js代码编写到外部js文件中，然后通过script标签引入
  10.         写到外部文件中可以在不同页面同时使用，也可以利用浏览器缓存机制
  11.         推荐使用
  12.     -->
  13.     <!-- 
  14.         script标签一旦引入外部文件了，就不能在此标签内写代码了，即使编写也不会被编译
  15.         如果需要则可以在创建一个新的script标签用于编写内部代码
  17.      -->
  18.     <script src="./js/scrpit.js"></script>
  20.     <!-- 
  21.             可以将代码编写到script标签内 
  22.         <script>
  23.             alert("我是script标签内的js代码")
  24.         </script>
  25.     -->
  26. </head>
  27. <body>
  28.     <!-- 
  29.         可以将js代码写在标签的onclick属性中
  30.         当我们点击按钮时，js代码才会执行
  31.      -->
  32.     <button onclick="alert('讨厌，你点我干嘛！！！')">点我一下</button>
  33.     <!-- 
  34.         可以将js代码写在超链接的href属性中，当点击超链接时，会执行js代码
  35.      -->
  36.      <a href="javascript:alert('让你点你就点')">你也点我一下</a>
  37.      <a href="javascript:">你也点我一下</a>
  38. </body>
  39. </html>

运行效果（示例）： 

  1. ![](https://img-blog.csdnimg.cn/b04d7b61c9714f0e91023d1ba31fc9a9.png)

3.js基础——js基本语法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>js基本语法</title>
  8.     <script>
  9.         /*
  10.             多行注释
  11.             JS注释
  12.             多行注释：注释中的内容不会被执行，但可以在源代码中查看
  13.         */
  14.         // 单行注释
  15.         // alert("hello");
  17.         /*
  18.         * 1.JS严格区分大小写
  19.         * 2.JS中每一条语句中以;结尾
  20.         * 3.JS中会自动忽略多个空格和换行，可以对代码进行格式化
  21.         * 
  22.         */
  23.     //    Alert("该语法不会被执行");
  24.     </script>
  25. </head>
  26. <body>
  27.     
  28. </body>
  29. </html>

4.js基础——js字面量和变量

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.         * 字面量：都是不可变的值
  11.         *   比如： 1 2 3 4...
  12.         *   字面量可以直接使用，但我们一般不会直接使用字面量
  13.         * 
  14.         * 变量：变量可以用来保存字面量，而且变量可以任意改变
  15.         *    变量可以更加方便使用,在开发中都是使用变量保存一个字面量
  16.         *    而很少直接用字面量
  17.         *    可以通过变量对字面量描述
  18.         *    x=123546
  19.         */
  20.     //    alert(123456)
  22.         // 声明变量
  23.         // 在js中使用var关键字声明一个变量
  24.         var a;
  25.         // 为变量赋值
  26.         a = 123;
  27.         a = 456;
  28.         console.log(a);
  30.         // 声明和赋值同时进行
  31.         var b = 789 ;
  32.         console.log(b);
  34.         var age = 80;
  35.         console.log(age);
  36.     </script>
  37. </head>
  38. <body>
  39.     
  40. </body>
  41. </html>

5.js基础——js标识符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.         标识符：
  11.             在js中所有可以由我们自主命名的都可以称为标识符
  12.             例如：变量名、函数名、属性名都属于标识符
  13.             命名要符合一下规则：
  14.                 1.标识符中可以含义字母、数字、_、$
  15.                 2.标识符不能以数字开头
  16.                 3.标识符不能是ES中的关键字和保留字
  17.                 4.标识符一般采用驼峰命名法
  18.                                 --首字母小写，每个单词的首字母大写，其余小写
  19.             
  20.         */
  21.        var a1_$ = 123;
  22.         // var 22a1_$ = 123;(不能以数字开头)
  23.         // var var = 123;(var是关键字)
  24.         var helloWorld;
  25.     </script>
  26. </head>
  27. <body>
  28.     
  29. </body>
  30. </html>

6.js基础——js基本数据类型

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             数据类型指的是字面量的类型
  11.                 在js中一共有8大基本数据类型
  12.                     String 字符串
  13.                     Number  数值
  14.                     Boolean 布尔
  15.                     Null    空值
  16.                     Undefined 未定义
  17.                     Object      对象
  18.                     Array    数组
  19.                     Function  函数
  20.             其中String、Number、Boolean、Null、Undefined 为基本数据类型
  21.             Object、Array、Function为引用数据类型
  22.         */
  24.         /*
  25.             String字符串
  26.                 在js中字符串需要使用引号引起来
  27.                 使用双引号和单引号都可以，但是不要混着用
  28.         */
  29.        /*
  30.             在字符串中我们可以使用\作为转义字符
  31.                 当表示特殊符号时使用\转义
  32.                 \" 表示"
  33.                 \' 表示'
  34.                 \n 表示换行
  35.                 \t 表示制表符
  36.                 \\ 表示\
  37.         */
  38.        var str = "hello";
  39.        var str1 = "我说：\"今天是周二!\"";
  40.        console.log(str1);       // 我说："今天是周二!"
  41.        // 输出字面量 字符串str    
  42.        console.log(str);        // hello
  43.        // 输出变量str    
  44.        console.log("str");      // str
  46.         /*
  47.             Number数值
  48.                 在js中所有的数值都是Number类型
  49.                 包括整数、小数（浮点数）
  50.                 js中可以表示的最大值
  51.                     Number.MAX_VALUE
  53.                 js中最小的正值
  54.                     Number.MIN _VALUE
  56.                     Infinity表示正无穷
  57.                     -Infinity表示负无穷
  58.                 NaN 是一个特殊的数字
  59.                     使用typeof检查一个NaN也会返回一个number
  60.         */
  61.         //    数值 123
  62.        var a = 123;
  63.         //    字符串 123
  64.        var b = "123";
  65.         /*
  66.             可以使用typeof来检查变量的数据类型
  67.             语法：typeof 变量
  68.             当检查字符串时 会返回string
  69.             检查数值时 会返回 number
  70.         */
  71.        console.log(typeof a);   //number
  72.        console.log(a);  // 123
  73.        console.log(b);  // 123
  74.        console.log(typeof b);  // string
  75.        max = Number.MAX_VALUE;
  76.        console.log(max);
  78.     //    使用js整数的运算基本是可以实现准确
  79.         var num = 2 + 4 ;
  80.         console.log(num);   //6
  81.     // 如果使用js进行浮点元素，可能得到一个不精确的结果
  82.         var cc = 0.1 + 0.2 ;
  83.         console.log(cc);    //0.30000000000000004
  85.         /*
  86.             Boolean 布尔值
  87.                 布尔值只有两个，主要作为逻辑判断
  88.                 true  真
  89.                 false  假
  90.         */
  91.         var bool = true;
  92.         console.log(bool);  //true
  93.         console.log(typeof bool);  //boolean
  95.         /*
  96.             Null类型的值只有一个 就是null
  97.                 null这个值专门用来表示空对象
  98.                 使用typeof检查null时，返回一个object
  99.         */
  100.        var nul = null;
  101.        console.log(nul); //null
  102.        console.log(typeof nul); //object
  104.        /*
  105.             Undefined类型的值只有一个 就是Undefined
  106.                 当声明一个变量时，但是不给其变量赋值，它的值就是Undefined
  107.         */
  108.         var und;
  109.        console.log(und); //undefined
  110.        console.log(typeof und); //undefined
  111.     </script>
  112. </head>
  113. <body>
  114.     
  115. </body>
  116. </html>

7.js基础——js强制类型转换（转为String）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             强制类型转换
  11.                 将一个数据类型转换为其他数据类型
  12.                 类型转换主要是：将其他的数据类型。转换为
  13.                     string 、 number 、boolean
  14.         **/
  15.        /*
  16.             将其他类型转为string
  17.                 方式一：
  18.                     调用被转换数据类型的toString()方法
  19.                     该方法不会影响到原变量，会将转换的结果返回
  20.                     null和undefined这两个值没有toString方法
  21.                 方式二：
  22.                     调用String()函数，并将被转换的数据作为参数传递给函数
  23.                         对于number和boolean实际上就是调用的toString()方法
  24.                         但是对于null和undefined，不会调用toString()
  25.                             它会将null转为"null"
  26.                             它会将undefined转为"undefined"
  28.                 
  29.        */
  30.         var  a = 123;
  31.         // 调a的toString()的方法
  32.         // a = a.toString()
  33.         // 调用String()函数
  34.         a = null; 
  35.         a = undefined; 
  36.         a = String(a)
  37.         console.log(a);
  38.         console.log(typeof a);
  39.     </script>
  40. </head>
  41. <body>
  42.     
  43. </body>
  44. </html>

8.js基础——js强制类型转换（转为Number）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             强制类型转换
  11.                 将一个数据类型转换为其他数据类型
  12.                 类型转换主要是：将其他的数据类型。转换为
  13.                     string 、 number 、boolean
  14.         **/
  15.        /*
  16.             将其他类型转为number
  17.                 方式一：
  18.                     使用我们Number()函数
  19.                             --》字符串转 数字
  20.                                1.如果是纯数字的字符串，则直接转换为数字
  21.                                2.如果是非数字的字符串。则转为NaN
  22.                                3.如果是空字符串，则转为0
  23.                             --》布尔值转 数字
  24.                                 true，转为1，false转为0
  25.                             --》null转 数字
  26.                                 null转数字为0
  27.                             --》undefined转 数字
  28.                                 null转数字为NaN
  29.                             
  30.                 方式二：
  31.                     此方式专门对字符串
  32.                     parseInt() 将字符串转为一个整数
  33.                     parseFloat() 将字符串转为一个浮点数
  34.                     如果对非字符串使用，会将其先转为string，然后操作
  35.        */
  36.         var  a = "123";
  37.         var  b = "123px";
  38.         var  c = "3.1415926px";
  39.         // 调用Number()函数将a转换为数值类型
  40.         a = Number(a)
  41.         console.log(a);
  42.         console.log(typeof a);
  43.         // 调用parseInt()函数将a转换为数值类型
  44.         b = parseInt(b)
  45.         console.log(b);
  46.         console.log(typeof b);
  47.         // 调用parseFloat()函数将a转换为数值类型
  48.         c = parseFloat(c)
  49.         console.log(c);
  50.         console.log(typeof c);
  51.     </script>
  52. </head>
  53. <body>
  54.     
  55. </body>
  56. </html>

9.js基础——其他进制的数字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         
  10.         var a = 123;
  12.         /*
  13.             在js中，如果需要表示16进制的数字，则要以0x开头
  14.                     如果需要表示8进制的数字，则以0开头
  15.                     如果需要表示2进制的数字，则要以0b开头,但不是所有的浏览器都支持
  16.         */
  17.         //16进制
  18.         a = 0x10
  19.         // 2进制
  20.         a = 0b10
  21.         // 8进制
  22.         a = "070"
  23.         a = parseInt(a,10)
  24.         console.log(a);  //表示以10进制的方式转换
  25.     </script>
  26. </head>
  27. <body>
  28.     
  29. </body>
  30. </html>

10.js基础——js强制类型转换（转为boolean）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             强制类型转换
  11.                 将一个数据类型转换为其他数据类型
  12.                 类型转换主要是：将其他的数据类型。转换为
  13.                     string 、 number 、boolean
  14.         **/
  15.        /*
  16.             将其他类型转为boolean
  17.                 调用Boolean()函数来转换
  18.                     数字--》布尔
  19.                         除了0和NaN都是true
  20.                     字符串--》布尔
  21.                         除了空串，其余都是true
  22.                     null和undefined都是false
  23.                     对象也会转换为true
  25.        */
  26.       var a = 123;  //true
  27.       a = 0;        //fasle
  28.       a = NaN;       //fasle
  29.       a = Infinity;   //true
  30.       a = "66465";   //true
  31.       a = "";         //fasle
  32.       a = null;         //fasle
  33.       a = undefined;   //fasle
  34.       a = Boolean(a);
  35.       console.log(a);
  36.       console.log(typeof a);
  38.     </script>
  39. </head>
  40. <body>
  41.     
  42. </body>
  43. </html>

11.js基础——js算术运算符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.        /*
  10.         运算符也叫操作符
  11.             通过运算符可以对一个或者对个值进行运算
  12.             比如：typeof就是运算符，可以来获取一个值的类型
  13.                     它会将该值的类型以字符串的形式返回
  14.        
  15.             算术运算符
  16.               + 
  17.               两个字符串相加等于拼接的数值
  18.               true + false等于转为数值再相加
  19.               任何数和NaN相加都是NaN
  20.               任何值和字符串做加法运算都会先转为字符串，再拼接
  21.                     我们可以利用此特点，将任意数据类型加上空串，就可以变成字符串
  23.                 -
  24.                可以对两个数减法运算，并将结果返回
  26.                 *
  27.                 可以对两个数进行乘法
  29.                 /
  30.                 可以对两个数进行除法
  32.                 % 取余数
  33.         */
  34.       var a = 123;
  35.       var res = typeof a;
  36.     //   console.log(typeof res);
  37.         a = a + 1; //124
  38.         console.log(a);
  39.         console.log(true + false);  // 1
  40.         console.log(1 + NaN);       // NaN
  41.         console.log("1" + "3");     // 13
  42.         console.log( 1 + "3");      // 13
  43.         console.log( "he" + "llo");      // hello
  44.         console.log(1+2+"3");   //33
  45.         console.log("1"+2+3);   //123
  47.     //   任何值做 - * % 都会转为number
  48.             // 可以利用此特点进行类型转换
  49.         console.log(100 - 99);  //1
  50.         console.log(100 - "99");  //1
  52.         console.log(2 * 2);     //4
  53.         console.log(2 * "2");     //4
  54.         console.log(2 * null);     //0
  55.         console.log(2 * undefined);     //NaN
  57.         console.log(4 / 2);     //2
  58.         console.log(4 / undefined);     //NaN
  60.         console.log(9 % 3);     //0
  61.         console.log(9 % 2);     //1
  62.     </script>
  63. </head>
  64. <body>
  65.     
  66. </body>
  67. </html>

12.js基础——js一元运算符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.        /*
  10.         一元运算符，只需要一个操作数
  11.         +   正号
  12.                 正号不会对数字产生任何影响
  13.         -   负号
  14.                 负号可以对数字取反
  15.             对于非number的值，先转为number再运算
  16.             可以对其他数据类型进行+，就转为number
  17.        */
  18.         var a = 123;
  19.         a = -a;
  20.         a = true;
  21.         a = "18";
  22.         console.log(-a);
  23.         console.log(1 + +"2" +3);   //6
  24.     </script>
  25. </head>
  26. <body>
  27.     
  28. </body>
  29. </html>

13.js基础——js自增和自减

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.         自增
  11.             通过自增可以使变量在自身基础上+1
  12.                 自增分为两种：后++(a++),前++(++a)
  13.                 无论是a++,还是++a，都会使原变量立即自增
  14.                     不同的是a++,++a的值不同
  15.                 a++的值等于自增之前的值(原变量的值)
  16.                 ++a的值等于自增之后的值(原变量的新值)
  18.             通过自减可以使变量在自身基础上-1
  19.                 无论是a--还是--a，都会立即使原变量自减1
  20.                     a--是变量的原值（自减前的值）
  21.                     --a是变量的新增（自减以后的值）
  22.             */
  23.     //    var a = 1;
  24.     //     //使a自增+1
  25.     //     // a++;    
  26.     //     // a++;    
  27.     //     console.log(++a);
  28.     //     console.log(a);
  29.     var c = 10;
  30.     c++;        //在10基础上自增
  31.     console.log(c++);   //11    在11的基础上自增
  33.     var d = 20;
  34.     // console.log(++d); //21
  35.     // console.log(++d); //22
  37.     //20 + 22 +22
  38.     // var res = d++ + ++d + d;
  39.     // console.log(res);   
  41.     d = d++;
  42.     console.log(d);
  44.     var num = 10;
  45.     --num;
  46.     console.log(num);   //9
  47.     </script>
  48. </head>
  49. <body>
  50. </body>
  51. </html>

14.js基础——js逻辑运算符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             js中为我们提供三种逻辑运算符
  11.                 ! 非
  12.                     !可以用来对一个值进行非运算
  13.                         非可以对布尔值进行取反
  14.                         true变false，false变true
  15.                         对于非布尔值，则会先转为布尔值，然后再取反
  16.                             可以利用此特点，来将其他数据类型转为布尔类型
  17.                 && 与
  18.                     &&可以对符号的两侧的值进行与运算，并返回结果
  19.                     运算规则
  20.                         两个值中只要有一个值为false，就是fasle，反之true
  21.                             如果第一个值是false，则不会校验第二个值，直接false
  22.                             如果第一个值是true，则会校验第二个值
  23.                 || 或
  24.                     可以对符号两侧的值进行运算并返回结果
  25.                     运算规则
  26.                         两个值只要有一个true就会返回true
  27.                         两个值都为false，会返回false
  28.                     JS中的或，属于短路的或
  29.                         如果第一个值为true，不会检查第二个值
  30.                         如果第一个值为false，不会检查第二个值
  32.         */
  34.         var res = true && false;
  35.         console.log(res);   //false
  37.         var a = true;
  38.         // 对a进行!运算
  39.         a = !a;
  40.         console.log(a); //false
  41.         var b = 0;
  42.         b = !b;
  43.         console.log(b); //true
  45.         var ress = true && true;         //true
  46.         var ress = false && false;        //false
  47.         var ress = false && true;        //false
  48.         console.log(ress);
  50.         var h = true || true;   //true
  51.         var h = true || false;  //true
  52.         var h = false || true;  //true
  53.         var h = false || false;  //false
  54.         console.log(h); 
  56.         true || alert('不会找到我')
  57.         false || alert('会找到我')
  58.     </script>
  59. </head>
  60. <body>
  61.     
  62. </body>
  63. </html>

15.js基础——js非布尔值的与或

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             && || 非布尔值的情况
  11.                 对于非布尔值进行与或运算，先转为布尔值，再进行运算,并且返回原值
  12.             与运算：
  13.                 如果第一个值为true，则必然返回第二个值
  14.                 如果第一个值为false，直接返回第一个值
  16.             或
  17.                 如果第一个值true,直接返回第一个值
  18.                 如果第一个值false,直接返回第二个值
  19.                 */
  20.         // true && true;
  21.             // 与运算,如果两个值都为true,则返回第二个值
  22.        var res = 1 && 2;
  23.         // false && true;
  24.             //如果有false，返回false
  25.            res = 2 && 0;
  26.         // false && false;
  27.             //两个都为false，返回前面的值
  28.            res = NaN && 0;
  30.         // true && true;
  31.         // 如果第一个值true,直接返回第一个值
  32.            res = 1 || 2;
  33.         // 如果第一个值false,直接返回第二个值
  34.            res = 0 || 2;
  35.            res = "" || "hello";
  36.            res = -1 || "hello";
  37.        console.log(res);
  38.     </script>
  39. </head>
  40. <body>
  41.     
  42. </body>
  43. </html>

16.js基础——js赋值运算符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.        /*
  10.             =
  11.                 可以将符号右侧的值赋值给左侧的变量
  12.             +=
  13.                 a += 5; ===> a = a + 5; 
  14.             -=
  15.                 a -= 5; ===> a = a - 5; 
  16.             *=
  17.                 a *= 5; ===> a = a * 5; 
  18.             /=
  19.                 a /= 5; ===> a = a / 5; 
  20.             %=
  21.                 a %= 5; ===> a = a % 5; 
  22.        */
  23.       var a = 10;
  24.     // a += 5;
  25.     // a -= 5;
  26.     // a *= 5;
  27.     // a /= 5;
  28.     a %= 3;
  29.       console.log(a);
  30.     </script>
  31. </head>
  32. <body>
  33.     
  34. </body>
  35. </html>

17.js基础——js关系运算符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             通过关系运算符，可以比较两个值之间的大小关系
  11.                 如果关系成立返回true，反之false
  12.             对于非数字先转为数值，再进行比较
  13.             任何值和NaN作比较都是false
  14.             如果两边都是字符串，不会将其转为数值，而会转为字符串的unicode编码进行比较
  16.             > 大于号
  17.             < 小于号
  18.             >=  大于等于
  19.             <=  小于等于
  20.             ==  等于
  21.                 当使用==会字符串先转为数值型，再进行比较
  22.             ===  绝对等于
  23.             !=   不等于
  24.             !==   绝对不等于
  25.         */
  26.         /*
  27.             undefined 衍生自 null
  28.                 所以这两个值做相等判断时，会返回true
  29.             NaN 不和任何值相等，包括它本身
  30.         */
  31.        /*
  32.         可以通过isNaN()函数来判断是否是NaN
  33.        
  34.        */
  35.         console.log(5>10);
  36.         console.log(5<10);
  37.         console.log(1>true);
  38.         console.log(1>NaN);
  39.         console.log("5">"10");
  40.         console.log(5<=10);
  41.         console.log(undefined==null);
  42.         console.log(NaN==NaN);
  43.         console.log(5==10);
  44.         console.log(5===5);
  45.         console.log(5!=10);
  46.         console.log(5!==10);
  47.     </script>
  48. </head>
  49. <body>
  50.     
  51. </body>
  52. </html>

18.js基础——编码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             在字符串中使用转译字符输入Unicode编码
  11.                 \u四位编码  16进制编码
  12.         */
  13.         console.log("\u2620");
  14.     </script>
  15. </head>
  16. <body>
  17.     <!-- 在网页中使用Unicode编码 10进制编码 -->
  18.     <h1 style="font-size:100px;">&#9760;</h1>
  19.     <h1 style="font-size:100px;">&#9856;</h1>
  20. </body>
  21. </html>

19.js基础——js条件运算符（三元运算符）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /* 
  10.             条件运算符也叫三元运算符
  11.                 语法：
  12.                     条件表达式?语句1:语句2;
  13.                 执行流程：
  14.                     条件表达式在执行时，首先对条件表达式进行求值
  15.                         如果值为true，则执行语句1，否则执行语句2
  16.         */
  17.         var a = 10;
  18.         var b = 20;
  19.         var c = 50;
  20.         a > b ? alert('a大'):alert('b大')
  21.         // 不推荐使用 不方便阅读
  22.         var max = a > b ? (a > c ? a : c): (b > c ? b : c);
  23.         console.log(max);
  24.     </script>
  25. </head>
  26. <body>
  27. </body>
  28. </html>

20.js基础——js运算符的优先级

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             , 运算符
  11.                 使用,可以分割多个语句，一般可以在声明多个变量使用
  12.         */
  13.         //    使用,声明多个变量
  14.         var a , b , c;
  16.         /*
  17.         运算符的优先级
  18.             比如先乘除后加减
  19.         */
  20.         console.log(2 + 2*6);
  22.         //
  23.         var res = 1 || 2 && 3;
  24.         console.log(res);
  25.     </script>
  26. </head>
  27. <body>
  28. </body>
  29. </html>

附：

21.js基础——js代码块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title></title>
  8.     <script>
  9.         /*
  10.             我们的程序是由一条条语句构成的
  11.                 语句是按照自上向下一条条执行
  12.                     同一个{}中的语句称为一条语句
  13.                     他们要么都执行，要么都不执行
  14.                     一个{}中的语句我们称之为一个代码块
  15.                     在代码块的后面不需要写分号
  17.                     js中的代码块只有分组的作用，没有其他作用
  18.                         代码块内容的内容，在外部是完全可见得
  19.                     
  20.         */
  21.         {
  22.             var a = 13;
  23.             alert('hello');
  24.             console.log(6666);
  25.             document.write("语句")
  26.         }
  27.         console.log(a);
  28.         {
  29.             alert('hello');
  30.             console.log(6666);
  31.             document.write("语句")
  32.         }
  33.     </script>
  34. </head>
  35. <body>
  36. </body>
  37. </html>

总结

如果您有疑问可以在评论区留言或者私信我，感谢观看！

标签： javascript 前端 开发语言
本文转载自: https://blog.csdn.net/qq_46362763/article/details/126236523
版权归原作者 陈使劲敲代码 所有， 如有侵权，请联系我们删除。
登录后发布评论

“JS入门到精通完整版”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？