A little bit of JS (JavaScript)

Hi Everybody today i'm going to show you how to create a simple calculator, with this we are going to learn:
  • How to combine Js with HTML
  • How to manage the attributes of a Form through Js
  • Conditional Sentences with Js
  • Global Variables with Js
  • Parsing values in Js
And what we need is:
  • Notepad
  • Internet browser
First of all we need to undertand how JavaScript works, JavaScript(JS) does not need a compiler, it needs an interpreter(there is a huge difference between those things) and the interpreter will be the browser, any browser supports JS, so IE(Internet Explorer) will work. JS does not work just by itself, it needs an structure of HTML that call it to work, so we can say that JS + HTML = Great Web Page, you can add some CSS if you want to create a beatiful Web Page. Is correct! JS is a lenguage use in HTML to improve the performance of the Web Pages due to the validations or some operations that does not need an interaction with DB can be performed by an JS file.

Ok once we have unterstood how JS works now lets create our HTML file:

<html>

 <head>
  <title>My First Calculator with JS</title>
  <script>
   var val1=0
   var sig=0
   function show(form){
    if(val1==0){
     val1=document.myform.screen.value
     document.myform.screen.value=0
    }
    switch(form){
     case "+":
      val1=sum(val1,document.myform.screen.value)
      document.myform.screen.value=0
      sig=1
      document.myform.point.disabled=false
      break
     case "-":
 
      val1=res(val1,document.myform.screen.value)
 
      document.myform.screen.value=0
      sig=2
      document.myform.point.disabled=false
      break
     case "*":
      document.myform.screen.value=1
      val1=mul(val1,document.myform.screen.value)
      document.myform.screen.value=0
      sig=3
      document.myform.point.disabled=false
      break
     case "/":
      document.myform.screen.value=1
      val1=div(val1,document.myform.screen.value)
      document.myform.screen.value=0
      sig=4
      document.myform.point.disabled=false
      break
     case "=":
      if(document.myform.screen.value!=0){
       switch(sig){
        case 1:
         val1=sum(val1,document.myform.screen.value)
         break
        case 2:
    
         val1=res(val1,document.myform.screen.value)
         break
        case 3:
         val1=mul(val1,document.myform.screen.value)
         break
        case 4:
         val1=div(val1,document.myform.screen.value)
         break
       }
      }
      document.myform.screen.value=val1
      val1=0
      sig=0
      document.myform.point.disabled=false
      break
    }
   }
 
 

 
   function erase(form){

    form.screen.value="0"
    form.point.disabled=false
    val1=0
    sig=0
   }
   function numbers(val){
   var con=document.myform.screen.value+""+val
    if (val=="."){
     document.myform.screen.value=con
     document.myform.point.disabled=true
    }
    else{
     var num=parseFloat(con)
     document.myform.screen.value=num
    }
   }
 
  </script>
  <script src="functions.js"></script>
 </head>
 <body>
  <table>
   <form name="myform">
    <tr>
     <td colspan=3><input type="text" size=10 name="screen" value="0" disabled /></td>
     <td><input type="button" id="C" value="C" onClick="erase(this.form)" /></td>
    </tr>
    <tr align="center">
     <td><input type="button" id="one" value="1" onClick="numbers(this.value)"></td>
     <td><input type="button" id="two" value="2" onClick="numbers(this.value)"></td>
     <td><input type="button" id="three" value="3" onClick="numbers(this.value)"></td>
     <td><input type="button" id="plus" value="+" onClick="show(this.value)"></td>
    </tr>
    <tr align="center">
     <td><input type="button" id="four" value="4" onClick="numbers(this.value)"></td>
     <td><input type="button" id="five" value="5" onClick="numbers(this.value)"></td>
     <td><input type="button" id="six" value="6" onClick="numbers(this.value)"></td>
     <td><input type="button" id="min" value="-" onClick="show(this.value)"></td>
    </tr>
    <tr align="center">
     <td><input type="button" id="seven" value="7" onClick="numbers(this.value)"></td>
     <td><input type="button" id="eight" value="8" onClick="numbers(this.value)"></td>
     <td><input type="button" id="nine" value="9" onClick="numbers(this.value)"></td>
     <td><input type="button" id="mul" value="*" onClick="show(this.value)"></td>
    </tr>
    <tr align="center">
     <td><input type="button" id="zero" value="0" onClick="numbers(this.value)"></td>
     <td><input type="button" id="point" value="." onClick="numbers(this.value)"></td>
     <td><input type="button" id="equ" value="=" onClick="show(this.value)"></td>
     <td><input type="button" id="div" value="/" onClick="show(this.value)"></td>
    </tr>
 

 
   </form>

  </table>
 </body>
</html>

 

Ok now for explain to you the code I'm using color codes:
  • The blue one belongs to all the code of HTML
  • The red one belongs to all the code of JavaScript
If you type that code on a notepad you will have the following result:
As you have seen, it is a simple Calculator with the 4 main functions, but in the previous code I did not put the code for the functions, the code for the functions is:

function sum(v1,v2){

 var sum
 sum=parseFloat(v1)+parseFloat(v2)
 return sum
}

 
function res(v1,v2){

 var res
 res=v1-v2
 return res
}

 
function mul(v1,v2){

 var mul
 mul=v1*v2
 return mul
}

 
function div(v1,v2){

 var div
 div=v1/v2
 return div
}

 
But how this Calculator works? The Calculator works like the following picture:
As you can see I have splited the Js Code in 2 because with one part I control the actions of the buttons and with the other part, well the other part just perform the operations, And How did I do this? Simple, let's see the Js Code of the HTML File:

  <script>

   var val1=0
   var sig=0
   function show(form){
    if(val1==0){
     val1=document.myform.screen.value
     document.myform.screen.value=0
    }
    switch(form){
     case "+":
      val1=sum(val1,document.myform.screen.value)
      document.myform.screen.value=0
      sig=1
      document.myform.point.disabled=false
      break
     case "-":
  
      val1=res(val1,document.myform.screen.value)
  
      document.myform.screen.value=0
      sig=2
      document.myform.point.disabled=false
      break
     case "*":
      document.myform.screen.value=1
      val1=mul(val1,document.myform.screen.value)
      document.myform.screen.value=0
      sig=3
      document.myform.point.disabled=false
      break
     case "/":
      document.myform.screen.value=1
      val1=div(val1,document.myform.screen.value)
      document.myform.screen.value=0
      sig=4
      document.myform.point.disabled=false
      break
     case "=":
      if(document.myform.screen.value!=0){
       switch(sig){
        case 1:
         val1=sum(val1,document.myform.screen.value)
         break
        case 2:
     
         val1=res(val1,document.myform.screen.value)
         break
        case 3:
         val1=mul(val1,document.myform.screen.value)
         break
        case 4:
         val1=div(val1,document.myform.screen.value)
         break
       }
      }
      document.myform.screen.value=val1
      val1=0
      sig=0
      document.myform.point.disabled=false
      break
    }
   }

 
   function erase(form){

    form.screen.value="0"
    form.point.disabled=false
    val1=0
    sig=0
   }
   function numbers(val){
   var con=document.myform.screen.value+""+val
    if (val=="."){
     document.myform.screen.value=con
     document.myform.point.disabled=true
    }
    else{
     var num=parseFloat(con)
     document.myform.screen.value=num
    }
   }
  </script>

 
  <script src="functions.js"></script>

As we can see the blue part is the controler of the HTML document, I mean, is the code which control the buttons and according to the events display the expected result, and the red part is a separated document which contains all the functions to be performed.

The calculator will work like this:

Calculator Screen< - >Js Controller< - >Js Document(Functions)

As we can see this documents follow MVC pattern because we have our view (Calculator Screen), our controller(Js Controller) and the Model (Js Document). It is easy to understand, the View will display the view of the page, will display what the user is going to see. When an user perform an action, the controller will evaluate this action and according to this action will invoke the corresponding function and finally, the Model will return the expected result to the view for the previous user's action.

Ok and now for the closure, we have learned this:
  • How to combine Js with HTML
<script src="functions.js"></script> with this line a document HTML invoke a Js Document in another location with the attribute src="path" or you just write the Js code inside the <script></script> clauses:

<script>
var val1=0
var sig=0
function show(form){
if(val1==0){
val1=document.myform.screen.value
document.myform.screen.value=0
}
...
</script>
  • How to manage the attributes of a Form through Js
document.myform.point.disabled or document.myform.screen.value are examples of how to manage the attributes of a form in HTML, I mean Js understand document as the HTML document, myform as The form that we are using, point or screen as the Input elements of the Form and disabled or value as the attributes for the corresponding input elements
  • Conditional Sentences with Js
Just to put an example of the conditional sentences:

if(val1==0){
val1=document.myform.screen.value
document.myform.screen.value=0
}
 
The use and the sintax of the conditional Sentences are the same as in other languages as Java or C#, in this post I have used the if - else and the switch clause
  • Global Variables with Js
To use global variables in Js should be declared before any function inside the <script> clause of the HTML code:

<script>
var val1=0
var sig=0
...
</script>
  • Parsing values in Js
The parsing in Js, well for this post I've just used a parsing to float values:

sum=parseFloat(v1)+parseFloat(v2)

In the future I will show the different parsing existing in Js

So chavoz(here in Mexico 'chavos' or 'chavos' is like dudes) this is it for now, I hope I can help you with this at least a little bit, see you in the next time ^_^/ and if you have doubts or comments, please leave them in that section below.

Comments

Post a Comment

Popular posts from this blog

Juego de Gato Usando HTML, JavaScript y CSS

Hola chavos en esta ocasión les traigo algo que realize en mis tiempos de ocio durante mi trabajo, es un juego simple de Gato o TicTacToe. Este post tiene algo de relevancia ya que he usado algunas características que les pueden ser útiles: CSS hover reaccionar cuando el cursor pasa por encima de un objeto shadow crear objetos en HTML con sombra position Colocar un objeto justo en el centro de la pantalla JavaScript Interactuar con objetos de Html cambiándoles algunos atributos como class, value, etc. HTML Interactuar con funciones de JavaScript Bueno chavos sin mas por el momento les dejo mi código: //TicTacToe.htm <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>TicTacToe</title> <link rel="stylesheet" type="text/css" href="TicTacToeCSS.css" /> <script type="text/javascript" src="TicTacToe.js"> </script> </head> ...
Read more

AfterEffects - Quitar el Fondo de un Video Forma 1: KeyLight

Image
Antes que nada hola a todos ^_^.....en este tutorial les enseñare a quitar el fondo de un video y ya sea poner una imagen u otro video atras del video sin fondo. Existen 3 maneras de hacerlo: ChromaKey(Obsoleto) KeyLight RotoBrush En este tutorial me enfocare en el KeyLight, el cual es la evolucion(por así decirlo) del Chroma Key, esta herramienta ha ganado un Oscar gracias a su potencia y facilidad de usar. Para este tutorial necesitaremos: Adobe After Effects Instalado(yo utilizo el Ae CS6) Un video con FONDO VERDE(No es tan importante el color de fondo de los videos, de preferencia tiene que ser un color distinto a cualquier color de lo que queremos conservar, para asi conservar intacta la parte que queremos dejar, yo recomiendo cualquier color chillón) Un video o imagen que queremos poner de fondo nuevo Ya que tengamos esto, seguimos los siguientes pasos: Abrimos nuestro AfterEffects Una Vez abierto añadimos los 2 videos o el video y la imagen, para este ejem...
Read more

Crear un nuevo Libro de Excel con VBA ES

Image
Hola a todos, hoy les voy a enseñar como crear un nuevo libro de excel con VBA; ustedes lo pueden crear desde Excel o PowerPoint u otro programa de Office, solo necesitan tener la referencia necesaria. Ok antes que nada sie stamos en excel no necesitamos ninguna referencia ya que estas se agregan automáticamente, pero si no lo estamos necesitamos añadir la referencia de la siguiente manera: Click en Herramientas->Referencias Encuentren y seleccionen la librería: Microsoft Excel 14.0 Object Library Click en Ok Ahora crearemos el nuevo Libro, Yo lo voy a crear desde excel y bueno antes de empezar necesitamos tener nuestro ambiente de programación, si no saben como llegar a este paso solo denle click aquí para que vean en el post previo como llegar a esta parte, Ahora empecemos: Click derecho en This Document->Insertar->Modulo Ahora escribamos el siguiente código: Sub createNewWorkbook()     Dim newBook As Workbook   ...
Read more