JS

JavaScript Fundamentals

25 lessons

Progress0%
1. Introduction to JavaScript
1What is JavaScript?2Setting Up Your Environment
2. Variables and Data Types
1Declaring Variables2Data Types3Type Conversion
3. Operators
Arithmetic OperatorsComparison OperatorsLogical Operators
4. Control Flow
Conditional StatementsLoops
5. Functions
Function Basics
6. Arrays & Iteration
Array MethodsSpread, Rest & Destructuring
7. Objects & JSON
Working with ObjectsJSON & Optional Chaining
8. OOP & Classes
Class BasicsInheritance & Private Fields
9. Modules & Modern JS
ES ModulesModern JavaScript Features
10. Async JavaScript
PromisesAsync/Await
11. Error Handling
Error Types & try/catchCustom Errors & Debugging
12. Iterators & Advanced
Iterators & GeneratorsMap, Set & WeakRefs
All Tutorials
JavaScriptIntroduction to JavaScript
Lesson 2 of 25 min
Chapter 1 · Lesson 2

Setting Up Your Environment

Setting up a JavaScript development environment is straightforward because JavaScript runs directly in your web browser. Here are your options:

Option 1: Browser Console The quickest way to start experimenting with JavaScript:

  1. Open any web browser (Chrome, Firefox, Edge, Safari)
  2. Press F12 or right-click and select "Inspect"
  3. Click on the "Console" tab
  4. Start typing JavaScript code!

Option 2: HTML File Create an HTML file and include your JavaScript:

  1. Create a new file called index.html
  2. Add your JavaScript in a <script> tag
  3. Open the file in a browser

Option 3: Code Editor (Recommended) For serious development, use a code editor:

  • VS Code: Free, powerful, great extensions
  • Sublime Text: Fast and lightweight
  • WebStorm: Full-featured IDE (paid)

Pro Tip: Install the "Live Server" extension in VS Code for automatic browser refresh when you save your files.

Code Examples

HTML with JavaScripthtml
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First JavaScript</title>
</head>
<body>
  <h1>JavaScript Demo</h1>
  <p id="output">Loading...</p>

  <script>
    // Your JavaScript code goes here
    document.getElementById("output").textContent = "Hello from JavaScript!";
    
    // You can also log to the console
    console.log("Page loaded successfully!");
  </script>
</body>
</html>

The <script> tag tells the browser to interpret the contents as JavaScript. Place it at the end of the <body> for best performance.

External JavaScript Filehtml
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External JS</title>
</head>
<body>
  <h1>My Website</h1>
  
  <!-- Link to external JavaScript file -->
  <script src="script.js"></script>
</body>
</html>

For larger projects, keep JavaScript in separate .js files. This improves code organization and allows browser caching.

Quick Quiz

1. Which keyboard shortcut opens the browser's developer tools?

2. Where should you place the <script> tag for best performance?

Was this lesson helpful?

PreviousNext