A JavaScript program is made up of a series of statements that are normally processed from top to bottom. It usually represents a single step in a JavaScript program.
Each statement (also known as command) is a single line that indicates an action for the web browser to perform. JavaScript statements are the fundamental sentences like building blocks used to make a program.
These statements consist of tokens, namely keywords, literals, separators, operators, identifiers, function calls, object references, etc. placed together in an order that is meaningful to a JavaScript interpreter.
All JavaScript statements are ended with a semicolon. A semicolon tells the browser about end of the statement.
Since JavaScript is a forgiving language, most browsers are very forgiving and still interpret most statements correctly even if we ignore to write the ending semicolon.
However, it is good programming practice to write the semicolon to tell the browser about end of the statement.
Syntax to Write First JavaScript Program: Hello World
A popular example used for presenting a new language is the “Hello World!” program. It is perhaps the easiest program we could ever write.
This program simply prints the words “Hello World!” on the screen. Here, we will see a simple structure of “Hello World” program in JavaScript.
[blocksy-content-block id=”12371″]
<!DOCTYPE html>
<html>
<head>
<title>Hello World JavaScript Program</title>
</head>
<body>
<script>
document.write("Hello World!");
</script>
</body>
</html>
As you can see in the above JavaScript program, JavaScript code is inserted in the body section of the HTML document. We can put JavaScript code anywhere in the document.
A single line of code between opening <script> and closing </script> is a command that prints the output “Hello World” on the screen.
[blocksy-content-block id=”12121″]
The code written between opening <script> and closing </script> tags is called script block. There is only one script block in the above JavaScript program.
The web browser executes the JavaScript code from to bottom, therefore, the order in which code executes depends on the order of the script blocks.
The output of the above JavaScript program is given below:
Output of code:
Hello World!
The document.write() method in JavaScript is a basic way to print the text on the web page. The write() method is used to write a new text into the document object. The general syntax is as follows:
document.write("Hello World!");
Here, Hello World! is a string of characters that we want written to a web document.
Another way to write text to a web page is a document.writeIn() method that puts the text in a separate block. Whereas, document.write() method puts the text in-line with other texts.
HTML Elements Used in Webpage Structure
Here, we will understand the basic HTML tags or elements and their functions in brief used in the above JavaScript Hello World program web page.
1. <!DOCTYPE>: The <!DOCTYPE> tag is used to tell browser about the version and type of HTML used. Throughout this JavaScript tutorial, we will utilize the HTML5 <!DOCTYPE> tag. It includes a URL that references a DTD (Document Type Definition) found on the w3.org website.
[blocksy-content-block id=”12153″]
2. <html> </html>: The first set of tags beyond <!DOCTYPE> tag is <html></html> that indicates the start and end of an HTML document.
This set of tags contains all the content or code of an HTML web page. The web browsers use these tags to determine where HTML code in a file starts and end.
3. <head> </head>: This is the next set of tags in the above web page structure that contains web page title “Hello World JavaScript Program” and other document header information.
4. <title> </title>: This is known as title tag that is inserted into the <head></head> section. This set of <title></title> tags indicates the title of web page that will appear on the browser title bar and task bar when the web page is exhibited in the browser. The title does not appear in the body of web page.
5. <body> </body>: This is the final set of tags that contains the main content of web page such as text, images, graphics, links, and other content.
Note: The HTML start tags such as <html>, <head>, <title> and <body> must end with the corresponding end tags such as </html>, </head>, </title>, and </body>.
In this tutorial, we have explained all the important points related to hello world JavaScript program with example program. We hope that you will have understood the basic structure of the JavaScript program. Stay tuned with the next tutorial where we will learn about what is scripting language.
Thanks for reading!!!
