Featured image of post JavaScript Learn
Website

JavaScript Learn

JavaScript学习笔记

本文是Javascript学习笔记。

JavaScript概述

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

JavaScript包括三块:ECMAScript、DOM、BOM

  1. ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准；ECMAScript是JavaScript核心语法
  2. Document Object Model编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的
  3. 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中有两种创建方式：

  1. var str = "string" —— 类型是String
  2. 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(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是堆上对象的引用。

comments powered by Disqus
© 2020 - 2026 春节序曲
Built with Hugo
Theme Stack designed by Jimmy