JavaScript语法、DOM对象和监听事件简介

青灯文案

已于 2024-04-13 22:11:25 修改

阅读量772

点赞数 9

分类专栏： Web开发文章标签： javascript

于 2024-03-28 18:28:50 首次发布

本文链接：https://blog.csdn.net/Reggie97/article/details/137116095

版权

Web开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript作为一种弱类型编程语言，其基本语法、DOM和BOM对象的运用，以及如何监听事件和处理函数、全局变量、对象类型、构造函数、this指向和JSON格式的使用。

摘要由CSDN通过智能技术生成

JavaScript是一种专门在浏览器编译并执行的编程语言，用于处理用户与浏览器之间请求问题。
JavaScript是采用弱类型编程语言风格对面向对象思想来进行实现的编程语言。

文章目录

一、弱类型编程语言与强类型编程语言

1、强类型编程语言风格

认为对象行为应该受到其修饰类型严格约束。

Java采用【强类型编程语言风格】对【面向对象思想】来进行实现的编程语言

class student{
    public string sname
    public void sayHello () {
        system.out.print ( "hello wor1d")
    }
}
studentstu = new student()；
stu.sname = "mike"；// stu对象能够调用属性只有sname
stu.sayHello()；// stu对象能够调用方法只有sayHello()
stu.sid = 10；// 在Java认为是语法错误，修饰stu对象的student类型没有提供这个属性

2、弱类型编程语言风格

认为对象行为不应该受到其修饰类型约束。可以根据实际需要来决定对象调用属性和方法；

JavaScript采用【弱类型编程语言风格】对【面向对象思想】来进行实现的编程语言

var stu = new object()；// stu对象相当于【阿Q】
stu.car = "劳斯莱斯"；// 合法
stu.play = function () {return "天天打游戏"}
stu.play ()；

二、JavaScript语言的基本语法

1、JavaScript中变量声明方式

命令格式：

	var aa;
 	var aa = 1;
 	var aa, bb = 2;
 	// 现阶段常使用 let（变量）与const（常量）定义
 	let cc = [0, 1];
 	const dd = [2, 3]

注意：在JavaScript变量/对象，在声明时不允许指定【修饰类型】，只能通过var来进行修饰。

2、JavaScript中标识符命名规则

标识符只能由四种符号组成英文字母，数字，下划线，美元符号($)；
标识符首字母不能以“数字"开头；
标识符不能采用JavaScript关键字比如var；

3、JavaScript数据类型

数据类型可以分为基本数据类型和高级引用数据类型；

基本数据类型： 数字类型(number) ；字符串类型(string) ；布尔类型(boolean)；

数字类型(number)：JavaScript中将整数与小数合称为number类型；
字符串类型(string)：JavaScript中字符与字符串合称为string类型，使用''或者""；
布尔类型(boolean)：Javascript中boolean类型的值只有true或则false；

高级引用数据类型： object类型；function类型

object类型：JavaScript中所有通过【构造函数】生成的对象都是object类型；
function类型：相当于Java中(java.lang.reflect.Method)JavaScript所有的函数都是function类型；

4、JavaScript中特殊值

undefined： JavaScript中所有变量在没有赋值时，其默认值都是undefined，由于JavaScript根据变量的赋值来判断变量类型，此时由于变量没有赋值，因此JavaScript无法判断当前变量数据类型，此时返回也是undefiled，初学者将undefined也理解为是一种数据类型，这种理解是错误。
null： JavaScript中当一个对象赋值为null时，表示对象引用了一个空内存，这个空内存既不能存储数据也不能读取数据。此时这个对象数据类型，在JavaScript依然认为是object类型。
NaN： JavaScript中当一个变量赋值为NaN，表示变量接收了一个非法数字，123合法数字，abc123非法数字。此时这个变量数据类型，在JavaScript依然认为number类型。
infinity： JavaScript中当一个变量赋值为infinity，表示变量接收了一个无穷大数字，此时这个变量数据类型，在JavaScript依然认为number类型。

5、JavaScript中控制语句

JavaScript中控制语句与Java中控制语句语法格式完全一致。

6、JavaScript中函数声明方式

命令格式：

function 函数名（形参名1，形参名2){
    Javascript命令行
    Javascript命令行
    return 将函数运行结果进行返回   
}

注意：

JavaScript中，所有函数在声明时，都需要使用function进行修饰；
JavaScript中，所有函数在声明时，禁止指定函数返回数据类型；
JavaScript中，所有函数在声明时，形参既不能使用var来修饰也不能使用数据类型修饰；
JavaScript中，所有函数在声明时，如果有返回值，此时应该通过return进行返回；

7、JavaScript函数调用方式

1、直接调用：
这是最直接的方式，只需在函数名后加上一对圆括号即可。

function sayHello() {  
    console.log("Hello, world!");  
}  
  
sayHello();  // 输出 "Hello, world!"

2、作为对象的方法调用：
在JavaScript中，对象可以拥有方法，这些方法其实就是附加在对象上的函数。

let person = {  
    name: "Alice",  
    sayHello: function() {  
        console.log(`Hello, my name is ${this.name}!`);  
    }  
};  
  
person.sayHello();  // 输出 "Hello, my name is Alice!"

3、通过构造函数调用：
在JavaScript中，构造函数是一种特殊的函数，用于初始化新创建的对象。

function Person(name) {  
    this.name = name;  
    this.sayHello = function() {  
        console.log(`Hello, my name is ${this.name}!`);  
    };  
}  
  
let alice = new Person("Alice");  
alice.sayHello();  // 输出 "Hello, my name is Alice!"

4、通过call或apply方法调用：
这两个方法都可以用来调用一个函数，并指定函数内部this的值。call方法接受一个参数列表，而apply方法接受一个参数数组。

function greet(greeting, punctuation) {  
    return greeting + ', ' + this.name + punctuation;  
}  
  
let person = {name: 'Alice'};  
  
console.log(greet.call(person, 'Hello', '!'));  // 输出 "Hello, Alice!"  
console.log(greet.apply(person, ['Hello', '!']));  // 输出 "Hello, Alice!"

5、通过new Function构造器调用：
Function构造器可以用于动态地创建函数。

let sayHello = new Function('console.log("Hello, world!")');  
sayHello();  // 输出 "Hello, world!"

注意，虽然new Function可以动态地创建函数，但在实际开发中，由于安全性和性能问题，通常会避免使用它。

三、JavaScript语言中的BOM与DOM对象

在JavaScript中，DOM和BOM是两个非常重要的概念，它们分别代表了网页文档和浏览器窗口的编程接口。一个BOM有多个document，一个document有多个DOM。

DOM（Document Object Model，文档对象模型）

DOM是一个编程接口，用于HTML和XML文档。
它定义了文档的结构，以及文档中的元素之间的关系。
DOM将文档（如HTML文档）解析为一个由节点和对象（由节点组成的）组成的结构集合。
通过这种结构，可以动态地改变文档的内容和呈现方式。

例如，可以添加、删除或修改页面上的元素，改变元素的属性，或者监听和响应元素的事件。

在开发中，DOM的使用非常频繁，因为几乎所有的前端交互和动态内容都需要通过DOM来实现。

例如，通过DOM可以获取用户输入的表单数据，可以动态地改变页面的布局和样式，可以响应用户的点击、滚动等事件。

BOM（Browser Object Model，浏览器对象模型）

BOM则提供了独立于任何特定文档的对象，用于访问和控制浏览器窗口。
BOM由一系列相关的对象构成，包括Window对象、Location对象、Navigator对象、Screen对象、History对象等。
这些对象提供了与浏览器窗口进行交互的方法，例如打开新窗口或标签页，导航到不同的URL，获取浏览器的信息，获取屏幕分辨率等。

在开发中，BOM的使用虽然不如DOM频繁，但在某些场景下也是必不可少的。

例如，通过BOM可以打开新的浏览器窗口或标签页，可以获取用户的地理位置信息，可以监听窗口的大小变化等。

开发中常使用哪种对象

在开发中，DOM的使用频率通常要高于BOM。因为DOM涉及到页面的内容、结构和样式，这是前端开发的核心工作。而BOM更多的是涉及到浏览器窗口的操作和信息的获取，虽然也很重要，但在日常开发中使用的频率相对较低。当然，这并不意味着BOM不重要，只是在不同的开发场景下，它们的使用频率和重要性有所不同。

1、DOM对象详解

JavaScript不能直接操作HTM标签，只能通过HTM标签，关联的DOM对象对HTM标签下达指令。

1、DOM对象生命周期

浏览器在接收到HTML文件之后，将HTML文件标签加载到浏览器缓存中，每当加载一个HTML标签时候，自动为这个标签生成一个实例对象，这个实例对象就是DOM对象；
在浏览器关闭之前或请求其他资源文件之前，本次生成的DOM对象一直存活在浏览器缓存中；
在浏览器关闭时候，浏览器缓存中dom对象将要被销毁；
在浏览器请求到新资源文件后，浏览器缓存中原有的dom对象将会被覆盖；

2、document对象及其生命周期

document对象被称为文档对象。
document对象用于在浏览器内存中根据定位条件定位DOM对象。
在浏览器将网页中所有标签加载完毕后，在内存中将使用【树形结构】存储这些DOM对象。
在树形结构生成完毕后由浏览器生成一个document对象管理这颗树(DOM树)。
即在浏览器将接收网页中标签加载完毕后，自动在浏览器内存生成一个document对象。
一个浏览器运行期间，一个浏览器窗口只会生成一个document对象。
在浏览器关闭时，负责将document对象进行销毁。
如果一个系统界面由三个部分组成，叫做三个窗口，会有三个document进行管理。
一个HTML文件就会有一个document。
一个BOM有多个document，一个document有多个DOM。

3、通过document对象定位DOM对象方式

1、根据HTML标签的ID属性值定位DOM对象

// 命令格式
var domobj = document.getElementById("id属性值");
// 举例
var domobj = document.getElementById ("one");

2、根据HTML标签的name属性值定位DOM对象

// 命令格式
var domArray = document.getElementsByName ("name属性值");
// 举例
var domArray =document.getElementsByName ("deptNo")；

<input type="checkbox" name="deptNo" value="10">部门10</input>
<input type="checkbox" name="deptNo" value="20">部门20</input>
<input type="checkbox" name="deptNo" value="30">部门30</input>

通知document对象将所有name属性等于deptNo的标签关联的DOM对象进行定位并封装到一个数组进行返回。domArray就是一个数组存放本次返回的所有DOM对象。

3、根据HTML标签类型定位DOM对象

// 命令格式
var domarray =document.getElementsByTagName("标签类型名");
//举个栗子
var domArray = document.getElementsByTagName("p");

<p>段落标签</p>;

通知document对象将所有段落标签关联的dom对象进行定位并封装到一个数组返回。

4、DOM对象对HTML标签属性操作

1、DOM对象对标签value属性进行取值与赋值操作

// 取值操作
var domObj= document.getElementById("one");
var num = domobj.value;

// 赋值操作
var domobj = document.getElementById("one");
domobj.value = "abc";

2、DOM对象对标签中样式属性进行取值与赋值操作

// 取值操作
var domobj = document.getElementById("one"); //读取当前标签【背景颜色属性】值
var color = domobj.style.背景颜色属性;

// 赋值操作
var domobj = document.getElementById("one"); //通过DOM对象对背景颜色属进行赋值
domobj.style.背景颜色属性 = 值;

3、DOM对象对标签中状态属性进行取值与赋值操作

状态属性：状态属性的值都是boolean类型。
disabled = true：表示当前标签不可以使用。
disabled = false：表示当前标签可以使用。
checked：只存在与radio标签与checkbox标签。
checked = true ：表示当前标签被选中了。
checked = false：表示当前标签未被选中。

// 取值操作
var domobj = document.getElementById("one");
var num = domObj.checked;

// 赋值操作
var domobj= document.getElementById("one");
domobj.checked = true;

4、DOM对象对标签中文字显示内容进行赋值与取值

文字显示内容：只存在于双目标签之间。<tr>100</tr>

// 取值操作
var domObj = document.getElementByid("one");
var num1 = domobj.innerText;

// 赋值操作
var domObj = document.getElementByid("one");
domObj.innerText = 值;

innerText与innerHTM区别：

innerText与innerHTML都可以对标签文字显示内容属性进行赋值与取值。
innerText只能接收字符串。
innerHTML既可以接收字符串又可以接收html标签。

四、JavaScript语言的监听事件

1、监听事件：键盘和鼠标监听事件

监听用户在何时以何种方式对当前标签进行操作，当监听到相关行为时，通知浏览器调用对应JavaScript函数对当前用户请求进行处理。主要有两大类：键盘监听事件和鼠标监听事件。

1、监听鼠标操作标签

onClick：监听用户何时使用鼠标单击当前标签。
onBlur：监听用户何时通过鼠标让当前标签丢失光标。
onFocus：监听用户何时通过鼠标让当前标签获得光标。
onMouseOut：监听用户何时将鼠标从当前标签上方移开。
onMouseOver：监听用户何时将鼠标悬停当前标签上方。

2、监听键盘操作标签

onKeyDown：监听用户何时在当前标签上按下键盘。
onKeyUp：监听用户何时在当前标签上弹起键盘。

2、onLoad监听事件

作用：监听浏览器何时将网页中HTML标签加载完毕。

意义：浏览器每加载一个HTML标签时，自动在内存生成一个dom对象。

在浏览器将网页所有标签加载完毕时，意味当前网页中所有标签都生成对应DOM对象

<script type="text/javascript">

function fun1() {

    window. alert("fun1 is run. . .")；
    
}

</script>

<body onload="fun1 () ">

</body>

3、DOM实现监听事件并与HTML标签绑定

实际开发过程中，同一个监听事件往往与多个HTML标签进行绑定，这样增加开发强度，在未来维护过程中增加维护难度。

// 命令形式
domobj.监听事件名 = 处理函数名;    ***此处处理函数名后面是不能出现（）***

// 举例
var domobj = document.getElementById("one" );
domobj.onclick = fun1; // 注意函数名后面不能有()

// 相当于
<input type="button" id="one" onclick="fun1()" />  // 此处函数名后面必须有()

五、JavaScript语言中的常见语法

1、arguments参数

JavaScript中，每一函数都包含一个arguments属性，arguments属性是一个数组。
在函数调用时，将实参输入到函数的arguments中，再由arguments将数据传递给形参。
有了arguments属性存在，可以将JavaScript中函数在调用时传递实参与形参进行格式，增加函数调用灵活性。
arguments属性只能在函数体内使用，不能在函数体外使用。

2、function属性

function是JavaScript中一种高级数据类型，一个function类型对象用于管理一个具体函数，JavaScript中function类型相当于Java中Method类型。

function类型对象声明方式：

标准声明方式
匿名声明方式

标准声明方式

function 函数对象名 (参数1, 参数2){
    命令;
}

匿名声明方式

var 函数对象名 = function(参数1, 参数2)(命令1, 命令2...);

function类型对象的创建时机

浏览器在加载<script>时，共加载两次。

第一次加载，将<script>标签所有以标准形式声明函数对象进行创建。
第二次加载，将<script>标签所有命令行按照自上而下顺序来执行。

3、局部变量

在函数执行体内，通过var修饰符声明的变量，局部变量只能在当前函数执行体使用，不能在函数执行体外使用。

function fun1 () {
	var name ="mike"; // 局部变量
}

4、全局变量

全局变量可以在当前HTML文件中所有的函数中使用，全局变量被声明时，自动分配给window对象作为其属性。

声明全局变量：

第一种方式：直接在<script>标签下，通过var声明的变量，就是全局变量。
第二种方式：在函数执行体内，没有通过var修饰符修饰的变量也是全局变量。

5、object类型对象

在Javascript认为所有通过构造函数生成对象其数据类型都是object类型。object类型对象在创建完毕后，可以根据实际情况，任意添加属性和方法，也可以移除属性和方法。

let object = {  
    property1: 'value1',  
    property2: 'value2',  
    method1: function() {  
        console.log('This is method1');  
    }  
};  

// 添加属性
object.property3 = 123;
object["property4"] = 456;

// 添加函数
object.method2 = function() { };
object["method3"] = function;

// 删除属性  
delete object.property1;  

// 删除方法  
delete object.method1;  
  
console.log(object);

6、自定义构造函数

function 函数对象名() {
	let a = 1;
}

var object类型对象 = new 函数对象名();

普通函数与构造函数区分

函数没有调用之前，无法区分函数身份，只能根据函数调用形式区分。
判断普通函数： var num = 函数对象名()。
判断构造函数：var num = new 函数对象名()。
返回值：普通函数运行后需要通过将执行结果返回，构造函数运行后，直接返回一个object类型的对象，此时函数return相当于无效！

7、JavaScript中this指向

JavaScrit中this指向与Java中this指向完全一致的。
在构造函数，this指向当前构造函数生成object类型对象。
在普通函数，this指向调用当前函数的实例对象。

8、JSON格式

JavaScript中得到object类型对象方式：

方式1：由构造函数生成的对象都是object类型对象。
方式2：由JSON数据描述格式生成对象都是object类型对象。

标准命令格式：

var obj = { "属性名1": 值, "属性名2": 值};

开发人员习惯于将由JSON生成object类型对象称为JSON对象。