内置对象 对象创建 事件

<!-- 
         String 
            charAt(idx)    返回指定索引处的 char 值。
            int indexOf(int ch, int fromIndex)返回在此字符串中第一次出现指定字符处的索引，从指定的索引开始搜索。
            String substring(int beginIndex)返回一个新的字符串，它是此字符串的一个子字符串。
            substr(m,n)返回字符串中从m位置开始，取n各字符，如果没有n则默认到字符串的最后
            substring(m,n)返回字符串中从m开始，到n位置结束，如果没有n则默认到字符串的最后
            toLowerCase()转换成小写
            toUpperCase()转换成大写
            length 返回字符串的长度
        
        
        Math
            Math.random()//随机数
            Math.ceil()//向上取整，大于最大整数
            Math.floor()//向下取整，小于最小的整数String
         -->

Date
                获取日期
                    getDate()    从 Date 对象返回一个月中的某一天 (1 ~ 31)。
                    getDay()    从 Date 对象返回一周中的某一天 (0 ~ 6)。
                    getFullYear()    从 Date 对象以四位数字返回年份。
                    getHours()    返回 Date 对象的小时 (0 ~ 23)。
                    getMilliseconds()    返回 Date 对象的毫秒(0 ~ 999)。
                    getMinutes()    返回 Date 对象的分钟 (0 ~ 59)。
                    getMonth()    从 Date 对象返回月份 (0 ~ 11)。
                    getSeconds()    返回 Date 对象的秒数 (0 ~ 59)。
                    getTime()    返回 1970 年 1 月 1 日至今的毫秒数。
                    getTimezoneOffset()    返回本地时间与格林威治标准时间 (GMT) 的分钟差。
                    getUTCDate()    根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
                    getUTCDay()    根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
                    getUTCFullYear()    根据世界时从 Date 对象返回四位数的年份。
                    getUTCHours()    根据世界时返回 Date 对象的小时 (0 ~ 23)。
                    getUTCMilliseconds()    根据世界时返回 Date 对象的毫秒(0 ~ 999)。
                    getUTCMinutes()    根据世界时返回 Date 对象的分钟 (0 ~ 59)。
                    getUTCMonth()    根据世界时从 Date 对象返回月份 (0 ~ 11)。
                    getUTCSeconds()    根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
                    getYear()    已废弃。 请使用 getFullYear() 方法代替。
                    parse()    返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
                    
                设置日期
                    
                    setDate()    设置 Date 对象中月的某一天 (1 ~ 31)。
                    setFullYear()    设置 Date 对象中的年份（四位数字）。
                    setHours()    设置 Date 对象中的小时 (0 ~ 23)。
                    setMilliseconds()    设置 Date 对象中的毫秒 (0 ~ 999)。
                    setMinutes()    设置 Date 对象中的分钟 (0 ~ 59)。
                    setMonth()    设置 Date 对象中月份 (0 ~ 11)。
                    setSeconds()    设置 Date 对象中的秒钟 (0 ~ 59)。
                    setTime()    setTime() 方法以毫秒设置 Date 对象。
                    setUTCDate()    根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
                    setUTCFullYear()    根据世界时设置 Date 对象中的年份（四位数字）。
                    setUTCHours()    根据世界时设置 Date 对象中的小时 (0 ~ 23)。
                    setUTCMilliseconds()    根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
                    setUTCMinutes()    根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
                    setUTCMonth()    根据世界时设置 Date 对象中的月份 (0 ~ 11)。
                    setUTCSeconds()    setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
                    setYear()    已废弃。请使用 setFullYear() 方法代替。
                    
                    
                    toDateString()    把 Date 对象的日期部分转换为字符串。
                    toGMTString()    已废弃。请使用 toUTCString() 方法代替。
                    toISOString()    使用 ISO 标准返回字符串的日期格式。
                    toJSON()    以 JSON 数据格式返回日期字符串。
                    toLocaleDateString()    根据本地时间格式，把 Date 对象的日期部分转换为字符串。
                    toLocaleTimeString()    根据本地时间格式，把 Date 对象的时间部分转换为字符串。
                    toLocaleString()    根据本地时间格式，把 Date 对象转换为字符串。
                    toString()    把 Date 对象转换为字符串。
                    toTimeString()    把 Date 对象的时间部分转换为字符串。
                    toUTCString()    
                    根据世界时，把 Date 对象转换为字符串。
                    
                    实例：
                    
                    var today = new Date();
                    var UTCstring = today.toUTCString();
                    UTC()    根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
                    valueOf()    返回 Date 对象的原始值。
            */

 <script type="text/javascript">
		 	var str="Hello World";
			console.log(str.substring(3));//lo World
			console.log(str.substring(3,5));//lo
			
			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);
		    console.log(date.getFullYear());//获取年
			 console.log(date.getMonth()+1);//月0~11--------加1
			  console.log(date.getDate());//日
			  console.log(date.getHours());
			  console.log(date.getMinutes());
			  console.log(date.getSeconds());
			  var dateminute=date.getMinutes()<10?"0"+date.getMinutes():date.getMinutes();
			  var datestr=date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+dateminute+":"+date.getSeconds();
			    console.log(datestr);
				//时间本地化
			    console.log(date.toLocaleString());	
		 </script>
	</body>
</html>

<!-- 
         对象
            一、对象的创建
                1、字面量形式创建对象
                    var 对象名={};//空对象
                    var 对象名={
                        键:值,
                        ...
                    };
                2、通过new Object创建
                    var 对象名=new Object();//空对象
                3、通过Object对象的create方法创建
                    var 对象名=Object.create(null);//空对象
                    var 对象名=Object.create(对象);
         -->
         <script type="text/javascript">
             /*
            1、字面量形式创建对象
                var 对象名={};//空对象
                var 对象名={
                    键:值,
                    ...
                };

var obj1={};
		    console.log(obj1);
		   var obj2={
			   name:"张",
			   age:20,
		   };
		   console.log(obj2);
		   
		   /*
		   2、通过new Object创建
		   	var 对象名=new Object();//空对象
		   */
		  var obj3=new Object();
		  console.log(obj3);
		  
		  
		  
		  
		  /*
		  3、通过Object对象的create方法创建
		  	var 对象名=Object.create(null);//空对象
		  	var 对象名=Object.create(对象);
		  */
		 var obj4=Object.create(null);
		 console.log(obj4);
		 var obj5=Object.create(obj2);
		 console.log(obj5);
		 
		 
		 
		 
		 /*
		 2、对象的操作
			1）获取对象的属性(如果属性不存在，则获取null)
				对象名.属性名;
			2）设置对象属性(如果属性存在，则修改属性值，如果属性不存在，则添加属性值)
				对象名.属性名=值;
					
		 */
		
		//获取对象的属性-----没有
		console.log(obj1.name);//undefined
		//获取对象的属性-----已有
		console.log(obj2.name);//张
		console.log(obj5.name);//张
		
		//设置对象属性       对象名.属性名=值;
		console.log("-----设置对象属性----");
		//属性存在，则修改属性值
		obj2.age=18;
		console.log(obj2);//修改
		
		//如果属性不存在，则添加属性值
		obj2.upwd="123456";
		console.log(obj2);
		
		
		/*
		3、对象的序列化和反序列化
				序列化：将js对象(JSON对象)转换成JSON字符串
					var 变量名=JSON.stringify(对象)
				反序列化：将JSON字符串转换成JS对象(JSON对象)
					var 对象名=JSON.parse(JSONz字符串)
		*/
	   
		console.log("-----对象的序列化和反序列化------");
		var obj={
					   name:"张",
					   pwd:"123456",
					   age:20,
		};
		
		//序列化
		var objStr=JSON.stringify(obj);//对象转换成字符串
		console.log(objStr);
		
		
		//反序列化--------将字符串转换成对象
		
		var jsonStr='{"name":"张三","pwd":"654321","age":18}';
		var strToJSON=JSON.parse(jsonStr);
		console.log(strToJSON);
		
		
		
		/*
		this
			谁调用函数，this指代谁
			1、直接调用函数，this代表的全局的window对象
			2、调用对象中的函数，this代表的是对象本身
			
		*/
	   
	   
	   //1、直接调用函数，this代表的全局的window对象
	   console.log("-----this的使用------");
		function test(){
			console.log("这是一个方法this");
			console.log(this);
		}
		test();
		
		//2、调用对象中的函数，this代表的是对象本身			
		var o={
					   name:"张",
					   pwd:"123456",
					   age:20,
					   sayHello:function(){
						   console.log("对象中的函数");
						   console.log(this);//当前对象
					   }
		}
		o.sayHello();
		 </script>
	</body>
</html>

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

<body onload="loadwindow()">
		
		
		<!-- 
			onclick事件：点击事件（单击事件）
			onmouseover鼠标移动到某个元素上
		 -->
		 <button onclick="test()" onmouseout="outButton()">按钮</button>
		
		
		
		
		 <!-- 事件类型 -
		 onblur元素失去焦点
		 onfocus元素获得焦点
		 -->
		姓名:<input type="text" onblur="aa()" onfocus="bb()"/>
		
		<!-- 
		 onchange用户改变域的内容：元素的值发生改变时触发的事件
		 -->
		城市:<select onchange="changeCity()">
			<option value ="">河南</option>
			<option value ="">北京</option>
			<option value ="">上海</option>
		</select>
		<hr >
		
		
		<!-- 1、HTML事件处理程序
				直接在html元素上绑定事件 -->
		<button type="button" onclick="alert('hello')">按钮1</button>
		
		
		<!-- 2、DOMO级事件 -->
		<button type="button" id="bnt2">按钮2</button>
		<button type="button" id="bnt3">按钮3</button>
	</body>
		
		
		 
		<script type="text/javascript">
		
		//onload事件--------
			function loadwindow(){
				console.log("文档加载完成");
			}
			
		//onclick事件------------
			function test(){
				console.log("按钮被点击了...");
			}
			
		//onblur 事件
			function aa(){
				console.log("失去焦点---");
			}
		//onfocus事件	
			function bb(){
				console.log("聚焦点...");
			}
			
			
		//onchange事件
		function changeCity(){
			console.log("选择改变了...");
		}
		
		//onmouseout事件
		function outButton(){
			console.log("鼠标移开了...");
		}
		
		
		//<!-- 2、DOMO级事件 -->
		//1)事件源：获取事件源
		var bnt2=document.getElementById("bnt2")
		console.log(bnt2);
		//2）事件类型：给事件源绑定指定事件//3）执行函数：事件触发后要执行的代码
		bnt2.onclick=function(){
			console.log("按钮2被点击...");
		}
		
		
		//<!-- 2、DOMO2级事件 -->
		//1)事件源：获取事件源
		var bnt3=document.getElementById("bnt3")
		//添加事件监听
		bnt3.addEventListener("click",function(){
			console.log("按钮3被点击...");
		},false);
		
		bnt3.addEventListener("mouseout",bnt13,false);
			function bnt13(){ 
			console.log("鼠标移开按钮3...");
		}
		
		</script>
	
</html>