DEV Community: avery

27. SQL

avery — Wed, 17 Jun 2026 15:59:03 +0000

1. SQL Commands: CREATE TABLE and INSERT Data

CRUD Operations : Create(INSERT), Read(SELECT), Update(UPDATE), Delete/Destroy(DELETE)
Useful Resources
- SQL Tutorial: https://www.w3schools.com/sql/
- SQL Data Types: https://www.w3schools.com/sql/sql_datatypes.asp
- SQL Primary Key: https://www.w3schools.com/sql/sql_primarykey.asp
- Online SQL Playground: https://sqliteonline.com/
Creating a Table : ex) CREATE TABLE products ( id INT NOT NULL, name STRING, price MONEY, PRIMARY KEY (id) );
Primary Key : uniquely identifies each row in a table
- ex) id INT NOT NULL, PRIMARY KEY (id)
Inserting Data : Insert values into all columns
- ex) INSERT INTO products VALUES (1, 'Pen', 1.20);
- Insert values into specific columns : ex) INSERT INTO products (id, name) VALUES (2, 'Pencil');

2. SQL Commands: READ, SELECT, and WHERE

Reading Data
- Retrieve all columns from a table, ex) SELECT * FROM products;
- Retrieve specific data using a condition, ex) SELECT * FROM products WHERE id = 1;
WHERE Clause : Used to filter records based on specific conditions.

3. Updating Values and Modifying Tables

Updating Existing Data
- ex) UPDATE products SET price = 1.00 WHERE id = 1;
- SET : specifies the new value.
- WHERE : determines which row(s) will be updated.
Adding a New Column
- ex) ALTER TABLE products ADD stock INT;
- ALTER TABLE : modifies an existing table structure.

4. SQL Commands: DELETE

Deleting Data
- ex) DELETE FROM products WHERE id = 2;
Removes rows that match the condition.
Always use a WHERE clause unless you intend to delete all records.

5. Understanding SQL Relationships, Foreign Keys, and INNER JOINs

Foreign Keys : Creates a relationship between two tables, Helps maintain data integrity
- https://www.w3schools.com/sql/sql_foreignkey.asp
INNER JOIN : Used to combine related data from multiple tables.
- ex) SELECT orders.order_number, customers.first_name, customers.last_name, customers.address FROM orders INNER JOIN customers ON orders.customer_id = customers.id;
How INNER JOIN Works : Only matching records from both tables are returned.
- https://www.w3schools.com/sql/sql_join_inner.asp

26. Databases

avery — Wed, 17 Jun 2026 11:43:57 +0000

1. Databases Explained: SQL vs NoSQL

Why Do We Need Databases?
- Databases provide persistent data storage.
- Unlike variables in memory, data stored in a database remains available even after the application stops running.
- Databases allow applications to store, retrieve, update, and manage large amounts of information efficiently.
Types of Databases
- SQL(Structured Query Language) Databases : typically relational databases, where data is organized into tables with predefined schemas.
- Structured data, Fixed schema, Relationships between tables, Strong consistency, Uses SQL for querying
- ex) PostgreSQL, MySQL, Oracle Database, SQLite, ...
- NoSQL Databases : designed for flexibility and scalability.
- Flexible schema, Horizontal scalability, Suitable for large-scale or rapidly changing data, Multiple data models (document, key-value, graph, etc.)
- ex) MongoDB, Redis, Amazon DynamoDB

25. Build Your Own API

avery — Tue, 16 Jun 2026 21:33:02 +0000

1. Building Your Own APIs

You can build your own APIs using frameworks like Node.js + Express.
API Platforms
- RapidAPI : Marketplace for testing and using public APIs
- APIs can be:
- Monetized APIs : Data collection services, Algorithm / service-based APIs, Simplified interface for complex systems
- Internal APIs (Private APIs) : Used only within a company or application
What Makes an API RESTful?
- A RESTful API follows these principles:
- Uses HTTP methods (GET, POST, PUT, PATCH, DELETE)
- Returns data in JSON format
- Follows Client–Server architecture
- Is stateless (each request is independent)
- Is resource-based (everything is treated as a resource)
- Operates over the web (HTTP/HTTPS)

2. Creating GET, POST, PATCH, and DELETE Routes

Express Routes Overview : In Express, routes define how the server responds to client requests.
Route Parameters(:) : Used to capture dynamic values from the URL.
- ex) app.get("/users/:id", (req, res) => { console.log(req.params.id); });
- :id → dynamic parameter
- Accessed via req.params
Callback Functions in Array Methods : Commonly used when working with data in APIs(find, filter, findIndex, ...)
- ex) const user = users.find(user => user.id === 1);
PUT vs PATCH
- PUT : Replace entire resource, Update full object
- PATCH : Modify part of resource, Partial update
DELETE Operation : Used to remove data from a collection.
- ex) users.splice(index, 1);
- splice() : removes elements from an array , Commonly used for delete logic in in-memory data

24. Application Programming Interfaces (APIs)

avery — Mon, 15 Jun 2026 19:04:16 +0000

1. Introduction to APIs

What is an API?
- API (Application Programming Interface) acts as a bridge that allows different software applications to communicate with each other.
- APIs enable programs to exchange data and functionality without exposing internal implementation details.
REST APIs
- REST (Representational State Transfer) is a common architectural style for web APIs.
- REST APIs typically use the HTTP protocol.
Common HTTP Methods : GET(Retrieve data), POST(Create data), PUT(Replace data), PATCH(Partially update data), DELETE(Remove data)

2. Structuring API Requests

API Types
- Private API : Frontend ↔ Your Server, Used internally within your application
- Public API : Your Server ↔ External Server, Provided by third-party services
API Documentation : API documentation explains available endpoints, parameters, authentication methods, and response formats.
- ex) https://bored-api.appbrewery.com/
API Endpoints : An endpoint is a specific URL that provides access to a resource.
- Base URL + Endpoint
- ex) /random, /filter
Query Parameters : Used to filter, sort, or customize responses.
- ex) https://bored-api.appbrewery.com/endpoint?query=value&query2=value
- Format : ?key=value&key2=value2
Path Parameters : Used to identify a specific resource.
- ex) https://bored-api.appbrewery.com/endpoint/{id}

3. What is JSON?

JSON (JavaScript Object Notation) : Lightweight format for storing and exchanging data, Human-readable and language-independent
JSON vs JavaScript Objects
- JSON : Stored as text (string) { "name": "John", "age": 25 }
- JavaScript Object : Actual JavaScript object { name: "John", age: 25 }
JSON Tools
- JSON Visualizer : https://jsonviewer.stack.hu/
Convert JSON to JavaScript Object : const data = JSON.parse(jsonData);
Convert JavaScript Object to JSON : const jsonData = JSON.stringify(data);

4. Making Server-Side API Requests with Axios

Axios : Popular HTTP client for JavaScript and Node.js, Simpler syntax than the native https module
Async/Await : Used to handle asynchronous API requests more cleanly.
- ex) const response = await axios.get(url);
Basic GET Request : `import axios from "axios";

const response = await axios.get(url);
console.log(response.data);`

5. API Authentication

Why Authentication? : Authentication helps control access to APIs and protects resources from unauthorized use.
Common Authentication Methods
- No Authentication : Public access, Usually rate-limited
- Basic Authentication : Username + Password, Credentials are encoded using Base64, Typically sent in HTTP headers
- API Key Authentication : API Key → API, Unique key issued by the API provider, Often included in headers or query parameters
- Token-Based Authentication : Username/Password → Token → API, User logs in once, Server returns a token, Future requests use the token
OAuth : Delegated authorization protocol , Allows users to grant limited access without sharing passwords
- Commonly used with : Google, GitHub, Facebook

6. REST APIs in Practice

Making API Requests : GET(Read data), POST(Create data), PUT(Replace data), PATCH(Update part of a resource), DELETE(Remove data)
CRUD Operations(Operation : HTTP Method)
- Create : POST
- Read : GET
- Update : PUT / PATCH
- Delete : ELETE
Axios Examples : https://axios.rest/pages/getting-started/examples/commonjs.html

Axios simplifies server-side API requests.
Authentication methods include Basic Auth, API Keys, Tokens, and OAuth.

23. Git, GitHub, and Version Control

avery — Sun, 14 Jun 2026 00:59:01 +0000

1. Introduction to Version Control and Git

Version Control: Tracks changes to files and allows you to roll back to previous versions when needed.
Git: A distributed version control system widely used for software development.

2. Version Control Using Git and the Command Line

Git Workflow Working Directory | git add ↓ Staging Area | git commit ↓ Local Repository | git checkout ↓ Working Directory
Common Commands
- git status : Check the current repository status
- git add : Add a file to the staging area
- git add . : Add all modified files
- git commit -m "message" : Save changes to the local repository
- git diff : Compare changes in the working directory with the last committed version

3. GitHub and Remote Repositories

Developer Journey : Learn to Code → Attend Events → Participate in Hackathons → Volunteer → Freelance → Apply for Developer Jobs → Internship → Contribute to Open Source → Build and Share Your Own Projects
Connecting to a Remote Repository : git remote add
Pushing Changes : git push -u
Repository Structure Working Directory ↓ Staging Area ↓ Local Repository ↓ Remote Repository (GitHub)
Useful GitHub Feature
- Insights → Network: Visualize branch and commit history
Main Branch : The primary branch of a repository (commonly main)

4. .gitignore

Common Files to Ignore
- macOS : .DS_Store, .DS_Store?, .Trashes, ._*, .Spotlight-V100
- Windows: Thumbs.db, ehthumbs.db
Creating a .gitignore File : touch .gitignore
- Add files or directories that should not be tracked by Git.
Refresh Git Tracking : git rm --cached -r .
- Removes all files from Git tracking
- Keeps local files intact
- Commonly used after updating .gitignore

5. Cloning Repositories

Why Clone? : Build on existing code, Improve your own version, Read other people's code, Contribute to open-source projects
Clone a Repository : git clone

6. Branching and Merging

Why Use Branches? : Branches allow feature development without affecting the main codebase.
Common Commands
- git branch : Create a new branch
- git checkout : Switch to another branch
- git merge : Merge a branch into the current branch
Practice Tool : https://learngitbranching.js.org/
- Additional Git Commands
- git branch -f main : Force the main branch pointer to another commit
- git revert : Create a new commit that undoes changes (safe for shared repositories)
- git reset : Move the branch pointer (typically used locally)
- git rebase : Reapply commits on top of another branch
- git cherry-pick ... : Apply specific commits
- git tag : Create a tag
- git describe : Show the nearest tag and commit information
  - Format : --g
- git fetch : Download remote changes without merging
- git pull : git fetch + git merge
- git push : Upload local commits to a remote repository

7. Forking and Pull Requests

Open Source Contribution Workflow
Forking : Create your own copy of another repository on GitHub
Pull Requests (PRs) : Suggest changes to the original repository, Allow maintainers to review, discuss, and merge contributions
Typical Contribution Flow : Fork → Clone → Create Branch → Commit Changes → Push → Open Pull Request

22. EJS (Embedded JavaScript)

avery — Thu, 30 Apr 2026 15:36:23 +0000

1. What is EJS?

EJS (Embedded JavaScript) is a templating engine for Node.js
Key Concepts
- Templating : Allows you to generate dynamic HTML using JavaScript
- Separation of Concerns : Frontend(HTML, CSS), Backend(JavaScript)
- Other Templating Languages : Python(Jinja), PHP(Twig), JavaScript(EJS)
How EJS Works : ex) <% for (let i = 0; i < items.length; i++) { %> <li><%= items[i] %></li> <% } %>
- JavaScript runs inside HTML, <%= %> outputs data to the page
Rendering with Express
- Static : ex) res.sendFile("index.html");
- Dynamic (EJS) : ex) app.post("/submit", (req, res) => { res.render("index.ejs", { name: req.body["name"] }); }); <body> <h1>Hello <%= name %></h1> </body>

2. EJS Tags

<%= variable %> : output value
<% code %> : execute JavaScript
<%- html %> : render HTML (unescaped)
<%% %%> : display <% %> literally
<%# comment %> : comment (not executed)
<%- include("header.ejs") %> : Include (Partials), Used to reuse components (header, footer, etc.)
Using JavaScript in EJS

3. Passing Data

Server → EJS : Pass data using res.render()
- If no data exists : Use default values or locals
EJS → Server : Use forms with method="POST"

4. Partials & Layouts

Static files : app.use(express.static("public"));
Templating syntax : <% %>(logic), <%= %>(output), <%- %>(raw HTML)
Partials : ex) <%- include("header.ejs") %>, <%- include("footer.ejs") %>
Helps avoid code duplication, Improves maintainability
Javascript Tip
Variable Keywords : const(cannot be reassigned), let(can be reassigned)
forEach : method used to loop through an array and run a function on each item.
- ex) array.forEach((element, index, array) => { console.log(element); console.log(index); });

21. Express.js with Node.js

avery — Mon, 27 Apr 2026 16:17:38 +0000

1. What is Express?

Express.js is a backend web framework for Node.js
Express vs Node.js
- Node.js : Runtime environment (not a framework)
- Express.js : Framework built on top of Node.js, Makes backend development easier
Why Express? : Less code, Better readability, Middleware support, Faster development
“It’s All Node To Me”
- Can be used for : Web backend, IoT applications, Desktop apps (e.g. VS Code is built with Electron + Node)

2. Creating Your First Express Server

Backend structure
- Server : computer running 24/7 (listening for requests)
- Application : index.js (logic)
- Database : data storage
Client-side vs Server-side
- Client : browser
- Server : backend system
Setup steps
- mkdir project-folder
- cd project-folder
- touch index.js
- npm init -y
- npm i express
Basic server : ex) `import express from "express";

const app = express();
const port = 3000;

app.listen(port, () => {
console.log(Server running on port ${port}.);
});`

What is localhost? : Local server running on your computer
- Example : http://localhost:3000
- Think of it as your computer’s “door” for apps
Check open ports
- Windows : netstat -ano | findstr "LISTENING"
- Mac/Linux : sudo lsof -i -P -n | grep LISTEN

3. HTTP Requests

HTTP : HyperText Transfer Protocol
HTTP Methods
- GET : retrieve data
- POST : send data
- PUT : replace data
- PATCH : update data
- DELETE : remove data
Basic route : ex) app.get("/", (req, res) => { res.send("Hello, World!"); });
Endpoints app.get("/about", (req, res) => { res.send("<h1>About Me</h1>"); });
Nodemon : Auto-restarts server when changes are made
- ex) npm i -g nodemon nodemon index.js

4. Postman

Tool for testing APIs (without frontend)
HTTP Status Codes
- 100–199 : Informational
- 200–299 : Success
- 300–399 : Redirection
- 400–499 : Client errors
- 500–599 : Server errors
- Reference : https://developer.mozilla.org/ko/docs/Web/HTTP/Reference/Status
Install all dependencies : npm install
- Installs everything listed in package.json

5. Introduction to Middleware

Body Parser : Handles form data (x-www-form-urlencoded)
- app.use(bodyParser.urlencoded({extended:true}));
- Express built-in middleware : app.use(express.urlencoded({ extended: true }));
Send file : res.sendFile(path);

6. Custom Middleware

What is middleware? : Code that runs between request and response
- Used for : Logging, Authentication, Error handling, Data preprocessing
- Example: Logger function logger(req, res, next) { console.log("Request Method:", req.method); console.log("Request URL:", req.url); next(); } app.use(logger);
Path utilities : ex) `import { dirname } from "path"; import { fileURLToPath } from "url";

const __dirname = dirname(fileURLToPath(import.meta.url));`

Important : Middleware order matters, body-parser must come before routes

7. Secrets Access Project

Example : `var userIsAuthorised = false;

function passwordCheck(req, res, next) {
const password = req.body["password"];

if (password === "ILoveProgramming") {
userIsAuthorised = true;
}

next();
}

app.use(passwordCheck);`

Route protection : `app.post("/check", (req, res) => { if (userIsAuthorised) { res.sendFile(dirname + "/public/secret.html"); } else { res.sendFile(dirname + "/public/index.html"); }

console.log(req.body);
});`

20. Node.js

avery — Tue, 21 Apr 2026 20:30:34 +0000

1. What is Node.js?

Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser (on a server or local machine)
Why use frameworks/libraries? : Reuse components, Reduce development overhead
- ex) Reading files, writing files, URL Strings, Networking, Data Streams, Diagnostics, Tests, Debugger, Error Codes
Definition : “Node.js is an asynchronous, event-driven JavaScript runtime designed to build scalable network applications.”
- Key Concepts
- JavaScript Runtime : Runs JS outside the browser (server/local computer)
- Asynchronous : Executes tasks without blocking (non-blocking)
- Event-driven : Responds to events (requests, user actions, etc.)
- Application : On Server(Computer)
Why Node.js? : Full-stack JavaScript, Scalable, Non-blocking I/O , Huge ecosystem

2. Using Node.js

Check version : node -v
REPL (Read-Eval-Print Loop) : node
- Commands
- .help : show commands)
- .exit or Ctrl + C (twice) : exit
- Similar to the browser console
Run a JS file : cd path/to/file node index.js

3. Native Node Modules

Native Modules : Built-in modules provided by Node.js
File System (fs) : const fs = require("fs");
- Write file : fs.writeFile("message.txt", "Hello from NodeJS!", (err) => { if (err) throw err; console.log("The file has been saved!"); });
- Read file : fs.readFile("./message.txt", "utf8", (err, data) => { if (err) throw err; console.log(data); });
- "utf8" → encoding option
Docs : https://nodejs.org/docs/latest-v18.x/api/fs.html

4. NPM (Node Package Manager)

A repository of packages and libraries
Website : https://www.npmjs.com/
Initialize project : npm init
- Quick setup : npm init -y
Install packages : npm install
- ex) npm i sillyname
Module Systems
- CommonJS (CJS) : ex) const generateName = require("sillyname");
- ES Modules (ESM) : ex) import generateName from "sillyname";
- Enable ESM : "type": "module"
Example : import superheroes, { randomSuperhero } from "superheroes";

const name = randomSuperhero();
console.log(`I am ${name}!`);

5. Mini Project: QR Code Generator

Packages : inquirer(user input), qr-image(generate QR codes)
Install : npm i inquirer qr-image
Note : Be careful with package names (typos can install wrong packages), Always check package documentation

19. Backend Web Development

avery — Sun, 19 Apr 2026 09:55:33 +0000

1. Backend Web Development Explained

What is the backend? : The backend is the part of a web application that runs on the server and handles logic, data, and requests.
Main Components
- Server : A computer that runs 24/7, Can be local (localhost) or remote (cloud server)
- Application (Backend Logic) : Handles requests and responses
- Returns : HTML, Data (JSON, etc.), Status codes (e.g. 404 Not Found, 500 Server Error)
- Database : Stores and manages data, Ensures data persistence (data is saved long-term)
Web Page vs Web App
- Web Page : Simple structure(User ↔ Server), Mostly static content
- Web Application : Full system(User ↔ Server ↔ Application ↔ Database), Dynamic content with data interaction

2. Backend Tools and Technologies

Frontend : HTML, CSS, JavaScript(React, Angular, Vue)
Backend : Java(Spring), Ruby(Ruby on Rails), PHP(Laravel), C#(ASP.NET), Python(Django, Flask), JavaScript(Node.js)
Backend choice depends on the ecosystem, scalability needs, and personal or company preference.

18. The Unix Command Line

avery — Sun, 19 Apr 2026 07:00:43 +0000

1. Install Git Bash on Windows

Download: https://gitforwindows.org/
Use Git Bash as the terminal in VS Code

2. Understanding the Command Line

Shell vs Kernel
- Shell: user interface (CLI/GUI) that interacts with the system
- Kernel: core of the OS that manages CPU, memory, and disks
Bash (Bourne Again Shell) : A popular Unix shell (used in macOS and Linux)
Why use CLI (Command Line Interface)? : Faster, More control, More flexible

3. Command Line Navigation

ls : list files and directories
cd : change directory
cd .. : move up one level
Tips
- Tab : auto-complete
- ↑ / ↓ : reuse previous commands
- Drag & drop folder : auto path input
- Alt + Click : move cursor
- Ctrl + A : move to beginning of line
- Ctrl + E : move to end of line
- Ctrl + U : delete to the beginning

4. File & Directory Management

Create
- mkdir folder-name # create folder
- touch file.txt # create file
Open
- start file.txt # Windows
- open file.txt # macOS
- code file.txt # open in VS Code
Delete
- rm file.txt # delete file
- rm * # delete all files in current folder
- rm -r folder-name # delete folder
Other commands
- pwd # show current path
- clear # clear terminal
Reference : https://www.learnenough.com/command-line-tutorial
Note (Important)
- rm * and rm -r are dangerous commands, Always double-check before running them (no undo)

17. jQuery

avery — Fri, 17 Apr 2026 10:26:31 +0000

1. What is jQuery?

A JavaScript library that simplifies DOM manipulation
ex) document.querySelector("h1"); // Vanilla JS $("h1"); // jQuery

2. How to Use jQuery

CDN (Google Hosted Libraries) : https://developers.google.com/speed/libraries#jquery
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
Place
- Before </body> → no timing issues (recommended)
- Inside <head> → may cause timing issues
- Fix timing issue : $(document).ready(function () { // jQuery code });

3. Minification

Removes unnecessary spaces to reduce file size and improve loading speed
Tool : https://www.minifier.org/

4. Selecting Elements

ex) $("button"); // selects all button elements

5. Manipulating Styles

Change CSS : ex) $("h1").css("font-size", "5rem");
Add class (multiple allowed) : ex) $("h1").addClass("big-title margin-50");
Remove class : ex) $("h1").removeClass("big-title");
Check class : ex) $("h1").hasClass("margin-50"); // true / false

6. Manipulating Text

Text only : ex) $("h1").text("Bye");
Includes HTML : ex) $("h1").html("<em>Hey</em>");

7. Manipulating Attributes

Get attribute : ex) console.log($("img").attr("src"));
Set attribute : ex) $("a").attr("href", "https://www.google.com");

Event Listeners
Vanilla JS vs jQuery : ex) for (var i = 0; i < 5; i++) { document.querySelectorAll("button")[i].addEventListener("click", function () { document.querySelector("h1").style.color = "purple"; }); } vs $("button").click(function () { $("h1").css("color", "purple"); });
Key press : ex) $(document).keypress(function (event) { $("h1").text(event.key); });
Mouse event : ex) $("h1").on("mouseover", function () { $("h1").css("color", "purple"); });
Reference : https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Events

9. Adding and Removing Elements

before() : ex) $("h1").before("<button>New</button>");
after() : ex) $("h1").after("<button>New</button>");
prepend() : ex) $("h1").prepend("<button>New</button>");
append() : ex) $("h1").append("<button>New</button>");
remove() : ex) $("button").remove();

10. Animations

Built-in effects: hide, show, toggle, fadeOut, fadeIn, fadeToggle, slideUp, slideDown, slideToggle
- ex) $("button").on("click", function () { $("h1").hide(); });
animate() (numeric values only) : ex) $("button").on("click", function () { $("h1").animate({ opacity: 0.5 }); });
Chaining : ex) $("button").on("click", function () { $("h1").slideUp().slideDown().animate({ opacity: 0.5 }); });

16. Advanced JavaScript and DOM Manipulation

avery — Wed, 15 Apr 2026 18:16:46 +0000

1. Adding Event Listeners

ex) document.querySelector("button").addEventListener("click", handleClick);
Anonymous function
- ex) document.querySelector("button").addEventListener("click", function () { // what to do when clicked });
Apply to multiple elements (using a loop)
- ex) `var numberOfDrumButtons = document.querySelectorAll(".drum").length;

for (var i = 0; i < numberOfDrumButtons; i++) {
document.querySelectorAll(".drum")[i].addEventListener("click", function () {
alert("I got clicked!");
});
}`

2. Higher Order Functions

Functions that take other functions as arguments or return functions

3. Playing Sounds on a Website

ex) var audio = new Audio("audio.mp3"); audio.play();
this(keyword) : Refers to the element that triggered the event
- ex) document.querySelector(".drum").addEventListener("click", function () { this.style.color = "white"; });

4. Switch Statements

Used to compare a single value against multiple cases
ex) `switch (value) { case "A": break;

case "B":
break;

default:
}`

5. JavaScript Objects

Objects store related data and behavior together
Constructor Function : Starts with a capital letter
- ex) function BellBoy(name, age, hasWorkPermit, languages) { this.name = name; this.age = age; this.hasWorkPermit = hasWorkPermit; this.languages = languages; }
Create object : ex) var bellBoy1 = new BellBoy("Timmy", 19, true, ["French", "English"]);

6. Object Methods & Dot Notation

Constructor Function Including Methods : ex) function BellBoy(name, age, hasWorkPermit, languages) { this.name = name; this.age = age; this.hasWorkPermit = hasWorkPermit; this.languages = languages; this.moveSuitcase = function () { alert("May I take your suitcase?"); }; }
Call method : ex) bellBoy1.moveSuitcase();
Dot notation (.) : Used to access properties and methods of an object
- ex) object.property or object.method()

7. Keyboard Event Listeners

keydown : Fires when a key is pressed (includes all keys)
keypress : Fires when a character key is pressed (deprecated in modern JS)
Check pressed key : ex) document.addEventListener("keydown", function (event) { console.log(event.key); });

8. Callbacks and Events

Higher-order function: takes a function as an argument
Callback function: the function passed into another function
Tip : $0 (DevTools, Refers to the currently selected element in the Elements panel)

9. Adding Animation

Using classList : ex) document.querySelector("name").classList.add("pressed");
setTimeout(function, milliseconds) : Used to create temporary visual effects
- ex) setTimeout(function () { activeButton.classList.remove("pressed"); }, 100);