Skip to content

Introduction to JavaScript

JavaScript is the programming language that brings websites to life. It adds interactivity, dynamic content, and behavior to web pages.

What is JavaScript?

JavaScript is a programming language that runs in web browsers. It allows you to: - Make web pages interactive - Respond to user actions - Update content dynamically - Validate forms - Create animations - Build web applications

Key Characteristics

  • Programming Language: Unlike HTML (structure) and CSS (styling), JavaScript adds behavior
  • Client-Side: Runs in the user's browser
  • Dynamic: Can change page content without reloading
  • Universal: Supported by all modern browsers
  • Versatile: Used for frontend, backend (Node.js), and mobile apps

Why Learn JavaScript?

Essential for Web Development

  • The Only Browser Language: JavaScript is the only programming language that runs natively in browsers
  • Industry Standard: Required for modern web development
  • Full-Stack Capability: Can be used for both frontend and backend
  • High Demand: One of the most sought-after skills in tech

What You Can Build

  • Interactive websites
  • Web applications
  • Mobile apps (React Native)
  • Server applications (Node.js)
  • Games
  • And much more!

How JavaScript Works

JavaScript is executed by the browser's JavaScript engine. When a browser loads an HTML page with JavaScript, it:

  1. Parses the HTML
  2. Applies CSS styles
  3. Executes JavaScript code
  4. Updates the page based on JavaScript

The Three Pillars of Web Development

HTML = Structure (skeleton)
CSS  = Styling (appearance)
JS   = Behavior (functionality)

Adding JavaScript to HTML

Inline JavaScript

JavaScript written directly in HTML:

<button onclick="alert('Hello, World!')">Click Me</button>

When to use: Rarely - only for quick testing.

Internal JavaScript

JavaScript in a <script> tag:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello</h1>

    <script>
        alert('Hello, World!');
        console.log('This is JavaScript');
    </script>
</body>
</html>

When to use: Small scripts or learning.

JavaScript in a separate .js file:

script.js:

alert('Hello, World!');
console.log('This is JavaScript');

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Hello</h1>

    <script src="script.js"></script>
</body>
</html>

!!! tip "Use External JavaScript" External JavaScript files are reusable, maintainable, and keep your code organized.

Script Placement

In the <head>:

<head>
    <script src="script.js"></script>
</head>

At the end of <body> (Recommended):

<body>
    <!-- HTML content -->
    <script src="script.js"></script>
</body>

!!! tip "Script at Bottom" Placing scripts at the end of <body> ensures HTML loads first, improving page load speed.

Your First JavaScript Program

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My First JavaScript</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <button id="myButton">Click Me</button>

    <script>
        // Get the button element
        const button = document.getElementById('myButton');

        // Add click event listener
        button.addEventListener('click', function() {
            alert('Button clicked!');
        });
    </script>
</body>
</html>

JavaScript Console

The browser console is your best friend for learning JavaScript:

Opening the Console

  • Chrome/Edge: Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
  • Firefox: Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac)
  • Safari: Enable Developer menu, then press Cmd+Option+I

Using console.log()

Print messages to the console:

console.log('Hello, World!');
console.log(42);
console.log('My name is', 'John');

Other Console Methods

console.log('Regular message');
console.error('Error message');
console.warn('Warning message');
console.info('Info message');

JavaScript Syntax Basics

Statements

JavaScript code consists of statements:

console.log('Hello');
let name = 'John';
alert('Welcome!');

Semicolons

Semicolons end statements (optional but recommended):

console.log('Hello'); // With semicolon
console.log('World')   // Without semicolon (works but not recommended)

Comments

Add notes to your code:

// This is a single-line comment

/* This is a
   multi-line comment */

// Comments help explain your code

JavaScript Versions

Version Year Name
ES5 2009 ECMAScript 5
ES6/ES2015 2015 ECMAScript 2015 (Major update)
ES2016-ES2023 2016-2023 Annual updates

!!! note "We'll Use Modern JavaScript" We'll focus on ES6+ (modern JavaScript) which is well-supported and includes powerful features.

What JavaScript Can Do

DOM Manipulation

Change HTML content:

document.getElementById('myElement').innerHTML = 'New content';

Event Handling

Respond to user actions:

button.addEventListener('click', function() {
    alert('Clicked!');
});

Form Validation

Validate user input:

if (email.includes('@')) {
    // Valid email
} else {
    alert('Invalid email');
}

Animations

Create dynamic effects:

element.style.transform = 'translateX(100px)';

API Calls

Fetch data from servers:

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

Development Tools

Browser DevTools

Essential for debugging: - Console for testing code - Debugger for step-by-step execution - Network tab for API calls - Elements tab for DOM inspection

Code Editors

Recommended editors: - VS Code - Free, powerful, popular - Sublime Text - Fast, lightweight - Atom - Free, customizable

Online Playgrounds

Practice JavaScript online: - CodePen - JSFiddle - Repl.it

Best Practices

  1. Use External Files: Keep JavaScript in separate .js files
  2. Use Meaningful Names: Name variables and functions clearly
  3. Comment Your Code: Explain complex logic
  4. Test in Console: Use console for quick testing
  5. Follow Conventions: Use consistent coding style
  6. Keep It Simple: Start simple, add complexity gradually

Common Mistakes

1. Forgetting Script Tag

<!-- ❌ Wrong -->
<script>
    console.log('Hello');
<!-- Missing closing tag -->

<!-- ✅ Correct -->
<script>
    console.log('Hello');
</script>

2. Script Runs Before HTML Loads

<!-- ❌ Wrong -->
<head>
    <script>
        document.getElementById('myButton'); // Element doesn't exist yet!
    </script>
</head>
<body>
    <button id="myButton">Click</button>
</body>

<!-- ✅ Correct -->
<body>
    <button id="myButton">Click</button>
    <script>
        document.getElementById('myButton'); // Element exists!
    </script>
</body>

3. Case Sensitivity

// ❌ Wrong
let Name = 'John';
console.log(name); // Error: name is not defined

// ✅ Correct
let name = 'John';
console.log(name); // Works!

Resources

What's Next?

In the following tutorials, you'll learn:

  1. Variables and Data Types - Store and work with data
  2. Functions and Scope - Organize and reuse code
  3. Control Flow - Make decisions and repeat actions
  4. DOM Manipulation - Change web page content
  5. Events - Respond to user interactions
  6. Arrays and Objects - Work with complex data

!!! success "You're Ready!" You now understand what JavaScript is and why it's essential. Let's start writing JavaScript code!

Next Tutorial: Variables and Data Types