JavaScript Tutorial

In this JavaScript tutorial series, we explain everything step by step, from the basics to advanced concepts. Each chapter contains simple code examples to help you understand better. By practicing these examples, you'll quickly improve your JavaScript skills and take your web development journey to the next level. So, let's get started!

JavaScript is a popular programming language.

JavaScript primarily used for web development.

It makes your website dynamic.

Start Learning JavaScript with W3Studies'.

Learn JavaScript with Easy Examples

Each chapter in this JavaScript tutorial includes many practical examples. Practicing these examples will help you understand JavaScript concepts faster. Use our interactive online editor to practice and sharpen your JavaScript skills effectively.

Example 1:

JavaScript can do anything on your HTML document you can think. In this example, you can see how javascript changes the font-size of a HTML paragraph.

Click the button below to change my font size.

Try It Yourself

Change fontSize = "32px" to any value to see how it works! For Example: fontSize = "50px" .

Example 2:

In this example, you can see how JavaScript shows date and time of your webpage.

Click the button below to show today's date and time here...

Try It Yourself

Click the Show Output button to view the result.

Example 3:

In this example, JavaScript used to show the HTML input value.

Enter your name below and click the Submit button to show the fun!.

Try It Yourself

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Tutorial</title>
        <style>
            #username {
            	font-size: 1rem;
                padding: 0.5rem 1rem;
                border: 1px solid #eee;
                border-right: none
            }
            button {
            	background: rgb(221, 221, 221);
                border-radius: 0px 0.3rem 0.3rem 0px;
                border: none;
                padding: 0px 0.8rem;"
            }
            p {margin-top: 0.5rem;}
        </style>
    </head>
    <body>
      	<p>Enter your name below and click the Submit button to show the fun!.</p>
        <div style="display: flex;">
            <input placeholder="Enter your name" id="username" type="text"/>
            <button onclick="showWelcomeMessage()">Submit</button>
        </div>
        <p id="welcomeMessage"></p>
        <script>
            function showWelcomeMessage() {
                // Get the value from the input field
                const name = document.getElementById('username').value;

// Display the welcome message
                if (name) {
                    document.getElementById('welcomeMessage').innerHTML = `Hi <strong style="color:tomato">${name}</strong>, Welcome to JavaScript tutorial!`;
                } else {
                    document.getElementById('welcomeMessage').innerHTML = "Please enter your name!";
                }
            }
        </script>
    </body>
</html>

← Home

JavaScript Introduction →

JavaScript Tutorial

Learn JavaScript with Easy Examples

Example 1:

Try It Yourself

Example 2:

Try It Yourself

Example 3:

Try It Yourself

Post a Comment

HTML Comments

w3studies | Free web Tutorials

Contact form

JavaScript Tutorial

Learn JavaScript with Easy Examples

Example 1:

Try It Yourself

Example 2:

Try It Yourself

Example 3:

Try It Yourself

You may like these posts

Post a Comment

Contact form