JavaScript基础

前言

由于上一篇文章，过于简单，所以在迅速补篇干货满满的笔记。

不被喜欢的姑娘喜欢，是一件很伤心的事情，可天没有塌下来，该怎么活，还得怎么活。

——烽火戏诸侯《剑来》

什么是JavaScript

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、

笔记本电脑、平板电脑和智能手机等设备。

JavaScript是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript的作用

表单动态校验（密码强度检测） （ JS 产生最初的目的 ）

网页特效

服务端开发(Node.js)

桌面程序(Electron)

App(Cordova)

控制硬件-物联网(Ruff)

游戏开发(cocos2d-js)

浏览器执行JS简介

浏览器分成两部分：渲染引擎和 JS 引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的webkit

JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器

的 V8

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码

时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语

言，会逐行解释执行。

JS的组成

JS ECMAScript

ECMAScript是由ECMA国际（

原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言

在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的

实现和扩展。

ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的 一套JS语法工业标准

DOM--文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言

的标准编程接口。

通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM--浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与 浏览器窗口进行

互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS初体验

行内式JS

<input type="button" value="点击" οnclick="alert('hello')" />

可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick;

注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号;

可读性差， 在html中编写JS大量代码时，不方便阅读;

内嵌式

<script>alert('Hello World~!');</script>

可以将多行JS代码写到 <script> 标签中

内嵌 JS 是学习时常用的方式

外部式

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

利于HTML页面代码结构化，把大段JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用

引用外部JS文件的 script 标签中间不可以写代码

适合于JS代码量比较大的情况

JavaScript注释

单行注释

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来

// 用来注释单行文字（

快捷键 ctrl + / ）

多行注释

/*

获取用户年龄和姓名

并通过提示框显示出来

*/

/* */ 用来注释多行文字（ 默认快捷键 alt + shift + a ）

快捷键修改为： ctrl + shift + /

JavaScript变量

什么是变量

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

通俗：变量是用于存放数据的容器。 我们通过 变量名 获取数据，甚至数据可以修改

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

类似我们酒店的房间，一个房间就可以看做是一个变量。

变量声明

在 JavaScript 中创建变量通常称为"声明"变量。 变量在使用时分为两步： 1. 声明变量 2. 赋值 var name = 'join'; 声明一个变量并赋值， 我们称之为变量的初始化。

1. 变量必须以字母开头

2. 变量也能以 $ 和 _ 符号开头

3. 变量名称对大小写敏感（y 和 Y 是不同的变量）

变量的使用

<script>

var name = '卡卡西';

var add = '木叶村';

var age = 18;

var em = 'kakaxi@sec.com';

console.log(name);

console.log(add);

console.log(age);

console.log(em);

</script>

变量语法拓展

一个变量被多次赋值后，原有的值会被覆盖掉，变量值将以最后一次赋值为准

JavaScript数据类型

简单的数据类型

基本数据类型

数字型Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）

字符串型String

字符串可以是引号中的任意文本，您可以使用单引号或双引号

注：字符串必须带有单引号或双引号，不能不使用

字符串转义符号

以下字符在字符串中不会被当成字符串

字符串长度

字符串是由若干个字符组成的，这些字符的数量就是字符串的长度，通过字符串 length 属性可以获取整个字符串的长度。

字符串拼接

多个字符串之间可以使用 + 进行拼接，其拼接方式字符串+ 任何类型 = 拼接之后的新字符串

布尔型 Boolean

布尔类型有两个值： True 与 False 其中 True代表（真/对）的意思，False代表（假/错）的意思。

True值为1 ，False值为0。

Undefined 与 Null

Undefined ：声明后没有被赋值的变量会有一个默认值 undefined

Null : 一个声明变量给null值，里面的值为空

查看变量数据类型

typeof 可用来获取检测变量的数据类型

数据类型转换

JavaScript运算符

算数运算符

递增和递减运算符

比较运算符

逻辑运算符

赋值运算符

var age = 10;

age += 5; // 相当于 age = age + 5;

age -= 5; // 相当于 age = age - 5;

age *= 10; // 相当于 age = age * 10;

JavaScript流程控制

顺序结构

顺序结构是程序中最简单、最基本的流程控制，他没有特定的语法结构，程序会根据代码的先后顺序， 依次执行，程序中大多数的代码都是这样执行的。

分支结构

IF语句

#语法结构：

if (条件表达式){

#条件成立执行的代码块

}

#如果条件不满足，则直接继续顺序执行。

if else语句

语法结构：

#条件成立时执行if里面的代码块，否则执行else里面的代码块。

if (条件表达式) {

条件成立执行的代码块

}else{

条

if else if

语法结构：

// 适合于检查多重条件。

if (条件表达式1) {

语句1；

} else if (条件表达式2) {

语句2；

} else if (条件表达式3) {

语句3；

....

} else {

/// 上述条件都不成立执行此处代码

}

Switch语句

switch( 表达式 ){

case value1:

// 表达式 等于 value1 时要执行的代码

break;

case value2:

// 表达式 等于 value2 时要执行的代码

break;

default:

// 表达式 不等于任何一个 value 时要执行的代码

}

switch ：开关 转换 ， case ：小例子 选项

关键字 switch 后面括号内可以是表达式或值， 通常是一个变量

关键字 case , 后跟一个选项的表达式或值，后面跟一个冒号

switch 表达式的值会与结构中的 case 的值做比较

如果存在匹配全等(===) ，则与该 case 关联的代码块会被执行，并在遇到 break 时停止，整个 switch

语句代码执行结束

如果所有的 case 的值都和表达式的值不匹配，则执行 default 里的代码

注意： 执行case 里面的语句时，如果没有break，则继续执行下一个case里面的语句。

循环结构

For循环

while循环

do-while循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件 为真的话，就会重复这个循环

Continue/break

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

JavaScript数组、函数

数组

数组的概念

数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。 数组是一种将一组数据存储在单个变量名下的优雅方式。

数组的创建方式

1. 利用 new 创建数组

2. 利用数组字面量创建数组

数组元素的类型

数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

获取数组中的元素

数组的索引：

索引 (下标) ：用来访问数组元素的序号（数组下标从 0 开始）数组可以通过索引来访问获取、设置、修改对应的数组元素，我们可以通过数组名[索引]的形式来获取 数组中的元素。

数组的长度：

使用“数组名.length”可以访问数组元素的数量（数组长度）。

遍历数组

遍历:就是把数组中的每个元素从头到尾都访问一次（类似我们每天早上学生的点名）。

我们可以通过for 循环索引遍历数组中的每一项

var arr = ['red','green', 'blue'];

for(var i = 0; i < arr.length; i++){

console.log(arr[i]);

}

数组中新增元素

通过修改 length 长度新增数组元素：

可以通过修改 length 长度来实现数组扩容的目的

length 属性是可读写的

通过修改索引新增数组元素：

可以通过修改数组索引的方式追加数组元素

函数

函数的概念

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。

虽然for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函

数。

函数：就是将重复使用执行的代码，封装到一个代码块中，通过调用代码块实现重复调用

声明/调用函数

声明函数： function 是声明函数的关键字，必须小写

由于函数一般是为了实现某个功能才定义的， 所以通常我们将函数名命名为动词

调用函数：

口诀：函数不调用，自己不执行。

注意：声明函数本身并不会执行代码，只有调用函数时才会执行函数体代码。

函数使用案例

函数的参数 - 形参和实参

函数的参数 - 使用案例

/*

计算1-100之间值的函数

*/

//声明函数

function getSum(){

var sumNum = 0;// 准备一个变量，保存数字和

for (var i = 1; i <= 100; i++) {

sumNum += i;// 把每个数值 都累加 到变量中

}

alert(sumNum);

}

// 调用函数

getSum();

函数的返回值 - return语句

return 语句：

有的时候，我们会希望函数将值返回给调用者，此时通过使用 return 语句就可以实现。

在使用 return 语句时，函数会停止执行，并返回指定的值

如果函数没有 return ，返回的值是 undefined

1. break ：结束当前的循环体（如 for、while）

2. continue ：跳出本次循环，继续执行下次循环（如 for、while）

3. return ：不仅可以退出循环，还能够返回 return 语句中的值，同时还可以结束当前的函数体 内的代码