一、Js基础概念

JavaScript的组成（有什么？）

ECMAScript:(规定了语法规范)

规定了js基础语法核心知识。

比如：变量、分支语句、循环语句、对象等等

Web APIs :

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

权威网站： MDN

引入方式 1、body内嵌

 <script>
        alert("Hello,world!")
    </script>

2、外部引入(标签里写的JS会被忽略)

注释

1、ctrl+/（单行） 2、shirt+alt+/ (多行)

输入与输出

1、输出：

document.write() 文档写
alert() 警示框
console.log() 控制台输出（log快捷键，测试用） 2、输入：
prompt() 对话框（输入语句）
字面量（literal）计算机中描述事/物
变量（存储数据的小空间）

1、是容器、存储数据 2、声明变量 let 变量名 = xx（变量初始化）或 let 变量名（这样是undefined）

变量只能一次声明，多次赋值

命名规则

规则：

由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能以数字开头。 18age 是错误的
不能是关键字、保留字。例如：var、let、for、while
变量名必须有意义。 MMD BBD nl → age
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

var 和 let区别

var: 可先使用再声明 var 可重复声明在函数内部不使用var,就是全局变量

简单数据类型（基本数据类型）

JavaScript 中的简单数据类型及其说明如下：

数字型 Number var usrAge = 21;

简单数据类型（基本数据类型）

JavaScript 中的简单数据类型及其说明如下：

数字型 Number

JavaScript 数字类型既可以保存整数，也可以保存小数(浮点数）。
```
var age = 21;       // 整数
var Age = 21.3747;  // 小数     
```
1. 数字型进制
  
  最常见的进制有二进制、八进制、十进制、十六进制。
```
  // 1.八进制数字序列范围：0~7
 var num1 = 07;   // 对应十进制的7
 var num2 = 019;  // 对应十进制的19
 var num3 = 08;   // 对应十进制的8
  // 2.十六进制数字序列范围：0~9以及A~F
 var num = 0xA;   
```
  现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x
2. 数字型范围
  
  JavaScript中数值的最大和最小值
  - 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
  - 最小值：Number.MIN_VALUE，这个值为：5e-32

数字型三个特殊值
- Infinity ，代表无穷大，大于任何数值
- -Infinity ，代表无穷小，小于任何数值
- NaN ，Not a number，代表一个非数值
isNaN（nan----not a number）

用来判断一个变量是否为非数字的类型，返回 true 或者 false

     var usrAge = 21;
   var isOk = isNaN(userAge);
     console.log(isNum);          // false ，21 不是一个非数字
   var usrName = "andy";
     console.log(isNaN(userName));// true ，"andy"是一个非数字

字符串型 String

字符串型可以是引号中的任意文本，其语法为双引号 "" 和单引号''
```
var strMsg = "我爱北京天安门~";  // 使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄~';    // 使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       // 报错，没使用引号，会被认为是js代码，但js没有这些语法
```
因为 HTML 标签里面的属性使用的是双引号，JS 这里我们更推荐使用单引号。
- 字符串引号嵌套
  
  JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)
```
var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
//  常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配
```
- 字符串转义符
  
  类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
  
  转义符都是 \ 开头的，常用的转义符及其说明如下：
  
  转义符解释说明
  \n 换行符，n 是 newline 的意思
  \ \ 斜杠 \
  ' ' 单引号
  " ”双引号
  \t tab 缩进
  \b 空格，b 是 blank 的意思
1. 字符串长度
  
  字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的 length 属性可以获取整个字符串的长度。
```
var strMsg = "我是帅气多金的程序猿！";
alert(strMsg.length); // 显示 11
```
2. 字符串拼接
  - 多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
  - 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
```
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112 
```
    - + 号总结口诀：数值相加，字符相连
3. 字符串拼接加强
```
console.log('pink老师' + 18);        // 只要有字符就会相连 
var age = 18;
console.log('pink老师age岁啦');      // 这样不行哦
console.log('pink老师' + age);         // pink老师18
console.log('pink老师' + age + '岁啦'); // pink老师18岁啦
```
  - 经常会将字符串和变量来拼接，变量可以很方便地修改里面的值
  - 变量是不能添加引号的，因为加引号的变量会变成字符串
  - 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间
布尔型Boolean

布尔类型有两个值：true 和 false ，其中 true 表示真（对），而 false 表示假（错）。

布尔型和数字型相加的时候， true 的值为 1 ，false 的值为 0。
```
console.log(true + 1);  // 2
console.log(false + 1); // 1
```

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
'	' 单引号
"	”双引号
\t	tab 缩进
\b	空格，b 是 blank 的意思

Undefined和 Null

一个声明后没有被赋值的变量会有一个默认值undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   //  NaN

一个声明变量给 null 值，里面存的值为空（不知道该创建什么对象，用null代替)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   //  1

获取变量数据类型

获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型
```
var num = 18;
console.log(typeof num + ‘11’) // 结果 number11      
```
不同类型的返回值
字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
- 数字字面量：8, 9, 10
- 字符串字面量：'黑马程序员', "大前端"
- 布尔字面量：true，false
模板字符串（拼接变简单） ‘’$(变量名)‘’=== ‘’+变量名+‘’
类型转换

理解弱类型语言的特征，掌握显式类型转换的方法

在 JavaScript 中数据被分成了不同的类型，如数值、字符串、布尔值、undefined，在实际编程的过程中，不同数据类型之间存在着转换的关系。

1 隐式转换

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13; // 数值
    let num2 = '2'; // 字符串
    console.log(+num2) //2

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2);

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2(-*/都按数字)
    console.log(num - num2);

    let a = prompt('请输入一个数字');
    let b = prompt('请再输入一个数字');

    alert(a + b);
  </script>
</body>
</html>

注：数据类型的隐式转换是 JavaScript 的特征，后续学习中还会遇到，目前先需要理解什么是隐式转换。

补充介绍模板字符串的拼接的使用

4.2显式转换

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

Number(里面只能是数据（数），后两个过滤后面的字符)

通过 Number 显示转换成数值类型，当转换失败时结果为 NaN（Not a Number）即不是一个数字。

parseInt(数据)

只保留整数

parseFloat(数据)

可以保留小数

转换为字符型:

1.String(数据)

2.变量.toString(进制)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script>
    let t = '12';
    let f = 8;

    // 显式将字符串 12 转换成数值 12
    t = Number(t);

    // 检测转换后的类型
    // console.log(typeof t);
    console.log(t + f); // 结果为 20

    // 并不是所有的值都可以被转成数值类型
    let str = 'hello';
    // 将 hello 转成数值是不现实的，当无法转换成
    // 数值时，得到的结果为 NaN （Not a Number）
    console.log(Number(str));
  </script>
</body>
</html>

记忆单词案例

思路：

外层xxx
里层xxx

// 记忆单词案例
        // 分析
        // 1. 外面的循环 记录第n天 
        for (let i = 1; i < 4; i++) {
            document.write(`第${i}天 <br>`)
            // 2. 里层的循环记录 几个单词
            for (let j = 1; j < 6; j++) {
                document.write(`记住第${j}个单词<br>`)
            }
        }

JavaScriptDay1

一、Js基础概念

JavaScript的组成（有什么？）

注释

输入与输出

变量（存储数据的小空间）

命名规则