The Project | About Us | Contribute | Donations | License

HOME

Welcome to your first hands-on experience with JavaScript! In this section, we'll guide you through writing and running your very first JavaScript program. By the end of this lesson, you'll have a basic understanding of how to write JavaScript code and see it in action.

Objectives

Understand the basic structure of a JavaScript program.
Learn how to write and run JavaScript code in a web browser.
Get familiar with basic JavaScript syntax.

Prerequisites

Before starting, ensure you have set up your development environment as described in the previous section.

Writing Your First JavaScript Program

Step 1: Create an HTML File

JavaScript is typically run in the context of a web page. To start, we'll create a simple HTML file to host our JavaScript code.

Open your text editor (e.g., VS Code, Sublime Text).
Create a new file and save it as index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First JavaScript Program</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    <script src="script.js"></script>
</body>
</html>

Step 2: Create a JavaScript File

Next, we'll create a JavaScript file that will contain our code.

In the same directory as your index.html file, create a new file and save it as script.js.

Step 3: Write Your JavaScript Code

Open script.js and write the following code:

// This is a single-line comment
/* This is a 
   multi-line comment */

// Display a message in the console
console.log("Hello, World!");

// Display an alert message
alert("Welcome to JavaScript programming!");

Explanation of the Code

Comments: Comments are used to explain code and are ignored by the JavaScript engine. Single-line comments start with //, and multi-line comments are enclosed in /* */.
console.log(): This function prints messages to the browser's console, which is useful for debugging.
alert(): This function displays an alert dialog with the specified message.

Step 4: Run Your Program

Open your index.html file in a web browser (e.g., Chrome, Firefox).
You should see the text "Hello, JavaScript!" on the web page.
An alert dialog with the message "Welcome to JavaScript programming!" should appear.
Open the browser's developer console (usually by pressing F12 or Ctrl+Shift+I) to see the "Hello, World!" message logged in the console.

Practical Exercise

Task

Modify the script.js file to:

Display a different message in the console.
Display a different alert message.

Solution

// Display a new message in the console
console.log("JavaScript is fun!");

// Display a new alert message
alert("Let's start coding with JavaScript!");

Common Mistakes

Forgetting to save files: Ensure you save both index.html and script.js before refreshing the browser.
Syntax errors: JavaScript is case-sensitive. Ensure you use the correct case for functions like console.log() and alert().

Summary

In this lesson, you wrote and ran your first JavaScript program. You learned how to:

Create an HTML file to host your JavaScript code.
Write basic JavaScript code to display messages.
Run your JavaScript code in a web browser.

Next, we'll dive deeper into JavaScript syntax and basics to build a strong foundation for your programming journey.

Your First JavaScript Program

Objectives

Prerequisites

Writing Your First JavaScript Program

Step 1: Create an HTML File

Step 2: Create a JavaScript File

Step 3: Write Your JavaScript Code

Explanation of the Code

Step 4: Run Your Program

Practical Exercise

Task

Solution

Common Mistakes

Summary

JavaScript: From Beginner to Advanced

Module 1: Introduction to JavaScript

Module 2: Control Structures

Module 3: Functions

Module 4: Objects and Arrays

Module 5: Advanced Objects and Functions

Module 6: The Document Object Model (DOM)

Module 7: Browser APIs and Advanced Topics

Module 8: Testing and Debugging

Module 9: Performance and Optimization

Module 10: JavaScript Frameworks and Libraries

Module 11: Final Project