JavaScript概念（二）

JavaScript

1.变量的基本使用

①创建变量---变量赋值---变量的使用

// 变量 我的姓名
      let username; // 创建变量
      username = "万翠花"; //  变量赋值
      console.log(username); //  变量的使用

②声明变量的同时 也赋值 常用！

// 变量 我的姓名
      let username= "万翠花";
      console.log(username); //  变量的使用

③一次性可声明多个变量 同时赋值(注意可用“逗号”隔开，或者复写let)

// 一次性声明多个变量 同时赋值
      let username1 = "万大胆",
      height1 = 190,
      weight1 = 200;

④变量 更新问题

 // 声明变量的同时 也赋值 常用！
      let color = "yellow";
      color = "black"; // 变量更新
      alert(color);

⑤变量练习

    <script>
      let name = "张山",
        number = "20件";
      document.write(name + number);
      alert(name + number);
      console.log(name + number);
    </script>

2.变量交换

如：

<script>
      /* 有两个变量 实现交换他们的值
      num1=10    num2=20
      经过程序运作
      num1=20    num2=20 */
      let num1 = "10kg",
        num2 = "20kg",
        num; //设置num空变量

      // 思路：先将num1放到空变量，再使num1等于num2,再让num2与num1交换变量了的num相等
      (num = num1), (num1 = num2), (num2 = num);
      console.log(num1);
      console.log(num2);
      // 在这里若纯数字，输出若用一行代码，数字会相加

      // let number1 = "20",
      //   number2 = "10";
      // (number1 = "10"), (number2 = "20");
      // document.write(number1 + number2);
    </script>

3.变量的规则和规范

1.规则：不遵守就会出错---“合法”

①创建变量，名字不能是内置的关键字，否则不可使用，如let var if for等

②数字不可以开头，符号可以，如let 12hello = "123";

③区分大小写，大小写不同为两个不同变量

2.规范：不遵守也没事不会出错，但一般不推荐

①变量单词较多情况，推荐以一个单词首字母小写第二个单词首字母大写

// 如果变量单词比较多
      let userName = "姓名"; // 推荐的
      let userHeight = "100"; // 推荐的

②书写：大驼峰、小驼峰变量

let shoppingSupermarketShop = "111"; // 小驼峰  首字母小写
et ShoppingSupermarketShop = "111"; // 大驼峰  首字母大写

4.变量-输出用户信息

(输出复合写法 内容${},内容${},内容${},)

    <script>
      let userName = prompt("请输入你的姓名？");
      let age = prompt("请输入你的年龄？");
      let sex = prompt("请输入你的性别？");
      //   输出复合写法 `内容${},内容${},内容${},`
      document.write(`姓名：${userName},年龄：${age},性别：${sex}`);
    </script>

5.基本数据类型

①数字类型number，如let height=100；（数字类型 外边一定不能够加 ''）

②字符串类型string，如let msg ='我不是字符串类型哦'；（它就是 字符串类型 不用管里面装什么内容 就看有没有单引号和双引号）

    <script>
      // 数字类型
      // let height=100; // 数字类型 外边一定不能够加 ''
      // let weight='100';// 是数字类型吗  不是数字类型！！

      // let msg ='我不是字符串类型哦' ;// 它就是 字符串类型 不用管里面装什么内容 就看有没有单引号和双引号

      // // let userName='张三";  错误的  单双引号 配套出现！！

      // let address='我家住在"珠江新城对面的桥洞里"  '; // 外单内双 或者 外双内单

      // //
      // console.log(' 我家 住在 "桥底"  ');

      // 数字类型和字符串类型
      // 以上这两种类型 使用  加号 +   功能不一样
      // 数字类型使用 +  表示数字的相加

      let money1 = 100;
      let money2 = 200;

      let sum = money1 + money2; // 300
      // console.log(sum);
      let num1 = 5,
        num2 = 10;
      let _add = num1 + num2;
      document.write(_add);

      let num3 = "5",
        num4 = "10";
      let _add1 = num3 + num4;
      document.write(_add1);

      // 字符串类型 使用加号 表示两段文字的 拼接

      let userName = "奥特曼";
      let skill = "打怪兽";

      let msg = userName + skill;

      console.log(msg);
    </script>

③字符串拼接练习

 <script>
      let yourName = prompt("请输入你的姓名"),
        age = prompt("请输入你的年龄");
      document.write(`大家好！我的名字叫${yourName}，今年${age}岁`);
    </script>

④布尔类型boolean：只有两种值 真 true 假 false

<script>
      /* 
      boolean 布尔  只有两种值  真  true 假 false
       */
      //  你吃饭了吗
      let isEat = true;
      // 你睡觉了没有
      let isSleep = false;
      // 有什么用 ？ 还没有学习到  条件语句 暂时 感觉不到它的作用
      // 感受
      // 如果你吃饭了， 我现在就去吃大餐
      // 如果你还没有吃饭， 我现在就去吃沙县

⑤未定义类型undefined:只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

⑥空白类型null:表示赋值了，但是内容为空

⑥获取变量类型方法

 <script>
      let num = 1;
      let userName = "翠花";
      let isRain = true;
      let foods;
      let money = null; // 后面继续讲解到 引用类型的时候去补充

      // console.log("num是什么数据类型");// 能不能通过程序的方式 自动的输出当前变量的数据类型！！

      // typeof

      console.log(typeof num); //  number 输出  num变量的类型
      console.log(typeof userName); // string
      console.log(typeof isRain); // boolean
      console.log(typeof foods); // undefined
      console.log(typeof money); // object 对象类型

      document.write(typeof num + `-`);
      document.write(typeof userName + `-`);
      document.write(typeof isRain + `-`);
      document.write(typeof foods + `-`);
      document.write(typeof money);
    </script>

6.简易计算器写法

prompt输出的结果为字符串类型，因此需要将字符串改为数字类型，在前添加 +

   <script>
      // 1 获取第一个数字
      let num1 = +prompt("请输入1个数字");
      // 2 获取第一个数字
      let num2 = +prompt("请再输入1个数字");

      console.log(num1 + num2);
    </script>

7.隐式转换和显式转换（数据类型转换）

隐式转换：

①字符串转数字类型

//工作中 比较常用的隐式转换写法
      let num2 = "2";
      let num3 = num2 - 0; //num3是number 数字类型
      console.log(typeof num3); //检测数据类型

//最简洁的写法
      let num4 = +num2;
      console.log(typeof num4); //检测数据类型

②数字类型转字符串

  let num1 = 123;
      //   把数字 转成 字符串
      //   let str = num1 + ""; //隐式转换
      //   console.log(str);

显式转换

①字符串类型转为数字类型，须字符串为纯数字组成，否则提示NAN，如let num1=+'22sada222';----NAN（not a number）

②输出结果为整数的写法 整数 integer

// 例如
let num2=parseInt(9.9)  //常用
console.log(num2)

// 将真正的字符串 如 aaaa 转换成数字会失败 提示 NAN
// let num1='22sada222';
//显式转换  转成  数字类型
//let num1 =Number(num1);

//   let str=String(num1);   //显式转换 常用
//   console.log(str);

// let str = num1.toString();  // 显式转换 常用
// console.log(typeof str)

8.订单付款确定页面

①确定订单表格，使用 table-th-tr 表格标签，首先先在js外面，body内 创建表格

②根据需求，输出相关内容

 <script>
      let goods = prompt("请输入物品名称？");
      let price = prompt("请输入物品价格？");
      let number = prompt("请输入物品数量？");
      let total = Number(price * number);
      let address = prompt("请输入送货地址？");
      document.write(`
      <caption>
        <strong>订单付款确认页面</strong>
      </caption>
      <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品数量</th>
        <th>总价</th>
        <th>收货地址</th>
      </tr>
      <tr>
        <td>${goods}</td>
        <td>${price}元</td>
        <td>${number}个</td>
        <td>${total}元</td>
        <td>${address}</td>
      </tr>
    </table>
      `);
    </script>