Thursday, March 16, 2017

Lab 14- JavaScript Math Operations

       In lab 14, we had to learn the JavaScript arithmetic operators. For instance, + stands for addition, - stands for subtraction, * stands for multiplication and / stands for division. Using the skills we used previously of creating forms, we had to create two forms and add addition, subtraction, multiplication and division buttons. First, I started with a form and typed in two inputs. One input was for the first number with the id first and then the second input was for the second number with the id second. Next, it was time to create the addition,subtraction,multiplication and division buttons. I started off by creating the addition button. Creating the addition button required me to use the input tag and within the input tag I put the type and onClick. For the onClick I made sure I put AdditionBy and I gave it a value which will be used to call the button on the website. I did this for the other three buttons but all I changed was the onClick name into SubtractionBy,MultiplicationBy, and DivisionBy.  Putting the name next to the onClick will help later on wit the javascript because it will represented as the function in javascript. I also changed the value of each button into the indicated operation they will perform. Once I finished this, I  used the paragraph tag to type "The final Result is" because once the user fills in two numbers in the form and clicks on any operation button, the answer will be displayed next to the words in the paragraph tag. Now it was time to add Javascript. I decided to begin with addition. I started off by typing in script and from there I typed the function AdditionBy(). I then typed num 1 as my variable and put document.getElementById. The id we gave the input in the forms, now comes in handy because we will make the document get the element by the id first. I did this again for my second variable. Finally, I put document.getElementId ("result").innerHTML= Number (num1) + Number (num2). I put the plus sign in between the word num 1 and num 2 because the operation that is going to be done once a person clicks the button is addition. I did this for the following three operations (subtraction,multiplication and division). Except for the other unions I champed the arithmetic operator into its corresponding operation. Like subtraction is -, multiplication is * and division is /.
     Once I did all this process, if someone is to fill into two numbers in the form and click a certain operation button, it will work. At first I did not know how to write the code. When first writing the code I used s1 and s2 but it would not work because in my code I specified that s1=150 and s2=20. Thus, when I entered any other numbers other than 150 and 20, the calculations will not work. Therefore, I went to w3schools and tried learning more about the arithmetic operators. It may have been difficult making this lab but it was actually fun and exciting to se the final result. I know when I finished completing the lab I got so excited seeing how I would fill in two numbers in the form and then when I clicked any operation button it will work. I realized that the skills I learned in the previous lab was useful because in this lab we were required to create a form. I think this lab will allow us to understand how to create a calculator in the future.


1 comment: