<!-- 
         String 
charAt(idx) returns the char value at the specified index.
int indexOf(int ch, int fromIndex) returns the index at the first occurrence of the specified character in this string, and searches from the specified index.
String substring(int beginIndex) returns a new string, which is a substring of this string.
substr(m,n) returns the string starting from position m and taking n characters. If there is no n, it defaults to the end of the string
substring(m,n) returns the string starting from m and ending at n. if there is no n, it defaults to the end of the string
To lowercase() to lowercase
toUpperCase() to uppercase
Length returns the length of a string
        
        
        Math
            Math.random() / / random number
            Math.ceil() / / round up, greater than the maximum integer
            Math.floor() / / round down, less than the smallest integer String
         -->

Date
Get date
getDate() returns a day of the month (1 ~ 31) from the Date object.
getDay() returns a day of the week (0 ~ 6) from the Date object.
getFullYear() returns the year in four digits from the Date object.
getHours() returns the hour (0 ~ 23) of the Date object.
getMilliseconds() returns the milliseconds (0 ~ 999) of the Date object.
getMinutes() returns the minutes (0 ~ 59) of the Date object.
getMonth() returns the month (0 ~ 11) from the Date object.
getSeconds() returns the number of seconds (0 ~ 59) of the Date object.
getTime() returns the number of milliseconds since January 1, 1970.
getTimezoneOffset() returns the minute difference between local time and Greenwich mean time (GMT).
getUTCDate() returns the day of the month (1 ~ 31) from the Date object according to universal time.
getUTCDay() returns the day of the week (0 ~ 6) from the Date object according to universal time.
getUTCFullYear() returns a four digit year from the Date object based on universal time.
Getuthours() returns the hour (0 ~ 23) of the Date object according to universal time.
getUTCMilliseconds() returns the milliseconds (0 ~ 999) of the Date object according to universal time.
getUTCMinutes() returns the minutes (0 ~ 59) of the Date object according to universal time.
getUTCMonth() returns the month (0 ~ 11) from the Date object according to universal time.
getUTCSeconds() returns the seconds (0 ~ 59) of the Date object according to universal time.
getYear() is obsolete. Use the getFullYear() method instead.
parse() returns the number of milliseconds from midnight on January 1, 1970 to a specified date (string).
                    
Set date
                    
setDate() sets a day (1 ~ 31) of the month in the Date object.
setFullYear() sets the year (four digits) in the Date object.
setHours() sets the hours (0 to 23) in the Date object.
setMilliseconds() sets the milliseconds (0 to 999) in the Date object.
setMinutes() sets the minutes (0 ~ 59) in the Date object.
setMonth() sets the month (0 ~ 11) in the Date object.
setSeconds() sets the seconds (0 to 59) in the Date object.
setTime() the setTime() method sets the Date object in milliseconds.
setUTCDate() sets the day (1 ~ 31) of the month in the Date object according to universal time.
setUTCFullYear() sets the year (four digits) in the Date object according to universal time.
Setuthours() sets the hours (0 ~ 23) in the Date object according to universal time.
setUTCMilliseconds() sets the milliseconds (0 ~ 999) in the Date object according to universal time.
setUTCMinutes() sets the minutes (0 ~ 59) in the Date object according to universal time.
setUTCMonth() sets the month (0 ~ 11) in the Date object according to universal time.
setUTCSeconds() the setUTCSeconds() method is used to set the second field of the specified time according to universal time (UTC).
setYear() is obsolete. Use the setFullYear() method instead.
                    
                    
toDateString() converts the Date part of the Date object into a string.
toGMTString() is obsolete. Use the toUTCString() method instead.
Tostring() returns the date format of the string using the ISO standard.
toJSON() returns a date string in JSON data format.
toLocaleDateString() converts the Date part of the Date object into a string according to the local time format.
toLocaleTimeString() converts the time part of the Date object into a string according to the local time format.
toLocaleString() converts the Date object into a string according to the local time format.
toString() converts the Date object to a string.
toTimeString() converts the time part of the Date object into a string.
                    toUTCString()    
Convert the Date object to a string according to universal time.
                    
Example:
                    
                    var today = new Date();
                    var UTCstring = today.toUTCString();
UTC() returns the number of milliseconds from January 1, 1970 to a specified date based on universal time.
valueOf() returns the original value of the Date object.
            */

 <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());//Convert all to capital
			
			//Math.random() / / random number
			console.log(Math.random());
			//Math.ceil() / / round up, greater than the maximum integer
			console.log(Math.ceil(1.2));
			
			//Math.floor() / / round down, less than the smallest integer String
			console.log(Math.floor(1.2));
 var date=new Date();//Get the date of the day
		   console.log(date);
		    console.log(date.getFullYear());//Acquisition year
			 console.log(date.getMonth()+1);//Month 0 ~ 11 -------- plus 1
			  console.log(date.getDate());//day
			  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);
				//Time localization
			    console.log(date.toLocaleString());	
		 </script>
	</body>
</html>

<!-- 
Object
I. creation of objects
1. Create objects in literal form
var object name = {}// Empty object
var object name={
Key: value,
                        ...
                    };
2. Create a new Object
var object name = new Object()// Empty object
3. create through the create method of the Object object
var object name = object create(null);// Empty object
var object name = object Create (object);
         -->
         <script type="text/javascript">
             /*
1. Create objects in literal form
var object name = {}// Empty object
var object name={
Key: value,
                    ...
                };

var obj1={};
		    console.log(obj1);
		   var obj2={
			   name:"Zhang",
			   age:20,
		   };
		   console.log(obj2);
		   
		   /*
		   2,Create through new Object
		   	var Object name = new Object()// Empty object
		   */
		  var obj3=new Object();
		  console.log(obj3);
		  
		  
		  
		  
		  /*
		  3,Created through the create method of the Object object
		  	var Object name = object create(null);// Empty object
		  	var Object name = object Create (object);
		  */
		 var obj4=Object.create(null);
		 console.log(obj4);
		 var obj5=Object.create(obj2);
		 console.log(obj5);
		 
		 
		 
		 
		 /*
		 2,Operation of object
			1)Get the property of the object (get null if the property does not exist)
				Object name Attribute name;
			2)Set the object property (if the property exists, modify the property value; if the property does not exist, add the property value)
				Object name Attribute name = value;
					
		 */
		
		//Get the properties of the object ----- none
		console.log(obj1.name);//undefined
		//Get the properties of the object ----- existing
		console.log(obj2.name);//Zhang
		console.log(obj5.name);//Zhang
		
		//Set the object property object name Attribute name = value;
		console.log("-----Set object properties----");
		//If the attribute exists, modify the attribute value
		obj2.age=18;
		console.log(obj2);//modify
		
		//If the attribute does not exist, add the attribute value
		obj2.upwd="123456";
		console.log(obj2);
		
		
		/*
		3,Serialization and deserialization of objects
				Serialization: converts a js object (JSON object) into a JSON string
					var Variable name = JSON Stringify (object)
				Deserialization: convert JSON string to JS object (JSON object)
					var Object name = JSON Parse (jsonz string)
		*/
	   
		console.log("-----Serialization and deserialization of objects------");
		var obj={
					   name:"Zhang",
					   pwd:"123456",
					   age:20,
		};
		
		//serialize
		var objStr=JSON.stringify(obj);//Object to string
		console.log(objStr);
		
		
		//Deserialization ---- convert string to object
		
		var jsonStr='{"name":"Zhang San","pwd":"654321","age":18}';
		var strToJSON=JSON.parse(jsonStr);
		console.log(strToJSON);
		
		
		
		/*
		this
			Who calls the function and whom does this refer to
			1,Directly call the function, and this represents the global window object
			2,Call the function in the object. this represents the object itself
			
		*/
	   
	   
	   //1. Directly call the function, and this represents the global window object
	   console.log("-----this Use of------");
		function test(){
			console.log("This is a method this");
			console.log(this);
		}
		test();
		
		//2. Call the function in the object. this represents the object itself			
		var o={
					   name:"Zhang",
					   pwd:"123456",
					   age:20,
					   sayHello:function(){
						   console.log("Functions in objects");
						   console.log(this);//Current object
					   }
		}
		o.sayHello();
		 </script>
	</body>
</html>

<!-- 
Event:
Several nouns in the event:
Event source: what element tag is bound to the event
Event name: what event is bound to
Event listener: browser window
Execution function: the code to be executed after the event is triggered
     -->
    
    <!-- 
Common event types
onload is triggered immediately after the page or image is loaded
The onblur element loses focus
The onfocus element gets the focus
onclick click an object with the mouse
onchange users change the contents of the domain
onmouseover moves the mouse over an element
onmouseout mouse away from an element
onkeyup the key of a keyboard is released
onkeydown the key of a keyboard is pressed
     -->
    <!-- 
Event flow
Event bubbling: at the beginning of time, it is accepted by the most basic element, and then propagated up to the less specific node document level by level
Event capture: the time starts to be accepted by the document node, and then propagates down to the specific node level by level
     -->
     <!-- 
Event handler (event binding mode)
1. HTML event handler
Bind events directly on html elements
2. DOMO level events
Get the event source first, and then bind the event to the event source
You cannot bind the same event to an element multiple times at the same time
3. Level 2 events
Event source addEventListener("event type", "execute function", true)
            
            
Note: get the node object through the id attribute value
            document. Getelementid ("getelementid");
      -->
     
        <!-- 
onload event: executed after the document (HTML page) is loaded
         -->

<body onload="loadwindow()">
		
		
		<!-- 
			onclick Event: click event (click event)
			onmouseover Move the mouse over an element
		 -->
		 <button onclick="test()" onmouseout="outButton()">Button</button>
		
		
		
		
		 <!-- Event type -
		 onblur Element loses focus
		 onfocus Element gets focus
		 -->
		full name:<input type="text" onblur="aa()" onfocus="bb()"/>
		
		<!-- 
		 onchange User changes the content of the field: the event triggered when the value of the element changes
		 -->
		city:<select onchange="changeCity()">
			<option value ="">Henan</option>
			<option value ="">Beijing</option>
			<option value ="">Shanghai</option>
		</select>
		<hr >
		
		
		<!-- 1,HTML Event handler
				Directly in html Binding events on element -->
		<button type="button" onclick="alert('hello')">Button 1</button>
		
		
		<!-- 2,DOMO Level event -->
		<button type="button" id="bnt2">Button 2</button>
		<button type="button" id="bnt3">Button 3</button>
	</body>
		
		
		 
		<script type="text/javascript">
		
		//onload event--------
			function loadwindow(){
				console.log("Document loading complete");
			}
			
		//onclick event------------
			function test(){
				console.log("The button was clicked...");
			}
			
		//onblur event
			function aa(){
				console.log("Lose focus---");
			}
		//onfocus event	
			function bb(){
				console.log("Focus...");
			}
			
			
		//onchange event
		function changeCity(){
			console.log("The choice has changed...");
		}
		
		//onmouseout event
		function outButton(){
			console.log("The mouse moved away...");
		}
		
		
		//<!--  2. DOMO level events -- >
		//1) Event source: get event source
		var bnt2=document.getElementById("bnt2")
		console.log(bnt2);
		//2) Event type: specify the event for the event source binding / / 3) execution function: the code to be executed after the event is triggered
		bnt2.onclick=function(){
			console.log("Button 2 is clicked...");
		}
		
		
		//<!--  2. DOMO2 level -- >
		//1) Event source: get event source
		var bnt3=document.getElementById("bnt3")
		//Add event listener
		bnt3.addEventListener("click",function(){
			console.log("Button 3 is clicked...");
		},false);
		
		bnt3.addEventListener("mouseout",bnt13,false);
			function bnt13(){ 
			console.log("Mouse off button 3...");
		}
		
		</script>
	
</html>