Introduction to JavaScript and Setting Up Your Environment
Objective
In this tutorial, you will learn what JavaScript is, why it’s important, and how to set up your environment to start writing and executing JavaScript code.
Step 1: What is JavaScript?
JavaScript is a programming language that allows you to create dynamic and interactive content on websites. It can be used to update content, validate forms, control multimedia, and much more.
Step 2: Setting Up Your Environment
To start coding in JavaScript, you need a few basic tools:
- A Text Editor: This is where you’ll write your code. You can use Notepad (Windows), TextEdit (Mac), or a more advanced editor like Visual Studio Code (VS Code) or Sublime Text.
- A Web Browser: Any modern web browser like Google Chrome, Firefox, or Edge will work. This is where you’ll run and test your JavaScript code.
Step 3: Writing Your First JavaScript Code
Option 1: Using the Browser Console
- Open Your Browser Console:
- Right-click on any webpage and select Inspect or press
Ctrl+Shift+I(Windows/Linux) orCmd+Option+I(Mac). - Go to the Console tab.
- Right-click on any webpage and select Inspect or press
- Write Your First JavaScript Code:
- Type the following code into the console and press Enter:
console.log("Hello, World!"); - See the Output:
- You should see the text
"Hello, World!"printed in the console.
- You should see the text
Option 2: Creating an HTML File
Open Your Text Editor:
- Open Notepad, TextEdit, or any other text editor.
Write a Simple HTML File with JavaScript:
- Copy and paste the following code into your text editor:
<!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</title>
</head>
<body>
<h1>Welcome to JavaScript!</h1>
<script>
// This is where your JavaScript code goes
console.log("Hello, World!");
alert("Hello, World!");
</script>
</body>
</html>
Save the File:
- Save the file with the name
index.htmlon your computer.
Run the File in Your Browser:
- Double-click on the
index.htmlfile you saved. It should open in your default web browser. - You should see the webpage with the heading “Welcome to JavaScript!”.
- An alert box will pop up with the message “Hello, World!”.
- Open the console (right-click on the page and select “Inspect”, then go to the “Console” tab) to see the
console.logmessage.
Step 4: Understanding the Code
- HTML Structure: The basic structure of an HTML document with a
<head>and<body>section. - JavaScript Code: Inside the
<script>tag, we wrote JavaScript that displays a message in the console and an alert box.
Step 5: Experimenting
- Change the text inside the
console.logandalertfunctions to something else, like"Hi there!". - Save and refresh the browser to see the changes.
Summary
- You learned what JavaScript is and why it’s used.
- You set up your environment with a text editor and browser.
- You wrote and executed your first JavaScript code both in the browser console and through an HTML file.
