Part One:
1. Two steps to create custom object
1) Use constructor to create object type/class
2) Create object instance
Cause there is no concept of Class in JavaScript compared with that in java.
2. Attributes can be defined in object dynamically.
1) Create function name for this object in constructor
2) Create function that describes this function
3. Example of Constructor
1) Attributes Assignment
function member(name, gender) { this.name = name; this.gender = gender; } var m1 = new member("Davy", "Male"); var m2 = new member("Jones", "Female"); var m3 = new member("Calyp", "Female"); with(document) { // The way to gain access to the properties inside this object write(m1.name + " : " + m1.gender + "</br>"); write(m2.name + " : " + m2.gender + "</br>"); write(m3.name + " : " + m3.gender + "</br>"); }
2) Functions Assignment
function member(name, gender) { // assign properties this.name = name; this.gender = gender; // assign functions this.display = display; } function display() { var str = this.name + " : " + this.gender; // key word "this" represents the object who called this method not like that in Java document.write(str + "<br/>"); } var m1 = new member("Davy", "Male"); var m2 = new member("Jones", "Female"); var m3 = new member("Calyp", "Female"); m1.display(); m2.display(); m3.display();
Part Two:
1. Event call/response process
Browser response to a specific event and realize interactive operation process.
That is we bind a function/method to a specific event. The time this event happens, the function is called.
Example as below:
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript"> function mouseoverCallback(object) { object.color = "blue"; } function mouseoutCallback(object) { object.color = "black"; } </script> </head> <body> <font style="cursor:hand" onclick="window.location.href='http://www.google.com'" onmouseover="mouseoverCallback(this);" onmouseout="mouseoutCallback(this);">Welcome</font> </body> </html>
Part Three:
1. Timer ---> Two kinds of timer "setTimeout()" and "setInterval()"
========================setTimeout()====================
Execute a segment of code/function once after a specific time.
setTimeout();
Syntax: [timerObjectName=] setTimeout("expression", millseconds);
Execute expression once.
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript"> function count() { setTimeout("alert('Welcome');", 4000); } </script> </head> <body> <input type="button" value="TimerStart" onclick="count();"/> </body> </html>
========================setInterval()====================
Execute a segment of code/function repeatly after a specific time.
setTimeout();
clearInterval();
Syntax: [timerObjectName=] setTimeout("expression", millseconds);
Execute expression every millseconds.
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript"> var countTimer; function count() { countTimer = setInterval("alert('Welcome');", 4000); } function stop() { clearInterval(countTimer); } </script> </head> <body> <input type="button" value="TimerStart" onclick="count();"/> <input type="button" value="TimerStop" onclick="stop();"/> </body> </html>
========================A simple timer example====================
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%> <html> <head> <title>My JSP 'index.jsp' starting page</title> <script type="text/javascript"> var countTimer; var countNumber = 0; function count() { countTimer = setInterval("numberIncrease();", 1000); } function numberIncrease() { countNumber ++; document.getElementById("count").innerHTML = countNumber; } function stop() { clearInterval(countTimer); } </script> </head> <body> <font color="red" id="count">0</font><br/> <input type="button" value="TimerStart" onclick="count();"/> <input type="button" value="TimerStop" onclick="stop();"/> </body> </html>
相关推荐
代码如下: function foo() { } setInterval( “foo()”, 1000 ); 如果使用OO的技术,可以这样, 代码如下: // constructor function ... } function Another() { // create timer when create object var obj = new My
<script type="text/javascript" language="javascript"> String.prototype.trimStart = function (trimStr) { if (!trimStr) { return this; } var temp = this; while (true) { if (temp.substr(0, trimStr....
Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...
The json module: JavaScript Object Notation The plistlib module: A Property-List Parser ctypes Enhancements Improved SSL Support Deprecations and Removals Build and C API Changes Port-Specific ...
{10.1.3}Constructor}{145}{subsection.10.1.3} {10.2}其他Java相关}{146}{section.10.2} {11}项目}{148}{chapter.11} {11.1}ELTS}{148}{section.11.1} {12}Oracle数据库}{151}{chapter.12} {12.1}术语}{151}{...