Home Web Front-end JS Tutorial JavaScript introductory tutorial (3) js object-oriented_basic knowledge

JavaScript introductory tutorial (3) js object-oriented_basic knowledge

May 16, 2016 pm 06:56 PM
javascript Getting Started Tutorial object-oriented

JavaScript 是使用“对象化编程”的,或者叫“面向对象编程”的。所谓“对象化编程”,意思是把 JavaScript 能涉及的范围划分成大大小小的对象,对象下面还继续划分对象直至非常详细为止,所有的编程都以对象为出发点,基于对象。小到一个变量,大到网页文档、窗口甚至屏幕,都是对象。这一章将“面向对象”讲述 JavaScript 的运行情况。
对象的基本知识
对象是可以从 JavaScript“势力范围”中划分出来的一小块,可以是一段文字、一幅图片、一个表单(Form)等等。每个对象有它自己的属性方法事件。对象的属性是反映该对象某些特定的性质的,例如:字符串的长度、图像的长宽、文字框(Textbox)里的文字等等;对象的方法能对该对象做一些事情,例如,表单的“提交”(Submit),窗口的“滚动”(Scrolling)等等;而对象的事件就能响应发生在对象上的事情,例如提交表单产生表单的“提交事件”,点击连接产生的“点击事件”。不是所有的对象都有以上三个性质,有些没有事件,有些只有属性。引用对象的任一“性质”用“<对象名>.<性质名>”这种方法。

基本对象
现在我们要复习以上学过的内容了——把一些数据类型用对象的角度重新学习一下。
Number “数字”对象。这个对象用得很少,作者就一次也没有见过。不过属于“Number”的对象,也就是“变量”就多了。

Attributes
MAX_VALUE Usage: Number.MAX_VALUE; Returns the "maximum value".
MIN_VALUE
Usage: Number.MIN_VALUE; Returns the "minimum value".
NaN
Usage: Number.NaN or NaN; returns "NaN". "NaN" (not a number) was introduced very early on.
NEGATIVE_INFINITY
Usage: Number.NEGATIVE_INFINITY; Return: negative infinity, a value smaller than the "minimum value".
POSITIVE_INFINITY
Usage: Number.POSITIVE_INFINITY; Returns: positive infinity, a value greater than the "maximum value".
Method
toString() Usage: .toString(); Returns: a numerical value in the form of a string. For example: if a == 123; then a.toString() == '123'.
String String object. The simplest, quickest, most effective, and commonly used way to declare a string object is to assign it directly.
Attributes
length Usage: .length; Returns the length of the string.
Method
charAt() Usage: .charAt(); Returns the string at the < position >A single character of bits. Note: One character in the string is at position 0, the second character is at position 1, and the last character is at position length - 1.
charCodeAt()
Usage: .charCodeAt(); Returns the ASCII code of a single character of the string located at the position.
fromCharCode()
Usage: String.fromCharCode(a, b, c...); Returns a string in which the ASCII code of each character is composed of a, b, c.. . Wait to be sure.
indexOf()
Usage: .indexOf([, ]); This method starts from< Searches for in the string object> (if is given, ignore the previous position), if found, return its position, if not found, return "- 1".All "positions" start from scratch.
lastIndexOf()
Usage: .lastIndexOf([, ]); similar to indexOf() , but start looking from the back.
split()
Usage: .split(); Returns an array that is separated from The determines the separation point and will not itself be included in the returned array. For example: '1&2&345&678'.split('&') returns array: 1,2,345,678. Regarding arrays, we will discuss them in a moment.
substring()
Usage: .substring([, ]); Returns the substring of the original string, the character A string is a segment of the original string from the position to the previous position of the position. - = Returns the length of the string (length). If is not specified or exceeds the string length, the substring is taken from the position to the end of the original string. If a string cannot be returned at the specified location, an empty string is returned.
substr()
Usage: .substr([, ]); Returns the substring of the original string, the character A string is a section of the original string starting from the position and having a length of . If is not specified or exceeds the string length, the substring is taken from the position to the end of the original string. If a string cannot be returned at the specified location, an empty string is returned.
toLowerCase()
Usage: .toLowerCase(); returns a string in which all uppercase letters of the original string are changed to lowercase.
toUpperCase() Usage: .toUpperCase(); returns a string in which all lowercase letters of the original string are changed to uppercase.
Array Array object. An array object is a collection of objects, and the objects inside can be of different types. Each member object of the array has a "subscript" used to indicate its position in the array (since it is a "position", it also starts from zero).
How to define an array:
var = new Array();
This defines an empty array. To add array elements in the future, use:
[] = ...;
Note that the square brackets here do not mean "can be omitted". The subscript of the array is expressed using square brackets. enclosed in parentheses.
If you want to initialize the data directly when defining the array, please use:
var = new Array(, , ...);
For example, var myArray = new Array( 1, 4.5, 'Hi'); defines an array myArray, the elements inside are: myArray[0] == 1; myArray[1] == 4.5; myArray[2] == 'Hi'.
However, if there is only one element in the element list, and this element is a positive integer, this will define an array containing empty elements.
Note: JavaScript only has one-dimensional arrays! Never use the stupid method "Array(3,4)" to define a 4 x 5 two-dimensional array, or use the method "myArray[2,3]" to return the elements in a "two-dimensional array" . Any call of the form "myArray[...,3]" actually only returns "myArray[3]".To use multidimensional arrays, use this dummy method:
var myArray = new Array(new Array(), new Array(), new Array(), ...);
In fact, this is a one-dimensional array, and each element in it is an array. When calling the elements of this "two-dimensional array": myArray[2][3] = ...;
Attributes
length Usage: .length; Returns: the length of the array, that is, how many elements there are in the array. It is equal to the index of the last element in the array plus one. So, if you want to add an element, just: myArray[myArray.length] = ....
Method
join() Usage: .join(); returns a string that The elements in the array are strung together and placed between elements with . This method does not affect the original contents of the array.
reverse()
Usage: .reverse(); reverses the order of elements in the array. If you use this method on the array [1, 2, 3], it will make the array become: [3, 2, 1].
slice()
Usage: .slice([, ]); returns an array, which is a subset of the original array , begins with and ends with . If is not given, the subset is taken until the end of the original array.
sort()
Usage: .sort([]); arranges the elements in the array in a certain order. If is not specified, alphabetical order is used. In this case, 80 is ranked higher than 9. If is specified, the sorting method specified by is sorted. are difficult to describe. Here we only introduce some useful to you.
Arrange numbers in ascending order:
function sortMethod(a, b) {
return a - b;
}

myArray.sort(sortMethod);
Sort the numbers in descending order: put the above "a - b" should become "b - a".
For functions, please see below.
Math A "math" object that provides mathematical calculations on data. The properties and methods mentioned below will not explain the "usage" in detail. When using them, please remember to use the format "Math.".
Properties
E Returns the constant e (2.718281828...).
LN2
Returns the natural logarithm of 2 (ln 2).
LN10
Returns the natural logarithm of 10 (ln 10).
LOG2E
Returns the logarithm of e (log2e) with 2 as the low value.
LOG10E
Returns the logarithm of e with 10 as the low (log10e).
PI
Returns π (3.1415926535...).
SQRT1_2
Returns the square root of 1/2.
SQRT2
Returns the square root of 2.
Methods
abs(x) Returns the absolute value of x.
acos(x)
Returns the inverse cosine of x (the cosine equals the angle of x), expressed in radians.
asin(x)
Returns the arcsine of x.
atan(x)
Returns the arctangent of x.
atan2(x, y)
Returns the argument of the complex number corresponding to the point (x, y) in the complex plane, expressed in radians, and its value is between -π and π.
ceil(x)
Returns the smallest integer greater than or equal to x.
cos(x)
Returns the cosine of x.
exp(x)
Returns e raised to the x power (ex).
floor(x)
Returns the largest integer less than or equal to x.
log(x)
Returns the natural logarithm of x (ln x).
max(a, b)
Returns the larger number among a, b.
min(a, b)
Returns the smaller number among a, b.
pow(n, m)
Returns n raised to the m power (nm).
random()
Returns a random number greater than 0 and less than 1.
round(x)
Returns the rounded value of x.
sin(x)
Returns the sine of x.
sqrt(x)
Returns the square root of x.
tan(x)
Returns the tangent of x.
Date Date object. This object can store any date from 0001 to 9999, and can be accurate to milliseconds (1/1000th of a second). Internally, a date object is an integer that is the number of milliseconds since midnight, January 1, 1970, to the date pointed to by the date object. If the date referred to is earlier than 1970, it is a negative number. All dates and times, if no time zone is specified, use the "UTC" (Universal Time) time zone, which is numerically the same as "GMT" (Greenwich Mean Time).
Define a date object:
var d = new Date;
This method makes d a date object and has an initial value: the current time. If you want to customize the initial value, you can use:
var d = new Date(99, 10, 1); //October 1, 1999
var d = new Date('Oct 1, 1999'); //October 1, 1999
etc. The best way is to strictly define time using the "method" introduced below.
Methods
There are many methods like "g/set[UTC]XXX" below, which means there are both "getXXX" method and "setXXX" method. "Get" is to get a certain value, and "set" is to set a certain value. If there is a "UTC" letter, it means that the value obtained/set is based on UTC time; if there is no letter, it means that it is based on local time or the default time of the browsing period.
If there is no description, the usage format of the method is: ".", the same below.
g/set[UTC]FullYear() Return/set the year, represented by four digits. If "x.set[UTC]FullYear(99)" is used, the year is set to 0099.
g/set[UTC]Year()
Return/set the year, expressed as two digits. When setting, the browser automatically adds "19" at the beginning, so use "x.set[UTC]Year(00)" to set the year to 1900.
g/set[UTC]Month()
Return/set the month.
g/set[UTC]Date()
Return/set the date.
g/set[UTC]Day()
Return/set the day of the week, 0 means Sunday.
g/set[UTC]Hours()
Return/set hours, 24-hour format.
g/set[UTC]Minutes()
Return/set minutes.
g/set[UTC]Seconds()
Returns/sets the number of seconds.
g/set[UTC]Milliseconds()
Returns/sets the number of milliseconds.
g/setTime()
Return/set the time, which is the internal processing method of the date object: the milliseconds calculated from 0:00 on January 1, 1970 to the date pointed to by the date object number. If you want to delay the time pointed by a date object by 1 hour, use: "x.setTime(x.getTime() 60 * 60 * 1000);" (one hour 60 minutes, one minute 60 seconds, one second 1000 milliseconds ).
getTimezoneOffset()
Returns the number of minutes difference between the time zone used by the date object and Greenwich Mean Time. In urban areas east of Greenwich, the value is negative, for example: China time zone (GMT 0800) returns "-480".
toString()
Returns a string describing the date pointed to by the date object. The format of this string is similar to: "Fri Jul 21 15:43:46 UTC 0800 2000".
toLocaleString()
Returns a string describing the date pointed to by the date object, expressed in local time format. For example: "2000-07-21 15:43:46".
toGMTString()
Returns a string describing the date pointed to by the date object, in GMT format.
toUTCString()
Returns a string describing the date pointed to by the date object, in UTC format.
parse()
Usage: Date.parse(); Returns the internal expression of the date object.


Global object
The global object never appears. It can be said to be virtual. The purpose is to turn the global function into an "object" change". In the Microsoft JScript Language Reference, it is called the "Global object", but its methods and properties are never referenced with "Global.xxx" (and doing so will cause an error), but directly with "xxx".
Attribute
NaN I said it early.
Methods
eval() Operates the string enclosed in parentheses as a standard statement or expression.
isFinite()
Returns true if the number in the brackets is "finite" (between Number.MIN_VALUE and Number.MAX_VALUE); otherwise returns false.
isNaN()
Returns true if the value inside the brackets is "NaN" and false otherwise.
parseInt()
Returns the value after converting the content in parentheses into an integer. If the brackets are a string, the numeric part at the beginning of the string is converted to an integer, if it starts with a letter, "NaN" is returned.
parseFloat()
Returns the value after converting the string in brackets into a floating point number. The numeric part at the beginning of the string is converted into a floating point number. If it starts with a letter, "NaN" is returned.
toString() Usage: .toString(); Convert the object into a string. If you specify a value in parentheses, all values ​​are converted to the specific base during the conversion process.
escape() Returns the new string encoded by the string in brackets. This encoding is applied to URLs, that is, spaces are written in the format of " ". " " is not encoded. If you want " " to be encoded, please use: escape('...', 1).
unescape() is the reverse process of escape(). Decode the string in parentheses into a normal string.

FunctionDefinition of function
The so-called "function" has a return value An object or an object's methods.
Types of functions
Common functions include: constructor, such as Array(), which can construct an array; global function, which is a method in the global object; self Define functions; etc.
Custom function
Use the following statement to define a function:
function function name ([parameter set]) {
...
[return[ ];]
...
}
where , the braces used after the function and at the end of the function cannot be omitted, even if the entire function has only one sentence.
Function names have the same naming rules as variable names, that is, they only contain letters, numbers, underscores, leading letters, and cannot repeat reserved words.
The parameter set is optional, but the parentheses must be present.
Parameters are the bridge that transmits information from the outside of the function to the inside of the function. For example, if you want to ask a function to return the cube of 3, you have to let the function know the value "3". At this time, there must be a Variables to receive values ​​are called parameters.
The parameter set is a set of one or more parameters separated by commas, such as: a, b, c.
There are one or more lines of statements inside the function. These statements will not be executed immediately, but will only be executed when other programs call it. These statements may contain "return" statements. When executing a function, when a return statement is encountered, the function immediately stops execution and returns to the program that called it. If "return" is followed by , the value will be returned when exiting the function.
Within the function, parameters can be used directly as variables, and some new variables can be created using the var statement, but these variables cannot be called by procedures outside the function. To enable the information inside the function to be called externally, either use the "return" return value or use global variables.
Global variables The variables defined by the "var" statement at the "root" of the Script (not inside the function) are global variables, which can be called and changed anywhere in the entire process.
Example
function addAll(a, b, c) {
return a b c;
}

var total = addAll(3, 4, 5);
This example creates A function called "addAll" is created, which has three parameters: a, b, c. Its function is to return the result of the addition of three numbers. Outside the function, use "var total = addAll(3, 4, 5);" to receive the return value of the function.
More often, functions have no return value. This kind of function is called "procedure" in some languages ​​that emphasize strictness, such as "Sub" in Basic language and "procedure" in Pascal language.
Attributes
arguments An array reflecting the parameters specified when the external program calls the function. Usage: Call "arguments" directly inside the function.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1665
14
PHP Tutorial
1269
29
C# Tutorial
1249
24
Beginner's Guide: Start from scratch and learn MyBatis step by step Beginner's Guide: Start from scratch and learn MyBatis step by step Feb 19, 2024 am 11:05 AM

Concise and easy-to-understand MyBatis introductory tutorial: write your first program step by step MyBatis is a popular Java persistence layer framework that simplifies the process of interacting with databases. This tutorial will show you how to use MyBatis to create and perform simple database operations. Step 1: Environment setup First, make sure your Java development environment has been installed. Then, download the latest version of MyBatis and add it to your Java project. You can download it from the official website of MyBatis

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

PHP Advanced Features: Best Practices in Object-Oriented Programming PHP Advanced Features: Best Practices in Object-Oriented Programming Jun 05, 2024 pm 09:39 PM

OOP best practices in PHP include naming conventions, interfaces and abstract classes, inheritance and polymorphism, and dependency injection. Practical cases include: using warehouse mode to manage data and using strategy mode to implement sorting.

Explore object-oriented programming in Go Explore object-oriented programming in Go Apr 04, 2024 am 10:39 AM

Go language supports object-oriented programming through type definition and method association. It does not support traditional inheritance, but is implemented through composition. Interfaces provide consistency between types and allow abstract methods to be defined. Practical cases show how to use OOP to manage customer information, including creating, obtaining, updating and deleting customer operations.

Are there any class-like object-oriented features in Golang? Are there any class-like object-oriented features in Golang? Mar 19, 2024 pm 02:51 PM

There is no concept of a class in the traditional sense in Golang (Go language), but it provides a data type called a structure, through which object-oriented features similar to classes can be achieved. In this article, we'll explain how to use structures to implement object-oriented features and provide concrete code examples. Definition and use of structures First, let's take a look at the definition and use of structures. In Golang, structures can be defined through the type keyword and then used where needed. Structures can contain attributes

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

Analysis of object-oriented features of Go language Analysis of object-oriented features of Go language Apr 04, 2024 am 11:18 AM

The Go language supports object-oriented programming, defining objects through structs, defining methods using pointer receivers, and implementing polymorphism through interfaces. The object-oriented features provide code reuse, maintainability and encapsulation in the Go language, but there are also limitations such as the lack of traditional concepts of classes and inheritance and method signature casts.

In-depth understanding of PHP object-oriented programming: Debugging techniques for object-oriented programming In-depth understanding of PHP object-oriented programming: Debugging techniques for object-oriented programming Jun 05, 2024 pm 08:50 PM

By mastering tracking object status, setting breakpoints, tracking exceptions and utilizing the xdebug extension, you can effectively debug PHP object-oriented programming code. 1. Track object status: Use var_dump() and print_r() to view object attributes and method values. 2. Set a breakpoint: Set a breakpoint in the development environment, and the debugger will pause when execution reaches the breakpoint, making it easier to check the object status. 3. Trace exceptions: Use try-catch blocks and getTraceAsString() to get the stack trace and message when the exception occurs. 4. Use the debugger: The xdebug_var_dump() function can inspect the contents of variables during code execution.

See all articles