Day 1: Getting Started with JavaScript

Introduction

Welcome to the first day of your JavaScript journey! JavaScript is a powerful, versatile language used for web development, and it’s an essential skill for any aspiring web developer. Today, we will set up your development environment and write your first lines of JavaScript code.

Setting Up Your Environment

1. Install Visual Studio Code
Visual Studio Code (VS Code) is a popular, free code editor that supports JavaScript and many other languages. Follow these steps to install it:

Go to the VS Code download page.
Download and install the appropriate version for your operating system (Windows, macOS, or Linux).
Launch VS Code after installation.

2. Setting Up Your Browser for JavaScript
Modern web browsers like Google Chrome come with built-in developer tools that make it easy to write and test JavaScript. We will use Chrome for this tutorial:

Download and install Google Chrome if you don’t already have it.
Open Chrome and press Ctrl + Shift + J (Windows/Linux) or Cmd + Option + J (macOS) to open the JavaScript console.

Writing Your First JavaScript Code

Now that we have our tools ready, let’s write our first JavaScript program. We’ll start with the classic “Hello, World!” example.

1. Using the Browser Console

Open the Chrome Developer Tools console.
Type the following code into the console and press Enter:

console.log(“Hello, World!“);

You should see “Hello, World!” printed in the console.

2. Creating a JavaScript File

Open VS Code and create a new file named index.html.
Add the following HTML code to the file:

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<title>JavaScript Day 1</title>

</head>

<body>

<h1>Welcome to JavaScript!</h1>

<script src=“app.js”></script>

</body>

</html>

Save the file and create another file in the same directory named app.js.
Add the following JavaScript code to app.js:

console.log(“Hello, World from app.js!“);

Save the file.

3. Running Your Code

Open index.html in your browser.
Open the Chrome Developer Tools console (Ctrl + Shift + J or Cmd + Option + J).
You should see “Hello, World from app.js!” printed in the console.

Understanding the Basics

1. What is JavaScript?
JavaScript is a programming language that allows you to implement complex features on web pages. It enables interactive web pages and is an essential part of web applications.

2. How JavaScript Works
JavaScript runs in the browser and interacts with HTML and CSS to create dynamic web pages. The browser’s JavaScript engine executes the code, making it possible to manipulate the content and behavior of web pages.

3. JavaScript Syntax
JavaScript code consists of statements that are executed by the browser. Here are a few basic concepts:

Statements: Instructions that perform actions. Each statement ends with a semicolon (;).

Comments: Used to add explanatory notes. Single-line comments start with //, and multi-line comments are enclosed in /* */.

Variables: Used to store data values. Variables are declared using var, let, or const.

Example:

// This is a single-line comment

let message = “Hello, JavaScript!“;

console.log(message); // Output: Hello, JavaScript!

Summary

Today, we set up our development environment and wrote our first JavaScript code. We’ve learned how to use the browser console and create a basic HTML file with an external JavaScript file. Understanding these fundamentals is crucial as we continue our journey into JavaScript.

Stay tuned for Day 2, where we’ll dive into variables and data types!