JavaScript: Object Constructor & Timer

DavyJones2010

浏览: 153746 次
性别:
来自: 杭州

最近访客更多访客>>

zhihaoma

xiaoji123pt

dingdaxin

vv404725784

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

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

分享到：

DesignPattern : Observer | JavaScript: Introduction to JavaScript

2013-06-05 11:07
浏览 873
评论(0)
分类:编程语言
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论