JavaScript基础1

JavaScript

JavaScript的组成

1. ECMAScript：
JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)。
ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。
2. 文档对象模型（DOM）：
DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。
DOM 将把整个页面规划成由节点层级构成的文档。
HTML 或 XML 页面的每个部分都是一个节点的衍生物。
3. 浏览器对象模型（BOM）：
对浏览器窗口进行访问和操作。
例如：弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。

JavaScript代码的书写位置

外链式 JS 代码（推荐）

// .js 文件
alert('弹出')

<!-- html 文件 -->
<script src="my.js"></script>

内嵌式 JS 代码

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script>
        alert('弹出');
    </script>

行内式 JS 代码（不推荐）

 <input type="button" value="唐伯虎" onclick="alert('秋香姐')">

JavaScript注释

单行注释

// 单行注释
// ctrl+/或者'//'
alert('弹出')

多行注释

/*
	多行注释
*/
/*
	可以注释一大段话或者代码
	'中间可以写注释内容/**/'或者快捷键ctrl+shift+a(vscode中的快捷键)
*/

js输入输出语句

// 这是一个输入框 ''中输入提示信息
prompt('请输入您的年龄');
// alert 弹出警示框 输出的 展示给用户的
alert('我是弹出来的');
// console 控制台输出 给程序员测试用的  
console.log('我是程序员能看到的');

变量

1. 变量是指在程序中保存数据的一个容器
2. 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
3. 也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了之后方便找到该变量
4. 语法： var 变量名 = 值

定义变量及赋值

 // 1. 声明了一个age 的变量 
        var age;
        // 2. 赋值  把值存入这个变量中
        age = 18;
        // 3. 输出结果 
        console.log(age);
        // 4. 变量的初始化 
        var myname = '嘟嘟';
        console.log(myname);

变量的更新：

//一个变量名只能存储一个值，当再次给一个变量赋值的时候，前面一次的值就会被覆盖从而消失
 		var age = 16;
        console.log(age);
        age = 18;
        console.log(age);

声明多个变量：

//同时声明多个变量
		var age = 10,
            address = '地球',
            uname = '嘟嘟';

声明变量的特殊情况：

// 1. 只声明不赋值 结果是？程序也不知道里面存的是啥 所以结果是 undefined  未定义的
        var sex;
        console.log(sex); // undefined
        // 2.  不声明 不赋值 直接使用某个变量会报错
        // console.log(tel);
        //3. 不声明直接赋值使用
        qq = 110;
        console.log(qq);

变量的命名规则和命名规范

规则：

1. 变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成
2. 严格区分大小写
3. 不能由数字开头
4. 不能是 保留字 或者关键字
5. 不能出现空格

规范：

1. 变量名尽量语义化
2. 遵循驼峰命名规则

交换两个变量

/*
1. 我们需要一个临时变量帮我们
2. 把box1 给我们的临时变量 temp 
3. 把box2 里面的苹果给 box1 
4. 把临时变量里面的值 给 box2 
*/
       // 声明了一个临时变量为空
	    var temp; 
        var box1 = '青苹果';
        var box2 = '红苹果';
        temp = box1; 
		// 把右边盒子里的给左边盒子
        box1 = box2;
        box2 = temp;
        console.log(box1);
        console.log(box2);

数据类型*

基本数据类型

1. 数值类型（number）

   • 一切数字都是数值类型（包括二进制，十进制，十六进制等）

   • NaN（not a number），一个非数字

   • var num = 10; // num 数字型 
             var PI = 3.14 // PI 数字型
             // 1. 八进制  0 ~ 7  我们程序里面数字前面加0 表示八进制
             var num1 = 010;
             console.log(num1); //  010  八进制 转换为 10进制 就是  8 
             var num2 = 012;
             console.log(num2);
             // 2. 十六进制  0 ~ 9  a ~ f    #ffffff  数字的前面加 0x 表示十六进制
             var num3 = 0x9;
             console.log(num3);
             var num4 = 0xa;
             console.log(num4);
             // 3. 数字型的最大值
             console.log(Number.MAX_VALUE);
             // 4. 数字型的最小值
             console.log(Number.MIN_VALUE);
             // 5. 无穷大
             console.log(Number.MAX_VALUE * 2); // Infinity 无穷大  
             // 6. 无穷小
             console.log(-Number.MAX_VALUE * 2); // -Infinity 无穷小
             // 7. 非数字
             console.log('啦啦啦' - 100); // NaN
     

2. 字符串类型（string）

   • 被引号包裹的内容（可以是单引号也可以是双引号）

   • var str = '我是一个的程序"媛"';
     

   • 字符串的拼接

   • // 2. 字符串的拼接 +  只要有字符串和其他类型相拼接 最终的结果是字符串类型
             console.log('嘟嘟' + '爱叫'); // 字符串的 沙漠骆驼
             console.log('嘟嘟' + 10); // '嘟嘟10'
             console.log('dudu' + true); // dudutrue
             console.log(10 + 10); // 20
             console.log('8' + 10); // '810'
     

   •  // 我们变量不要写到字符串里面，是通过和 字符串相连的方式实现的
     //1.'字符'+变量+'字符'
     	    var age = 10;
             console.log('嘟嘟' + age + '岁');
     //2.`&{}`模板字符串语法-新增
      var uname = '嘟嘟'
             var age = 10
             var hobby = '骨头'
             console.log(`${uname}今年${age}岁了，他喜欢吃${hobby}`)
     

3. 布尔类型（boolean）

   • 值：true 或者 false

   • 		var bool = true; // flag 布尔型 
             var bool1 = false; // flag1 布尔型
             console.log(bool + 1); // true 参与加法运算当1来看
             console.log(bool1 + 1); // false 参与加法运算当 0来看
         
     

4. null类型（null）

   • 只有一个null表示空

   •  // null 空值
             var space = null;
             console.log(space + '嘟嘟'); // null嘟嘟
             console.log(space + 1); // 1
     

5. undefined类型（undefined）

   • 只有一个 undefined表示没有值

     // 如果一个变量声明未赋值 就是 undefined 未定义数据类型
             var str;
             console.log(str);
             var variable = undefined;
             console.log(variable + '嘟嘟'); // undefined嘟嘟
             console.log(variable + 1); // NaN  undefined 和数字相加 最后的结果是 NaN
     

判断数据类型

使用 typeof 关键字来进行判断

// 第一种使用方式
var n1 = 6;
console.log(typeof n1);

// 第二种使用方式
var s1 = 'dudu';
console.log(typeof(s1));

判断一个变量是不是数字（是非数字）

可以使用 isNaN（is not a number） 这个方法来判断一个变量是不是数字

// 如果变量是一个数字
var n1 = 10;
console.log(isNaN(n1)); //=> false

// 如果变量不是一个数字（是非数字）
var s1 = '嘟嘟'
console.log(isNaN(s1)); //=> true

数据类型的转换

转换数值型（number）

1. Number(变量)

   可以把一个变量强制转换成数值类型

   可以转换小数，保留小数

   可以转换布尔值

   遇到不可转换的都会返回 NaN

       var str = '123';
       console.log(Number(str));
       console.log(Number('12'));
   

2. parseInt(变量)

   • 从第一位开始检查，是数字就转换，直到遇到一个不是数字的内容

   • 开头就不是数字，那么直接返回 NaN

   • 不可以识别小数点

     // 1. parseInt(变量)  可以把 字符型的转换为数字型 得到是整数
     // console.log(parseInt(age));
             console.log(parseInt('3.14')); // 3 取整
             console.log(parseInt('120px')); // 120 会去掉px以及之后内容
             console.log(parseInt('rem665px')); // NaN
     

3. parseFloat(变量)

   • 从第一位开始检查，是数字就转换，直到遇到一个不是数字的内容

   • 开头就不是数字，那么直接返回 NaN

   • 可以识别小数点

     console.log(parseFloat('3.14')); // 3.14
     console.log(parseFloat('120px12')); // 120 会去掉这个px后边的
    console.log(parseFloat('rem879px')); // NaN
   

4. 除了加法以外的数学运算

   // 4. 利用了算数运算 -  *  /  隐式转换
           console.log('12' - 0); // 12
           console.log('123' - '120');
           console.log('123' * 1);
   

转换成字符串型（string）

1. 变量.toString()

   • 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null

   // 1. 把数字型转换为字符串型 变量.toString()
            var num = 10;
            var str = num.toString();
            console.log(str);
            console.log(typeof str);
   

2. String(变量)

   • 所有数据类型都可以

    var num = 10；
    console.log(String(num));
   

3. 使用加法运算

   • 利用 ‘+’ 拼接字符串的方法实现转换效果 隐式转换

    console.log(num + '');
   

其他数据类型转换成布尔型（boolean）

在 js 中，只有 ‘’、0、null、undefined、NaN，这些是 false，其余都是 true

 // 代表空的字符会转换成false  其余全部是true
        console.log(Boolean('')); // false
        console.log(Boolean(0)); // false
        console.log(Boolean(NaN)); // false
        console.log(Boolean(null)); // false
        console.log(Boolean(undefined)); // false
        console.log('------------------------------');
        console.log(Boolean('123'));
        console.log(Boolean('你好吗'));
        console.log(Boolean(66));

运算符

数学运算符

1. +

   只有符号两边都是数字的时候才会进行加法运算

   只要符号任意一边是字符串类型，就会进行字符串拼接

2. -

   会执行减法运算

   会自动把两边都转换成数字进行运算

3. *

   会执行乘法运算

   会自动把两边都转换成数字进行运算

4. /

   会执行除法运算

   会自动把两边都转换成数字进行运算

5. %

   会执行取余运算

   会自动把两边都转换成数字进行运算

//例子
		console.log(1 + 1); // 2
        console.log(1 - 1); // 0
        console.log(1 * 1); // 1
        console.log(1 / 1); // 1
        // 1. % 取余 （取模）  
        console.log(10 % 2); // 0
        console.log(5 % 3); // 2
        console.log(3 % 5); // 3
        // 2. 浮点数 算数运算里面会有问题
        console.log(0.1 + 0.2); // 0.30000000000000004
        console.log(0.07 * 100); // 7.000000000000001
        // 3. 我们不能直接拿着浮点数来进行相比较 是否相等
        var num = 0.1 + 0.2;
        console.log(num == 0.3); // false

赋值运算符

1. =

   就是把 = 右边的赋值给等号左边的变量名

2. +=

   20a += 10等价于a = a + 10

3. -=

   a -= 10等价于a = a - 10

4. *=

   a *= 10等价于a = a * 10

5. /+

   a /= 10等价于a = a / 10

6. %=

   a %= 10等价于a = a % 10

比较运算符

1. ==

   • 比较符号两边的值是否相等，不管数据类型

    console.log(18 == 18); // true
   

2. ===

   • 比较符号两边的值和数据类型是否都相等

     // 2. 我们程序里面有全等 一模一样  要求 两侧的值 还有 数据类型完全一致才可以 true
            console.log(18 === 18);
            console.log(18 === '18'); // false
   

3. !=

   • 比较符号两边的值是否不等

    console.log(18 != 18); // false
   

4. !==

   • 比较符号两边的数据类型和值是否不等

    console.log(18 !== '18'); // false
   

5. >=

   • 比较左边的值是否 大于或等于 右边的值

    console.log(3 >= 5); // false
   

6. <=

   • 比较左边的值是否 小于或等于 右边的值

    console.log(2 <= 4); // true
   

7. >

   • 比较左边的值是否 大于 右边的值

8. <

   • 比较左边的值是否 小于 右边的值

逻辑运算符

1. &&逻辑与

   • 进行 且 的运算

   • 符号左边必须为 true 并且右边也是 true，才会返回 true

   • 只要有一边不是 true，那么就会返回 false

     // 1. 逻辑与 &&  and 两侧都为true  结果才是 true  只要有一侧为false  结果就为false 
            console.log(3 > 5 && 3 > 2); // false
            console.log(3 < 5 && 3 > 2); // true
   

2. ||逻辑或

   • 进行 或 的运算

   • 符号的左边为 true 或者右边为 true，都会返回 true

   • 只有两边都是 false 的时候才会返回 false

   // 2. 逻辑或 || or  两侧都为false  结果才是假 false  只要有一侧为true  结果就是true
            console.log(3 > 5 || 3 > 2); // true 
            console.log(3 > 5 || 3 < 2); // false
   

3. !逻辑非

   • 进行 取反 运算

   // 3. 逻辑非  not  ！ 
            console.log(!true); // false
   

短路运算（逻辑中断）

逻辑与短路运算

• 如果表达式1 结果为真 则返回表达式2 ，如果表达式1为假 那么返回表达式1

• 逻辑与 真 就继续 假 就停止

// 1. 用布尔值参与的逻辑运算  true && false  == false 
// 2. 123 && 456  是值 或者是 表达式 参与逻辑运算？ 
// 3.逻辑与 真 就继续 假 就停止
         console.log(123 && 456); // 456
         console.log(0 && 678); //  0
         console.log(0 && 1 + 2 && 789 * 56789); // 0
         console.log('' && 1 + 2 && 235 * 56789); // ''
// 如果有空的或者否定的为假 其余是真的  0  ''  null undefined  NaN

逻辑或短路运算

• 如果表达式1 结果为真 则返回的是表达式1，如果表达式1 结果为假 则返回表达式2

		console.log(123 || 456); // 123
        // 直到真就停止
        console.log(123 || 456 || 456 + 123); // 123
        console.log(0 || 456 || 789 + 123); // 456
        console.log(0 || 0 || 1);// 1
        console.log(0 || 0 || 0);// 0

注：

 // 逻辑中断 会影响我们程序运行结果
        var num = 0;
        console.log(123 || num++);
//如果逻辑或已经执行123  后边的自增就不加了
        console.log(num); // 0

自增自减运算符（一元运算符）

1. ++

   • 进行自增运算

   • 分成两种，前置++ 和 后置++

   • 前置++，会先把值自动 +1，在返回

      // 1. 想要一个变量自己加1
             var num = 1;
             num = num + 1; // ++num
             ++num
             console.log(num); // 3
     // 2. 前置递增运算符  ++ 写在变量的前面
             var age = 10;
             ++age; // 类似于 age = age + 1
             console.log(age);
             // 3. 先加1  后返回值
             var p = 10;
             console.log(++p + 10);//21
     

   • 后置++，会先把值返回，在自动+1

     		var num = 10;
             num++; // num = num + 1    ++num;
             console.log(num);
     // 1. 前置自增和后置自增如果单独使用 效果是一样的
     // 2. 后置自增 口诀：先返回原值 后自加1 
             var age = 10;
             console.log(age++ + 10);//20
             console.log(age);//11
     

2. --

   • 进行自减运算
   • 分成两种，前置– 和 后置–
   • 和 ++ 运算符同理

分支结构

js 代码都是顺序执行的（从上到下）

逻辑分支就是根据设定好的条件来决定要不要执行某些代码

IF 条件分支结构（重点）

if 语句

• 通过一个 if 语句来决定代码是否执行

• 语法：

  if (条件) {
    //执行语句
  }
  

• 执行思路：如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句；如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码

• 例子🌰： 根据变量给出的年龄，判断是否成年

    //小案例 年龄判断
    // 弹出 prompt 输入框，用户输入年龄， 程序把这个值取过来保存到变量中
    // 使用 if 语句来判断年龄，如果年龄大于18 就执行 if 大括号里面的输出语句
            var age = prompt('请输入您的年龄:');
            if (age >= 18) {
                alert('你已经成年啦！');
            }
  

if else 双分支语句

• 通过 if 条件来决定，执行哪一个 {} 里面的代码

• 语法：

   if (条件) {
       //条件为 true 的时候执行
   } else { 
       //条件为 false 的时候执行
   }
  

• 两个执行语句 一定有一个会执行

• 例子🌰： 根据变量给出的年份，判断该年是平年还是闰年

  // 小案例 闰年判断
   //规则：能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
  // 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
  // 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
          var year = prompt('请您输入年份：');
          if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
              alert('您输入的年份是闰年');
          } else {
              alert('您输入的年份是平年');
          }
  

if else if … 多分支语句

• 可以通过 if 和 else if 来设置多个条件进行判断

• 语法：

  if (条件1) { 
      //条件1为 true 的时候执行
  } else if (条件2) { 
      //条件2为 true 的时候执行 
  }else{
      //以上语句都不执行时  最后执行的语句
  }
  

• 执行思路

  • 如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句

  • 如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推

  • 如果上面的所有条件表达式都不成立，则执行else 里面的语句

• 多分支语句还是多选1 最后只能有一个语句执行

• 例子🌰： 根据变量给出的成绩，判断它的优良中差，不及格。

  // 小案例 成绩判断
  //  伪代码  按照从大到小判断的思路
  // 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
  // 使用多分支 if else if 语句来分别判断输出不同的值
          var score = prompt('请您输入分数:');
          if (score >= 90) {
              alert('优秀');
          } else if (score >= 80) {
              alert('良好');
          } else if (score >= 70) {
              alert('中等');
          } else if (score >= 60) {
              alert('差');
          } else {
              alert('不及格');
          }
  

switch 条件分支结构（重点）

• 也是条件判断语句的一种

• 执行思路：利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句

• 语法：

  switch (要判断的变量) {
    case 情况1:
      //情况1要执行的代码
      break
    case 情况2:
      //情况2要执行的代码
      break
    case 情况3:
      //情况3要执行的代码
      break
    default:
      //上述情况都不满足的时候执行的代码
  }
  

• 例子🌰： 根据变量给出的蔬菜判断它的价格

  //小案例 查询蔬菜的价格
  var fruit = prompt('请您输入查询的蔬菜:');
          switch (fruit) {
              case '菠菜':
                  alert('菠菜的价格是 3.5/斤');
                  break;
              case '土豆':
                  alert('土豆的价格是 1.5/斤');
                  break;
              case '生菜':
                  alert('生菜的价格是 5/斤');
                  break;
              default:
                  alert('没有此蔬菜');
          }
  

三元运算（扩展）

• 三元运算，就是用 两个符号 组成一个语句

• 三元运算只是对 if else 语句的一个简写形式

• 语法：

  //条件表达式 ？ 表达式1 ： 表达式2
  

• 例子🌰： 根据变量给出的数字，判断是否需要补0

  var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
  var result = time < 10 ? '0' + time : time; 
  //   把返回值赋值给一个变量
  alert(result);