Javascript Basics

javascript basics

You will be introduced to Javascript basics in this article with which you could get a decent understanding of this language.

What is JavaScript?

JavaScript is a programming language, using which you can create interactive web pages.

Not, Just that.

A full-fledged web/mobile app, real-time networking apps like chats and video streaming services, command-line tools and even games can be created using JavaScript.

Very few programming languages are used as extensively as JavaScript in the programming world.

Where does the JavaScript code run?

JavaScript was originally designed to run in Browsers. So, Every browser has a JavaScript Engine which can execute JavaScript code.

A few examples of JavaScript engines are given below:

Chrome: V8
Firefox: SpiderMonkey
IE: Chakra

SEMrush

A v8 engine has embedded inside C++ program and that is called ‘Node’. So, Node is a C++ program that includes Google’s v8 JavaScript engine. With this, we can run JavaScript code outside of the Browser. We can pass JavaScript to Node for execution. So, we can build backend for our web/mobile application using JavaScript.

Javascript code can be run inside of a browser or a Node. Browsers and Node provides a runtime environment for JavaScript code.

JavaScript and ECMAScript?

ECMAScript is just a specification. JavaScript is a programming language that confirms it’s specifications.

An organization called ECMA which is responsible for defining standards. They take care of this ECMAScript Specifications.

The first version (V1) of ECMAScript was released in 1997, then starting from 2015 ECMA has been working on the annual release of new specifications. So. in 2015 they released ES2015/ES6. This defines many new features of JavaScript.

Setting up a Development Environment, JavaScript Basics

In order to write a JavaScript code, you need a code Editor. Visual Studio Code, Sublime Text, Notepad ++ and so on. Anyone of your choice.

Let’s write your first program with JavaScript….

Step 1: Create a File and give it the name of your wish with ‘.html’ as extension.

Step 2: Copy the HTML code snippet shown below on to the file you have created. This is gonna be a host for the javascript code that we are going to write.

<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript App</title>
</head>
<body>

</body>
</html>

Note:
Before you start learning JavaScript, it’s recommended to know about HTML and CSS as these are the basic programming languages (Front End) to create a website.

A script tag is needed to write a JavaScript Code. There are two places to add a script tag, one is in the head section and the other one is in the body section in the code mentioned above.

The best practice is to put the script tag at the end of the body section after all the existing elements. (Before closing body tag).

Why do we need to have the script tag in the body?

The browser process the file from top to bottom. A lot of script at the header might make your browser busy parsing your JavaScript code so, it won’t be able to render the content inside the page and that leads to bad user experience. (Any empty page will get displayed to the user until all the script gets processed by the browser). Every time, a code that we have in between needs to talk with the elements on the webpage.

Eg: Showing / hiding a specific element.

As we are adding script at the end of the body browser will render all the elements inside the body before it hits the script tag, so it gives us the required result without causing any error.

Note:
There are few exceptional cases like integrating third-party tools to our website where we need to add the script in the header section.

Step 3: Copy the script tag shown below and add it inside your body just above the closing body tag.

<script>
console.log(‘My First Program!’);
</script>

Let’s get into the details about the statement written inside the script.

console.log(‘My First Program!’);

It’s a statement in JavaScript. All statements in JavaScript should be terminated with a ‘;’.

A statement is a piece of code that expresses an action to be carried out. Here we want to log a message, My First Program! on the console.

To check the output open your developer console and click on the Console tab to see the result gets displayed in it.

Note:
Shortcut to open developer console in chrome: Ctrl Shift J

Comments:

Comments play a crucial role when we are writing the code in a real-time environment we should mention comment above each block of code describing what it does.

To add comments in JavaScript we use //.

Eg: // My first program

These comments will not be rendered by the browser so, those won’t get displayed in the webpage.

<script>
// My first program
console.log(‘My First Program!’);
</script>

For multi-line comments, you can use the comment syntax shown below.

Eg: /* 
My first programming using JavaScript. 
Exciting to do more with JavaScript.
*/

With this, you won’t see any difference in the output. We write these comments to provide information to other developers as to why we have written a code block.

While developing real-time applications we write thousands of lines of JavaScript code. So, we don’t write it all in an HTML file.

Then, where do we add it?

We will create a separate file for JavaScript and integrate it with the HTML file. The extension of the JavaScript file will be ‘.js’.

Let’s create a separate javaScript file and integrate it with the HTML file and see the output.

Name of the file I created is script.js.

Now, Paste the same script code in it without script tags. As the file, we are going to add the JS is a JavaScript file we need not mention script tags. You can directly write JavaScript code inside the .js file.

To integrate, add the below script tag in your HTML file.

<script scr=’script.js’></script>

It tells the browser to pull JS code from main.js.

Note:
Replace the path with your own JS file path.

Variables:

Variables, which are the most fundamental concepts in JavaScript and any other.
We use variables to store data in computer memory with a name and with that name we read the data in that memory location in the feature.

Let’s create a variable,

Syntax: let nameOfTheVariable;

Eg: let employees;

Here, we have created a variable named employees using ‘let’ keyword.

JavaScript is a dynamic language. You can change the type of a variable at run time.

In static type programming once you declare a variable and assign a value you can’t change the value of that variable to a different type.

Note:

1. Variable name shouldn’t start with a number.
2. It can have numbers, alphabets.
3. No special characters allowed except _ and $.
4. Shouldn’t use reserved keywords as variables.
Eg: let, function etc

Constant:

In contrast to a variable, we have constant in javaScript if we declare a constant the value assigned to it can’t be changed.

When you think you shouldn’t need to reassign a value to the variable then you can create it as a constant.

To create a constant, we use const

Eg:

const employeeId = 01;

Now, you can’t assign any other value to employeeId as it’s as a constant.

Array:

An array is nothing but a simple list of Objects.

Eg:

let selectedProducts = ['Tshirt', 'Shirt'];

I have created an array on the name of selectedProducts and used ‘[]’ to add elements in the array. These elements will be assigned with indexes starting from ‘0’. We use those indexes to call elements inside the array.

In the above example, Tshirt got index 0 and Shirt got index 1.

Let’s see how to display the second element in an array using console.log.

console.log(slectedProducts[1]);

This will now display the value which has the index 1 i.e; Shirt.

As we know JavaScript is dynamic programming, the lengths and the type of the objects inside the array is dynamic.
What do I mean by this?
We can assign a new element to the array in runtime and you can even add the elements of different types in an array.
Eg:

let selectedProducts = ['Tshirt', 'Shirt', 200];
selectedProducts[3] = ‘Jeans’;
console.log(selectedProducts);

In the above example, I have added a different type element number (200) to an array and also added a new element Jeans. Still, without any error, it executes and displays the result.

Functions:

The best way of programming is not to repeat code blocks multiple times. So, these functions help us to write a logic once and call it multiple times whenever required without duplicating the logic.

We have function keyword to create functions in JavaScript. You should write function followed by the name of the function.

Eg:

  function showAge (){
   alert("Your age is 19!");
}

In order to call a function, you can simply call the name of the function like below.

Function calling:

showAge ();

Objects:

An object in JavaScript is used to store different data types. I can say it’s a collection of a key, value pairs.

To create an object,

 
let person = {}; 

Person is an empty object created using let keyword. We can add key, value pairs into the object. Let’s see the below example for how to add them to an object.

Eg:

let person = {name: "Madhan"; age: 28;}

In the above example, name, age are keys and madhan, 28 and values.

Note:

You can see that Madhan has wrapped in the ” ” and the age doesn’t. That’s id how you need to declare, based on the data type of the value you should follow the syntax.

Developer Console

When we are writing the code more often you do mistakes which are technically called errors. These errors can’t be visible in the browsers so, we use the developer console to figure out such errors. I personally prefer Chrome while developing websites and debugging code errors. Hit F12 to open the console where you can see the javascript errors. You can see the example in the screenshot below.

javascript basics

If you are interested in learning effective techniques and questions for finding true masters of Javascript language, read on this to become a great Javascript developer by Toptal.

This is just a brief introduction to the JavaScript basics. You can visit us on a later date for more detailed information on JavaScript.

Confused with the coding?

Then, you might land on the wrong page. Here is Wrordpress Tutorials, which will guide you on how to create a website without writing the code.

Javascript Basics – FAQ’s

What is JavaScript?

JavaScript is one of the widely used programming languages which can help you create interactive web pages.

How do I start learning javaScript?

To learn javaScript, you can refer javascript.info , this is one of the best websites that I have come across to so far.

What are the basics of JavaScript?

To get started with javaScript basics, you should know about Variables, Functions, Arrays, Objects etc., and thier usage in writing the programming.

2 comments on “Javascript Basics

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn Facebook Ads for FREE?Subscribe now to get FREE access to Facebook Ads Course