Learning basic JavaScript

Here are the basic steps that any one eager to start learning JavaScript can follow.


What you need, to get started
Your first JavaScript Program
Basic Of JavaScript Language
Simple Form Validation using JavaScript
Where to go from here

What you need to get Started

If you are reading this post, then literally nothing. Press F12 or open up Developer Tool(if you don’t know how to , search on google a good step toward learning programming)and you are ready to start writing your first JavaScript( from here I will say JS) code.

I am using Google Chrome Browser, and here is how it looks after pressing that F12

Developer Tool in Chrome

Here is where Developer Tool options is located on chrome browser

Developer Tool Option

Once your Developer Tool is opened click on Console Tab, and you are ready to write your first program.


Your first JavaScript Program

I am not going to write repeated “Hello World” program. But if you want, here is the code for it, copy and paste to your developer tool and hit enter.

console.log(“Hello World!”);
alert(“Hello World!”)

Above code will print as well as show a pop up window with “Hello World” in it.

So what I should write as a first JS program, why not showing list of users from GitHub.com . They have already exposed an api for this

https://api.github.com/users

Copy and paste this URL into your browser and you can see first 30 users of Github.

So lets start, we will use XMLHttpRequest to get data from Github api and then print response returned. To read more about Github api go to developer

List of Users from GitHub

Breaking down above code:

(function(){/*Some Code */}()); 
— IIFE or Immediately invoked function, make a habit of writing any pure javscript code under this block. More about IIFE
var
 — A reserved keyword by javascript language, is used to decalre any variable in javascript. You don’t have to define type of variable like other strongly typed language. Type of variable will be inferred from the value assigned to it. Like
var data = 10 ; // here data will be a type of number
var data = “Some String”; // here data will be type of string
you can check type of variable using TypeOf function
console.log(typeof data);
console.log
 — As you had already seen this is used to log any output to the Browser Console. You can also use console.error() and console.info(). 
For more information check out MDN
XMLHttpRequest
 — This is an inbuilt API which help in transferring data to and from back end servers. This API is heavily used in azax programming. It provides a easiest way to retrieve/refresh data without actually refreshing whole page. For more information check out MDN

Basic Of JavaScript Language

There are lots of good places where you can find JS language basic, I am including reference here, so that you have a easy place and don’t have to google it:

JavaScript | MDN

JavaScript | Tutorial

FreecodeCamp


Simple Form Validation using JavaScript

Lets first create a simple Form. I am going to use CodePen. If you are not familiar with codepen, I strongly suggest you to go and explore it. It’s not necessary to use codepen and you can use notepad.exe or use console to write program, but codepen gives you ability to see your code functioning in real time without the hassle of setting it up from scratch. You want to see the code please go to link


Where to go from here

If you have any question you can reach out to me at

  1. Twitter : @imknitesh
  2. Ask questions here

My only suggestion would be don’t hesitate to reach out.