javaScript properties, methods and events

Before getting into JavaScript properties, methods, and events, I'll show you a simple calculator.

Example: Enter two numbers to determine whether they are numbers. If not, prompt the user to enter the correct number. If so, perform the four arithmetic operations. Click on the symbols corresponding to addition, subtraction, multiplication and division to perform the corresponding operations and output the results.

The result after running is as follows:

The implementation code is as follows:

<!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>

Properties, methods and events

1. Attribute: Attribute refers to the value contained in the object. Use the method of "object name.attribute name" to operate, such as document.myfrom.first.value

2. Method: In the code, use "object name. method name ()" to call the method of the object. alter( '' ) = Wundow.alter( '' )

3. Events: 3.1. Respond to user operations and complete interactions, such as OnClick, OnKeyDown

3.2. Generally can be divided into mouse events, keyboard events and other events

The use of JavaScript events

mouse events	significance
onmousedown	press mouse button
onmousemove	Move mouse
onmouseover	Move the mouse over a web page object
onmouseup	Release mouse button
onclick	click mouse button
ondblclick	Double click mouse button

Keyboard events	significance
onkeydown	press a key
onkeyup	release a key
onkeypress	Press and release a key

Objects in javaScript

1. Customized objects

● ● New objects defined by developers according to their own needs.

2. JavaScript built-in objects

● JavaScript pre-defines some common functions as objects, which users can use directly. These are built-in objects.

● Such as string objects, mathematical objects, date objects, array objects, regular expression objects, etc.

Browser built-in objects

● Browser objects are a series of objects provided by the browser for JavaScript based on the current configuration of the system and the loaded page.

● ● Such as Window object, Document object, History object, etc.

(1) Use the Object keyword to create an object. The code is as follows:

<!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) Use the function keyword to create an object. The code is as follows:

<!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) The third method of creating objects, the code is as follows:

<!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 built-in objects

● String object

Used to store a series of characters

● Use single quotes or dual quotes included

var name = "Zhengzhou, Henan";

var http = 'sx.hnhpit.com';

● You can use the index to access any character in the string

var char = http[5];

Poor compatibility, only compatible with higher version browsers, not IE6-8

● You can use quotes in string

var full = "Zhengzhou, Henan ' sx.hnzz.com ' ";

;

● Digital Object

Used to obtain various numerical constants and mathematical functions

● Date object

Used to obtain or operate various times