Javascript 基础（2）

变量

变量是什么

变量：
1. 变量就是一个装东西的盒子
2. 变量是计算机用来存储数据的容器，可以让计算机变得有记忆
注意：
1. 变量不是数据本身，仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

变量的基本使用

声明变量

想要使用变量，首先需要创建变量
```
let num //变量名
```
声明变量有两部分构成：声明关键字 变量名
let 是关键字（let ：允许许可的意思），关键字是系统提供的专门用来声明（定义）变量的词语
num 则是变量的名称，也可以称之为标识

变量赋值

定义一个变量后，就能够给他赋值。在变量名后面加上**'='**,将数据存入到这个容器中

  let name; //变量名称
        name = '张山';   //变量赋值
        console.log(name);  //使用变量

是要通过变量名来获得变量里面的数据
也可以声明变量的时候同时变量赋值

也可以声明多个变量

  // 一行声明多个变量
        let uesr = '张三', commodity = '20' , color = 'red'  ;
        console.log(uesr,commodity,color);

小结练习

分析
核心思路：使用一个临时变量用来做临时存储

<!DOCTYPE html>
<html lang="en">
<<!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>
</head>
<body>
    <script>
        //让num = 20 num2 = 10
        // 多创建一个变量
        let num = 10 , num2 = 20 , t;
        // 用空的一个变量存放num
        t = num ;
        //让num的值等于 num2
        num = num2 ;
        //让刚刚存放的t  等于num2 
        t = num2 ; 
        console.log(num , num2);
    </script>
</body>
</html>

思维导图

变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量：是程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范

规则

不能用关键字
- 有特殊含义的字符，JavaScript 内置的一些英语词汇。
  
  如 ：let var if for 等

只能用下划线字母数字 $组成 ，且数字不能开头

 //符号也是ok的
        let _hello = '123'; //下划线开头
        let $hello = '321' ;//$也可以
        let hello = '567' ;//字母开头
        // let 1231321ello = '123'   //不能以数字开头

字母严格区分大小写，如Age和 age 是不同的变量

规范

起名要有意义
遵循小驼峰命名法
- 第一个单词首字母小写，后面每个单词首字母大写
  
  如： uesrName

小结练习

让用户输入自己的名字、年龄、性别，再输出到网页

<!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>
</head>
<body>
    <script>
        //弹出 输入框（prompt）：请输入姓名  用变量保存起来
      let userName = prompt('请问你叫什么名字');
        //弹出 输入框（prompt）：请输入年龄  用变量保存起来
      let age = prompt('请输入您的年龄');
        //弹出 输入框（prompt）：请输入性别  用变量保存起来
      let sex = prompt('请输入您的性别');
        //页面输出3个变量
      document.write(userName+age+sex)

    </script>
</body>
</html>

数据类型

基本数据类型

number 数字型
string 字符串型
boolean 布尔型
undefined 未定义型
null 空类型

数字类型（number）

数字型可以是整数小数正数负数。

  // 数字类型   
        let int = 70; //整数类型
        let xiaos =11.11 //小数类型
        let dushu = -555 //复数

注意
1. js是弱数据，变量到底属于那种类型，只有赋值之后才能确认
2. Java是强数据如 int a = 3 必须是整数

字符串类型

通过单引号（' '）双引号（" "）或反引号（` ） 包裹的数据都叫字符串，单引号和双引号没有本质上的区别。

let userName = '小明'；//使用引号
let sex = "男"；//使用双引号
let str = '123'//看上去是数字， 但是用引号包裹了就成了字符串了
let str = ''; //这种情况叫空引号

注意
1. 无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套，口诀：外双内单，或者外双内单

字符串拼接

拼接字符串和变量
在没有它之前，要拼接比较麻烦

符号

``
在英文输入模式下按键盘的tab上方那个键

内容拼接变量时，用**${}**包住变量

 let name= prompt('请输入您的姓名');
        let age = prompt('你今年多大');
        document.write(`大家好我叫${name} ，今年${age}`);

布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型
有两个固定的值 true 和 false ，表示肯定的数据用true（真），表示否定的数据用false（假）
```
//今天中午吃辣条  回答 是 或否
let isCool  = true;//是的
isCool = false; //不
```

未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。

let age // 声明变量但是未赋值
document.write(age)  //输出 undefined

开发中经常声明一个变量，等待传送过来的数据
如果不知道这个数据是否传过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来

空类型

null 表示值为空
```
let obg = null
```
null 和 undefined 区别：
1. undefined 表示没有赋值
2. null 表示赋值了，但是内容为空
将来有个变量里面存放的是一个对象，但是对象还没有创建好，可以先给个 null

检测数据类型

控制台输出语句

控制台语句经常用于测试结构来使用

<!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>
</head>
<body>
    <script>
        let name =  "凤姐"
        let num = 3321
        let is = true
        let un 
        let nl = null
        console.log(typeof name);//字符串类型  string
        console.log(typeof num);//数字类型    number
        console.log(typeof is);//布尔类型    boolean
        console.log(typeof un);//未定义类型    undefined
        console.log(typeof nl);// object  对象类型

        
    </script>
</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>
</head>
<body>
    <script>
        // let num1 = 1
        // let num2 = '2'

        // console.log(num1+num2);//3
        // console.log(num1+num2); //12  答案

        // // 隐式转换 '-' 将字符串转换为数字
        // let num3 = num2 - 0


        // 工作中  比较常用的隐式转换写法
        let num2 = '2' ;

        let num3 = num2 - 0 ;// num3  是一个字符串
        console.log(typeof num3);

        //最简洁的写法 
        let num4 = +num2; //也可以
        console.log(typeof num4);

    </script>
</body>
</html>

显示转换

转换为字符串：

string （数据）
变量 .tostring（进制）

<!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>
</head>
<body>
    <script>
        //你把一个真正的 字符串 给我 转换为数字，会失败
        // let num = 'asdasd'

        // //显示转换  转成 数字类型
        // let num2 = Number(num);
        // console.log(num2 );//NAN num2 不是一个数字    类似 确实是number类型
        
        //对于 其他类型 转成数字
        //1  成功  数字本身
        // 2 失败  NAN （not a number）

        
        // let num1 = 'aaaa'
        // let num2 = +num1;
        // console.log(num2);  //NaN

        let num1 = '9.9'
        // //砍价  收个整数  9块  parseINt
        // let num2 = parseInt(num1)   //常用
        // console.log(num2);


        // let num2 = parseFloat(nun2) //少用
        let num2 = +nun1  //常用
        console.log(num2);
    </script>
</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>
</head>
<body>
    <script>
        let nun1 = 123456
        // nun2 = nun1 + '' ; //隐式转换 //常用

        // nun2 = String(nun1) //显示  常用
        nun2 = nun1.toString(); //显示   常用
        console.log(typeof nun2);

    </script>
</body>
</html>

document.write补充

里面可以直接写标签

反引号还可以换行来写代码
如果换行了那么就只能使用反引号
如果不换号用哪种引号都可以

<!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>
  </head>
  <body>
      
     
    <script>
          // let sty = `<button>我是一个大按钮</button>`
          //标签换行的时候必须用反引号  `` 
          let sty = `
          <div>
          <p>
              <i></i>
          </p>
      </div>
          `
          document.write(sty)
          //也可以直接写document.write里面
          document.write(` <button>我是按钮</button>`)
    </script>
  </body>
</html>

javascript 基础（02）

Javascript 基础 （2）

变量

变量是什么

变量的基本使用

声明变量

变量赋值

小结练习

思维导图

变量的本质

变量命名规则与规范

规则

规范

小结练习

数据类型

基本数据类型

数字类型（number）

字符串类型

字符串拼接

布尔类型（boolean）

未定义类型（undefined）

空类型

检测数据类型

类型转换

隐式转换

显示转换

数字字符串转

document.write补充

思维导图

Javascript 基础（2）