Hello World!
Welcome to your first JavaScript lesson! In this lesson, we’ll cover the basics of writing and running your first JavaScript program. The classic “Hello World” example is a simple yet powerful way to get started with any programming language.
What is JavaScript?
JavaScript is a versatile and powerful programming language primarily used for creating interactive and dynamic web pages. It allows you to implement complex features on web pages, such as interactive forms, animations, and much more.
Getting Started
Step 1: Setting Up Your Environment
To write and run JavaScript, you’ll need the following:
- A Text Editor: You can use any text editor like Visual Studio Code, Sublime Text, or even Notepad.
- A Web Browser: Modern browsers like Google Chrome, Firefox, or Edge.
Step 2: Writing Your First JavaScript Code
We’ll start by writing a simple “Hello World” program. JavaScript can be written directly in an HTML file or in a separate JavaScript file. For this lesson, we’ll include JavaScript within an HTML file.
Option 1: Inline JavaScript in HTML
- Open your text editor and create a new file.
- Save the file as
index.html. - Add the following code to your
index.htmlfile:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World in JavaScript</title>
</head>
<body>
<h1>Hello World in JavaScript</h1>
<script>
// This is a JavaScript comment
// The following line of code will display "Hello, World!" in the browser's console
console.log('Hello, World!');
</script>
</body>
</html>
- Open
index.htmlin your web browser. - Open the browser’s console (Right-click > Inspect > Console) to see the “Hello, World!” message.
Option 2: External JavaScript File
- Create a new file in your text editor.
- Save the file as
script.js. - Add the following code to your
script.jsfile:
// This is a JavaScript comment
// The following line of code will display "Hello, World!" in the browser's console
console.log('Hello, World!');
- Modify your
index.htmlfile to include the external JavaScript file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World in JavaScript</title>
</head>
<body>
<h1>Hello World in JavaScript</h1>
<script src="script.js"></script>
</body>
</html>
- Open
index.htmlin your web browser. - Open the browser’s console (Right-click > Inspect > Console) to see the “Hello, World!” message.
Explanation
- HTML Structure: The
<!DOCTYPE html>declaration defines the document type. The<html>,<head>, and<body>tags structure the HTML document. - JavaScript Code: The
console.log('Hello, World!');statement prints the “Hello, World!” message to the browser’s console. Theconsole.log()function is a simple way to output information for debugging purposes.
Practice
Try modifying the “Hello, World!” message to something else, like “Hello, JavaScript Learner!” and see the changes in the console. Experiment with adding more console.log() statements to get comfortable with the syntax.
console.log('Hello, JavaScript Learner!');
console.log('Welcome to JavaScript programming!');