跟着艾文一起学前端-第13篇-JavaScript初识

简介

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1]
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。

JavaScript的特点

1. 语言特征

它是一门编程语言，不像html是一种标记语言。js是运行在客户端程序（浏览器）上的脚本语言。起初它的作用是解决用户和浏览器之间的交互问题。

• 脚本语言： 常见的脚本语言有：cmd 和编译语言的区别在于它不需要编译，直接执行；
• 解释性语言 遇到一行解释一行执行一行，非一次性解释完才执行
• 动态类型的语言 : 因为变量声明都是用var声明，代码执行到当前行到变量时是不知道他的数据类型的，只有执行到赋值的时候才知道变量存储的是什么类型；如果声明一个对象，没有给它任何属性，可以通过"对象.属性/方法"来给对象创建属性或者方法；
• 基于对象的语言 ： js不是面向对象的语言，但是可以模拟面向对象的思想，它是基于对象的语言

2. js分为三个部分：

• ECMAScript 标准 — 制定了js的基本语法；
• DOM — Document Object Model 文档对象模型 - - 操作HTML页面中的元素
• BOM — Browser Object Model 浏览器对象模型 - - 操作的是浏览器

3. js的应用场景：

1. 网页特效
2. 服务端开发 Node.js
3. 命令行工具 Node.js
4. 桌面应用程序
5. App（Cordova）
6. 控制硬件-物联网（Ruff）
7. 游戏开发（cocos2d-js）

4. js的代码书写位置（和css书写位置有点像）

• 1）可以在HTML元素标签内写 ，比如 οnclick=“alert(‘按钮被点击’);”
• 2）HTML页面中的script标签内，一般位于HTML 代码中body标签中的最底部，书写一对<script>标签内书写js代码，因为浏览器要先加载出页面展示，才去执行javascript防止因为JavaScript执行效率影响页面展示，并且，浏览器在执行时会默认把js解析到body标签中；
• 3）在一个单独的.js文件中书写，跟使用外部的.css文件一样，它也需要在title标签下面加入对目标路径js文件的引入：<script src=“js/index.js”></script>；

5. js 代码书写常识

和HTML和css的区别在于，js代码的特性：

• 1） HTML中js的标准写法：<script type=“text/javascript”></script>；还可以写为<script language=“JavaScript”>。但是在HTML页面中我们书写的时候，大部分情况会省略type或者language属性，原因是HTML遵循的是h5的标准，但是如果用其他的话最好是写上。
• 2）script标签在HTML页面中可以出现多对；
• 3）当使用script标签引用外部js文件时，不可以在该script标签中书写js代码，如果想写的话，需要新建一个script标签；
• 4） 在一对script标签中有错误的js代码时，当前的script中，错误代码与它之后的所有代码都不再执行；但是不影响其他script标签对里面的js代码执行情况，也就是说当前错误的script标签内的js不再执行，其他没有出错的script标签内的代码可以照常执行；
• 5）每一行代码结束要养成写英文输入法的分号的习惯;

JavaScript 基础知识

1. js中的变量

变量的作用是操作、存取数据的，变量可以理解为内存中数据的地址的别名，因为我们对内存的地址的可读性几乎是看不懂的，而变量名称是我们定义的可读的名称，变量名称就对应了内存中的实际十六进制地址。

变量的声明：

1. js是一种弱语言，它的变量声明统一使用var关键字，var 变量名称[=赋初始值] ; 方括号里面的是可选的，因为可以只声明变量不赋值。
2. js声明字符串类型的数据只需要将其用引号包裹起来就可以了；

变量的命名规范

1. 变量命名不能使用关键字（属于js语法里的单词），变量名以英文下划线或者$符号打头由数字或字母$符号组成，单个单词一般是小写的字母，多个单词的话命名方法按照驼峰命名法：即第一个单词首字母小写其他单词首字母大写；
2. js中变量名是对大小写敏感的，也就是说名称一样但是大小写不一样，会被认为是不同的变量；
3. js中的字符串可以使用单引号或者双引号，一般情况最好是使用双引号；
4. 变量命名要做到望文生义

如何输出一个变量的值

为了方便查看输出的变量值，可以使用
console.log(变量名); console是把内容输出到浏览器的控制台中；
浏览器页面按f12（Windows系统） 或者fn+f12（mac系统）可以调出开发者工具，选择Console就可以调出浏览器的控制台

js 中的注释

• 单行注释 // 双斜杠 ，一般用于一行代码的注释
• 多行注释 /**/ ,一般用于对函数或者代码块的注释

2. js中的原始数据类型

2.1 js有6种数据类型：

• number 数值类型 ： 整数和小数js中的数值只有这一种类型；取值范围是：Number.MIN_VALUE ~ Number.MAX_VALUE； Infinity 代表无穷大，-Infinity代表无穷小；
• string 字符串 ： 用单引号或者双引号包裹起来的；获取字符串的长度通过字符串的.length属性。
• boolean 布尔类型 ：只有两个值： 真是true ， 假是 false；
• null 空指针类型，一个对象指向为空，必须要赋值为null；
• undefined 未定义 值是 undefined，1）变量声明但是没有赋值，或者2）函数没有明确返回值如果接收了结果也是undefined；
• object 对象

2.2 如何获取某一变量的数据类型

使用typeof来获取，写法：

//方式1
typeof 变量名
//方式2
typeof(变量名)

需要注意的是给一个变量赋值是null的时候，就说明了这个变量是一个对象，只是把它指向了一个空地址，所以typeof 一个null的变量时返回的数据类型是object，只是说它的值是null。

2.3 数据类型的转换

2.3.1 其他类型转为数字类型

• 转为整数 ： parseInt(“10”); - - 转为整数10，如果是非数字开头的字符串会返回NaN，如果数字开头的，转为最前面的数字，去掉后面的非数字部分
• 转为小数： parseFloat(“10.2”) - -转为小数10.2 ，跟上面的效果一样
• 转为数字：Number(“10a”) — NaN ，不能转含有非数字的字符串，也就是说这种方式要比上面的两种要严格一些

2.3.2 其他类型转字符串类型

• .toString() : 推荐该转换方式， 变量名.toString() - - 转为字符串类型; （未赋值或者未定义的变量调用该方法时会报空指针null异常）
• String() : String(变量名); 和上面的Number()类似，当变量名只是声明未赋值时会被转成undefined，当是一个null值的时候则转换成null，虽然可以转，但是不推荐这种方式

2.3.3 其他类型转布尔类型

• Boolean(变量);
  • 非零数字— true
  • 0 — false
  • 非空字符串，即有长度有内容的字符串 — true
  • 空字符串、null 、undefined – false

3. js中的运算符

3.1 算数运算符： +（加） 、 -（减） 、*（乘） 、/（除） 、%（取余）；

3.2 一元运算符： ++ 、 - -

3.3 复合运算符：+=、 -=、*=、/=、%=

3.4 关系运算符：>、< 、>= 、 <=、

==、不严格的等于，值相等，类型不一定相同
===、严格的等于，值相等，类型也要相同
!= 、 不严格的不相等
!==   严格的不相等

3.5 逻辑运算符：

• && – 逻辑与 – 并且
• || – 逻辑或 – 或者
• ！ – 逻辑非 取反

4. js 中的流程控制语句结构

4.1 顺序结构

代码的从上到下执行的顺序就是顺序结构，这是默认的

4.2 分支结构

• if语句、if-else 语句、if-else if-else if…语句
• switch-case语句 ， 需要注意的是switch - case 比较是强等于，类型和值都要相同。
• 三目运算

4.3 循环结构

• while 先判断循环条件，满足条件才执行循环体；
• do-while 先执行循环体，再判断循环条件，所以该循环体至少执行一次；
• for
• for-in

5. js中的数组

声明数组的方式：
1、通过Array()构造函数来声明数组：

• var 数组名 = new Array(); 通过构造函数来构造数组，此时是空数组；
• var 数组名 = new Array(数字); 给数组一个长度，此时没有给数组值，但是有长度，每个值都是undefined；
• var 数组名 = new Array(data1,data2,…); 声明一个有初始值的数组的方式；

2、通过字面量的方式声明数组：
var 数组名称 = []; //空数组

获取数组长度通过属性.length：var arrLength = arr.length;
取数组某个索引的值(索引从0开始)：var data = 数组名[索引] ; 如果索引超过了数组长度的最后一个值的话，返回结果是undefined，不同于Java中的数组下标越界
修改数组中某一项的值： 数组名[索引] = data；
因为之前说过js是弱类型的语言，所以它的数组里的元素可以是不同类型的数据，但是不建议在一个数组中书写不同类型的数据，因为对批量操作不友好。

6. js中的函数

函数的声明

function  函数名称(参数){
	函数体
}

注意：弱类型，参数不用var，否则会出错

推荐学习网站：MDN-JavaScript