This is an extension of the hands-on section, using a few simple methods to deepen your impression of JavaScript.

Using the alert Function

The alert function is used to display a simple dialog box with a message and an OK button. It is often used for debugging or to provide information to the user.

Syntax: 

  alert(message);
  • message: The text you want to display in the alert box.

Example: 

  alert('Hello, JavaScript!');

Explanation:

  • When the above code is executed, a dialog box appears with the message “Hello, JavaScript!” and an OK button. The user must click OK to close the dialog box and proceed.

Example Code with alert

Let’s create a simple HTML file that includes JavaScript to demonstrate the use of the alert function.

HTML(index.html):

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alert Example</title>
</head>
<body>
    <h1>JavaScript Alert Example</h1>
    <button onclick="showAlert()">Click Me</button>

    <script type="text/javascript">
        function showAlert() {
            alert('Hello, JavaScript!');
        }
    </script>
</body>
</html>

Explanation:

  • The HTML contains a button with an onclick event that triggers the showAlert function.
  • The showAlert function contains the alert function, which displays a dialog box with the message “Hello, JavaScript!”.

Bonus

It’s best if you can understand this part, but it’s okay if you don’t; we will explain it in detail later.

alert is a Build-in function of javascript.

Built-in functions

Built-in functions are predefined functions that are provided by a programming language or environment, ready to be used without the need for any additional code or importation of libraries. These functions perform a variety of tasks, ranging from basic input/output operations to more complex mathematical calculations and data manipulations.

What is a Built-in Function in JavaScript?

Built-in functions, also known as native functions, are functions that come packaged with the JavaScript language. These functions are globally available and can be used directly in your code. Examples of built-in functions include alert(), console.log(), parseInt(), and many more.

Characteristics of Built-in Functions:

  • Predefined: Provided by the JavaScript environment.
  • No Import Needed: Can be used directly without any additional setup.
  • Optimized: Typically more efficient and reliable as they are part of the language.

Custom Function Example (Not Built-in)

In contrast to built-in functions, you can create your own custom functions to perform specific tasks. In general, the functions we write ourselves belong to this category.

Example:

HTML,CSS and JavaScript(index.html)

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Alert Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .custom-alert {
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            padding: 20px;
            background-color: #f44336;
            color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
        }
        .custom-alert.hidden {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Custom Alert Example</h1>
    <button onclick="showCustomAlert('Hello, Custom Alert!')">Show Custom Alert</button>

    <script type="text/javascript">
        function showCustomAlert(message) {
            // Create a custom alert box
            const alertBox = document.createElement('div');
            alertBox.className = 'custom-alert';
            alertBox.innerHTML = message;

            document.body.appendChild(alertBox);

            // Remove the alert box after 2 seconds
            setTimeout(() => {
                document.body.removeChild(alertBox);
            }, 2000);
        }
    </script>
</body>
</html>

Explanation:

  • HTML: The HTML includes a button that, when clicked, triggers the showCustomAlert function.
  • CSS: The CSS styles the custom alert box, giving it a fixed position, padding, background color, and other visual properties.
  • JavaScript: The showCustomAlert function creates a div element for the custom alert box, styles it using the class .custom-alert, and inserts it into the DOM. The alert box is automatically removed from the DOM after 2 seconds using setTimeout.