Results 1 to 4 of 4

Thread: Using Javascript to solve problems.

  1. #1
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default Using Javascript to solve problems.

    Hey guys,

    This is my first tutorial so hopefully I can do this properly if you don't understand something or I don't explain it properly give me a message and I will update it . In this tutorial I will be showing you:

    • How to use form fields to allow inputs
    • Calculate with the fields
    • Understand ID's
    • What ParseInt means and is
    • Link Javascript with HTML


    Setting Up


    Before we get started I suggest you create a template for the content. If you have never created a website template I suggest you visit these links:

    http://datsik.webs.com/html-xml
    http://www.w3schools.com/html/default.asp


    In this tutorial I will be showing you how to create a BASIC Pythagoras theorem calculator.

    I have supplied a template below for use with this calculator.

    HTML Code:
    <html>
    <head>
    <link href="stylesheet/stylesheet.css" rel="stylesheet" type="text/css">
    </head>
    <body>
    <div id="Container">
       <div id="Form">
       </div>		
    </div>
    
    
    </body>
    </html>

    In this tutorial I will not show you how to style the site. This is mainly because there are other guides out there. I may do this in the future.

    So now that we have a Semi basic site We need to create a form. It's always wise to plan ahead but as we have an example I'm going to tell you because I am that nice...

    So we need 3 Sides to the triangle

    Side A , Side B and Side C.

    Using Forms is done in HTML and for an indepth guide theres this:
    http://www.w3schools.com/html/html_forms.asp

    The most IMPORTANT part of making a form when hooking it up to Javascript is to make sure you keep the names easy to remember and Identify.

    HTML Code:
    <FORM NAME="triangleform">
                        Enter the triangle values below: <br>
                        <p>
                        <h4>Side A: </h4><BR>
                        <INPUT TYPE="Integer" NAME="SideA" Value="0"/><P>
                        <h4>Side B: </h4><BR>
                        <INPUT TYPE="Integer" NAME="SideB" Value="0"/><P>
                        <h4>Side C:</h4> <BR>
                        <INPUT TYPE="Integer" NAME="SideC" Value="0"/><P>
    					
                        <INPUT TYPE="button" NAME="Submit" Value="Submit" onClick="" />
                        </FORM>
    Input Type can be a variety of elements, but for this we will requrie 3 integers (Side A-C) and a button to make the javascript function load. (We will get to that later)

    NAME="" is very important, if these don't match up the the variables you declare in the JavaScript then it wont work.

    Value is what is written by default inside the form element. Value = 0 makes a predefined 0 inside the input fields.


    Now we have a basic function of the form. we are 1/3 of the way there! WOOO

    Next up is creating the Javascript.




    Creating the JavaScript

    To open up the Javascript we use this tag right here:

    <script type="text/javascript">
    and close with
    </script>

    Now we are going to setup Variables inside our first function. This is very similar to the way pascal works so you should be able to pick it up fairly quickly

    Give the function a name, I decided to write Checkinputs as the name

    Now we need to store some local Variables. So type

    Var

    Code:
    function checkinputs() {
    
    var 
    		//Sides Section
       A = parseInt(document.triangleform.input1.value),
       B = parseInt(document.triangleform.input2.value),
       C = parseInt(document.triangleform.input3.value),
    Now we want to define the names of the sides, These should not match the names in the inputs so to keep this easier to remember I have used just the letters.

    ParseInt means it will contain whatever is in these fields. So for example. The value of A will always equal whatever is in document.triangleform.SideA.value

    So "SideA" is the same as the SideA input we created in the HTML form.
    Same would be for SideB and SideC.


    So now we are giving it a value.. GREAT! But it's not doing anything now... it's got this value and just storing it... so now what?

    Well we need to do some equations don't we?


    Pythagoras Theorem


    Now you can use algebra to find any missing value, as in the following examples:


    Code:
    a2 + b2 = c2
    52 + 122 = c2
    25 + 144 = c2
    169 = c2
    c2 = 169
    c = ?169
    c = 13
    I know some of you guys aren't great at maths... but I will continue this tutorial later...
    Last edited by xtrapsp; 04-03-2013 at 03:35 PM.

  2. #2
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

  3. #3
    Join Date
    Oct 2011
    Posts
    422
    Mentioned
    15 Post(s)
    Quoted
    116 Post(s)

    Default

    This time and age, you should use more powerful interactive elements like canvas instead of good ol'e form

  4. #4
    Join Date
    Feb 2012
    Location
    DON'T PM ME ASKING FOR STUFF
    Posts
    2,170
    Mentioned
    38 Post(s)
    Quoted
    423 Post(s)

    Default

    Quote Originally Posted by slushpuppy View Post
    This time and age, you should use more powerful interactive elements like canvas instead of good ol'e form
    it's a tutorial it's to help people learn...

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
  •