What is JavaScript and what kind of software is the programming language used for?

JavaScript is one of the most common programming languages used in contemporary web development and used on most websites and applications with dynamic elements that update without the user reloading their browser. In this blog, we’ll take a closer look at:

• The technical qualities that have established JavaScript as the default choice for dynamic web-based software.
• The evolution of the JavaScript ecosystem of frameworks, libraries and runtime environments.
• The kind of software and web development projects is it best suited to, and:
• JavaScript’s weaknesses.

Static to dynamic web – the need for JavaScript

Static websites can look good and be great for serving content like company information, blog posts, etc. But the content is static, always the same, unlike a social media feed that constantly updates.

For years, all websites were static.

Static pages are created using HTML, which defines the basic content and structure of the site. HTML is used for headings, frames, the embedding of images, inserting tables and so on. Customized Style Sheets (CSS) tell the browser how to render the HTML content. For example, the colour theme for pages. A reasonable working knowledge of advanced HTML and CSS is all you need to develop static web pages. Or you can use a framework like WordPress or even page builders to completely avoid having to code yourself.

But if you want to build an interactive website whose content updates dynamically in real-time, you’ll need to move beyond just HTML and CSS. Most often, that will mean JavaScript.

Many contemporary websites offer dynamic functionalities like selecting an item for download, filling a form, viewing demos or playing games, right there on the website. Websites also often need to ‘remember’ user actions and be able to display changes in real-time. Updates must happen in real-time, without the need to refresh the browser.

Front-end website developers must focus on the site layout, usability, responsiveness, and dynamic launch of animations or videos. To design such live websites or web-based applications, the content of your site (text/images) is stored on a database or content management system. When the information is modified or altered within the database, the website reflects this change.

For real-time updates in websites or web-based applications, the programming language of choice is JavaScript. The use of JavaScript is ideal for tasks like validation of submitted forms (a notification the submission has been successful) or dynamic updates to sections such as “History of Previous Purchases” or “You Might Also Like” in e-commerce sites.

Back-end website developers or full-stack developers use JavaScript Node.js at the back end (server-side) to handle updates from the front end and build scalable network applications that can process many simultaneous requests.

To understand JavaScript, you need to know the concepts of dynamic programming languages. In dynamic programming languages, operations are done at run-time instead of at compile-time. For example, in JavaScript, you can change the type of a variable, add methods to an object, or add new properties while the program is running.

Now we know why we use JavaScript, let’s look at some top-level details and usage of JavaScript.

What is JavaScript?

JavaScript is best understood as a scripting language for designing web pages and controlling web page behaviour.

JavaScript is a lightweight interpreted programming language. Let’s break this statement apart.

The “Java” in JavaScript is not related to the Java Programming language. The term ‘script’ also doesn’t imply scripting anymore in today’s JavaScript version. Look up Wikipedia for a brief story about the origin of the term JavaScript.

Lightweight

JS does not have many language constructs. It is easy to implement with simple syntax and features. You do have functions, loops, statements, and declarations with which you can do a lot. In JavaScript, everything is considered an object. Declare a variable and access many predefined methods immediately. With JavaScript, developers don’t really need to know what happens under the hood, unless they have to do performance optimization or use asynchronous solutions.

Interpreted

JavaScript is an interpreted language. It is not a compiled language. For example, a C++ program or a Java program has to be compiled before it is executed. In JavaScript code, an interpreter in the browser reads over the code, interprets each line, and runs it. Today, JS uses just-in-time compilation.

Interpreted languages are flexible in general, and often have features like dynamic typing and small program size. The code is platform-independent since interpreters execute the source program code themselves.

Finally, despite the “script” in JavaScript, it is really more than a scripting language. It qualifies as a programming language.

When and where is JavaScript Used?

JavaScript is mainly used to develop web-based applications and interactive websites.

Using JavaScript, some of the interactive features you can add to web pages are:

• Show/Hide buttons to display or hide information
• Trigger a change in colour of a button, on hover over a button
• Carousel of images to slide through
• Animations
• Drop-down menus
• Zoom options for an image
• Count-down timers to a page
• Streaming audio and video on the page

Various JavaScript frameworks are available to help develop and building web and mobile apps using JS.

JS Frameworks for the Front-end and Back-end

The availability of JavaScript frameworks for the front-end and back-end makes it easier to design and code highly dynamic and interactive web applications. A JavaScript framework is written in JavaScript and provides functions that programmers can use in their code with ease.

JavaScript Frameworks are adaptable and help in the design of websites and are a preferred method used by website developers. JavaScript frameworks are behind most of the awesome web-based software and websites – including many of the websites you use every day. A framework improves the developer experience. Without a framework, you will end up writing a copious amount of code just to add simple tasks.

A JavaScript framework also helps you write user interfaces declaratively. This means, you can write code to describe how the page or section should look, and the framework makes it happen in the Document Object Model (DOM) behind the scenes. Using the framework, it is easy to create, update, modify UI elements like tables, lists, and so on. JavaScript frameworks are available both for the client-side, front-end as well as back-end or server-side.

Front-end JS Frameworks

Some popular front-end JS Frameworks are:

Angular: An open-source component-based web application framework. Angular uses declarative HTML templates. The compiler within the framework translates the templates to optimized JavaScript instructions.

React: A library of UI components, React is technically not a framework. You use React in combination with other libraries to create applications. React and ReactDOM enable you to create web applications. React and ReactDOM are often used together, and the term React is now generally referred to as a JavaScript framework.

Vue: In a similar way to AngularJS, Vue extends HTML with some of its own code. Vue mainly relies on standard JavaScript apart from HTML extensions.

Back-end JS Framework

Node.js is a JavaScript-based runtime environment built on Google Chrome’s JavaScript V8 engine as a backend framework.  It allows web developers to code both the front-end and back-end portions of web applications.

Node.js is different from the JS frameworks available for the front-end environment. Catering to back-end requirements, it has unique APIs for HTTP requests, file systems and other server-side features for which frontend frameworks provide limited support.

Well-known apps and software built on JS

Some popular examples of websites that use node.js include Paypal, LinkedIn, Netflix, and Uber!

Examples of apps based on JavaScript might be a tip calculator for restaurants, interactive maps on a web page, online clock, to-do lists, quizzes, navigation toggles and much more. Almost every dynamic website you visit uses JS for its front end.

Simple JavaScript Code

 JavaScript can be embedded in HTML code within the <script> and </script> tags.

As shown in the example below, page-level JavaScript code can be inserted within the <head> element.

<meta charset="UTF-8">
<title>My First JavaScript Code</title>
<script type="text/javascript">
  alert("Let’s Learn JavaScript… just the basics!");
</script>

To try out the above code:

1.  Open a notepad file or a HTML Editor you use.
2. Copy and Paste the above code in the file.
3. Save the file with a .html extension (that is, as an HTML file).
4. Open the HTML file in a browser.
5. You should be able to see the alert as shown here:

What is DOM?

To understand and use JS, you must understand Document Object Models (DOMs). Let’s circle back a bit.

A web page is a document. A web page can be displayed in a browser or viewed as HTML source. Either way, it is the same document in both views – browser view or source code view. The Document Object Model (DOM) represents this same document, so it can be worked upon.

The DOM is thus a representation of the web page using various DOM objects. Each element in the HTML like the heading, para, image, table, and so on are represented as objects in the DOM.  You can access and update DOM objects directly, using a scripting language such as JavaScript. For effective web programming, you need to understand DOMs, to be able to apply your JS code and get the results you want.

Create a User Interface with Simple JavaScript and DOM

You can create a simple user interface on the web using HTML and CSS, as we discussed earlier. But, if you would like to make the application interactive, you must use JavaScript to update the DOM (Document Object Model). You must ‘listen’ to user actions or ‘events’ and make necessary updates to the user interface.

The code snippet below shows how to create a <div> element using raw JavaScript.

<body>
<div id="root"></div>
<script type="text/javascript">
const rootElement = document.getElementById('root')
const element = document.createElement('div')
element.textContent = 'Created a div element!'
element.className = 'container'
rootElement.appendChild(element)
</script>
</body>

What we’ve learnt about JavaScript

Let’s summarize what we’ve learnt about JavaScript

We covered the basics of modern website design requirements, and the need to incorporate dynamic and real-time changes to the web application or page. We learnt the use of JavaScript to achieve this goal and took a look at the basics of how its code is formed and dynamic websites and software created.