Table of Contents
Before we dive into writing the “Hello World” program, let’s understand some basics of JavaScript programming. JavaScript is a client-side scripting language that is embedded in HTML web pages and runs on web browsers. It is a dynamically typed language, which means that the data type of a variable is determined at runtime. JavaScript also supports object-oriented programming (OOP) concepts such as objects, classes, and inheritance.
JavaScript code can be written directly in an HTML file using <script> tags or in an external JavaScript file with a .js extension. The code written in the <script> tags can be placed in the <head> or <body> section of an HTML file. JavaScript code is interpreted and executed by the web browser, making it an essential part of web development.
Writing the “Hello World” program
Now that we have a basic understanding of JavaScript, let’s dive into writing the “Hello World” program. The “Hello World” program in JavaScript is straightforward and consists of a single line of code. Here’s how you can write it:
console.log("Hello World");In this code, console.log() is a built-in function in JavaScript that prints the string “Hello World” to the console, which is a debugging tool in web browsers. The console.log() function is widely used for debugging and testing JavaScript code.
Understanding the code
Let’s break down the “Hello World” program code to understand it better:
console.log() is the function that prints the output to the console. It is followed by parentheses that contain the string “Hello World” enclosed in double quotes. This string is the output that will be displayed in the console when the program is executed.
The “Hello World” program is a simple example of how JavaScript can be used to display output to the console. However, JavaScript can also be used to interact with HTML elements, manipulate the DOM (Document Object Model), and create dynamic web pages.
Executing the program
To execute the “Hello World” program, you need to create an HTML file and add the JavaScript code to it. Here’s an example of how you can do it:
- Create a new HTML file with a .html extension.
- Open the HTML file in a text editor.
- Add the following code inside the `<body>` of the HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script>
console.log("Hello World");
</script>
</body>
</html>In this code, we have included the JavaScript code within the <script> tags, which is embedded directly in the HTML file. The JavaScript code console.log(“Hello World”); will print “Hello World” to the console when the HTML file is loaded in a web browser.
You can now open the HTML file in a web browser and view the console output to see the “Hello World” message printed.
Variations of “Hello World” program
Although the “Hello World” program is simple, it can be customized in various ways to make it more interesting and informative. Here are some variations of the “Hello World” program in JavaScript:
Alert box: Instead of printing the message to the console, you can display it in an alert box using the alert() function. Here’s an example:
alert("Hello World");This will display a pop-up alert box with the “Hello World” message.
Writing to HTML: You can also write the “Hello World” message directly to an HTML element using JavaScript. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<p id="hello-world"></p>
<script>
document.getElementById("hello-world").innerHTML = "Hello World";
</script>
</body>
</html>In this code, we have added a paragraph element with an id of “hello-world” in the HTML file. The JavaScript code document.getElementById(“hello-world”).innerHTML = “Hello World”; retrieves the element by its id and sets its inner HTML to “Hello World”, which will display the message in the paragraph element.
Styling with CSS: You can also add CSS styles to the “Hello World” program to make it visually appealing. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
#hello-world {
font-size: 24px;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<p id="hello-world">Hello World</p>
<script>
// JavaScript code here
</script>
</body>
</html>
In this code, we have added CSS styles to the paragraph element with an id of “hello-world” to change its font size, color, and alignment.
