`
DavyJones2010
  • 浏览: 154167 次
  • 性别: 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>
分享到:
评论

相关推荐

    Think in C++ 英文版(含卷一、卷二)

    11: References & the Copy-Constructor 12: Operator Overloading 13: Dynamic Object Creation 14: Inheritance & Composition 15: Polymorphism & Virtual Functions 16: Introduction to Templates A: Coding ...

    虚函数被类的构造析构函数和成员函数调用虚函数的执行过程

    “base constructor”&lt;&lt;std::endl; func1(); std::cout&lt;&lt;std::endl; }  virtual ~base() { std::cout&lt;&lt;std::endl; std::cout&lt;&lt;“base distructor”&lt;&lt;std::endl; func

    wordpress主题WordPress主题:Constructor

    4. **自定义脚本支持**:Constructor主题可能允许用户添加自定义JavaScript代码,以便实现更高级的功能或集成第三方服务。 综上所述,“WordPress主题:Constructor”是一款功能强大且易于使用的主题,适用于希望...

    深化浅析JavaScript中的constructor_.docx

    深化浅析JavaScript中的constructor_ constructor 属性是 JavaScript 中的一种特殊属性,它返回对创建此对象的数组函数的引用。下面我们来深入浅析 JavaScript 中的 constructor。 constructor 属性是一个非标准...

    理解Javascript_11_constructor实现原理

    constructor是什么 简单的理解,...Object.constructor&#41;;//Function alert&#40;Function.constructor&#41;;//Function 对于foo.constructor为Foo,我想应该很好理解,因为foo的构造函数为Foo。对于Foo、Object、Fun

    Google V8学习手记,月javascript写服务器端是多少人的梦醒呀,Google v8让javascript和php一样

    - **Object**:JavaScript 中的一切都是对象,包括函数。V8 提供了一套 API 来创建和操作 JavaScript 对象。 - **Function**:JavaScript 函数在 V8 中同样具有重要作用。开发者可以通过 V8 的 API 创建函数并调用...

    JavaScript:ES6新特性:类与模块教程

    - **数据类型**:JavaScript支持多种数据类型,包括原始类型(如number、string、boolean)和复杂类型(如object、array)。 ```javascript // 原始类型示例 let age = 25; // number类型 let name = "John Doe...

    js-konstr:JavaScriptConstructor

    JavaScriptConstructor,或者简称"js-konstr",是一种在JavaScript中创建对象的构造函数机制,它是面向对象编程的基础。在JavaScript中,构造函数主要用于初始化一个新创建的对象,它定义了对象的属性和方法。理解这...

    Unity - Behavior Designer Ver 1.5.7

    CreateInstanceFromType is not allowed to be called from a ScriptableObject constructor (or instance field initializer), call it in OnEnable instead. Called from ScriptableObject '...

    JavaScript的constructor属性[文].pdf

    JavaScript constructor 属性在类型检查中的应用 在 JavaScript 中,constructor 属性是一种非常有用的工具,可以帮助我们检查变量的类型。Constructor 属性可以帮助我们解决 typeof 函数无法解决的问题,即无法...

    JavaBeanGenerator

    JSP辅助编程工具(不太成熟)可以从SQL Script中(MySQL)提取关键字后,一步转换成...constructor:setter & getter;相应的add***();del***();mod***()函数作用:Sql只要符合要求的格式即可,方便jsp+javabean代码的编写

    深入浅析JavaScript中的constructor

    在JavaScript中,`constructor`属性是一个非常重要的概念,它与对象和类的构造函数紧密相关。构造函数是一种特殊类型的函数,通常用于初始化新创建的对象。当我们谈论`constructor`时,我们指的是一个对象实例的`...

    JavaScript中constructor()方法的使用简介

    在JavaScript编程语言中,constructor()方法是一个非常重要的概念,它属于对象的一个属性,用于指明创建该对象的构造函数。对初学者来说,理解constructor()方法是学习JavaScript对象和原型链的基础。 首先,...

    JS:typeof instanceof constructor prototype区别

    本文将深入探讨四种常用的方法来识别和判断JavaScript中的数据类型:`typeof`、`instanceof`、`constructor`以及`prototype`。 ### 1. `typeof` `typeof`操作符是最常见的类型检测方式之一,它返回一个表示未经计算...

    javascript new后的constructor属性.docx

    ### JavaScript中的`new`操作与`constructor`属性详解 #### 一、`new`操作符的理解 在JavaScript中,`new`操作符被用于创建一个由构造函数定义的新实例对象。当使用`new`关键字调用一个构造函数时,会执行以下步骤...

    ubuntu:python调用c生成so文件出错

    bfs.cpp:11:15: error: expected constructor, destructor, or type conversion before ‘(’ token  __declspec(dllexport) windows到linux的转换: windows下: #include #include #include #include using ...

    理解Javascript Function与Object

    理解Javascript Function与Object 在JavaScript中,Function和Object是两个非常重要的概念,它们之间存在着紧密的关系。在这篇文章中,我们将深入探讨Function和Object的关系,了解它们之间的联系和区别。 ...

    javascript new后的constructor属性

    b.constructor==BB.prototype.constructor&#41; //true 这里的“有了”的执行过程是先查看b有没有此属性让后去查看prototype里的属性值,不是简单的A=B:如添加:b.constructor=”ccc”; 执行:alert(b.constructor=...

Global site tag (gtag.js) - Google Analytics