Skip to main content

Your First JavaScript Program

In this section, we will write our first JavaScript program. We will create a simple program that displays a message in the console. Let's get started!

In the previous section, we learned how to run JavaScript code in the browser using the developer tools. In this section, we will write our first JavaScript program and run it in the browser.

There are different ways to do this and that will require some understanding of JavaScript output system and how to add JavaScript to your HTML file.

Project Setup​

To follow this guide, we will be using any text editor and a browser. Follow these steps to get started:

  1. Create a new folder on your computer and name it demo.

  2. Inside the folder, create a new file and name it index.html. You can use any text editor to create the file. Most people also right-click on the folder and open with their text editor(in this case, Visual Studio Code).

  3. Add the following code to the index.html file:

    demo/index.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>First JavaScript Program</title>
        </head>
        <body>
            <h1>Welcome to your first JavaScript program</h1>
            <script src="app.js"></script>
        </body>
    </html>

    The code above is a basic HTML template that includes a heading and a script tag that links to a JavaScript file called app.js. We will write our JavaScript code in this file.

  4. Create a new file in the same folder and name it app.js. This file will contain our JavaScript code. Add the following code to the app.js file:

    demo/app.js
    console.log('Hello, World!');

  5. Open the index.html file in your browser. You should see the message "Hello, World!" displayed in the console.

That's it! You have successfully created your first JavaScript program. You can now write more JavaScript code in the app.js file and see the output in the browser console. 😀😀

Important

We would be updating the app.js file with more JavaScript code as we progress in this guide and may never have to talk about the index.html file again since you know how to setup your project.

JavaScript Output System for Browsers​

There are different ways to output data in JavaScript Browser. Here are some of the most common ways:

  1. Console.log(): This method is used to output data to the console using console.log. It is commonly used for debugging purposes.
  2. Alert(): This method is used to display an alert box with a message and an OK button using window.alert().
  3. Document.write(): This method is used to write HTML content to the document using document.write().
  4. InnerHTML: This method is used to write HTML content to an element using element.innerHTML.

Using console.log()​

For debugging purposes, we can use the console.log() method to output data to the console. Here is an example:

demo/app.js
console.log('Hello, World!');

Using alert()​

To display an alert box with a custom message and an OK button, we can use the alert() method. Here is an example:

demo/app.js
window.alert('Hello, World!');

You can skip the window object and just use alert() instead of window.alert(). It will still work because alert() is a global function that belongs to the window object whcih is the global object in the browser.

Using document.write()​

To write HTML content to the document, we can use the document.write() method. Here is an example:

demo/app.js
document.write('Hello, World!');

it is important to note that document.write() is not commonly used in modern web development because it can overwrite the entire document if it is called after the document has been loaded. For example, if you call document.write() after the document has been loaded, it will overwrite the entire document with the content you provide.

demo/index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>First JavaScript Program</title>
    </head>
    <body>
        <h1>Welcome to your first JavaScript program</h1>
        <script src="app.js"></script>
    </body>
</html>
demo/app.js
document.write('Hello, World!');

In the example above, the document will be overwritten with the message "Hello, World!" and the previous HTML content will be overwritten by the content provided in the document.write() method.

Using innerHTML​

To write HTML content to an element on the page, we can use the innerHTML property of the element. Here is an example:

demo/index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>First JavaScript Program</title>
    </head>
    <body>
        <h1>Welcome to your first JavaScript program</h1>
        <p id="output"></p>
        <script src="app.js"></script>
    </body>
</html>
demo/app.js
document.getElementById('output').innerHTML = 'Hello, World!';

In the example above, the message "Hello, World!" will be written to the element with the ID output on the page(in this case, the paragraph element).

Note

It is important to note that using innerHTML to update the content of an element can be a security risk if the content is not sanitized properly. It is recommended to use textContent instead of innerHTML when updating text content to prevent cross-site scripting(XSS) attacks.

Conclusion​

In this section, we wrote our first JavaScript program and learned how to output data in the browser using different methods. We also learned how to set up a basic project structure for writing and running JavaScript code.

In the next section, we will learn about separation of concerns in JavaScript and why it is important.

Made with ❤️ by Fasakin Henry