技术教程 荐 超强的入门文章 ！！！ JavaScript 速成计划第三篇（面向对象与常用的内置对象、DOM对象、浏览器对象）! 正文

荐 超强的入门文章 ！！！ JavaScript 速成计划第三篇（面向对象与常用的内置对象、DOM对象、浏览器对象）!

2022-08-02,,,,

作者：浪子花梦，一个有趣的程序员 ~
此文将简单的讲解一个编程语言中最基础的东西，如变量、运算符、分支、循环、函数等等 . . .

其他二篇文章如下：

  1. 超强的入门文章 ！！！ JavaScript 速成计划第一篇（超基础语法详解）!
  2. 超强的入门文章 ！！！ JavaScript 速成计划第二篇（杂项详解：JS操作HTML 与 CSS、异常、事件）!

文章目录

  1. 面向对象基础详解
  2. 内置对象详解
    2.1、String 字符串对象
    2.2、Date 日期对象
    2.3、Array 数组对象
    2.4、Math 运算对象
  3. DOM对象详解
  4. 浏览器对象详解
    4.1、Window 对象
    4.2、计时器
    4.3、History 对象
    4.4、Location 对象
    4.5、Screen 对象

面向对象基础详解

面向对象是一种非常重要的编程思想，有着其它编程语言基础的小伙伴应该知道面向对象思想，JavaScript 中的对象语法方面和其它语言有着那么一点点区别，但总体来说都是一样，封装、继承、多态，下面让我们来聊聊 JavaScript 中的面向对象吧 . . .

创建对象的几种方式

1）定义对象进行赋值使用：

student = new Object();				// 定义一个对象
student.name = "langzihuameng";		// 指定所拥有的属性
student.age = 20;
document.write(student.name + "  " + student.age);

其中的 Object 是所有类的基类，我们可以在这个类上进行各种的操作，直接指定属性进行赋值即可，结果如下所示：

2）匿名方式创建对象：

student = {name: "langzihuameng", age: 20};
document.write(student.name + "  " + student.age);

直接在 {} 中指定需要的属性，返回一个对象给 student，结果如下所示：

3）定义函数返回对象：
JavaScript 允许我们使用函数来返回一个对象，使用如下所示：

function demo(name, age){
	this.name = name;       // 让参数成为对象的属性
	this.age = age; 
}
student = new demo("langzihuameng", 20);
document.write(student.name + "  " + student.age);

效果如下所示：

也可以使用另一种函数返回对象的方式，如下所示：

function demo(){			// 定义一个空对象
}

demo.prototype={			// 给对象指定属性
	name: "huameng",
	age : 20,
	eat:function(){
		alert("Hello, World!");
	}
}

var p = new demo();			// 定义对象
p.eat();

其中我们注意的是 prototype 这个属性，这个属性指定这个类所拥有的原型是什么东西，其中有两个变量，一个方法，结果如下所示：

面向对象之 “继承、多态、封装”

—— 继承
首先，我们先看看JS 中如何实现继承的，如下所示，我定义了两个类，让下面的那个类继承于上面的那个类：

// 基类
function People(name){
	this._name = name;
}

People.prototype.say = function(){
	alert("peo-hello " + this._name);
}

// 子类
function Student(name){
	this._name = name;
}
        
// 继承于 People
Student.prototype = new People();       

student = new Student();            // 定义派生类
student.say();

比较关键的就是下面这行代码，实现继承的关系：

Student.prototype = new People();

结果如下所示：

—— 多态
实现多态的方法与其它编程语言有点不同，思想就是先把基类的方法临时保存出来，然后改变派生类中想要改变的方法，使用情况如下所示：

其中的 this参数表示 Student类本身，然后通过作参数调用基类中的方法，结果如下所示：

—— 封装
封装是面向对象最重要的部分，这样我们可以保存数据不被外界所影响，对类的封装语法如下所示：

两个方框内的内容就是对类的方法的封装，封装过后，我们发现最后两行代码已经无法访问到这个类了，那么我们如何将这个类能够给外界所用呢？ 方法如下所示，将这个类给 window对象就可以了：

这样我们就能在外界访问其中的内容，结果如下所示：

内置对象详解

什么是内置对象呢？内置对象就是这个语言本身所拥有的一系列对象，此文将讲述 JavaScript 本身所拥有的对象，那么有哪些内置对象呢？如下所示：

此文章只讲述一些常用的对象 . . .
.

String 字符串对象

String 对象是最基本的对象，也是比较常用的对象，介绍和一些方法如下所示：

使用方法如下所示：

<div id="divid" class="div"></div>
    
<script>
	var str = "langzi huameng";
	
	// 串长度
	document.write("Length: " + str.length + "<br/>");
	
	// 指定子串的位置
	document.write("indexOf: " + str.indexOf("hua") + "<br/>");
	
	// 匹配串
	document.write("match: " + str.match("hua") + "<br/>");
	
	// 替换内容
	document.write("replace: " + str.replace("huameng", "xiaocong" + "<br/>"));
	
	// 字符串大小写
	document.write("toUpperCase: " + str.toUpperCase() + "<br/>");
	document.write("toLowerCase: " + str.toLowerCase() + "<br/>");
	
	// 比较重要的一个，分割字符串
	var arr = str.split(" ");
	document.write("arr[0]: " + arr[0] + "<br/>" + "arr[1]: " + arr[1] + "<br/>");

</script>

结果如下所示：

.

Date 日期对象

介绍及一些方法如下所示：

使用方法如下所示：

<script>
	var date = new Date();
        
	// 输出完整的时间
	document.write("date: " + date + "<br/>");
        
	// 获取年份
	document.write("getFullYear: " + date.getFullYear() + "<br/>");
        
	// 获取星期
	document.write("getDay: " + date.getDay() + "<br/>");
        
	// 获取毫秒
	document.write("getTime: " + date.getTime() + "<br/>");
        
	// 设置具体的日期
	date.setFullYear(2000,1,1);
	document.write("date: " + date + "<br/>");

</script>

结果如下所示：

.
Date 对象常见的用法如下所示，制作一个时间表：

其中画框的 setTimeout方法 表示延时多长时间调用一个方法，这里表示的是递归调用，将在下面计时器内容中作详细的讲解 . . .

效果如下所示：

Array 数组对象

数组是非常常用的一个东西，也是最最基础的数据结构，数组对象定义及常用方法如下所示：

使用方法如下所示：

<script>
	// concat 数组连接
	var a = ["lang", "zi"];
	var b = ["hua", "meng"];
	var c = a.concat(b);        // 并没有链接在a中  返回一个新的数组
	document.write(c + "<br/>");

	// sort 排序元素
	var a = [1,6,2,3,5,4,8,2];
	document.write(a.sort() + "<br/>");     // 升序
	document.write(a.sort(function (a, b) {
		return b - a;                       // 降序
	}) + "<br/>");

	// push 从后面插入元素
	var arr = ['a', 'b', 'c'];
	arr.push('d');
	document.write(arr + "<br/>");

	// reverse 数组逆序
	var arr = ['a', 'b', 'c'];
	document.write(arr.reverse() + "<br/>");
         
</script>

结果如下所示：

.

Math 运算对象

Math对象也是比较常用的一个方法，场合常常在做题的时候使用到，介绍及方法如下：

使用方法如下所示：

<script>
	document.write("round: " + Math.round(2.4) + "<br/>");
	document.write("random: " + parseInt(Math.random() * 10) + "<br/>");
	document.write("max: " + Math.max(20,10,3,13,33) + "<br/>");
	document.write("min: " + Math.min(20,10,3,13,33) + "<br/>");
	document.write("abs: ", Math.abs(-20) + "<br/>");
</script>

结果如下所示：

.

DOM对象详解

熟练的掌握 DOM对象的使用方法，可以灵活的对 HTML 进行控制，DOM对象中有着许多对 HTML 控制的方法，控制HTML的大大小小的部分，常见的方法如下所示：

每个方法使用方式如下所示（只提供代码，不包含演示部分）：

<p name="pname">Hello</p>
<p name="pname">Hello</p>
<p name="pname">Hello</p>
<p name="pname">Hello</p>
    
<h1 id="hid" title="Huameng"></h1>

<ul><li>1</li><li>2</li><li>3</li></ul>

<div id="divid">
	<p id="pid">langzihuameng</p>
</div>

<script>
	// getElementsByName() --- 获取 name
	function getElements(){
		// 获取所有name 为 pname的元素
		var v = document.getElementsByName("pname");   
		for (const p of v) {
			p.innerHTML = "World";
		}
	}

	// getElementsByTagName() --- 获取元素
	function getElementsTag(){
		var v = document.getElementsByTagName("p");
		for (const p of v) {
			p.innerHTML = "World";
		}
	}

	// getAttribute() --- 获取元素属性
	function getAttri(){
		var v = document.getElementById("hid");
		alert(v.getAttribute("title"));
	}

	// setAttribute() --- 设置元素属性
	function setAttri(){
		var v = document.getElementById("hid");
		v.setAttribute("title","langzi");
		alert(v.getAttribute("title"));
	}
        
	// childNodes --- 访问子节点
	function getChildNode(){
		var childnode = document.getElementsByTagName("ul")[0].childNodes;
		alert(childnode.length);
		alert(childnode[0].nodeType);
	}

	// parentNode --- 访问父节点
	function getParentNode(){
		var v = document.getElementById("pid");
		alert(v.parentNode.nodeName);
	}

	// createElement() --- 创建一个节点
	function createNode(){
		var input = document.createElement("input");
		input.type = "button";
		input.value = "按钮";
		document.body.appendChild(input);
	}
        
	// createTextNode() --- 创建文本节点
	function createTxtNode(){
		var txt = document.createTextNode("huameng");
		document.body.appendChild(txt);
	}
 
	// insertBefore() --- 插入一个节点
	function insertNode(){
		var div = document.getElementById("divid");
		var node = document.getElementById("pid");
		var newnode = document.createElement("p");
		newnode.innerHTML = "我已经插进来了，哈哈！";
		div.insertBefore(newnode, node);
	}
        
	// removeNode() --- 删除一个节点
	function removeNode(){
		var div = document.getElementById("divid");
		div.removeChild(div.childNodes[1]);
	}
       
	// offsetWidth --- 网页尺寸
	function getSize(){
		var width = document.body.offsetWidth || document.documentElement.offsetWidth;
		var height = document.body.offsetHeight;
		alert(width + ", " + height);
	}
 
</script>

我们可以通过调用每个方法来测试一下效果是如何的，大家可以自行测试 . . .
.

浏览器对象详解

浏览器对象是用来获取或设置浏览器的一些属性、一些行为等操作，常见的浏览器对象如下所示：

下面我将逐一来进行讲解它们的使用方法 . . .

.

Window 对象

Window 对象的介绍及常用方法如下所示：

画框框的这两句话可以看出来，window对象的地位是最大的，比如下面的这句代码是这样的：

document.write("Hello, World!" + "<br/>");

我们也可以这样写：

window.document.write("Hello, World!" + "<br/>");

一些常用的方法使用情况如下所示：

<button onclick="newIndex()">打开</button>
<br/>
<button onclick="closeIndex()">关闭</button>
<br/>

<script>
	// 浏览器内部的 高度与宽度
	window.document.write("window.innerHeight: " + window.innerHeight + "<br/>");
	window.document.write("window.innerWidth: " + window.innerWidth + "<br/>");

	// 打开一个新窗口
	function newIndex(){
		window.open("newindex.html","windowname","height=300px,width=300px,top=300px,left=300px,toobar=no,menubar=no");
	}

	// 关闭当前的窗口
	function closeIndex(){
		window.close();
	}

</script>

当我们点击上面的那个按钮时，将会打开一个新的网页，而点击下面那个按钮时，将会关闭当前的这个网页，使用效果如下所示：

.

计时器

计时器这个部分非常的重要，我们可以利用计时器做许多的事，比如写一个贪吃蛇小游戏，利用计时器控制蛇的移动，通过停止计时器可以来实现游戏的结束，总之，计时器的功能很强大，大家一定要把这个知识给掌握好 . . .

介绍如下所示：

其中的 setTimeout 方法，我们在讲 Date对象的时候使用过了，我们在此处将再一次的使用 . . .

首先，我们先来看第一种计时方法，setInterval 与 clearInterval 的使用方式：

<p id="pid"></p>
<button onclick="stopTime()">停止</button>	// 点击按钮时，停止计时器

<script>
	var v = setInterval(() => {
				goTime()	// 到达 1000 毫秒时，需要执行的方法
		}, 1000);

	function goTime(){
		var date = new Date();

		var t = date.toLocaleTimeString();              // 转化为 "时：分：秒" 的格式
            
		document.getElementById("pid").innerHTML = t;   // 显示在网页之上
	}

	function stopTime(){
		clearInterval(v);       // 停止计时器
	}


</script>

一直更新当前的最新时间，然后点击按钮停止计时器，效果如下所示：

我们再来看第二种计时方法，setTimeout 与 clearTimeout 的使用方式：

<!-- 网页被加载时执行方法 -->
<body onload="goTime()">   
    <button onclick="stopTime()">停止</button>
	<script> 
		var i = 0;
        var w;
        function goTime(){
			alert(i++);     // 弹出一个对话框

			w = setTimeout(() => {
                goTime();   // 延迟两秒执行的方法，此处是递归执行
            }, 2000);
        }

		function stopTime(){
            clearTimeout(w);    // 停止计时器
        }
    </script>
</body>

效果如下所示：

.

History 对象

使用 History对象，我们可以自由的历史之中穿梭，介绍及方法如下所示：

我们准备两个网页用于测试这个对象的效果，如下所示：

当我们点击 index中的一个链接时，进入 newindex之中，然后点击 newindex中的按钮返回到 index之中，再点击index中的按钮进入到 newinex之中，代码实现如下所示：

  • index.html 中的代码如下所示：
  • newindex.html 中的代码如下所示：

代码部分比较简单，实现后的效果如下所示：

.

Location 对象

Location对象介绍及一些常用的方法如下所示：

使用方法如下所示：

<p id="pid1"></p>
<p id="pid2"></p>
<p id="pid3"></p>
<button onclick="demo()">按钮</button>

<script>
	function demo(){
		document.getElementById("pid1").innerHTML = location.protocol;
		document.getElementById("pid2").innerHTML = location.pathname;
		document.getElementById("pid3").innerHTML = location.href;
            
		setTimeout(() => {
				location.assign("newindex.html");   // 加载一个新的网页
			}, 3000);
		}
</script>

效果如下所示：

.

Screen 对象

Screen对象的介绍及一些常用的方法如下所示：

使用方式如下所示：

<p id="p1"></p>   
<p id="p2"></p>

<script>
	document.getElementById("p1").innerHTML = "可用的屏幕宽度、高度：" + screen.availWidth + " " + screen.availHeight;
	document.getElementById("p2").innerHTML = "屏幕宽度、高度：" + screen.width + " " + screen.availHeight;
</script>

结果如下所示：

.
.
.

本文地址：https://blog.csdn.net/weixin_42100963/article/details/107352387

《荐 超强的入门文章 ！！！ JavaScript 速成计划第三篇（面向对象与常用的内置对象、DOM对象、浏览器对象）!.doc》

下载本文的Word格式文档，以方便收藏与打印。

Copyright 2023. 昆居客 - IT编程,互联网信息技术文档大全!