JavaScript总结

JavaScript 是什么

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言(Script是脚本的意思)

脚本语言:不需要编译，运行过程中由js解释器(js 引擎）逐行来进行解释并执行。现在也可以基于Node.js技术进行服务器端编程

JavaScript 的作用

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

• 网页特效

• 服务端开发(Node.js)

HTML/CSS/JS 的关系

• html：决定网页结构和内容，相当于身体

• css：决定网页呈现给用户的模样，相当于给人穿衣服、化妆

• js：实现业务逻辑和页面控制，相当于人的各种动作

浏览器执行JS

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

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

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

浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言)，然后由计算机去执行，所以JavaScript 语言归为脚本语言，会逐行解释执行.

JS的组成

• ECMAScript

• JavaScript语法

• DOM

• 页面文档对象模型

• BOM

• 浏览器对象模型

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有3种书写位置，分别为行内、内嵌和外部。

行内式

<input type="button" value="点我试试" onclick="alert('Hello World')" /&gt;

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

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

• 行内式可读性差， 在html中编写JS大量代码时，不方便阅读；

内嵌 JS

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

• 可以将多行JS代码写到 <script&gt; 标签中

• 内嵌 JS 是测试常用的方式

外部 JS 文件

<script src="my.js"&gt;</script>

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

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

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

JS 注释

单行注释

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

• // 用来注释单行文字（ 快捷键 ctrl + / ）

多行注释

/*
 获取用户年龄和姓名
并通过提示框显示出来
*/

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

输入输出语句

为了方便信息的输入输出，JS中提供了一些输入输出语句

• alert(msg)：浏览器弹出警示框

• console.log(msg)：浏览器控制台打印输出信息

• prompt(info)：浏览器弹出输入框，用户可以输入

变量

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

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

在使用时分为两步:1、声明变量，2、赋值

声明一个变量并赋值， 我们称之为变量的初始化。

语法

 //声明变量 
var age; // 声明一个 名称为age 的变量 
age = 10; // 给 age 这个变量赋值为 10
//一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
age = 81;
//同时声明多个变量时
var age1 = 10, name = 'zs', sex = 2; 

• var是一个JS关键字，用来声明变量( variable变量的意思)。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

• age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

命名规范

• 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name

• 严格区分大小写。var app; 和 var App; 是两个变量

• 不能 以数字开头，不能 是关键字、保留字，遵守驼峰命名法

数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。简单来说，数据类型就是数据的类别型号。

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;             // 这是一个数字型
var areYouOk = '是的';  // 这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型:

var x = 6; // x 为数字
var x = "Bill"; // x 为字符串 

数据类型的分类

JS 把数据类型分为两类：

• 简单数据类型(Number,string,Boolean,Undefined,Null)

• Number,数字型，包含整型值和浮点型值，如21、0.21

• JavaScript中数值的最大和最小值,

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

• 进制有二进制、八进制、十进制、十六进制

 // 1.八进制数字序列范围：0~7

var num1 = 07;     // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08;     // 对应十进制的8

 // 2.十六进制数字序列范围：0~9以及A~F

var num = 0xA;

• 三个特殊值

• Infinity ，代表无穷大，大于任何数值

• -Infinity ，代表无穷小，小于任何数值

• NaN ，Not a number，代表一个非数值

• isNaN(x)，用来判断一个变量是否为非数字的类型，返回true（x不是数字） 或者false（x是数字）

• Boolean,布尔值类型，如true .false，等价于1和0

• 布尔类型有两个值: true和false，其中 true表示真(对)，而false表示假（错)

• 布尔型和数字型相加的时候， true的值为1 ，false 的值为0。

console.log (true + 1);    //2
console .log ( false + 1); // 1

• String,字符串类型，如”张三”注意咱们js里面,字符串都带引号

• 字符串型可以是引号中的任意文本，其语法为双引号“”和单引号“

• 因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号

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

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

• Undefined,var a;声明了变量a但是没有给值,此时a = undefined

• 一个声明后没有被赋值的变量会有一个默认值undefined(如果进行相连或者相加时，注意结果)

var variable;
console.log(variable);             // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   // Na

• Null,var a = null;声明了变量a为空值

• 一个声明变量给null值，里面存的值为空

• 复杂数据类型(object)

typeof

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

var num = 18;
console.log(typeof num) // 结果 number

数据类型转换

使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

• 转换为字符串

• toString() 转成字符串

• String()强制转换 转成字符串

• 加号拼接字符串 和字符串拼接的结果都是字符串

• 转换为数字型

• parselnt(string)函数,将string类型转成整数数值型

• parseFloat(string)函数,将string类型转成浮点数数值型

• Number()强制转换函数,将string类型转换为数值型

• js隐式转换(- * / ) ,利用算术运算隐式转换为数值型,如：’12’ – 0

• 转换为布尔型

• Boolean函数，其他类型转换成布尔值

• 代表空、否定的值会被转换为false ,如”、0、NaN、null、undefined

• 其余值都会被转换为true