www.webdeveloper.com
Results 1 to 5 of 5

Thread: Begginer to javascript need some basic help.

  1. #1
    Join Date
    Oct 2013
    Posts
    2

    Begginer to javascript need some basic help.

    Taking a free course i found online.

    The 2nd assignment that I am stuck on.

    Create a Web page that asks users for a value. The program should then display the square(num * num) and the cube (num*num*num) of the number on the screen. Name the Web page assign1b.htm.

    Can anyone give me some help to get me started?

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,413
    Well what have you produced so far in your page code?

    I can say that you need to look at powers for your calculation and understand the Math Object but unless you can produce some code, not much help is going to be forthcoming.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    1. create a text file and rename it to assign1b.htm
    2. open the file with your text editor (or download and install some advanced text editor, for example Notepad++)
    3. write the proper markup
    4. in the body section of the document you need to have input type="text" element which lets the user to input a value and any other element (usually it's a div) for displaying the results
    5. both elements must have the id attributes and these attributes must be unique
    6. in the head section of the document place the <script></script> tags.
    7. now you can write the scenario which will have two functions: one for the Math operations and outputting the results and one for binding that function to the input type="text" element's blur or keyup event on the window load
    8. save the file and open it in your browser
    9. use the Error console (Opera) or the Firebug (Firefox) or the same tool in your browser to track possible errors

  4. #4
    Join Date
    Oct 2013
    Posts
    2
    Quote Originally Posted by ace799 View Post
    Taking a free course i found online.

    The 2nd assignment that I am stuck on.

    Create a Web page that asks users for a value. The program should then display the square(num * num) and the cube (num*num*num) of the number on the screen. Name the Web page assign1b.htm.

    Can anyone give me some help to get me started?


    So far I have
    two different ones. I just have no clue how to take the inputted value and calculate a value.




    <input type="textbox" id="3" />
    <input type="button" onclick="return showvalues()" value="Press Me" />

    <script type="text/javascript" />
    function showvalues()
    {
    var sqr = parseInt(document.getElementById("txtnum... * parseInt(document.getElementById("txtnum...

    document.writ("Square will be = "+sqr);

    var cube = parseInt(document.getElementById("txtnum... * sqr;

    document.writ("Cube will be = "+cube);
    return false;
    }

    </script>



    also started one like this


    <html>
    <head>
    <title>Logical AND Operator</title>
    </head>
    <body bgcolor="lightblue">
    <big>
    <script type="text/javascript">
    var answer = prompt("Enter a value", "");


    </script>
    </big>
    </body>
    </html>

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,653
    ok. try this one

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Square and Cube</title>
    <style>
    body{color:#000;background-color:#fff;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;padding-top:200px;}
    input{text-align:center;}
    #userval{display:block;}
    input[type=button]{cursor:pointer;margin:10px 20px;border:none;font-weight:bold;color:Navy;background-color:transparent;}
    b{color:Crimson;}
    </style>
    <script>
    /*
    this regular expression will let us filter the user input 
    as we need it to be digits only and "minus" and "dot" signs
    */
    var nondigits=/[^\d-\.]{1,}/g;
    
    function calc(obj){
    var val=obj.value;
    /* if no value passed the script clicks on the Reset button and stops */
    if(val==''){document.getElementById('reset').click();return;}
    /* otherwise it goes to calculate */
    val=new Number(val);
    var sq=val*val,cube=sq*val;
    document.getElementById('result').innerHTML='Square will be <b>'+sq+'</b><br />Cube will be <b>'+cube+'</b>';
    }
    /*
    here we state everything we want to happen 
    as the page has finished loading
    */
    window.onload=function(){
    /* shorthands for the input field and the buttons */
    var inp=document.getElementById('userval'),
    res=document.getElementById('reset'),
    go=document.getElementById('calculate');
    /* 'Reset' button actions */
    res.onclick=function(){inp.value='';document.getElementById('result').innerHTML='';inp.focus();}
    /* filtering the user input - removing anything excepting digits */
    inp.onkeyup=function(){var val=this.value;this.value=val.replace(nondigits,'');}
    /* 'Calculate' button actions */
    go.onclick=function(){calc(inp);}
    /* reset the input field and focus on it on the page load */
    res.click();
    }
    </script>
    </head>
    <body>
    <center>
    <input type="text" id="userval" />
    <input type="button" id="reset" value="  Reset  " />
    <input type="button" id="calculate" value="Calculate" />
    <div id="result"></div>
    </center>
    </body>
    </html>
    Last edited by Padonak; 10-27-2013 at 04:49 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles