JavaScript Tutorial

JS Introduction

JavaScript is the programming language of the web. It allows you to make your web pages dynamic, interactive, and responsive. This introduction covers what JavaScript is, how it works, and how you can start using it in your own projects.

What is JavaScript?

JavaScript (JS) is a lightweight, powerful programming language used to create dynamic behavior on websites. While HTML structures a page and CSS designs it, JavaScript brings it to life.

Why Learn JavaScript?

It runs directly in all web browsers
It is the most popular programming language
It is used in frontend, backend (Node.js), mobile apps, and even servers
Modern frameworks like React, Vue, and Angular are built on it

Where Does JavaScript Run?

JavaScript runs inside the browser (Chrome, Firefox, Edge, Safari).

You can also run JavaScript on servers using Node.js.

How to Use JavaScript?

You can add JavaScript directly inside your HTML using the <script> tag.

Looking Back

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

We know that Hypertext Markup Language (HTML) elements are the building blocks of web pages.

And, Cascading Style Sheet (CSS) is used for designing HTML elements.

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

Note: JavaScript runs line by line (synchronous execution)
It can interact with HTML and CSS
JavaScript is case-sensitive
All modern browsers support JS without installation
Use the browser console to test JS quickly

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

<!DOCTYPE html>
<html>
<body>
    <h2>JavaScript Introduction Example</h2>
    <p id="demo">JavaScript can change HTML content.</p>
    <button onclick="changeText()">Click Me</button>
    <script>
        function changeText() {
            document.getElementById("demo").innerHTML = "Hello JavaScript!";
        }
    </script>
</body>
</html>

In the 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 the button is clicked.

Show a Dialog Example

EXAMPLE play_arrow Run Code


<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
   <style type="text/css">
      button {
         font-family: sans-serif;
         border: none;
         padding: 15px 30px;
         font-size: 20px;
         outline: none;
         margin: 10px;
      }
      #btn {
         background-color: rgb(23, 52, 89);
         color: #f8f9f9;
         box-shadow: .5px .5px 1px 2px #000000;
      }
   </style>
</head>
<body>
   <button id="btn"> Show a Dialog </button>

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

What can JavaScript do?
Well, a lot! Here are some:
JavaScript can change the content of HTML elements

Change Value example

EXAMPLE play_arrow Run Code

<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <p id="demo"> Hello World! </p>
   <button type="button" onclick="myFunc()"> Change Value </button>

   <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.

Change Image Example

EXAMPLE play_arrow Run Code


<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <img src="https://amansin.weebly.com/uploads/4/6/7/8/46784111/car4.png" id="image" />
   <button type="button" onclick="myFunc()"> Change Image </button>

   <script>
      function myFunc() {
         document.getElementById("image").src = "https://amansin.weebly.com/uploads/4/6/7/8/46784111/car2.jpg";
      }
   </script>
</body>
</html>

JavaScript can change the styling of HTML elements.

Change Style Example

EXAMPLE play_arrow Run Code


<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <p id="demo" style="color: gold"> Hello World! </p>
   <button type="button" onclick="myFunc()"> Change Style </button>

   <script>
      function myFunc() {
         document.getElementById("demo").style.color = "green";
         document.getElementById("demo").style.fontWeight = "bold";
         document.getElementById("demo").style.fontSize = "300%";
      }
   </script>
</body>
</html>

This example contains a feature that can show or hide HTML elements.
This is another example of changing HTML styles.

Show Hide Example

EXAMPLE play_arrow Run Code


<!DOCTYPE html>
<html>
<head>
   <title> Try It Yourself </title>
</head>
<body>
   <div id="demo" style="width: 200px; height: 200px; background-color: yellow"> Hello World! </div>
   <button type="button" onclick="show()"> Show </button>
   <button type="button" onclick="hide()"> Hide </button>

   <script>
      function show() {
         document.getElementById("demo").style.display = "block";
      }
      function hide() {
         document.getElementById("demo").style.display = "none";
      }
   </script>
</body>
</html>

Explanation

This example demonstrates how JavaScript interacts with HTML.

The <button> triggers a function called changeText()

The function uses document.getElementById() to access an HTML element

Then it replaces the text inside the element with new content
This shows the fundamental power of JavaScript: modifying the web page dynamically based on user interaction.

chevron_left JS Overview JS Writing Code chevron_right