Define JavaScript | DHTML

JavaScript is used to create dynamic and interactive web pages. It was developed by Brendan Eich in 1995. JavaScript is a client-side scripting language, indicating that the source code is executed within the client's web browser instead of being processed on the web server. In an HTML file, JavaScript must be inserted between an opening <script> tag and a closing </script> tag, and it can be put in the <body> or in the <head> section. JavaScript is a case-sensitive language, means that there is a difference between uppercase and lowercase letters.

DHTML stands for Dynamic HTML. It is not any one specific technology, it is a group of technologies, including HTML, CSS, JavaScript, VBScript, Document Object Model (DOM), etc.

JavaScript is one of the 3 languages all web designers must learn:

HTML: to define the content of web pages.
CSS: to specify the layout/styling of web pages.
JavaScript: to program the behavior of web pages.

JavaScript - Script Tag

The HTML <script> tag is used to include either an external script file or to define an internal script for the HTML document. Simple JavaScript code can be written into an HTML file, complex code is kept in separate JavaScript files.

The benefit of a separate file is that:

You can apply the same code to many different web pages.
The Browser will download it and store it in the cache memory so that webpage speed will increase.

Syntax: Inline JavaScript

Click on me to change my background color.

<p onclick="this.style.background='#ff5555'">Click on me to change my background color.</p>

Syntax: Internal JavaScript inside head

<head>
    <script>
        <!--Some JS Code-->
    </script>
</head>

Syntax: Internal JavaScript inside body

<body>
    <script>
        <!--Some JS Code-->
    </script>
</body>

Syntax: External JavaScript

<script src="folder/sub-folder/script.js"> </script>

The JavaScript tag has 2 attributes:

type attribute: <script type="text/javascript"> used to define the type of script language. In modern HTML it is not required anymore.
language attribute: <script language="javascript"> This attribute is no longer required. In modern HTML, the default scripting language is JavaScript.

JavaScript - Examples

JavaScript examples which help you learn how to apply JavaScript in an HTML file.

Example 1: Display message 'Hello world' on document.

<body>
    <p>JavaScript program to display 'Hello world' on document</p>
    <script>
        document.write("Hello world");
    </script> 
</body><!--Source Code: https://www.ankitweblogic.com -->

JavaScript program to display 'Hello world' on document

Example 2: Display message 'Hello world' on console. To open the console window, right click on the browser, select Inspect, then select Console.

<body>
    <p>JavaScript program to display 'Hello world' on console</p>
    <script>
        console.log("Hello world");
    </script> 
</body><!--Source Code: https://www.ankitweblogic.com -->

Output will be displayed in the console window (F12).

While writing code there may be a possibility of errors. However, by default, users do not able to view errors in the browser. To see errors, "developer tools" have been embedded in browsers. Developer tools not only allow us to see errors, but they can run commands, examine variables, and much more. In Google Chrome to open the console tab, shortcut key is F12.

Example 3: Display the message 'Hello world' using a function inside a paragraph tag. 1

<body>
    <p>JavaScript program to display 'Hello world' using function inside paragraph tag</p>
    <input type="button" onclick="message()" class="mb-3" value="Display Message">
    <p id="output">Output</p>
    <script>
        function message(){
            document.getElementById("output").innerHTML = "Hello world";
        }
    </script> 
</body><!--Source Code: https://www.ankitweblogic.com -->

Example 4: Input username and display with hello message. 1

<body>
    <form>
        Enter Name <input type="text" id="t1"> <br><br>
        <input type="button" value="Click Me!" onclick="username()"> <br>
        <p id="msg"> </p>
    </form>
    <script>
        function username() {
            var name = t1.value;
            document.getElementById("msg").innerHTML = "Hello " + name;
        }
    </script>
</body><!--Source Code: https://www.ankitweblogic.com -->

Example 5: Input 2 numbers and find sum. 1

<body>
    Enter First Number <input type="text" id="t1"> <br><br>
    Enter Second Number <input type="text" id="t2"> <br><br>
    <input type="button" value="Sum" onClick="sum()"> <br>
    <p id="result"> </p>
    <script> 
        function sum() { 
            let a = parseInt(t1.value);  
            let b = parseInt(t2.value);
            let c = a + b;
            document.getElementById("result").innerHTML = "Sum=" + c;
        }
    </script>
</body><!--Source Code: https://www.ankitweblogic.com -->

JavaScript Feedback, Questions, Suggestions, Discussion.

Ad: