JavaScript的内部类和事件驱动

最新推荐文章于 2023-10-20 16:22:56 发布

CreabineChen

最新推荐文章于 2023-10-20 16:22:56 发布

阅读量540

点赞数

本文链接：https://blog.csdn.net/CreabineChen/article/details/50055471

版权

◆js的内部类

javascript 中本身有提供一些可以直接使用的类，这种类就是内部类，主要有：

Object/Array/Math/Boolean/String/RegExp（正则表达式，后边讲）/Date/Number

◆内部类分类

从使用的方式看，分为静态类和动态类

静态类：

使用方式：类名.属性/方法

案例：

//Math 静态类，直接使用
window.alert(Math.abs(-12));//取绝对值

动态类：

使用方式：

var对象=new 动态类() ;

对象.属性/方法

案例：

//Date 动态类,先var一个实例，再使用
//显示当前的日期
var nowdate=new Date();
window.alert(nowdate.toLocaleString());

◆Math 静态类

举例：

/*
window.alert(Math.ceil(4.5));//向上取整
window.alert(Math.floor(4.5));//向下取整
window.alert(Math.round(4.5));//四舍五入
*/

//取100内的随机整数
window.alert(Math.round(Math.random()*100));//取100内的随机整数

◆Date类动态类

举例：

/*
//Date的常用方法
var date=new Date();
window.alert(date.toLocaleString());//显示当前时间并修改格式
window.alert(date.getYear()+" "+date.getMonth()+" "+date.getDay());
*/

/*思考题：当用户浏览网页的时候，根据当前的时间，给出问候语：
6:00-9:00 早上好
9:01-11:30 上午好
11:31-2:30 中午好
2:31-5:30 下午好
5:31-6:40 傍晚好
6:41-12:00 晚上好这里不是0点？
12:01-5:59 凌晨好
*/

//给出主要思路

var date=new Date();
function showHello(date){
//小时
var hour=date.getHours();
//分钟
var minute=date.getMinutes();
//精准点还要把秒考虑进去
//1.思路，把当前时间转成举例00:00的秒数或者小时数，然后再比较
var mysecond=hour*3600+minute*60;
if(mysecond>=6*3600&&mysecond<=9*3600){
window.alert("早上好");
}else if(mysecond>=14*3600+31*60&&17*3600+30*60){
window.alert("下午好");
}else{window.alert("呵呵")}
}
showHello(date);

◆String 动态类

常用案例举例：

/*
var str="abcd12345";
window.alert(str.length);
var str2="abc-def-oop";
var arr=str2.split("-",2);//若是("")就是一个一个的分割，2表示只把前边两个放入数组
window.alert(arr);
*/
/*
//substr和substring的区别
var str3="abcdefghijk";
window.alert(str3.substr(2,5));//2表示从下标为2的那个开始，5表示输出的长度是5，故输出cdefg
window.alert(str3.substring(2,5));//2表示从下标为2的开始，5表示到下标为5的那个结束，且不包含下标为5的那个，故输出cde
*/

var str4="abcd";
window.alert(str4.charAt(3));//返回指定下标的值，即d

var str5="ab 123 56 ab";
window.alert("indexOf"+str5.indexOf("ab",1));//◆ab在str5中第一次出现的位置的下标是0，故输出0；◆当后边有1，表示从该字符串的下标为1的位置开始检索，这样检索的话，第一次出现ab就是在最后了，位置为下标为10的位置，故输出10；◆若找不到，则返回-1；◆支持中文

◆Array 动态类

常用案例举例：

/*
//Array
var myarr=new Array();
//动态的添加数据
myarr[0]="sp";
myarr[1]=90;
window.alert(myarr.length+" "+myarr);
myarr.pop();//删除数组最后一个元素，并返回删除之后数组的最后一个元素
window.alert(myarr.length+" "+myarr);
myarr.push("abcd","efgh");//在数组末尾添加元素，多个元素的话用逗号分隔
window.alert(myarr.length+" "+myarr);//
*/

var myarr2=new Array(2);//建立一个数组规定长度为2
window.alert("length"+myarr2.length);
myarr2[0]=34;
myarr2[1]="fdf";
myarr2[2]=6;
myarr2[30]="4544ff";//但是我们赋值的时候赋了长度为4的值
//这里要小心，若把上边一行的下标改为30，不要跳过下标放值，不会报错会，那么就会将数组长度变为30，且把3到29的值认为是空值。
window.alert(myarr2.length+" "+myarr2);

myarr2["a"]="ok";//若用字符串为下标来添加数组中的值，那么：
window.alert(myarr2.length+" "+myarr2['a']);//数组长度不变，但是用该下标能够调出值
window.alert(myarr2.length+" "+myarr2);//且直接打印数组，不会出现该值

array创造的数组值是可以覆盖的，如下：

◆Boolean 动态类

◆Number 静态类？

举例：

//Number
var a=890.567;
//a.tostring(10);//返回一个字符串，不写默认是10，即十进制，

a=a.toFixed(2);//这里是把一个数字转为字符串，再保留两位小数，如果a是字符串，就不能用这个了。
window.alert(a);

var b=10;
window.alert(b.toString(8));//显示10的二进制。支持十进制，二进制，八进制，十六进制

◆常用的系统函数（全局函数）

查看js全局对象参考手册

案例：

var a=90;
window.alert(isNaN(a));//判断是否不是一个数字，若不是数字返回真，是数字返回假。

◆js的事件驱动变成

什么是事件驱动

1.原理：

原理图：

2.入门案例：

案例1：监听鼠标点击事件，并能够显示鼠标点击的位置的坐标

代码：

<html>
<head>
<script language= "javascript" src="myfunction.js"></script>
<script language="javascript" type="text/javascript">

function test1(e){
window.alert("x="+e.clientX+" "+"y="+e.clientY);//点击显示鼠标缩在位置坐标
}
function test2(e){
window.alert("eee");//只要鼠标移动就显示eee
}

</script>
</head>

<body οnmοusedοwn="test1(event)" οnmοusemοve="test2(event)">

</body>
</html>

案例2：通过点击按键，来改变div的样式

方法一，通过改变元素的style来改变其样式：

代码：

<html>
<head>
<script language= "javascript" src="myfunction.js"></script>
<script language="javascript" type="text/javascript">

function test4(eve){
//怎么知道是哪个按钮被按下？用this
//window.alert(eve.value);测试是否区分成功
if(eve.value=="黑色"){
//获取div1
var div1=document.getElementById("div1");//通过Id来获取元素
div1.style.backgroundColor="black";//这里要特别注意，这里不认background-color,只认backgroundColor
}else if(eve.value=="红色"){
//获取div1
var div1=document.getElementById("div1");//通过Id来获取元素
div1.style.backgroundColor="red";
}
}

</script>
</head>
<body>

<div id="div1" style="width:400px;height:300px;background-color:red">div1</div>

<input type="button" οnclick="test4(this)" value="黑色"/>
<input type="button" οnclick="test4(this)" value="红色"/>

</body>
</html>

方法二：通过改变外部CSS来改变元素的样式：

代码：

<html>
<head>
<link href="changecss.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">

function test4(eventObj){
//首先要获取这个changecss.css里边的所有class选择器都获取
var ocssRules=document.styleSheets[0].rules;//这里要特别注意：1.这里的[0]是因为，一个html文件可能会引入多个css文件，如果要取第一个css文件里边的所有样式，就写0；如果要取第二个css文件，就写1，依此类推。2.我的浏览器是IE，所以用上边这个语句，若是Firefox的浏览器，则语句要变化成：document.styleSheets[0].cssRules; 3.ocssRules是个集合，代表了从第一个css文件中取出的所有选择器的集合。
//接下来从ocssRules中取出你希望的class
var style1=ocssRules[0];//取出ocssRules中的第一个class选择器
if(eventObj.value=="黑色"){//如果点了黑色按钮
style1.style.backgroundColor="black";//就变成黑色
}else if(eventObj.value=="红色"){
style1.style.backgroundColor="red";
}
}

</script>
</head>
<body>
<div id="div1" class="style1">div1</div>

<input type="button" οnclick="test4(this)" value="黑色"/>
<input type="button" οnclick="test4(this)" value="红色"/>

</body>
</html>

注意：上边第一次出现了不同浏览器实现同一功能需要不同的语句。这就是兼容的问题

这里先介绍了一个用于区分浏览器种类的小程序：

代码：

<html>
<head>
<script language="javascript" type="text/javascript">
//如何区分浏览器的种类

//if()括号里边如果是null，则输出false，这里用了这个特点
if(window.XMLHttpRequest){//判断是否支持window.XMLHttpRequest
if(!window.ActiveXObject){//判断是否是支持window.ActiveXObject
alert("Mozilla,Safari");//若浏览器支持window.XMLHttpRequest且不支持window.ActiveXObject，则说明是Mozilla,Safari
}else{
alert("IE");//若浏览器支持window.XMLHttpRequest且支持window.ActiveXObject，则说明是IE
}
}else{//若浏览器不支持支持window.XMLHttpRequest，则说明是IE6
alert("IE6");
}

</script>
</head>
<body>
</body>
</html>

◆一个事件可以被多个函数监听：

案例：

<html>
<head>
<link href="changecss.css" rel="stylesheet" type="text/css"/>
<script language="javascript" type="text/javascript">

function test4(e){
window.alert("ok1");
}
function test5(e){
window.alert("ok2");
}
</script>
</head>
<body>

<div id="div1" class="style1">div1</div>

<input type="button" οnclick="test4(this),test5(this)" value="黑色"/>

</body>
</html>

◆window有三个事件：

οnlοad="test7()"：在页面加载完成后

οnbefοreunlοad="test8()"：在关闭页面之前

unload="test9()"：关闭页面后//这里无法通过alert显示，因为页面已经关闭了

案例：

function test7(e){
window.alert("onload");//页面读取完成后就出发输出onload
//接下来把鼠标定位到text输入框，即页面读取后自动把鼠标放在输入框内,这里暂时没实现，回头慢慢看手册
document.getElementById("text1");
}
function test8(e){
window.alert("onbeforeunload");//页面关闭之前触发事件
}

不同的html元素，他们的event并不完全一样，比如按钮要点，页面有加载前后，等等。

◆使用js完成如下功能：

1.防止用户通过点击鼠标右键菜单拷贝网页内容（即让鼠标右键无效）

代码：

注意：1.这里的return一定要有，把值返回给事件，才有效。

2.return 也可以返回一个函数，让他在右键的时候弹窗等等。

代码：

注意：1.这里的return一定要有，把值返回给事件，才有效。

综合练习：