【教程】JavaScript快速学习

备注

2021/6/10 星期四
终于写完了html和css，该轮到JavaScript了

一、JavaScript简介

JavaScript是一门客户端脚本语言，与JAVA几乎没有关系，运行在浏览器中，可以增强用户和html页面的交互，控制html页面的元素实现动态效果。当我们想要在客户端实现一些程序功能的时候就可以使用JavaScript。由于历史发展过程中，曾出现多门客户端脚本语言，为了维护市场秩序，ECMA组织制订了ECMAScript作为这类语言的标准，JavaScript就是在遵守这些标准的基础上又保持了一些自己的特色的一门语言。

二、语法基础

1.结合方式

JavaScript与html的结合有两种方式，内部连接和外部连接，不论哪种方式引入的JS代码执行顺序都受引入位置的影响。
内部连接：
内部连接方式是通过直接在<script></script>标签来中书写js代码实现的

<script>JS代码</script>

外部连接：
外部连接方式是通过<script></script>标签的src属性引入外部js文件实现的

<script src="js文件"></script>

2.注释

与大多数语言相同，//为单行注释，/**/为多行注释。

3.数据类型

js是一种弱类型的编程语言，数据类型分为原始数据类型和引用数据类型，其中原始数据类型有：

1. number：数字有三种，整数、小数和NaN(不是数字的数字)
2. string：字符和字符串都是字符串
3. boolean：true和false
4. null：空对象
5. undefined：没有初始值的变量

4.变量

在js中申请变量只使用var加变量名即可

var 变量名 = 值;

当我们想要获取变量的数据类型时，可以使用typeof()函数

5.运算符

与其他语言基本相同，具有加(+)减(-)乘(*)除(/)，取余(%)，正(+)负(-)号，赋值(=)，自增(++)自减(–)，比较(>、>=、<、<=)，等于(==)，全等于(===)，与(&&)或(||)非(!)，三元运算符(? : )
注：当比较运算符比较的类型不同时会发生类型转换(数字和字符串比较时会将字符串转为数字，无法正常转换的字符串会变成NaN)

6.流程控制

js的流程控制语句与c语言、java等常见语言没有太大差别就不多赘述了，总共有分支if，else，switch，循环while，dowhile，for这几种语句。

三、基本对象

1.函数对象(Function)

创建：

• var 函数名 = new Function(形参列表，函数体);
  这种方式并不常用，也不好用，我们一般不会使用只需要知道即可

  //弹出a，b两个变量和的函数
  var fun = new Function("a","b","alert(a+b)");
  

• function 函数名(形参列表){
  函数体；
  }

  //弹出a，b两个变量和的函数
  function sum(a,b){
  	alert(a+b);
  }
  

• var 函数名 = new Function(形参列表){
  函数体;
  }

  //弹出a，b两个变量和的函数
  var sum = new Function(a,b){
  	alert(a+b);
  }
  

属性：
JS中函数是具有属性的，如：length属性是形参个数
特性：
在JS中，定义相同名字的函数，后定义的函数会将先定义的函数覆盖而不会报错。
在JS中，形参个数和实参个数不需要一一对应，形参会依次获取实参的值，并且在函数内部有一个数组arguments，并且arguments有一个属性length是数组的长度，所以我们也可以通过这种方式获取所有实参的值。

2.数组对象(Array)

创建：

• var 数组名 = new Array(元素列表);
  例：var arr = new Array(1,2,3);
• var 数组名 = new Array(元素个数);
  例：var arr = new Array(3);
• var 数组名 = [元素列表];
  例：var arr = [1,2,3];
  属性：
  数组具有length属性，表示数组的长度。
  方法：
  在js中，数组具有很多方法，将用的有以下这些

方法名	作用
concat	将两个数组拼接返回结果
join	将数组按格式拼接成字符串
reverse	倒置数组元素
posh	将元素加入数组末尾
pop	删除并返回末尾元素
shift	删除并返回首个元素
sort	排序

特性：
在js中同一个数组中的元素类型可以是不同的。
在js中数组的长度是可变的，当我们访问(在c或java中)越界的元素时，js会自动扩容。

5.正则对象(RegExp)

正则表达式是用来定义字符串规则的表达式，js为我们提供了正则表达式对。
简单的介绍一下正则表达式的规则

符号	作用	解释
[]	单个字符	字符a [a],字符a或b [ab],字符a到z中的任意一个[a-z]
\d	单个数字	即与[0-9]相同
\w	任意单个字符	即与[a-zA-Z0-9]相同
^ $	开始和结束符	没有实际含义表示表达式的始末

有了这些符号之后还不够，我们还需要控制符号的数量，正则表达式还为我们提供了量词

符号	作用
?	不出现或出现一次
+	出现一次或多次
*	不出现或出现任意次
{m,n}	数量大于等于m小于等于n(m或n可以不写，表示最多或最少)

例如：
想要表达字符串中有a可以写作[a]+，想要匹配长度为8-10的字符串可以写作/w{8,10}

js中有两种创建正则表达式对象的方式

• var 变量名 = new RegExp(“正则表达式”);
• var 变量名 = /正则表达式/；
  我们一般会用test方法判断字符串是否符合正则，是返回ture，不是返回false

4、全局对象

js为我们提供了一些函数可以在任意地方调用，类似c语言使用函数

函数	作用
encodeURI()	将字符串进行URI编码
dncodeURI()	将字符串进行URI解码
encodeURIComponent()	将字符串进行URI编码(会将更多字符进行编码)
dncodeURIComponent()	将字符串进行URI解码(匹配使用)
isNaN()	判断一个变量是否是NaN(NaN互不相同需要用这个方法来判断)
eval()	将字符串当作js代码来执行

5.其他对象

另外，js还为我们提供了如：Number、String、Boolean、Date、Math等，常用对象并为我们提供了许多的方法，大多与java中提供的功能类似，这里就不过多赘述了，需要的时候可以自行查阅。

四、浏览器对象模型(BOM)

浏览器对象模型是将浏览器的各个组成部分封装成对象，以方便代码操作

1.历史记录对象(History)

历史记录对象包含在当前窗口中访问过的url的记录，是窗口对象的一部分
可以直接使用history.来调用其属性和方法
历史记录对象的属性和方法非常简单，只有一个属性length和三个方法back()、forward()、go()，length属性是当前窗口历史记录的数目，back后退，forward前进，go正数前进负数后退

2.地址栏对象(Location)

地址栏对象包含当前的url信息，是窗口对象的一部分
可以直接使用location.调用其属性和方法，主要用于获取url信息和加载html文档(如刷新)

3.窗口对象(Window)

窗口对象window不需要创建，可以直接使用，窗口对象的方法可以省去window.直接使用
窗口对象的作用主要是创建弹窗(alert、prompt、confirm)、打开关闭窗口(open、close)、定时器方法(TimeOut、Interval)
窗口对象可以用于获取其他bom和dom对象

window.history
window.location
window.navigator
window.screen
window.documnet

4.浏览器对象(Navigator)

浏览器对象可以获取浏览器的名称、版本、语言，操作系统的信息等
需要使用的时候可以查相关手册这里不过多赘述

5.显示器屏幕对象(Screen)

显示器对象可以获取显示器的宽度、高度、分辨率、刷新率等信息
需要使用的时候可以查相关手册这里不过多赘述

五、文档对象模型(DOM)

DOM是用来控制html文档内容的对象，并且html会将标签全部封装成Element对象，所以可以通过一些方式对html文档的内容进行修改。
Dom对象分为三种：核心Dom对象、htmlDom对象和xmlDom对象
核心Dom对象包括Document对象、Element对象、Attribute对象、Text对象、Comment对象、Node对象

1.文档对象(Document)

文档对象主要用于获取元素对象和创建其他Dom对象
创建其他Dom对象都是通过方法document.createXXX()实现的(Attribute、Text、Comment、Node)，可以在html文档中创建一个对应的Dom对象

2.元素对象(Element)

对于Element对象，我们一般有两种操作，设置Element对象的属性和修改Element对象的内容。
Document对象为我们供了获取Element对象的方法最常见的是通过id值获取

var element = document.getElementById("id值");

获取的element对象可以修html文档元素的属性值

element.属性名 = 值;

创建不存在的属性或删除属性

element.addAttribute();
element.removeAttribute();

也可以修改html文档元素的内容(这种操作方法属于htmlDom)

element.innerHTML = "值";

类似的属性修改的函数还有很多可以查相关手册获取

3.节点对象(Node)

每个html文档都可以看作是一个Dom树，每一个对象都有其对应的层级

节点对象是其他Dom对象的父对象，这个概念有点类似与java中的object对象，所有Dom对象都是Node对象，提供了一套统一的操作，可以用于添加删除修改节点

4.事件

事件就是html元素被触发了某些特定的操作时执行特定的代码，事件的指定方式有两种：在html文档元素的属性中直接指定、在JavaScript代码中通过Dom对象指定

• 直接写在html属性中

<img src="img/1.jpg" onclick="alert(1);">
或调用函数
<img src="img/1.jpg" onclick="func();">

• 通过element对象绑定事件

var elemenet = document.gerElementById("id");
element.onclick = alert(1);
或调用函数
element.onclick = func();