Learn Simple Javascript - Addition of two numbers for Beginners

March 12, 2016

So you decide to read Javascript. That's a good thing. Javascript is a very useful web technology and you will be glad you read this post.
After you read this post you gotta improvise and learn commands as you go along. This is not a classroom. This post will definitely get you started though.

Tools you'll need :

Notepad ++ - Free.
Any Browser - Chrome, Firefox - Also Free.

Lets Get started.I assume you have installed the two tools mentioned above.
Open Notepad ++ and paste the following simple HTML into it.

<html>
 <head>
  
 </head>
<body>
Addition of   
<input type="text" id="text1" value="1" /> 
and
<input type="text" id="text2" value="2" /> 
is
<input type="text" id="result" value="3"/>
 </body>
</html>

Save the document as whateveryouwant.HTML. Now go to Run > Launch in Yourbrowser.
You get good and simple text boxes. Now lets write code to add them as you type. You can also use a button to execute the code, but that's kinda lame compared to adding as you type.
Either ways, if you know to do the harder one, you'll know the easier.

Lets introduce the Javascript code that will do the addition now. It is self explanatory read it twice and you'll get it. Now your html also has events oninput, onclick, onchange etc. I have Highlighted it in pink for you below. Now replace the above code with the below in Notepad ++. Save and run it. Voila! Your browser should now add as you type.

 <head>
  
 </head>
<body>
Addition of   
<input type="text" id="text1" value="1" oninput="add();"/> 
and
<input type="text" id="text2" value="2" oninput="add();"/> 
is
<input type="text" id="result" value="3"/>

<script type="text/javascript">
function add() { 
var addition, no1, no2;
addition = 0;
no1 = parseInt(document.getElementById("text1").value);
no2 = parseInt(document.getElementById("text2").value);
addition = no1 + no2 ;
document.getElementById('result').value = addition;
 }
  </script>

 </body>
</html>

Now we used event listeners on the HTML (remember oninput?).
It is always best practice to segregate the HTML and Javascript totally. So lets rewrite the above code so that the HTML is in simplicity and the processing of the oninput event takes at the Javascript end. So here is the modified code. Replace the above with the below. It is simple as well.

 <head>
  
 </head>
<body>
Addition of   
<input type="text" id="text1" value="1" /> 
and
<input type="text" id="text2" value="2" /> 
is
<input type="text" id="result" value="3"/>

<script type="text/javascript">

var v = function() { 
var addition, no1, no2;
result = 0;
no1 = parseInt(document.getElementById("text1").value);
no2 = parseInt(document.getElementById("text2").value);
addition = no1 + no2;
document.getElementById('result').value = addition
 }
 
 document.getElementById('text1').oninput = v;
 document.getElementById('text2').oninput = v;  
  </script>
 </body>
</html>

See how the HTML portion defining the textbox is now removed off of the events and the events are now on the Javascript. This is very useful if you are running a website on wordpress and do not want to enable Javascript to the authors but process events nevertheless. A central Javascript code will do or you can use a plugin like script n style to insert a page or post specific Javascript.

I hope this lesson has kickstarted the path to your Javascript Learning.
There is this book which I liked a lot, It is called JavaScript: The Good Parts and you can buy it here. Check it out. It will be really useful to proceed learning further.

Adios People! Happy Learning.

The Exasperated Man

Learn Simple Javascript - Addition of two numbers for Beginners

Comments

Popular posts from this blog

Thedi Choru - A Translation and a Happy New Year

(Updated!) Xolo Q800 – A review with pros and cons

(UPDATED!) Motorola Fire XT/ XT530/ XT531 all in one guide to rooting, Increasing Phone memory, Applications, Tweaks and resources – Compiled