What is JavaScript and how to display data using JavaScript?

What is JavaScript?

JavaScript, aka JS, is a programming language for creating interactive and dynamic web pages. Using JavaScript, developers can update and change both HTML and CSS. JS code can run in the browser or on the server via Node.js. Its file extension is “.js”.

 

JavaScript is a lightweight, high-level, interpreted/scripting, and single-threaded programming language. That means, it has simple syntax and features, is easy to implement, and has a small memory footprint, so that programmers can learn it easily and quickly. It improves human understanding and usage. JavaScript is interpreted at runtime by an interpreter. This interpreter embedded into the browser reads over the JS code, translates the code, and runs it line-by-line. Modern browsers use a Just-In-Time (JIT) compilation process, which compiles JavaScript code to executable bytecode just as it is about to run. Finally, only one line of code is performed at a time.

JavaScript is case-sensitive. The uppercase and lowercase letters are treated as two separate values in JavaScript. For example, a function named “myFunc” and a function named “myfunc” are two different functions.

JavaScript is also open source (software with source code that is free to the user for use, and the user can modify from its original source code) and cross-platform (a software or program that is designed to work in various operating systems such as Linux, Windows, iOS, MacOS, or Android).

 

How JavaScript works:

The JavaScript engine converts JavaScript code (code is the text that makes up programs) into machine code that can be executed by the computer, while the JavaScript runtime is the environment in which the code is executed, such as web browser or Node.js.

When JavaScript executes within a web browser it is operating within the browser’s runtime environment and is called Client-side JavaScript. On the other hand, when JavaScript executes outside the browser it is operating within a server-side runtime environment provided by Node.js and is called Server-side JavaScript.

All web browsers include the JavaScript engine by default. Major browser engines are as follows:

V8 – used in Google Chrome

SpiderMonkey – used in Mozilla Firefox

JavaScriptCore – used in Safari

Chakra – used in Microsoft Edge

The JavaScript engine is a program that is responsible for interpreting and executing JavaScript code. Here are some steps to complete the entire process:

Step1. The engine uses the parser to check JS code (before starting to execute it).

Step2. The parser reads the code line by line and determines whether the syntax is correct.

Step3.  a. If there is an error, the parser will stop operations and send a syntax error.

         b. If there is no error, the parser creates/generates an Abstract Syntax Tree (AST).

Step4. The generated AST then goes to the Interpreter (such as Ignition in Google) which creates machine codes.

Step5. This machine code is executed using Call Stack.

How to display JavaScript Output:

JavaScript allows users to display data in various ways. Users can also modify the HTML elements and/or CSS even after the webpage is loaded completely or after an event occurs. 

console.log() method will display the output in the console section of the browser. On the other hand, alert() method, document.write() method, and innerHTML property display the output on a web page.  

There are some ways to display JavaScript output:

    1.     Output to Browser Console

The console.log() method gives information about various errors and warnings related to the webpage. It is commonly used for debugging JavaScript code.

    2.     Output in Dialog Boxes

The alert() method is used to display any message or data to the user with the OK button below the message.

    3.     Output to the Browser Window

The document.write() method shows the output within the document’s body. It is used for testing purposes.

    4.     Output Inside an HTML Element   

The innerHTML property is used to write or insert output inside an HTML element. Before writing the output we need to select the element using a method such as getElemnetById() or querySelector(). This property helps to change elements and/or their style even after the webpage gets loaded completely.

In the following example, you see all the ways of JS output:

How to Optimize JavaScript Code for Performance:

Nowadays JavaScript is the most popular programming language for web development. Over 90% of all websites use JavaScript. Therefore, developers must be aware of optimized JavaScript code to improve JS performance and execution time when creating their webpage or app.

Here are 8 ways to effectively improve the code to achieve better performance: 

1. Avoid Global Variables – global variables reduce the modularity, flexibility, and scalability of the code. 

2. Minify and Compress code – using both techniques, developers can save space, reduce page loading times, and reduce bandwidth consumption of the website. 

3. Reduce activity in loops – each statement in a loop is executed during each iteration of the loop. The loop runs faster if statements or assignments used in the loop can be placed outside the loop. 

4. Reduce DOM access – access to the HTML DOM is very slow. If developers are going to access a DOM element several times, save it as a local variable. 

5. Delay JavaScript loading – add JS scripts at the bottom of the page body and let the browser load the page first. After loading the page fully, the browser starts loading JS scripts immediately. So the page will be accessible when the interpreter starts executing the JS code at the bottom.

6. Use object and array literals instead of constructors – literals are shorter and easy to read and write, whereas constructors can lead to unexpected results, which can create confusion.

7. Avoid unnecessary variables and function calls – more variables and function calls in the code mean more lines of code and more names and values that need to be kept in mind while running through the code, which may lead to performance problems.

8. Use caching and memoization – cache stores the results for later use, and memoization is a way to cache a return value of a function based on input. Using both techniques,  developers can reduce execution time and increase CPU performance.

 

How JavaScript is used within a webpage:

JavaScript can be used in HTML in different ways:

Inline JavaScript: JavaScript code is placed within certain HTML.

Internal JavaScript: The JS code is inserted between <script> and </script> tags within HTML. <script> sections can be placed in the <head> and/or in the <body> section of an HTML document.

In <head> tag:

In <body> tag:

External JavaScript: Scripts can also be placed in external .js files. To execute an external .js file from the webpage, use the <script> tag with a src attribute pointing to the script file. It is a good practice to add a script file by the end of the <body> tag.  

JavaScript Libraries and Frameworks:

JavaScript Libraries provide reusable functionality for the code and allow developers to have control over their application design and development. 

Examples: React, jQuery, D3.js.

JavaScript Frameworks provide ready-to-use tools, templates, and policies for fast application development. However, they don’t provide complete control over the application. 

Examples: Next, Vue, Angular.

For instance, you want to build a house and go to a company that builds houses. The company has two options:

   a.     The company allows you to choose different things such as building architecture, interior design, color, and parking places.

   b.     The company has its own design houses and you have to pick one of them.    

It’s up to you which option is best for your dream house.

The first option (a) is for the JS library and another (b) is for the JS framework.