[关闭]
@artman328 2022-06-29T01:05:17.000000Z 字数 24323 阅读 2303

零基础学习 JavaScript

javascript

第一讲 JavaScript 语言简介

1.1 什么是 JavaScript 语言

1.2 用 JavaScript 语言能做什么？

1.2.1 JavaScript 语言可做以下开发

1.2.2 工作机会

目前，熟练的 JavaScript 程序员在北上广深的月薪收入大约为 20k ~ 40k 之间。

1.3 怎么学习？

1.4 学习资源

https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript

第二讲 学习环境准备

2.1 解释器环境准备

2.2 编程环境准备

第三讲 学习项目的建立

3.1 HTML 文档简介

HTML 文档即网页文档，它是：


3.1.1 HTML 标签及其内容


3.1.2 CSS 样式定义（HTML文档头部或外部文件）

  1. 选择器 {
  3.     样式属性1：值1；
  5.     样式属性2：值2；
  7.     …
  9. }

选择器：标签名，#id号, .类名，...

样式属性：color, margin, padding, background, ...

3.1.3 程序（HTML 文档内部或外部文件）

3.2 HTML 文档的总体架构

3.3 JavaScript 程序输出

第四讲 关于类和对象

4.1 什么是类和对象

类和对象是当今编程语言的重要概念。

类就是某类事物，如：学生、发票、会议等。

对象就是任何具体的事物，如：某个学生、某张发票、某次会议等。

4.2 类的属性和行为

某一类事物都有共同的属性，如：学生，共同的属性有：学号、姓名、性别、出生日期等。

某一类事物都有共同的行为，如：学生，共同和行为有：学习、唱歌、考试等。

在人类社会中，人与人之间、组织与组织之间的互动完成了各种事务的管理。在编程中，将所有事物都超自然化（赋予生命），让它们之间互动来完成事务的管理，叫面向对象的编程方法。

因此，会议作为一类“活”的事物，它就有了自己的行为：“发邀请函”、“统计参会人数”、“开幕”、“闭幕”等。

想像一个管理程序，其中一个叫做 hr 的部门对象，它把一个叫做 liming 的 “人员” 对象 “加入（行为）” 到自己的 “全体人员（属性）” 集合对象中，并 “保存（行为）” 到数据库……

在编程术语中，对象的行为又叫方法。

4.3 对象的属性读写

读取一个对象的属性，语法格式是：

  1. // 获取对象属性值，格式：对象名.属性名
  2. billy.name

写入一个对象的属性：

  1. billy.name = "Billy"

4.4 对象的行为的执行

让一个对象实施行为（执行方法）的语法格式是：

  1. // 对象名.行为名(参数…)
  2. billy.say("Hello!");
  3. billy.fullName();

4.5 生成新对象

从一个类（或构造函数）生成一个对象的方法是：

  1. new Student(); // 生成一个新的学生对象

4. 6 浏览器的 Console 对象

Console 是浏览器内的控制台，给编程人员提供与浏览器互动、调试程序的平台。编程人员往往向控制台输出各种信息以便于调试程序。

常用方法：

  1. console.log("要输出的信息内容")
  3. console.warn("要输出的警告内容")
  5. console.error("要输出的错误内容")
  7. console.table(要以表格形式输出的集合数据)

参阅：https://developer.mozilla.org/en-US/docs/Web/API/Console

4.7 document 对象

document 是一个代表网页对象。

常用方法：

  1. document.getElementById(“标签的id号”) // 获取特定 id 号的标签对象
  3. document.write("写到网页<body>标签内的内容") // 向页面写内容

4.8 Element 对象

Element 对象代表网页中的某个标签。

常用属性：

  1. Element.innerText // 标签内文本
  3. Element.innerHTML // 标签内的下级  html 标签及其内容

第五讲 语句、变量、常量、基本数据类型及其运算

5.1 语句

语句是计算机程序的基本单元。程序由一条条语句构成。

JavaScript 的语句结束标志是“;”（英文分号）。标准规定，结束标志可以省略，解释器在读入程序时会自动加上。但为了避免某些情况下产生歧义，建议尽可能使用结束标志。

5.2 语句块

5.3 注释

5.4 变量

计算机程序的主要功能是处理数据。变量是一个被命名的装载数据的“容器”（计算机内存空间）。因其装载的数据可根据要求改变，因此叫变量。

要使用变量，需要事先声明。

5.4.1 变量声明

声明变量的基本语句：

  1. var 变量名;  // (老标准，只能在函数内隐蔽，其它语句块内全局可见。不推荐使用)
  2. // 或：
  3. let 变量名；（语句块内隐藏，外部不可见）
  5. // **注意：var、let 和 变量名之间至少一个空格。**
  7. // 例如：
  8. let name;
  9. // 同时声明多个变量
  10. let name, gender, age;

5.4.2 变量赋值

  1. // 格式：变量名=表达式 （=号两旁可加空格便于阅读）
  2. // 其中的表达式会得到一个具体值（或对象、函数等）
  3. // 如：
  4. let name, gender, age;
  5. name = "Billy";
  6. gender = "Male";
  7. age = 30;
  9. let sum;
  10. sum = 100 + 200 + 300；
  12. let tbody; 
  13. tbody = document.getElementById("app");

5.4.3 声明时赋值

  1. let name = 'Billy', gender = 'Male', age = 30;
  2. let sum = 100 + 200 + 300;
  3. let tbody = document.getElementById("app");

5.5 常量

常量也是一个被命名的装载数据的“容器”（计算机内存空间）。但因其装载的数据不可再改变，因此叫常量。

  1. // 格式：const 常量名 = 值；
  2. // 如：
  3. const PI = 3.14;
  4. const AGE_MAX = 30;
  5. // 注意：常量在声明时需要即刻赋值。常量名通常用大写字母，便于与变量区别。

5.6 标识符（常量名、变量名、函数名等）命名规则

5.7 基本数据类型

用 typeof 操作符获取数据类型

5.7.1 数字

表示法：

100，2.33，1.6E+3（或 1.6e+3, 即：
），0b1001，0o2377，0x23ef, ...

特殊值：Infinity（正无穷）, -Infinity（负无穷）, NaN（Not a Number: 不是一个数值）

  1. let n = 1.6e-3;
  2. typeof n // "number"
  4. n = 10/0 // Infinity
  5. typeof n // "number"
  6. n = -10/0 // -Infinity
  7. typeof n // "number"
  8. n = 12/"abc" // NaN
  9. typeof n // "number"

5.7.2 字符串

表示法：

'Hello', "OK", `My name is ${name}`, "I'm a programmer.", "\"Yes.\", he said." 

  1. let s = "\"Yes.\", he said";
  2. // 或者
  3. let s = '"Yes.", he said.';
  4. typeof s // "string"

5.7.3 真与假

表示法：true（真）, false（假）

  1. let finished = false;
  2. typeof finished // "boolean"

5.7.4 未定义

表示法: undefined

  1. let x;
  2. typeof x // "undefined"
  3. x = true;
  4. typeof x // "boolean"

5.7.5 空值

表示法：null

  1. let y = null;
  2. typeof y // "object", 空值是一个空对象，它没有任何属性和方法。

5.8 数据的基本运算

5.8.1 算术运算

运算符 含义 例子
+ 加法运算 x+y
- 减法运算 x-y
* 乘法运算 x*y
/ 除法运算 x/y
% 取模运算（求余运算） x%y
++ 自增1 x++ 或 ++x
相当于 x=x+1
-- 自减1 x-- 或 --x
相当于 x=x-1

5.8.2 关系运算

关系运算的结果是逻辑值：true 或 false。

运算符 含义 例子
< 小于 x
> 大于 x>y
<= 小于等于 x<=y
>= 大于等于 x>=y
== 等于 x==y
!= 不等于 x!=y
=== 严格等于 x===y
!== 严格不等 x!==y

5.8.3 逻辑运算

下表中的 a 或 b 可以是逻辑值，也可以是关系运算表达式。

运算符 含义 例子 规则
&& 与 a && b 全真才真
|| 或 a || b 全假才假
! 非 !a 取反

注意： && 比 || 有较高的运算优先级。

第六讲 条件、分支和循环语句

6.1 条件

6.1.1 if ...

含义：如果……
示例程序1：
判断一个数是否是偶数，是则输出信息。

  1. let i = 99;
  2. if ( i % 2 === 0 ){  // if: 如果 
  3.   console.log(`i 是偶数：${i}`);
  4. }

练习1：
判断一个数是否处于100到999之间，是则输出信息。

6.1.2 if … else ...

含义：如果……否则……
示例程序2：
判断一个数是否是偶数，根据结果输出信息。

  1. let i = 100;
  2. if ( i % 2 === 0 ){
  3.   console.log(`i 是偶数：${i}`);
  4. }
  5. else{  // else: 否则
  6.   console.log(`i 是奇数：${i}`);
  7. }

练习2：
判断两个数之和是否在100到999之间，根据结果输出相应信息。

6.1.3 if … else if … else ...

含义：如果……否则如果……否则……
示例程序3：
根据小车档位，判断车处于什么模式下。

  1. let op = 'D';
  2. if ( op == 'D' ){
  3.   console.log(`${op}: 自动档模式！`);
  4. }
  5. else if ( op == 'P' ){
  6.   console.log(`${op}: 停车模式！`);
  7. }
  8. else if ( op == 'R' ) {
  9.   console.log(`${op}: 倒车模式！`);
  10. }
  11. else {
  12.   console.log(`${op}: 其它模式！`);
  13. }

练习3：
有一个数表示整点时刻：0～23点，请根据这个数，判断是否是凌晨[0～8）、上午[8～12）、下午[12～18）和晚上[18～0）点。根据结果输出相应信息。

6.1.4 ? 条件选择

  1. // 条件判断？值1 ：值2，条件为真，返回值1，否则返回值2
  2. let age = 18;
  3. let result = (age>=18)?'adult':'child'; // 'adult'
  4. // 等同于
  5. let result;
  6. if(age>=18){
  7.   result = 'adult';
  8. }
  9. else{
  10.   result = 'child';
  11. }

6.2 分支 switch … case ...

  1. let op = 'D';
  2. switch(op) {  // switch: 切换
  3.   case 'D':  // case: 一旦
  4.     console.log(`${op}: 自动档模式！`);
  5.     break;
  6.   case 'P':
  7.     console.log(`${op}: 停车模式！`);
  8.     break;
  9.   case 'R':
  10.     console.log(`${op}: 倒车模式！`);
  11.     break;
  12.   default:
  13.     console.log(`${op}: 其它模式！`);
  14. }

如果满足一条case，会从其下的第一条语句开始执行，而不管随后的语句是否在另外的case之下，但一碰到 break 语句整个switch 语句就结束（跳出语句块）。

6.3 循环

6.3.1 for

  1. // 输出 0 到 9：
  2. for (let i=0; i<10; i++){  // for: 针对
  3.   console.log(i);
  4. }
  6. // 输出 0 到 9 的偶数：
  7. for (let i=0; i<10; i++){
  8.   if( i%2>0 ){
  9.     continue; // 不继续往下，回到 for 处重新开始下一轮。continue: 断续
  10.   }
  11.   console.log(i);
  12. }
  14. // 遇到第一个被3整除的非零整数时结束循环
  15. for (let i=0; i<10; i++){
  16.   if( i>0 && i%3==0 ){
  17.     break; // 不再执行循环体内剩下的语句，直接跳出循环。break: 打断
  18.   }
  19.   console.log(i);
  20. }

6.3.2 while (检查条件再做)

  1. let count = 9;
  2. while(count>0){    // while: 在 ... 期间
  3.   console.log(count);
  4.   count --;
  5. }
  6. // 同样可用 continue 和 break 语句

6.3.3 do … while （做了再检查条件）

  1. let count = 9;
  2. do {   // do: 做
  3.   console.log(count);
  4.   count --;
  5. } while(count>0);

6.3.4 从多重循环中 continue 或 break

  1. loop1:
  2. for (i = 0; i < 3; i++) {      //第一个循环加了标签： "loop1"
  3.    loop2:
  4.    for (j = 0; j < 3; j++) {   //第二个循环加了标签： "loop2"
  5.       if (i === 1 && j === 1) {
  6.          continue loop1;  // 从 loop1 循环开始处重新开始
  7.       }
  8.       if ( j === 2 ){
  9.         continue loop2;  // 从 loop2 循环开始处重新开始
  10.       }
  11.       if (i === 2 && j === 1){
  12.         break loop1;  // 跳出 loop1 循环
  13.       }
  14.       console.log(`i = ${i}, j = ${j}`);
  15.    }
  16. }

第七讲 函数类型与对象类型

6.1 函数类型

函数是完成特定任务的程序段，它可接受输入数据，也可给出（返回）结果数据。

6.1.1 函数定义

  1. // function: 功能，函数
  2. function getPayment (price,discount=0.9){ // price, discount 叫做参数。0.9 是 discount 的默认值
  3.   return price * discount + 1;
  4. }
  6. function sayHello(name){
  7.   console.log(`Hello, ${name}.`);
  8. }

6.1.2 执行函数

  1. let payment = getPayment(1000,0.85); // 851
  2. // or 
  3. let payment = getPayment(1000); // 901，没有传入 discount, 采用默认值 0.9
  5. sayHello("Tracy") // Hello, Tracy.

函数可被赋予一个变量：

  1. let getPayment = function (price,discount){
  2.   return price * discount + 1;
  3. }
  4. // 或者写成
  5. let getPayment = (price,discount) => {return price * discount + 1;}
  6. // 函数体只有一句 return 的话，也可写成
  7. let getPayment = (price,discount) => price * discount + 1;

这时，变量名就是函数名。

函数还可以作为参数传递给其它函数。

  1. function doSomething(price,discount,func){
  2.   return func(price,discount);
  3. }
  5. let payment = doSomething(1000,0.8,getPayment); // 801

有时候，可直接传入函数定义

  1. doSomething(1000,0.8,function(x,y){return x*y-5;}) // 795
  2. // 或写成
  3. doSomething(1000,0.8,(x,y)=>x*y-5)

6.2 自定义对象

6.2.1 对象表示与属性存取

  1. // 格式：由 { } 包裹的一系列属性名（键）和属性值的组合，属性名和属性值之间用冒号分隔，每对属性名和属性值中间用逗号分隔。
  2. let person = {name:"Billy", gender:"Male", age:30, location:{city:"Kunming",province:"Yunnan"}};
  4. // 为便于阅读
  6. let person = {
  7.   name: "Billy", // key: value, 键：值
  8.   gender: "Male",
  9.   age: 30,
  10.   location: {  // 嵌套对象
  11.     city: "Kunming",
  12.     province: "Yunnan"
  13.   }
  14. }
  16. //读取对象属性
  17. console.log(person.name) // Billy
  18. console.log(person["name"]) // Billy
  20. console.log(person.location.city) // Kunming
  21. console.log(person["location"]["city"])  // Kunming
  23. // 修改对象属性
  25. person.name = "Ben";
  26. // 或者
  27. person["name"] = "Ben";
  29. // 添加对象属性
  30. person.title = "Dr.";
  31. person.location.zipcode = "661300";
  33. // 删除对象属性
  35. delete obj.title;

6.2.2 对象的简洁写法

  1. let firstName = "Billy", lastName = 'Smith', gender = "Male", age = 35;
  3. // 传统写法
  4. let person = {
  5.   firstName: firstName,
  6.   lastName: lastName,
  7.   gender: gender,
  8.   age: age,
  9.   fullName: function(){
  10.     console.log(`${this.firstName} ${this.lastName}`);
  11.   }
  12. }
  13. // 简洁写法
  14. let person = {
  15.   firstName,
  16.   lastName,
  17.   gender,
  18.   age,
  19.   fullName(){
  20.     console.log(`${this.firstName} ${this.lastName}`);
  21.   }
  22. }

6.2.3 对象解构

  1. let obj = {
  2.   width: 100, 
  3.   height: 200,
  4.   add(a,b){
  5.     return a+b;
  6.   }
  7. };
  8. let {width, height} = obj; // 取出 obj 的 width 属性值给外部变量 width, height 属性值给外部变量 height
  9. let {width: w, height: h} = obj; // 取出 obj 的 width 属性值给外部变量 w, height 属性值给外部变量 h
  10. let { add } = obj; //取出 add 函数给外部变量 add
  11. add(10,20) // 30

6.3 数组对象

属性：length

方法：push(e), pop(), unshift(e), shift(), splice(), forEach(), map(), filter(), reduce(),sort()

  1. let data = new Array(10,20,'a','b',true);
  2. // 或者：let data = [10,20,'a','b',true]
  3. data.length // 5, length: 长度，在此指数组的元素数量。
  4. data[0] // 10, 取第一个元素，索引号为零
  5. data[2] // 'a'
  7. // --------------- 修改元素值，添加、弹出元素, 数组即刻改变------------
  10. data[1] = 200; // 把第二个元素（20）改成 200
  12. data.push(false); // 6, 向数组尾部添加元素，变成：[10,200,'a','b',true, false]
  13. data.pop(); // fasle, 从数组尾部弹出一个元素，变成：[10,200,'a','b',true]
  14. data.unshift('zero'); // 6, 向数组头部添加元素，变成：['zero',10,200,'a','b',true]
  15. data.shift(); // "zero", 从数组头部弹出一个元素，变成：[10,200,'a','b',true]
  16. data.splice(2,1) // 从第 2 位开始删除 1 个元素，变成：[10,200,'b',true]
  18. // ------------------ join 将所有元素用分隔符相连组成字符串，原数组不变 -----------------
  19. let data = ['This', 'is', 'a', 'variable'];
  20. let s = data.join();
  21. console.log(s); // "This,is,a,variable"
  22. s = data.join(' ');
  23. console.log(s); // "This is a variable"
  24. console.log(data); // ['This', 'is', 'a', 'variable'], data 不变
  27. // ------------------ forEach 遍历所有元素执行传入的函数，原数组不变 --------------------
  28. let data = [1,2,3,4,5];
  29. data.forEach(function(e){
  30.   e = e*2;
  31.   console.log(e); // 2 4 6 8 10
  32. }); 
  33. console.log(data); // [1,2,3,4,5]
  35. // ------------------ map 遍历所有元素生成新的数组, 原数组不变 ------------------------
  36. let data = [1,2,3,4,5];
  37. let arr = data.map(function(e){
  38.   return e*2;
  39. })  // map 对每个元素执行一次传入的函数，返回值构成一个新的数组对象。
  40. // 或者
  41. let arr = data.map(e=>e*2) 
  42. console.log(data); // [1,2,3,4,5]
  43. console.log(arr); // [2,4,6,8,10]
  45. // ------------------------------- sort 排序, 原数组即刻改变 --------------------------
  46. let numData = [3,2,4,1,30];
  47. numData.sort() //  将元素转换成字符串后升序排序。sort: 排序
  48. console.log(numData); // [1,2,3,30,4] !!!
  49. // 传入比较函数，比较(a,b): a: 前一个元素，b: 后一个元素，函数返回小于0的值，a前b后，返回大于0的值，b前a后，返回0，ab位置不变。
  50. numData.sort(function(a,b){
  51.   if(a>b){
  52.     return -1;
  53.   }
  54.   else if(a<b){
  55.     return 1;
  56.   }
  57.   else{
  58.     return 0
  59.   }
  60. }); // [30，4，3，2，1] , 
  62. //数字数组简洁排序
  63. numData.sort((a,b)=>a-b); // 升序，[1, 2, 3, 4, 30]
  64. numData.sort((a,b)=>b-a); // 降序，[30, 4, 3, 2, 1]
  66. // ---------------- filter 遍历所有元素并过滤生成新数组，原数组不变 ------------------------------
  67. let data = [1, 'a', 10, 'hello', true, null, undefined, NaN]
  68. // 取出所有数字元素，但不包括正负无穷、NaN 
  69. let num = data.filter(e=>typeof e === "number" && isFinite(e) && !isNaN(e)); 
  70. console.log(num); // [1,10]
  71. console.log(data); // [1, 'a', 10, 'hello', true, null, undefined, NaN]

练习

1、已知一个“待办事宜”对象的数组，对象属性包含编号（id）,事宜（ todo）,已完成（ finished），请编写一个函数，从一个“待办事宜”数组中过滤出“已完成”或“未完成”的记录（数组）。

  1. function getTodos(const todos,finished=false){
  2.   return todos.filter(t=>t.finished==finished);
  3. }
  4. todoList = [
  5.   {id:1,todo:"Do something 1", finished=false},
  6.   {id:2,todo:"Do something 2", finished=false},
  7.   {id:3,todo:"Do something 3", finished=true},
  8.   {id:4,todo:"Do something 4", finished=false},
  9.   {id:5,todo:"Do something 5", finished=false},
  10.   {id:6,todo:"Do something 6", finished=true},
  11.   {id:7,todo:"Do something 7", finished=false},
  12.   {id:8,todo:"Do something 8", finished=false},
  13.   {id:9,todo:"Do something 9", finished=true},
  14.   {id:10,todo:"Do something 10", finished=false}
  15. ]
  16. console.log(getTodos(todoList));
  17. console.log(getTodos(todoList,true));

6.4 自定义类

以下建立一个自定义类 Person。

  1. class Person {
  2.     constructor(id,name,gender,dob){
  3.         this.id = id
  4.         this.name = name
  5.         this.gender = gender
  6.         this.dob = dob
  7.     }
  8.     desc(){
  9.         let self = `This is me, name: ${this.name}, gender: ${this.gender}, date of birth: ${this.dob}. `
  10.         return self
  11.     }
  13. }
  14. p = new Person(1,'Bill','Male','1990-10-10')
  15. console.log(p.desc())

第八讲 数字信息的处理

8.1 算术运算

  1. // +, -, *, /, %, +=, -=, ++, --
  2. // 运算结果类型：number
  3. 10 + 20 // 30
  4. 10 - 20 // -10
  5. 10 * 20 // 200
  6. 10 / 20 // 0.5
  7. 9 % 2 // 1, 取余数运算
  9. 10/0 // Infinity
  10. -10/0 // -Infinity
  12. 23/"abc" // NaN
  14. let x = 10, y;
  15. x += 2 // 12, 相当于 x = x + 2
  16. x -= 2 // 10, 相当于 x = x - 2
  18. x ++ // 返回 10，x: 11, 相当于 x = x + 1
  19. ++ x // 返回 12，x: 12
  20. x -- // 返回 12，x: 11
  21. -- x // 返回 10，x: 10
  24. y = x ++ // y: 10, x: 11
  25. y = ++ x // y: 12, x: 12
  27. y = x -- // y: 12, x:11
  28. y = -- x // y: 10, x: 10

8.2 比较运算

  1. // >, >=, <, <=, ==, ===, !=, !==
  2. // 运算结果类型：boolean
  4. 10 > 20 // false
  5. 10 >= 20 // false
  6. 10 < 20 // true
  7. 10 <= 20 // true
  8. 10 == 20 // false
  9. 10 === 20 // false, 严格相等，类型和值都必须相同
  11. 10 == "10" // true, "10" 被转换为数字类型10，再比较
  12. 10 === "10" // false, 类型不同
  14. 10 != "10" // false
  15. 10 !== "10" // true

8.3 parseInt、parseFloat 和 isNaN、isFinite

  1. // paserInt 用于从字符串开头解析出整数值
  2. parseInt("12.34千克")；// 12, parse: 解析， int: 整型
  4. // parseFloat 用于从字符串开头解析出小数
  5. parseFloat("12.34千克"); // 12.34，float: 漂浮，浮点型(小数)
  7. parseInt("重量：12.34千克")；// NaN, 特殊数值，Not a Number, 不是一个数值
  8. parseFloat("重量：12.34千克"); // NaN
  10. // isNaN 用于判断结果是否是 NaN (不能用==)
  11. let n = parseInt("abc123");
  12. n == NaN;  // false
  13. isNaN(n) // true
  15. // isFinite 用于判断一个数是否不是无穷大。Finite：有限的
  16. n = 100 / 0;
  17. n == Infinity // true
  18. isFinite(n)  // false

8.4 Number 对象

toFix(), toPrecision(), ...

  1. let num = new Number(12.3);
  2. // 或者： let num = 12.3, 操作 num 的属性或执行 num 的方法时，会自动转换成 Number 对象。
  3. num.toFixed(2) // "12.30", 设置固定长度的小数位数，fixed: 固定的
  4. (24).toFixed(3) // "24.000"
  5. (24.16).toFixed(1) // "24.2"
  7. (23).toPrecision(5) // 23.000, 设置数字位数。precision: 精确度
  8. (23).toPrecision(1) // 2e+1, 2 * 10^1

8.5 Math 对象

数学对象：Math

abs(), floor(), ceil(), random(), round(), pow(),...

  1. // 求绝对值
  2. Math.abs(-100); // 100
  4. // x 的 y 次方
  5. let x=2, y=3;
  6. Math.pow(x,y); // 8
  8. // 取小数的整数部分，不作四舍五入
  9. Math.floor(23.001) // 23
  10. Math.floor(23.999) // 23
  12. // 取小数的整数部分，只要小数部分大于零，就进位
  13. Math.ceil(23.001) // 24
  14. Math.ceil(23.999) // 24
  16. // 将小数四舍五入到整数
  17. Math.round(1.50) // 2
  18. Math.round(1.49) // 1
  20. // 获得 [0，1) 之间的随机小数
  21. Math.random(); // 0.06092176944881755

练习

1、请编写一个函数，接收两个整数参数，随机返回两个参数值之间（含两个参数值）的任意一个整数。

  1. function randInt(min,max){
  2.   if(min>max){
  3.     let tmp = min;
  4.     min = max;
  5.     max = tmp;
  6.   }
  7.   return min + Math.floor(Math.random()*(max-min+1));
  8. }

第九讲 字符串信息处理

9.1 字符拼接

  1. let name = "Billy", age = 35;
  2. console.log("Hi, my name is " + name +", and I'm " + age +".");

9.2 模板字符串的变量替换

  1. let name = "Billy", age = 35;
  2. console.log(`Hi, my name is ${name}, and I'm ${age}.`);

9.3 比较运算

== , === : 两个字符串所有字节相同，长度相同，则相等

  1. // === : 两个字符串所有字节相同，长度相同，则相等
  2. "abc" === "abc" // true, 严格相等，数据类型和值都相等
  3. "123" === 123 // false，类型不同
  4. "123" == 123 // true, "123" 被自动转换为数字 123，再比较
  1. // > 和 < : 逐个字符比较，编码大的字母字符串大，若相同，继续比较。如果比较到某个字符串的结尾，都相同，而另一个字条串还没结束，长的字符串大。
  2. "abc" > "bbc" // false, a:97, b:98, c:99, ...
  3. "abcde" > "abc" // true

9.3 String 对象

  1. let s = new String("Hello");
  2. // 或 let s = "Hello"; 操作 s 的属性或执行 s 的方法时，会自动转换成字符串对象。
  3. console.log(s) // 查看属性和方法，方法在 __proro__ 中
  5. s.length; // 5，length: 长度
  6. s.charAt(1) // "e" char: 字符，at: 在
  7. s.charCodeAt(1) // e: 101，code: 编码，代码
  8. s.concat(" world!") // "Hello world!"， concat：串联
  9. s.startsWith("He") // true，start: 开始，with: 用，以
  10. s.endsWith("llo") // true，end: 结束
  11. s.includes("ll",2) // true，第二个参数为开始搜索位置(第一个字符位置为0), include: 包括
  12. s.indexOf("l") // 2，找到的第一个字符串的开始位置, index: 索引
  13. s.lastIndexOf("l") // 3, 找到的最后一个字符串的开始位置，last: 最后的
  14. s.repeat(3) // "HelloHelloHello", repeat: 重复
  15. s.replace("ll","99") // "He99o", replace: 替换
  16. s.substr(1,4) // "ello", 从第 1 位取 4 个字符，sub: 子，下一级
  17. s.substring(1,4) // "ell", 从第 1 个位置取到第 4 个位置的字符，但不包含第 4 位的字符。
  18. s.slice(1,4) // "ell", 同 substring。slice: 切片
  19. s.split("ll") // ["He","o"], 以 "ll" 作为分隔符，把字符分割成由几个子串构成的数组。split: 分裂
  20. " \tOK\n".trim() // "OK", 去除字符串头尾的空白字符和换行符。"\t" 代表 tab 键的空白，"\n" 代表换行符号。trim: 修剪
  21. " \tOK\n".trimStart() // "OK\n"，只修剪开头
  22. " \tOK\n".trimEnd() // " \tOK"，只修剪结尾
  23. s.toUppercase() // "HELLO", upper case: 大写
  24. s.toLowerCase() // "hello", lower case: 小写

9.4 RegExp 对象

  1. // 正则表达式对象
  2. let re = new RegExp('ab+c','g'); // 表达式：一个a,1到多个b,后面是一个c。g: global, 全局
  3. // 或 let re = /ab+c/g, 操作 re 的属性或执行 re 的方法时，会自动转换成正则表达式对象。
  5. "abcdefabbcddabbbbbc".match(re); // ["abc", "abbc", "abbbbbc"], match: 符合，匹配
  7. "2019/10/31".replace('/','-') // "2019-10/31"
  9. "2019/10/31".replace(/\//,'-'); // "2019-10/31"
  11. "2019/10/31".replace(/\//g,'-'); // "2019-10-31"
  13. "abcdefabbcddabbbbbc".replace(/ab+c/, ''); // "defabbcddabbbbbc"
  15. "abcdefabbcddabbbbbc".replace(/ab+c/g, ''); // "defdd"

参阅：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions

9.5 JSON 对象

  1. // JSON ： JavaScript Object Notation, JavaScript 对象注记格式字符串，用于在网络中交投结构化数据。
  2. let person = {
  3.   name: "Billy", // key: value
  4.   gender: "Male",
  5.   age: 30,
  6.   location: {
  7.     city: "Kunming",
  8.     province: "Yunnan"
  9.   }
  10. }
  12. // 对象转换为字符串
  13. JSON.stringify(person) // '{"name":"Billy","gender":"Male","age":30,"location":{"city":"Kunming","province":"Yunnan"}}', stringify: 字符串化
  15. // 字符串转换为对象
  16. JSON.parse('{"name":"Billy","gender":"Male","age":30,"location":{"city":"Kunming","province":"Yunnan"}}'); // {name:"Billy",...}，parse: 解析

9.6 localStorage 浏览器本地存储对象

  1. // localStorage: 浏览器本地存储对象
  2. localStorage.setItem("product","Brother Printer");
  3. localStorage.getItem("product"); // "Brother Printer"
  4. localStorage.removeItem("product") // remove: 移除，拿掉
  5. localStorage.getItem("product"); // null
  7. // localStorage 只能存储字符串，如果要存储对象数据，用 JSON 做来回转换即可
  9. let obj = {id: 1, name: "Brother Printer", category: "Printer"};
  10. localStorage.setItem("mydata",JSON.stringify(obj));
  12. let out_obj = JSON.parse(localStorage.getItem("mydata"));
  13. console.log(out_obj.name,out_obj.category);

练习

1、编写一段代码，从中国大陆身份证号码中取出其中的出生年（7~10位）、月（11~12位）、日（13~14位）和性别（17位，奇数：男，偶数：女）信息。

  1. let idNo = '531013197812010013';
  2. let year = idNo.substr(6,4);
  3. let mon = idNo.substr(10,2);
  4. let day = idNo.substr(12,2);
  5. let gender = parseInt(idNo.substr(17,1))%2===0? '女':'男';

2、请从字符串 "hdsgfiywebv7345hcgaf72hdbc981jgdavc7avc982shavchv8shavc889casvc0" 中删除所有数字。

  1. let s = "hdsgfiywebv7345hcgaf72hdbc981jgdavc7avc982shavchv8shavc889casvc0";
  2. s.replace(/[0-9]+/g,'');
  3. // 或：
  4. s.replace(/\d+/g,'');

第十讲 日期信息处理

10.1 Date 对象

  1. let d = new Date(); // 2019-07-25 11:27:55, 获得日期对象，为当前日期（年月日）、时间(时分秒)。
  2. d.getYear() // 19 
  3. d.getFullYear() // 2019, 按本地时区，
  4. d.getUTCFullYear() // 2019, 按国际标准时间
  5. d.getMonth() // 6 (月份 从0~11，6 表示 7 月份)
  6. d.getDay() // 4 (星期四)
  7. d.getDate() // 25 (日)
  8. d.getHours() // 11 (时)
  9. d.getMinutes() // 27 (分)
  10. d.getSeconds() // 55 (秒)
  11. d.getMilliseconds() // 491 (毫秒)
  12. d.getTime() // 1564025275491, 1970-01-01 00:00:00 到 d 的时间的毫秒数。
  13. d.getTimeZoneOffset(); // 与国际标准时间的时差秒数(负数为提前，正数为滞后)
  15. // 注意以上相关的 setter 和 相应的 UTC (Universal Time Coordinated) 版本
  17. // 生成特定日期的日期对象
  18. let mydate = new Date(2000,11,1) // '2000-12-01'
  19. mydate = new Date('2000-12-01') // '2000-12-01'
  21. // 获取日期字符串
  22. mydate.toDateString() //
  23. mydate.toLocaleDateString('zh-CN') //

参阅：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date

10.2 日期运算

10.2.1 比较运算

  1. let d1 = new Date("2010-10-01");
  2. let d2 = new Date("2010-10-01");
  3. d1 == d1 // false
  4. d1 === d2 // false
  5. d1.getTime() == d1.getTime() // true 
  6. Number(d1) == Number(d2)  // true
  7. +d1 == +d2 // true
  9. d1 = new Date("2010-10-01");
  10. d2 = new Date("2010-10-30");
  12. +d1 > +d2 // false
  13. +d1 < +d2 // true

10.2.2 “算术”运算

  1. // -------------- 从某个日期往前往后计算日期 ---------------------
  3. let d1 = new Date(); // 获取当前日期时间
  4. console.log("当前：", d1.toISOString())
  5. // 20 天后的日期
  6. d1.setDate(d1.getDate() + 20);
  7. console.log("20天后：", d1.toISOString());
  8. d1 = new Date的();
  9. // 3 个月后的日期
  10. d1.setMonth(d1.getMonth() + 3);
  11. console.log("3个月后：", d1.toISOString());
  12. d1 = new Date();
  13. // 5 年后的日期
  14. d1.setFullYear(d1.getFullYear() + 5)
  15. console.log("5年后：", d1.toISOString());
  16. d1 = new Date();
  17. // 650 天前的日期
  18. d1.setDate(d1.getDate() - 650);
  19. console.log("650天前：", d1.toISOString());
  21. // --------------- 两个日期之间的距离 --------------------
  22. let d1 = new Date("2010-01-01");
  23. let d2 = new Date("2020-05-30");
  25. let diff = Math.abs(d1 - d2);
  26. console.log('相距毫秒数：',diff);
  28. let days = diff / (24 * 60 * 60 * 1000)
  29. console.log('相距天数：', days);

10.3 第三方库 moment.js

地址：https://momentjs.com/

  1. moment.locale('zh-CN'); // 设定中文本地化
  2. moment.months(); 
  3. //["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"]
  6. // -------------------- 设置获取日期时间成分 -----------------------------
  7. let m = moment(); // 获取当前日期时间
  8. m.format('YYYY-MM-DD'); // "2019-07-26"
  9. m.year() // 2019
  10. m.year(2025) // 重新设定年份
  11. // 同理：month(), date()
  12. m.format('YYYY-MM-DD') // "2025-07-26"
  16. // ------------------ 计算日期时间差别 ----------------------------------
  17. let d1 = moment('2000-05-31')
  18. let d2 = moment('2001-05-30')
  19. d1.diff(d2,'years') // 0
  21. d2 = moment('2001-05-31')
  22. d1.diff(d2,'years') // -1, 比较两个日期，少 1 年。
  23. // 尝试 "months"（月）, "weeks"（周）, "days"（天）, 
  24. // "hours"（小时）, "minutes"（分）, "seconds"（秒）, "milliseconds"(毫秒)
  26. //------------------- 添加一定时间范围到特定日期 -----------------------------
  28. let d3 = moment('2010-01-01');
  29. d3.add(3, 'years'); // "2013-01-01"
  30. d3.add(10,'months'); // "2013-11-01"
  31. d3.add(-10, 'days')  // "2013-10-22"

第十一讲 文档对象模型 DOM

11.1 Window 对象

window 对象表示一个包含DOM文档的窗口，其 document 属性指向窗口中载入的 DOM文档 。使用 document.defaultView 属性可以获取指定文档所在窗口。

window作为全局变量，代表了脚本正在运行的窗口，暴露给 Javascript 代码。
重要属性：document, location

可在浏览器的console中查看各种对象的方法、属性及其继承关系。

11.2 Document 对象

document对象代表整个文档。它是 window 对象的一个属性。通常，在调用window对象的属性和方法时，window对象可以省略不写，即 document 其实是 window.document，而 isNaN() 其实是 window.isNaN()
常用方法：
document.getElementById("id")，返回HTMLElement对象。
document.getElementsByClassName("class")，返回HTMLElement集合对象。
document.querySelector("selector")，返回HTMLElement对象。
document.querySelectorAll("selector")，返回HTMLElement集合对象。

selector, 选择器，是指通过一定规则构建字符串以找到特定的 HTML 元素。如："#container" 会找到具有 id="container" 的元素。".item" 会找到所有具有 class="item" 的元素等。详细的选择器如下表。

选择器 例子 例子描述 CSS版本
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的所有元素。 1
* * 选择所有元素。 2
element p 选择所有 <p> 元素。 1
element,element div,p 选择所有 <div> 元素和所有 <p> 元素。 1
element element div p 选择 <div> 元素内部的所有 元素。 1
element>element div>p 选择父元素为 <div> 元素的所有 <p> 元素。 2
element+element div+p 选择紧接在 <div> 元素之后的所有 <p> 元素。 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个 <p> 元素的首字母。 1
:first-line p:first-line 选择每个<p> 元素的首行。 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个 <p> 元素。 2
:before p:before 在每个 <p> 元素的内容之前插入内容。 2
:after p:after 在每个 元素的内容之后插入内容。 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个 元素。 2
element1~element2 p~ul 选择前面有 <p> 元素的每个 <ul> 元素。 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 <a> 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 3
:last-of-type p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。 3
:only-of-type p:only-of-type 选择属于其父元素唯一的 元素的每个 <p> 元素。 3
:only-child p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素每个 <p> 元素。 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个 <p> 元素（包括文本节点）。 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 元素。 3
:disabled input:disabled 选择每个禁用的 元素 3
:checked input:checked 选择每个被选中的 元素。 3
:not(selector) :not(p) 选择非 <p> 元素的每个元素。 3
::selection ::selection 选择被用户选取的元素部分。 3

11.3 HTMLElement(继承自Element)对象

HTMLElement 接口表示所有的 HTML 元素。一些HTML元素直接实现了HTMLElement接口，其它的间接实现HTMLElement接口.
常用属性：id, classList, style, innerText, innerHTML.
常用方法：append(child), remove(),cloneNode(deep), addEventListener('event',function), removeEventListener('event',function)

11.4 事件属性

window, document, HTMLElement 都具有事件属性，这些属性名称为“on”+事件名称，如：onclick, onmousedown, onkeypress ...
把一个函数赋给事件属性，则在这些对象上发生相应事件时，函数就会被执行。

11.5 HTMLElement 的自定义属性

自定义属性对应HTML标签中以“data-”开头的属性，引用时以dataset.属性名来引用。
如：

  1. <div id="info" data-id="10">...</div>
  1. let el = document.querySelector("#info")
  2. console.log(el.dataset.id)  // 打印出 10

编程实例

[实例一] 编写一个注册界面，验证用户名和密码，用户名至少8位，至少包含一位大写字母、一位小写字母和一位数字（"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"），密码满足至少8位，至少一位大写字母，一位小写字母，一位数字和一位特殊字符("^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#%^&*()]{8,}$")。

[实例二] 编写一个“待办事宜”程序，可在页面上添加、删除、修改待办事项，双击改变事项状态（已完成，带删除线，未完成，无删除线）。

11.5 创建 DOM 元素

有时我们需要从程序中创建一个HTMLElelment对象，对它的各种属性进行定义，并添加到某个节点中去。以下演示了如何创建一张图片，指定其各种属性后，添加到id为"gallery"的div中去。

  1. let img = document.createElement("img")
  2. img.src = "images/computer3.png"
  3. img.style.width = "100px"
  4. img.style.height = "100px"
  5. img.classList.add("gallery-img")
  6. document.querySelector("#gallery").append(img)

第十二讲 jQuery 库介绍

jQuery 是著名的第三方库，曾经为 JavaScript 的编程提供了极大便利。但随着近年来 JavaScript 编程API的日益丰富，以及大量前端编程框架的兴起，jQuery的采用日趋减少。但由于大量

第十三讲 前端编程：AJAX 案例 - 通讯录

第十四讲 前端编程：DOM 游戏 - 决战太空

第十五讲 前端编程：phaser 游戏 - 决战太空

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注