JavaScript - Coding Factory 9

Αποθετήριο εκπαιδευτικού υλικού JavaScript για το πρόγραμμα Coding Factory (9ος κύκλος). Καλύπτει τα θεμελιώδη και ενδιάμεσα θέματα της γλώσσας, από τα βασικά στοιχεία σύνταξης μέχρι DOM manipulation, AJAX και ολοκληρωμένες εφαρμογές.

Πίνακας Περιεχομένων

Τεχνολογίες
Δομή Project
Ενότητες
Πώς να τρέξεις τον κώδικα
Βιβλιοθήκες & Εξωτερικά APIs

Τεχνολογίες

JavaScript (ES6+) — Κυρίαρχη γλώσσα του repository
HTML5 / CSS3 — Για τα browser-based παραδείγματα
Node.js — Εκτέλεση .js αρχείων στο terminal
jQuery 3.7.1 — Για DOM manipulation και event handling σε ορισμένα παραδείγματα
Axios 1.x — HTTP client για AJAX κλήσεις
Tailwind CSS — Utility-first CSS framework (Notes App, Movies App)
Bootstrap 5.3 — CSS framework (Counter App)
OMDB API — Εξωτερικό API για αναζήτηση ταινιών

Δομή Project

cf9javascript/
│
├── hello.js                        # Hello World
├── vars.js                         # var, let, const
│
├── review/                         # Ασκήσεις Επανάληψης
│   ├── hello.js
│   ├── bigint.js
│   ├── celsius.js
│   ├── double.js
│   ├── rounding.js
│   └── strings.js
│
├── boolean/                        # Έλεγχος Ροής
│   ├── if-else.js
│   ├── switch-case.js
│   ├── ternary.js
│   ├── for.js
│   ├── while.js
│   └── first-falsey.js
│
├── number/                         # Αριθμοί & Μαθηματικά
│   ├── celcius.js
│   ├── euros.js
│   └── wrapper.js
│
├── string/                         # Strings
│   ├── decl.js
│   ├── str-methods.js
│   └── regex.js
│
├── array/                          # Πίνακες (Arrays)
│   ├── create.js
│   ├── join.js
│   ├── splice.js
│   ├── spreading.js
│   ├── sorting.js
│   ├── Array-min-max.js
│   ├── get-indexes.js
│   ├── delete-by-index.js
│   ├── delete-by-traverse.js
│   ├── immutable-arrays.js
│   ├── functional-programming.js
│   ├── stack-lifo.js
│   ├── queue-fifo.js
│   ├── insert-and-exceptions.js
│   └── error-classes.js
│
├── objects/                        # Αντικείμενα (Objects)
│   ├── create-object.js
│   ├── object-methods.js
│   ├── iterate.js
│   ├── destructure.js
│   ├── immu-obj.js
│   ├── conditional.js
│   ├── json.js
│   └── json2.js
│
├── functions/                      # Συναρτήσεις
│   ├── functions.js
│   └── closure.js
│
├── classes/                        # Κλάσεις (OOP)
│   ├── simple-class.js
│   ├── private-by-convention.js
│   └── private-fields.js
│
├── browser/                        # DOM Manipulation
│   ├── hello.html
│   ├── event.html
│   ├── content.html
│   ├── create-image.html
│   ├── main.js
│   ├── main.css
│   └── jquery/
│       ├── index.html
│       ├── template.html
│       └── counter/
│           ├── index.html
│           ├── counter.js
│           └── main.css
│
├── ajax/                           # AJAX & Asynchronous
│   ├── xhr.html
│   ├── fetch-api-get.html
│   ├── fetch-api-post.html
│   ├── axios-get.html
│   ├── axios-post.html
│   ├── async-await-fetch-api-get.html
│   ├── async-await-axios-get.html
│   └── async-await-axios-post.html
│
├── apps/                           # Ολοκληρωμένες Εφαρμογές
│   ├── counter-app/
│   │   ├── index.html
│   │   ├── main.js
│   │   └── main.css
│   ├── notes-app/
│   │   ├── index.html
│   │   └── main.js
│   └── moviesapp/
│       ├── index.html
│       ├── js/
│       │   └── index.js
│       └── img/
│
└── img/
    └── logo.png

Ενότητες

1. Βασικά

Αρχείο	Περιγραφή
`hello.js`	Το πρώτο πρόγραμμα — `console.log("Hello, World!")`
`vars.js`	Δήλωση μεταβλητών με `var`, `let`, `const` και διαφορές τους

Βασικές έννοιες:

let — επαναεκχωρήσιμη μεταβλητή
const — σταθερά, δεν μπορεί να επαναεκχωρηθεί
var — παλαιού τύπου, function-scoped (αποφεύγεται στη σύγχρονη JS)

2. Review / Ασκήσεις

Ο φάκελος review/ περιέχει σύντομες ασκήσεις για επανάληψη θεμελιωδών εννοιών.

Αρχείο	Περιγραφή
`hello.js`	Hello World με JSDoc comment
`bigint.js`	`BigInt` — αριθμοί μεγαλύτεροι από `Number.MAX_SAFE_INTEGER`
`celsius.js`	Μετατροπή Κελσίου → Φαρενάιτ με function
`double.js`	Arrow function που διπλασιάζει έναν αριθμό
`rounding.js`	Στρογγυλοποίηση σε 2 δεκαδικά με `Math.round`
`strings.js`	Template literals και string interpolation

3. Booleans & Έλεγχος Ροής

Αρχείο	Περιγραφή
`if-else.js`	Αξιολόγηση βαθμολογίας με `if / else if / else`
`switch-case.js`	Μετατροπή αριθμού σε όνομα ημέρας με `switch`
`ternary.js`	Ternary operator — έλεγχος άρτιου/περιττού
`for.js`	`for` loop και `for...of` για άθροισμα πίνακα
`while.js`	`while` loop για άθροισμα 1–5
`first-falsey.js`	Short-circuit evaluation: `&&` (first falsey) και `\|\|` (first truthy)

Παράδειγμα — ternary:

result = (num % 2 === 0) ? "Even" : "Odd";

Παράδειγμα — short-circuit:

hasAccess = isLogin && isAdmin;     // AND: επιστρέφει πρώτη falsey τιμή
isAllowed = isGuest || isMember;    // OR: επιστρέφει πρώτη truthy τιμή

4. Αριθμοί

Αρχείο	Περιγραφή
`celcius.js`	Μετατροπή Κελσίου σε Φαρενάιτ
`euros.js`	Μετατροπή Ευρώ σε Δολάρια, στρογγυλοποίηση με `Math.round` και `toFixed(2)`
`wrapper.js`	Number wrapper object: `Number.MAX_VALUE`, `Number.MIN_VALUE`, `Number.parseInt`

5. Strings

Αρχείο	Περιγραφή
`decl.js`	Δήλωση strings: double quotes, single quotes, template literals, multi-line
`str-methods.js`	Μέθοδοι: `localeCompare`, `includes`, `indexOf`, `toUpperCase`, `trim`, `replace`, `substring`, `slice`, traversal
`regex.js`	Regular Expressions: `test()`, `match()`, flags `i` (case-insensitive), `g` (global)

Βασικές μέθοδοι:

str.includes("ell")           // έλεγχος ύπαρξης υποαλυσίδας
str.indexOf("lo")             // θέση πρώτης εμφάνισης
str.toUpperCase()             // κεφαλαία
str.trim()                    // αφαίρεση whitespace
str.replace("fox", "cat")     // αντικατάσταση
str.substring(1, 4)           // υπο-αλυσίδα
str.slice(-3)                 // από το τέλος
str.localeCompare(str2, "el-GR")  // locale-aware σύγκριση

6. Arrays

Ο φάκελος array/ είναι ο πλουσιότερος σε παραδείγματα, καλύπτοντας όλες τις βασικές λειτουργίες.

Αρχείο	Περιγραφή
`create.js`	Δημιουργία πίνακα, 2D array, traversal με `for`, `for...of`, `forEach`
`join.js`	`join()`, `push()`, `delete` (και γιατί να αποφεύγεται)
`splice.js`	`splice()` για εισαγωγή, διαγραφή, ενημέρωση
`spreading.js`	Spread operator `[...arr]` — shallow copy, string σε array
`sorting.js`	Ταξινόμηση με `sort()`, `toSorted()`, spread trick
`Array-min-max.js`	Εύρεση min/max με `Math.min(...arr)` και classic loop
`get-indexes.js`	Εύρεση όλων των θέσεων τιμής με `forEach` και `reduce`
`delete-by-index.js`	Διαγραφή στοιχείου με `indexOf` + `splice`
`delete-by-traverse.js`	Διαγραφή όλων εμφανίσεων backwards traversal (mutable) και `filter` (immutable)
`immutable-arrays.js`	Immutable CRUD: add/update/delete χωρίς mutation
`functional-programming.js`	`forEach`, `map`, `filter`, `reduce`, `some`, `every`, `flatMap`, `findIndex`
`stack-lifo.js`	Stack (LIFO) με `push` / `pop`
`queue-fifo.js`	Queue (FIFO) με `push` / `shift`
`insert-and-exceptions.js`	Εισαγωγή με validation και `try/catch`
`error-classes.js`	Custom Error classes: `ProductAlreadyExistsError`, `ProductNotFoundError`, `IllegalArgumentError`

Functional Programming με Arrays

// map — μετασχηματισμός κάθε στοιχείου
const emails = users.map(user => user.email);

// filter — φιλτράρισμα
const activeUsers = users.filter(user => user.isActive);

// reduce — συνάθροιση
const total = cart.reduce((sum, item) => sum + item.price, 0);

// some — τουλάχιστον ένα να πληροί συνθήκη
const hasExpensive = cart.some(item => item.price > 500);

// every — όλα να πληρούν συνθήκη
const allAffordable = cart.every(item => item.price < 1500);

// flatMap — flat + map σε ένα βήμα
const allTags = posts.flatMap(post => post.tags);

Stack & Queue

// Stack (LIFO)
stack.push(6);        // εισαγωγή στην κορυφή
stack.pop();          // αφαίρεση από την κορυφή

// Queue (FIFO)
queue.push(6);        // εισαγωγή στο τέλος
queue.shift();        // αφαίρεση από την αρχή

Custom Error Classes

class ProductAlreadyExistsError extends Error {
    constructor(message) {
        super(message);
        this.code = "ProductAlreadyExists";
    }
}

7. Objects

Αρχείο	Περιγραφή
`create-object.js`	Δημιουργία με object literal `{}` και `new Object()`
`object-methods.js`	Ορισμός μεθόδων σε object, χρήση `this`
`iterate.js`	`Object.keys()`, `Object.values()`, `Object.entries()`
`destructure.js`	Destructuring assignment, rename κατά την ανάθεση
`immu-obj.js`	Immutable add/update/delete με spread operator `{...obj}`
`conditional.js`	Optional chaining `?.` και nullish coalescing `??`
`json.js`	`JSON.stringify()` (serialization) και `JSON.parse()` (deserialization)
`json2.js`	Parsing σύνθετου JSON (nested objects, arrays, null)

Παραδείγματα βασικών εννοιών:

// Optional Chaining + Nullish Coalescing
let lastname = book?.author?.lastname ?? "Unknown";

// Destructuring
const { firstname, lastname, age: aliceAge } = person;

// Immutable Update
const updateObj = (obj, field, value) => ({ ...obj, [field]: value });

// Immutable Delete
const deleteFromObj = (obj, field) => {
    const { [field]: _, ...rest } = obj;
    return rest;
};

8. Functions

Αρχείο	Περιγραφή
`functions.js`	Function declaration, function expression, arrow function, optional params, default params, rest parameters
`closure.js`	Closure με factory function, σύγκριση με private fields σε class

Τύποι συναρτήσεων:

// 1. Function Declaration
function sayHello(name) { return `Hello ${name}!`; }

// 2. Function Expression
const add = function(a, b) { return a + b; };

// 3. Arrow Function
const multiply = (a, b) => a * b;

// 4. Default Parameters
function addUser(name = "Anonymous", age = 18, isAdmin = false) { ... }

// 5. Rest Parameters
function max(...numbers) { return Math.max(...numbers); }

Closure:

function createCounter() {
    let count = 0;               // private — απομονωμένο στο closure
    return function() {
        count++;
        return count;
    };
}
const counter = createCounter();
counter(); // 1
counter(); // 2

9. Classes

Αρχείο	Περιγραφή
`simple-class.js`	Βασική κλάση με `constructor`, public property, μέθοδοι
`private-by-convention.js`	"Private" με underscore σύμβαση (`_count`) — δεν είναι πραγματικά private
`private-fields.js`	Πραγματικά private fields με `#` (ES2022), initialization στον constructor

Εξέλιξη private fields:

// 1. Public (απλή κλάση)
class Counter {
    constructor() { this.count = 0; }
}

// 2. Private by convention (υπόσχεση, όχι εφαρμογή)
class Counter {
    constructor() { this._count = 0; }  // _ = "please don't touch"
}

// 3. True private fields (ES2022)
class Counter {
    #count = 0;
    constructor(initialValue = 0) { this.#count = initialValue; }
    increment() { return ++this.#count; }
}

10. Browser & DOM

Vanilla JS DOM

Αρχείο	Περιγραφή
`hello.html`	`getElementById` και `textContent`
`event.html`	Event listeners: `onclick` attribute vs `addEventListener`
`content.html`	Εξωτερικό JS αρχείο, `innerHTML`, `style`, `classList`
`create-image.html`	`createElement`, `appendChild`, `querySelector`

jQuery

Αρχείο	Περιγραφή
`jquery/index.html`	jQuery `$(function())`, `$('#id').text()`
`jquery/counter/`	Counter app με jQuery + Bootstrap

Σύγκριση Vanilla JS vs jQuery:

// Vanilla JS
document.getElementById('btn').addEventListener('click', fn);
document.querySelector('#root').textContent = 'Hello';

// jQuery
$('#btn').on('click', fn);
$('#root').text('Hello');

11. AJAX & Asynchronous JavaScript

Ο φάκελος ajax/ παρουσιάζει όλους τους τρόπους εκτέλεσης HTTP αιτημάτων στο browser.

XMLHttpRequest (παλαιός τρόπος)

Αρχείο	Περιγραφή
`xhr.html`	`XMLHttpRequest` με `onreadystatechange`, callback-based

Fetch API (σύγχρονο native API)

Αρχείο	Περιγραφή
`fetch-api-get.html`	GET με Promises (`.then().catch()`)
`fetch-api-post.html`	POST με `method`, `headers`, `body: JSON.stringify(...)`
`async-await-fetch-api-get.html`	GET με `async/await` και `try/catch`

Axios (βιβλιοθήκη)

Αρχείο	Περιγραφή
`axios-get.html`	GET με Promises — auto JSON parse μέσω `response.data`
`axios-post.html`	POST — auto JSON stringify + Content-Type header, error localization
`async-await-axios-get.html`	GET με `async/await` + event listener
`async-await-axios-post.html`	POST με `async/await`, payload object, error handling

Σύγκριση τεχνολογιών:

	XHR	Fetch API	Axios
Σύνταξη	Verbose, callback	Promise-based	Promise-based
JSON parse	Χειροκίνητο	`response.json()`	Αυτόματο (`response.data`)
Error handling	Χειροκίνητο status check	Χειροκίνητο (`response.ok`)	Αυτόματο (non-2xx → catch)
Browser support	Παντού	Σύγχρονα browsers	Παντού (βιβλιοθήκη)

Παράδειγμα — async/await με Axios:

document.querySelector('#btn').addEventListener('click', async () => {
    try {
        const response = await axios.get('https://api.example.com/posts/1');
        console.log(response.data.title);
    } catch (error) {
        console.error('Error:', error.message);
    }
});

12. Εφαρμογές (Apps)

Counter App (`apps/counter-app/`)

Μετρητής με αύξηση, μείωση και reset. Υλοποιημένος με Vanilla JavaScript και Bootstrap 5.

Χαρακτηριστικά:

Αρχιτεκτονική MVC: Controllers → Model → View (render)
Χρωματική αλλαγή: πράσινο (θετικός), κόκκινο (αρνητικός), μαύρο (μηδέν)
Event handling με DOMContentLoaded και addEventListener

Τεχνολογίες: HTML, CSS, Vanilla JS, Bootstrap 5.3

Counter App με jQuery (`browser/jquery/counter/`)

Ίδια λογική με το Counter App αλλά υλοποιημένη με jQuery.

Σύγκριση με Vanilla:

// Vanilla JS
counterEl.classList.remove('color-green', 'color-red');
counterEl.classList.add(counter > 0 ? 'color-green' : 'color-red');

// jQuery
$counter.toggleClass('color-green', counter > 0);
$counter.toggleClass('color-red', counter < 0);

Τεχνολογίες: HTML, CSS, jQuery 3.7.1, Bootstrap 5.3

Notes App (`apps/notes-app/`)

Εφαρμογή σημειώσεων με προσθήκη, soft-delete (strikethrough) και οριστική διαγραφή.

Χαρακτηριστικά:

Ελληνική ημερομηνία και ρολόι πραγματικού χρόνου (ανανέωση ανά δευτερόλεπτο)
Immutable state management: notes = [...notes, newNote] (add), notes.map(...) (update), notes.filter(...) (delete)
Δημιουργία DOM στοιχείων δυναμικά με createElement
Υποστήριξη Enter key για γρήγορη εισαγωγή
Soft-delete με checkbox και line-through styling

Τεχνολογίες: HTML, Vanilla JS, Tailwind CSS (CDN)

Movies App (`apps/moviesapp/`)

Εφαρμογή αναζήτησης ταινιών που χρησιμοποιεί το OMDB API.

Χαρακτηριστικά:

Real-time αναζήτηση με debounce (1500ms) για μείωση API calls
Εμφάνιση αφίσας, τίτλου, έτους, διάρκειας, είδους, IMDB rating, plot
Expandable "Περισσότερα" panel με slideToggle (σκηνοθέτης, ηθοποιοί, box office, κλπ.)
Σύνδεσμος απευθείας στη σελίδα IMDB της ταινίας
Χειρισμός τριών καταστάσεων: loading (spinner), "not found", error
Αρχιτεκτονική: separation of concerns (event handling → fetch → render)

Τεχνολογίες: HTML, jQuery 3.7.1, Axios, Tailwind CSS (CDN), OMDB API

Για να τρέξει το Movies App χρειάζεται έγκυρο API key από το omdbapi.com και αντικατάσταση του thewdb στο αρχείο apps/moviesapp/js/index.js.

Πώς να τρέξεις τον κώδικα

Node.js αρχεία (`.js`)

Βεβαιώσου ότι έχεις εγκατεστημένο το Node.js.

# Εκτέλεση ενός αρχείου
node hello.js
node array/functional-programming.js
node classes/private-fields.js

Browser αρχεία (`.html`)

Άνοιξε τα HTML αρχεία απευθείας στον browser (double-click) ή χρησιμοποίησε ένα live server extension (π.χ. Live Server για VS Code).

# Με Live Server (VS Code extension)
# Κλικ δεξί στο .html αρχείο → "Open with Live Server"

Βιβλιοθήκες & Εξωτερικά APIs

Βιβλιοθήκη / API	Έκδοση	Χρήση
jQuery	3.7.1	DOM manipulation, events, AJAX
Axios	1.x	HTTP requests
Bootstrap	5.3.8	UI / layout (Counter App)
Tailwind CSS	CDN	Utility-first styling (Notes App, Movies App)
JSONPlaceholder	—	Fake REST API για AJAX παραδείγματα
OMDB API	—	Movie database API (Movies App)

Σημειώσεις

Όλος ο κώδικας είναι εκπαιδευτικός — δεν προορίζεται για production χρήση.
Τα αρχεία ακολουθούν progressive complexity: κάθε ενότητα χτίζει πάνω στην προηγούμενη.
Στα AJAX παραδείγματα χρησιμοποιείται το jsonplaceholder.typicode.com ως dummy API.
Στο Movies App ο API key thewdb είναι placeholder — αντικατάστησέ τον με έγκυρο key.

Coding Factory 9 — JavaScript Module

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
ajax		ajax
apps		apps
array		array
boolean		boolean
browser		browser
classes		classes
functions		functions
img		img
number		number
objects		objects
review		review
string		string
README.md		README.md
hello.js		hello.js
vars.js		vars.js

Folders and files

Latest commit

History

Repository files navigation

JavaScript - Coding Factory 9

Πίνακας Περιεχομένων

Τεχνολογίες

Δομή Project

Ενότητες

1. Βασικά

2. Review / Ασκήσεις

3. Booleans & Έλεγχος Ροής

4. Αριθμοί

5. Strings

6. Arrays

Functional Programming με Arrays

Stack & Queue

Custom Error Classes

7. Objects

8. Functions

9. Classes

10. Browser & DOM

Vanilla JS DOM

jQuery

11. AJAX & Asynchronous JavaScript

XMLHttpRequest (παλαιός τρόπος)

Fetch API (σύγχρονο native API)

Axios (βιβλιοθήκη)

12. Εφαρμογές (Apps)

Counter App (apps/counter-app/)

Counter App με jQuery (browser/jquery/counter/)

Notes App (apps/notes-app/)

Movies App (apps/moviesapp/)

Πώς να τρέξεις τον κώδικα

Node.js αρχεία (.js)

Browser αρχεία (.html)

Βιβλιοθήκες & Εξωτερικά APIs

Σημειώσεις

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Uh oh!

Contributors

Uh oh!

Languages

Counter App (`apps/counter-app/`)

Counter App με jQuery (`browser/jquery/counter/`)

Notes App (`apps/notes-app/`)

Movies App (`apps/moviesapp/`)

Node.js αρχεία (`.js`)

Browser αρχεία (`.html`)

Packages