Home / Tutorials / Javascript / First Application

Your first Javascript application

In this tutorial we write our first simple Javascript application directly inside a webpage. We also do a quick breakdown so that you understand better what's happening.

Hello World
Breakdown of your first app

Hello World

Because Javascript works inside our browser, we have to use it with some HTML. So, open your IDE and create a new file called helloworld.html inside the “Learning JS” folder.

Copy and paste the following code into the file and save it.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My First JS App</title>
</head>

<body>
  <script>
    // My first app
    document.write("Hello World");
  </script>
</body>
</html>

Now double click the file itself to open it up in your browser. You should see the words Hello World on the page.

Congratulations, you just wrote your first Javascript application. Granted, you didn’t actually write anything and it’s not exactly spectacular, but it demonstrates how easy it is.

Breakdown of your first app

Let’s do a quick breakdown of your first app so you can understand a little better how it works.

We will start with the HTML. HTML works by nesting tags to create sections that form the structure of our webpage.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My First JS App</title>
</head>

<body>

</body>
</html>

An open tag is a keyword that’s wrapped in a left and right angle bracket.

Example:

<head>

A closing tag is the same keyword, also wrapped in left and right angle brackets. But, the closing tag has a forward slash ( / ) in front of the keyword.

Example:

</head>

Some tags are self-closing and others need a closing tag.

The content between the head tags is part of the head of the document and is typically not seen by the user that visits the site. These include things like the meta description, CSS, Javascript etc.

The content between the body tags are usually the content on the page that the user sees. Finally, the whole document is wrapped between a pair of open and close html tags.

Now, the Javascript. We have three options where to place our Javascript.

In between the HTML document’s head tags.
In between the HTML document’s body tags.
In an external file with a link to it from the HTML document.

For the sake of simplicity in our first application, we wrote our Javascript between the body tags.

When we write our Javascript directly in an HTML document, we need to enclose it inside its own open and close script tags.

Syntax:

<script>

</script>

The next line in our Javascript is a comment. Comments are used to document our code and is ignored by the translator.

One of the methods we use to write a comment is by prefixing some text with two forward slashes ( // ).

Example:

<script>
  // My first app
</script>

The next line is some actual Javascript. The write() function tells the translator that we want to write the words “Hello World” to the page.

Example:

<script>
  // My first app
  document.write("Hello World");
</script>

Anything that we write between the parentheses of will be printed to the page. As an example, change the text between the quotes to something else, save the file and reload the page in your browser.

Example:

<!DOCTYPE html>
<html>
<head>
  <title>My First JS App</title>
</head>

<body>
  <script>
    // My first app
    document.write("Greetings");
  </script>
</body>
</html>

You should now see the updated text displayed on the page.

Note: The document.write() function has an impact on the speed of the page and should typically be avoided. We use it in this course only for the sake of simplicity.

In the following tutorials we’re going to learn everything we need to write more useful applications, or extend the functionality and features of a webpage.

Environment Setup

Comments