Javascript basics: Class 3, callback functions, built-in objects, and Event Processing

Copy codeThe Code is as follows:
Function class name (parameter table ){
This. Attribute;
......
This. function;
}

In this way, both functions and data members are implemented using "this.
Let's define a simple class student, and then construct it and implement an output function.
Copy codeThe Code is as follows:
<Script LANGUAGE = "JavaScript">
<! --
Function student (a, B ){
This. name =;
This. age = B;
This. output = function (){
Document. write ("student:" + this. name + "age:" + this. age + "</br> ");
}
}
Var stu1 = new student ("Zhan Bo", 20 );
Var stu2 = new student ("Hu Yifei", 23 );
Stu1.output ();
Stu2.output ();
-->
</Script>

(It's too easy, too)
Well .. In short, it's better to understand the general meaning ..

Anonymous functions:
That is, functions without names (parameter tables) {...} anonymous functions are discarded when they are used up (poor TvT)
Callback function:
It is often seen that the parameter of one function is another function. In fact, this situation is often encountered. For example, when a listener is added to the control in java, the listener parameter is actually a function.
This function can be used directly in the new parameter, that is, an anonymous function is implemented, because every response is for this control, so there is generally no need for it again.
However, let's take a normal example.
Copy codeThe Code is as follows:
<Script LANGUAGE = "JavaScript">
<! --
Function Huidiao (){
Alert (typeof a); // for testing if the function has ran
If (typeof a = 'function ')
A ();
}
Var test = function (){
Document. write ("this is testing .");
}
Huidiao (test );
// -->
</Script>

(Thank you very much for pointing out the error in Arliang on the second floor !)
Note:
1. The type function of typeof a is in lowercase. Because Javascript is case sensitive, you must note that.
2. huidiao (test) test does not need to write parentheses, because its parameter is just a variable. If it is written as (test (), the function will execute test (); this function, however, the Huidao function is not executed because test () does not return a value. The Huidiao parameter is actually undefined.
Output what everyone wants ..
Then, let's say: Javascript does not have to be overloaded. Don't be confused ~ Histogram (￣ v ￣ ㄟ)

--------------------------------------------------------------------------------
Next we will learn about the built-in objects in js. In fact, we have already touched on several objects.
Common built-in objects: String Date Math Array Number Globle
String is quite understandable. var s = "xxxxx"; or var = new String ("xxxx"); it means almost the same, as for some operation functions covered in String .. Please download the API documentation for javascript on your own. I will not connect to it. Please search for it by yourself ~
Provide an online reference manual connection: Click Here http://www.jb51.net/w3school/js/jsref_obj_string.htm (this site is good, you can have a look ~)
Every data member and function member of an object will have it. The teacher has been talking about those functions and I am asleep. In fact, there is no need to talk about them, you can just look at it when you use it. After you get familiar with it, you don't need to look at it to know what it is ~
Then let's talk a little bit about the Array object. In fact, JS does not provide a two-dimensional Array, but we can implement it through nesting, such
Var array2 = new Array (4), new Array (), new Array (1, 2, 4 ));

Finally, in addition to these common objects,
There are also some global functions and events to be familiar,
Corresponds to the function and event sections in the document.
Event processing:
I don't think it is clear what event processing is. I am too lazy to write concepts, because when I write it, no one will remember the concept
There are three methods to specify the event handler:
First, directly specify the <tag... event = "event handler"...> in the HTML Tag.
Second, compile the javascript <script LANGUAGE = "JavaScript" for = "object" event = "event"> ...... </script> between specific objects.
Third, describe <event protagonist-Object> <event >=< event handler> In javascript;
Common events are listed as follows:

Mouse events	Keyboard Events	HTML event	Change event
Onclick Click Event OndblClick double-click event Onmouseover move the mouse over Onmouseout mouse exit event Onmousedown Onmouseup Onselect selected event	Onkeydown event Onkeypress Press key event Onkeyup release key event	Onload Window loading event Onunload window exit event Onresize window size change trigger event Onabort interrupt event Onerror exception event Onreset press reset button event Onsubmit submit event	Onblur loss focus event Onfocus gets focus events Onchange value change trigger event

The first is the most commonly used event, such as submitting, saving, and other database-related operations, which can be completed in the script. I believe that anyone who has ever written a webpage must have been familiar with it. For example, let's write a simple example:
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> O. O </title>
<Script type = "text/javascript" src = "js/output. js"> </script>
<Script LANGUAGE = "JavaScript">
<! --
Function alertW (){
Alert ("Button Clicked ");
}
-->
</Script>
</Head>
<Body>
<Input type = "Button" value = "HTML" onclick = "alertW ();">
<! --
This is my JSP page. <br>
-->
</Body>
</Html>

Defining a button and giving it a response event is actually the first one. Of course, because the response is very simple, you can also write this directly in the button control:
<Input type = "Button" value = "HTML" onclick = "window. alert ('button clicked') "> (note that the strings in alert () are enclosed in single quotation marks and cannot be enclosed in double quotation marks .)
The two have the same effect.

However, for the second method, it is rarely used. I spent half a day on Baidu, checked the window object events, and tested a lot. However, only the onload event is feasible. The Code is as follows:
Copy codeThe Code is as follows:
<Script LANGUAGE = "JavaScript" for = "window" event = "onload">
Alert ("load successed ");
-->
</Script>

After my careful research, many events, such as "onbeforeunload", are only feasible in IE, so we will not hesitate to give up this method. You just need to know.

PS: Baidu searched for the "complete web page creation manual". It is a CHM help file. The first Sina file can be downloaded. It contains a wide range of things. If necessary, download it for reference ~

OK,ThirdIt is said that it is widely used in the Ajax framework, but as a person who does not know ajax... Okay, let's start learning.
The third method involves the DOM mentioned in the next part. But it does not affect the overall situation. The third format looks complicated and is actually very simple.

When adding a control, give the control an ID, but then use the ID in javascript to get the control, and then perform operations on its events, such:
Copy codeThe Code is as follows:
<Body>
<Input type = "text" value = "JS Object" id = "input">
<Script type = "text/javascript">
Var inpt = document. getElementById ("input ");
Inpt. onblur = function (){
Alert ("How can you abandon me ~? ");
}
</Script>
</Body>

In this way, an event response is added to the text box, which must be emphasized here:The script response must be written after the control declaration; otherwise, the compiler cannot find the control based on the ID.

PS, you can also find the control by name, but we recommend that you use ID, because the name can be the same, the id cannot be the same

You can flip through the previous website or download the manual that I said about the response of each control, the following is the event list about the input text control in the manual ~ Of course, there is more than this. There is a drop-down bar on the right ~

In fact, I recommend you download this manual. It is a good tool.

After briefly introducing Event processing, let's take a look at the Event object.

The event object represents the event status, such as the event elements, keyboard status, mouse position, and mouse button status.

You can use window. event in IE, but FF is not valid. Therefore, the following policy is used for compatibility .. The wisdom of programmers is great.
Copy codeThe Code is as follows:
Function eventName (event ){
Event = event | window. event;
.................
}

Event program binding:

<Body event name = "eventName (event);"> </body>

Because it is abstract, we still need to write a code.
Copy codeThe Code is as follows:
<Html>
<Head>
<Style>
<! --
. Divstyle
{
Position: absolute;
Width: 120px;
Height: 80px;
Border: 3px outset # FFFF00;
Padding-left: 4px;
}
// -->
</Style>
<Title> testing </title>
<Script type = "text/javascript" src = "js/output. js"> </script>
</Head>
<Body>
<Div id = "fistdiv" class = "divstyle" onmousedown = "clicked (event)"> </div>
<Script type = "text/javascript">
Function clicked (event ){
Event = event | window. event;
Var s;
S = "coordinate-X:" + event. clientX;
S + = "\ n" + "coordinate-Y:" + event. clientY;
Var obj = document. getElementById ("fistdiv ");
Obj. innerText = s;
Obj. textContent = s; alert (s );
}
</Script>
</Body>
</Html>

Note: Thanks to Aleax's help on the third floor, I Will reference it directly and give an example about the innerText attribute in div:

InnerText in FF is not available. Alternative method: textContent
IE: oDiv. innerText = aString; oDiv. innerHTML = aString;
FF: oDiv. textContent = aString; oDiv. innerHTML = aString;

Because the browser ignores unknown statements, we can write two lines of code directly to accommodate them, and there is another way to shrink them into one sentence, is obj. innerHTML = s;

Here, by the way, the difference between innerText and innerHTML: innerText only accepts text and then outputs it directly. However, innerHTML recognizes HTML statements, that is, if you write
InnerText = "<br> Hello"; the output is: <br> Hello, if you write innerHTML = "<br> Hello", the output is the Hello after the line break.

Event bubbles
The event bubbling problem is that an operation triggers multiple responses. For example, the body defines the onclick event, and the div under the body also defines the onclick event. After that, first, the div event response is made, and then bubbles up. The body click event is also triggered.
The solution is not troublesome, but it is still necessary to accommodate the conflicts between the two friends IE and FF:
IE to prevent bubbles. Use: event object. cancelBubble = true;
FF to prevent bubbles, use: event object. stopPropagation .. Forgive me for my vocabulary. TvT)
Well, we have to make another judgment in order to make these friends get along in Harmony:
Copy codeThe Code is as follows:
Function xxxxx (event ){
.........;
If (event & event. stopPropagation) // It indicates a Firefox
Event. stopPropagation ();
Else
Event. cancleBubble = true;
}

Of course, this judgment should be written in the lower-layer node. For example, in the example above, if you write it in the click Event of the body, it will be useless.
--------------------------------------------------------------------------------
Finally, a small application is used to determine the input. We often encounter the following problems when registering a website:
The Code is as follows:
Copy codeThe Code is as follows:
<Html>
<Head>
<Style>
<! --
# Checkspan
{
Display: none;
Color: # ff0000;
}
// -->
</Style>
<Title> testing </title>
<Script type = "text/javascript" src = "js/output. js"> </script>
</Head>
<Body>
Input: <input type = "text" onblur = "blured ()" id = "input"> <span id = "checkspan"> </span>
<Script type = "text/javascript">
Function blured (){
Var obj = document. getElementById ("checkspan ");
Var s = document. getElementById ("input"). value;
If (s. length <5)
Obj. innerHTML = "too short ";
Else {
Obj. innerHTML = "correct ";
Obj. style. color = "green"
}
Obj. style. display = "inline ";
}
</Script>
</Body>
</Html>

The effect is as follows: