第七次网页前端培训笔记

 B站视频网址：（本次仅涉及P24-P26）​​​​​​【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili

菜鸟教程网址：HTML 教程 | 菜鸟教程 (runoob.com)

天气请求：https://api.seniverse.com/v3/weather/now.json?key=WNEUXAAE2G&location=南京&1anguage=zh-Hans&unit=c
如何将内容输出在HTML中：https://www.runoob.com/js/js-output.html

一、JS基础语法-内置对象 

			String
				charAt(idx) 返回指定位置处的字符
				indexOf(Chr) 返回指定子字符串的位置，从左到右。找不到返回-1
				substr(m, n) 返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
				substring(m,n) 返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
				toLowerCase() 将字符串中的字符全部转化成小写。
				toUpperCase() 将字符串中的字符全部转化成大写。
				length 属性，不是方法，返回字符串的长度。
				
			Math
				Math. random() 随机数
				Math.ceil() 向上取整，大于最大整数
				Math. floor() 向下取整，小于最小整数String
			
			Date
			获取日期
				getFullYear() 年
				getMonth() 月
				getDate() 日
				getHours() 时
				getMinutes() 分
				getSeconds() 秒
			设置日期
				setYear()
				setMonth()
				setDate()
				setHours()
				setMinutes( )
				setSeconds( )
				toloacalestring()转换成本地时间字符串

		<script type= "text/javascript">
			var str = "Hello World" ;
			console.log(str);
			console.log(str.substring(3)); //从下标3开始，截取到最后
			console.log(str.substring(3,5)); //从下标3开始，到下标5结束
			console.log(str.toLowerCase()); //转小写
			console.log(str.toUpperCase()); //转大写
			
			// Math.random() 随机数
			console.log(Math.random());
			// Math.ceil() 向上取整，大于最大整数
			console.log(Math.ceil(1.2));
			// Math. floor() 向下取整，小于最小整数String
			console.log(Math.floor(1.2)); 
			
			//得到日期对象
			var date = new Date(); 
			console.log(date); 
			// getFullYear() 年
			console.log(date.getFullYear());
			// getMonth() 月
			console.log(date.getMonth() + 1); // 0~11
			// getDate() 日
			console.log(date.getDate());
			// getHours() 时
			console.log(date.getHours());
			// getMinutes() 分
			console.log(date.getMinutes());
			// getSeconds() 秒
			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);
			//时间本地化
			console.log(date.toLocaleString());

		</script>

运行效果截图：

二、JS基础语法-对象 

			对象
			一、对象的创建
				1.字面量形式创建对象
					var 对象名= {}; //空对象
					var 对象名={
						键:值,
						键:值,
						...
					};
				2.通过new Object创建
					var 对象名= new Object(); //空对象
				3.通过Object对象的create方法创建
					var 对象名 = Object.create(null); //空对象
					var 对象名 = Object. create(对象);
			二、对象的操作
				获取对象的属性(如果属性不存在， 则获取undefined)
					对象名.属性名;
				设置对象的属性(如果属性存在，则修改属性值:如果属性不存在，则添加新的属性值)
					对象名.属性名 = 值;
			三、对象的序列化和反序列化
				序列化:将J5对象(JSON对象)转换成JSON字符串
					var 变量名 = JSON.stringify(对象);
				反序列化:将JSON字符串转换成JS对象(JSON对象)
					var 对象名 = JSON.parse(JSON字符串):
			四、this
				谁调用函数，this指代谁。
				1.直接调用函数，this代表的全局的window对象
				2.调用对象中的函数，this代表的是对象本身

		<script type="text/javascript">
		/*对象的创建*/
		//字面量形式创建对象
		var obj1 = {};//空对象
		console.log(obj1);
		var obj2 = {
		name : "zhangsan",
		age : 18,
		};
		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);

		/*对象的操作*/
		//获取对象的属性
		//获取不存在的属性
		console.log(obj1.name); // undefined
		//获取存在的属性
		console.log(obj2.name); // zhangsan 
		console.log(obj3.name); // undefined
		console.log(obj4.name); // undefined
		console.log(obj5.name); // zhangsan 

		//存在的属性，修改属性值
		obj2.age = 20;
		console.log(obj2);
		//不存在的属性，添加属性值
		obj2.upwd = "123456" ;
		console.log(obj2);
		
		console.log("--------------------");
		/* 对象的序列化和反序列化 */
		//序列化
		// JSON对象
		var obj = {
		name : "zhangsan",
		pwd : "123456",
		age : 18
		};
		obj.name = "lisi";
		console.log(obj);
		//将JSON对象转换成JSON字符串
		var objToStr = JSON.stringify(obj);
		console.log(objToStr);
		
		console.log("=============================================");
		// JSON字符串
		var jsonStr = '{"name" : "zhangsan" , "pwd" : "123456" , "age" : 18}';
		jsonStr.name = "lisi";
		console.log(jsonStr);
		//将JSON字符串转换成JSON对象
		var strToObj = JSON.parse(jsonStr);
		console.log(strToObj);

		console.log("=============================================");
		/* this */
		// 1.直接调用函数，this代表的全局的Window对象
		function test() {
			console.log("这是一个测试方法...");
			console.log(this); // Window对象
		}
		test();
		// 2.调用对象中的函数，this代表的是对象本身
		var o = {
			name : "zhangsan",
			age : 18,
			sayHello:function(){
			console.log("你好呀~");
			console.log(this); //当前o对象
			}
		}
		//调用对象中的方法
		o.sayHello();

		</script>

运行效果截图：

 三、JS事件

		事件
			事件中几个名词:
				事件源:给什么元素/标签绑定事件
				事件名:绑定什么事件
				事件监听:浏览路窗口
				执行函数:事件触发后需要执行什么代码
		
		常用的事件类型
			onload:当页面或图像加载完后立即触发
			onblur:元素失去焦点
			onfocus:元素获得焦点
			onclick:鼠标点击某个对象
			onchange:用户改变域的内容
			onmouseover:鼠标移动到某个元素上
			onmouseout:鼠标从某个元素上离开
			onkeyup:某个健盘的键被松开
			onkeydown:某个健盘的健被按下
		事件流
			事件冒泡:事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)
			事件捕获:事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点
		事件处理程序(事件绑定方式）
			1. HTML事件处理程序
				直接在html元素上绑定事件
			2. DOMO级事件
				先获取事件源，再给事件源绑定事件
				不能同时给元素绑定相同事件多次
			3. DOM2级事件
				事件源.addEventlistener("事件类型"，执行函数，true ) 
			注:通过id属性值获取节点对象
			document. getElementById("id属性值");

	<body onload = "loadWindow()">
		<!-- onclick事件:点击事件(单击事件) -->
		<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 type= "button" onclick="alert('Hello')">按钮1</button>
		<!-- DOM0级事件-->
		<button type= "button" id="btn2" >按钮2</button>
		<!-- DOM2级事件-->
		<button type= "button" id="btn3" >按钮3</button>
		 

	<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级事件 */
		// 1.事件源:获取事件源(按钮)
		var btn2 = document.getElementById("btn2");
		console.log(btn2);
		// 2.事件类型:给事件源绑定指定事件 
		//3.执行函数:事件触发后要执行的代码
		btn2.onclick = function(){
			console.log("按钮2被点击了..");
		}
		btn2.onmouseout = function(){
			console.log("鼠标离开按钮2了...");
		}
		btn2.onclick = function(){
			console. log("按钮2被点击了2...");
		}
		
		/* DOM2级事件*/
		// 1.事件源: 获取事件源(按钮)
		var btn3 = document.getElementById("btn3");
		//添加事件监听
		btn3.addEventListener("click",function(){
			console.log("按钮3被点击了...");
		},false);
		function btnFunction(){
			console.log("鼠标离开按钮3了...");
		}
		btn3.addEventListener("mouseout", btnFunction, false);
		btn3.addEventListener("click",function(){
			console.log("按钮3被点击了2...");
		}, false);
		
		</script>

	</body>

运行效果截图：

四、使用JSON提取数据