JavaScript Learn Part A

本文是Javascript学习笔记·A，记录JS基础语法。

JavaScript概述

简称 JS
JavaScript语言是一种脚本语言,JavaScript的“目标程序”是以普通文本的形式保存。用记事本是可以直接打开的。
JavaScript和JScript的关系……
JavaScript主要用来操作HTML中的节点,产生动态效果；JS是一门编程语言，专门用来操作HTML页面中的节点，产生动态效果
JavaScript和 Java的区别：毫无关系
（重要）JS调试要充分利用浏览器开发者页面的控制台，查看器，网络面板

JavaScript包括三块:ECMAScript、DOM、BOM

ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准；ECMAScript是JavaScript核心语法
Document Object Model编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的
Browser Object Modle编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。

嵌入JS的三种方式以及JS注释

行间事件法

JS是一种事件驱动的语言，一般是在发生某个事件时执行某些代码。事件有很多种，例如鼠标单机click、鼠标经过mouseover等。并且JS中任何一个事件都有对应的事件句柄：例如click对应事件的句柄是onclick，mouseover对应句柄是onmouseover…… 所有的事件句柄都是以标签的属性形式存在，例如<input type="buttom">就有onclick属性， onclick的属性值就是注册的代码，只要出发点击事件，就会执行这段代码。

举个例子（参考代码001），目标是“点击按钮Hello, 弹出对话框，框中显示HelloWorld”。

怎么实现弹窗？ JS中有内置的BOM对象window，可以直接用，因此我们直接把弹窗函数"window.alert('Hello world');"写在onclick的属性值中。

小TIPS

JS中的一条语句可以以一个分号结尾，也可以没有

window.可以省略

页面脚本块嵌入

在HTML中嵌入脚本块，脚本块中的代码自上而下逐行执行。 脚本块的位置随意（甚至可以在<html>外），并且可有多个。

1
2
3
4


<script type="text/javascript">
    alert('警告1')
    alert('警告2')
</script>

注意，如果脚本块前后有DOM网页元素，则其前面的内容会先显示，然后执行脚本，然后再加载后面的内容。

引入外部JS文件

编写.js文件，然后通过<script src="path/to/your.js"/>引入。引入一次.js文件，其中代码就会执行一次。并且，使用引入法的脚本块中的代码不会执行，例如下述弹窗不会出现：

1
2
3


<script type="text/javascript" src="js/local.js">
    alert('弹窗')
</script>

标识符合关键字

标识符规则和java一样

变量

变量的声明与赋值

回顾：Java中的变量 ——

声明：int a;，double b;，string s;
赋值：a = 10;，b = 3.14;，s = "hello;
一行可以声明多个变量int a, b=2, c=3;

Java是强类型编译型语言。

回到JS —— JS是弱类型非编译（脚本）语言，参考代码006-变量。

声明：var variable_name，默认赋值undefined（这就是一个具体的值），声明时可赋值
赋值：variable_name = value
一行声明多个变量：var a, b = 90, c;，意味着a, c赋值undefined，b赋值90

重点：JS语言是一种弱类型语言，没有编译阶段，直接浏览器打开解释执行。在JS中声明变量时不需要指定变量的数据类型；程序在运行过程当中，赋什么类型的值，变量就是什么数据类型，并且变量的数据类型是可变的。

以下JS代码是可行的：

1
2
3
4
5
6


var i;
i = 100;    // i为整型
i = false;  // 变为布尔型
i = true;
i = 3.14;   // 浮点型 
i = new Object();

函数的定义和调用

Java中的方法：[修饰符列表] 返回值类型方法名(形参列表) {方法体}。例如

1
2
3


public static int sum(int a, int b) {
    return a + b;
}

JS中的函数：function 函数名(形参列表) {函数体}。例如

1
2
3


function sum(a, b) {
    return a + b
}

函数要被调用才会执行，不是定义了就会执行的！参考代码007-函数定义和调用。

TIPS

函数调用时的实参列表不用与形参列表对应，参数从左往右一次配入形参。

JS函数还有另一种定义方式：函数名 = function(形参列表) {函数体}

函数定义的优先级较高，可以在函数定义前调用（参考代码008-函数定义和调用）

局部变量与全局变量

全局变量：在函数体外声明的变量，称为全局变量，在浏览器打开页面时分配空间，直到关闭才销毁；

局部变量：函数调用时分配空间，函数执行结束后内存释放

特别的，若一个变量声明时（应该说是定义时赋值）没有用var关键字，则无论是在哪声明的，默认为全局变量。使用这种特性的变量必须声明时赋值，不能既不用var又不赋值。参考代码009-局部全局变量中“特性”。

Topic - 函数可以重载吗
不可以，同名函数只取最后定义的那个函数来解释，其他同名函数直接消失！根本不可能执行，所以不是覆盖（因为JS函数定义优先级高先解释）。参考代码010

JS数据类型

ECMASCRIPT6版本之前的数据类型有6种

Undefined
Numebr
String
Null（通过=null赋予）
Boolean
Object

其中Undefined, Number, String, Boolean， Null都属于基本数据类型， Object属于对象类型（引用数据类型）。

ECMASCRIPT6版本后的数据类型有8种，多了Symbol, Bigint。

typeof运算符（@@@@@）

typeof运算符可以在代码运行时动态的获取变量的数据类型，使用方法typeof variable_name。 typeof算符的运算结果的值为以下6个字符串之一（注意是小写）：

undefined
numebr
string
boolean
object（null类型数据通过typeof算符作用结果为object）
function

在JS中判断字符串是否相等应使用==算符，参考代码011-数据类型。

Numebr类型

Number类型的数据

类比：Number类型代表了Java中的byte, short, int, long, float, double。

Number类型都有哪些值？以下均可取 - -1 - 0 - 1 - 12.34 - NaN - Infinity

参考代码014-Number类型

NaN这个值意思是非数，但数据的类型仍是Number，当一个数学表达式运算最终无法返回数字时，值就是NaN。例如100 / "abc"的运算结果就是NaN。

TIPS
运算式100 + "abc"结果是字符串"100abc"，所以这个表达式不是数学表达式，而是字符串拼接的意思，所以返回值类型不是Number
JS中10/3结果是浮点3.33333

Infinity顾名思义就是无穷大（注意是正无穷）。

isNaN() 函数

形参列表：一个变量
返回值：Boolean，true代表传参是NaN，否则不是
作用：用于判断数据是不是数

注意，这个函数会首先尝试将数据转换成数字，若失败则结果是true；转换成功则结果为false。可以测试

布尔类型true转换为数字类型是1，false转为0
数字字符串可以转化为数

Number()函数

Number()函数将不是Number类型的数据转为Numeber类型，它把**可以转为Number类型（也就是isNaN()返回true的类型）**的数据转为数字；把不可转为Number类型的数据转为NaN；若参数已经是Number类型，保持不变。

parseInt()函数

把字符串表示的小数（或者小数）取整数部；注意不是向下取整。实际上对于字符串参数，类似于把第一个小数点前面的部分截出来转为数字。无法转化的，输出NaN。

JS数学类介绍

向上取整：Math.ceil(123.456)

Boolean类型

Boolean类型是原始类型，只有两个值：true，false。

Boolean()函数

把非Boolean类型数据转为Boolean类型的数据。

数据	类型	转化结果
0	Number	false
1	Number	true
‘abc’	String	true
''	String	false
NaN	Number	false
Infinity	Number	true
null	Null	false
undefined	Undefined	false
Object	Object	true

规律：只有有东西，结果就是true。 Boolean()函数不需要我们手动调用，它会被隐式调用。例如name="zhansan"; if(name) {...}中，JS将自动把name变量转为Boolean类型并判断真伪。
参考代码015-Boolean。

String

String是原始类型。怎么定义一个字符串？在JS中有两种创建方式：

var str = "string" —— 类型是String
var s = new String('string') —— 类型是Object，使用了Object类的子类String，这是JS内置的可以直接用

不论哪种字符串，其方法和属性都是通用的。以下介绍常用属性和方法。参考代码016

属性或方法	描述
length属性	获取字符串长度
charAt()	获取指定下标位置的字符，下标从0开始
concat()	拼接字符串
indexOf()	获取某个字符串在当前字符串第一次出现的索引
lastIndexOf()	获取某个字符串在当前字符串末次出现的索引
replace()	`str.replace(s1, s2)`把str中首次出现的s1替换为s2（只替换一次）。替换所有需要使用正则表达式。
split()	`str.split(s)`，把str以s为分割拆分为若干字符串，返回一个数组
substr()和subtring()	若只有一个参数`n`，其行为相同，都是取字符串index为n到index为末尾的字串。

substr()和subtring()：若两个参数，含义如下

substr(startIndex, length)
substring(start, end)且不包括end |toLowerCase()和toUpperCase() |大小写转化

Object

在JS中内置一个Object类型，可视为所有类型的基类/超类。 JS中默认定义的类型如无特殊说明，默认继承Object。 Object类型中的通用属性和方法如下。参考代码017

prototype属性

意为原型，这个属性可以为对象动态扩展属性和方法。例如：

1
2
3
4
5
6


var o = new Object()
// 演示prototype属性
Object.prototype.doSome = function() {
    console.log("测试Prototype属性")
}
o.doSome()

通过prototype属性为Object拓展了doSome()方法。实际上，prototype属性可以为其它类型也扩展属性和方法，例如

1
2
3
4


String.prototype.sub = function(start, length) {
    return this.substr(start, length)
} // 扩展String的方法
console.log("1234567".sub(2,3))

类

定义类

方法一

1
2
3
4


function 类名(形参列表) {
    this.属性名 = 参数
    this.方法名 = function() {...}
}

方法二

1
2
3
4


类名 = function(形参列表) {
    this.属性名 = 参数
    this.方法名 = function() {...}
}

所以说，function创建一个函数，也创建一个同名类（或者理解为创建一个东西，功能与调用方法有关）。若通过函数名();调用，则是当作函数来用；若是通过var obj = new 类名()创建对象，则是当作类来用，会在堆中分配空间，而obj是堆上对象的引用。参考代码018。

访问属性

方法一：引用.属性名，例如example_obj.test_property
方法二：引用["属性名"]，例如example_obj["test_property"]

null, NaN, undefined的区别

参考代码019

`==`和`===`的区别

==是等同运算符，===是全等运算符。前者只比较值是否相等，类似Java的equals方法；后者比较值和数据类型是否相同。

null, NaN, undefined的区别

类型互不相同，之间全等运算结果肯定是false

null：原始类型，typeof运算结果是object
NaN：原始类型，typeof运算结果是number
undefined：原始类型，typeof运算符结果是undefined

null和undefined是等同关系

null == NaN ? false
null == undefined ? true
undefined == NaN ? false

NaN不与任何值相同，包括自身

NaN == NaN ? false

JSON

eval()函数

window.eval()函数可以把一段字符串当成JS代码解释并执行。

创建JSON对象，访问JSON对象属性

JSON: JavaScript Object Notation，一种轻量（文本少数据量大）数据交换（不同编程语言之间的数据交换）格式；xml也是一种标准的数据交换格式。

JS中的JSON是以对象形式存在的。

语法格式

创建JSON对象：

1
2
3
4
5


var jsonObj = {
    "属性名" : "属性值", 
    "属性名" : "属性值", 
    "属性名" : "属性值", 
}

注意，JS中方括弧是数组对象，花括弧是JSON对象。属性值可以是任何类型数据，包括JSON对象。

访问JSON对象属性

jsonObj.prop或jsonObj["prop"]

JSON数据交换

java和javascript两个语言交换数据可以使用JSON格式的字符串。 java的JDBC连接数据库查询数据，然后将数据拼接成JSON格式的字符串，将JSON格式的字符串传给javascript，然后在javascript当中把json格式的字符串转换成JSON对象，这样就可以从json对象中取数据了，这样就完成了数据的交换。

JavaScript概述

JavaScript包括三块:ECMAScript、DOM、BOM

嵌入JS的三种方式以及JS注释

行间事件法

页面脚本块嵌入

引入外部JS文件

标识符合关键字

变量

变量的声明与赋值

函数的定义和调用

局部变量与全局变量

JS数据类型

ECMASCRIPT6版本之前的数据类型有6种

typeof运算符（@@@@@）

Numebr类型

Number类型的数据

isNaN() 函数

Number()函数

parseInt()函数

JS数学类介绍

Boolean类型

Boolean()函数

String

Object

prototype属性

类

定义类

访问属性

null, NaN, undefined的区别

==和===的区别

null, NaN, undefined的区别

JSON

eval()函数

创建JSON对象，访问JSON对象属性

语法格式

访问JSON对象属性

JSON数据交换

`==`和`===`的区别