After reading or listening to the word JavaScript, many questions arise in your mind like
- What is JavaScript,
- What you can do with it,
- Where does JavaScript code run, ….. etc
We are going to discuss all these questions in this tutorial series. Let’s get started with our first question i.e.
What is JavaScript?
JavaScript is one of the most popular and widely used programming languages in the world right now. It’s growing faster than any other programming language and big companies like Netflix, Walmart, and PayPal build entire applications around JavaScript.
What can you do with JavaScript?
In earlier times JavaScript was used only in browsers and some developers even referred to it as a toy language.
But now the time has changed after the involvement of tech giants like Google and Facebook many developments has taken place. With passing time many huge communities have grown that support JavaScript and provide help in bug fixing etc.
Now you can build complete web and mobile apps using JavaScript. Even real-time chat apps, video calling apps, and games are built using it.
Where does JavaScript code run?
Originally Javascript was designed to be used in browsers, So all the browsers have what we called the JavaScript engine that can execute the JavaScript code.
For example, Firefox has SpiderMonkey and Chrome has V8 as their JavaScript engine.
In 2009, an engineer Ryan Dhal took the open-source JavaScript code in Chrome and embedded it inside a C++ program, and called it Node
This Node or C++ program includes Google Chrome’s V8 JavaScript engine and with this, we can use the JavaScript code outside the browser. Now we can develop the backend of our web and mobile apps using the JS code.
In brief JavaScript code can be run inside of a browser or in Node browsers and Node provide a runtime environment for our JavaScript code.
JavaScript in action
In order to write Javascript code, you need a code editor and there are various code editors available on the internet like Visual Studio, Sublime Text, Atom, etc.
You can also use our free code editor to write, save, run your code easily.
Let,s start with creating an index.html file. You don’t need to be a pro in HTML for this.
Here is the code you need in it.
<span><!DOCTYPE html></span>
<span><html></span>
<span><span> </span><head></span>
<span><span> </span><span> </span><title></span><span>Page Title</span><span></title></span>
<span><span> </span></head></span>
<span><span> </span><body></span>
<span><span> </span><h1></span>Hello World<span></h1></span>
<span><span> </span></body></span>
<span></html></span>
You can learn more about HTML from our tutorials.
Let’s start writing our first JavaScript code. In order to do that we need a <script> element, we can add it in <head> or <body> section.
The best practice is to put the <script> element at the end of the <body> section after all the existing elements in our example we have only <h1> element.
<span><!DOCTYPE html></span>
<span><html></span>
<span><span> </span><head></span>
<span><span> </span><span> </span><title></span><span>Page Title</span><span></title></span>
<span><span> </span></head></span>
<span><span> </span><body></span>
<span><span> </span><h1></span>Hello World<span></h1></span>
<span><span> </span><script></span>
<span>// Add all the JavaScript code here...</span>
<span><span> </span></script></span>
<span><span> </span></body></span>
<span></html></span>
The reason why we said to add the script at the end of the body tag is that the browser parses this file from top to bottom, so if you put this script element in the head section you might have a lot of JavaScript code there so your browser may get busy parsing and executing that JavaScript code and it won’t be able to render the content of the page.
So this will create a bad user experience and your user looks at your web page it’s white or blank while your browser is busy parsing and executing your JavaScript code.
Now all our JavaScript code will be written in th
at script element. Now put the below code in it.
console.log('Hello World');
Now what we have written here is a statement.
A Statement is a piece of code that expresses an action to be carried out. All the statements are required to be terminated by a semicolon.
And in our example, we want to log a message on the console.
What we have written in the single quotes is a string
A String is a sequence of characters.
In JavaScript, we can add comments by using two forward slashes.
Open this index.html file in the browser and right-click, go to inspect, or simply use the shortcut key Cmd+I on Mac and Ctrl+Alt+I on Windows and check out the console tab displaying the Hello World message.
Another method of including JavaScript in our index.html file is creating a separate JavaScript file with an extention .js and then linking it to our index.html file as in below example.
<span><script <span>src=<span>'script.js'</span></span> ></script></span>
Here src is the tag attribute and the text inside the single quotes is the value of this tag, and it is the address where the script.js file is located and in our example it is in the same folder.