Many times you would like to place a button on your webpage to print the content of that web page via an actual printer. JavaScript helps you to implement this functionality using the print function of window object.
The JavaScript print function window.print() prints the current web page when executed. You can call this function directly using the onclick event as shown in the following example.
Example
Try the following example.
<html><head><script type ="text/javascript"><!--//--></script></head><body><form><input type ="button" value ="Print" onclick ="window.print()"/></form></body><html>
Although it serves the purpose of getting a printout, it is not a recommended way. A printer friendly page is really just a page with text, no images, graphics, or advertising.
You can make a page printer friendly in the following ways −
Make a copy of the page and leave out unwanted text and graphics, then link to that printer friendly page from the original. Check Example.
If you do not want to keep an extra copy of a page, then you can mark your printable text using proper comments like <!– PRINT STARTS HERE –>….. <!– PRINT ENDS HERE –> and then you can use PERL or any other script in the background to purge printable text and display for final printing. We at Tutorialspoint use this method to provide print facility to our site visitors.
Example
Create a button with an onclick event that is attached with the printpage() method, & it should be triggered when we want to print the page.
When the user clicks the button then printpage() method (in the script tag) will be called, which may contains some code that helps to print the page.
<html><head><title>Print Page</title><script>functionprintpage(){
window.print();}</script></head><body><h2>This is a sample page to print</h2><button onclick="printpage()">Print Page</button></body></html>
When the user clicks the button, the browser’s print dialog box will open, allowing them to print your HTML document as displayed on their current window.
Here are some additional things to keep in mind when using JavaScript to print a page:
The print() method will only print the content of the current window. If you want to print multiple pages, you will need to call the print() method for each page.
The print() method will not print any content that is hidden from view. For example, if you have an element with the style property set to “display: none”, it will not be printed.
The print() method will not print any content that is loaded dynamically after the page has loaded. For example, if you use JavaScript to load an image from a server, the image will not be printed.
If you need to print more complex content, such as a table or a form, you may need to use a different method, such as generating a PDF file or using a third-party printing library.
How to Print a Page?
If you dont find the above facilities on a web page, then you can use the browser’s standard toolbar to get print the web page. Follow the link as follows.
JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one.
Alert Dialog Box
An alert dialog box is mostly used to give a warning message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message.
Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button “OK” to select and proceed.
Example
<html><head><script type ="text/javascript">functionWarn(){alert("This is a warning message!");
document.write("This is a warning message!");}</script></head><body><p>Click the following button to see the result:</p><form><input type ="button" value ="Click Me" onclick ="Warn();"/></form></body></html>
Confirmation Dialog Box
A confirmation dialog box is mostly used to take user’s consent on any option. It displays a dialog box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows.
Example
<html><head><script type ="text/javascript">functiongetConfirmation(){var retVal =confirm("Do you want to continue ?");if( retVal ==true){
document.write("User wants to continue!");returntrue;}else{
document.write("User does not want to continue!");returnfalse;}}</script></head><body><p>Click the following button to see the result:</p><form><input type ="button" value ="Click Me" onclick ="getConfirmation();"/></form></body></html>
Prompt Dialog Box
The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK.
This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box.
This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.
Example
The following example shows how to use a prompt dialog box −
<html><head><script type ="text/javascript">functiongetValue(){var retVal =prompt("Enter your name : ","your name here");
document.write("You have entered : "+ retVal);}</script></head><body><p>Click the following button to see the result:</p><form><input type ="button" value ="Click Me" onclick ="getValue();"/></form></body></html>
You might have encountered a situation where you clicked a URL to reach a page X but internally you were directed to another page Y. It happens due to page redirection. This concept is different from JavaScript Page Refresh.
There could be various reasons why you would like to redirect a user from the original page. We are listing down a few of the reasons −
You did not like the name of your domain and you are moving to a new one. In such a scenario, you may want to direct all your visitors to the new site. Here you can maintain your old domain but put a single page with a page redirection such that all your old domain visitors can come to your new domain.
You have built-up various pages based on browser versions or their names or may be based on different countries, then instead of using your server-side page redirection, you can use client-side page redirection to land your users on the appropriate page.
The Search Engines may have already indexed your pages. But while moving to another domain, you would not like to lose your visitors coming through search engines. So you can use client-side page redirection. But keep in mind this should not be done to fool the search engine, it could lead your site to get banned.
How Page Re-direction Works?
The implementations of Page-Redirection are as follows.
Example 1
It is quite simple to do a page redirect using JavaScript at client side. To redirect your site visitors to a new page, you just need to add a line in your head section as follows.
<html><head><title>Page Redirection Example</title></head><body><p>Click the following button, you will be redirected to home page.</p><form><input type="button" value="Redirect Me" onclick="Redirect();"/></form><script type="text/javascript">functionRedirect(){
window.location ="https://www.tutorialspoint.com";}</script></body></html>
Example 2
You can show an appropriate message to your site visitors before redirecting them to a new page. This would need a bit time delay to load a new page. The following example shows how to implement the same. Here setTimeout() is a built-in JavaScript function which can be used to execute another function after a given time interval.
<html><head><title>Page Redirection Example</title></head><body><p>You will be redirected to main page in10 sec.</p><script>functionredirect(){
window.location ="https://www.tutorialspoint.com";}setTimeout('redirect()',10000);</script></body></html>
Output
You will be redirected to tutorialspoint.com main page in 10 seconds!
Example 3
The following example shows how to redirect your site visitors onto a different page based on their browsers.
<html><head><title>Browser Redirect</title></head><body><script type ="text/javascript">var browsername = navigator.appName;if( browsername =="Netscape"){
window.location ="https://www.tutorialspoint.com/javascript/index.htm";}elseif( browsername =="Microsoft Internet Explorer"){
window.location ="https://www.tutorialspoint.com/articles/category/Javascript";}else{
window.location ="https://www.tutorialspoint.com/";}</script></body></html>
The rest parameter in JavaScript allows a function to accept a variable number of arguments as an array. When the number of arguments that need to pass to the function is not fixed, you can use the rest parameters.
The JavaScript rest parameters allow you to collect all the remaining arguments in a single array. The rest parameter is represented with three dots (…) followed by a parameter name. This parameter name is the array that contains all the remaining arguments.
Rest Parameter Syntax
The rest parameter in JavaScript involves using three dots (…) followed by a parameter name in the function declaration.
functionfunctionName(para1, para2, ...theArgs){// function body;}
Here para1, and para2 are ordinary parameters while theArgs is a rest parameter. The rest parameter collects the rest of arguments (here, arguments other than the corresponding to the parameters para1 and para1) and assigns to an array named theArgs.
We can write the rest parameter in function expression also same as in the function declaration.
The rest parameter should always be the last parameter in the function definition.
functionfuncName(...para1, para2, para2){}// SyntaxError: Invalid or unexpected token
The function definition can have only one rest parameter.
functionfuncName(para1, ...para2, ...para3){}//SyntaxError: Rest parameter must be last formal parameter
Example: Variable Length Parameter List
The rest parameters are very useful when you want to define a function that can handle a variable number of arguments. Lets take the following example −
<html><body><div> Rest parameter allows function to accept nay number of arguments.</div><div id ="demo"></div><script>functionsum(...nums){let totalSum =0;for(let num of nums){
totalSum += num;}return totalSum;}
document.getElementById("demo").innerHTML =sum(10,20,30,40)+"<br>"+sum(10,20)+"<br>"+sum();</script></body></html>
Output
Rest parameter allows function to accept nay number of arguments.
100
30
0
Here, the rest parameter nums allows the function to accept any number of number arguments.
Example: Finding the Maximum Number
JavaScript rest parameter simplifies the process of finding the max number among a set of given numbers.
In this example, we use rest parameter to numbers to collect all arguments passed to the function. The spread operator is used to pass the individual values to the Math.max() function.
<html><body><div> Finding the maximum number</div><div id ="demo"></div><script>functiongetMax(...args){return Math.max(...args);}
document.getElementById("demo").innerHTML =getMax(10,20,30,40)+"<br>"+getMax(10,20,30);</script></body></html>
Output
Finding the maximum number
40
30
Here the rest parameter args allows the function getMax to accept any number of arguments.
Spread Operator and Rest Parameters
The spread operator (…) is closely related to rest parameters and is often used in conjunction with them. While the rest parameter collects function arguments into an array, the spread operator performs the opposite operation, spreading the elements of an array into individual arguments.
In the above example of finding the maximum number, we used both rest parameter and spread operator.
functiongetMax(...args){// here ...args as rest parameterreturn Math.max(...args);// here ... works as spread operator}
Example
In this example, the spread operator … is used to pass the elements of the numbers array as individual arguments to the multiply function.
<html><body><div> Spread operator in JavaScript<div><div id="demo"></div><script>functionmultiply(a, b, c){return a * b * c;}const numbers =[2,3,4];
document.getElementById("demo").innerHTML =multiply(...numbers);</script></body></html>
Output
Spread operator in JavaScript
24
Rest Parameter vs. Arguments Object
The introduction of rest parameters has implications for how we handle variable-length parameter lists compared to using the arguments object. Let’s compare the two approaches:
Rest Parameters
<html><body><div> Sum using rest parameter in JavaScript:</div><div id ="demo"></div><script>functionsum(...numbers){return numbers.reduce((total, num)=> total + num,0);}
document.getElementById("demo").innerHTML =sum(1,2,3,4,5);</script></body></html>
Output
Sum using rest parameter in JavaScript:
15
Arguments Object
<html><body><div> Sum using arguments object in JavaScript:</div><div id ="demo"></div><script>functionsum(){const argsArray = Array.from(arguments);return argsArray.reduce((total, num)=> total + num,0);}
document.getElementById("demo").innerHTML =sum(1,2,3,4,5);</script></body></html>
Output
Sum using arguments object in JavaScript:
15
While both approaches achieve the same result, the rest parameter syntax is more concise and readable. It also behaves more consistently with other modern JavaScript features.
Destructuring with Rest Parameter
The destructuring assignment is introduced in ES6. It allows us to access the individual values of the array without using array indexing. We can use the destructuring assignment to extract the values from the array created by rest parameter.
Example
In the example below, the destructuring assignment extracts the first two elements from the numbers array.
<html><body><div> Destructuring assignment with rest parameter</div><div id ="demo"></div><script>functiongetFirstTwo(...numbers){const[first, second]= numbers;return`First: ${first}, Second: ${second}`;}
document.getElementById("demo").innerHTML =getFirstTwo(1,2,3,4,5);</script></body></html>
Output
Destructuring assignment with rest parameter
First: 1, Second: 2
The Atomics object in JavaScript provides a set of static methods for performing atomic operations on SharedArrayBuffer objects. Atomic operations are operations that are guaranteed to be completed in a single step, without being interrupted by other threads. This makes them useful for implementing concurrent data structures and algorithms.
The Atomics object in JavaScript, as part of the ECMAScript standard, serves as a crucial tool for managing shared memory in a multi-threaded environment. Let’s understand the basic concept of atomic operations in more detail:
Atomics Object
The Atomics object is a built-in JavaScript object that provides atomic operations on shared memory. It is designed to be used in a multi-threaded environment, where multiple threads or Web Workers may be concurrently accessing and modifying shared data.
The Essence of “Atomic”
In the context of the Atomics object, “atomic” signifies a crucial characteristic: it performs operations that are inherently indivisible. When we declare an operation as atomic; we imply its execution occurs continuously and uninterruptedly like a single unit. This quality is indispensable in preventing race conditions; these arise when concurrent operations’ outcomes depend on their timing and sequence of execution.
Atomic Operations
Atomic operations are low-level operations on shared memory that are guaranteed to be executed as a single, uninterruptible unit. These operations include additions, subtractions, bitwise operations, exchanges, and more.
The Atomics object provides methods like add, sub, and, or, xor, load, store, exchange, and others, each corresponding to a specific atomic operation.
Sr.No.
Method & Description
1
Atomics.add()Adds a specified value to the element at the specified index in the typed array. Returns the original value atomically.
2
Atomics.sub()Subtracts a specified value from the element at the specified index in the typed array. Returns the original value atomically.
3
Atomics.and()Performs an atomic bitwise AND operation on the element at the specified index in the typed array with the given value. Returns the original value atomically.
4
Atomics.or()Performs an atomic bitwise OR operation on the element at the specified index in the typed array with the given value. Returns the original value atomically.
5
Atomics.xor()Performs an atomic bitwise XOR operation on the element at the specified index in the typed array with the given value. Returns the original value atomically.
6
Atomics.load()Retrieves the value at the specified index in the typed array atomically.
7
Atomics.store()Stores the given value at the specified index in the typed array atomically.
8
Atomics.exchange()Swaps the value at the specified index in the typed array with a specified value. Returns the original value atomically.
9
Atomics. compareExchange()Compares the value at the specified index in the typed array with a provided expected value, and if they match, updates the value with a new value. Returns the original value atomically.
10
Atomics.wait()Atomically waits for a value at the specified index in the typed array to be a specific value and then returns. Allows for efficient coordination between threads.
11
Atomics.notify()Atomically notifies the wait queue associated with the specified index in the typed array.
Examples
Example 1: Basic Usage of Atomics Operations
In this example, the Atomics object is demonstrated for its fundamental atomic operations on shared memory. These operations include addition, subtraction, bitwise AND, OR, XOR, loading, storing, exchanging, and compare-exchanging values. Each operation ensures the indivisibility of the executed unit, crucial for preventing race conditions in a multi-threaded environment.
Atomics.add()
// Shared memory setupconst sharedBuffer =newSharedArrayBuffer(4);const sharedArray =newInt32Array(sharedBuffer);// Atomics.add()const originalAddValue = Atomics.add(sharedArray,0,10);
console.log(`Atomics.add: Original value: ${originalAddValue}, New value: ${sharedArray[0]}`);
Output
Atomics.add: Original value: 0, New value: 10
Atomics.add()
// Shared memory setupconst sharedBuffer =newSharedArrayBuffer(4);const sharedArray =newInt32Array(sharedBuffer);// Atomics.sub()const originalSubValue = Atomics.sub(sharedArray,0,5);
console.log(`Atomics.sub: Original value: ${originalSubValue}, New value: ${sharedArray[0]}`);
Output
Atomics.sub: Original value: 10, New value: 5
Atomics.add()
// Shared memory setupconst sharedBuffer =newSharedArrayBuffer(4);const sharedArray =newInt32Array(sharedBuffer);// Atomics.and()const originalAndValue = Atomics.and(sharedArray,0,0b1010);
console.log(`Atomics.and: Original value: ${originalAndValue}, New value: ${sharedArray[0].toString(2)}`);
Output
Atomics.and: Original value: 5, New value: 0
Atomics.or()
// Shared memory setupconst sharedBuffer =newSharedArrayBuffer(4);const sharedArray =newInt32Array(sharedBuffer);// Atomics.or()const originalOrValue = Atomics.or(sharedArray,0,0b1100);
console.log(`Atomics.or: Original value: ${originalOrValue}, New value: ${sharedArray[0].toString(2)}`);
Output
Atomics.or: Original value: 0, New value: 1100
Atomics.xor()
// Shared memory setupconst sharedBuffer =newSharedArrayBuffer(4);const sharedArray =newInt32Array(sharedBuffer);// Atomics.xor()const originalXorValue = Atomics.xor(sharedArray,0,0b0110);
console.log(`Atomics.xor: Original value: ${originalXorValue}, New value: ${sharedArray[0].toString(2)}`);
Example 2: Real-World Use Case – Synchronized Counter
In this real-world scenario, we employ the Atomics object to construct a synchronized counter; multiple threads increment this counter through the use of the Atomics.add() operation, thus guaranteeing atomicity in our update process. The functionality and necessity for effective thread coordination become evident with such an application: it offers practical data management solutions within a multi-threaded environment.
const sharedBuffer =newSharedArrayBuffer(4);const sharedArray =newInt32Array(sharedBuffer);// Synchronized counterfunctionincrementCounter(){const incrementValue =1;const originalValue = Atomics.add(sharedArray,0, incrementValue);
console.log(`Incremented counter by ${incrementValue}. New value: ${sharedArray[0]}`);}// Multiple threads incrementing the countersetInterval(()=>{incrementCounter();},1000);// Simulate other activities in the main threadsetInterval(()=>{
console.log('Main thread doing other work.');},3000);
Output
Incremented counter by 1. New value: 1
Incremented counter by 1. New value: 2
Main thread doing other work.
Incremented counter by 1. New value: 3
Incremented counter by 1. New value: 4
Incremented counter by 1. New value: 5
Main thread doing other work.
Incremented counter by 1. New value: 6
Incremented counter by 1. New value: 7
Incremented counter by 1. New value: 8
Main thread doing other work.
...
In JavaScript, asynchronous iteration refers to the ability to iterate over asynchronous sequences or collections, such as those returned by asynchronous functions or generators. Async iteration is typically used with operations that involve asynchronous tasks, such as fetching data from a remote server or reading from a file.
Understanding Asynchronous Operations
In basic terms, asynchronous operations in programming denote tasks or procedures that do not obstruct the program’s execution during their pending completion. Rather than pausing for each operation to conclude before proceeding onto the subsequent one; these asynchronous tasks enable a program: it continues executing other duties, concurrently waiting for the current task’s finalization.
Using the ‘for await…of’ Loop
The for await…of loop is used for asynchronous iteration. It works similarly to the regular for…of loop, but it is designed to work with asynchronous iterators. An asynchronous iterator is an object that defines an async next() method, which returns a promise for the next value in the sequence.
Example: Using Promises
JavaScript incorporates promises as a characteristic to manage asynchronous operations; these promises symbolize the potential outcomes, either completion or failure of an asynchronous task. Notably, the function asyncOperation emulates such tasks by returning a promise. The ‘for await…of’ loop elegantly navigates the asynchronous sequence, emphasizing promise utilization in managing non-blocking operations without compromising code lucidity.
<!DOCTYPE html><html><body><h2>Async Iteration with Promises</h2><div id="output"></div><script>functionasyncOperation(value){returnnewPromise(resolve=>{setTimeout(()=>{
document.getElementById('output').innerHTML +=`<p>Processed: ${value}</p>`;resolve(value);},1000);});}const asyncIterable ={[Symbol.asyncIterator]:asyncfunction*(){for(let i =1; i <=3; i++){yieldawaitasyncOperation(i);}},};asyncfunctionprocessAsyncIterable(){forawait(const result of asyncIterable){
document.getElementById('output').innerHTML +=`<p>Received: ${result}</p>`;}}processAsyncIterable();</script></body></html>
Example 2: Using Fetch API for Asynchronous HTTP Requests
Here, we demonstrate asynchronous iteration with the Fetch API for executing HTTP requests: The asyncIterable operates to fetch data in an asynchronous manner. Furthermore; employing a ‘for await…of’ loop – it elegantly traverses through results showcasing how seamlessly async iteration amalgamates with external source data retrieval.
<!DOCTYPE html><html><body><h2>Async Iteration with Fetch API</h2><div id="output"></div><script>const url ='https://jsonplaceholder.typicode.com/todos/';const asyncIterable ={[Symbol.asyncIterator]:asyncfunction*(){for(let i =1; i <=3; i++){const response =awaitfetch(`${url}${i}`);const data =await response.json();
document.getElementById('output').innerHTML +=`<p>Received: ${JSON.stringify(data)}</p>`;yield data;}},};asyncfunctionprocessAsyncIterable(){forawait(const result of asyncIterable){// Already displaying results above, no need for additional output.}}processAsyncIterable();</script></body></html>
Example 3: Using callback
The approach employs a callback-based mechanism to achieve asynchronous iteration. The function asyncOperation imitates an asynchronous task and calls back upon completion. Meanwhile, the processAsyncIterable function actively iterates through an array, invoking the asynchronous operation for every element.
<!DOCTYPE html><html><body><h2>Async Iteration with callback</h2><div id="output"></div><script>functionasyncOperation(value, callback){setTimeout(()=>{
document.getElementById('output').innerHTML +=`<p>Processed: ${value}</p>`;callback(value);},1000);}functionprocessAsyncIterable(iterable, callback){const iterator = iterable[Symbol.iterator]();functioniterate(){const next = iterator.next();if(next.done){return;}const value = next.value;asyncOperation(value,result=>{
document.getElementById('output').innerHTML +=`<p>Received: ${result}</p>`;iterate();});}iterate();}const asyncIterable =[5,6,7,8,9,10];processAsyncIterable(asyncIterable,result=>{// You can handle final result or additional actions here if needed.});</script></body></html>
Example 4: Promise With Error
The method .then() in JavaScript employs one or two callback functions to manage the successful resolution of a Promise: upon the promise’s resolution, it executes its first function; should rejection occur an optional second function is then executed.
The method .catch() accompanies Promises, specifically to address promise rejections. A single callback function executes upon the rejection of the promise; this provides an elegant solution for managing errors in asynchronous operations – eliminating the need for a distinct .then() block dedicated to error handling.
<!DOCTYPE html><html><head><style>
#output {
margin-top:20px;}</style></head><body><h2>Async Iteration with Promises</h2><button onclick="startAsyncIteration()">Start Async Iteration</button><div id="output"></div><script>functiondelay(ms){returnnewPromise(resolve=>setTimeout(resolve, ms));}functionfetchData(index){returnnewPromise((resolve, reject)=>{if(index <5){delay(1000).then(()=>resolve(`Data ${index}`));}else{// Simulate an error for index 5reject(newError('Error fetching data for index 5'));}});}functionstartAsyncIteration(){
document.getElementById('output').innerHTML ='';let index =0;functioniterate(){fetchData(index).then(data=>{displayData(data);
index++;if(index <6){iterate();}}).catch(error=>{// Display error on the page.displayError(error.message);});}iterate();}functiondisplayData(data){const outputDiv = document.getElementById('output');
outputDiv.innerHTML +=`<p>Data received: ${data}</p>`;}functiondisplayError(errorMessage){const outputDiv = document.getElementById('output');
outputDiv.innerHTML +=`<p style="color: red;">Error: ${errorMessage}</p>`;}</script></body></html>
Real World Use Cases
In real-world scenarios, we apply JavaScript async iterations to optimize various asynchronous operations: fetching data concurrently from multiple APIs in web applications; processing real-time updates – a function critical for chat systems and executing batch tasks or parallel tasks that require intensive resources. Furthermore, managing file operations and streams is possible with this technique along with handling concurrent user interactions on interactive web pages. Other applications involve processing data from IoT devices dynamically loading content onto webpages, these too benefit greatly from the use of asynchronous iteration due to their need for non-blocking efficiency as well responsiveness when dealing with complex task management such as offline-first application’s data synchronization.
Asynchronous JavaScript and XML (Ajax) represents a web development technique: it enables dynamic, interactive communication between server and webpage without necessitating complete page reload. The descriptor “asynchronous” underlines that data exchanges can occur in the background, independent of user experience disruption. Rather than idly awaiting full-page refreshment; Ajax empowers real-time updates on specific sections of a webpage, thus yielding an interface that is more seamless and responsive.
How Ajax works?
The central role in enabling dynamic updates, without the necessity of a full page reload, belongs to the XMLHttpRequest object within JavaScript’s Ajax functionality. This particular process allows for asynchronous communication between server and web page. The server responds with data, usually in JSON or XML format when receiving a request sent by this object. Processing this data is the task of JavaScript; it updates specific portions of the webpage in real-time. The asynchronous nature which is a critical feature for modern web development ensures these operations occur unobtrusively in background, thereby enhancing interactivity by allowing data to be fetched and sent asynchronously.
Here, we will to explore Ajax to get a deeper understanding of it.
There are 4 approaches to make Ajax calls or to implement Ajax in JavaScript and they are:
XMLHttpRequest (Older Approach)
Fetch API (Modern Approach)
Axios (Library for HTTP Requests)
jQuery Ajax
We will be using JSONPlaceholder in all the examples for understanding purposes.
JSONPlaceholder is an open-source and simulated REST API provider which lets developers test their prototype applications. It returns fake/dummy data for various resources like users, posts, comments etc. The API endpoints of JSONPlaceholder can be made using HTTP requests and they will be mimicking the nature of real APIs without any need for authentication. Our goal here is to use these APIs/endpoints to under Javascript-Ajax.
Using XMLHttpRequest
The Native JavaScript approach using XMLHttpRequest represents the oldest method for asynchronous requests. It relies on the XMLHttpRequest object to create and send HTTP requests. This method involves setting up callback functions to handle various states of the request, making it suitable for simpler scenarios. However, it has some limitations compared to more modern approaches.
Presenting a modern alternative to XMLHttpRequest, the Fetch API offers a more straightforward and powerful syntax; it returns Promises thus enhancing the intuitive handling of asynchronous operations. Supporting an extensive array of HTTP methods and headers: this provides developers with a cleaner, concise method for making asynchronous requests. Contemporary JavaScript applications often prefer it for its clarity and ease of use.
Example
<!DOCTYPE html><html><body><h1>Fetch API Example</h1><button onclick="fetchApi()">Make Request</button><pre id="result"></pre><script>functionfetchApi(){fetch('https://jsonplaceholder.typicode.com/users/3').then(response=>{if(!response.ok){thrownewError('Network response was not ok');}return response.json();}).then(data=>{var formattedData =JSON.stringify(data,null,2);
document.getElementById('result').innerText ='Fetch API:\n'+ formattedData;}).catch(error=>{
document.getElementById('result').innerText ='Fetch API Error: '+ error.message;});}</script></body></html>
Using Axios
Designed for making HTTP requests, Axios emerges as a popular JavaScript library. Its popularity is largely due to its clean and concise syntax: built on Promises; furthermore, it boasts automatic JSON data transformation support features that set it apart from other libraries in the field. Offering more than just basic functionality, Axios presents advanced features such as request and response interceptors, a robust selection for managing AJAX operations within the context of modern web development environment.
The $.ajax method in jQuery simplifies the AJAX request process: a popular approach previously; however, its usage has waned alongside modern JavaScript’s ascent. Offering an interface that is both consistent and cross-browser compatible, jQuery Ajax remains suitable for projects already using or needing specific features of jQuery due to these advantages it presents. However, for new projects, modern alternatives may be preferred.
In real-world scenarios, developers commonly employ Ajax to create web applications that are both responsive and interactive. A pertinent example: a social media platform; here, users have the ability – thanks to Ajax, to add or load new comments in the background without needing an entire page refresh. Dynamic updating ensures a user experience that is smooth and uninterrupted, permitting individuals to engage with content and one another seamlessly. This process yields a platform more responsive and engaging; it amplifies user interaction thus enhancing satisfaction.
Prominent companies utilizing Ajax for enhanced user experiences include Google (Gmail, Maps), Facebook, Twitter, Amazon, Netflix, GitHub, LinkedIn, YouTube, Microsoft Office Online, and Uber. Ajax is employed for real-time updates, dynamic content loading, and seamless interactions on their respective platforms.
In this chapter, we will learn how we can validate URLs in JavaScript. Before knowing how to validate URLs, let’s understand what a URL is.
What is a URL?
A URL or Uniform Resource Locator identifies web pages, images, and videos on the internet. URLs are website addresses that transfer files, send emails, and many more.
URLs consist of a protocol, domain name, and so on. URL indicates how the browser gets the data and where to get the data.
We use a URL in the anchor tags or buttons to navigate to another location. We must verify the URL’s validity before using it.
Validating URLs in JavaScript
There are ways to validate URLs in JavaScript. Let us understand the rule to validate URLs:
Rules to validate URLs
Below are the rules to validate URLs:
URL must start with http://, https://, or www.
URL must contain a domain name.
URL must contain a top-level domain like .com, .org, .net, etc.
URL must not contain any spaces.
Using Regular Expression
Regular expression are much useful in validating URLs. A regular expression describes a pattern of characters. We use these patterns to match some text.
Syntax
Below you can see the regular expression syntax to validate URLs:
The first syntax matches a regular expression. The second syntax tests for a URL pattern.
Example
In the following example, we use a regular expression to validate URLs.
<!DOCTYPE html><html><head><title>Validate URLs in JavaScript</title></head><body><h2>Validate URLs using Regular Expression</h2><div id="output"></div><script>let output = document.getElementById("output");var url ="https://www.tutorialspoint.com";var pattern =newRegExp("^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$");if(pattern.test(url)){
output.innerHTML ="URL is valid";}else{
output.innerHTML ="URL is not valid";}</script></body></html>
Using URL() Constructor
The URL() constructor returns a newly created URL object. The constructor throws a TypeError if the base URL or resultant URL is invalid.
Syntax
Below is the syntax to use the URL() constructor:
var url =newURL(urlStr);newURL(url, base);return url.protocol ==='http:'|| url.protocol ==='https:';
The first two syntaxes create a new URL, either with or without a base. The second syntax is to check the URL protocol validity.
Example
In this program, the URL method validates the URLs and returns a type error in the case of invalid URLs.
<!DOCTYPE html><html><head><title>Validate URLs in JavaScript</title></head><body><h2>Validate URLs using URL() Constructor</h2><div id="output"></div><script>let output = document.getElementById("output");try{var url =newURL("https://www.tutorialspoint.com");if(url.protocol ==='http:'|| url.protocol ==='https:'){
output.innerHTML ="URL is valid";}else{
output.innerHTML ="URL is not valid";}}catch(e){
output.innerHTML ="URL is not valid";}</script></body></html>
This chapter taught us two methods to validate a URL. The first method suggests using a regular expression match or a pattern test. The second method is the built-in URL method. The URL method is easy because we can avoid the test case missing in the case of regular expressions.
Both methods are useful in validating URLs. We can use any of the methods based on our requirements.
Unit testing is must in software development life-cycle. It is a process in which we can test small units of code individually to ensure that they are working correctly. In JavaScript, we can use various unit testing frameworks to test our code. Unit testing help us to find bugs early in the development process. Instead of testing the whole application, we can test small units of code.
Why Unit Testing?
Catch bug early : testing smaller parts of code, it becomes easy to catch bug early in the development process.
Easier Refactoring: With the help of unit testing, you get confidence to make changes in code, because we know the existing code you have tested is already working.
Improves Code Quality: Writing unit tests help us to write better code. It helps us to write modular code which is easy to test.
Unit Testing Frameworks
There are many unit testing frameworks are available in JavaScript. Some of them are most popular and widely used. Some of them are −
Jest: Jest is a JavaScript testing framework developed by Facebook. It is widely used for testing JavaScript code. Jest is fast, easy to use and it absolutely provides everything you need for testing.
Mocha: Mocha has many feature, It is a JavaScript test framework that run on Node.js and in the browser, and makes asynchronous testing simple and fun. Mocha tests run serially, that allow it for flexible and accurate reporting, when mapping uncaught exceptions to the correct test cases.
Jasmine: Jasmine is a behavior-driven development framework for testing JavaScript code. It does not rely on browsers, DOM, or any JavaScript framework. Jasmine is inspired by other testing frameworks such as ScrewUnit, JSSpec, JSpec, and RSpec.
QUnit: QUnit is a powerful, easy-to-use JavaScript unit testing framework. It’s used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code.
Structure of Unit Testing
In common unit test cases there are a few steps those are −
Setup: In this part, we set up the environment for the test. We can create objects, initialize variables, etc.
Execute: In this part, we execute the code that we want to test.
Assert: In this part, we check the result of the execution. We check if the result is as expected or not.
Teardown: In this part, we clean up the environment after the test. We can destroy objects, clear variables, etc.
Example of unit test using Jest
Below is a code snippet of unit test using Jest.
Example
functionsum(a, b){return a + b;}
module.exports = sum;// test.jsconst sum =require('./sum');test('adds 1 + 2 to equal 3',()=>{expect(sum(1,2)).toBe(3);});
Output
PASS ./sum.test.js
adds 1 + 2 to equal 3 (3ms)
In this example, we have a function sum which takes two arguments and returns the sum of those two arguments. We have written a test case for this function to check if the function is working correctly or not.
When the value is absolutely not present in the variable or string or anything else, we call it as Undefined. In JavaScript, undefined is a one of the primitive data type. It is used to represent the absence of a value.
It get assigned to a variable when it is declared but not assigned any value.
How to check if a variable is undefined?
There are more than one way to check if a variable is undefined or not. Let’s see them one by one.
Using typeof operator
Using strict equality operator
Using void operator
Using typeof operator
When the variable is undefined, it means the variable is not declared. Users cant use it in the if-else conditional statement like the above method.
To check the type of the undeclared variables, we can use the typeof operator. The typeof operator takes the variable as an operand and returns the variable type. As the operand of typeof, we can use undeclared variables also.
Syntax
Below syntax is used to check undefined variable using the typeof operator.
typeof variable_name ==='undefined'
Example
Below is the example code given, that shows how to use the typeof operator to check the undefined value of the variable.
<html><body><script>var a;if(typeof a ==='undefined'){
document.write('a is undefined');}</script></body></html>
Output
Following is the output of the above code
a is undefined
Using strict equality operator
In this method, we will use the strict equality operator to check whether a variable is null, empty, or undefined. If we dont assign the value to the variable while declaring, the JavaScript compiler assigns it to the undefined value. So, we can check that if the variable contains the null value or undefined value, it means we have a null variable.
Syntax
Below is the syntax given for checking the undefined value of the variable using the strict equality operator.
variable_name ===undefined
Example
<html><body><script>var a;if(a ===undefined){
document.write('a is undefined');}</script></body></html>