JavaScript Introduction

What you'll learn: Get started with JavaScript and learn to add interactivity to your web pages

What is JavaScript?

JavaScript is a programming language that enables interactive web pages. It’s one of the core technologies of the web, alongside HTML and CSS.

Adding JavaScript to HTML

Inline JavaScript

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

Internal JavaScript

<script>
    console.log('Hello, World!');
</script>
<script src="script.js"></script>

Variables

JavaScript has three ways to declare variables:

var oldWay = 'avoid using var';
let changeable = 'can be reassigned';
const constant = 'cannot be reassigned';

Data Types

// String
let name = 'John';

// Number
let age = 25;

// Boolean
let isStudent = true;

// Array
let colors = ['red', 'green', 'blue'];

// Object
let person = {
    name: 'John',
    age: 25
};

Functions

// Function declaration
function greet(name) {
    return 'Hello, ' + name + '!';
}

// Arrow function
const greet = (name) => {
    return `Hello, ${name}!`;
};

// Call the function
console.log(greet('World'));

DOM Manipulation

// Select an element
const button = document.getElementById('myButton');

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

// Change content
document.getElementById('demo').innerHTML = 'New content';

Practice Exercise

Create a simple interactive page:

  1. A button that changes text when clicked
  2. An input field that displays entered text
  3. A counter that increments on button click

Next Steps

Learn about JavaScript arrays, objects, async programming, and modern ES6+ features.