JS面向对象编程基础部分(2) 3.31

最新推荐文章于 2023-06-01 23:26:56 发布
最新推荐文章于 2023-06-01 23:26:56 发布
阅读量537 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangbinhui81218/article/details/22891613
版权
**
DOM编程：
1.为什么需要DOM？
（1）.通过dom编程，我们可以写出各种网页游戏；
（2）.ajax基础；
2.简介：（附件简介原理图）
3.原理介绍：（原理介绍图）
4.如何把html文档映射成DOM树：
（dom树图）
5.dom对象简介：
（dom对象简介图）
6.window对象：
（1）.confirm

举例：显示带有一段消息以及确认按钮和取消的对话框

<!--HTML代码-->
<body>
<input type="button" value="测试confirm" οnclick="testConfirm()"/>

</body>

//JSd代码：
function testConfirm(){
	var res=window.confirm("测试confirm");
	if(res){
		alert("确定");
	}else{
		alert("取消");
	}
}

（2）.setInterval(函数名，毫秒数)按照指定的周期（毫秒级）循环调用某个函数或计算表达式

举例1：（时钟效果效果） 

<!--HTML代码-->
<body>
<span id="myTime"></span>
</body>

//JSd代码：
function getMyTime(){
    //这是没法刷新时间的
    //document.write(new Date());
    //换一种方法，把时间加到span当中
    //在文本间的文本就是通过 对象.innerText来实现的
    document.getElementById("myTime").innerText=new Date().toLocaleString();

}

setInterval('getMyTime()',1000);

（3）.clearInterval(timer)//timer为setInterval()方法返回的一个值
取消由setInterval()设置的定时器；

(4).setTimeOut()
在指定的毫秒数后开始执行某个函数或计算表达式，但只调用一次
举例：

            1.在打开页面5秒钟后跳出“hello”
            2.图片停止跑动后5秒又继续运动；


举例2：（图片切换效果）

<!--HTML代码-->
<body>
<div id="moveDiv" style="left:0px;">
<img src="1.jpg" id="moveObj"/>
</div>
</body>


//JSd代码：
var n=1;
var left;
var left2;
var count=0;
function run(){

	var left=document.getElementById("moveDiv").style.left;
	count++;
	if(count==10){
		//停止setInerval（）
		clearInterval(myTimer);
		//重启setInterval()
		setTimeout('reRun()',5000);
		//一定要注意这边count要清0；否则会停不下来；
		count=0;
	}
	//首先取得图片img的src属性
	//通过一个取模算法，来循环得到图片地址
	document.getElementById("moveObj").src=(n++%4)+1+".jpg";
	//获取left属性并进行字符串和数值转换
	left=parseInt(left.substring(0,left.indexOf('p')));
	document.getElementById("moveDiv").style.left=(left+50)+"px";
}

//myTimer表示返回setInterval()的定时器值
var myTimer=setInterval('run()',1000);

//这边需要单独再开一个函数说明，因为要取得myTimer用于后面clearInterval()来停止
function reRun(){
	myTimer=setInterval('run()',1000);
}


(5).clerTimeout(timer);
取消setTimeout()定时器
举例： 

//JSd代码：
function testClearTimeout(){
	alert("测试clearTimeout()");
}
var myTimer=setTimeout('testClearTimeout()',1000);
clearTimeout(myTimer);

(6).moveTo(x,y):把窗口的坐标移到指定目标
    moveBy(x,y):可相对于窗口的当前坐标把它移动指定像素
    resizeTo(x,y):放大窗口到指定大小
    resizeBy(x,y):按照指定的像素调整窗口的大小
    open(url,"_blank||_self","窗口特征"):打开一个新窗口或已命名窗口 

<!--HTML代码-->
<body>
<input type="button" value="moveTo" οnclick="test(this)"/>
<input type="button" value="moveBy" οnclick="test(this)"/>
<input type="button" value="resizeTo" οnclick="test(this)"/>
<input type="button" value="resizeBy" οnclick="test(this)"/>
<input type="button" value="open" οnclick="test(this)"/>
</body>

//JSd代码：
function test(eventObj){
	if(eventObj.value=="moveTo"){
		window.moveTo(200,200);
		alert("aa");
	}else if(eventObj.value=="moveBy"){
		window.moveBy(100,100);
		alert("aa");
	}else if(eventObj.value=="resizeTo"){
		window.resizeTo(200,200);
		alert("aa");
	}else if(eventObj.value=="resizeBy"){
		window.resizeBy(100,100);
		alert("aa");
	}
	else if(eventObj.value=="open"){
		window.open("newOne.html","_blank","titlebar=no");
	}
}


(7).opener:返回对创建窗口的窗口引用：

举例：父窗口和子窗口对话： 

父窗口代码：
<!--HTML代码-->
<body>
父窗口
<input type="button" value="创建一个新窗口" οnclick="test(this)"/>
<span id="info1" >消息</span>
<input type="text" value="" id="oldOne"/>
<input type="button" value="给子窗口发消息" οnclick="test(this)"/>

</body>

子窗口代码：
<!--HTML代码-->
<body>
<input type="text"  value="" id="newOne"/>
<input type="button" value="给父窗口发消息" οnclick="test(this)"/>
</body>


两者共享的JS代码：

//JSd代码：
var newWindow;
function test(eventObj){
	
	if(eventObj.value=="创建一个新窗口"){
		//创建一个窗口并且返回新窗口对象
		newWindow=window.open("newOne.html","_blank");
		alert("aa");
	}else if(eventObj.value=="给子窗口发消息"){
		//新窗口获得就窗口信息
		newWindow.document.getElementById("newOne").value=$("oldOne").value;
		alert("aa");
	}else if(eventObj.value=="给父窗口发消息"){
		//父窗口获得子窗口信息
		opener.document.getElementById("info1").innerText=$("newOne").value;
		alert("aa");
	}
}

function $(id){
	return document.getElementById(id);
}


（8）. 案例
一个js版本的用户系统，当用户输入’sunchen’，密码’123’，就跳到第二页，5秒后，自动跳转到第三个页面。
*********************************************************************************8



*********************************************************************************8
//登入界面代码：
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="mario.css"></link>
<script languange="javascript" type="text/javascript" src="Mario.js"></script>

<script languange="javascript">
//JSd代码：
//登入界面JS代码：
function $(id){
	return document.getElementById(id);
}
function check(){
	if($("user").value=="wangbinhui"&&$("passw").value=="123"){
		return true;
	}else{
		$("user").value="";
		$("passw").value=""
		return false;
	}
}
</script>
</head>
<!--HTML代码-->
<body>
<form action="newOne.html">
用户名：<input type="text" id="user"/>
密 码:<input type="password" id="passw"/>
<input type="submit" value="登入" οnclick="return check()"/>

</body>
</html>
***********************************************************************



//跳转页面代码：

<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href=".css"></link>
<script languange="javascript" type="text/javascript" src="Mario.js"></script>
<script languange="javascript">
//JSd代码：
//跳转界面JS代码：
function openNewOne(){
	window.open("newTwo.html","_self");
	clearInterval(myTimer);
}
function changeSec(){
	$("waitSec").innerText=parseInt($("waitSec").innerText)-1;
}

var myTimer=setInterval("changeSec()",1000);
setTimeout("openNewOne()",5000);
</script>
</head>
<!--HTML代码-->
<body>
等待<span id="waitSec">5</span>秒后跳转到管理界面
</body>
</html>

*******************************************************

//管理界面代码：

<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href=".css"></link>
<script languange="javascript" type="text/javascript" src="Mario.js"></script>
</head>
<!--HTML代码-->
<body>
管理界面
</body>
</html>

***************************************************************

//三者共享JS代码:
function $(id){
	return document.getElementById(id);
}
*************************************************************



2.event对象：
（1）.event对象代表事件的状态，比如事件在其中发生的元素，键盘按键状态，鼠标的位置
，鼠标的按钮状态，事件通常与函数结合使用；
（2）.如何绑定事件监听：
    1.直接在某个html控件上指定
    <input type="button" vale="刷新页面" οnclick="test()">
    2.getElementById("id名")获取控件后，再绑定：
    function test(){`````````}
    document.getElementById("bnt1").οnclick=test;
    3.通过addEventListener()或则attachEvent()来绑定；
    4.一个事件可有多个事件监听者；
    W3C DOM标准：
    [Object].addEventListener(“name_of_event”,fnHandler,bCapture);
    [Object].removeEventListener(“name_of_event”,fnHandler,bCapture);
    IE中独有的事件监听方法：
    [Object].attachEvent(“name_of_event”,fnHandler,bCapture);
    [Object].detachEvent(“name_of_event”,fnHandler,bCapture);

案例：如果我们有一个投票系统，但是只能投一次票（使用attachEvent detachEvent）


<script languange="javascript">
//JSd代码：

	function test(){
		window.alert("你投了一次票");
		document.getElementById("bnt1").removeEventListener("click",test);
	}
</script>
</head>
<!--HTML代码-->
<body>
<input type="button" id="bnt1" value="投票"/>
<script language="javascript">
	//特别注意这时不是Onclick了，而是click,不然会不兼容；
	document.getElementById("bnt1").addEventListener("click",test);
</script>
</body>


****************************

案例：要求用户在一个输入框中输入一个数，如果不是数字，则给出提示（你输入的不是数字） 


<script languange="javascript">
//JSd代码：

	function test(event){
		//0~9的ASCII码范围
		if(event.keyCode<48||event.keyCode>57){
			alert("你输入的不是一个数");
			return false;
		}
	}
</script>
</head>
<!--HTML代码-->
<body>
<input type="text" id="input" οnkeypress="return test(event)"/>

</body>













u010092682
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初学者也能看懂的 Vue3 源码中那些实用的基础工具函数
u012384510的博客
08-16 524
1. 前言大家好，我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一次读源码的小伙伴都感觉很有收获，感兴趣可以加我微信ruochuan12，拉你进群学习。写相对很难的...
jquery-3.31版本
09-04
jquery-3.31版本
毫秒和秒的换算工具_javascript常用的工具函数（一）
weixin_39992462的博客
12-03 1530
分享几个在javascript开发过程中常用的一些工具函数：获取非行间样式:// 第一个参数为对象obj 第二个参数为样式attrfunction getStyle(obj, attr) {if (obj.currentStyle) {return obj.currentStyle[attr];} else {return getComputedStyle(obj)[attr];}}获取随机数:/...
event.returnValue和return false的区别
开向幸福的向阳花
12-04 5320
首先：概念如下： event.returnValue的作用就是： 当捕捉到事件(event)时，做某些判断，如果判断失败，则阻止当前事件继续运行，这样讲您也许还不是特别理解，我再举一个例子，该例子达到的效果是：不能在一个输入框中输入小数。 return false的作用就是：返回一个false值； 在一些用return false；禁止一些浏览器的默认行为的时候，由于原先默认的行为是tur
前端 JavaScript 设计模式前奏--面向对象-Class类
黑木令之佛性
01-07 1009
面向对象–class 类 1. 类 的声明 1.1 方式一: 传统的使用 构造函数 的方式, 模拟一个类的方式 /** * 1. 方式一: 传统的使用 构造函数 的方式, 模拟一个类的方式 * * 1. 这里我们就声明了一个 Animal1 类 。 */ function Animal1 () { // 通过 this 来表明这是一个构造函数 。 this.name = 'name' } console.log('Animal1: ', Animal1) 1.2 方式二: ES6 中对 c
随笔二——JavaScript脚本语言
1514的博客
03-26 1088
模块三 JavaScript脚本语言 JavaScript（简称“JS”）由Netscape公司的Brendan Eich在网景导航者浏览器上首次设计实现而成。为了确保不同的浏览器上运行的JavaScript标准一致，几个公司共同制定了JS的标准命名为ECMAScript。JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命
初学者也能看懂的 Vue2 源码中那些实用的基础工具函数
u012384510的博客
11-04 753
1. 前言大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12想学源码，极力推荐之前我写的《学习源码整体架构系列》jQuery、underscore、lod...
新生代农民工该这样学 Vue3 源码中那些实用的基础工具函数
wang_yu_shun的博客
08-18 351
大家好，我是“前端点线面”，一位新生代农民工，欢迎关注我获取最新前端知识和《前端百题斩》pdf版。1. 前言大家好，我是若川。最近组织了源码共读活动。每周读 200 行左右的源码。很多第一...
【socket】从计算机网络基础到socket编程——Windows && Linux C语言 + Python实现（TCP+UDP）
热门推荐
满堂花醉三千客，一剑霜寒十四州
06-01 2万+
我只能说这篇文章无敌。
商业编程-源码-Phormer v3.31.zip
06-21
Phormer是一款经典的商业编程工具，主要用于数据管理和信息组织。其v3.31版本的源码揭示了软件开发中的许多重要概念和技术，对于学习和理解软件工程、数据库管理以及用户界面设计等主题有着极高的价值。以下是关于这...
arcgis api for js 3.31_4.14.zip
12-26
《ArcGIS API for JavaScript：3.31与4.14深度解析》 ArcGIS API for JavaScript是一款由Esri公司开发的强大的Web地图开发库，它允许开发者在网页上创建交互式地图应用，广泛应用于地理信息系统（GIS）领域。本资料...
Basic3.31编程语言
09-07
DOS时代下运行的Basic编程语言，经典值得收藏。
3.31V2参合集.zip
09-06
【描述】"3.31V2参合集.opv2" 描述中的".opv2"后缀可能是某种特定文件格式的标识，但没有明确的标签来指明它的具体含义。OPV可能代表“Open Package Version”，暗示这是一个开放源代码或者支持多种平台的软件包。...
AdBlock_v3.31.2.crx
07-27
Chrome浏览器中的屏蔽广告插件AdBlock，版本为v3.31.2
2021年2月学习笔记
weixin_42432889的博客
02-02 696
学习！！
javascript DOM编程艺术学习笔记（8）网站项目综合运用实例：
彬go的专栏
04-18 1456
在学习完这本后，在课后也提供了一个网站页面的综合实例开发
javascript DOM编程艺术学习笔记（2）图片库例子：
彬go的专栏
04-18 920
******** 图片库例子： 当鼠标点击页面四个图片链接时，下方的目标位置图片会修改为图片；链接所指向 的图片，另外，最下方的图片描述会修改为图片链接对应的title值; 改进： 由于目标位置图片和图片描述文本都是为了演示DOM方法而创建的，假如，浏览器不支持javascript， 则这两个元素就没有意义了，所以最好是通过DOM动态创建这两个元素，使得即使在不支持javascri
javascript DOM编程艺术学习笔记（3）Ajax初步认识：
彬go的专栏
04-18 857
*****Ajax初步认识： 1.Ajax主要用于概括异步加载页面内容的技术； 2.Ajax的主要优势就是对页面的请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求， 他会在后台处理请求，与此同时用户还能继续浏览页面并与页面交互。 3.Ajax技术的核心是XMLHTTPRequest对象，这个对象充当着浏览器中脚本（客户端）与服务器之间的中间人 的角色。以往的请求都是由浏览器直
libnss3 2:3.31
最新发布
12-24
libnss3是一个用于处理网络安全的库，它包含了一些核心的网络安全功能，比如SSL/TLS协议的实现、密码认证、数字证书管理等。 版本号2:3.31表示libnss3的主版本号是2，次版本号是3.31。主版本号的变化通常意味着库内部的大的重构或者不兼容的改动，而次版本号的变化则表示了一些功能的增强和bug修复。 对于libnss3 2:3.31版本，可能会包含了一些新的安全特性或者性能优化，同时也修复了之前版本中存在的一些bug和漏洞，使得网络传输更加安全可靠。 此外，2:3.31版本的libnss3可能还会兼容之前的版本，这意味着用户可以比较轻松地升级到新版本而不用担心影响已有的系统或应用程序的稳定性。 总的来说，libnss3 2:3.31版本可能会提供更加安全和稳定的网络传输功能，用户可以根据具体需求和安全性要求来决定是否升级到新版本的libnss3。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值