Copy Code code as follows:
function class name (parameter table) {
this. property;
......
this. function;
}
In this way, functions and data members are all using the "this." To achieve.
We define a simple class student and then construct it and implement an output function.
Copy Code code as follows:
<script language= "JavaScript" >
<!--
function Student (a,b) {
THIS.name = A;
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>
(Hey, it's too easy.) The Faint of Soul (| | ￣-￣) ==o (#) ￣▽￣)/)
Well.. In short, the general meaning to understand the good.
anonymous function:
is a function (parameter table) with no Name {...} anonymous functions are discarded (poor TvT)
callback function:
An argument that is often expressed as a function is another function. In fact, this situation often encountered, such as Java in the control to add a listener, the listener parameter is actually a function.
This function can be directly within the parameters of the new can be, that is, to do an anonymous function, because each response is for the control, so there is no need for the situation again.
But let's take an example to follow the normal path.
Copy Code code as follows:
<script language= "JavaScript" >
<!--
function Huidiao (a) {
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 the second floor Arliang!) )
Note here:
The type function of 1.typeof A is lowercase because JS is case sensitive, so it must be noted.
2.Huidiao (test) test does not need to write parentheses because its argument is just a variable, and if written (test ()), then the function executes test (); This function, but the Huidao function does not execute because test () has no return value. What about that? The Huidiao parameters are actually undefined.
The output everyone wants.
Then again: There is no overload in JavaScript. Don't be wishful thinking. ~ㄟ (￣v￣ㄟ)
--------------------------------------------------------------------------------
Next learning JS inside the built-in objects, in fact, we have been contacted a few.
Common built-in objects: String Date Math Array number globle
String we all know, var s= "xxxxx"; or var= new String ("xxxx"); The meaning is similar, as for some of the operation functions covered in the string. Please download the JavaScript API document by yourself kiss, I will not be connected to the pro, own search it ~
Provide an online reference manual connection: Click here http://www.jb51.net/w3school/js/jsref_obj_string.htm (this site is good, have time to see ~)
Each object's data members and function members have, the teacher here has been talking about those functions, I have fallen asleep, in fact, there is no need to speak, with the time to look at the line, cooked in the future do not need to see what the ~
And then a little bit of the array this object, in fact, JS does not provide two-dimensional arrays, but, we can be nested to implement, such as
var array2=new array (new Array (4), new Array (), new Array (1,2,3,4));
Finally, in addition to these common objects,
There are also some global functions and events that need to be familiar,
Corresponding to the document is the function and event two parts.
Event handling:
Event handling What I think that should be no one is not clear, I also do not bother to write the concept, because the written also no one will remember ╮(╯▽╰)╭
Then, there are three ways to specify an event handler:
First: Specify < tag directly in HTML tags .... event = "event handler" .....>
Second: Write JavaScript <script between specific object-specific language= "JavaScript" for= "Object" event= "event" > ... </script>
Third: Explain < event lead in JavaScript-object >< event >=< event handler >;
A list of commonly used events:
| Mouse events |
keyboard events |
HTML events |
change events |
| OnClick &nbs P Click event OndblClick Double-click event onmouseover Move mouse over onMouseOut mouse off event onmousedown mouse down event onmouseup Mouse release event Onse Lect Select event |
onkeydown key event onkeypress Press key event onkeyup Release key event |
OnLoad window Load event OnUnload & nbsp Window departure event onresize change window size trigger event Onabort Break event OnError &NBSP ; Exception event OnReset Push reset button event onsubmit Commit event |
onblur lost focus event onfocus Get focus event OnChange value change trigger event |
The first is the most commonly used, such as the submission Ah, save AH and other events, database-related operations, can be completed in the script. I believe that the students who have written the website must have been contacted, such as we write a simple example:
Copy Code code as follows:
<title>O.O</title>
<script type= "Text/javascript" src= "Js/output.js" ></script>
<script language= "JavaScript" >
<!--
function Alertw () {
Alert ("button clicked");
}
-->
</script>
<body>
<input type= "button" value = "HTML" onclick= "ALERTW ();" >
<!--
This is the My JSP page. <br>
-->
</body>
Defining a button and giving it a response event is actually the first, of course, because the response is very simple, and it can be written directly in the button control:
<input type= "button" value = "HTML" onclick= "window.alert (' button clicked ')" > (note here that the strings in alert () are in single quotes and cannot be double double quotes.) ）
The two effects are the same.
But for the second, with very little, I Baidu for a half-day, check the Window object events, testing a lot, but only the OnLoad event is feasible, the code is as follows:
Copy Code code as follows:
<script language= "JavaScript" for= "window" event= "onload" >
Alert ("Load successed");
-->
</script>
Then after my careful study, many events, such as "onbeforeunload" and so on, are only feasible in IE, then we do not hesitate to give up this method is good. You know, that's fine.
PS with Baidu search for "Web page production Complete Manual", is a CHM help file, the first to come out of the Sina file can be downloaded, the inside thing is very complete, need to download to reference it ~
OK, the third , which is said to be heavily used in the AJAX framework, but as a person who does not Ajax ... OK, let's learn it slowly.
The third involves a little bit of the next part of the DOM to say. But the wood is related, does not affect the overall situation, the third kind of format looks more complex, actually is very simple.
When you add a control, give the control an ID, but then use the ID in JavaScript to get the control and then manipulate its various events, such as:
Copy Code code 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>
So, we add an event response to the text box, and here's one thing to emphasize:
The script response must be written after the control declaration, or the compiler will not be able to find the control based on the ID.
PS, you can actually find the control based on name, but still recommend ID, because name can be the same, ID cannot be the same
About each control what kind of response, can be in the previous site to flip, or download I said that the manual, you can, the following screenshot is that manual on the input text control of the event List ~ Of course, more than this, the right and the dropdown
In fact, I still prefer to download this manual, a good tool.
After a brief description of event handling, let's learn about the events object
Event objects represent the state of events, such as the element in which the event occurred, the keyboard state, the mouse position, and the state of the mouse button.
In IE can be obtained with window.event, but FF is not, so in order to be compatible, use the following strategy. The wisdom of the program apes is great.
Copy Code code as follows:
function EventName (event) {
event=event| | window.event;
.................
}
Event Program Bindings:
<body Event name = "EventName"; ></body>
Because the more abstract, we still write a code, in the heart of practical point.
Copy Code code as follows:
<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>
<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>
Note that thanks to the help of Aleax on the third floor, I quote him directly and give an example of the attribute innertext in Div:
FF inside the innertext is not available, alternative method: Textcontent
IE:oDiv.innerText = astring; odiv.innerhtml = astring;
FF:oDiv.textContent = astring; odiv.innerhtml = astring;
Because the browser does not know the statement will be ignored, we can directly as I write, write two lines of code to accommodate them, and there is another way to make it shrink to a sentence, that is obj.innerhtml=s;
By the way, here's the difference between innertext and innerHTML: innertext only accepts text and then outputs it directly, but innerHTML recognizes HTML statements, that is, if you write
innertext= "<br>hello"; Then the output is: <br>hello if write innerhtml= "<br>hello" then output is after the line of Hello.
Event bubbling Problem
Event bubbling problem is actually, an operation triggered a number of responses, such as the body defines the OnClick event, the body below the Div also defines the onclick event, that point Div, first do a DIV event response, and then bubble up, The body's Click event was also triggered.
The solution is not troublesome, but still have to indulge in IE and ff the two good base friends contradictions:
IE inside block bubble, use: Event object. cancelbubble=true;
FF inside block bubbling, using: Event object. stoppropagation (); (Just checked, propagation [, prɔpə ' ɡeiʃən] means reproduce, multiply. Forgive my vocabulary, TVT.
All right, in order for this pair of good friends to live in harmony, we have to make one more judgment:
Copy Code code as follows:
function xxxxx (event) {
.........;
if (event&&event.stoppropagation)//description is a Firefox
Event.stoppropagation ();
Else
Event.canclebubble=true;
}
Of course, this judgment should be written in the lower nodes, such as in the example just now, if you write it in the body of the Click event, it is to do the useless.
--------------------------------------------------------------------------------
Finally, a small application, is the input of the situation to judge, we register the site often encountered:
The code is as follows:
Copy Code code as follows:
<style>
<!--
#checkspan
{
Display:none;
Color: #ff0000;
}
-->
</style>
<title>testing</title>
<script type= "Text/javascript" src= "Js/output.js" ></script>
<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>
The effect is as follows:
