Empower

Welcome to the May 2023 issue of Empower, the periodic newsletter of the IsDB-BISEW IT Scholarship Programme. This edition includes the following topics of note:

• How JavaScript Works Inside the Browser

• A Dream Come True – Braving the Odds in the Job Market

How JavaScript Works Inside the Browser

Have you ever wondered about the magic behind the scenes when web browsers turn lines of JavaScript code into interactive experiences? If you’ve ever been curious about how JavaScript brings webpages to life, you’ve come to the right place. In this article, we’ll take a deep dive into the inner workings of JavaScript execution within a browser and explore the fascinating process that enables webpages to seamlessly run code and deliver captivating user experiences.

Unlike traditional programming languages that are compiled into machine code before execution, JavaScript takes a slightly different route. It is an interpreted language, meaning that it is not compiled but executed directly by the browser. But what does this really mean and how does it all happen?

When a web browser loads a webpage containing JavaScript, it doesn’t immediately execute the code. Instead, the browser’s JavaScript engine swings into action, performing a series of steps to ensure accurate and efficient execution. We’ll uncover the intricacies of this process and shed light on the role of JavaScript engines, such as V8, SpiderMonkey, and JavaScriptCore, which are responsible for interpreting and executing JavaScript code in different browsers.

We’ll start by exploring the two-step process of parsing and execution. During parsing, the JavaScript engine breaks down the code into individual components, such as variables, functions, and statements, while detecting any syntax errors. Once the code is parsed, the engine proceeds to execute it line by line, leveraging JavaScript’s single-threaded nature and asynchronous capabilities.

But execution is just the beginning. To optimize JavaScript’s performance, modern JavaScript engines employ various techniques, such as Just-In-Time (JIT) compilation. We’ll uncover how JIT compilation transforms frequently executed code into more efficient formats, improving execution speed and responsiveness.

As we journey further, we’ll delve into the dynamic relationship between JavaScript and the Document Object Model (DOM), which enables JavaScript to interact with and manipulate webpage elements. We’ll uncover the power of event-driven programming, allowing JavaScript to respond to user actions like clicks and keystrokes, and discuss how frameworks and libraries further enhance JavaScript’s capabilities.

So, if you’re ready to demystify the inner workings of JavaScript execution within a browser, join us on this exciting adventure. Together, we’ll unveil the fascinating mechanisms that enable webpages to seamlessly run JavaScript and create engaging user experiences. Let’s dive in and uncover the true magic behind JavaScript’s role in web development.

JavaScript Tokenization, Parsing, and Interpretation in the Browser

When a web browser encounters JavaScript code embedded within a webpage, a fascinating journey begins. The browser must transform this human-readable code into a format that the computer can understand and execute. To accomplish this, a series of steps are undertaken, involving tokenization, parsing, and interpretation.

Tokenization

The process begins with tokenization, where the JavaScript code is broken down into individual units called tokens. Tokens represent the smallest meaningful elements in the code, such as keywords, variables, operators, and literals. These tokens serve as the building blocks for the subsequent stages of the execution process.

For instance, consider the following JavaScript statement:

let greeting = "Hello, world!";

During tokenization, this statement would be divided into the following tokens:

Each token carries essential information and contributes to the overall structure and meaning of the code.

Parsing

After tokenization, the browser’s JavaScript engine proceeds to parse the tokenized code. Parsing involves analysing the structure and grammar of the code, ensuring that it adheres to the rules of the JavaScript language. This step verifies that the code is free of syntax errors and constructs a parse tree or abstract syntax tree (AST).

The parse tree represents the hierarchical structure of the code, with each node corresponding to a specific language construct. This tree-like structure enables the JavaScript engine to understand the relationships between different elements in the code.

Using the previous example, the parse tree for the statement let greeting = "Hello, world!"; would illustrate the assignment of the string "Hello, world!" to the variable greeting. It captures the structure and relationships between the let keyword, the variable identifier, the assignment operator, and the string literal.

Interpretation

Once the code has been successfully parsed and a parse tree is constructed, the JavaScript engine proceeds to interpret the code. Interpretation involves executing the code line by line, following the order specified in the parse tree.

During interpretation, the JavaScript engine evaluates each statement and performs the necessary operations. It assigns values to variables, performs mathematical calculations, manipulates data, and interacts with the Document Object Model (DOM) to modify the webpage’s content dynamically.

Optimizations for Faster Execution

To enhance JavaScript’s performance, modern JavaScript engines employ various optimization techniques. One notable optimization is Just-In-Time (JIT) compilation. When the engine detects portions of code that are frequently executed, it may choose to compile them into a more efficient format, such as bytecode or machine code.

JIT compilation optimizes the execution speed by converting the frequently executed code segments into a form that can be executed more swiftly. This approach improves the overall performance of JavaScript and enables faster and more responsive web applications.

Additionally, JavaScript engines employ other optimization strategies, such as inline caching, hidden classes, and dynamic profiling. These techniques aim to reduce the overhead of JavaScript execution, eliminate redundant operations, and make the code run as efficiently as possible.

By tokenizing, parsing, and interpreting JavaScript code, browsers enable webpages to run dynamic and interactive features seamlessly. This process, coupled with optimization techniques, empowers developers to create performant and responsive web applications that deliver exceptional user experiences.

In the upcoming sections, we’ll explore how the browser’s JavaScript engine interacts with the Document Object Model (DOM) to manipulate webpage elements dynamically. We’ll also delve into the concepts of event handling, asynchronous programming, and the role of JavaScript frameworks and libraries.

So, let’s dive deeper into the inner workings of JavaScript execution and discover how it brings webpages to life!

Interacting with the Document Object Model (DOM)

JavaScript’s true power lies in its ability to interact with the Document Object Model (DOM) — the representation of a webpage’s structure and content. By accessing and manipulating the DOM, JavaScript can dynamically update and modify the elements, styles, and behaviour of a webpage. Let’s explore how this interaction takes place.

Understanding the Document Object Model (DOM)

The DOM is a tree-like structure that represents the HTML elements of a webpage. It provides a programming interface for JavaScript to interact with and manipulate these elements. When a webpage is loaded in a browser, the browser creates a DOM representation based on the HTML markup.

The DOM organizes the elements in a hierarchical manner, with the <html> tag as the root element. Each HTML element becomes a node in the DOM tree, with child nodes representing the nested elements. This hierarchical structure enables JavaScript to traverse, locate, and modify specific elements within the webpage.

Accessing and Modifying DOM Elements

JavaScript provides several methods and properties to access and manipulate DOM elements. For example, the document.getElementById() method allows you to retrieve an element using its unique id attribute. Similarly, the document.getElementsByClassName() and document.getElementsByTagName() methods let you select elements based on their class or tag name, respectively.

Once you have a reference to a DOM element, JavaScript enables you to modify its content, attributes, and styles. You can change the text within an element using the textContent or innerHTML properties, modify attributes like src or href, and dynamically apply CSS styles by manipulating the style property.

For instance, let’s say you have a <div> element with the ID of "myDiv" on your webpage. Using JavaScript, you can access and modify it as follows:

let myElement = document.getElementById("myDiv");
myElement.textContent = "Updated content";
myElement.style.backgroundColor = "blue";

With these simple JavaScript operations, you can dynamically change the content and appearance of webpage elements, creating interactive and engaging user experiences.

Event Handling and User Interaction

JavaScript enables webpages to respond to user actions through event handling. Events can be triggered by various user interactions, such as clicks, key presses, or mouse movements. By attaching event listeners to specific elements, you can execute JavaScript code in response to these events.

For example, you can add a click event listener to a button element to perform a specific action when it’s clicked:

let myButton = document.getElementById("myButton");
myButton.addEventListener("click", function() {
  // Code to execute when the button is clicked
});

With event handling, JavaScript empowers webpages to be interactive, allowing users to trigger actions and dynamically update the content and behaviour of the page.

In the next section, we’ll delve into the concept of asynchronous programming in JavaScript, where tasks can be performed concurrently without blocking the execution. We’ll explore callbacks, promises, and the modern async/await syntax, which enhances JavaScript’s ability to handle asynchronous operations efficiently.

Asynchronous Programming in JavaScript: Callbacks, Promises, and Async/Await

JavaScript is well-known for its ability to handle asynchronous operations efficiently. Asynchronous programming allows tasks to run concurrently, enabling web applications to remain responsive and perform tasks such as making API requests, handling user interactions, and processing large amounts of data without blocking the execution. In this section, we’ll explore the different approaches to asynchronous programming in JavaScript: callbacks, promises, and the modern async/await syntax.

Callbacks

Traditionally, callbacks have been a widely used method for handling asynchronous operations in JavaScript. A callback is a function that is passed as an argument to another function and gets executed once the asynchronous task is completed.

For example, consider an asynchronous function getData() that fetches data from an API. You can use a callback to handle the response:

function getData(callback) {
  // Asynchronous task, e.g., making an API request
  // Once the task is complete, invoke the callback
  callback(data);
}

function handleData(data) {
  // Process the retrieved data here
}

getData(handleData);

In this example, the handleData() function serves as the callback, and it gets invoked with the retrieved data when the asynchronous task completes.

Promises

Promises provide a more structured and intuitive way to handle asynchronous operations. A promise represents the eventual completion or failure of an asynchronous task and allows you to attach callbacks for handling the outcome.

With promises, you can chain multiple asynchronous operations together, making the code more readable and avoiding the “callback hell” problem. Promises have built-in methods like then() and catch() to handle successful outcomes and errors, respectively.

Using promises, the previous example can be rewritten as follows:

function getData() {
  return new Promise((resolve, reject) => {
    // Asynchronous task, e.g., making an API request
    // Resolve the promise with the retrieved data
    // or reject the promise with an error
  });
}

getData()
  .then(data => {
    // Process the retrieved data here
  })
  .catch(error => {
    // Handle errors here
  });

The getData() function now returns a promise, and you can use the then() method to handle the resolved promise (successful outcome) and the catch() method to handle any rejected promises (errors).

Async/Await

The async/await syntax introduced in ES2017 offers a more concise and synchronous-like way to write asynchronous code. By using the async keyword before a function declaration, you can define an asynchronous function that can pause execution using the await keyword until a promise is resolved.

Here’s an example of using async/await to handle asynchronous operations:

async function getData() {
  try {
    // Asynchronous task, e.g., making an API request
    constdata = await fetch(url);
    // Process the retrieved data here
  } catch (error) {
    // Handle errors here
  }
}

getData();

In this example, the await keyword is used to pause the execution of the getData() function until the promise returned by fetch() resolves. This allows you to write asynchronous code that resembles synchronous code, making it more readable and easier to follow.

Asynchronous programming is a fundamental aspect of JavaScript, enabling developers to build responsive and efficient web applications. By understanding and leveraging callbacks, promises, and async/await, you can handle complex asynchronous tasks and ensure smooth execution of your code.

In the next section, we’ll explore the role of JavaScript frameworks and libraries that provide additional tools, utilities, and abstractions to streamline web development. We’ll discuss popular frameworks such as React, Angular, and Vue.js, and how they facilitate building robust and scalable web applications.

The Significance of JavaScript in Modern Web Development

JavaScript has become an indispensable part of modern web development, playing a pivotal role in shaping the dynamic and interactive experiences we encounter on the web. In this final section, we’ll recap the significance of JavaScript and its contributions to the ever-evolving landscape of web development.

Continuous Growth and Adaptability

JavaScript has witnessed remarkable growth and continuous evolution. It keeps up with the demands of modern web development, embracing new features and specifications through regular updates and advancements. The JavaScript community, consisting of developers, organizations, and open-source contributors, actively contributes to its growth, ensuring its relevance and adaptability in the ever-changing web development landscape.

As we conclude our exploration of JavaScript, it’s evident that JavaScript is a cornerstone of web development, enabling developers to create dynamic, interactive, and feature-rich web applications. Its versatility, widespread adoption, and robust ecosystem make it a go-to language for front-end and back-end development alike.

Whether you’re building a small personal website or a complex enterprise application, JavaScript offers the tools and capabilities to bring your ideas to life. So, embrace JavaScript’s power, continue to learn, and leverage its vast ecosystem to create impactful web experiences that delight users and drive the web forward.

Happy coding and may your JavaScript-powered web applications flourish!

The Road to a Career in Networking – Mahtab’s Story

Md. Mahtab Alam

Specialist, ERP System Management, Robi Axiata Limited

ID: 1245138

Course: Networking Technologies

Round-38

A casual glance outside from the window of a running bus proved momentous for Md. Mahtab Alam. Mahtab was studying mathematics (Honours) at Titumir College and during his bus ride to his college, a large banner on the IDB Bhaban complex used to catch his attention. The banner displayed information about the IsDB-BISEW IT Scholarship Programme. This information stuck in his mind.

Mahtab went on to complete his bachelor’s degree. He had always nurtured an interest towards the exciting field of information technology and the career opportunities it offered. Earlier, when applying for admission for a bachelor’s degree programme, he tried his luck in getting admission into computer science but without success. Financial hardship did not allow him to get admitted to a private university.

Having completed his bachelor’s in mathematics he was ready to switch his career and education track to IT. His seniors in the college had given him some additional bits of information about this scholarship programme. Mahtab realized that this was his opportunity to switch to a career in IT. Immediately after finishing his master’s degree, he applied for the IT Scholarship Programme and passed the required aptitude test and the interview. Mahtab was selected for the scholarship in Round-38 and was assigned the course Networking Technologies.

Training in the IsDB-BISEW IT Scholarship Programme was tough but Mahtab enjoyed the challenge. He successfully completed the course and also became a Microsoft Certified Solution Associate (MCSA). After completing his training, he did a paid internship at Metafour Asia for six months where he picked up useful skills in cloud technologies, e.g., cloud infrastructure and Docker/Kubernetes.

Mahtab was eventually selected as an IT Specialist at Robi Axiata Limited in 2022. His current responsibilities include monitoring and managing the SAP BASIS ERP platform. He also administers the Linux servers at Robi. Mahtab is highly satisfied with his job and is paid a handsome salary. Mahtab feels that the IsDB-BISEW IT Scholarship Programme was instrumental in guiding him from the field of mathematics to the exciting and rewarding world of information technology.

Copyright @ 2023 IsDB-BISEW, All rights reserved.