Learn Simple Javascript - Addition of two numbers for Beginners

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 :

  1. Notepad ++ - Free.
  2. 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.



Comments

Post a Comment

Popular posts from this blog

Thedi Choru - A Translation and a Happy New Year

A very Happy New Year! I thought I'd do a translation of one of my favourite piece of poetry from Mahakavi Bharathiar. If you don’t know about him, there's Wikipedia. This guy has been demonstrating to me greatly, in how the vocabulary you think can greatly impact the way by which you act; in how the vocabulary in which you think, forges new strong behaviour into you. That's the ultimate power of language. Now that many of you will be having hopes, dreams and significant resolutions for the New Year, a more perfect stage can never be asked for. தேடிச் சோறுநிதந் தின்று - பல சின்னஞ் சிறுகதைகள் பேசி - மனம் வாடித் துன்பமிக உழன்று - பிறர் வாடப் பலசெயல்கள் செய்து - நரை கூடிக் கிழப்பருவ மெய்தி - கொடுங் கூற்றுக் கிரையெனப்பின் மாயும் - பல வேடிக்கை மனிதரைப் போலே - நான் வீழ்வே னென்று நினைத் தாயோ ? நின்னைச் சிலவரங்கள் கேட்பேன் - அவை நேரே இன்றெனக்குத் தருவாய் - என்றன் முன்னைத் தீயவினைப் பயன்கள் - இன்னும் மூளா தழிந்திடுதல் வேண்டும் - இனி என்னைப் புத...
Read more

Best Dialogues from V for Vendetta and their meanings and Quotations

“Creedy : Die! Die! Why won't you die?... Why won't you die? V : Beneath this mask there is more than flesh. Beneath this mask there is an idea, Mr. Creedy, and ideas are bulletproof.” V for Vendetta is one of my favourite movies and I thought I’d put up a collection of good quotes from it. The Quotes are taken from IMDB Memorable Quotes, thanks to IMDB. The glory of an Idea! Evey Hammond : [ voiceover ] Remember, remember, the Fifth of November, the Gunpowder Treason and Plot. I know of no reason why the Gunpowder Treason should ever be forgot. But what of the man? I know his name was Guy Fawkes and I know, in 1605, he attempted to blow up the Houses of Parliament. But who was he really? What was he like? We are told to remember the idea, not the man, because a man can fail. He can be caught, he can be killed and forgotten, but 400 years later, an idea can still change the world. I've witnessed first-hand the power of ideas, I've seen people kill in the n...
Read more

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

UPDATE: Whatever is written below applies for the Xolo Q800 phones with MTK6589 chipsets. The Q800s with  MTK6589M chipsets may or may not qualify for what is written down here. (I think that the phones which costed less than 12k have the MTK6589M chipsets. ) Android smartphones are everywhere these days. They run the latest operating system and they are all identical. You try out different brands and they all have the same android. At the time of this blog post, it is Jelly bean. So, what makes a smartphone different from another. They all have IPS screens, HD playback, ble... all sorts of common stuff. Difference? Xolo Q800 is a smartphone and here is where the difference is. 1. There are absolutely no bloatware in the device. The device is pure stock Jelly bean. There is one app called Xolo care which just sits silently in the corner helping you to check updates to the operating system and contact customer care. Too bad I don't ...
Read more