Javascript笔记

# JavaScript基础

易错合集：

1. 如果一个需要接受布尔值的属性添加了  ‘true’ 的值,也会代表true，因为空字符串才是false   比如ipt.checked=‘true’  会有默认的隐式转换

1.了解JavaScript

1. JavaScript是什么？ 

 JavaScript 是一种运行在客户端（浏览器）的编程语言 

2. JavaScript组成是什么？ 

 ECMAScript( 基础语法 )、web APIs （DOM、BOM）

2.js的书写顺序

1.内嵌式

内嵌式：直接在html页面中创建script标签来书写js代码

​        注意点：

​            建议把script放在页面尾部，能够正确获取页面标签

​            浏览器解析标签是按照自上而下的顺序，script放在底部能够提高页面加载效率

2.外链式

单独创建.js后缀文件来书写js代码，html通过script标签的src属性引入该文件

注意点

 用于引入外联文件的script标签，中间不可以书写代码因为不会被执行

 外部js文件更好管理和维护，是开发中主要使用的方式

3.行内式

 行内式：在标签上直接写事件名和js代码

```html
 <div οnclick="alert('你点我干嘛！')">点我看看</div>
```

3.JS的注释

- 单行注释

​          符号：//

​          作用：//右边这一行的代码会被忽略

​          快捷键：ctrl + /

- 块注释

​          符号：/* */

​          作用：在/* 和 */ 之间的所有内容都会被忽略

​          快捷键：shift + alt + A

4.JavaScript输入输出语法

1.输出

 语法1：

​           document.write('要输出的内容')

​          作用：向body内输出内容

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

document.write('hello world')
document.write('<h1>我是h1标题</h1>')

语法2：

​           alert(' ')

​          作用：页面弹出警告对话框

语法3：

​           console.log(' ')

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

2.输入

 语法：

​          prompt('请输入您的姓名')

​          作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

**JavaScript 代码执行顺序：** 

按HTML文档流顺序执行JavaScript代码 

alert() 和 prompt() 它们会跳过页面渲染先被执行(同步异步知识点)

5.字面量

目标：能说出什么是字面量 

在计算机科学中，字面量（literal）是在计算机中描述 事/物 

可以表示一个固定值的表示法

当给变量赋值时，等号右边都可以认为是字面量

比如： 

​    我们工资是： 1000 此时 1000 就是 数字字面量 

​    '哈哈哈哈哈' 字符串字面量 

​    还有 [] 数组字面量 {} 对象字面量  true false等等

6.变量

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

1.变量

​        白话：变量就是一个装东西的盒子。 

​        通俗：变量是计算机中用来**存储数据**的“容器”，它可以让计算机变得有记忆。 

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

2.变量的基本使用

2-1 变量的声明

**1. 声明变量：** 

​        要想使用变量，首先需要创建变量（也称为声明变量或者定义变量） 

**语法：**

```
let 变量名
```

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

**举例：** 

​    我们声明了一个age变量 

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

2-2 变量的赋值

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

```javascript
方式一：
    // 1.声明变量
    let age
    // 2.使用赋值号(=)给变量赋值
    age = 18
方式二：
    // 声明的同时赋值
    let age = 18
方式三:
    //声明多个变量 了解
    let year = 20, money = 50
    console.log(year)
    console.log(money)
```

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

1.变量赋值

简单点，也可以声明变量的时候直接完成赋值操作,这种操作也称为 变量**初始化**

2.变量更新

变量的含义：可变的量，标识符不变，值可以更改

变量的更新：

- 为一个已有值的变量重新赋值，即可更新变量
- 已声明的变量不能重复声明，否则会报错

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

2-3 变量的本质

**内存：**计算机中存储数据的地方，相当于一个空间 

**变量本质：**是程序在内存中申请的一块用来存放数据的小空间

2-4 变量命名规则与规范

**1. 规则：** 

​    不能用关键字 

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

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

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

**2. 规范：** 

​    起名要有意义 

​    遵守小驼峰命名法 

​    第一个单词首字母小写，后面每个单词首字母大写。例：userName

3.拓展-变量let 和 变量var 的区别

- 在较旧的JavaScript，使用关键字 var 来声明变量 ，而不是 let。 
- var 现在开发中一般不再使用它，只是我们可能再老版程序中看到它。 
- let 为了解决 var 的一些问题。 

var 声明: 

1. 可以先使用 在声明 (不合理) 
2. var 声明过的变量可以重复声明(不合理) 
3. 比如变量提升、全局变量、没有块级作用域等等

3-1 let和var的共同点

1. 允许声明和赋值同时进行
2. 允许同时声明多个变量并赋值

3-2 let和var的不同点

1. let不允许重复声明，而var可以
2. let遵循先声明后使用，而var可以先使用后声明(存在变量提升的问题)
3. let拥有块级作用域、而var没有块级作用域(了解，后面讲解)

**注意点：**

​    大部分情况下使用‘let’和‘var’区别不大，但是‘let’是新版本中出现用于替换‘var’的，相较严谨，因此推荐使用

### 7.变量拓展-数组

数组 (Array) —— 一种将 **一组数据存储在单个变量名下** 的优雅方式

```
let arr = []
let 变量=数组字面量
```

1.数组的基本使用

目标：能够声明数组并且能够获取里面的数据

​    **1. 声明语法** 

```
let 数组名 = [数据1, 数据2, ···, 数据n]
```

​    例 

```
let names = ['晓明','小红','小兰','小刘']
```

- 数组是按顺序保存，所以每个数据都有自己的编号 
- 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推 
- 在数组中，数据的编号也叫**索引或下标** 
- 数组可以存储任意类型的数据

```
consol.log(names[0])
```

2.使用：

```
数组名[索引]

```

**扩展：**

- 名词元素：数组中的每一项数据也称为数组的“元素”
- 数组长度：通过 数组名.length  方式可以获取到当前数组的长度(有多少个元素长度就有多少个)

### 8.常量

概念：使用 const 声明的变量称为“常量”。

使用场景：当某个变量永远**不会改变**的时候，就可以使用 const 来声明，而不是let。

命名规范：和变量一致

```javascript
const PI = 3.14

```

> 注意： 
>
> - 常量不允许重新赋值
> - 常量声明的时候必须赋值（初始化）

9.数据类型

> 计算机世界中的万事成物都是数据。

**JS 数据类型整体分为两大类：** 

1. 基本数据类型 
   - number 数值型
   - string 字符串型
   - boolean 布尔型
   - underfined 未定义型
   - null 空类型
   - symbol？？
2. 引用数据类型
   - array 数组
   - function 函数
   - Object 对象

计算机程序可以处理大量的数据，为了方便数据的管理，将数据分成了不同的类型：

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 数据类型</title>
</head>
<body>
  
  <script> 
    // 检测 1 是什么类型数据，结果为 number
    document.write(typeof 1)
  </script>
</body>
</html>