Introduction to Javascript

Javascript is designed to add interactivity to web pages.

Dropdowns, Image Carousels, NewsLetter Popups, Accordions, Interactive Maps...

Uff...The list is exhaustive.

These are only made possible with the help of Javascript.

Before Javascript, web pages are purely dull.

The purpose of HTML is to add formatting and meaning to the page content through its elements, such as heading tags, paragraph tags, etc.

<h2>Festival offer 🪔</h2>
<p>Use the coupon code <strong>DHAMAKA20</strong> to get 20% discount on your shopping cart</p>

Nothing more.

CSS lets you style that content by targeting the HTML elements.

.modal-content h2{
    font-size:24px;
}
.modal-content strong{
    color: #0E36E4;
}
.modal-content p{
    margin-top:15px;
    font-size:18px;
}

Nothing more.

So, without Javascript, the only interactivity that a web page can offer is clicking on the links to help you move around the site.

In other words, we can not imagine today's rich web browsing experience without Javascript.

Simply put, only when we add a bit of Javascript into the mix of some HTML and CSS will our web pages come alive.

Now, this begs us the question...

What is Javascript?

Javascript is a programming language that helps us provide instructions to the web browser.

The web browser then understands those instructions and executes those instructions.

Finally, the result of executing those instructions is the interactivity that we experience when we are interacting with a particular web page.

Why is it called Javascript? Is it related to Java by any chance?

There is a big story behind the name. I am not going into that.

But whenever we are programming, we write instructions for the computer to perform, right?

Usually, we will write a set of instructions to achieve a particular task. Not just a single instruction.

This set of instructions can be called a program.

But in Javascript, a program can be called a script.

This way, it justifies the name Javascript.

Having said that, Javascript is not the same as Java.

Java is a programming language too, but it has an entirely different purpose, and it is used for building full-fledged software applications that might or might not run inside web browsers.

If you are curious, read out the history of Javascript here:

https://medium.com/@_benaston/lesson-1a-the-history-of-javascript-8c1ce3bffb17

How do Javascript instructions (code) get executed?

Javascript usually runs in the browser.

Whenever you write a Javascript program, you'll include that code inside an HTML document.

A Javascript program can be written directly inside the HTML Document using the <script> tag or can be written inside a separate file that ends with .js extension.

Either way, as soon as the Web Browser comes across the Javascript program inside the HTML document, it will execute it.

But how does a Web Browser execute a Javascript program?

This is where a Javascript engine comes in.

A Web Browser is a complex piece of software and every web browser ships with something called a Javascript Engine.

What is a Javascript Engine?

The only responsibility of the Javascript engine is to help the browser execute the Javascript code.

Also, not all browsers use the same Javascript engine.

• Google Chrome uses the V8 Javascript Engine.
• Similarly, Firefox uses the SpiderMoney Javascript Engine.
• Chakra is the Javascript engine of Microsoft Edge.

Having said that, A Javascript engine can live separately from a web browser.

These days, Javascript code can run outside the web browser.

The reason behind this is that a Javascript engine can run inside an operating system on its own.

This means that Javascript can run outside the browser too and this made Node.js and full-stack Javascript a reality.

Node.js

Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

Node.jsNode.js

Node.js helps us create web servers by writing pure Javascript code with the help of Chrome's V8 Javascript engine.

It helps you operate at an operating system level by letting you create files and other OS-level operations.

It helps create API-based services purely written in Javascript and much more.

This tells us that Javascript is not just a Front-end technology anymore.

You can write a full-fledged, full-stack application purely with Javascript.

Anyway, now that we are clear about what Javascript is all about, let's see what Javascript can and can not do inside the browser.

And we will do that in the next lesson.