第七次网页前端培训笔记（JS对象/事件）-CSDN博客

本文链接：https://blog.csdn.net/m0_52665223/article/details/122884941

内置对象

1.String

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var str = "Hello World";
			console.log(str);
			console.log(str.substring(3));
			console.log(str.substring(3,5));
			console.log(str.toLowerCase());
			console.log(str.toUpperCase());
		</script>
	</body>
</html>

2.Math

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		    console.log(Math.random());
			console.log(Math.ceil(1.2));
			console.log(Math.floor(1.2));
		</script>
	</body>
</html>

3.Date

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var date = new Date();
			console.log(date);
			console.log(date.getFullYear());
			console.log(date.getMonth()+1);
			console.log(date.getDate());
			console.log(date.getHours());
			console.log(date.getMinutes());
			console.log(date.getSeconds());
			var mstr = date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
			var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"-"+date.getHours()+"-"+mstr;
			console.log(dateStr);
		</script>
	</body>
</html>

对象

1.对象的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var obj1 = {};
			console.log(obj1);
			var obj2 = {
				name:"zhangsan",
				age:18
			};
			console.log(obj2);
			
			var obj3 = new Object();
			console.log(obj3);
			
			var obj4 = Object.create(null);
			console.log(obj4);
			
			var obj5 = Object.create(obj2);
			console.log(obj5);
		</script>
	</body>
</html>

2.对象的操作

2.1 获取对象的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			console.log(obj1.name);
			console.log(obj2.name);
			console.log(obj3.name);
			console.log(obj4.name);
			console.log(obj5.name);
		</script>
	</body>
</html>

2.2 设置对象的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		    obj2.age = 20;
			console.log(obj2);
			obj2.upwd = "123456";
			console.log(obj2);
		</script>
	</body>
</html>

3.对象的序列化与反序列化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var obj ={
				name:"zhangsan",
				pwd:"123456",
				age:18
			};
			obj.name ="lisi";
			console.log(obj);
			var objToStr = JSON.stringify(obj);
			console.log(objToStr);
			var jionStr = '{"name":"zhangsan","pwd":"123456","age":18}';
			jionStr.name ="lisi";
			console.log(jionStr);
			var strToObj = JSON.parse(jionStr);
			console.log(strToObj);
		</script>
	</body>
</html>

4.this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
           function test(){
				console.log("这是一个测试方法");
				 console.log(this);
			}
			test();
			var o={
				name:"zhangsan",
				age:18,
				sayhello:function(){
					console.log("你好呀~");
					console.log(this);
				}
			}
			o.sayhello();
		</script>
	</body>
</html>

事件

HTML 事件可以是浏览器行为，也可以是用户行为。

以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时 JavaScript 可以执行一些代码。

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。

1.常见的HTML事件

下面是一些常见的HTML事件的列表:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="loadWindow()">
			<button onclick="test()" onmouseout="outButton()">按钮</button>
			姓名：<input type="text" onblur="aa()" onfocus="bb()" />
			城市：<select onchange="changeCity()">
				<option>北京</option>
				<option>上海</option>
				<option>深圳</option>
				</select>
	</body>
	<script type="text/javascript">
		function loadWindow(){
			console.log("文档加载完毕。。。");
		}
		function test(){
			console.log("按钮被点击了。。。");
		}
		function aa(){
			console.log("失去焦点了。。。");
		}
		function bb(){
			console.log("聚集焦点了。。。");
		}
		function changeCity(){
			console.log("值改变了。。。");
		}
		function outButton(){
			console.log("鼠标离开按钮了。。。");
		}
	</script>
</html>

2.DOM0级事件处理程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="loadWindow()">
			<button type="button" id="btn2">按钮</button>
	</body>
	<script type="text/javascript">
		var btn2 = document.getElementById("btn2");
		console.log(btn2);
		btn2.onclick=function(){
			console.log("按钮被点击了。。。")
		}
	</script>
</html>

3.DOM2级事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body onload="loadWindow()">
			<button type="button" id="btn3">按钮3</button>
	</body>
	<script type="text/javascript">
        var btn3 = document.getElementById("btn3");
		btn3.addEventListener("click",function(){
			console.log("按钮3被点击了。。。");	
		}false);
		btn3.addEventListener("mouseout",btn3,false);
		function btn3(){
			console.log("鼠标离开按钮3了。。。");
				}
	</script>
</html>