第七次网页前端培训笔记(HTML)

一、内置对象

 String
             1.charAt( idx)     返回指定位置处的字符
             2.indexOf(Chr)       返回指定子字符串的位置，从左到右。找不到返回-1
             3.substr(m, n)      返回给定字符串中从m位置开始，取n个字符，如果参数n省略，则意味着取到字符串末尾。
             4.substring(m,n)   返回给定字符串中从m位置开始，到n位置结束，如果参数n省略，则意味着取到字符串末尾。
             5.toLowerCase()   将字符串中的字符全部转化成小写。
             6.toUppercase()   将字符串中的字符全部转化成大写。
             7.length         属性，不是方法，返回字符串的长度。

  Math
            1.Math.random()      随机数
            2.Math.ceil()        向上取整，大于最大整数
            3.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());//·转大写
			
			// 1.Math.random()      随机数
			console.log(Math.random());
			// 2.Math.ceil()        向上取整，大于最大整数
			console.log(Math.ceil(1,2));
			// 3.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~11l/。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( )+":"+date.getMinutes()+":"+date.getSeconds()
			console.log(dateStr);
			// 时间本地化
			console.log(date.toLocaleString());
			
		 </script>

二、对象
            1.对象的创建
                1.字面量形式创建对象
                var 对象名 = {};//空对象
                var 对象名={
                键:值，
                键:值，
                ......
                };
                2．通过new 0bject创建
                    var对象名= new object();//空对象
                3．通过0bject对象的create方法创建
                    var 对象名 = 0bject.create(null);//空对象
                    var 对象名 = 0bject.create(对象);
        
          2.对象的操作
                获取对象的属性  (如果属性不存在，则获取undefined)
                    对象名.属性名;
                设置对象的属性  (如果属性存在，则修改属性值;如果属性不存在，则添加新的属性值)
                    对象名.属性名=值;

           3.对象的序列化和反序列化
                序列化:将]S对象(SON对象)转换成JSON字符串
                    var 变量名 = JSON.stringify(对象);
                反序列化:将JSON字符串转换成]S对象(JSON对象)
                    var 对象名 = JSON.parse(JSON字符串);

           4. 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 0bject创建
			 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);//zhangsan
			//获取存在的属性
			console.log(obj2.name) ;

			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(obj);
			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>

三、事件
        事件中几个名词:
            事件源:给什么元素/标签绑定事件事件名:绑定什么事件
            事件监听:浏览器窗口
            执行函数:事件触发后需要执行什么代码
        常用的事件类型
            onload:          当页面或图像加载完后立即触发
            onblur:          元素失去焦点
            onfocus:        元素获得焦点
            onclick:        鼠标点击某个对象
            onchange:         用户改变域的内容
            onmouseover:    鼠标移动到某个元素上
            onmouseout:        鼠标从某个元素上离开
            onkeyup:        某个键盘的键被松开
            onkeydown:        某个键盘的键被按下

        事件流
            事件冒泡:事件开始时由最具体的元素接受，然后逐级向上传播到较为不具体的节点(文档)
            事件捕获:事件开始时由文档节点接受，然后逐级向下传播到具体的元素节点
        
        事件处理程序(事件绑定方式)
            1.HTML事件处理程序
                直接在html元素上绑定事件
            2.DOM 0级事件   
                先获取事件源，再给事件源绑定事件
                不能同时给元素绑定相同事件多次

            3.DOM 2级事件
        
        注:通过id属性值获取节点对象
        document.getElementById( "id属性值");

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