JavaScript是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。
JavaScript是一种嵌入式语言。它本身提供的核心语法不算很多

JS语句、标识符

语句

JS程序的单位是行，也就是一行一行地执行。一般情况下，每一行就是一个语句

1
var num = 10;

语句以分号结尾，一个分号就表示一个语句结束

标识符

标识符指的是用来识别各种值的合法名称。最常见的标识符就是变量名
标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头

温馨提示
中文是合法的标识符，可以用作变量名（不推荐）

JS保留关键字

以下关键字不需要强行记忆！

JS有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

变量

1
2
var num = 10;
num = 20;   //变量名num可以重复声明

变量提升

JS引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行的运行。这样的结果就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升

1
2
console.log(num);
var num = 10;       //结果是什么呢？    undefined

JS引入到文件

嵌入到HTML文件中

1
2
3
4
5
<body>
    <script>
        var age = 20
    </script>
</body>

引入本地独立JS文件

1
2
3
4
<body>
    <script type="text/javascript" src="">
    </script>
</body>

引入网络来源文件

1
2
3
4
<body>
    <script
src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">  </script>
</body>

JS注释与常见输出方式

JavaScript注释

单行注释，用//起头；多行注释，放在/和/之间。

1
2
3
4
5
6
7
//这是单行注释

/*
这是
多行
注释
*/

嵌入在HTML文件中的注释

1
<!--注释-->

温馨提示
注释的快捷键：ctrl + /

JS输出

1
2
3
4
5
6
7
8
//在浏览器中弹出一个对话框,然后把要输出的内容展示出来,alert都是把要输出的内容首先转换为字符串然后在输出的

alert("要输出的内容");

document.write("要输出的内容");

//在控制台输出内容
console.log("要输出的内容");

数据类型

数据类型分类

原始类型(基础类型)

1
2
3
var age = 20;
var name ="111";
var learn =true;

合成类型(复合类型)

1
2
3
4
5
var user={
name:"111",
age:20,
learn:true
}

温馨提示
至于undefined和null，一般将它们看成两个特殊值。

运算符

typeof运算符

JS有三种方法，可以确定一个值到底是什么类型。而我们现在需要接触到的就是typeof

1
2
3
4
5
6
7
typeof 123      //"number"  数值返回number

typeof'123'     //"string"  字符串返回string

typeof false    //"boolean" 布尔值返回boolean

typeof {}       //"object"  对象返回object

unll和undefined的区别
null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。

运算符之算术运算符

加减乘除运算符

1
2
3
4
10 + 10;  //20
100 - 10; //90
10 * 2;   //20
10 / 5; 2

余数运算符

1
13 % 5  //3

自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1

1
2
3
4
var x = 1;
var y = 1;
++x     //2
--y     //0

注意:
就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

1
2
3
var x = 10;
var y = 20;
console.log(x++ + y);       //30

运算符之赋值运算符

赋值运算符用于给变量赋值
最常见的赋值运算符，当然就是等号（=）

1
2
3
4
//将1赋值给变量x
var x = 1;
//将变量y的值赋值给变量x
var x = y;

赋值运算符还可以与其他运算符结合，形成变体。下面是与算术运算符的结合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//等同于x=x+y
x += y

//等同于x=x-y
x -= y

//等同于x=x*y
x *= y

//等同于x=x/y
x /= y

//等同于x=x%y
x %= y

运算符之比较运算符

1
2 > 1       //true

JS一共提供了8个比较运算符。

比较运算符 描述
< 小于运算符
> 大于运算符
<= 小于或等于运算符
>= 大于或等于运算符
== 相等运算符
=== 严格相等运算符
!= 不相等运算符
!== 严格不相等运算符

==和===的区别
==：双等比较值
===：三等比较值和类型

运算符之布尔运算符

取反运算符（!）

布尔值取反

1
2
!true       //false
!false      //true

非布尔值取反

对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。

温馨提示
undefined
null
false
0
NaN
空字符串（’’）

1
2
3
4
5
6
7
8
!undefined      //true
!null       //true
!0          //true
!NaN        //true
!""         //true

!54         //false
!'hello'    //false

且运算符（&&）

多个条件都要满足

如果一个人一直做好事，突然有一天做了一件坏事，那么人们会认为这个人很虚伪，以前说不定都是装的！对这个人不在认可

1
console.log(10 < 20 && 10 > 5);     //true

或运算符（||）

满足一个条件即可

如果一个人一直做坏事，突然有一天做了一件好事，那么人们会认为这个人其实还不错，以前也许是另有原因！对这个人突然就认可了

1
console.log(10 < 20 || 10 < 5);     //true

条件语句之if语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript的两个特殊值，true表示真，false表示伪。

if语句语法规范

1
2
3
if(布尔值){
    语句;
}

需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中

1
2
3
4
5
var m = 3;
if(m===3){
    m++;
}
console.log(m);     //4

注意
if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（===）和相等运算符（==）。尤其是赋值表达式不具有比较作用。

1
2
3
4
5
var x = 1;
var y = 2;
if(x=y){
    console.log(x);
}

条件语句之if…else

if…else基本结构

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

1
2
3
4
5
if(m===3){
    //满足条件时，执行的语句
}else{
    //不满足条件时，执行的语句
}

多个if…else连接

1
2
3
4
5
6
7
8
9
if(m===0){
    //...
}elseif(m===1){
    //...
}elseif(m===2){
    //...
}else{
    //...
}

if…else嵌套

1
2
3
4
5
6
7
8
9
10
11
var eat = true;
var food = "猪肉炖粉条";
if(eat){
    if(food=="双椒鱼头"){
        console.log('双椒鱼头');
    } else {
        console.log("猪肉炖粉条");
    }
} else {
    console.log('不吃了');
}

else代码块总是与离自己最近的那个if语句配对。

条件语句之switch

多个if…else连在一起使用的时候，可以转为使用更方便的switch结构 

1
2
3
4
5
6
7
8
9
10
switch(fruit){
    case"banana":
        //...
        break;
    case"apple":
        //...
        break;
    default:
        //...
}

需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

1
2
3
4
5
6
7
8
9
10
11
12
var x = 1;
switch(x){
    case 1:
        console.log('x等于1');
    case 2:
        console.log('x等于2');
    default:
        console.log('x等于其他值');
}
//x等于1
//x等于2
//x等于其他值

三元运算符

JavaScript还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。 

1
(条件) ? 表达式1 : 表达式2

这个三元运算符可以看为if…else…的简写形式，因此可以用于多种场合。

判断一个整数是奇数与偶数

if…else

1
2
3
4
5
6
var n = 100;
if(n%2===0){
    console.log("偶数");
}else{
    console.log("奇数");
}

三元运算符

1
2
var n= 100;
n%2 === 0 ? '偶数' : '奇数'

循环语句之for

循环语句用于重复执行某个操作
for语句就是循环命令，可以指定循环的起点、终点和终止条件。

1
2
3
for (初始化表达式; 条件; 迭代因子){
    语句
}

for语句后面的括号里面，有三个表达式。

  • 初始化表达式：确定循环变量的初始值，只在循环开始时执行一次。
  • 布尔表达式：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
  • 迭代因子：每轮循环的最后一个操作，通常用来递增循环变量。
    1
    2
    3
    4
    var x = 3;
    for (var i=0; i<x; i++){
        console.log(i);
    }
    for语句的三个表达式，可以省略任何一个，也可以全部省略。
    1
    2
    3
    for( ; ; ){
        console.log('HelloWorld');
    }

    注意
    如果三个都省略，结果就导致了一个无限循环（死循环）

循环语句之while

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

1
2
3
while(条件){
    语句;
}

break语句和continue语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行

break

break语句用于跳出代码块或循环

1
2
3
4
5
6
for (var i=0; i<5; i++){
    if(i===3){
        break;
    }
    console.log(i);
}

continue

continue语句用于终止本次循环，继续下一次循环

1
2
3
4
5
6
for (var i=0; i<5; i++){
    if(i===3){
        continue;
    }
    console.log(i);
}

字符串

字符串方法_charAt()

charAt方法返回指定位置的字符，参数是从 0 开始编号的

1
2
3
4
var s = new String ('itabcd');

s.charAt(1)             //"t"
s.charAt(s.length - 1)        //"d"

如果参数为负数，或大于等于字符串的长度，charAt返回空字符串

1
2
3
'innnn'.charAt(-1)      //""

'innnn'.charAt(9)       //""

字符串方法_concat()

concat方法用于连接两个字符串，返回一个新字符串，不改变原字符串

1
2
3
4
5
6
7
var s1 = 'it';
var s2 = 'sx';

s1.concat(s2)       //"itsx"
s1      //"it"

'sx'.concat('it','bj')   //"sxitbj"     多个参数

如果参数不是字符串，concat方法会将其先转为字符串，然后再连接

1
2
3
4
var one = 1;
var two = 2;
var three = '3';
''.concat(one,two,three)        //"123"

字符串方法_substring()

substring方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）

1
'itabcd'.substring(0,2)     //"it"

如果省略第二个参数，则表示子字符串一直到原字符串的结束

1
'itabcd'.substring(2)       //"abcd"

如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置

1
2
3
'itabcd122'.substring(9,2)      //"abcd122"
//等同于
'itabcd122'.substring(2,9)      //"abcd122"

如果参数是负数，substring方法会自动将负数转为0

1
2
'itabcd122'.substring(-3)       //"itabcd122"
'itabcd122'.substring(2,-3)     //"it"

字符串方法_substr()

substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟substring方法的作用相同
substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度

1
'itabcd122'.substr(2,7);    //abcd122

如果省略第二个参数，则表示子字符串一直到原字符串的结束

1
'itabcd122'.substr(2)   //"abcd122"

如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串

1
2
'itabcd122'.substr(-7)      //"itabcd122"
'itabcd122'.substr(4,-1)    //""

字符串方法_indexOf()

indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配

1
2
'helloworld'.indexOf('o')       //4
'itabcd122'.indexOf('sxt')      //-1

indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配

1
'helloworld'.indexOf('o',6)     //7

字符串方法_trim()

trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串

1
2
'helloworld'.trim()
//"helloworld"

去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）

1
'\r\nitabcd122\t'.trim()        //'itabcd122'

字符串方法_split()

split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组

1
'it|sx|bahaAAn'.split('|')  //["it","sx","bahaAAn"]

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。

1
'a|b|c'.split('')       //["a","|","b","|","c"]

如果省略参数，则返回数组的唯一成员就是原字符串

1
'it|sx|bahaAAn'.split()     //[it|sx|bahaAAn]

split方法还可以接受第二个参数，限定返回数组的最大成员数。

函数

函数是一段代码，它可以被重复调用。

函数的声明

function命令：function命令声明的代码区块，就是一个函数。
function命令后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。

1
2
3
function print(s){
    console.log(s);
}

函数名的提升

JS引擎将函数名视同变量名，所以采用function命令声明函数时，整个函数会像变量声明一样，被提升到代码头部

1
2
3
add();

function add(){}

函数参数

函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数

1
2
3
4
5
6
function square(x){
    console.log(x*x);
}

square(2)   //4
square(3)   //9

函数返回值

JS函数提供两个接口实现与外界的交互，其中参数作为入口，接收外界信息；返回值作为出口，把运算结果反馈给外界

1
2
3
4
5
6
function getName(name){
    return name;
}

var myName = getName("it")
console.log(myName);    //it

温馨提示
return后面不能在添加任何代码，因为不会执行

对象概述

什么是对象？对象（object）是JS语言的核心概念，也是最重要的数据类型
简单说，对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合

1
2
3
4
var user={
    name:'itbaizhan',
    age:'13'
};

对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型。如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用

1
2
3
4
5
6
7
var user ={
    getName: function (name){
        return name;
    }
};

user.getName("it")      //it

如果属性的值还是一个对象，就形成了链式引用

1
2
3
4
5
6
7
8
9
10
var user ={
    name:"it",
    age:13,
    container:{
        frontEnd:["Web前端","Android","iOS"],
        backEnd:["Java","Python"]
    }
}

user.container.frontEnd     //["Web前端","Android","iOS"]

Math对象

Math是JavaScript的原生对象，提供各种数学功能。

Math.abs()

Math.abs()方法返回参数值的绝对值

1
2
Math.abs(1)         //1
Math.abs(-1)        //1

Math.max()，Math.min()

Math.max方法返回参数之中最大的那个值，Math.min返回最小的那个值。如果参数为空,Math.min返回Infinity,Math.max返回-Infinity。

1
2
3
4
Math.max(2,-1,5)        //5
Math.min(2,-1,5)        //-1
Math.min()              //Infinity
Math.max()              //-Infinity

Math.floor()，Math.ceil()

Math.floor方法返回小于参数值的最大整数

1
2
Math.floor(3.2)         //3
Math.floor(-3.2)        //-4

Math.ceil方法返回大于参数值的最小整数

1
2
Math.ceil(3.2)      //4
Math.ceil(-3.2)     //-3

Math.random()

Math.random()返回0到1之间的一个伪随机数，可能等于0，但是一定小于1

1
Math.random()       //0.28525367438365223

任意范围的随机数生成函数如下

1
2
3
4
5
function getRandomArbitrary(min,max){
    return Math.random() * (max-min)+min;
}

getRandomArbitrary(5,10)

Date对象

Date对象是JS原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）

Date.now()

Date.now方法返回当前时间距离时间零点（1970年1月1日00:00:00UTC）的毫秒数，相当于Unix时间戳乘以1000

1
Date.now();         //1635216733395

Date对象提供了一系列get*方法，用来获取实例对象某个方面的值

实例方法get类
getTime()：返回实例距离1970年1月1日00:00:00的毫秒数
getDate()：返回实例对象对应每个月的几号（从1开始）
getDay()：返回星期几，星期日为0，星期一为1，以此类推
getYear()：返回距离1900的年数
getFullYear()：返回四位的年份
getMonth()：返回月份（0表示1月，11表示12月）
getHours()：返回小时（0-23）
getMilliseconds()：返回毫秒（0-999）
getMinutes()：返回分钟（0-59）
getSeconds()：返回秒（0-59）

1
2
3
4
5
var d = newDate('January 6,2026');
d.getDate()         //6
d.getMonth()        //0 
d.getYear()         //126
d.getFullYear()     //2026

编写函数获得本年度剩余天数

1
2
3
4
5
6
function leftDays(){
    var today = newDate();
    var endYear = newDate(today.getFullYear(),11,31,23,59,59,999);
    var msPerDay = 24*60*60*1000;
    return Math.round((endYear.getTime() - today.getTime()) / msPerDay);
}

DOM概述

DOM是JavaScript操作网页的接口它的作用是将网页转为一个JavaScript对象，从而可以用脚本进行各种操作

节点

DOM的最小组成单位叫做节点（node）。文档的树形结构（DOM树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子

节点的类型有七种
Document：整个文档树的顶层节点
DocumentType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的属性（比如class=”right”）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是DOM树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树

除了根节点，其他节点都有三种层级关系
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点

Node.nodeType属性

不同节点的nodeType属性值和对应的常量如下

文档节点（document）：9，对应常量
Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量
Node.DOCUMENT_FRAGMENT_NODE

1
2
document.nodeType       //9
document.nodeType === Node.DOCUMENT_NODE        //true