Component Integration

Submodule 6 of Frontend Development Mini-Quest • Interactive JavaScript Lesson

Interactive JavaScript Lesson

Learn core concepts and run code instantly in the built-in interpreter.

1 — Variables & Types

JavaScript has a few key ways to hold values: let, const, and var. Use let for mutable values and const for constants.

2 — Functions

Functions group behaviour. Arrow functions (() => {}) are concise but have lexical this. Regular functions get their own this when called as methods.

3 — DOM Basics

Use document.querySelector or getElementById to find elements. Change text with el.textContent and listen using addEventListener.

4 — Console & Debugging

console.log() prints values — you'll see output in the console pane. Throwing errors helps you locate bugs: use try/catch to handle runtime exceptions.

Exercises

1) Add a Wire class with initial variables of x0, y0, x1, y1.

2) Setup the wire class constructor and add this.active = 0.

3) Add a function attachWire(startX, startY, endX, endY) inside the wire class and set (x0, y0) to (startX, startY), do the same as well with (x1, y1) and (endX, endY).

Tip: edit the code below and press Run to execute.

Language: JavaScript (ES2020) Sandbox: iframe

class Wire { constructor(x0, y0, x1, y1) { this.x0 = x0; this.y0 = y0; this.x1 = x1; this.y1 = y1; this.active = 0; } attachWire(startX, startY, endX, endY) { this.x0 = startX; this.y0 = startY; this.x1 = endX; this.y1 = endY; this.active = 1; } getWireInfo() { console.log(this.x0); console.log(this.y0); console.log(this.x1); console.log(this.y1); } } const wire = new Wire(0, 0, 15, 50); wire.getWireInfo(); wire.attachWire(150, 100, 15, 50); console.log(""); wire.getWireInfo();

Console

Output from the iframe

Editor: Plain textarea. Paste code and Run. The iframe sandbox prevents access to parent.

Previous

← Previous Lesson Back to Module →

✓ Lesson 6 completed!