第七次网页前端培训笔记（JavarScript基本语法）

最新推荐文章于 2024-07-19 14:40:55 发布

我不是刘德华哇

最新推荐文章于 2024-07-19 14:40:55 发布

阅读量395

点赞数 2

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Amazing8848/article/details/122875834

版权

2.9.内置对象

2.9.1.string

var str = "Hello World"
			console.log(str)
			console.log(str.substring(3))
			console.log(str.substring(3,5))
			console.log(str.toUpperCase(str))

效果如图

2.9.2.Math

console.log(Math.random())
			console.log(Math.ceil(1.2))
			console.log(Math.floor(1.2))

效果如图

2.9.3.Date

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()//小于10的分钟前面加个0
			var datestr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDay()+" "+date.getHours()+
			":"+mstr
			console.log(datestr);
			console.log(date.toLocaleDateString())

效果如图

2.10.对象

2.10.1对象的创建

（1）字面量形式创建对象

var obj1 = {}//空对象
			console.log(obj1)
			var obj2 = {
				name:"liudehua",
				age:"48"
			}
			console.log(obj2)

效果如图

（2）通过new Object创建

var obj3 = new Object()//空对象
			console.log(obj3)

（3）通过Object对象的create方法创建

var obj4 = Object.create(null)//空对象
			console.log(obj4)
			var obj5 = Object.create(obj2)
			console.log(obj5)

效果如图

2.10.2.对象的操作

（1）获取对象的属性（属性值不存在则获取undefined）

var obj1 = {}//空对象
			var obj2 = {
				name:"liudehua",
				age:"48"
			}
            console.log(obj1.name);//属性不存在
			console.log(obj2.name);//属性存在

效果如图

（2）设置对象的属性（属性存在，则更改属性值，属性不存在则添加属性值）

obj2.name = "zhangxueyou"//有属性
			console.log(obj2)
			obj2.LOL = "EDG"//无属性
			console.log(obj2)

效果如图

2.10.3.对象的序列化和反序列化

var obj = {
				name:"liudehua",
				pwd:"123456",
				age:48
			}
			obj.name = "zhangxueyou"
			console.log(obj)
			var objToStr = JSON.stringify(obj)//将json对象转化成json字符串
			console.log(objToStr)
			var jsonStr = '{"name":"liudehua","pwd":"123456","age":18}'
			console.log(jsonStr)
			var strToObj = JSON.parse(jsonStr)//将json字符串转化成json对象
			console.log(strToObj)

效果如图

2.10.4.this

//1.直接调用函数，this代表的是全局的window对像
			function test()
			{
				console.log("111")
				console.log(this)
			}
			test()
//2.调用对象中的函数，this代表对象本身
			var o = {
				name:"liudehua",
				age:48,
				sayHello:function (){
					console.log("Hello")
					console.log(this)
				}
			}
			o.sayHello()

效果如图

3.JS事件

3.1.事件

/*
			事件的几个名词
				事件源：给什么元素/标签绑定事件
				事件名：绑定什么事件
				事件监听：浏览器窗口
				执行函数：事件触发后需要执行什么代码
		*/


	<body>
		<!--
			事件的几个名词
				事件源：给什么元素/标签绑定事件
				事件名：绑定什么事件
				事件监听：浏览器窗口
				执行函数：事件触发后需要执行什么代码
		-->
		<!-- onclick 点击事件（单击事件）-->
		<button onclick="text()">按钮</button>
	
	<script type="text/javascript">
		function text()
		{
			console.log("按钮被点击了")
		}
	</script>
	</body>

效果如图

3.2.常用事件类型

<!-- onclick 点击事件（单击事件）-->
		<!--onblur失焦事件 onfocus聚焦事件-->
		<!--onchange元素的值发生改变的事件-->
		<!--onmouseout鼠标离开事件-->
		<button onclick="text()" onmouseout="outButtton()">按钮</button>
		姓名：<input type="text" onblur="aa()" onfocus="bb()">
		城市：<select onchange="changeCity()">
			<option>北京</option>
			<option>上海</option>
			<option>广东</option>
			<option>曹县</option>
		</select>
	
	<script type="text/javascript">
		function text()
		{
			console.log("按钮被点击了")
		}
		function aa()
		{
			console.log("失去焦点")
		}
		function bb()
		{
			console.log("聚焦了")
		}
		function changeCity()
		{
			console.log("值改变了")
		}
		function outButton()
		{
			console.log("鼠标离开按钮了")
		}
		
		
	</script>

效果如图（这都是动态效果，静态只能看到结果）

3.3.事件处理程序

3.3.1.HTML事件处理程序（直接在HTML元素上绑定事件）

这个呢，就是上面写的代码中所用的事件处理程序，这样做有一些缺点：耦合度过高，不同浏览器上又不同的效果

<button type="button" onclick="alert('Hello,刘德华')">按钮1</button>

效果如图

3.3.2.DOMO级事件处理系统（先获取事件源，再给事件源绑定事件）

//DOM0级事件
		//1.事件源：获取事件源
		var btn2 = document.getElementById("btn2")
		console.log(btn2)
		//2.事件类型：给事件源绑定指定事件3.执行函数：时间触发后要执行的代码
		btn2.onclick = function(){
			console.log("按钮二被点击了")
		}
		btn2.onmouseout = function(){
			console.log("鼠标离开了按钮2")
		}

效果如图

注：不能同时给元素绑定相同事件多次

3.3.3.DOM2级事件处理系统

//DOM2级事件
		//1.事件源：获取事件源
		var btn3 = document.getElementById("btn3")
		//添加事件监听
		btn3.addEventListener("click",function(){
			console.log("按钮3被点击了")
		},false)
		btn3.addEventListener("mouseout",function(){
			console.log("鼠标离开了按钮3")
		},false)