JavaScript基本第一天总结

#                 JavaScript基本第一天总结

## JavaScript介绍

###     JavaScript 是什么?

1. JavaScript （是什么？）

​        是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。

2. 作用（做什么？）

   网页特效 (监听用户的一些行为让网页作出对应的反馈)
   表单验证 (针对表单数据的合法性进行判断)
   数据交互 (获取后台的数据, 渲染到前端)
   服务端编程 (node.js)

   

###     JavaScript的组成（有什么？）

​    1.ECMAScript:
             规定了js基础语法核心知识。
​            比如：变量、分支语句、循环语句、对象等等
​            2.Web APIs :
​            DOM   操作文档，比如对页面元素进行移动、大小、添加删除等操作
​            BOM   操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
​            注意 DOM属于BOM


###     JavaScript 的书写位置

####         1. 内部 JavaScript                                             

​        直接写在html文件里，用script标签包住
​        

```js
    <script>
        let num2 ='2';
        let num3=num2-0;
        // 最简洁的写法  //
        let num4=+num2;
        console.log(typeof num4);
    </script>
```

​            规范：script标签写在</body>上面

​            拓展： alert(‘你好，js’)  页面弹出警告对话框

注意事项:

​         我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。

​        如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。

​        因此，将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略。

####     2.外部 JavaScript

​        代码写在以.js结尾的文件里

​                语法：通过script标签，引入到html页面中。

```js
     <script src="./lib/jquery.js"></script>

```

​    注意事项

            1. script标签中间无需写代码，否则会被忽略！
                2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

#### 3.内联 JavaScript

代码写在标签内部

​        语法：

```js
    <button οnclick="alert('你好!!');"></button>
```

​        注意： 此处作为了解即可，我们并不推荐，但是后面vue中会看到这种使用模式

​                书写的位置尽量写到文档末尾 </body> 前面
​                        外部 js 标签中间不要写代码，否则会被忽略

### JavaScript 的注释

####     会使用两种JavaScript注释方法

​        注释是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。注释只是为了提高可        读性，不会被计算机编译

单行注释
            符号：//
            作用：//右边这一行的代码会被忽略
            快捷键：ctrl + /

块注释
            符号：/*  */
            作用：在/*  和  */ 之间的所有内容都会被忽略

### JavaScript的结束符

####     了解JavaScript结束符

代表语句结束
        英文分号 ;
        可写可不写（现在不写结束符的程序员越来越多）
        换行符（回车）会被识别成结束符 ,所以一个完整的语句，不要手动换行
        因此在实际开发中有许多人主张书写 JavaScript 代码时省略结束符 
        但为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）

### JavaScript输入和输出语法

​    输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

​    向body内输出内容
​        如果输出的内容写的是标签，也会被解析成网页元素

```js
              document.write("你好!!!!");
```

页面弹出警告对话框

```js
            alert("要输出的内容!!!");
```

控制台输出语法，程序员调试使用

```js
        console.log("控制台打印");
```

显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字，获取的输入内容是字符串

```js
    prompt("请输入你的名字??");
```

------

## 变量

####         理解变量是计算机存储数据的“容器”

 1. 变量：

    白话：变量就是一个装东西的盒子。
    通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。

 2.  注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

 #### 变量的基本使用

声明变量：
        要想使用变量，首先需要创建变量（专业说法： 声明变量）

声明变量有两部分构成：声明关键字、变量名（标识）
        let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

```js
        let  age;
        age=12;
```

age 即变量的名称，也叫标识符

变量赋值：
        定义了一个变量后，你就能够初始化它（赋值）。在变量名之后跟上一个“=”，然后是数值。

注意：是通过变量名来获得变量里面的数据

也可以声明变量的时候同时给变量初始化。

```js
let age =12;
```

 更新变量：
变量赋值后，还可以通过简单地给它一个不同的值来更新它

```js
let age =18;
age=12;
document.write(age);
```

注意： let 不允许多次声明一个变量。

声明多个变量：

```js
    let  age =18, name='pink'
```

#### 变量案例- 交换变量的值

有2个变量： num1 里面放的是 10， num2 里面放的是20
        最后变为 num1 里面放的是 20 ， num2 里面放的是 10

```js
let   num1 = 10, num2=20,temp;
temp =num1;
num1 =num2;
num2=num3;
document.write(num1,num2);

```

####  变量的本质

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

#### 变量命名规则与规范

规则：必须遵守，不遵守报错
        规范：建议，不遵守不会报错，但不符合业内通识

1. 规则：

   不能用关键字
   关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
   只能用下划线、字母、数字、$组成，且数字不能开头
   字母严格区分大小写，如 Age 和 age 是不同的变量

2. 规范：
起名要有意义
遵守小驼峰命名法
第一个单词首字母小写，后面每个单词首字母大写。例：userName

#### 以下哪些是合法的变量名？


## 数据类型

###     基本数据类型有哪些

​    基本数据类型
​            引用数据类型

| 数据类型          | 值                                                           |
| ----------------- | ------------------------------------------------------------ |
| number数字类型    | 是我们生活中学习到的数字，可以是整数、小数、正数、负数       |
| string 字符串类型 | 通过推荐使用单引号（''）、双引号（""）、反引号(``） 配套出现 |
| boolean  布尔类型 | 只有两个值true 和false                                       |
| undefined 未定义  | 只有一个值undefined,是比较特殊类型                           |
| null  空类型      | 表示值为空                                                   |
|                   |                                                              |

###  数字类型（number）

即我们数学中学习到的数字，可以是整数、小数、正数、负数。

avaScript 中的正数、负数、小数等 统一称为 数字类型。

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
Java是强数据类型   例如  int  a = 3    必须是整数

### 字符串类型（string）

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

```js
let name='张三';
```

注意事项：
1. 无论单引号或是双引号必须成对使用
2. 单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
3. 必要时可以使用转义符 \，输出单引号或双引号

### 字符串拼接：

作用

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

符号  反引号   ${变量名}

在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
内容拼接变量时，用 ${} 包住变量

```js
    <script>
        
        let name =prompt("请输入你的名字");

        let age  =prompt("请输入你的年龄");
        // 使用反引号 
        document.write(`大家好,我叫${name},今年${age}岁了`);
    </script>
```

### 布尔类型（boolean）

表示肯定或否定时在计算机中对应的是布尔类型数据。
它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。

```js
let  name = true;
let age  =false;

if(name ==true){
    console.log("登录成功!!");
}else{
    consloe.log("登录失败!!");
}
```

### 未定义类型（undefined）

未定义是比较特殊的类型，只有一个值 undefined。
什么情况出现未定义类型？
只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。

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

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

###  null（空类型)

null 表示 值为 空

null 和 undefined 区别：
    undefined  表示没有赋值
        null 表示赋值了，但是内容为空

null 开发中的使用场景：
        官方解释：把 null 作为尚未创建的对象
        大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null 

### 检测数据类型

控制台语句经常用于测试结果来使用。    
可以看出数字型和布尔型颜色为蓝色，字符串和undefined颜色为灰色

 通过 typeof 关键字检测数据类型

```js
         let num =123;
        let  str= num.toString();
        console.log(typeof str);
```

```js
    <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 对象类型
    </script>
```

------

## 类型转换

###  为什么需要类型转换

JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
坑： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。

此时需要转换变量的数据类型。
通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

### 隐式转换

些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

+号两边只要有一个是字符串，都会把另外一个转成字符串
        除了+以外的算术运算符 比如 -  *  /  等都会把数据转成数字类型

+号作为正号解析可以转换成Number

### 显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。
为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。

​    概念：
自己写代码告诉系统该转成什么类型

转换为数字型

Number(数据)
        转成数字类型
        如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
        NaN也是number类型的数据，代表非数字
            parseInt(数据)
            只保留整数
            parseFloat(数据)
            可以保留小数

转换为字符型:
        String(数据)
        变量.toString(进制)   

------

```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>
    <style>
        
    </style>
</head>
<body>
    <script>
        let goodsName=prompt("请输入商品名称");
        let price=prompt("请输入商品价格");
        let nums=prompt("请输入商品数量");
        // let count=prompt("请输入商品");
        let totel =price*nums;
        let address=prompt("请输入收货地址");
        let str=`${goodsName}${price}${nums}${totel}${address}`;
        document.write(str);
    </script>
</body>
</html>