How to run JavaScript

Posted on Jan 28, 2023

JavaScript is a popular programming language that is widely used to create interactive and dynamic websites. In this post, we will take a look at how to run JavaScript code on a web page, and provide some basic examples to help you get started.

First, let’s take a look at how to add JavaScript to a web page. There are two main ways to do this: by adding the code directly to the HTML file, or by linking to an external JavaScript file.

To add JavaScript code directly to an HTML file, you can use the <script> tag. This tag can be placed anywhere within the <head> or <body> of the HTML document. Here is an example of how to add a simple JavaScript function to a web page:

<!DOCTYPE html>
<html>
<head>
  <script>
    function sayHello() {
      alert("Hello World!");
    }
  </script>
</head>
<body>
  <button onclick="sayHello()">Say Hello</button>
</body>
</html>

In this example, we have added a <script> tag to the <head> of the HTML document. Inside the script tag, we have defined a function called “sayHello” that displays an alert box with the message “Hello World!”. We have also added a button to the <body> of the HTML document, with an “onclick” attribute that calls the “sayHello” function when the button is clicked.

Another way to add JavaScript to a web page is by linking to an external JavaScript file. This is useful when you want to reuse the same JavaScript code across multiple pages or when the code becomes too large to include in the HTML file directly. To link to an external JavaScript file, you can use the <script> tag, but with the “src” attribute instead of the code inside the script tag:

<script src="script.js"></script>

Now, let’s take a look at a couple of examples of how you can use JavaScript to manipulate a web page.

Example 1: Changing the text of an element

<!DOCTYPE html>
<html>
<head>
  <script>
    function changeText() {
      document.getElementById("text").innerHTML = "New Text";
    }
  </script>
</head>
<body>
  <p id="text">Original Text</p>
  <button onclick="changeText()">Change Text</button>
</body>
</html>

In this example, we have an HTML element with an id of “text”. We have also defined a JavaScript function called “changeText” that uses the document.getElementById() method to access the element and change its innerHTML property to “New Text”. We have also added a button that when clicked calls the “changeText” function and changes the text of the element.

Example 2: Validating a form

<!DOCTYPE html>
<html>
<head>
  <script>
    function validateForm() {
      var x = document.forms["myForm"]["email"].value;
      if (x == "") {
        alert("Email must be filled out");
        return false;
      }
    }
  </script>
</head>
<body>
  <form name="myForm" onsubmit="validateForm()">
      Email: <input type="text" name="email"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

In this example, we have a simple HTML form with a text input for email. We have also defined a JavaScript function called “validateForm” that uses the “document.forms” method to access the form and retrieve the value of the email input. If the email input is left blank, the function displays an alert box with the message “Email must be filled out” and returns false, preventing the form from being submitted. We have also added an onsubmit attribute to the form that calls the “validateForm” function when the form is submitted.

These are just a few examples of how you can use JavaScript to manipulate a web page. With a little practice and experimentation, you can create all sorts of interactive and dynamic effects on your website.