JavaScript学习笔记

JavaScript学习笔记

浏览器执行JS步骤

  • 渲染引擎：用来解析HTML和CSS,俗称内核，比如chrome的浏览器的bink，老版本的webkt
  • JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome的V8

JS的组成

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

JS的书写位置

直接书写在元素的内部

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
</head>
<body>
    <!-- 行内JS方法，写道元素内部 -->
     <input type="button" value="点击我" onclick="alert('铛铛铛铛~我是一个弹窗')">
</body>
</html>

内嵌方法写在头部,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
    <!-- 内嵌方法,写在这里-->
     <script>
        alert('铛铛铛铛~我是一个弹窗');
     </script>
</head>
<body>
</body>
</html>

需要先新建一个.js文件，文件内容为

直接写这一句就可以了

1
alter('这是一个弹窗')

然后在html文件中直接引用

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始引言</title>
     <!-- 外部JS -->
     <script src="filename.js"></script>
</head>
<body>
</body>
</html>

顺带一提，JavaScript中代码行尾不需要加;分号，除非一行要写多个语句需要加分号，例如

语句1;语句2 |||||||||||||||||||||||||||||||||||||||||||||||||||||||最后一句不需要加分号的

注释

在JavaScript语法中，注释还是以html的注释方法一样的

单行注释

1
//注释内容

多行注释

1
2
3
/*
注释内容
*/

输入输出

1
2
3
4
5
6
7
8
9
10
<head>
    <title>输入输出语句</title>
    <script>
        //这是一个输入框
        prompt('请输入你的年龄');
    </script>
</head>
<body>
</body>
</html>

输出结果：

1
2
3
4
5
6
7
8
9
10
<head>
    <title>输入输出语句</title>
    <script>
        //alter弹出警示框
        alert('这是弹出框');
    </script>
</head>
<body>
</body>
</html>

弹出框的结果

1
2
3
4
5
6
7
8
9
10
<head>
    <title>输入输出语句</title>
    <script>
        //输出控制台 是给程序员看到的
        console.log('我是程序员能看到的');
    </script>
</head>
<body>
</body>
</html>

数据类型

javascript的数据类型是动态的，同时也意味着相同的变量可以用作不同的类型

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带

typeof可以用来判断数据类型

1
2
3
4
5
6
7
8
var x=6;    //为数字型，这是官方叫法
var z='嗨' //为字符串型
//例如
typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

极大或极小的数字可以通过科学（指数）计数法来书写：

1
2
var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

isNaN可以用来判断非数字，并且返回一个值，注意 一定要区分大小写！！

1
conosle.log(isNaN(15));

返回值false

字符串

定义变量，字符串需要用单引号或双引号包裹着

1
var a = '我是字符串'

length

length可以用来检测字符串的长度

1
2
var str ='我是\n字符串'
console.log(str.length)			//输出结果：6

字符串转义符

类似html里面的特殊字符，转义符都是以\开头的，

常用的转义符

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

字符串的拼接

1
2
console.log('这里是字符串1'+'字符串2')
console.log('1+1='+(1+1))

1输出结果：这里是字符串1字符串2

2输出结果：1+1=2

Boolean

布尔型boolean是可以参与计算的，即true为1，false为0，这样在后期进行判断的时候就会很方便

例如：

1
2
3
4
var bool1=true
var bool2=false
console.log(bool1+1)
console.log(bool2+1)

输出结果

1输出结果：2

2输出结果：1

undefined

一个未定义的变量未赋值，就是undefined未定义数据类型

如果手动给一个变量值为undefined，那么他也是未定义的数据类型

例如

1
var a = undefined

输出也是undefined

扩展：

1
2
console.log(a+'pink')   //输出结果是字符串拼接undpinkdefine
console.log(a+1)		//NaN  undefined和数字相加 最后的结果是NaN 表示 not a number不是一个数字

null

空值null

1
2
3
var c=null
console.log(c+'pink')//输出结果为nullpink
console.log(c+1)    // 空置加1结果还是1

数据类型的转换

转为字符串型

方式 说明 案例
toString() 转为字符串 var num=1;alert(num.toString())
String()强制转换 转为字符串 var num=1;alert(String(num))
加号拼接字符串 和字符串拼接的结果都是字符串 var num=1;alert(num+”我是字符串”) 
1
2
3
4
5
6
7
8
9
10
11
12
//转为字符串型    toString
var num=10
var str=num.toString()
console.log(num)
console.log(str)
console.log('我是num'+'变量，用typeof的返回值为'+typeof(num)+'型')
console.log('我是str'+'变量，用typeof的返回值为'+typeof(str)+'型')
//强制转换      String
var num2=8
console.log('我是String方法更改的变量结果，用sypeof检测类型为'+typeof(String(num2))+'型')
//加号拼接转换
console.log(typeof('加号拼接转换'+ num))        //结果string
点击查看控制台输出结果

转换为数字型

方式 说明 案例
parselnt(string)函数 讲string类型转成整数数值型 parselnt(‘78’)
parseFloat(string)函数 讲string类型转成浮点数数值型 parseFloat(‘78.21’)
Number()强制转换函数 讲string类型转换为数值型 Number(‘78.21’)
js隐式转换(- * /) 利用算数运算隐式转换为数值型 ‘12’-0

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//数字类型的转换，将字符型转换为数字型
//parseInt 方法
var age=prompt('请输入你的年龄')
console.log(parseInt(age))
console.log(parseInt('3.14'))       //取整，结果为3
console.log(parseInt('120px'))//parseInt功能强大，可以将px像素单位进行转换，会自动将后面的字母去掉
console.log(parseInt('rem120px'))       //结果是NaN，无法转换，主要功能是将数字型，转换为数值型，但是一个为字母就会报错
//parseFloat()  可以将字符型转换为数字型 可以取到小数/浮点数 部分
console.log(parseFloat('3.14'))
console.log(parseInt('120px'))  //120 会去掉px这个单位 和上面功能一样
console.log(parseFloat('rem120px'))  //NaN
//利用Number变量
var str='123'
console.log(Number(str))
console.log(Number('12'))
//利用算术运算 - * / 隐式转换
console.log('16'- 0)
console.log('2'* 2)

转换为布尔型

方式 说明 案例
Boolean()函数 其他类型转成布尔值 Boolean(‘true’)
  • 代表空、否定的值会被转换为false，如”、0、NaN、null、nudefined
  • 其余值都会被转换为true

如：

1
2
3
4
5
6
7
8
9
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
console.log(Boolean('12'));	//true
console.log(Boolean('你好吗'));	//true

运算符与表达式

运算符的优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ -- !
3 算术运算符 先* / % 后+ -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先&& 后 `
7 赋值运算符 =
8 逗号运算符 ,

if语句

if 的语法结构

1
2
3
if (条件表达式) {
    // 执行语句
}

执行思路 如果 if 里面的条件表达式结果为真 true 则执行大括号里面的 执行语句 

1
2
3
4
// 如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
if (3 < 5) {
    alert('沙漠骆驼');
}

if双分支语句

1
2
3
4
5
6
//  语法结构  if 如果  else 否则
 if (条件表达式) {
     // 执行语句1
 } else {
     // 执行语句2 
 }

执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2

1
2
3
4
5
6
var age = prompt('请输入您的年龄:');
if (age >= 18) {
    alert('我想带你去网吧偷耳机');
} else {
    alert('滚， 回家做作业去');
}

多分支语句

就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程

if else if语句是多分支语句

1
2
3
4
5
6
7
8
9
if (条件表达式1) {
    // 语句1;
} else if (条件表达式2) {
    // 语句2;
} else if (条件表达式3) {
    // 语句3;
} else {
    // 最后的语句;
}

执行思路
如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句
如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推
如果上面的所有条件表达式都不成立，则执行else 里面的语句

注意

  1. 多分支语句还是多选1 最后只能有一个语句执行
  2. else if 里面的条件理论上是可以任意多个的
  3. else if 中间有个空格了

判断成绩案例

    //  伪代码       按照从大到小判断的思路
    // 弹出prompt输入框，让用户输入分数（score），把这个值取过来保存到变量中
    // 使用多分支 if else if 语句来分别判断输出不同的值
    var score = prompt('请您输入分数:');
    if (score >= 90) {
        alert('宝贝，你是我的骄傲');
    } else if (score >= 80) {
        alert('宝贝，你已经很出色了');
    } else if (score >= 70) {
        alert('你要继续加油喽');
    } else if (score >= 60) {
        alert('孩子，你很危险');
    } else {
        alert('熊孩子，我不想和你说话，我只想用鞭子和你说话');
    }

例题判断闰年

算法：

  • ​ 能被4整除且不能整除100的为闰年（如2004年就是闰年，1901年不是闰年）或者能够被 400 整除的就是闰年
  • ​ 弹出prompt 输入框，让用户输入年份，把这个值取过来保存到变量中
  • ​ 使用 if 语句来判断是否是闰年，如果是闰年，就执行 if 大括号里面的输出语句，否则就执行 else里面的输出语句
  • ​ 一定要注意里面的且 && 还有或者 || 的写法，同时注意判断整除的方法是取余为 0
1
2
3
4
5
6
var year = prompt('请您输入年份：');
if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
    alert('您输入的年份是闰年');
} else {
    alert('您输入的年份是平年');
}

三元表达式

有三元运算符组成的式子我们称为三元表达式
++num 3 + 5 ? :
语法结构
条件表达式 ？ 表达式1 ： 表达式2
执行思路
如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值

1
2
3
4
5
6
7
8
var num = 10;
var result = num > 5 ? '是的' : '不是的'; // 我们知道表达式是有返回值的
console.log(result);
 if (num > 5) {
     result = '是的';
 } else {
     result = '不是的';
 }

案例数字补零

    //         用户输入0~59之间的一个数字
    // 如果数字小于10，则在这个数字前面补0,（加0 拼接） 否则  不做操作
    // 用一个变量接受这个返回值，输出
    var time = prompt('请您输入一个 0 ~ 59 之间的一个数字');
    // 三元表达式   表达式 ？ 表达式1 ：表达式2 
    var result = time < 10 ? '0' + time : time; //   把返回值赋值给一个变量
    alert(result);

swich语句

switch 语句也是多分支语句 也可以实现多选1

语法结构

switch 转换、开关 case 小例子或者选项的意思

1
2
3
4
5
6
7
8
9
10
11
switch (表达式) {
    case value1:
        执行语句1;
        break;
    case value2:
        执行语句2;
        break;
        ...
        default:
            执行最后的语句;
}

执行思路

利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上，就执行该case 里面的语句 如果都没有匹配上，那么执行 default里面的语句

代码验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
switch (8) {
            case 1:
                console.log('这是1');
                break;
            case 2:
                console.log('这是2');
                break;
            case 3:
                console.log('这是3');
                break;
            default:
                console.log('没有匹配结果');

        }

switch注意事项

  • 我们开发里面 表达式我们经常写成变量
  • 我们num 的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num === 1
  • break 如果当前的case里面没有break 则不会退出switch 是继续执行下一个case
1
2
3
4
5
6
7
8
9
10
var num = 1;
switch (num) {
    case 1:
        console.log(1);
    case 2:
        console.log(2);
    case 3:
        console.log(3);
        break;
}

查询水果案例

    //         弹出 prompt 输入框，让用户输入水果名称，把这个值取过来保存到变量中。
    // 将这个变量作为 switch 括号里面的表达式。
    // case 后面的值写几个不同的水果名称，注意一定要加引号 ，因为必须是全等匹配。
    // 弹出不同价格即可。同样注意每个 case 之后加上 break ，以便退出 switch 语句。
    // 将 default 设置为没有此水果。
    var fruit = prompt('请您输入查询的水果:');
    switch (fruit) {
        case '苹果':
            alert('苹果的价格是 3.5/斤');
            break;
        case '榴莲':
            alert('榴莲的价格是 35/斤');
            break;
        default:
            alert('没有此水果');
    }

循环

for循环

  • for 重复执行某些代码， 通常跟计数有关系

    for 语法结构

    1
    2
    3
    for (初始化变量; 条件表达式; 操作表达式) {
             // 循环体
         }

初始化变量 就是用var 声明的一个普通变量， 通常用于作为计数器使用

条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件

操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）

代码体验

我们重复打印100遍 你好

1
2
3
for (var i = 1; i <= 100; i++) {
            console.log('你好吗');
        }

while循环

while 循环语法结构

while 当…的时候

1
2
3
while (条件表达式) {
    // 循环体
}

执行思路

当条件表达式结果为true 则执行循环体 否则 退出循环

代码验证

1
2
3
4
5
var num = 1;
        while (num <= 100) {
            console.log('好啊有');
            num++;
        }

里面应该也有计数器 初始化变量，应该也有操作表达式 完成计数器的更新 防止死循环

do while循环

do while 循环 语法结构

1
2
3
do {
    // 循环体
} while (条件表达式)

执行思路 跟while不同的地方在于 do while 先执行一次循环体 在判断条件 如果条件表达式结果为真，则继续执行循环体，否则退出循环，do while 循环体至少执行一次
代码验证

    var i = 1;
    do {
        console.log('how are you?');
        i++;
    } while (i <= 100)

do while循环案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 1. 打印人的一生，从1岁到100岁
var i = 1;
do {
    console.log('这个人今年' + i + '岁了');
    i++;
} while (i <= 100)
// 2. 计算 1 ~ 100 之间所有整数的和
var sum = 0;
var j = 1;
do {
    sum += j;
    j++;
} while (j <= 100)
console.log(sum);

// 3. 弹出一个提示框， 你爱我吗？  如果输入我爱你，就提示结束，否则，一直询问。
do {
    var message = prompt('你爱我吗?');
} while (message !== '我爱你')
alert('我也爱你啊');

continue

continue 关键字 退出本次（当前次的循环） 继续执行剩余次数循环

1
2
3
4
5
6
7
for (var i = 1; i <= 5; i++) {
    if (i == 3) {
        continue; // 只要遇见 continue就退出本次循环 直接跳到 i++
    }
    console.log('我正在吃第' + i + '个包子');

}

求1~100 之间， 除了能被7整除之外的整数和 

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

break

    // break 退出整个循环
    for (var i = 1; i <= 5; i++) {
        if (i == 3) {
            break;
        }
        console.log('我正在吃第' + i + '个包子');
    }

数组

数组(Array) ：就是一组数据的集合 存储在单个变量下的优雅方式

利用new 创建数组

1
var arr = new Array(); // 创建了一个空的数组

利用数组字面量创建数组 []

1
2
3
4
5
6
7
8
9
10
var arr = []; // 创建了一个空的数组
var arr1 = [1, 2, 'pink老师', true];
console.log(arr1);
console.log(arr1[2]); // pink老师
console.log(arr1[3]); // true
var arr2 = ['迪丽热巴', '古丽扎娜', '佟丽丫丫'];
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]); // 因为没有这个数组元素 所以输出的结果是 undefined
  • 我们数组里面的数据一定用逗号分隔
  • 数组里面的数据 比如1,2， 我们称为数组元素
  • 获取数组元素 格式 数组名[索引号] 索引号从 0开始

遍历数组

​ 遍历数组：就是把数组的元素从头到尾访问一次

    var arr = ['red', 'green', 'blue'];
    for (var i = 0; i < 3; i++) {
        console.log(arr[i]);
    }

因为我们的数组索引号从0开始 ，所以 i 必须从 0开始 i < 3
输出的时候 arr[i] i 计数器当索引号来用

数组长度

数组长度 数组名.length

数组的长度是元素个数 不要跟索引号混淆
arr.length 动态监测数组元素的个数

1
2
3
4
5
6
7
8
var arr = ['关羽', '张飞', '马超', '赵云', '黄忠', '刘备', '姜维', 'pink'];
for (var i = 0; i < 7; i++) {
    console.log(arr[i]);
}
console.log(arr.length);
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

计算数组的和以及平均值

需求：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。

  1. 声明一个求和变量 sum。
  2. 遍历这个数组，把里面每个数组元素加到 sum 里面。
  3. 用求和变量 sum 除以数组的长度就可以得到数组的平均值。
1
2
3
4
5
6
7
8
var arr = [2, 6, 1, 7, 4];
var sum = 0;
var average = 0;
for (var i = 0; i < arr.length; i++) {
    sum += arr[i]; // 我们加的是数组元素 arr[i] 不是计数器 i
}
average = sum / arr.length;
console.log(sum, average); // 想要输出多个变量，用逗号分隔即可

求数组最大值

求数组[2,6,1,77,52,25,7]中的最大值

  1. 声明一个保存最大元素的变量 max。
  2. 默认最大值可以取数组中的第一个元素。
  3. 遍历这个数组，把里面每个数组元素和 max 相比较。
  4. 如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
  5. 最后输出这个 max
1
2
3
4
5
6
7
8
var arr = [2, 6, 1, 77, 52, 25, 7, 99];
var max = arr[0];
for (var i = 1; i < arr.length; i++) {
    if (arr[i] > max) {
        max = arr[i];
    }
}
console.log('该数组里面的最大值是：' + max);

数组转化为字符串

需求：将数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串，并且用 | 或其他符号分割

  1. 需要一个新变量用于存放转换完的字符串 str。
  2. 遍历原来的数组，分别把里面数据取出来，加到字符串里面。
  3. 同时在后面多加一个分隔符
1
2
3
4
5
6
7
var arr = ['red', 'green', 'blue', 'pink'];
var str = '';
var sep = '*';
for (var i = 0; i < arr.length; i++) {
    str += arr[i] + sep;
}
console.log(str);

新增数组元素

新增数组元素 修改length长度 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 1. 新增数组元素 修改length长度 
var arr = ['red', 'green', 'blue'];
console.log(arr.length);
arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 
console.log(arr);
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined

// 2. 新增数组元素 修改索引号 追加数组元素
var arr1 = ['red', 'green', 'blue'];
arr1[3] = 'pink';
console.log(arr1);
arr1[4] = 'hotpink';
console.log(arr1);
arr1[0] = 'yellow'; // 这里是替换原来的数组元素
console.log(arr1);
arr1 = '有点意思';
console.log(arr1); // 不要直接给 数组名赋值 否则里面的数组元素都没有了

数组存放十个值

新建一个数组，里面存放10个整数（ 1~10）
核心原理：使用循环来追加数组。

  1. 声明一个空数组 arr。
  2. 循环中的计数器 i 可以作为数组元素存入。
  3. 由于数组的索引号是从0开始的， 因此计数器从 0 开始更合适，存入的数组元素要+1。
1
2
3
4
5
6
var arr = [];
for (var i = 0; i < 100; i++) {
    // arr = i; 不要直接给数组名赋值 否则以前的元素都没了
    arr[i] = i + 1;
}
console.log(arr);

筛选数组

将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组。

  1. 声明一个新的数组用于存放新数据newArr。
  2. 遍历原来的旧数组， 找出大于等于 10 的元素。
  3. 依次追加给新数组 newArr。
1
2
3
4
5
6
7
8
9
10
11
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 新数组索引号应该从0开始 依次递增
        newArr[j] = arr[i];
        j++;
    }
}
console.log(newArr);
1
2
3
4
5
6
7
8
9
10
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
// 刚开始 newArr.length 就是 0
for (var i = 0; i < arr.length; i++) {
    if (arr[i] >= 10) {
        // 新数组索引号应该从0开始 依次递增
        newArr[newArr.length] = arr[i];
    }
}
console.log(newArr);