I have been haunted and daunted by Javascript for almost a decade i.e. 10+ Years. These years do make a history for me in programming. Today while teaching one of my newly made friends on a quick course to programming, I stumbled upon some things that I should share and that is Javascript. Let us try to understand it with some examples. Introduction and History The web has been inclined towards Javascript which made its cover in 1996. A company by the name of Netscape which was famous for its speedy browsers in the mid 90s submitted it to the ECMA International to produce a standardized language which other browsers could implement. I still remember the awe at Netscape Navigator in the 90s. Today we know an entity by the name of Mozilla, a portmanteau of Mosaic and Godzilla. The first version was Mosiac Netscape 0.9, released in 1994. Implementation of Javascript in Browser Code Lets create a folder on your desktop by the name of noobJS and make an index.html file in it. For HTML boilerplate code, I will be using http://htmlshell.com/ Noob JS Hello Noobs! <!DOCTYPE html> < > html < > head < = > meta charset "UTF-8" < = = > meta http-equiv "X-UA-Compatible" content "IE=edge,chrome=1" < = = > meta name "viewport" content "width=device-width,initial-scale=1" < > title </ > title </ > head < > body < > h3 </ > h3 </ > body </ > html Now if you double click the file, it will run in the browser. Button Click Through Vanila JS <body> <button id= >Click< script> Hello Noobs! < > h3 </ > h3 "myFirstButton" /button>

    <script>
        document.getElementById('myFirstButton').onclick = function(e) {
            console.log("Yo Noobs!");
        }
    </ </ > body To start Javascript, we open a "script" tag and then close it with the same tag name. Everything in between is Javascript. "document " is a reference to the current screen which is in view. Now using the getElementById function for document means that Javascript is going to search all elements that have an ID of myFirstButton. An element can be anything from a button or a H3 or any HTML Tag which can be given an ID just by specifying id in it. Now if you right click the browser and click inspect, we will have a console where we can print information using the console.log() function. Now refresh on the browser and click the button. What is JQuery? JQuery is javascript just making it easier to write and more easier to use. It is like re-arranging the same language so that I can make it shorter, more abbreviated hence faster to implement. I would like to metaphorize it as typing Laugh Out Loud again and again but I would prefer using Lol and expect the reader to understand it. Lets write the same click function in JQuery. We will first import JQuery using a CDN (Content Delivery Network). Head over to and click on minified jQuery Core 3.4.1 https://code.jquery.com/ <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>Noob JS</title>

        <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    </head> < = > meta charset "UTF-8" Add it to the Head of the index.html file <body>
    ...
    <button id= >JQuery: Click< body> "mySecondBUtton" /button>
    ...
</ < > script .getElementById( ).onclick = { .log( );
}

$( ).click( { .log( );
}); document 'myFirstButton' ( ) function e console "Yo Noobs!" '#mySecondBUtton' ( ) => e console "Not a Noob Anymore!! Heh!!" </ > script Now JQuery once imported initializes with the tag of "$" and then comes the brackets which in quotes becomes a selector from the document. If with context to javascript this is getElementBy, it can either be a class with a dot or a id with a Hash. Therefore, if you compare it is way shorted just like LOLs. Making a GET Call using Vanila JS Lets try to fetch some data through a Get Call, so that we are now communicating in the Javascript. First we need some Mock API and we have a tool for it. Head over to and scroll down to the body. We will write a simple response in JSON (Javascript Object Notation). https://www.mocky.io/ Now click on Generate and it will give you an endpoint for the Get Call. Next create a new button and call it in the script tab <body>
...
<button id= >Javascript: Get Data< body> "myFirstCall" /button>
...
</ < > script ...
document.getElementById( ).onclick = { xhttp = XMLHttpRequest();
    xhttp.onreadystatechange = { ( .readyState == && .status == ) { .log( .responseText);
        }
    };
    xhttp.open( , , );
    xhttp.send();                
}
... 'myFirstCall' ( ) function e var new ( ) function if this 4 this 200 console this "GET" "http://www.mocky.io/v2/5da666b83400001528633045" true </ > script Javascript has an class that handles all the API in the form of an object. This object allows transfer of data between a web browser and a web sever. We have created an object as var xhttp. Next we are listening if there is a change of state which detects whether the call has been run or not. this.readyState is 4 when everything is OK, which puts in a nice check so that during the call we don't break the code and response of 200 means all is good that the webserver responded successfully with some data. this.responseText contains the required data that we want to attain. Next we open the connection and then we send the request. Lets refresh the page and click the button. As you can see we now have the response with all the wiggly brackets. Let convert the response into an object by parsing the JSON. ( .readyState == && .status == ) { .log( .parse( .responseText));            
} if this 4 this 200 console JSON this As you can see by just using JSON.parse() we are able to convert the response from wiggly to usable object. To get the message you can use the following code now; .parse( .responseText).msg JSON this Making a Get Call using JQuery Lets do the same thing with JQuery <body>
...
<button id= >JQuery: Get Data< body> "mySecondCall" /button>
...
</ < > script ...
$( ).click( {
    $.ajax({ : , : , : , : { .log(data);
        }, : { .log(data);
        }
    });
});
... '#mySecondCall' ( ) => e type 'GET' dateType 'JSON' url 'http://www.mocky.io/v2/5da66a18340000a99963304c' success ( ) function data console error ( ) function error console </ > script Jquery has a ajax function for making communication with a web server. Ajax stands for Advanced Java and XML. You provide it with the type of call, type of response and the url and it handles the states in simple readable language. As you can see the same code has been made minimal with the same type of response. Conclusion Going through Vanilla JS really makes up concept to the what is happening first hand. I do recommend everyone to at least go through it so that a better level of understanding can be made but do acknowledge on the other hand the importance of saving time and hassle. Re-inventing the wheel does not bring much change and innovation but in todays time utilizing libraries to speed up work and save time is what one should prefer. Complete Code ~ index.html Noob JS Hello Noobs! Javascript: Click JQuery: Click Javascript: Get Data JQuery: Get Data <!DOCTYPE html> < > html < > head < = > meta charset "UTF-8" < = = > meta http-equiv "X-UA-Compatible" content "IE=edge,chrome=1" < = = > meta name "viewport" content "width=device-width,initial-scale=1" < > title </ > title < = = = > script src "https://code.jquery.com/jquery-3.4.1.min.js" integrity "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin "anonymous" </ > script </ > head < > body < > h3 </ > h3 < = > button id "myFirstButton" </ > button < = > button id "mySecondBUtton" </ > button < > hr < = > button id "myFirstCall" </ > button < = > button id "mySecondCall" </ > button < > script .getElementById( ).onclick = { xhttp = XMLHttpRequest();
                xhttp.onreadystatechange = { ( .readyState == && .status == ) { .log( .parse( .responseText));            
                    }
                };
                xhttp.open( , , );
                xhttp.send();                
            } .getElementById( ).onclick = { .log( );
            }

            $( ).click( { .log( );
            });

            $( ).click( {
                $.ajax({ : , : , : , : { .log(data);
                    }, : { .log(data);
                    }
                });
            }); document 'myFirstCall' ( ) function e var new ( ) function if this 4 this 200 console JSON this "GET" "http://www.mocky.io/v2/5da66a18340000a99963304c" true document 'myFirstButton' ( ) function e console "Yo Noobs!" '#mySecondBUtton' ( ) => e console "Not a Noob Anymore!! Heh!!" '#mySecondCall' ( ) => e type 'GET' dateType 'JSON' url 'http://www.mocky.io/v2/5da66a18340000a99963304c' success ( ) function data console error ( ) function error console </ > script </ > body </ > html Github https://github.com/th3n00bc0d3r/vanilajsvsjquery

Fetch

Mosaic

Mozilla

Vanilla JS to Jquery: The Noobs Guide

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Desktop Application Development in ElectronJS Using Angular

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Desktop Application Development in ElectronJS Using Angular

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps