Milan Smudja

Wednesday, April 23, 2025

JavaScript Prompt Box, User Input

The prompt box displays a message to the user and provides a text field for the user to enter a response.

Prompt boxes are useful in JavaScript when you need to prompt the user for input data, such as asking for their name, age, or other personal information. Prompt boxes are also commonly used to confirm an action or prompt the user for a yes or no response.

Here are a few examples of where prompt boxes can be used in JavaScript:

Collecting user input: You can use a prompt box to ask the user for input data, such as their name, age, or email address.
Confirming an action: You can use a prompt box to confirm an action before proceeding, such as deleting a file or closing a window.
Validating input: You can use a prompt box to validate user input, such as checking if the user has entered a valid email address or phone number.
Customizing user experience: You can use a prompt box to customize the user experience, such as asking the user to choose their preferred language or theme.

Prompt boxes are a simple and effective way to prompt the user for input data and improve the interactivity of your JavaScript applications.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var grab_stuff = prompt("Your Name: ");
	
	document.write(grab_stuff + "<br>");
	
</script>
	
</body>
</html>

This script displays a prompt box that asks the user to enter their name using the prompt() method. The entered value is stored in the grab_stuff variable.

Then, the entered value is output to the webpage using the document.write() method, followed by a line break using the <br> tag.


<script>
	
	var grab_stuff = prompt("Your Name: ");
	
	for (x = 0; x < 5; x = x + 1) {
		document.write(grab_stuff + "<br>");
	}
	
</script>

This script displays a prompt box that asks the user to enter their name using the prompt() method. The entered value is stored in the grab_stuff variable.

Then, a for loop is used to output the entered value to the webpage five times using the document.write() method, followed by a line break using the <br> tag. The loop increments the variable x by 1 on each iteration until it reaches a value of 5.

When the script is run, it displays a prompt box with a message "Your Name: ", and the user can enter their name into the text field. Once the user clicks "OK", the entered value is stored in the grab_stuff variable and output to the webpage five times using the for loop. Each time the name is output, it is followed by a line break using the <br> tag.

JavaScript Join, Pop Elements

In JavaScript, join and pop are two methods that can be used on arrays.

join method is used to concatenate all the elements of an array into a string. pop method is used to remove the last element of an array and return that element. It modifies the original array, reducing its length by one.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var old_pl = new Array("Cobol", "Fortran", "Algol");
	
	var new_string = old_pl.join(" ");
	
	document.write(new_string);
	
</script>
	
</body>
</html>

This script creates an array called old_pl with three elements: "Cobol", "Fortran", and "Algol". Then, the join method is called on the old_pl array with a space as the separator argument. The resulting string is assigned to a variable called new_string.

Finally, the document.write method is used to output the new_string to the webpage. The resulting output would be a string that concatenates all the elements of the old_pl array.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var old_pl = new Array("Cobol", "Fortran", "Algol");
	
	document.write(old_pl + "<br><br>");
	old_pl.pop();
	
	document.write(old_pl + "<br><br>");
	old_pl.pop();
	
	document.write(old_pl + "<br><br>");
	old_pl.pop();
	
</script>
	
</body>
</html>

This script creates an array called old_pl with three elements: "Cobol", "Fortran", and "Algol". Then, the document.write method is used to output the old_pl array to the webpage.

After that, the pop method is called on the old_pl array three times in a row, which removes the last element of the array on each call.

After each pop method call, the document.write method is used to output the old_pl array to the webpage again. As a result, the output of the script would be:

Cobol,Fortran,Algol

Cobol,Fortran

Cobol

The first line shows the original array with all three elements. The second line shows the old_pl array after the first pop method call, which removed the last element ("Algol") from the array. The third line shows the old_pl array after the second pop method call, which removed the last element ("Fortran") from the array. The fourth line shows the old_pl array after the third pop method call, which removed the last element ("Cobol") from the array.

At this point, the old_pl array is empty.

JavaScript Concatenation, Arrays

In programming, concatenation refers to the process of combining two or more strings, arrays, or other data structures into a single entity. This can be achieved by using specific operators or methods, depending on the programming language being used.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var old_pl = new Array("Cobol", "Fortran", "Algol");
	var new_pl = new Array("Rust", "Python", "Go");
	
	var all_pl = old_pl.concat(new_pl);
	
	document.write(all_pl + "<br>");
	
	document.write(all_pl[0] + "<br>");
	document.write(all_pl[3] + "<br>");
	document.write(all_pl[5] + "<br>");
	
</script>
	
</body>
</html>

This JavaScript code defines two arrays, old_pl and new_pl, which contain strings representing old and new programming languages, respectively. The concat() method is then used to concatenate the two arrays and return a new array called all_pl. The concatenated array is then printed to the document using document.write(), followed by three examples of accessing elements of the array using square bracket notation ([]).

Concatenation is a very useful operation in programming and is used frequently in various contexts. It is used to combine two or more strings, arrays, or any other type of data structure into a single entity.

For example, in web development, concatenation is commonly used to build dynamic HTML pages by combining various strings, variables, and other data sources. Similarly, in database management, concatenation is used to combine data from multiple tables or records into a single output.

Concatenation can also be used in many other programming contexts, such as text processing, data analysis, and scientific computing.

In JavaScript, concatenation is often used to combine strings. This is particularly useful when working with dynamic text, such as generating messages, building URLs, or creating HTML elements. Concatenation can also be used to join together arrays, as shown in the previous example.

JavaScript provides the + operator for concatenating strings, as well as the concat() method for concatenating arrays. For example:

var name = "John";
var greeting = "Hello " + name + "!";
console.log(greeting); // Output: "Hello John!"

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = arr1.concat(arr2);
console.log(arr3); // Output: [1, 2, 3, 4, 5, 6]

console.log() is a function in JavaScript used for debugging and logging messages to the console, which is a built-in feature in most web browsers and development environments.

When you call console.log(), it prints the argument passed to it to the console. For example, if you want to log a message to the console, you can use the following code:

console.log("Hello, world!");

The output will be printed in the console window, which you can usually open by right-clicking on a web page and selecting "Inspect" or "Inspect element", and then navigating to the "Console" tab.

In addition to logging strings, you can also log variables, objects, arrays, and other data types to the console using console.log(). This is a useful tool for debugging and understanding the flow of your code.

JavaScript Adding Elements, Arrays

This script creates a new array called temp and then adds elements to it using the square bracket notation:


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var temp = new Array();
	
	temp[0] = "Prolog";
	temp[1] = "Lisp";
	temp[2] = "C++";
	temp[50] = "Perl";
	
	document.write(temp);	
	
	document.write("<br><br>");
	document.write("If we search for something that's not there:");
	document.write("<br><b>" + temp[25] + "</b>");
	
</script>
	
</body>
</html>

temp[0] = "Prolog" sets the value of the first element to "Prolog".

temp[1] = "Lisp" sets the value of the second element to "Lisp".

temp[2] = "C++" sets the value of the third element to "C++".

temp[50] = "Perl" sets the value of the 51st element to "Perl".

The script then uses document.write to display the entire array. When the array is displayed, you'll notice that there are many empty elements (from index 3 to 49) because they were not explicitly set.

The script then tries to access an element at index 25 (temp[25]) which was not explicitly set, so it will display undefined.

JavaScript Arrays

An array is a special type of object that stores a collection of values of any type (numbers, strings, objects, etc.). Arrays are created using square brackets [] and elements are separated by commas. Each element in an array has an index, which is a numerical value that starts from 0 for the first element, 1 for the second element, and so on.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var plang = new Array("PHP", "Python", "C++", "C");
	
	document.write(plang);
	
</script>
	
</body>
</html>

The code creates an array plang containing four programming languages: "PHP", "Python", "C++", and "C". Then, the code outputs the entire array using the document.write() function.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var plang = new Array("PHP", "Python", "C++", "C");
	
	document.write(plang[0] + "<br>");
	document.write(plang[1] + "<br>");
	document.write(plang[2] + "<br>");
	document.write(plang[3] + "<br>");
	
</script>
	
</body>
</html>

This script uses the document.write() method to output each element of the array on a new line. The [0], [1], [2], and [3] in plang[0], plang[1], plang[2], and plang[3] are called indexes and are used to access each element of the array.

The first element in an array has an index of 0, the second has an index of 1, and so on. In this script, plang[0] is "PHP", plang[1] is "Python", plang[2] is "C++", and plang[3] is "C".

Indexes in JavaScript start from 0 and in most other programming languages.

There are several programming languages where indexes start with 1. Some examples are:

MATLAB: MATLAB is a numerical computing environment and programming language used in scientific research, engineering, and other fields. In MATLAB, array indexing starts from 1.
FORTRAN: FORTRAN is a high-level programming language used primarily for scientific and engineering applications. In FORTRAN, array indexing also starts from 1.
COBOL: COBOL is a business-oriented programming language used in finance, insurance, and other industries. In COBOL, array indexing starts from 1.

However, it's worth noting that many popular programming languages such as C, Java, and Python, use 0-based indexing for arrays and other data structures.

JavaScript Object Initialization

Object initialization in JavaScript refers to the process of creating an object and initializing its properties and values. One common way to initialize an object is by using an object literal, which is a comma-separated list of name-value pairs enclosed in curly braces. For example:

var person = {
  name: "John",
  age: 30,
  city: "New York"
};

Example:


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	michael = {name: "Michael", lastname: "Smith", ssn: 111222};
	samantha = {name: "Samantha", lastname: "Fox", ssn: 555444};

	document.write(michael.ssn + "<br>");
	
	alert(samantha.name + " "+ samantha.lastname);
	
</script>
	
</body>
</html>

This code initializes two objects, michael and samantha, using object literal notation in JavaScript.

Each object is defined as a set of key-value pairs enclosed in curly braces, where each key represents a property of the object and each value is the corresponding value of that property.

For example, michael has three properties: name, lastname, and ssn, with the corresponding values of "Michael", "Smith", and 111222, respectively. Similarly, samantha has the same properties with different values.

The document.write method is used to output the ssn property of michael, while the alert function displays the name and lastname properties of samantha.

This is a simple way of initializing objects in JavaScript using object literal notation. It is a compact and efficient way of creating objects with properties and values, especially for small and simple objects.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var plang = new Array("PHP", "Python", "C++", "C");
	
	document.write(plang[0] + "<br>");
	document.write(plang[1] + "<br>");
	document.write(plang[2] + "<br>");
	document.write(plang[3] + "<br>");
	
</script>
	
</body>
</html>

The above JavaScript code creates an array named plang containing four elements: "PHP", "Python", "C++", and "C". It then uses the document.write method to output each element of the array to the web page. The array elements are accessed using their indexes, which start at 0. So plang[0] returns the first element of the array ("PHP"), plang[1] returns the second element ("Python"), and so on.

JavaScript Object Creation

In JavaScript, a constructor function is a special type of function that is used to create an object. It is called a constructor because it is used to construct or create objects of a particular type. Constructor functions are defined using the function keyword and have a capitalized name by convention.

Inside the constructor function, the this keyword is used to refer to the object that is being constructed, and properties and methods can be added to the object using dot notation. When a new object is created using the constructor function with the new keyword, the properties and methods are automatically added to the new object.

When creating objects in JavaScript using a constructor function, we must use the new keyword and the this keyword to ensure that the properties are assigned to the correct instance of the object.

The new keyword creates a new instance of the object and allows us to call the constructor function. Without using the new keyword, the function would simply return undefined.

The this keyword refers to the current instance of the object being created. It allows us to set the value of the properties on the current instance of the object, rather than on the constructor function itself or the global object.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	function person(name, lastname, ssn) {
		this.name = name;
		this.lastname = lastname;
		this.ssn = ssn;
	}
	
	var michael = new person("Michael", "Smith", 555444);
	var samantha = new person("Samantha", "Fox", 111777);
	
	document.write(michael.name + "<br>");
	document.write(michael.lastname + "<br>");
	document.write(michael.ssn + "<br>");
	
	document.write(samantha.name + "<br>");
	document.write(samantha.lastname + "<br>");
	document.write(samantha.ssn + "<br>");

</script>
	
</body>
</html>

This code defines a constructor function called "person" which takes three parameters: "name", "lastname", and "ssn". Inside the constructor function, "this" keyword is used to refer to the new object being created by the function. The three parameters passed to the function are then assigned as properties of the new object.

The "new" keyword is used to create two new instances of the "person" object, one for Michael and one for Samantha, with their respective names, last names, and social security numbers assigned as properties.

The properties of the objects are then displayed using the document.write() function, by accessing the object's properties using the dot notation, followed by the property name.

JavaScript Objects

An object is a data type that consists of a collection of properties and methods.

Properties are values that are associated with an object, while methods are functions that are associated with an object.

Properties represent the characteristics of an object, such as its size, color, or name. Properties can be of different data types, including strings, numbers, and arrays.

Methods, on the other hand, represent the actions that can be performed on an object, such as changing its size or color. Methods are usually implemented as functions within the object, and they can also be used to retrieve information from the object or to manipulate its properties.

For example, consider an object representing a car. Properties of the car object could include its make, model, and color, while methods could include starting the engine, stopping the engine, and changing the speed.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>

<body>

<script>
	
	var person_1 = "Samantha Fox";
	var person_2 = "John Smith";
	
	document.write(person_1.length);
	
	document.write("<br><br>");
	
	document.write(person_2.length);

</script>
	
</body>
</html>

This script creates two variables (think about them as most basic custom object), person_1 and person_2, which store strings representing people's names. It then uses the length property of the string object to determine the number of characters in each name, and displays the results using the document.write() method.

A string is a primitive data type that represents a sequence of characters. However, strings can also be objects, because there is a String object that provides additional properties and methods for working with strings.

When a string is created using the double quotes or single quotes, it is treated as a primitive data type.

This is just introductory way to think about objects in broad sense.

JavaScript Load Events

The JavaScript load event is fired when a web page or a specific element on the page finishes loading. This event is typically used to trigger scripts or functions that depend on the page or element being fully loaded before they can run.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body onload="alert('We are tracking You')">

</body>
</html>

The body element has an "onload" attribute that triggers an alert pop-up message saying "We are tracking You" when the page is fully loaded in the web browser.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->

<script>
function bad_stuff() {
	alert("Something Bad");
}
</script>

</head>

<body onload="bad_stuff()">
	
</body>
</html>

This is an HTML document with a script tag in the head section defining a function named "bad_stuff". The body section has an onload attribute that calls the "bad_stuff" function when the page is loaded, triggering an alert with the message "Something Bad".

It's important to note that this example is purely for educational purposes, and intentionally creating harmful or malicious code is not acceptable.

There have been instances of abuse of the onload event in the past. One example is a technique called "onload abuse" or "onload hijacking", where malicious actors inject JavaScript code into the onload event of a webpage to perform actions without the user's knowledge or consent.

This technique has been used to distribute malware, steal sensitive information, and perform other malicious activities. As a result, many web browsers now have protections in place to prevent this type of abuse, such as blocking or warning users about suspicious onload scripts.

JavaScript On Mouse Over, Out

The onmouseover and onmouseout events are triggered when the user moves the mouse over or out of an element on a web page, respectively.

The onmouseover event is triggered when the mouse pointer moves over an element, such as an image, a link, or a button. It can be used to create interactive effects, such as changing the color of the element or displaying additional information.

The onmouseout event is triggered when the mouse pointer moves out of an element, such as an image, a link, or a button. It can be used to revert the element back to its original state, such as changing the color of the element back to its original color.

Both onmouseover and onmouseout can be used to create interactive and dynamic web pages that respond to user actions, and are commonly used in combination with other JavaScript events and functions to create more complex web page interactions.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<form>

<input type="button" value="Custom: On Mouse Over"
onmouseover="alert('On Mouse Over');">

<br><br><br>

<input type="button" value="Custom: On Mouse Out"
onmouseout="alert('On Mouse Out');">

</form>
	
</body>
</html>

This is an HTML form with two buttons.

The first button has an onmouseover event handler that displays an alert message with the text "On Mouse Over" when the user hovers over the button with the mouse.

The second button has an onmouseout event handler that displays an alert message with the text "On Mouse Out" when the user moves the mouse away from the button. These event handlers are triggered by the corresponding mouse events and execute the specified code when the events occur.

JavaScript Event Handlers

JavaScript event handlers are functions that are triggered in response to a specific event happening in the browser, such as a user clicking on a button, moving their mouse over an element, or typing into a form field.

Event handlers are used to execute code in response to these events and can be added to HTML elements using the "on" attribute or added dynamically using JavaScript.

Examples of commonly used event handlers include "onclick" for when a user clicks on an element, "onmouseover" for when a user moves their mouse over an element, and "onsubmit" for when a user submits a form.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<form>

<input type="button" value="Click on me for Pop-Up"
onclick="alert('I am from Pop-Up');">

<br><br>

<input type="button" value="Click on me for direct text"
onclick="document.write('Directly on Page');">

</form>
	
</body>
</html>

This code creates a form with two buttons, each with an onclick attribute that triggers a JavaScript event handler function when the button is clicked.

The first button has an onclick attribute with the value alert('I am from Pop-Up');. This means that when the button is clicked, an alert box will pop up on the screen with the message "I am from Pop-Up".

The second button has an onclick attribute with the value document.write('Directly on Page');. This means that when the button is clicked, the text "Directly on Page" will be written directly on the page where the button is located, replacing any existing content.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

function print_stuff() {
	document.write("I am from function");
}

</script>

<form>

<input type="button" value="Click to activate Function"
onclick="print_stuff();">

</form>
	
</body>
</html>

This code creates a function called "print_stuff()" that writes the text "I am from function" to the web page using the document.write() method. It also creates a button in a form that, when clicked, calls the "print_stuff()" function using the onclick attribute.

When the button is clicked, the function is executed and the text "I am from function" is written to the web page.

onclick is an event handler attribute in HTML and JavaScript that specifies the code to be executed when an element, such as a button, is clicked by the user. The code can be a JavaScript function or a script that is executed when the event occurs.

The onclick attribute is commonly used to create interactive web pages, such as triggering a pop-up window, showing a message or changing the content of the web page.

JavaScript Do While Loop

A do-while loop is similar to a while loop, but it will always execute at least once even if the condition is initially false. The loop will continue to execute until the condition becomes false.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

	var number = 0;
	
	do {
		document.write("Number atm: " + number + "<br>");
		number = number + 1;
	} while (number < 50);	
		
</script>
	
</body>
</html>

This code initializes a variable called number to 0, and then enters a do-while loop. The loop body consists of a block of code enclosed in curly braces that writes the current value of number to the document and increments it by 1.

The loop will continue to execute as long as number is less than 50.

The main difference between a do-while loop and a while loop is that a do-while loop guarantees that the loop body will be executed at least once, regardless of the initial condition.

JavaScript While Loop

A while loop is a control flow statement that allows a block of code to be repeatedly executed as long as a certain condition is true.

The loop will continue to execute until the condition is no longer true, at which point the program will continue executing the rest of the code following the loop. The condition is checked at the beginning of each iteration of the loop, and if it is true, the code inside the loop is executed.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

	var number = 0;
	
	while (number < 100) {
		document.write("Number at this moment: " + number + "<br>");
		number = number + 1;
	}
		
</script>
	
</body>
</html>

The code above shows an example of a while loop in JavaScript. In this case, the loop will continue executing as long as the value of the variable "number" is less than 100.

Inside the loop, the value of "number" is printed to the document using the document.write() function, along with some additional text. After printing the current value of "number", the value of the variable is incremented by 1 using the expression number = number + 1. This is necessary to ensure that the loop eventually terminates.

If a loop is not terminated properly, it will keep running indefinitely, causing what's called an infinite loop. This can be a serious issue, as it can crash the program or even the entire system if the loop consumes too many resources such as CPU or memory. It's important to ensure that loops are properly terminated with a condition that eventually becomes false or a statement that exits the loop when the desired goal is achieved.

Most modern browsers have protection against infinite loops. If a script runs for too long (e.g. due to an infinite loop), the browser will typically show a message asking the user if they want to stop the script. This is done to prevent the browser from becoming unresponsive and to protect against malicious scripts that could potentially crash the browser or execute other harmful actions.

There have been instances where malicious actors have used infinite loops as a form of denial of service attack. In such attacks, the malicious code contains an infinite loop that consumes all available resources of the browser or computer, making it unresponsive or causing it to crash. These attacks are often carried out as part of larger-scale attacks targeting websites or networks. To prevent such attacks, browsers and operating systems have implemented measures to detect and stop scripts that run for too long or consume too many resources.

JavaScript For Loop

A for loop is a control flow statement that allows you to repeatedly execute a block of code a certain number of times. It provides a compact way to iterate over a range of values, such as the elements of an array, the digits of a number, or any sequence of numbers.

The syntax of a for loop typically includes an initialization statement, a condition for termination, and an update statement.

For loops are useful in situations where we need to iterate over a sequence of values or perform a task a specific number of times. Some examples of their use cases include:

Processing arrays or lists: For loops can be used to iterate over the elements of an array or a list and perform a certain operation on each element.
Displaying repetitive patterns: For loops can be used to display a repetitive pattern on a web page or a graphical user interface.
Generating sequences: For loops can be used to generate a sequence of numbers or characters based on a given pattern or formula.
Performing mathematical computations: For loops can be used to perform mathematical computations, such as calculating the sum of a series of numbers or finding the minimum or maximum value in a set of numbers.
Reading and writing files: For loops can be used to read and write files, where each iteration of the loop processes a line or a block of data in the file.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

	for (x = 0; x < 100; x = x + 1) {
		document.write(x + "<br>");
	}
		
</script>
	
</body>
</html>

This script will output the numbers from 0 to 99, each number on a new line, using a for loop.

The for loop is used to execute a block of code a certain number of times. In this case, it starts by initializing the x variable to 0.

Then, it checks if x is less than 100. If x is less than 100, the code inside the loop is executed, which prints the value of x on a new line using the document.write statement.

After that, the loop updates the value of x by adding 1 to it, and the loop starts over, checking again if x is less than 100. This process repeats until x is no longer less than 100, at which point the loop ends.

In the context of a for loop, x = x + 1 means that the value of the x variable is incremented by 1 in each iteration of the loop.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

	var x = 0;

	for (x; x < 100; x = x + 5) {
		document.write("x in moment of time: " + x + "<br>");
	}
		
</script>
	
</body>
</html>

Result:

x in moment of time: 0
x in moment of time: 5
x in moment of time: 10
x in moment of time: 15
x in moment of time: 20
x in moment of time: 25
x in moment of time: 30
x in moment of time: 35
x in moment of time: 40
x in moment of time: 45
x in moment of time: 50
x in moment of time: 55
x in moment of time: 60
x in moment of time: 65
x in moment of time: 70
x in moment of time: 75
x in moment of time: 80
x in moment of time: 85
x in moment of time: 90
x in moment of time: 95

This code sets the initial value of variable x to 0, then uses a for loop to execute a block of code repeatedly as long as x is less than 100, incrementing the value of x by 5 with each iteration.

During each iteration of the loop, the code within the curly braces is executed, which in this case is a call to document.write() to display the current value of x. The output shows the value of x after each iteration, starting from 0 and increasing by 5 each time, until it reaches 100 or greater and the loop stops.

JavaScript Switch Statement

A switch statement is a control flow statement used in programming that allows a value to be tested against a list of cases. It is similar to an if-else statement but is more concise and can be easier to read for certain scenarios.

The switch statement takes an expression as an input, which is evaluated against multiple cases. Each case consists of a specific value or a range of values to compare the expression against. If the expression matches a case, the statements associated with that case are executed. If there is no match, a default case is executed (if provided).

We need break statements in switch statements to ensure that only the code corresponding to the matching case statement is executed and the execution of the switch statement is terminated. Without a break statement, execution will "fall through" to the next case statement and possibly execute that code as well. This can lead to unexpected behavior and bugs in the program.


<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>

<script>

	var option = "a";
	
	switch(option) {
		case "a":
			document.write("User needs A");
			break;
		case "b":
			document.write("User needs B");
			break;
		case "c":
			document.write("User needs C");
			break;
		default:
			alert("I am from default");	
	}
		
</script>
	
</body>
</html>

This is code that uses a switch statement to check the value of the variable option. The switch statement tests the value of the expression (option) against multiple cases.

In this example, the value of option is "a". The switch statement checks the value of option against three cases: "a", "b", and "c". Since option matches the first case, "a", the code inside that case is executed. In this case, it writes the message "User needs A" to the document using document.write().

After the case is executed, the break statement terminates the switch statement, preventing execution of the other cases. If none of the cases match, the default case is executed. In this example, it displays an alert message "I am from default".

Switch statements are useful in situations where you need to evaluate a variable or an expression against a series of possible values and take different actions based on the value. They can help simplify code and improve performance compared to using multiple if-else statements.

For example, switch statements are commonly used in menu systems, where different options may trigger different actions based on the user's selection. They are also used in data processing and analysis, where different types of data may require different processing logic.

The default keyword is used to define the default case that will be executed if none of the cases match the input value. It is similar to the else clause in an if-else statement.

If none of the cases match the input value, the code in the default block will be executed. The default case is optional, and it is not necessary to include it in a switch statement. However, it is considered good practice to include a default case to handle unexpected input values.