`
DavyJones2010
  • 浏览: 157022 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

JavaScript: Object Constructor & Timer

阅读更多

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>
分享到:
评论

相关推荐

    在JavaScript中使用timer示例

    代码如下: function foo() { } setInterval( “foo()”, 1000 ); 如果使用OO的技术,可以这样, 代码如下: // constructor function ... } function Another() { // create timer when create object var obj = new My

    jquery 联动输入插件

    &lt;script type="text/javascript" language="javascript"&gt; String.prototype.trimStart = function (trimStr) { if (!trimStr) { return this; } var temp = this; while (true) { if (temp.substr(0, trimStr....

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    python3.6.5参考手册 chm

    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 ...

    Java学习笔记-个人整理的

    {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}{...

Global site tag (gtag.js) - Google Analytics