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

时间 2020-08-04 标签超强入门文章 javascript 速成计划第三面向对象经常使用内置对象 dom 浏览器

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

其余二篇文章以下：html

文章目录

面向对象基础详解
内置对象详解
2.一、String 字符串对象
2.二、Date 日期对象
2.三、Array 数组对象
2.四、Math 运算对象
DOM对象详解
浏览器对象详解
4.一、Window 对象
4.二、计时器
4.三、History 对象
4.四、Location 对象
4.五、Screen 对象

面向对象基础详解

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

建立对象的几种方式

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

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，结果以下所示：
web

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>

结果以下所示：

. . .

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

文章目录

面向对象基础详解

建立对象的几种方式

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

内置对象详解

String 字符串对象

Date 日期对象

Array 数组对象

Math 运算对象

DOM对象详解

浏览器对象详解

Window 对象

计时器

History 对象

Location 对象

Screen 对象

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