HTML – HTML with Javascript


What is a javascript?

Javascript is a computer programming language used to do changes in Webpages.

Javascript is an object oriented scripting language allows to interact with multiple webpages.

Javascript allow client-side script to interact with the user and make dynamic pages.

JavaScript code can be written into an HTML page and when a user requests an HTML page with JavaScript in it,The script is sent to the browser and the browser does something in the webpages.

How Javascript is applied in HTML ?

There are three ways we can apply Javascript in HTML document.

1. Inline action

2. Internal action

3. External action

1. Inline action

Inline Javascript is used to apply a unique action to a single HTML element.

HTML events are triggered inline for that particular HTML element.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>HTML with Javascript</title>
        </head>
        <body>
                <input type="button" style="width:330px" value="Click" onclick="alert('Hello, How are you doing today')">
        </body>

</html>

Output :


HTML coding for a website !!!

Click to Learn More about – HTML Tutorial for beginners

2. Internal action

Internal Javascript is used to define an action for elements in HTML page.

Internal Javascript is defined inside the <head> section of an HTML page.

<script></script> tag is added inside the <head> element.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>HTML with Javascript</title>
                <script>
                function myFunction(){
                        alert("HI, How are you doing today ?");

                }
                        </script>
        </head>
        <body>
                <input type="button" style="width:330px" value="Click" onclick="myFunction()">
        </body>

</html>

Output :

3. External action

External Javascript file is used to apply action to the HTML elements.

External Javascript is defined inside the <head> section of an HTML page.

<script></script> tag along with “type” , “src” attributes are used inside the <head> element.

Example :

<!DOCTYPE html>
<html>
        <head>
                <title>HTML with Javascript</title>
                <script type="text/javascript" src="external.js">
                </script>
        </head>
        <body>
                <input type="button" style="width:330px" value="Click" onclick="myFunction()">
        </body>

</html>

Javascript file external.js

function myFunction(){
        alert("Hi, How are you doing today ?");
}

Output :

Frequently used Javascript events.

1. onBlur


        When form input loses focus

2. onClick

        When the user clicks on a form element or a link

3. onSubmit

        When user submits a form to the server.

4. onLoad

        When page loads in a browser.

5. onFocus

        When user focuses on an input field.


27 comments

  14. I’m really enjoying the theme/design of your web site.
    Do you ever run into any internet browser compatibility
    problems? A handful of my blog audience have complained about my blog
    not operating correctly in Explorer but looks great in Opera.
    Do you have any recommendations to help fix this problem?

    Frankrijk Shirt

    1. Thanks a lot, I am using a standard word press theme and they will handle the browser compatibility.
      I would suggest you to analyse the themes and if possible take a backup and move your content to new theme,
      We have to check all the things are perfect.
      Thanks.

Comments are closed.