1. Object classification in javascript
1. Custom object
2. Built in objects
3. DOM object
4. BOM object
1. Custom object
Self created objects are custom objects
When we need an object, but javascript does not provide it, we need to define the object we need by ourselves
There are two basic ways to create custom objects
1. Create an object using {}
var stu = { name: "Soviet", age: 21, address: "Xi'an", getStuinfo: function() { return this.name + "-" + this.age + "-" + this.address; } };
Access the properties of the object
alert(stu.name + "," + stu.age + "," + stu.address);
Methods of accessing objects
var info = stu.getStuinfo(); alert(info);
2. Create object through constructor
Declaration definition function
function stu() { this.name = "Small"; this.age = 21; this.address = "Xi'an"; this.getstuinfo = function() { return this.name + "-" + this.age + "-" + this.address; } }
create object
var stuobj = new stu();
Access the properties of the object
alert(stuobj.name + "," + stuobj.age + "," + stuobj.address);
Methods of accessing objects
var info=stuobj.getstuinfo(); alert(info);
2. Built in objects
Built in object: an object provided by the javascript language itself
Number object String object Math object
Array object Date object Boolean object RegExp object
1. Number object
create object
var num1=new Number(100); alert(typeof num1);//object type
var num1=100; alert(typeof num1);//number type
1. Common attributes and methods
On the conversion method of hexadecimal
toString(parameter[2,8,16]);
For example:
var num1=new Number(100); alert(num1.toString(2));//1100100
var num1=new Number(100); alert(num1.toString(8));//144
var num1=new Number(100); alert(num1.toString(16));//64
isNaN() global function to determine whether a value is a NaN value
var x = 1000 / "ccc"; alert(isNaN(x));//true it is not a number
var x = 1000 / "1000"; alert(isNaN(x));//false it is a number
Number.MAX_VALUE = max
alert(Number.MAX_VALUE);//1.7976931348623157e+308
Number.MIN_VALUE min
alert(Number.MIN_VALUE);//5e-324
Number.parseFloat() converts a string to a floating point number
var str1 = "52.1"; var number1 = Number.parseFloat(str1); alert(number1);//52.1 alert(typeof number1);//number
Number.parseInt() converts a string to an integer number
var str1 = "52"; var number1 = Number.parseInt(str1); alert(number1);//52 alert(typeof number1);//number
toFixed number of decimal places reserved
var i=1.77876333; var val=i.toFixed(5); alert(val);//1.77876
Infinity infinity
var mynumber = 7; while (mynumber != Infinity) { mynumber = mynumber * mynumber; // alert(mynumber); } alert(mynumber);//Infinity
var sum = 10/0; var sum1 = 1 - sum; alert(sum1);//-Infinity
2. String object
create object
var str1=new String("xiao,nuan");
Length to calculate the length of the string
alert(str1.length);// 9
indexOf() to locate the first occurrence of a specified character in the string
alert(str1.indexOf("n"));// 5
lastIndexOf() to locate the last occurrence of a specified character in the string
alert(str1.lastIndexOf("n"));// 8
The specified character located by indexOf() lastIndexOf() does not appear, and the result is - 1
alert(str1.indexOf("c"));// -1
The match() function is used to find a specific character in the string and return it if found
alert(str1.match("su"));// null alert(str1.match("xiao"));// xiao
The replace() method replaces some characters with others in the string
alert(str1.replace("xiao,nuan","Su xiaonuan"));// Su xiaonuan
String case conversion using function
var str1 = new String("Su,Xiao,Nuan");
toUpperCase() convert lowercase to uppercase
alert(str1.toUpperCase());//SU,XIAO,NUAN
toLowerCase() convert uppercase to lowercase
alert(str1.toLowerCase());//su,xiao,nuan
Use the split() function to convert to an array
var strarray = str1.split(","); for (var i = 0; i < strarray.length; i++) { alert(strarray[i]);//Su Xiao Nuan }
charAt() returns the character at the specified position
alert(str1.charAt(0));//S
includes() finds whether the string contains the specified substring
alert(str1.includes("Su"));//true
startsWith() to see if the string starts with the specified substring
endsWith() to see if the string ends with the specified substring
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var names = ["Su xiaonuan", "Small warm", "Su Xiaomeng", "Su Xiaomeng", "Little dream", "Xiao Meng", "Xiao Nuan", "Su xiaonuan"]; for (var i = 0; i < names.length; i++) { var name = names[i]; if (name.startsWith("Soviet")) { //Su xiaonuan, Su Xiaomeng, Su Xiaomeng, Su xiaonuan alert(name); } if (name.endsWith("warm")) { //Su xiaonuan Xiao Nuan Su xiaonuan alert(name); } } </script> </head> <body> </body> </html>
substr (start index number, specified number) extracts a specified number of characters from the string from the start index number
Substring (start index number, end index number) extracts the character between two specified index numbers in the string
var str1="su,xiao,nuan"; alert(str1.substr(0,2)); //su alert(str1.substring(3,str1.length));//xiao,nuan
trim() removes whitespace from both sides of the string
var str=" su,xiao,nuan "; alert(str.length);//18 var newstr=str.trim(); alert(newstr.length);//12
Escape character in string [special character]
Escape characters: \ "-- double quotation marks \ '-- single quotation marks \ \ -- diagonal bar \ n -- line feed \ r -- carriage return \ r\n -- carriage return line feed \ t--tab \b -- space
alert("\"\t f:\\\r\nlianxi.html\b\"");
valueOf() returns the original value of a string object
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var str1 = new String("xiao"); var str2 = str1.valueOf(); alert(typeof str1);//object alert(typeof str2);//string </script> </head> <body> </body> </html>
toString() returns a string
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var str1 = new String("xiao"); var str2 = str1.toString(); alert(typeof str1);//object alert(typeof str2);//string </script> </head> <body> </body> </html>
3. Date object
new Date(); Get the current system time
var date=new Date() alert(date);//Sat Sep 04 2021 10:48:54 GMT+0800 (China standard time)
New date (milliseconds)
var date=new Date(1000); //The number of milliseconds to advance the specified parameter backward from 0:00:00 on January 1, 1970 alert(date);//Thu Jan 01 1970 08:00:01 GMT+0800 (China standard time)
new Date(dateString); Creates a date object from a string in the specified format
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var date=new Date("2000/8/25 05:20"); alert(date);//Fri Aug 25 2000 05:20:00 GMT+0800 (China standard time) </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var date=new Date("2000-8-25 05:20"); alert(date);//Fri Aug 25 2000 05:20:00 GMT+0800 (China standard time) </script> </head> <body> </body> </html>
The above two formats are correct, and the following one is not desirable
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var date=new Date("2000 05:20, August 25"); alert(date);//Invalid Date </script> </head> <body> </body> </html>
Invalid Date cannot be obtained
Create a date object by specifying a numeric value of month, month, day, hour, minute and second, minus 1
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var date = new Date("2000", "07", "25", "05", "20"); alert(date);//Fri Aug 25 2000 05:20:00 GMT+0800 (China standard time) </script> </head> <body> </body> </html>
Method of creating time and date
getFullYear() //Returns the year in four digits from the Date object. getMonth() //Returns the month (0 ~ 11) from the Date object. getDate() //Returns a day of the month (1 ~ 31) from the Date object. getHours() //Returns the hour (0 ~ 23) of the Date object. getMinutes() //Returns the minute (0 ~ 59) of the Date object. getSeconds() //Returns the number of seconds (0 ~ 59) of the Date object. getDay() //Returns a day of the week (0 ~ 6) from the Date object. getTime() //Returns the number of milliseconds since January 1, 1970.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var date1=new Date(); var fullYear=date1.getFullYear(); var month=date1.getMonth(); var date=date1.getDate(); var hours=date1.getHours(); var minutes=date1.getMinutes(); var seconds=date1.getSeconds(); var day=date1.getDay(); //Saturday, September 4, 2021, 11:12:24 alert(fullYear+"year"+(month+1)+"month"+date+"day"+hours+"Time"+minutes+"branch"+seconds+"Second week"+day); </script> </head> <body> </body> </html>
setDate() //Set a day (1 ~ 31) of the month in the Date object. setFullYear() //Sets the year (four digits) in the Date object. setHours() //Set the hours (0 ~ 23) in the Date object. setMilliseconds() //Sets the milliseconds (0 ~ 999) in the Date object. setMinutes() //Set the minutes (0 ~ 59) in the Date object. setMonth() //Set the month (0 ~ 11) in the Date object. setSeconds() //Sets the seconds (0 to 59) in the Date object.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> var date1=new Date(); date1.setFullYear("2000"); var fullYear=date1.getFullYear(); alert(fullYear);//2000 </script> </head> <body> </body> </html>
getTime() returns the number of milliseconds since January 1, 1970} new date (milliseconds);
alert(new Date().getTime()); //1630725556374