JavaScript入门

Posted 2020-11-25 keep250

javascript入门

JavaScript是什么

首先，JavaScript里面的Java是因为JavaScript的创造者在Sun公司工作，本来的LiveScript改名为JavaScript是一个双赢决策。JavaScript是一种运行在客户端（在用户设备运行，不运行在服务器）的脚本语言（高级编程语言），是目前世界上最流行的语言之一。脚本语言不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行，按代码从上到下逐步解释执行。目前也可以基于Node.js技术进行服务器端编程。

快速扫盲开胃JavaScript视频

本文的大部分内容都来自于这个视频中的知识点总结：较全的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的作用

1. 表单动态校验（密码强度检测）（JS产生最初的目的）
2. 网页特效
3. 服务端开发（Node.js：前端后端通吃）
4. 桌面程序（Electron）
5. App（Cordova）
6. 控制硬件-物联网（Ruff）
7. 游戏开发（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是newline的意思
	斜杠
’	单引号
“	双引号
	tab缩进
	空格，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的能力。初学者不要觉得调试代码麻烦就不去调试，知识点花点功夫肯定学的会，但代码调试不去练的话永远学不会。