javascript| Tutorial
The JavaScript language is object-based (object-based) rather than object-oriented (object-oriented). It is said to be an object-based language, mainly because it does not provide many features such as abstraction, inheritance, overloading, and so on object-oriented languages. Instead, the complex objects created by other languages are unified to form a very powerful object system.
Although the JavaScript language is an Object-based object, it has some basic object-oriented features. It can create its own objects as needed to further expand the scope of JavaScript applications and to enhance the writing of powerful Web documents.
First, the basics of the object
1, the basic structure of the object
The object in JavaScript is made up of attributes (properties) and methods (methods) The composition of two basic elements. The former is an object that implements the loading unit of the information in the process of carrying out its required behavior, which is associated with the variable, which means that the object can be executed according to the designer's intention, which is associated with a particular function.
2, ways to refer to Objects
An object is really used and can be obtained in the following ways:
o referencing JavaScript internal objects;
O is provided by the browser environment ;
O creates a new object.
This means that an object must exist before it is referenced, otherwise the reference will have no meaning and an error message appears. From the above we can see that JavaScript reference objects can be obtained in three ways. Either create a new object or take advantage of an existing object.
3, about Object action statement
JavaScript is not a pure object-oriented language, it has many features that provide object-oriented languages, So the JavaScript designer gives it to you as an "object-based" rather than an object-oriented language, providing several statements and keywords and operators for manipulating objects in JavaScript. The
(1) for...in Statement
format is as follows:
for (object property name in known object name)
description:
o The function of the statement is a control loop that operates on all properties of a known object. Instead of using a counter, it is a repeated reset of all the attributes of a known object to a variable.
O The advantage of this statement is that you do not need to know the number of attributes in the object.
Example: The following function displays the contents of an array:
Function ShowData (object)
for (Var x=0; x<30; X + +)
document.write (Object[i]);
|
This function accesses the properties of each object by using an array subscript order value, in which case you must first know the subscript value of the array, or an error occurs if it is out of range. To make a for...in statement, you don't need to know the number of object attributes at all, see below:
Function ShowData (object)
For (var prop in object)
document.write (Object[prop]);
|
When you use this function, in the loop body, the for automatically takes out the property until you finally do so.
(2) With statement
Using this statement means that any reference to a variable in the statement body is considered to be an attribute of the object to save some code.
With object{
...}
All the statements in the curly braces that follow the WITH statement are scoped to the object at the end.
(3) This keyword
This is a reference to the current in JavaScript because the reference of an object is multi-level, multidimensional, often a reference to one object requires a reference to another object, and another object may have to refer to another object, which may cause confusion, and finally you do not know the object of the reference now, This javascript provides a statement that specifies the current object for the object.
(4) New operator
Although the functions of objects in JavaScript are already very powerful. But what's more powerful is that designers can create their own objects as needed to meet a specific requirement. Use the new operator to create a new object. Its creation object uses the following format:
Newobject=new Object (Parameters table);
Where NewObject creates a new object: Object is an existing, Parameters table parameter list, and new is a command statement in JavaScript.
such as creating a date new object
Newdata=new Data ()
Birthday=new Data (December 12.1998)
You can then make NewData, birthday as a new Date object.
4, reference to object properties
The reference to an object property can be implemented in one of the following three ways:
(1) using the dot (.) operator
University. Name= "Yunnan Province"
University.city= "Kunming"
University. Date= "1999"
|
Where university is an existing object, Name, city, date is its three attributes, and is assigned a value by operation.
(2) To implement the reference through the subscript of the object
university[0]= "Yunnan"
university[1]= "Kunming"
University[2]= "1999"
|
Through an array-type Access property, you can use a looping operation to get its value.
function Showunievsity (object)
For (Var j=0;j<2; j + +)
document.write (Object[j])
|
If the use of for...in can not know the number of its attributes can be achieved:
Function Showmy (object)
For (Var prop in this)
Docament.write (This[prop]);
|
(3) Through the form of strings to achieve
university["Name"]= "Yunnan"
university["City"]= "Kunming"
university["Date"]= "1999"
|
5, reference to the method of the object
The reference to an object method in JavaScript is very simple.
Objectname.methods ()
Actually the methods () =functionname method is essentially a function. If you refer to the Showmy () method in the University object, you can use:
document.write (University.showmy ())
Or: document.write (University)
such as the method for referring to Cos () in the math inner object
The
With (math)
document.write (cos (35));
document.write (cos (80));
It is relatively complicated to refer to without using with:
document.write (Math.Cos (35))
document.write (Math.sin (80))
Ii. Properties and methods of common objects
JavaScript provides us with some very useful common internal objects and methods. Users do not need to use their scripts to implement these features. This is the real purpose of object-based programming.
A string (string), math (numeric) and date (date) three objects and other related methods are provided in JavaScript. This provides a very favorable condition for programmers to quickly develop powerful scripting programs.
1. Common internal Objects
For references to object properties and methods in JavaScript, there are two scenarios: one is that the object is a static object, that is, you do not need to create an instance for it when referencing the object's properties or methods, while another object or method that references it must create an instance of it, that is, the object is a dynamic object.
A reference to a JavaScript inner object so that it is tightly centered around its properties and methods. Therefore, it is very important to understand the static motion of the object for mastering and understanding the inner object of JavaScript.
1), String objects
O String object: internal static.
o When accessing properties and methods, you can use the (.) operator to implement.
o Basic use Format: Objectname.prop/methods
(1) The properties of the string object
The object has only one property, that is, length. It shows the number of characters in the string, including all the symbols.
Cases:
Mytest= "This is a JavaScript"
Mystringlength=mytest.length
The last Mystringlength returns the length of the mytest string at 20.
(2) Methods of String objects
There are 19 methods for a string object. Used primarily for display of strings in Web pages, font size, font color, character search, and character capitalization conversions.
The main methods are as follows:
O Anchor Point anchor (): This method creates the same anchor tag as in an HTML document. Use anchor as in HTML (A name= ""). Accessed through the following format: String.anchor (anchorname).
O Control method for character display
Big font display, italics () italic display, Bold () bold character display, blink () character flashing display, small () characters in small text display, fixed () fixed highlight word display, fontsize (size) control font size.
o font color method; fontcolor (color)
o String Case Conversion
toLowerCase ()-Lowercase conversion, touppercase () uppercase conversion. The following converts a given string to uppercase and lowercase respectively:
String=stringvalue.touppercase and String=stringvalue.tolowercase.
o character search: Indexof[charactor,fromindex]
Searches for the first occurrence of charactor from the specified FORMINDTX location.
Returns part of a string: substring (start,end)
All characters from start to end are returned.
2), arithmetic function of the math object
Function: Provides an introduction to the Readme operation except addition, subtraction, multiplication and addition. such as logarithm, square root and so on.
Static motion: Static Object
(1) Main properties
The math provides 6 properties that are often used in mathematics as constants E, 10-based natural logarithm LN10, 2-based natural logarithm LN2, 3.14159 Pi, and 1/2 square roots sqrt1-2,2 of the square root of SQRT2.
(2) Main methods
Absolute value: ABS ()
Sine cosine value: sin (), cos ()
Inverse cosine of sine: ASIN (), ACOs ()
Tangential tangent: tan (), Atan ()
Rounded: Round ()
Square root: sqrt ()
Value based on several square times: Pow (base,exponent)
...
3), date and time object
Function: Provides an object about the date and time.
Static: Dynamic, that is, you must use the new operator to create an instance. Cases:
Mydate=new Date ()
The Date object does not provide direct access to the property. Only have methods to get and set dates and times.
Date Start value: January 1, 1770 00:00:00.
1. Time method to get date
GetYear (): Number of years returned
GetMonth (): Returns the month's numbered
GetDate (): Back to the date of the numbered
Getday (): Back to the day of the week
GetHours (): Returns the number of hours
Getmintes (: Back to number of minutes
Getseconds (): Returns the number of seconds
GetTime (): Returns the number of milliseconds
(2) Set date and time:
Setyear (); Set year
Setdate (): Set the month's numbered
Setmonth (): Set the number of copies of the month
Sethours (): Set Number of hours
Setmintes (): Set Number of minutes
Setseconds (): Set Number of seconds
SetTime (): Set the number of milliseconds
...
2. System functions in JavaScript
The system functions in JavaScript are also called internal methods. It provides system functions that are independent of any object and can be used directly without creating any instances.
1. Returns the value in a string expression:
Method Name: eval (string expression), example:
Test=eval ("8+9+5/2");
2. Return string ASCI code:
Method Name: Unescape (String)
3. Returns the encoding of the character:
Method Name: Escape (character)
4. return real number:
Parsefloat (floustring);
5. Returns the number of different systems:
parseint (Numbestring, Rad. X
Where Radix is the number of the binary, numbs string number
Iii. Examples
Here is a JavaScript document with a clock display. There are a lot of functions in the document.
Test4_1.htm
<style type= "Text/css" >
<style>
</style>
<title> Clock </title>
<script language= "JavaScript" >
function Showclock () {
}
function Hideclock () {
}
var Timerid = null
var timerrunning = False
function Stopclock () {
if (timerrunning)
Cleartimeout (Timerid);
Timerrunning = False
Document.clock.face.value = "";
}
function ShowTime () {
var now = new Date ();
var year = Now.getyear ();
var month = Now.getmonth () + 1;
var date = Now.getdate ();
var hours = now.gethours ();
var mins = Now.getminutes ();
var secs = Now.getseconds ();
var timeval = "";
Timeval + = ((hours <=) hours:hours-12);
Timeval + + (mins < 10)? ": 0": ":") + mins;
Timeval + = ((secs <= 10)? ": 0": ":") + secs;
Timeval + + (Hours < 12)? "AM": "PM");
Timeval + + (Month < 10)? "On 0": "on") + month + "-";
Timeval + = date + "-" + year;
Document.clock.face.value = Timeval;
Timerid = settimeout ("ShowTime ()", 1000);
Timerrunning = True
}
function Startclock () {
Stopclock ();
ShowTime ();
}
function Windowopener (indexnum) {
var loadpos= "date.html" + "#" +indexnum;
Controlwindow=window.open (Loadpos, "date", "Toolbar=no,location=no,
Directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,
Width=620,height=400 ");
}
</script>
<body >
<p align= "center" ><big><span style= "Background-color:rgb (45,45,45)" >
<font face= "Arial" >form</font> <font face= "song body" > Clock </font>
</span></big></p>
<p align= "center" > </p>
<div align= "center" ><center>
<table border= "0" cellspacing= "0" cellpadding= "0" >
<tr>
<TD width= "100%" ><form name= "Clock" >
<div align= "center" ><center><p><input type= "text" name= "Face" size= "20"
VALUE style= "Background-color:rgb (192,192,192)" > </p>
</center></div>
</form>
</td>
</tr>
</table>
</center></div>
</body>
|
This paper introduces the use of intrinsic object properties and methods used in object-based JavaScript.
