JavaScript advanced object

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

Keywords: Javascript html5 html

Added by Danny620 on Thu, 16 Dec 2021 16:46:30 +0200