Introduction to JavaScript for Beginners

JavaScript is one of the best-ranked programming languages in the world.

First of all, we need to know one thing… Java Script and Java are not similar. Some people think that those are similar and have some connection to each other. Actually, it’s not. Java and JavaScript are totally different languages.

When it comes to the reason why both names look similar, Actually it’s a marketing purpose. Because when JavaScript is invented by Brendon Eich in 1995, Java is very famous and trending in the world. That’s why its name was JavaScript.

Java Script is based on a Standard ECMA scripting language. And Java Script is a Client-Side Scripting Language that including the following features,
- Allow building dynamic user interfaces
- Dynamic Menus
- Client-Side animation
- Modify client view based on user input
- Ability to check user input before forwarding to the server.
as well as it is server-side that allows you to make web pages interactive. JavaScript acts like Dynamic Programming Language just like C#, Java, Python…etc.

There are so many JavaScript-based frameworks in the world, That’s why learning JS is very important. Let’s have a look at some famous frameworks based on JavaScript.

01. Node.js
The complete framework which is used for server-side web development to make dynamic web apps. The underlying programming language is JavaScript

02. React
Frontend library which is developed by Facebook. And you can create web as well as mobile applications using React JS.

03. React-Native
Completely use for mobile applications which ios and android and other platforms.

04. Angular JS
Another MVC (Model View Control) or rendered framework. This is a completely different framework by Google. But now it’s open-source. This is used to develop dynamic web apps.

There is another dimension for JavaScript, that is Software Development. That means Desktop Applications, not for the web. So there is a specific framework called Electron JS,

05. Electron JS
Electron JS used to build cross-platform desktop applications for your stand-alone systems.
If you don’t know what is stand-alone system is, I can give you a brief explanation for that.
A Stand-Alone System is a system that operates independently or is not connected to an electronic transmission and distribution network.
E.g. MS Paint, Text editor, Music Player…etc.

Those are the frameworks that currently using hardly in the industry. There are some upcoming future frameworks based on JavaScript. Lets’ see what are they.

06. React VR (Virtual Reality)
Using this entire framework, you can create virtual reality applications, virtual reality experience and it’s highly in-demand virtual reality.

07. Tensor Flow.js
This is an open-source machine learning platform/framework. Initially developed by Google for everyone.
The JS library that is Tensor Flow.js can be used for training and deploying machine learning models.

So let’s talk about the theoretical side of JavaScript, JS is an interpreted language. In present, JavaScript supports all major browsers. And JS has structured programming constructs like C programming language and Case sensitive.

How does Java Script understand HTML Document?

JS HTML
JS HTML

Let’s have a look for HTML Document

<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<h1>Heading</h1>
<div id="div1">
<p>P Tag 1</p>
</div>
<div id="div2">
<p class="p2">P Tag 2</p>
</div>
</body>
</html>

So just think what happens is when the HTML document loaded in the browser corresponding to that document. Actually, another representation of the document is created which is known as DOM-Document Object Model for understanding to JavaScript.

Each of the HTML tags arecorrespondently represented as an object in the Document Object Model.

Let’s have a look, how JavaScript looks for the above HTML Document,

DOM-JavaScript View

DOM
DOM

Since this is a hierarchy, you can see that the entire document comprises a hierarchy.
DOM is basically a similar representation of the same HTML Document in a different format.
The reason why we need a different format is that JavaScript can easily interpret DOM format. JS cannot understand those HTML tags. But JS can easily understand objects of DOM.

Further, JavaScript looks at this DOM in terms of nodes. But primarily looking at 03 different types of nodes.
01) Element Node
02) Attribute Node
03) Text Node

Now I hope to discuss some basic tips and theoretical parts when we are coding, but not much since this is an introduction.

#1 JavaScript can use in <head> section and can use in <body> section, even it’s outside the <html> tag also works fine.

#2 JavaScript can embed to the HTML both internal and external ways.

#3 There are 02 data types available in JavaScript, one is Primitive data types another one is Composite/Complex data types.
null and undefined data also belongs to the primitive data types, but those data have a special name called Trivial/Other data types.

#4 JavaScript is a LOOSELY typed programming language.
In C, C++, Java… like programming languages must mention the data type when declaring a variable.

int a = 5; //Strictly typed

But in JavaScript, no need to mention the data type. You don’t have to declare the data type when you create the variable. Only just use var/const/ let keyword.

var num = 16; //number
var name = "Gayan" //String
var flag = true; //boolean

Those data types relevant to that value you pass to the variable. Automatically the data type will detect and change.

#5 JavaScript is a DYNAMICALLY typed programming language.
Whether a value you pass, the data type over the variable will be changed depending on the type of value.

var num = 16;

Here you pass numeric value, then the data type of num variable is number.
After that,

var num = "Hello";

You execute this, then the num variable data type will be changed into String data type. This is called “Dynamically Typed”.

So another thing, in JS also we can do variable initialization and declaration separately.

var x; //Declaration 
x=5; //Initialiization

When we write javascript statements, there is a semi-colon at the end of each executable statement like java, c, c++ programming languages.

So now we come up with the final part of this introduction article,

Rules to create variables

This is actually about assign names to variables.

Naming Conventions-Identifier
The rules for creating an identifier in JavaScript are, the name of the identifier should not be any pre-defined keyword.

The first character must be a letter, an underscore ( _ ), or a dollar sign ($).

Subsequent characters may be any letter or digit or an underscore or a dollar sign. And also variables are case sensitive.

The Conclusion

So, this is an introduction to get a clear idea of what is JavaScript and why we learn JavaScript. If you are a beginner at JavaScript, this article may very helpful and hopefully will be an inspiration to get started your javascript journey.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store