JavaScript for Novice or Experience?

Sudhanshu Jain
3 min readJan 28, 2019

It is my first blog where I am going to mention about the coolness of JavaScript. Couple of days ago, recently joined colleague ask me, how we can fetch values from the html attributes to JavaScript. He was novice and he was fed up by searching on Stack Overflow or Stack Exchange where he is getting the Jquery code continuously, so I thought to write a blog on this.

Little bit History
JavaScript was invented by Brendan Eich in 1995, and became an ECMA standard in 1997. ECMA-262 is the official name of the standard and ECMAScript is the official name of the language. JavaScript is pretty easy scripting language which is working on client side and helps to create the dynamic websites. JAVA and JAVASCRIPT are completely different language and there is no inter-relation between them.

Actions using JavaScript
In this I am going to mention about the various cases that will be helpful for getting the understanding about the working of JavaScript in sync with the elements of html and various questions asked in an interview.

CASE 1 : Let’s take an example that you have to fetch the content from input box or textbox attribute of html tag in JavaScript.

HTML Code:
<input id="name" type="text"/>
JavaScript Code:
var a= document.getElementById("name").value

Pretty easy right ??

CASE 2: Let’s take another case that you have to fetch the content from paragraph or <p> tag of html in JavaScript.

HTML Code:
<p id="name"/>
JavaScript Code:
var a= document.getElementById("name").innerText;

Let’s increase the complexity and try whether it will work with other elements.

CASE 3: If I want to fetch the content from select element or <select> tag of html in JavaScript.

When any value select in select box, the JavaScript should fetch it and store into a variable.

HTML Code:
<select id="values">
<option>Alpha</option>
<option>Beta</option>
<option>Gamma</option>
</select>
JavaScript Code:
var a= document.getElementById("values").value;

As you can see, with just a couple of lines of code we can easily get the values of HTML attributes into JavaScript. Might be you all were thinking that how we can set the value in a particular HTML tag instead of getting the values using JavaScript.

HTML Code:
<div id="setContent"></div>
JavaScript Code:
document.getElementById("setContent").innerText="SampleData";

This might be confusing that where to use innerHTML or innerText. Let me clarify that innerHTML is one such property which is useful for get or set the HTML content for the html elements on the web page and innerText is helpful for presenting the plain text into or from the HTML elements.

CASE 4: Let’s take the case study that how it is working..

If I write html tags using JS what will happen, let’s have a look :

JavaScript Code:
document.getElementById("sample1").innerText="<h1>My First Blog</h1>";
document.getElementById("sample2").innerHTML="<h1>My First Blog</h1>";

Output: <h1>My First Blog</h1>
Output: My First Blog (in Big Size)

Will JavaScript going to work checkbox and radio button, the answer is big YES.

CASE 5: Working with radio and checkbox using JS

HTML Code:
<input type="radio" id="r1" name="gender" value="male" checked>Male
<input type="radio" id="r2" name="gender" value="female">Female
JavaScript Code:
if(document.getElementById("r1").checked)
{
radio=document.getElementById("r1").value
}
else if(document.getElementById("r2").checked)
{
radio=document.getElementById("r2").value
}

Similar way for the check boxes. As you can see that how easy to work with JavaScript. Actually JavaScript and HTML are tightly coupled and work hand in hand.

One such question asked in one of my interview that : Is semicolon (;) mandatory in JavaScript.

The answer is absolutely clear that Semicolon ( ; ) is not mandatory in JavaScript. JavaScript uses the Automatic Semicolon Insertion behind the scene.

JavaScript is using Single Thread and executes the statements but still one can easily write Non-Blocking Code (Multiple thread) with JavaScript as one of example setTimeout() which will called after a specified number of milliseconds.

There are various JavaScript is available on the internet and trust me it is one of the easiest language to learn. One can easily create wonderful websites, android and IOS apps using HTML, CSS and JS using native script programming.

Please post your queries, if I miss something in this blog.

…Hit Claps if you like this blog…

--

--

Sudhanshu Jain

Senior Software Engineer | Scrum Master Certified | Blogger | Tech Mentor