JavaScript入门
JavaScript入门
JavaScript是什么
首先，JavaScript里面的Java是因为JavaScript的创造者在Sun公司工作，本来的LiveScript改名为JavaScript是一个双赢决策。JavaScript是一种运行在客户端（在用户设备运行，不运行在服务器）的脚本语言（高级编程语言），是目前世界上最流行的语言之一。脚本语言不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行，按代码从上到下逐步解释执行。目前也可以基于Node.js技术进行服务器端编程。
本文的大部分内容都来自于这个视频中的知识点总结：较全的JavaScript视频教程-黑马程序员
HTML/CSS/JS的关系
- HTML/CSS标记语言——描述类语言
- HTML决定网页结构和内容（决定看到什么），相当于人的身体
- CSS决定网页呈献给用户的模样（决定好不好看），相当于给人穿衣服和化妆
- JS脚本语言——编程类语言
- JS实现业务逻辑和页面控制（决定功能），相当于人的各种动作
- JavaScript的组成包括EVMAScript（JavaScript语法）、DOM（页面文档对象模型）、BOM（浏览器对象模型）
浏览器执行JS简介
浏览器分为两部分：渲染引擎和JS引擎
- 渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit
- JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8（号称目前最快的JS引擎）
浏览器本省并不会执行JS代码，而是通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
JavaScript的作用
- 表单动态校验（密码强度检测）（JS产生最初的目的）
- 网页特效
- 服务端开发（Node.js：前端后端通吃）
- 桌面程序（Electron）
- App（Cordova）
- 控制硬件-物联网（Ruff）
- 游戏开发（cocos2d-js）
JavaScript输入输出语句
为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：
| 方法 | 说明 | 归属 |
|---|---|---|
| alert(msg) | 浏览器弹出警示框，展示给用户 | 浏览器 |
| console.log(msg) | 浏览器控制台打印输出信息，控制台输出，给程序员用 | 浏览器 |
| prompt(info) | 浏览器弹出输入框，用户可输入 | 浏览器 |
变量
变量的本质：变量是程序在内存中申请的一块用来存放数据的空间。
申明变量：var是一个JS关键字，用来申明变量（variable变量的意思）。使用该关键字申明变量后，计算机会自动为变量分配内存空间，不需要程序员管。
申明一个变量并赋值，称为变量的初始化。（比如：var age = 18; //声明变量的同时赋值为18）
声明变量特殊情况：
| 情况 | 说明 | 结果 |
|---|---|---|
| var age; console.log(age); | 只声明，不赋值 | undefined |
| console.log(age); | 不声明，不赋值，直接使用 | 报错 |
| age = 10; console.log(age); | 不声明，只赋值 | 10 |
变量命名规范：
- 由字母（A-Z，a-z）、数字（0-9）下划线（_）、美元符号（$）组成。
- 严格区分大小写。
- 不能以数字开头。
- 不能是关键字、保留字。
- 变量名必须有意义。
- 遵守驼峰命名法，首字母小写，后面单词的首字母需要大写。
数据类型
在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在运行过程中，类型会被自动确定。
在代码运行时，变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型。
JS把数据类型分为两类：
- 简单数据类型（Number,String,Boolean,Undefined,Null）
- 复杂数据类型（object）
| 数据类型 | 说明 | 默认值 |
|---|---|---|
| Number | 数字型，包含整型值和浮点型值，如21、0.21。Number数字型，只要在前面加0就会自动标识为8进制，数字前面加0x表示十六进制。Number.MAX_VALUE可表示数字中的最大值，Number.MIN_VALUE表示最小值。infinity表示无穷大，大于任何数；-infinity表示无穷小，小于任何数值；NaN，Not a number，表示非数。isNan()这个方法可以返回一个值验证一个值是否是非数字，如果是数字则返回false，不是数字返回true。 | 0 |
| Boolean | 布尔值类型，如true、false，当它们和数字型相加时等价于1和0 | false |
| String | 字符串型，如“张三”。注意在js里面，字符串都带引号，可以是双引号“”，也可以是单引号‘‘。JS可以用单引号嵌套双引号或者用双引号嵌套单引号（外双内单或外单内双）。字符串中存在一些转移字符，但是这些字符要写到引号里面。字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。使用+号时，数值相加，字符相连。 | “” |
| Undefined | var a; 声明了变量a但是没有给值，此时a = undefined。Undefined型和String型相加出来的是String型，和Number型相加出来的是NaN。 | undefined |
| Null | var a = null; 声明了变量a为空值 | null |
在String中，存在一些转义符，可以在String串中起到转义作用而不会直接输出渲染，它们以\开头，常用的转义符及说明如下：
| 转义符 | 解释说明 |
|---|---|
| \n | 转行符，n是newline的意思 |
| \ | 斜杠\ |
| ’ | 单引号 |
| “ | 双引号 |
| \t | tab缩进 |
| \b | 空格，b是blank的意思 |
注：typerof 可以检测变量的类型。
关于数据类型转换，我们通常会实现3种方式的转换：
转换为字符串类型
| 方式 | 说明 | 案例 |
|---|---|---|
| toString() | 转成字符串 | var num = 1; alert(num.toString()); |
| String()强制转换 | 转成字符串 | var num = 1; alert(String(num)); |
| 加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num + "我是字符串"); |
转换为数字型（重点）
| 方式 | 说明 | 案例 |
|---|---|---|
| parseInt(string)函数 | 将string类型转成整数数字型 | parseInt(‘78‘) |
| parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat(‘78.21‘) |
| Number()强制转换函数 | 将string类型转换为数值型 | Number(‘12‘) |
| js隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12‘ - 0 |
转换为布尔型
| 方式 | 说明 | 案例 |
|---|---|---|
| Boolean()函数 | 其他类型转换成布尔值 | Boolean(‘true‘); |
代表空、否定的值会被转换为false，如"、0、NaN、null、undefined，其余值都会被转换为true
运算符
运算符包括：算数运算符（浮点数运算会有误差，尽量避免直接运算浮点数）、递增和递减运算符、比较运算符（注意JS有全等的概念：===，要求两侧的值和数据类型都相等，双等符号==只要求两边的值相等）、逻辑运算符（&&、||）、赋值运算符（=、+=、-、%=、*=...）。还需要知道运算符的优先级，表单如下：
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | () |
| 2 | 一元运算符 | ++ -- ! |
| 3 | 算数运算符 | 先* / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
流程控制
if else、switch、for、while、do-while、continue、三元表达式 ? :
断点调试
断点调试可以帮我们观察程序的运行过程。断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
浏览器中按F12——>sources——>找到需要调试的文件——>在程序的某一行设置断点
Watch：监视，通过watch可以监视变量的值得变化，非常常用。
F11：程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值得变化。
代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但代码调试不去练的话永远学不会。