JavaScript 知识点

黄赛馨

于 2021-06-07 16:47:59 发布

阅读量265

点赞数 6

本文链接：https://blog.csdn.net/m0_46691444/article/details/117649914

版权

一.简介

通过学习我们知道HTML定义了网页的内容，css规定了网页的布局，JavaScript是对网页行为进行编程。JavaScript（缩写：JS）是一门高级的、解释型的动态编程语言。用于 HTML或web应用，可被浏览器直接执行。

1.完整的JavaScript包括以下几个部分：

ECMAScript，描述了该语言的语法和基本对象
文档对象模型（DOM），描述处理网页内容的方法和接口
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

2.JavaScript的基本特点如下：

是一种解释性脚本语言（代码不进行预编译）。
主要用来向HTML页面添加交互行为。
可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

3.JavaScript常用来完成以下任务：

嵌入动态文本于HTML页面
对浏览器事件作出响应
读写HTML元素
在数据被提交到服务器之前验证数据
检测访客的浏览器信息
控制cookies，包括创建和修改等

二.用法

1.嵌入HTML

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

（1）脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>

<html>

<head>

document.write("hello world");

</script>

</head>

<body>

document.write("hello world");

</script>

</body>

</html>

（2）如果 <script> 放在 body 中，建议放在底部。因为浏览器会按照代码在文件中的顺序解析 HTML。

（3）如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效。所以，要将 JavaScript 代码放在 body 中，应置于 HTML 页面底部。

2.外部js脚本

（1）也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

（2）外部 JavaScript 文件的文件扩展名是 .js。外部文件不使用 <script> 标签，直接写 javascript 代码。

（3）如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>

<html>

<body>

</script>

</body>

</html>

3.在console调试

可以进入浏览器中console，如chrome F12 进入console，以命令行的形式输入js命令

4.事件触发

把 JavaScript 代码放入函数中，在事件发生时调用该函数。

function myFunction()

{

alert("hello");

}

</script>

三.变量

1.JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值

2.也可以使用let,const来定义，这三者的区别是：var与let涉及块级作用域，let 命令只在所在的代码块 {} 内有效，具体参考这里；const定义一个只读常量

(1)一般用var即可，let更推荐

var a; //声明

var a = 10; //初始化

a = 20 ; //赋值

(2)注意: 在JavaScript中，所有代码指令都会以分号结尾 (;)

3.JavaScript中数据类型主要有:

变量	解释	示例
String	字符串（一串文本）。字符串的值必须将用引号（单双均可，必须成对）扩起来。	var name = "John"; 字符访问:name[0] name[1]
Number	数字。JavaScript 只有一种数字类型。数字可以带小数点，也可以不带	let x1=34.00; let x2=34;
Boolean	布尔值（真 / 假）。 `true`/`false` 是 JS 里的特殊关键字，无需引号。	let x=true; let y=false;
Array	数组，用于在单一引用中存储多个值的结构。	let cars=["Saab","Volvo","BMW"]; 元素引用方法：cars[0],cars[1]
Object	对象，JavaScript 里一切皆对象，一切皆可储存在变量里。对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔	let person={firstname:"John", lastname:"Doe", id:5566}; let newObject = document.querySelector('h1'); 对象属性访问:object.AttributesName object[''AttributesName'']

4.算数运算符主要有:

+ 加法	- 减法	* 乘法	/ 除法
% 取模	++自增	--自减

5.比较运算符主要有:

==等于	=== 绝对等于（值和类型均相等）	!= 不等于	!== 不绝对等于（值和类型有一个不相等，或两个都不相等）
> 大于	< 小于	>= 大于或等于	<= 小于或等于

6.在常规的比较中，数据类型是被忽略的

var x = 10;

var y = "10";

if (x == y) //返回true，所以要用===

四.基本语法

1.条件语句

(1)if 语句只有当指定条件为 true 时，该语句才会执行代码。

if (condition)

{

当条件为 true 时执行的代码

}

(2)使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

if (condition)

{

当条件为 true 时执行的代码

} else

{

当条件不为 true 时执行的代码

}

(3)使用 if....else if...else 语句来选择多个代码块之一来执行。

if (condition1)

{

当条件 1 为 true 时执行的代码

} else if (condition2)

{

当条件 2 为 true 时执行的代码

}

else

{

当条件 1 和条件 2 都不为 true 时执行的代码

}

（4）三目运算

let variablename = (condition)?value1:value2

condition成立则variablename = value1 否则value2

2.循环语句

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

(1)for 循环

for (语句 1; 语句 2; 语句 3)

{

被执行的代码块

}

//语句 1 （代码块）开始前执行

//语句 2 定义运行循环（代码块）的条件

//语句 3 在循环（代码块）已被执行之后执行

(2)for/in遍历

for (x in 可遍历对象) // x 为属性名

{

执行代码块

}

(3)while 循环会在指定条件为真时循环执行代码块。

while (条件)

{

需要执行的代码

}

(4)do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

{

需要执行的代码

}

while (条件);

3.函数语法

(1)函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()

{

// 执行代码

}

(2)加上形参

function myFunction(var1,var2)

{

代码 return var3 //使用 return 语句时，函数会停止执行，并返回指定的值

}

(3)匿名函数，函数存储在变量中，不需要函数名称，通常通过变量名来调用。

var x = function (a, b)

{

return a * b

};

var z = x(4, 3);

4.异常判断

try 语句允许我们定义在执行时进行错误测试的代码块。catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

（1）JavaScript 语句 try 和 catch 是成对出现的。

（2）finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块。

try {

... //异常的抛出

}

catch(e) {

... //异常的捕获与处理

}

finally

{

... //结束处理

}

五.面向对象

1.新建对象，js中对象就是实例对象，js中没有类，只有对象构造器（类似于类）

//直接创建

objectName = {

name:value,name:function()

}

//new 创建

objectName = new Object()

//Object()是创建一个{}对象 objectName = new constructor

//constructor：构造器有点像python中的类

2.对象构造器

function Person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname; this.lastname=lastname; this.age=age; this.eyecolor=eyecolor;

//添加方法

this.changeName=changeName; function changeName(name) { this.lastname=name; }

}

//this通常指向的是我们正在执行的函数本身，或者是指向该函数所属的对象（运行时）类似python中self

3.根据构造器实例对象

var person1=new Person("John","Doe",50,"blue");

//一定要用new

var person2=new Person("Sally","Rally",48,"green");

//没有初始化数值的属性会指定undefined

4.访问对象属性与方法

person1.lastName;

person1["lastName"];

person1.changeName('dave')

5.向对象添加属性

person1.firstname="John";

person1.lastname="Doe";

person1.nationality = "English";

//可以给对象添加新的属性 Person.nationality = "English";

//如果给构造器直接添加新的属性,这里就是给Person这个对象加属性，不会遗传给Person的实例对象的

6.原型对象

（1）原型对象实际是构造实例对象的构造器中的一个属性，只不过这个属性是个对象

（2）这个原型对象中的属性与方法，都会被对象实例所共享（类似python中的类方法，类属性）

（3）但原型对象的属性不是对象实例的属性，只要修改原型对象上的属性和方法，变动就会立刻体现在所有对象实例上。

（4）JavaScript对每个创建的对象都会设置一个属性__proto__ ，指向它的原型对象xxx.prototype。

（5）如上面person1和person2的原型对象就是Person.prototype

person1.changeName ===

person2.changeName ...false

person1.changeName === Person.changeName ...false

//因为this绑定实例，所以方法都是各自实例独立的方法。所以说this跟python中self类似

（6）如果想要一种所有实例共享的方法或属性，那只有给Person.prototype中添加修改方法或属性，person1和person2都会得到更新，且person1.__proto__ 等同于Person.prototype

Person.prototype.changeName2= function (name)

{

this.lastname=name;

}

person1.changeName2 ===

person2.changeName2; ...true

person1.__proto__ ===

person2.__proto__; ...true

person1.__proto__ === Person.prototype; ...true

person1.__proto__ ...

{

changeName2: ƒ, constructor: ƒ

}

7.原型链

（1）由于xxx.prototype也是个某个构造器的实例对象，所以它也有__proto__指向一个原型对象yyy.prototype,所以会成链

（2）原型链的顶端或源头，是Object.prototype（有点像基因链呀，继承也是通过这条链实现的）

（3）读取实例对象的某个属性或方法时，JavaScript引擎按照对象-->原型对象a-->a的原型对象b----,最后到Object.prototype如果还是找不到，就返回undefined

（4）如果实例对象属性和原型对象属性名一样，同python，优先实例自身的属性

8.class语法

ES6提供了更接近传统语言的写法，引入了Class语法，但是实际上还是原型的本质，只是写法更简单？了

class Person

{

constructor(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

}

//添加原型方法

changeName(name)

{

this.lastname=name;

}

9.对象继承

（1）原型的继承

function Teacher(firstname,lastname,age,eyecolor,subject)

{

Person.call(this,firstname,lastname,age,eyecolor);

this.subject = subject; } Teacher.prototype = Object.create(Person.prototype);

//把Teahcer原型对象链接到Person原型对象下

Teacher.prototype.constructor = Teacher;

//将constructor构造器指回Teacher

}

（2）class继承

class Teacher extends Person

{

constructor(firstname,lastname,age,eyecolor,subject)

{

super(firstname,lastname,age,eyecolor);

this.subject = subject;

}

teach()

{

console.log(this.subject);

}

六.DOM对象

在浏览器中，页面被加载的时候，会自动生成这个页面的DOM对象（document）

DOM对象是一个树模型

可以通过这个对象：

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

1.查找HTML元素

（1）通过id查找

var x=document.getElementById("intro");

//如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

//如果未找到该元素，则 x 将包含 null。

（2）通过标签查找

var y=document.getElementsByTagName("div");

//如果有多个同类标签，则返回多个对象的数组

（3）通过类名查找

var x=document.getElementsByClassName("intro");

（4）因为查找返回的元素也是对象，所以可以对它再进行查找

var x=document.getElementById("main");

var y=x.getElementsByTagName("p");

//本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素

2.修改HTML元素

（1）改变HTML输出流

document.write(); //如果在文档(DOM)加载完成之后使用则会覆盖该文档

（2）修改 HTML 内容

document.getElementById(id).innerHTML=新的 HTML内容

（3）改变 HTML 元素的属性

document.getElementById(id).attribute=新属性值

3.DOM事件

（1）事件可以是浏览器行为，也可以是用户行为，当事件触发时，可以执行对应的js代码

常见事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载