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
A v8 engine has embedded inside C++ program and that is code ‘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?
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>
My First JavaScript App
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:
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>
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.
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.
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.
Here is the article on Javascript Basics
Top comments (0)