beginner javascript 20 min read
JavaScript Basics for Web Development
Start your JavaScript journey with variables, functions, and DOM manipulation.
javascript basics learn javascript js tutorial javascript for beginners
What is JavaScript?
JavaScript is the programming language of the web. It adds interactivity to websites, handles user input, and communicates with servers.
Adding JavaScript to HTML
Inline (Not Recommended)
<button onclick="alert('Hello!')">Click me</button>
Internal Script
<script>
console.log('Hello, World!');
</script>
External Script (Recommended)
<script src="script.js"></script>
Place scripts at the end of <body> or use defer:
<script src="script.js" defer></script>
Variables
let (Block-scoped, reassignable)
let count = 0;
count = 1; // OK
const (Block-scoped, not reassignable)
const name = 'John';
name = 'Jane'; // Error!
const user = { name: 'John' };
user.name = 'Jane'; // OK - object properties can change
Avoid var
var old = 'legacy'; // Function-scoped, causes issues
Data Types
// String
const text = "Hello";
const template = `Hello, ${name}`;
// Number
const age = 25;
const price = 19.99;
// Boolean
const isActive = true;
const isComplete = false;
// Array
const colors = ['red', 'green', 'blue'];
// Object
const person = {
name: 'John',
age: 30
};
// Null and Undefined
const empty = null;
let notDefined; // undefined
Functions
Function Declaration
function greet(name) {
return `Hello, ${name}!`;
}
greet('World'); // "Hello, World!"
Arrow Functions
const greet = (name) => `Hello, ${name}!`;
// Multiple lines
const calculate = (a, b) => {
const sum = a + b;
return sum * 2;
};
Conditionals
if (score > 90) {
console.log('A');
} else if (score > 80) {
console.log('B');
} else {
console.log('C');
}
// Ternary operator
const status = age >= 18 ? 'adult' : 'minor';
Loops
// For loop
for (let i = 0; i < 5; i++) {
console.log(i);
}
// For...of (arrays)
for (const color of colors) {
console.log(color);
}
// For...in (objects)
for (const key in person) {
console.log(`${key}: ${person[key]}`);
}
// While loop
while (condition) {
// code
}
Array Methods
const numbers = [1, 2, 3, 4, 5];
// Map - transform each item
const doubled = numbers.map(n => n * 2);
// Filter - keep items that pass test
const evens = numbers.filter(n => n % 2 === 0);
// Find - get first match
const found = numbers.find(n => n > 3);
// Reduce - combine into single value
const sum = numbers.reduce((acc, n) => acc + n, 0);
// forEach - iterate without return
numbers.forEach(n => console.log(n));
Objects
const user = {
name: 'John',
email: 'john@example.com',
sayHello() {
return `Hello, I'm ${this.name}`;
}
};
// Access properties
user.name; // "John"
user['email']; // "john@example.com"
// Destructuring
const { name, email } = user;
DOM Basics
// Select elements
const element = document.getElementById('myId');
const elements = document.querySelectorAll('.myClass');
// Modify content
element.textContent = 'New text';
element.innerHTML = '<strong>Bold</strong>';
// Add event listener
element.addEventListener('click', () => {
console.log('Clicked!');
});
Next Steps
Continue with: