Vanilla JS to Jquery: The Noobs Guide

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/

<!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>Noob JS</title>
    </head>

    <body>
        <h3>Hello Noobs!</h3>
    </body>
</html>

Now if you double click the file, it will run in the browser.

Button Click Through Vanila JS

<body>
    <h3>Hello Noobs!</h3>
    <button id="myFirstButton">Click</button>

    <script>
        document.getElementById('myFirstButton').onclick = function(e) {
            console.log("Yo Noobs!");
        }
    </script>
</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.

#vanillajs #javascript #jquery #programming #coding #coding-skills #software-development #codinglife

Introduction and History

Implementation of Javascript in Browser Code

hackernoon.com

Vanilla JS to Jquery: The Noobs Guide