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

JavaScript: Object Constructor & Timer

JavaScriptConstructorTimer 
阅读更多

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: Introduction to JavaScript
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics