javaScript的属性，方法和事件

墨蓝 2023-10-07 00:00 23阅读 0赞

在进行javaScript的属性，方法和事件之前，我先展示一个简易的计算器。

例题：输入两个数进行判断是不是数字，如果不是，提示用户输入正确的数字。如果是则进行四则运算，点击加减乘除对应的符号则进行相应的运算，把结果输出出来。

![36c531a554d14cb090ccc66b39ea2ca6.png][]

运行后的结果如下所示：

![22100f55e6f24211bea92b2ab065e1aa.png][]![170732958b58440187d1974161b4a7d3.png][]

![b0c0cb9be3e94ed88c462925f8a5a6d4.png][]![ac4c134256ed49a3aa13b7e59b885641.png][]

实现代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<body>
    		第一个数：<input type="text" id="one" /><br />
    		第二个数：<input type="text" id="two" /><br />
    		第三个数：<input type="button" value="+" onclick="cc('+')"/>
    			<input type="button" value="-" onclick="cc('-')"/>
    			<input type="button" value="*" onclick="cc('*')"/>
    			<input type="button" value="/" onclick="cc('/')"/>
    			<br />
    		运算结果：<input type="text" id="s"  />
    		<script type="text/javascript" >
    			function cc(n){
    				var one=document.getElementById("one").value
    				var two=document.getElementById("two").value
    				if(isNaN(one)){
    					alert("你输入的第一个数不是数字，请输入数字")
    					return
    				}
    				if(isNaN(two)){
    					alert("你输入的第二个数不是数字，请输入数字")
    					return
    				}
    				var a=null
    				if(n=="+"){
    					a=parseFloat(one)+parseFloat(two)
    				}else if(n=="-"){
    					a=parseFloat(one)-parseFloat(two)
    				}else if(n=="*"){
    					a=parseFloat(one)*parseFloat(two)
    				}else if(n=="/"){
    					a=parseFloat(one)/parseFloat(two)
    				}
    				
    				document.getElementById("s").value=a
    			}
    		</script>
    	</body>
    </html>

## 属性，方法和事件 ##

1. 属性：属性是指对象包含的值，使用“对象名.属性名”的方式进行操作，如 document.myfrom.first.value

2.方法：在代码里，使用“对象名.方法名()”来调用该对象的方法。 alter( '' ) = Wundow.alter( '' )

3.事件：3.1.响应用户操作，完成交互，如OnClick，OnKeyDown

3.2.一般可以分为鼠标事件，键盘事件及其他事件

### JavaScript事件的使用 ###

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:215px;">鼠标事件</td> 
   <td style="text-align:center;width:283px;">意义</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:215px;">onmousedown</td> 
   <td style="text-align:center;width:283px;">按下鼠标键</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:215px;">onmousemove</td> 
   <td style="text-align:center;width:283px;">移动鼠标</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:215px;">onmouseover</td> 
   <td style="text-align:center;width:283px;">鼠标移动到某一个网页对象上</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:215px;">onmouseup</td> 
   <td style="text-align:center;width:283px;">松开鼠标键</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:215px;">onclick</td> 
   <td style="text-align:center;width:283px;">单击鼠标键</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:215px;">ondblclick</td> 
   <td style="text-align:center;width:283px;">双击鼠标键</td> 
  </tr> 
 </tbody> 
</table>

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="text-align:center;width:219px;">键盘事件</td> 
   <td style="text-align:center;width:279px;">意义</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:219px;">onkeydown</td> 
   <td style="text-align:center;width:279px;">按下一个键</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:219px;">onkeyup</td> 
   <td style="text-align:center;width:279px;">松开一个键</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;width:219px;">onkeypress</td> 
   <td style="text-align:center;width:279px;">按下然后松开一个键</td> 
  </tr> 
 </tbody> 
</table>

### javaScript中的对象 ###

一、自定义的对象

● 开发人员根据自己的需要而定义的新对象。

二、JavaScript内置对象

● JavaScript将一些常用功能预先定义成对象，用户可以直接使用，这就是内置对象。

● 如字符串对象，数学对象，日期对象，数组对象，正则表达式对象等

浏览器内置对象

● 浏览器对象是浏览器根据系统当前的配置和所装载的页面为JavaScript提供的一系列可供使用的对象。

● 如Window对象，Document对象，History对象等。

（1）使用Object关键字创建对象，代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//创建自定义对象
    			//使用object创建
    			var student = new Object()
    			student.stuID="22004200"
    			student.stuName = "张三"
    			student.className = "移动2105班"
    			student.sayHello=function (){
    				console.log("大家好")
    			}
    			student.sayHello()
    			console.log("学号："+student.stuID+"，姓名："+
    			student.stuName+"，班级："+student.className)
    		</script>
    	</body>
    </html>

（2）使用function关键字创建对象，代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//使用function来创建对象
    			function teacher(tid,stuName){
    				this.tid=tid
    				this.name=name
    				this.Eat=function (){
    					console.log("吃饭")
    				}
    			}
    			var t1=new teacher("10086","移动")
    			t1.Eat()
    			console.log("职工号:"+t1.tid+"，姓名："+t1.name)
    		</script>
    	</body>
    </html>

(3)第三中创建对象的方法，代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script type="text/javascript">
    			//第三种创建对象的方法
    			var stu = {
    				stuID:"10086",
    				stuName:"李四",
    				run:function(){
    					console.log("run")
    				}
    			}
    			stu.run()
    			console.log(stu.stuID)
    		</script>
    	</body>
    </html>

## JavaScript内置对象 ##

#### ● 字符串对象 ####

● 用于存储一系列字符

● 使用单引号或双引号包含

var name = "河南郑州";

var http = 'sx.hnhpit.com';

● 可以使用索引访问字符串中任何的字符

var char = http\[5\];

兼容性差，只能兼容高版本浏览器，不能兼容IE6-8

● 可以在字符串中使用引号

var full = "河南郑州 ' sx.hnzz.com ' ";

full = " 河南郑州 \\ " sx.hnzz.com \\ " " ;

#### ● 数字对象 ####

用于获取各种数字常量及数学函数

#### ● 日期对象 ####

用于获取或操作各种时间

[36c531a554d14cb090ccc66b39ea2ca6.png]: https://img-blog.csdnimg.cn/36c531a554d14cb090ccc66b39ea2ca6.png
[22100f55e6f24211bea92b2ab065e1aa.png]: https://img-blog.csdnimg.cn/22100f55e6f24211bea92b2ab065e1aa.png
[170732958b58440187d1974161b4a7d3.png]: https://img-blog.csdnimg.cn/170732958b58440187d1974161b4a7d3.png
[b0c0cb9be3e94ed88c462925f8a5a6d4.png]: https://img-blog.csdnimg.cn/b0c0cb9be3e94ed88c462925f8a5a6d4.png
[ac4c134256ed49a3aa13b7e59b885641.png]: https://img-blog.csdnimg.cn/ac4c134256ed49a3aa13b7e59b885641.png