1.JavaScript

1.1 JS的主要作用

• 表单验证：用户名的长度 密码的强度 邮箱的格式

• 给网页增加动态效果

• 给网页增加动画

• 动态的调整页面的内容

1.2 JS的组成

ECMAScript：核心语法（语法规范）

• ​ 变量 数据类型 类型转换 操作符
• ​ 流程控制语句：判断 循环语句
• ​ 数组，函数 作用域
• ​ 对象 属性 方法 简单类型和复杂类型
• ​ 内置对象：Math Date Array String Number Boolean

WEB APIs

• DOM
  • 获取页面元素 注册事件
  • 属性操作 样式操作
  • 节点属性 节点的层级
  • 动态创建元素
  • 事件
• BOM
  • 获取浏览器的历史： history
  • window
  • 定时器

1.3 特点

• 解释型语言
  • 不需要编译为机器码就看可以直接被浏览器解释执行
• 类似于C 和java的语法结构
• 动态语言
• 基于原型的面向对象
  • JS也是一门基于对象的语言

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DArPyChD-1635835430148)(assest/image-20210818091213486.png)]

2.2. 注释

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

2.3. 标识符

标识符的组成： 由数字 字母 下划线 美元符号

开头：不能以数字开头

命名方式：驼峰命名法

2.4 变量

类型 变量名 = 变量值；

所有的变量均使用var来进行定义。

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

var a = 123;
console.log(a);
var b = "hello";
console.log(b);
var c = true;
console.log(c);

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：非数字类型。特点：

1 任何关于NaN的操作 返回的都是NaN

2 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

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中的数组可以保存任何类型 同时数组的长度是可以动态调整的。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

js中的数组是一种动态数组 任何数组都有默认值undefined

3.3 Function类型

每个函数都是function的实例。

// 定义一个函数function sum1(x , y ){    return x  + y;}// 定义有返回值的函数var sum2 = function(x, y ){    return x + y;}var s1 = sum1(2,3);var s2 = sum2(4,5);console.log(s1);console.log(s2);

函数的定义格式：

function 函数名(){	函数体;}

function fun() {    alert("hello");}// 执行函数fun();

js中函数不能重载 如果出现同名的函数 则在调用的时候 调用距离其最近的函数。

// 定义一个函数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);function fun() {    alert("hello");}// 执行函数fun();

//值传递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);//22

引用传递和值传递

js 定义函数的第三种形式：

 var test = new Function("a","b","console.log(a - b )"); test(5,2);

test1(5,2);//Uncaught TypeError: test1 is not a function var test1 = new Function("a","b","console.log(a - b )");test2(9,3);//6 function test2(a,b){     console.log(a-b); } test3(5,1);//Uncaught TypeError: test3 is not a function var test3 = function(a ,b ){    console.log(a- b); }

js代码的执行步骤：

1 语法分析

2 预编译 为变量分配内存空间，存放变量和函数等 一般实在函数体执行之前。

3 解释执行 开始执行代码

var a  = 123;// 预编译的形态a = undefined;a = 123;

test2(9,3);//NaN function test2(a,b){     console.log("1111111111111111")     console.log(a-b); } function test2(a,b,c){    console.log("222222222222")    console.log(a-b + c);}test2(9,3);//NaNtest2(9,3,1);//7

4 其他的语法

4.1 输出语句

alert 弹出信息

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

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

document.write(1 +2);document.write("<h1>HELLO</h1>");

4.2 undefined 和null

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

1 作为函数的参数 表示该函数的参数不是对象

2 作为对象原型链的终点

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

1 变量被声明 但没有赋值 就是undefined

2 调用函数式，应该提供的参数没有提供 此时该参数就是undefined

3 对象没有赋值的属性 该属性的值也是undefined

4 函数没有返回值时 默认的返回值就是undefined

4.3 语句

判断语句：if switch

循环语句： for while do…while

练习：在页面输出九九乘法表

4.4 运算符

var i = 123;alert(i/1000*1000);//0.123 * 1000 = 123

js中小数和整数都是数字类型 所以除法中没有整数 会出现小数

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

Boolean类型做运算：

var  b = false;// true  默认用1表示  false 默认用0表示console.log(b + 1);

++和–和java中一模一样

比较运算符：

== ===

 var a = "123"; var b = 123; console.log(a == b);// true console.log(a===b);//false

== 比较值的内容是否相同

=== 比较不仅要内容相同 还要类型相同。

当进行比较的时候 ，先检查两个操作数的数据类型，如果相同 ，则进行=比较，如果不同，则会进行一次类型转换，转换成相同的类型后在进行比较。

=== 比较的时候 如果类型不同，直接就返回false。

三元运算符 同java

4.4 弹出框

警告框 alertI

确认框：

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

提问框：

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）

Math 对象方法

方法	描述
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)	返回角的正切

 //Math对象 document.write(Math.round(1.4) + "<br/>");//1 document.write(Math.round(1.1) + "<br/>");//1 document.write(Math.round(-1.1) + "<br/>");//-1 document.write(Math.round(-1.6) + "<br/>");//-2 document.write("<hr/>"); document.write(Math.floor(3.8)+"<br/>");//3 document.write(Math.floor(-3.2)+"<br/>");-4 document.write("<hr/>"); document.write(Math.random()); document.write("<hr/>"); document.write(Math.floor(Math.random()*10 + 10));

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 日至今）

 document.write(new Date());// 获取系统当前时间 document.write("<hr/>"); document.write(new Date("2021-07-18")); var now = new Date(); var day = now.getDate(); var year = now.getFullYear(); var month = now.getMonth(); document.write(year +"--"+month+"--"+day);

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);//trueconsole.log(p4.constructor === Person);//trueconsole.log(p4.constructor === p3.constructor);//true// 检测某一个对象是否是某种类型的实例对象console.log(p3 instanceof Person);//trueconsole.log(p4 instanceof Person);//trueconsole.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命令删除某一个属性。再次获取则返回undefinedconsole.log(p4.name +"---"+p4.age)// 检查对象是否包含某一个属性console.log("name"  in p4);//true//遍历对象的所有属性for(var pro in p4){    console.log(p4[pro]);}

7 原型

js中给函数提供了一个对象类型的属性，叫做Prototype（原型）

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

function Car(){}var c1 = new Car();var c2 = new Car();Car.prototype.name = "BMW";console.log(c1.name);console.log(c2.name);

js提供了这样的一种机制，如果是通过构造函数创建对象，当访问你的属性在对象中没有找到，则去创建对象的构造函数中找，如果能找到，也相当于对象拥有这个属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9F3wfQLs-1635835430155)(assest/image-20210818162729884.png)]

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

 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();

原型是js为所有函数所创建的一个对象类型的属性，原型当中的属性和方法被所有的通过这个函数所创建的所有对象共享。

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

1 构造器： constructor 该属性指向这个函数本身

2 原型指向

__proto__该属性指向原型本身，提供给通过类创建的对象使用

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

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

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

8 原型链

原型链的构成：

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

 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();console.log(Object.keys(c1));// 输出的是c1对象的构造函数Car的原型 即Car的prototype  {showAbility: ƒ, constructor: ƒ}console.log(c1.__proto__);// 输出的内容是Car.prototype对象的构造函数的Object的原型  即Object.prototypeconsole.log(c1.__proto__.__proto__);//输出的就是Object.prototype对象的构造函数的原型  即nullconsole.log(c1.__proto__.__proto__.__proto__);

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

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SxTJCT5Y-1635835430158)(assest/image-20210818165804399.png)]

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(); stu1.__proto__

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();