Copy and paste the following code into the file and save it.
<!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.
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.
<!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.
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.
Some tags are self-closing and others need a closing tag.
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.
- 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.
One of the methods we use to write a comment is by prefixing some text with two forward slashes ( // ).
<script> // My first app </script>
<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.
<!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.