第七次网页前端培训（基础语法和事件）-CSDN博客

本文链接：https://blog.csdn.net/qq_62156548/article/details/122912265

基础语法——内置对象

		<script type="text/javascript">
		    var str1 = "hello world";
			var str2 = "Hello World";
			console.log(str1);
			console.log(str1.substring(3));//从下标3开始，截取到最后
			console.log(str1.substring(3,5));//从下标3开始到下标5结束
			
			console.log(str2.toLowerCase());//将字符串中的字符全部转为小写
			console.log(str2.toUpperCase());//将字符串中的字符全部转为大写
		</script>

		<script type="text/javascript">
		    
			console.log(Math.random());//随机数
			console.log(Math.ceil(5.7));//向上取整，大于最大整数
			console.log(Math.floor(5.7));//向下取整，小于于最大整数
			
		</script>

		<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 sstr = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			var dateStr = date.getFullYear()+"-"+(date.getMonth() + 1)+"-"+date.getDate()+" "+date.getHours()+":"+mstr+":"+sstr;
			console.log(dateStr);
			console.log(date.toLocaleString())//时间本地化
		</script>

基础语法——对象

对象的创建

		<script type="text/javascript">
		var obj1 = {};//空对象
		var obj2 = {
			name : "xiaoming",
			age : 10 
		}
		console.log(obj1);
		console.log(obj2);
		//new Object
		var obj3 = new Object();//空对象
		console.log(obj3);
		//Object对象的create方法创建
		var obj4 = Object.create(null);//空对象
		console.log(obj4);
		var obj5 = Object.create(obj2);
		console.log(obj5);
		</script>

对象的操作

获取对象属性

		<script type="text/javascript">		
        //获取不存在的属性
		console.log(obj1.name);//undefined
		//获取存在的属性
		console.log(obj2.name);//xiaoming
		
		console.log(obj3.name);//undefined
		console.log(obj4.name);//undefined
		console.log(obj5.name);//xiaoming
		
		</script>

设置对象属性

		<script type="text/javascript">
		//存在的属性修改属性值
		obj2.age = 18;
		console.log(obj2);
		//不存在属性，添加属性值
		obj2.sex = "man";
		console.log(obj2);
		</script>

对象的序列化和反序列化（对象与字符串之间的转化）

		<script type="text/javascript">		
		//序列化反序列化
		var obj01 = {
			name : "xiaolan",
			age : 15,
			sex : "man"
		}
		obj01.name = "xiaohong";
		console.log(obj01);
		//JSON对象转换成JSON字符串
		var objToStr = JSON.stringify(obj01);
		console.log(objToStr);
		//JSON字符串
		var jsonStr = '{"name":"xiaolan","age" : 15,"sex" : "man"}';
		jsonStr.name = "xiaohong";
		console.log(jsonStr);
		//JSON字符串转换成JSON对象
		var strToObj = JSON.parse(jsonStr);
		console.log(strToObj);
		</script>

this

		<script type="text/javascript">		
		//直接调用函数，this代表的是全局的window对象
		function test(){
			console.log("---这是一个测试方法---");
			console.log(this);//window对象
		}
		test();
		//调用对象中的函数，this代表的是对象本身
		var obj = {
			name : "xiaolv",
			age : 12,
			sayHello:function(){
				console.log("亲爱的来学JS吧！");
				console.log(this);//当前obj对象
			}
		}
		//调用对象中的方法
		obj.sayHello();
		</script>

事件

事件中的几个名词

常用的事件类型

	<body onload="loadWindow()">
		<!-- 
		onclick事件：点击事件（单击事件）
		onmouseout事件：鼠标离开事件
		 -->
		<button onclick="test()" onmouseout="outButton()">按钮</button>
		<!-- 
		onblur事件：失焦事件
		onfocus事件：聚焦事件
		 -->
		姓名:<input type="text" onblur="aa()" onfocus="bb()">
		<!-- 
		onchange事件：元素的值发生改变时触发的事件
		 -->
		城市:<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>

事件流

事件处理程序

	<body onload="loadWindow()">
		<!-- 
		onclick事件：点击事件（单击事件）
		onmouseout事件：鼠标离开事件
		 -->
		<button onclick="test()" onmouseout="outButton()">按钮</button>
		<!-- 
		onblur事件：失焦事件
		onfocus事件：聚焦事件
		 -->
		姓名:<input type="text" onblur="aa()" onfocus="bb()">
		<!-- 
		onchange事件：元素的值发生改变时触发的事件
		 -->
		城市:<select onchange="changeCity()">
			    <option>北京</option>
			    <option>深圳</option>
			    <option>郑州</option>
		     </select>
		<hr>
		<!-- html事件处理程序 -->
		<button onclick="alert('hello')" type="button">按钮副本1</button>
		<!-- DOM0级事件 -->
		<button id="btn2" type="button">按钮副本2</button>
		<!-- DOM2级事件 -->
		<button id="btn3" type="button">按钮副本3</button>
		
	</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("鼠标离开按钮了...");
		}
		/*DOM0级事件*/
		//事件源：获取事件源
		var btn2 = document.getElementById("btn2");
		console.log(btn2);
		//给事件类型：事件源绑定指定事件;执行函数：事件触发后要执行的代码
		btn2.onclick = function(){
			console.log("按钮副本2被点击了...");
		}
		/*DOM2级事件*/
		//事件源：获取事件源
		var btn3 = document.getElementById("btn3");
		//添加事件监听
		btn3.addEventListener("click",function(){
			console.log("按钮副本3被点击了...");
		},false);
		btn3.addEventListener("mouseout",btnFunction,false);
		function btnFunction(){
			console.log("鼠标离开按钮副本3了...");
		}
		</script>