What is JavaScript?

JavaScript is a programming or scripting language that allows the implementation of features on the web pages

Looking Back

To better understand JavaScript, we can look back at what we already know.

We know that HTML elements are the building blocks of web pages

And CSS is used for designing HTML elements.

JavaScript on the other hand, is what implements the features of web pages.

We can simplify this explanation by taking a look at this example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css */
        button{
            font-family: sans-serif;
            border: none;
        }
        #btn {
            background-color: darkred;
            color: white;
        }
    </style>
</head>
<body>
    <button id="btn">Show a Dialog</button>

    <!-- javascript -->
    <script>
        document.getElementById('btn').onclick = function() {
            alert('I am a dialog box')
        }
    </script>
</body>
</html>

Note!

As you may notice, this web page contains HTML, CSS and JavaScript

In this example, HTML is used to create the button, then CSS is used to design it. Finally JavaScript is used to add a simple function that shows a dialog box when clicked.

What can JavaScript do?

Well, alot! Here are some:

JavaScript can change the content of HTML elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id="demo">Hello World!</p>
    <button type="button" onclick="myFunc()">Change Value</button>

    <!-- javascipt code -->
    <script>
        function myFunc() {
            document.getElementById("demo").innerHTML = "Hello Everyone!";
        }
    </script>
</body>
</html>

JavaScript can change the value of attributes

In this example, the value of the src attribute is changed.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="../assets/404.png" id='image'>
    <button type="button" onclick="muFunc()">Change Image</button>

    <!-- javascript -->
    <script>
        function muFunc() {
            document.getElementById('image').src = "../assets/banner.png"
        }
    </script>
</body>
</html>
Back to top