JavaScript是什么

布兰登·艾奇（Brendan Eich，1961年～）。
神奇的大哥用10天完成 JavaScript 设计。
最初命名为 LiveScript，后来在与 Sun 合作之后将其改名为 JavaScript。

  • JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思）
  • 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行
  • 现在也可以基于 Node.js 技术进行服务器端编程

JavaScript 的组成

  • ECMAScript (JavaScript语法)
  • DOM (页面文档对象模型)
  • BOM (浏览器对象模型)

  1. ECMAScript

    ​ ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

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

    更多参看MDN: MDN手册

  2. DOM——文档对象模型

    ​ 文档对象模型（DocumentObject Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）

  3. BOM——浏览器对象模型

    ​ 浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

JS的书写位置

JS 有3种书写位置，分别为行内、内嵌和外部。

1
2
// 行内式
<input type="button" value="点我试试" onclick="alert('Hello World')" />
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick
  • 注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
  • 可读性差， 在html中编写JS大量代码时，不方便阅读；
  • 引号易错，引号多层嵌套匹配时，非常容易弄混；
  • 特殊情况下使用
1
2
3
4
// 内嵌式
<script>
    alert('Hello  World~!');
</script>
  • 可以将多行JS代码写到 script 标签中
  • 内嵌 JS 是学习时常用的方式
1
2
// 外部JS文件
<script src="my.js"></script>
  • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

JavaScript的注释

1
2
3
// 用来注释单行文字（  快捷键   ctrl  +  /   ）
/* */  用来注释多行文字（ 默认快捷键  alt +  shift  + a ） vscod
					sublime 快捷键为：   ctrl + shift  +  /

JavaScript输入输出语句

1
2
3
4
5
6
7
8
9
10
11
12
13
prompt('请输入内容');	//弹出输入框
alert('这是一个警示框');	//弹出警示框
console.log('输出');	//控制台输出
document.write('输出'); //HTML页面输出
document.writeln('输出'); //HTML页面输出加空格
console.dir(); // 打印返回的元素对象 查看属性和方法
confirm(''); // 弹出询问

console.time() // 计时开始
console.timeEnd() // 计时结束

console.error("这是一个错误。"); // 将错误信息输出到控制台：
console.warn("Runoob! 这是一个警告信息"); // 在控制台上输出警告信息：

变量的使用

1
2
3
4
5
6
7
8
9
//  声明变量  
var age; //  声明一个 名称为age 的变量

age = 10; // 给 age  这个变量赋值为 10    

var age  = 18;  // 声明变量同时赋值为 18
// 声明一个变量并赋值， 我们称之为变量的初始化。

var age = 10,  name = 'zs', sex = 2; // 同时声明多个变量

变量的命名规范

规则：

  • 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
  • 严格区分大小写。var app; 和 var App; 是两个变量
  • 不能 以数字开头。 18age 是错误的
  • 不能 是关键字、保留字。例如：var、for、while
  • 变量名必须有意义。 MMD BBD nl → age
  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

数据类型

JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定：

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

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

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

数据类型的分类

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空值（Null）、未定义（Undefined）、Symbol。

引用数据类型：对象(Object)、数组(Array)、函数(Function)。

注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值。

简单数据类型(值类型)

数字型(Number)，包含整型值和浮动型值，如21、0.21，默认值 0

  • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
  • 最小值：Number.MIN_VALUE，这个值为：5e-32
1
2
3
4
5
6
// 数字型三个特殊值
Infinity 无穷大
-Infinity 无穷小
NaN 非数字但是数字类型

isNaN() 判断是否非数字 返回布尔值

字符串型(String)，默认值””

  1. 转义符 解释说明
    \n 换行符，n 是 newline 的意思
    \ \ 斜杠 \
    ' ‘ 单引号
    " ”双引号
    \t tab 缩进
    \b 空格 ，b 是 blank 的意思

布尔型(Boolean)，默认值false

1
2
true 真  运算值为1
false 假  运算值为0

undefined

1
2
3
4
5
6
7
8
undefined表示缺少值，即此处应该有值，但是还没有定义
变量被声明了还没有赋值，就为undefined

调用函数时应该提供的参数还没有提供，该参数就等于undefined

对象没有赋值的属性，该属性的值就等于undefined

函数没有返回值，默认返回undefined

Null

1
2
3
4
5
6
null表示一个值被定义了，但是这个值是空值
作为函数的参数，表示函数的参数不是对象

作为对象原型链的终点 （Object.getPrototypeOf(Object.prototype)）

定义一个值为null是合理的，但定义为undefined不合理（var name = null）　　　　　　

symbol(ES6新增)

最大的用法是用来定义对象的唯一属性名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
由于每一个 Symbol 的值都是不相等的，所以 Symbol 作为对象的属性名，可以保证属性不重名。

let sy = Symbol("key1");
 
// 写法1
let syObject = {};
syObject[sy] = "kk";
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法2
let syObject = {
  [sy]: "kk"
};
console.log(syObject);    // {Symbol(key1): "kk"}
 
// 写法3
let syObject = {};
Object.defineProperty(syObject, sy, {value: "kk"});
console.log(syObject);   // {Symbol(key1): "kk"}

复杂数据类型(引用数据类型)

数组(Array)

  • 数组可以把一组相关的数据一起存放，并提供方便的访问(获取）方式。
  • 数组是指一组数据的集合，其中的每个数据被称作元素，在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。

函数(function)

在 JS 里面，可能会定义非常多的相同代码或者功能相似的代码，这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作，但是比较具有局限性，此时我们就可以使用 JS 中的函数。

​ 函数：就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

对象(Object)

获取变量数据类型

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

不同类型的返回值

1
2
3
4
5
String  // string
Number // number
Boolean // boolean
Undefined // undefined
Null // object

字面量

字面量是在源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。

  • 数字字面量：8, 9, 10
  • 字符串字面量：’黑马程序员’, “大前端”
  • 布尔字面量：true，false

数据类型转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Number() 转换为数字 //强制转换,可以把任何数据都转换
parseInt() 转换为整数 //前面为数字,可以去掉后面的字母
parseFloat() 转换为浮点数 //同上
.toString(); 转换为字符串
String() 转换为字符串 //强制转换
+ '' 转换为字符串 // 隐式转换

// Boolean()函数 把其他类型转换成布尔值
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean('小白')); // true
console.log(Boolean(12)); // true

隐式转换

1
2
3
4
5
+ string = number
string -,*,/ string = number
number -,*,/ string = number

'number' = string

标识符

1
标识(zhi)符：就是指开发人员为变量、属性、函数、参数取的名字。
1
标识符不能是关键字或保留字。

关键字

1
关键字：是指 JS本身已经使用了的字，不能再用它们充当变量名、方法名。
1
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。

保留字

1
保留字：实际上就是预留的“关键字”，意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或方法名。
1
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。
1
注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。