Javascript Crash Course for Beginner Web Developers

by | Apr 14, 2025 | General, Web Development | 0 comments

Javascript crash course

JavaScript Crash Course: Learn the Essentials in 60 Minutes

JavaScript is a versatile, high-level programming language used primarily for web development. This crash course covers the core concepts you need to start coding in JavaScript effectively.

1. What is JavaScript?

  • JavaScript runs in browsers to make websites interactive.
  • It’s also used server-side (Node.js) and in mobile apps.
  • Write JavaScript in <script> tags in HTML or in .js files.
<script>
console.log("Hello, JavaScript!");
</script>

2. Variables and Data Types

  • Declare variables with var, let, or const.
  • let allows reassignment; const doesn’t.
  • Data types: number, string, boolean, null, undefined, object, array.
let name = "Alice"; // string
const age = 25; // number
let isStudent = true; // boolean
let scores = [90, 85, 88]; // array
let person = { name: "Bob", age: 30 }; // object

3. Operators and Expressions

  • Arithmetic: +, –, *, /, %
  • Comparison: ==, ===, !=, >, <
  • Logical: &&, ||, !
  • Assignment: =, +=, -=
let x = 10;
let y = 5;
console.log(x + y); // 15
console.log(x === 10 && y < 6); // true

4. Control Flow

  • Conditionals: if, else if, else
  • Loops: for, while, do…while
  • switch for multiple conditions
let score = 85;
if (score >= 90) {
console.log("A");
} else if (score >= 80) {
console.log("B");
} else {
console.log("C");
}for (let i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}

5. Functions

  • Define with function keyword or arrow syntax (=>).
  • Parameters and return values make functions reusable.
  • Functions can be stored in variables.
function greet(name) {
return `Hello, ${name}!`;
}const add = (a, b) => a + b;console.log(greet("Alice")); // Hello, Alice!
console.log(add(3, 4)); // 7

6. Arrays and Objects

  • Arrays store ordered lists; access with indices ([0]).
  • Objects store key-value pairs; access with dot (.) or bracket ([]) notation.
  • Common methods: push, pop, map, filter (arrays); Object.keys() (objects).
let fruits = ["apple", "banana", "orange"];
fruits.push("grape");
console.log(fruits[1]); // bananalet user = { name: "Charlie", age: 28 };
console.log(user.name); // Charlie

7. DOM Manipulation

  • The Document Object Model (DOM) represents HTML
  • Use document to select and modify elements
  • Common methods: querySelector, innerHTML, style
// HTML: <p id="demo">Hello</p>
let para = document.querySelector("#demo");
para.innerHTML = "World!";
para.style.color = "blue";

8. Event Handling

  • Events (click, input, etc.) trigger JavaScript code.
  • Use addEventListener to attach handlers.
// HTML: <button id="btn">Click Me</button>
let button = document.querySelector("#btn");
button.addEventListener("click", () => {
alert("Button clicked!");
});

9. Error Handling

  • Use try-catch to handle errors gracefully
  • Throw custom errors with throw
try {
let result = riskyOperation();
} catch (error) {
console.log("Error:", error.message);
}

10. ES6+ Features

  • let and const for block scope
  • Template literals: `Hello, ${name}!`
  • Destructuring: extract values from arrays/objects
const [a, b] = [1, 2]; // a = 1, b = 2
const { name, age } = { name: "Dave", age: 40 };
console.log(`Name: ${name}, Age: ${age}`); // Name: Dave, Age: 40

11. Asynchronous JavaScript

  • JavaScript is single-threaded; async operations (e.g., fetching data) use callbacks, Promises, or async/await
  • Promises resolve or reject; chain with .then()
  • async/await simplifies Promise handling.
fetch("https://api.example.com/data")
.then((response) => response.json())
.then((data) => console.log(data))
.catch((error) => console.log("Error:", error));async function getData() {
try {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Error:", error);
}
}

12. Mini Project: To-Do List

Build a simple to-do list to apply what you’ve learned.

HTML

<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<style>
.done { text-decoration: line-through; }
</style>
</head>
<body>
<input id="taskInput" placeholder="Add a task">
<button id="addBtn">Add</button>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>

Javascript

const input = document.querySelector("#taskInput");
const addBtn = document.querySelector("#addBtn");
const taskList = document.querySelector("#taskList");addBtn.addEventListener("click", () => {
if (input.value.trim() === "") return;
const li = document.createElement("li");
li.textContent = input.value;
li.addEventListener("click", () => {
li.classList.toggle("done");
});
taskList.appendChild(li);
input.value = "";
});
  • Type a task, click “Add,” and click tasks to mark them done.
  • Uses DOM manipulation, events, and basic styling.

13. What’s Next?

  • Practice on sites like freeCodeCamp or LeetCode.
  • Explore frameworks like React or Vue.js.
  • Learn Node.js for backend development.
  • Check MDN Web Docs for in-depth JavaScript reference.
468

Submit a Comment