6.4. Basics of JavaScript: Dialog Boxes, Events, and Creating HTML Elements



Interacting with Users through Browser Dialog Boxes

When you visit a web page, you can interact with it using various elements and functions to obtain information or manipulate its content. With JavaScript, you can create a full-fledged browser game based on the principles outlined below.

Sometimes, you may need to use browser functions (APIs), some of which are presented below:

alert() - displays a dialog box with a message for the user.


alert("Hello, this is an important message!");

prompt() - displays a dialog box with an input field so the user can enter data.


let name = prompt("What's your name?");

confirm() - displays a dialog box with a question that the user can answer with "OK" or "Cancel". The result of the function execution is a boolean value: true or false.


let confirmation = confirm("Are you sure?");

Exercise 1. Write a function called product that calculates the product of two numbers requested through prompt(). Display the result of the product using alert(), and then continue or stop the script execution using confirm().


See the Pen Browser_API_EN by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.



Events handling and Their Applications

Events are various actions that can occur on a web page, such as key presses, mouse clicks, or page loading. You can use events to create interactive and responsive web applications. It's worth noting that the operation of spyware programs, such as keyloggers, is also based on keyboard and mouse events.

There are different events for many elements, such as page loading, button or image clicks, and much more. To track and respond to events, a special function called addEventListener() is used. The syntax of the function looks like this:

object.addEventListener(event_name, function_to_execute);

The object can be the browser itself, a specific button, an image, or a text block. An event handler is attached to this object, specifying which event to respond to and which function to execute. Let's look at some events. 

Keyboard events (e.g., keydown and keyup) allow you to track key presses. Example:

document.addEventListener("keydown", function(event) {  if (event.key === "Enter") {    alert("You pressed the Enter key");  }});

This code might look unfamiliar, so let's simplify it a bit:

document.addEventListener("keydown", keyPressed);
function keyPressed(event) {  if (event.key === "Enter") {    alert("You pressed the Enter key");  }}

We simply declared the function separately and referenced it in the event handler. Notice that we don't use parentheses after the function name in the event handler. 

Mouse events (e.g., click, mouseover, mouseout) allow you to respond to mouse actions. Example:

let button = document.querySelector("#myButton");
button.addEventListener("click", function() {  alert("The button was clicked!");});


Browser events (e.g., load, resize) are triggered by specific browser actions. Example:

window.addEventListener("resize", function() {  alert("The browser window was resized!");});

Let's consider a simple example. Suppose you want to create a simple counter that increases with each button click: 

See the Pen Counter_EN by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.


In this example, we created a button and a counter that increases with each button click. This demonstrates how events and browser APIs can be used to create interactive web applications.

Exercise 2. The page displays a circle. Write a function called changeSize() that changes the size of the circle when a number key from 1 to 9 is pressed. To change the size of the circle, you need to simultaneously change the width and height properties. Don't forget to add px, for example, like this: element.style.width = "10px";


See the Pen Change Circle Size_EN by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.



Dynamic Creation and Deletion of HTML Elements

Dynamic creation and deletion of elements on a web page means that you can add new elements (such as text, images, buttons, etc.) or remove existing elements from a web page using JavaScript. This is useful when you need to change the content of a page in real-time, such as when creating interactive web applications or updating information without reloading the page.

Which functions are responsible for creating and deleting elements?

document.createElement(tagName): This function creates a new element with the specified tag name. For example, document.createElement("p") will create a new paragraph element <p>.

append(element): This method adds the specified node (element) to the end of the parent element. For example, parent.append(newElement) will add newElement to the end of the parent element.

remove(element): This method removes the specified node (element) from its parent element. For example, parent.remove(element) will remove the element from the parent element. 

Example of creating an element:

// Create a new elementlet newElement = document.createElement("p");
// Set the text content for the elementnewElement.textContent = "New Element";
// Add the element to the end of a containerparent.append(newElement);
// Add the element to the beginning of a containerparent.prepend(newElement);


Example of removing an element:

// Find the element to be removed (e.g., the first <p> element in a container)let elementToRemove = container.querySelector("p");
// Remove the element from the containercontainer.remove(elementToRemove);

Knowing how to create and delete elements with JavaScript can be used to completely change the content of web pages in vulnerable applications. For example, you could create a login form on a website, and the victim's entered data would be automatically sent to the attacker's server.