四、JavaScript 入门

1、JavaScript编程语言

JavaScript是一种轻量级的脚本语言，也是一种嵌入式语言，是一种对象模型语言，简称JS；

JavaScript的核心语法部分很精简，只包括两个部分：

1. 基本的语法结构（操作符、控制结构、语句等）
2. 标准库（一系列的各种功能对象，比如Array、Date、Math等）。

想要实现其他复杂的操作和效果，都需要依靠宿主环境提供API，目前，已经嵌入JavaScript的宿主环境有多种，最常见的环境就是浏览器，另外还有服务器（操作系统）

JavaScript发展到现在几乎无所不能：

网页特效
服务端开发（node.js）
命令行工具（node.js）
桌面程序（Electron）
APP（Cordova）
控制硬件-物联网（Ruff）
游戏开发（cocos2d-js）

主要的学习内容分为两部分，语言结构及宿主环境提供的API；

语言结构：主要是语言规则及内置对象（标准库对象）

宿主环境API：根据宿主环境不同而不同，以浏览器为例，最常见的有<浏览器控制类>，<DOM操作类>，<网络控制类>

四、JavaScript 入门

2、JavaScript的基本操作

1、写法

JavaScript的写法与CSS一样，大致分为三种，分别是行内式、内联式、引入式

行内式：写在HTML行内

<input type="button" value="按钮" οnclick="alert(123)">

内联式：写在<script></script>标签中

<script>alert(456)</script>

引入式：写在外部的js文件当中，在<script></script>标签内引用

<script src="./1.js"></script>

2、变量

变量：计算机内存中存储数据的标识符，根据变量名可以取到内存中存储的数据。变量就是存储数据的容器

在JavaScript中使用var来声明变量

变量的名字必须是数字、字母、_和$组成，区分大小写，变量的名字不能以数字开头，不能是关键字。尽量使用驼峰命名法来命名。

声明一个变量的方法：

var useName; useName=18 相等于 var useName=18;

声明多个变量的方法：

var a1=11，a2=12，a3=13;

3、JavaScript数据类型

JavaScript中的数据类型：

数值（Number）
字符串（String）：带引号
布尔（Boolen）：true或false
undfined：声明了但没有赋值的变量
null：表示一个空
对象（Object）

常用的一些属性：

字符串拼接：+

打印到浏览器：console.log()

字符串长度：console.log(str.length)

变量类型：console.log(typeof var)

转义符号：

四、JavaScript 入门

数据类型的转换：

将a转换成字符串：

- a.toString()；
- String(a)；
- ' '+a；

将b转换成数值型：

- Number(b);
- 转成整数：parseInt(b)
- 转成浮点数：parseFloat(b)

将c转换成布尔类型：

- Boolean(c)

4、JavaScript操作符与运算符

表达式：值与操作符，表达式运算完成之后会有一个结果。

当y=5时，算数运算符：

四、JavaScript 入门

当x=10，y=5时，赋值运算符：

四、JavaScript 入门

当x=5时，比较运算符：

四、JavaScript 入门

逻辑运算符：

四、JavaScript 入门

JavaScript位运算符：

四、JavaScript 入门

运算符的优先级：

四、JavaScript 入门

程序的三种基本结构：

顺序结构：从上至下一次执行，程序默认就是此顺序结构；
分支结构：根据不同的情况及判断，执行对应的代码；
循环结构：重复执行一段代码；

1、分支结构-if语句

基于不同判断执行不同的动作，在代码中可以使用if条件语句来实现这一点。

最基本的用法，if需要使用小写字母：

四、JavaScript 入门

使用else语句来规定假如条件为false时的代码块：

四、JavaScript 入门

使用else if来规定当首个条件为false时的新条件：

四、JavaScript 入门

2、分支结构-switch语句

switch语句用于基于不同条件执行不同动作，根据条件来判断执行的内容。

使用sitch语句来选择多个需要被执行的代码块之一：

四、JavaScript 入门

3、循环结构-while语句

四、JavaScript 入门

while语句会一直循环其中的代码块，直到指定的条件不满足为止：

四、JavaScript 入门

do-while语句在检查条件是否为真之前，这种循环会执行一次代码块，只要条件为真就会一直执行。

四、JavaScript 入门

4、循环结构-for语句

for语句每执行一次，都会进行校验判断：

四、JavaScript 入门

5、中断语句-continue和break

在循环当中，可以使用中断语句来对整个循环来进行控制

break：可以中断循环，并继续执行循环后的代码。
continue：可以中断循环中的一次，跳过此时的指定条件，然后继续循环。

所谓数组，就是将多个元素，按一定顺序排列到一个集合当中，这个集合我们称为数组。

1、创建数组

创建数组有很多方法，常用的几种有：

字面量方式：var i =[]；
构造函数方式：var i = new Array()；

2、获取数组的值

获取数组的值有很多方法，常用的几种有：

下标法：直接用下标取出（值从0开始）
循环法：一般用for循环

1、函数的声明与调用

函数就是被设计为执行特定任务而组成的代码块

其一般有两种声明方式：

关键字声明：

function 函数名(参数){
    函数体
    return 返回值
}

表达式声明：

var f(函数名) = function(){
    函数体
    return 返回值
}

在声明函数完成之后，需要进行调用才能够使用对应的函数，直接使用函数名() 即可调用；如果函数存在返回值，就需要一个变量来接收此返回值。

2、匿名函数与自调用

匿名函数，函数本身没有名字，用变量值来接替函数，直接调用变量名即可执行函数。

可以在生成匿名函数之后立刻进行调用，也称为自调用匿名函数，例子：

（function(){
    alert(123);
})();

3、函数作为参数

函数也是一种数据类型，其类型属于对象的一种(还有一种就是数组)，所以也可以将一个函数作为参数而传递给另一个函数让其执行，我们称之为回调函数，例子：

function f1(k){
    k();
}
var f2 = function(){
    console.log(222)
}

f1(f2);

还有一种被称之为闭包函数，例子：

function f1(){
    var a = 10;
    var f2 = function(){
        alert(2);
    }
    return f2;
}

var k = f1();
k();

4、作用域

作用域分为全局作用域与局部作用域。

一般来说，在函数内部中的变量，被称为局部变量，他们之间不会互相影响。只有函数可以制造作用域，一般代码至少有一个作用域，即全局作用域，凡是代码中有函数，那个函数将构成另一个作用域，如果函数用还有函数，那么在函数中又可以生成作用域，这种情况将构成作用域链。

当函数中使用了某个变量时，优先在自己的作用域中查找，如果找不到，就会像上一级作用域查找，直到全局作用域。

JS的代码运行分两个阶段：

解析(编译)阶段：语法检查、变量及函数进行声明。
运行阶段：变量的赋值、代码流程的执行。

5、箭头函数

箭头函数极大的简化了this的调用规则，表达非常简洁的作用域，类似于python当中的 lambda 函数，最直观的一个例子：

funcName(2);// 4

<script>
function funcName(params) {              相当于：     var funcName = (params) => params + 2
   return params + 2;
}
</script>

最基本的箭头函数结构：

最基本结构：
        (parameters) => { statements }
如果没有参数：
        () => { statements }
参数只有一个：
        parameters => { statements }
返回值为表达式：
        parameters => expression
  // 等价于:
  function (parameters){
    return expression;
  }

对象其实就是生活中的一个事务的抽象，一个事务就会有特征和行为，对应的代码就是属性和方法。

事务的特征在对象中用属性来表示。
事务的行为在对象中用方法来表示。

1、创建对象

JavaScript中的对象是用键值对来描述的

字面量声明对象，值是函数则称为对象的方法，例子：

var obj = {age:12,sg=100,fei:function(){}};

实例化方法声明对象，例子：

var obj = new Object();

自定义构造函数声明对象，例子：

function Fun(){}

var f = new Fun();

对象声明出来之后使用点方法进行调用即可。

2、this属性

this表示当前对象的一个引用，能够使用this属性来调用本身的方法，例子：

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this运行在哪个对象下，就会指向哪个对象

3、遍历对象

使用for...in...循环可以遍历数组、对象，进行循环操作，每执行一次代码，就可以进行一次操作。

四、JavaScript 入门

4、各类对象

在JavaScript内置库当中，存在着许多对象。包括但不限于：

数学对象(math)
时间对象(date)
数组对象(array)
字符串对象(string)

详细目录请查看：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects