2021-08-18 WEB前端课堂笔记Day04

1 JavaScript

1.1 JS的主要作用

• 表单验证：用户名长度、密码强度、邮箱格式
• 给网页增加动态效果、动画
• 动态调整页面内容

1.2 JS的组成

• ECMScript （核心语法）：
  • 变量、数据类型、类型转换、操作符
  • 流程控制语句：判断、循环
  • 数组、函数、作用域
  • 对象、属性、方法、简单类型和复杂类型
  • 内置对象：Math、Date、Array、String、Number、Boolean
• DOM （文档对象模型）：
  • 获取页面元素、注册事件
  • 属性操作、样式操作
  • 节点属性、结点的层级
  • 动态创建元素
  • 事件
• BOM （浏览器对象模型）：
  • 获取浏览器历史：history
  • window
  • 定时器

1.3 特点

• 解释型语言
  • 不需要编译为机械码就可以直接被浏览器解释执行
• 语法类似C和Java
• 动态语言
• 基于原型的面向对象
  • 基于对象的语言

2 JS的基本语法

2.1 JS的使用方式

方式一（行内JS）：

  <input type="button" value="警告" onclick="javascript:alert('Hello JavaScript!!')">

方式二（内部JS）：

    <script type="text/javascript">
        alert('Hello JavaScript!!');
    </script>

方式三（外部JS）：

// 不同级
<script src="../（路径）"></script>
// 同级
<script src="（路径）"></script>

2.2 注释

/*
 多行注释 这是以警告框的形式显示信息
*/
alert("hello JavaScript");
// 单行注释  这是在浏览器的控制台打印需要的信息
console.log("print hello Script");

2.3 标识符

组成：数字、字母、下划线、美元符号

开头：不能以数字开头

命名方式：驼峰命名法

2.4 变量

所有变量均用var进行定义，不需要声明类型

JS是一门弱类型语言（弱化类型）

2.5 数据类型

• 字符串
• 数值型
• 布尔型
• null
• undefined型（未定义，声明变量未赋值）
• 复杂类型（Object）

2.6 typeof运算符

检测当前变量数据类型的方法

console.log(typeof 123);// number
console.log(typeof "abc");//string
console.log(typeof 'def');//string
console.log(typeof true);//boolean
console.log(typeof undefined);//undefined
console.log(typeof null);//Object
console.log(typeof ({}));//Object
console.log(typeof ([]));//Object
var fun = function(){};
console.log( typeof (fun));//function

null在使用typeof运算符之后 被当做了一个空对象引用

2.7 Number

包含整数和浮点数

NaN（非数字类型） 特点：

• 对NaN的任何操作，返回值都是NaN
• NaN不等于自身

//将非数值转换为数值Number()   parseInt() parseFloat()
var a = Number("123");
console.log( a + 1);
console.log(isNaN(a))//false
console.log("-----------------------");
var b = parseInt(a);
console.log( a + 1);
console.log(isNaN(a))//false
var c ;
console.log(c == NaN);//false

2.8 String

var str = " hello world";
console.log(str.length);//12
console.log(str.charCodeAt(3));//108 获取索引的编码值
console.log(str.substring(5));// 获取子串

2.9 Boolean

只有 true 和 false 两个值

可以通过Boolean函数将其他的数据类型转换为布尔类型

console.log(Boolean("aa"));//true
console.log(Boolean(''));//false
console.log(Boolean(123));//true
console.log(Boolean(NaN));//false
console.log(Boolean(0));//false
console.log(Boolean(undefined));//false

2.10 undefined

只有一个值 就是本身

使用var声明一个变量 但是未对其进行初始化 则变量的值就是undefined

2.11 null

只有一个值 就是本身

console.log(null == undefined);// true

2.12、Object

表示一类对象所具有的属性和方法的集合。

3 三大引用类型

3.1 Object类型

//创建对象的方式 ： 使用new操作符后跟Object构造函数来创建
var person = new Object();
person.name="tom";
person.age = 24;
// 使用对象的字面量表示法
var student={
    name:"lucy",
    age : 22

}
console.log(person.name +"----"+person.age);
console.log(student.name +"---"+student.age);

3.2 Array类型

JS数组可保存任何类型数据，且长度可动态调整

默认值为undefined

// 动态初始化
var arr1 = new Array();
arr1[0] = "hello";
arr1[1] = 12;
arr1[2]= true;
// 静态初始化
var arr2=["html",234,false];
//数据中的遍历
for(var i = 0 ; i < arr1.length;i++){
    console.log(arr1[i])
}
console.log("-----------------------")
for(var i = 0 ; i < arr2.length;i++){
    console.log(arr2[i])
}
console.log(arr1[3]);//undefined

3.3 Function类型

// 定义三种形式
var 函数名 = function(参数列表){
    函数体；
}

var 函数名 = new Function("参数1","参数2","参数3",..."函数体")；

function 函数名(参数列表){
	函数体;
}
// 执行函数
function fun() {
    alert("hello");
}
fun();
// 定义一个函数
function sum1(x , y ){
    return x  + y;
}
// 定义有返回值的函数
var sum2 = function(x, y ){
    console.log("两个参数");
    return x + y;
}
var s2 = sum2(4,5);
var sum2 = function(x,y,z){
    console.log("三个参数");
    return x+ y + z;
}
var s1 = sum1(2,3);

var s3 = sum2(3,4,5);
console.log(s1);
console.log(s2);
console.log(s3)
//值传递
var a = 100;
 var b = a;
 a = 200;
 console.log(b);//100
//引用传递
 var p = {age : 22};
 var x = p;
 x.age = 23;
 console.log(p.age);//23

JS函数不能重载，只会调用最近的函数，若格式不对则返回NaN

JS代码执行步骤：

1. 语法分析
2. 预编译 为变量分配空间存放变量和函数，一般在函数体执行前
3. 解释执行 开始执行代码

在预编译阶段会给var的变量赋值undefined，并且重载同名函数

4 其他语法

4.1 输出语句

alert 弹出信息

consloe.log() 实现信息的控制台输出

document.write（）；将内容直接输出到页面

4.2 undefined 和 null

null表示没有对象 典型用法：

• 作为函数的参数 表示该函数的参数不是对象
• 作为对象原型链的终点

undefined 表示缺少值 此处应该有值，但是还有定义。典型用法：

• 变量被声明 但没有赋值 就是undefined
• 调用函数式，应该提供的参数没有提供 此时该参数就是undefined
• 对象没有赋值的属性 该属性的值也是undefined
• 函数没有返回值时 默认的返回值就是undefined

4.3 语句

判断语句：if switch

循环语句： for while do…while

4.4 运算符

+、-、*、/

JS中整数和小数都是Number，因此除法中结果为小数

字符串和数组相加，是字符串的拼接 字符串和数字相减 ，如果字符串是数字类型的字符串 则先将字符串转换为数字，再做减法，否则结果为NaN

Boolean类型进行运算 true默认为1 false默认为0

++ – 和Java相同

比较运算符：== ===

== 比较值

=== 比较值和类型 类型不同时，直接返回false

三元运算符 a ? b : c 同Java

4.5 弹出框

警告框 alert

确认框 confirm

var  con = confirm("你觉得自己够努力吗？");
console.log(con);
if(con){
    document.write("你足够自信");
}else{
    document.write("那还不赶紧努力");
}

提问框 prompt

var score = prompt("你本次的考试成绩？");
document.write(score);

5 内置对象

内置函数

decodeURI	解码某个编码的URI
encodeURI	把字符串编码为URI
escape	对字符串进行编码
eval	计算JS字符串，并将其作为脚本代码进行执行

内置对象：

• String
• Number
• Array
• Math
• Date

5.1 Math

常数：

Math.E          // 返回欧拉指数（Euler's number）
Math.PI         // 返回圆周率（PI）
Math.SQRT2      // 返回 2 的平方根
Math.SQRT1_2    // 返回 1/2 的平方根
Math.LN2        // 返回 2 的自然对数
Math.LN10       // 返回 10 的自然对数
Math.LOG2E      // 返回以 2 为底的 e 的对数（约等于 1.414）
Math.LOG10E     // 返回以 10 为底的 e 的对数（约等于0.434）

方法：

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,…,n)	返回最高值
min(x,y,z,…,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

5.2 Date

有 4 种方法创建新的日期对象：

• new Date()
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
• new Date(milliseconds)
• new Date(date string)

日期获取方法：

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

6 创建对象

6.1 简单方式

 var person = new Object();
 person.name = "jack";
 person.age = 21;
person.say=function(){
    console.log("hello  " +  this.name)
}

person.say();
// 是上述方法的简写形式
var person1={
    name:"lucy",
    age : 22,
    say:function(){
        console.log("hello " + this.name );
    }
}
person1.say();

6.2 工厂函数（解决代码重复）

function createPerson(name ,age){
    return{
        name: name,
        age: age,
        say :function(){
            console.log("hello " + this.name)
        }

    }

}
// 创建对象
var p1 = createPerson("admin",22);
var p2 = createPerson("张三",20);
p1.say();
p2.say();

6.3 构造函数

// 使用构造函数创建对象
function Person(name ,age){
    this.name = name;
    this.age = age;
    this.say = function(){
        console.log("hello" + this.name);
    }
}
var p3 = new Person("李四",22);
var p4 = new Person("王五",18);
p3.say();
p4.say();

6.4 构造函数和实例对象的关系

使用构造函数的好处不仅仅在于代码的简洁，更重要的是我们可以识别对象的具体类型。

在每一个实例对象中 都有一个属性constructor 该属性逐项创建该实例的构造函数

// 使用构造函数创建对象
function Person(name ,age){
    this.name = name;
    this.age = age;
    this.say = function(){
        console.log("hello" + this.name);
    }
}
var p3 = new Person("李四",22);
var p4 = new Person("王五",18);
p3.say();
p4.say();

console.log(p3.constructor === Person);//true
console.log(p4.constructor === Person);//true
console.log(p4.constructor === p3.constructor);//true
// 检测某一个对象是否是某种类型的实例对象
console.log(p3 instanceof Person);//true
console.log(p4 instanceof Person);//true
console.log(p1 instanceof Person);//false

6.5 对象属性的操作

获取对象的所有属性 Object.keys(对象名)

delete 删除某一个属性

in 检查对象中是否包含某一个属性

for in 遍历对象包含的所有属性

// 获取该对象的所有属性
console.log(Object.keys(p3));
//删除对象的某一个属性
delete p3.age;
console.log(p3.name +"---"+p3.age);//一旦使用delete命令删除某一个属性。再次获取则返回undefined
console.log(p4.name +"---"+p4.age)
// 检查对象是否包含某一个属性
console.log("name"  in p4);//true
console.log("age" in p3);//false
//遍历对象的所有属性值
for(var pro in p4){
    console.log(p4[pro]);
}
//遍历对象的所有属性
for(var pro in p4){
    console.log(pro);
}

7 原型（Protype）

是JS给函数提供的一个对象类型的属性

原型归所有函数所有，他不用创建，是默认存在存在的

在JS中，如果是通过构造函数创建对象，当访问你的属性在对象中没有找到，则去创建对象的构造函数中找，如果能找到，也相当于对象拥有这个属性

原型的作用就是为类（函数）提供了一个公共区域，在这个公共区域声明的属性和方法能够被所有通过这个类创建的对象所访问到。

function Car(){
}
var c1 = new Car();
var c2 = new Car();
Car.prototype.name = "BMW";
console.log(c1.name);//BMW
console.log(c2.name);//BMW
 function Car(name,speed,ability){
     this.name = name;
     this.speed = speed;
     this.ability = ability;
 }
 Car.prototype.showAbility= function(){
     console.log(this.ability);
 }
 var c1 = new Car("BMW",240,"坐宝马");
 var c2 = new Car("BZ",300,"开奔驰");
 c1.showAbility();
 c2.showAbility();

结构：原型是一个对象，在原型中通常拥有两个属性

1 构造器： constructor  该属性指向这个函数本身
2 原型指向：__proto__  该属性指向原型本身，提供给通过类创建的对象使用

作用： 原型用来创建类的共有属性和共有方法，为创建对象服务

优点： 节约内存空间，不必为每一个对象分配共有属性和共有方法的内存

缺点： 原型中不能保存数组这类引用类型的数据，因为地址的传递的问题 会导致出现修改的连锁变换。

8 原型链

构成：

由对象的 _ptoto_ 属性和对象的构造函数原型的 __proto__ 属性构成的链式结构称为原型链

console.log(Object.keys(c1));
// 输出的是c1对象的构造函数Car的原型 即Car的prototype  {showAbility: ƒ, constructor: ƒ}
console.log(c1.__proto__);
// 输出的内容是Car.prototype对象的构造函数的Object的原型  即Object.prototype
console.log(c1.__proto__.__proto__);
//输出的就是Object.prototype对象的构造函数的原型  即null
console.log(c1.__proto__.__proto__.__proto__);

原型链的作用：访问对象的属性和方法的时候 ，首先在本身中查找 是否拥有这个属性或方法 如果没有 就沿着原型链的方法向上逐级查找，直到Object为止

在任何一级寻找到这个属性或方法 都视为该对象拥有这个属性和方法。

原型链的创建实际上就是将函数的原型设置为另一个函数的对象。

9 继承

继承就是子类在不主动声明的情况下，使用父类的属性和方法的性质，叫做继承。

设置子类的原型是父类的实例的操作 被认为是JS中的继承

function Father(){

}
Father.prototype.fname="frank";
var father = new Father();

function Son(){

}
// 设置子类的原型为父类的实例对象   继承
Son.prototype = father;

var son = new Son();
// 子类可以访问到原型中的属性  
console.log(son.fname);

9.1 通过原型模式创建对象

 function Student(){}
 Student.prototype.name="admin";
 Student.prototype.age = 20;
 Student.prototype.sex="男";
 var stu1 = new Student();
 var stu2 = new Student();

9.2 混合模式创建对象

function Student(name ,age ,sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
}
Student.prototype.schoolname = "中北大学";
Student.prototype.ability = function(){
    console.log("学习java");
}
var stu1 = new Student("jack", 22 , "男");
var stu2 = new Student("lucy",18,"女");
stu1.ability();
stu2.ability();