Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Cool object oriented javascript

    Hi I am trying to learn javascript, I have to create two calculators on a single page by instantiating the obj of calculator ,i have to get two fully functional calculators.

    Code:
     
    var c1 = new Calculator("x");
    var c2 = new Calculator("y");
    The following te code snippet that i tried to do... but i cannot the differenciate the button click ,i.e from which calculator the click happened.



    Code:
     
    <html>
    <head>
    <script type="text/javascript">
    var windowHasLoaded = false;
    
    
    window.onload = function () {
    windowHasLoaded = true;
    load();
    }
    
    function load()
    { 
    if (!windowHasLoaded)
    {
    // onload event hasn't fired yet, wait 100ms and check again 
    window.setTimeout(load, 100);
    }
    else
    { 
    var c1 =  new Calculator("tab1");
    //alert(c1);
    
    var c2 =  new Calculator("tab2");
    c1.bind();
    c2.bind();
    
    
    }
    }
    function Calculator(id)
    {
    //alert("hi "+id); 
    this.val = id;  
    this.bind = function (){    
    			var elm = document.getElementById(id);
    			if (elm.attachEvent)
    			{    
    			elm.attachEvent('onclick', btnClick);
    			}
    			else
    			elm.addEventListener("click", btnClick, false);
          }
    }
    
    
    
    function btnClick(e) {
    
    // alert("hh"+c1.val);( can we get the id  that is val here in this bloxk)
    var button = e.target||e.srcElement;
    var buttonValue  = button.value;
    if(buttonValue != "=")
    {
    if (buttonValue == "CE")
    {
    if(c1.val == "tab1") //(*need to differenciate  the calculator 1or 2)
    {
    document.getElementById('disply1').value = '';
    }
    if(c2.val == "tab2")
    document.getElementById('disply2').value = '';
    }
    else
    {   if(c1.val == "tab1")(*need to differenciate  the calculator 1or 2)
    {
    
    document.getElementById('disply1').value += buttonValue;
    }
    if(c2.val == "tab2")
    
    document.getElementById('disply2').value += buttonValue;
    }
    }
    
    }
    
    function calculate(equation,val) {
    var result = eval(equation);
    if(val == "d1")
    { document.getElementById('disply1').value = result; }
    if(val == "d2")
    { document.getElementById('disply2').value = result; }
    
    }
    
    function onlyNumbers(evt)
    {
    var charCode = (window.event) ? event.keyCode : evt.which;
    
    if (charCode > 31 && (charCode < 42 || charCode > 57))
    {
    return false;
    }
    else
    return true;
    }
    </script>
    <style type="text/css">
    .btnStyle {
    height: 25px; width: 25px;
    }
    </style>
    </head>
    
    <body>
    <table  id="tab1" border="4" align="center" bordercolor="grey" bgcolor="#E8E8E8" cellpadding="4">
    <tr> <td colspan="4"><input id="disply1" type="text" size="27" onkeypress="return onlyNumbers(event);" /></td> </tr>
    <tr>
    <td><input class="btnStyle" type="button"  Value="7" /></td>
    <td><input class="btnStyle" type="button"  Value="8" /></td>
    <td><input class="btnStyle" type="button"  Value="9" /></td>
    <td><input class="btnStyle" type="button"  Value="/" /></td>
    </tr>
    <tr>
    <td><input class="btnStyle" type="button"  Value="CE" /></td>
    <td><input class="btnStyle" type="button"  Value="0"  /></td>
    <td><input class="btnStyle" type="button"  Value="*"  /></td>
    <td><input class="btnStyle" type="button"  Value="=" id="calc" onclick="calculate(document.getElementById('disply').value ,'d1');" / ></td>
    </tr>
    </table>
    <hr/>
    <table  id="tab2" border="4" align="center" bordercolor="black" bgcolor="#E8E8E8" cellpadding="4">
    <tr> <td colspan="4"><input id="disply2" type="text" size="27" onkeypress="return onlyNumbers(event);" /></td> </tr>
    <tr>
    <td><input class="btnStyle" type="button"  Value="7" /></td>
    <td><input class="btnStyle" type="button"  Value="8" /></td>
    <td><input class="btnStyle" type="button"  Value="9" /></td>
    <td><input class="btnStyle" type="button"  Value="/" /></td>
    </tr>
    
    <tr>
    <td><input class="btnStyle" type="button"  Value="CE" /></td>
    <td><input class="btnStyle" type="button"  Value="0"  /></td>
    <td><input class="btnStyle" type="button"  Value="*"  /></td>
    <td><input class="btnStyle" type="button"  Value="=" id="calc2" onclick="calculate(document.getElementById('disply').value,'d2');" / ></td>
    </tr>
    </table>
    </body>
    </html>
    Please help have been stuck for long enough... :(
    Last edited by cicily; 05-25-2012 at 03:32 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    I don't understand the point of bind . Why not just do all that as part of the constructor. It's silly to construct the object and then immediately need to turn around and call bind() on it!
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    And this part:
    Code:
    ")(*need to differenciate  the calculator 1or 2)
    {
    document.getElementById('disply1').value = '';
    The display of the given calculator should have been set up as part of the constructor!

    Or, probably better, each calculator should be inside a parent <div> and you use getElementsByClassName to find the display element within that <div>.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    And you could determine which calculator "owns" the button clicked on by climbing the DOM node tree until you find a <div> which has a given className.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Of course, if you wanted to be *TRULY* OO, you would have the constructor *create* the calculator! It's mildly ugly to have to depend on the user to create the proper HTML for the calculator. What happens if he/she omits a button in one of the calculators accidentally?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New to the CF scene
    Join Date
    May 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    In the bind function , i am trying attach the click event to every button in both of the calculator.

    Table is used here is as the parent div/container div for both calculator


    Actually i have to get as many calculators as possible , just by instantiating object a calculator class,

    like: var c1 = new Calculator("t1");
    here t1 would be the conatianing element like table or div;

    pls share if u have any better idea of implementing,this object oriented javascript concept of calculator.

  • #7
    New to the CF scene
    Join Date
    May 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Of course, if you wanted to be *TRULY* OO, you would have the constructor *create* the calculator! It's mildly ugly to have to depend on the user to create the proper HTML for the calculator. What happens if he/she omits a button in one of the calculators accidentally?

    In the bind function , i am trying attach the click event to every button in both of the calculator.

    Table is used here is as the parent div/container div for both calculator


    Actually i have to get as many calculators as possible , just by instantiating object a calculator class,

    like: var c1 = new Calculator("t1");
    here t1 would be the conatianing element like table or div;

    pls share if u have any better idea of implementing,this object oriented javascript concept of calculator.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Some suggestions to add to those already made:

    You can get rid of all that "has the page loaded yet" garbage by attaching the script to the bottom of the page immediately before the </body> tag - which is where Modern JavaScript is all supposed to be attached.

    Don't use more than one var declaration per function. You should declare all the variables used in a function as a comma separated list in the var declaration immediately following the "use strict"; declaration that starts the function.

    Move all the code that handles the difference between JavaScript and jScript into separate functions so that you can call them from each spot you need to rather than having to repeat the code multiple times. It will also make it easier to simplify your code once IE8 dies and the need to support jScript disappears with it.

    Wrap all of your code in an anonymous function so that it is local to your code and can't interfere with or be interfered with by any other JavaScript that might be used on the same page.

    As an example of a script that creates multiple objects in a page take a look at http://www.felgall.com/jstip109.htm which replaces all of the block tags in the page with a specific class attached with marquees. The only difference your HTML should have with a script that adds calculators instead of marquees is that the content of each block would initially be whatever you want those without JavaScript to see and your script would discard that content and replace it with calculators.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,342
    Thanks
    13
    Thanked 349 Times in 345 Posts
    Quote Originally Posted by felgall View Post
    […] once IE8 dies and the need to support jScript disappears with it.
    Optimist …
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #10
    New to the CF scene
    Join Date
    May 2012
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey i have pasted the code in [code tags] only..

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Are there truly any differences between JavaScript and JScript that matter? There are, of course, huge differences in the DOM methods, et al., but I'm unaware of any language differences, per se, that matter.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    Are there truly any differences between JavaScript and JScript that matter? There are, of course, huge differences in the DOM methods, et al., but I'm unaware of any language differences, per se, that matter.
    About 3/4 of jScript doesn't exist in JavaScript and can only be used outside of the web browser or on intranets where you know that the browser is Internet Explorer. The part of jScript that overlaps JavaScript uses completely different code for accessing the browser itself and also has some different rules regarding DOM access (such as not being able to set a name on an input field after it has been created and not being able to change the type of an input field after the type has been set - and not being able to use innerHTML to update parts of tables).

    Just about everything relating to cross browser support (apart from those things that older browsers don't support such as getElementsByClassName) relate to the difference between the JavaScript and the jScript way of doing things. Once the need to support jScript and really old browsers disappears then libraries created to provide cross browser support will shrink dramatically in size if they have any need to continue to exist at all.

    I'd expect the jQuery library to shrink to about 10% of its current size once it no longer needs to cater for jScript.

    All the event processing and browser access examples on my "JavaScript by Example" site would also shrink to be one line of code each.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    Quote Originally Posted by felgall View Post
    About 3/4 of jScript doesn't exist in JavaScript and can only be used outside of the web browser or on intranets where you know that the browser is Internet Explorer.
    Again, I think you are mixing jScript the language with both DOM and objects accessible to JScript (esp. those objects accessible via ActiveX). Even MicroSloppy doesn't document those as part of JScript. Instead, they are documented as ActiveX run-time objects.

    And I don't see why you say the *LANGUAGE* is responsible for such things as the inability to change the name or type of an input field. Those are all browser-only actions, not related to the language, per se. In fact, nothing at all related to browser interactions and capabilities should be considered to be part of the language.

    I think that the proof of this may, in fact, lie in MSIE 9. Because even though it is (mostly??) compliant with other browsers, JScript the language remains unchanged. Just for example, JScript can be used as a scripting language for the "command window" (DOS window, as it is often called, "command line OS interface" is probably a better generic term), essentially the same as you would use Perl or cshell scripting in Linux, and yet JScript *has not changed* one iota from Windows Vista to Windows 7 and all JScript-ing used for such command line enhancements remains unchanged. Again, the language has not changed. Only how it interacts with MSIE has.

    I suppose my definition of "language" comes from my days of writing compilers. If a change meant we had to change the compiler, it's a change to the language. If it only meant we had to change the library then the change had nothing to do with the language, per se. I still hold to that separation.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by Old Pedant View Post
    I think that the proof of this may, in fact, lie in MSIE 9.
    IE9 actually supports both jSript and JavaScript.

    <script type="text/jscript"> and <script type="application/javascript"> will both run in IE9 whereas only the first of those will run in earlier versions of IE.

    Those are the correct tags to use to identify jScript and JavaScript the text/javascript variant was declared to be obsolete long ago and only continues to be used because it is the only one recognised for supporting both jScript and JavaScript.

    Admittedly there are some browsers that will incorrectly try to run a script defined using text/jscript even though those browsers do not understand JScript.

    Some exaples of the difference between jScript and JavaScript.

    Create an input field:
    jScript:
    Code:
    newIN = document.createElement("<input name='nam'>");
    newIN.type = 'text';
    JavaScript:
    Code:
    newIN = document.createElement("input");
    newIN.name = 'nam';
    newIN.type = 'text';

    Change type to "password":
    JavaScript:
    Code:
    this.type = 'password';
    jScript:
    Code:
    inp = document.createElement("<input name='pass'>");
    inp.type = 'password';
    this.parentNode.replaceChild(inp,this);
    All of the differences between jScript and JavaScript have to be in the DOM, BOM, and whatever else the languages provide access to since in both cases the core portion of the language is ECMAScript.

    In terms of their support for object oriented processing and protptypical inheritance the two languages are the same.
    Last edited by felgall; 05-29-2012 at 11:02 PM.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,986
    Thanks
    79
    Thanked 4,432 Times in 4,397 Posts
    I think all you did was prove my point.
    Code:
    newIN = document.createElement("<input name='nam'>");
    ...
    newIN = document.createElement("input");
    The very fact that you use the keyword document shows that this is entirely a DOM issue, not a language issue. It's not a difference in the implementation of the *langauge*, it's a difference in the implementation of the Document Object Model.

    Personally, I'd be willing to bet (a relatively small amount, but still...) that in point of fact MSIE 9 makes zero changes in what happens behind the scenes whether you use <script type="text/jscript"> or <script type="text/javascript"> or <script type="application/javascript"> or (and, yes, MSIE 7 and 8 even support this) <script type="text/ecmascript">

    It's just a difference in the browser, not in any part of the actual language invoked thereby.

    Having said all the above, the Macro$lop documentation for JScript *does* list some ways is which it is not compliant with ECMAScript.
    http://msdn.microsoft.com/en-us/libr...=vs.85%29.aspx

    Looking at that *casually*, I didn't see any discrepancies between JScript and Mozilla JavaScript aside from the additions that MS made to work with ActiveX and other COM objects. (e.g., so far as I can see, Array.slice is the same as Firefox's Array.slice.) But I freely admit to not having checked each one in detail.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •