Mastering Javascript: Οδηγός για Κατασκευή Σύγχρονων Ιστοσελίδων – 156 ΣΕΛΙΔΕΣ

Περιεχόμενα

ΚΕΦΑΛΑΙΟ 1: ΕΙΣΑΓΩΓΗ ΣΤΗ JAVASCRIPT
1.1 Τι είναι η JavaScript;

• 1.1.1 Ιστορία και ρόλος της JavaScript στο web

• 1.1.2 Πώς λειτουργεί σε συνδυασμό με HTML & CSS

• 1.1.3 Εκδόσεις (ES5, ES6 και νεότερες)
  1.2 Τρόποι ενσωμάτωσης της JavaScript σε μια ιστοσελίδα

• 1.2.1 Εσωτερικά (inline, script tag)

• 1.2.2 Εξωτερικά αρχεία JavaScript

• 1.2.3 Async και Defer
  1.3 Βασικά στοιχεία της γλώσσας

• 1.3.1 Μεταβλητές και Τύποι δεδομένων

• 1.3.2 Λειτουργίες των Operators

• 1.3.3 Βασικές δομές ελέγχου (if, switch)

• 1.3.4 Βρόχοι (for, while, do…while)
  1.4 Συναρτήσεις και Πεδίο Ορατότητας (Scope)

• 1.4.1 Δημιουργία και χρήση συναρτήσεων

• 1.4.2 Global vs Local scope

• 1.4.3 Arrow functions & Higher Order Functions

ΚΕΦΑΛΑΙΟ 2: ΤΟ DOM ΚΑΙ Η ΔΙΑΧΕΙΡΙΣΗ ΤΟΥ
2.1 Τι είναι το DOM και πώς το διαχειριζόμαστε

• 2.1.1 Δομή του DOM

• 2.1.2 Επιλογή στοιχείων (getElementById, querySelector)

• 2.1.3 Αλλαγές στο περιεχόμενο (innerHTML, textContent)
  2.2 Διαχείριση στοιχείων και CSS μέσω JavaScript

• 2.2.1 Προσθήκη, αλλαγή και αφαίρεση κλάσεων (classList)

• 2.2.2 Αλλαγή στυλ με style

• 2.2.3 Χρήση CSS Variables μέσω JavaScript
  2.3 Δημιουργία και αφαίρεση στοιχείων στο DOM

• 2.3.1 createElement, appendChild, removeChild

• 2.3.2 innerHTML vs document.createElement

• 2.3.3 Εφαρμογή δυναμικών αλλαγών στο UI

ΚΕΦΑΛΑΙΟ 3: ΔΙΑΔΡΑΣΗ & EVENT HANDLING
3.1 Συμβάντα (Events) και Event Listeners

• 3.1.1 click, mouseover, keydown, scroll κτλ.

• 3.1.2 addEventListener και removeEventListener

• 3.1.3 Event bubbling και event delegation
  3.2 Form Handling & Validations

• 3.2.1 Ανάκτηση δεδομένων από input fields

• 3.2.2 Validation με JavaScript

• 3.2.3 Χρήση Regular Expressions
  3.3 Προσαρμογή CSS με JavaScript Events

• 3.3.1 Hover effects

• 3.3.2 Sticky headers και dynamic classes

• 3.3.3 Responsive design με JavaScript

ΚΕΦΑΛΑΙΟ 4: ΕΜΨΥΧΩΣΕΙΣ (ANIMATIONS) & ΔΥΝΑΜΙΚΑ ΕΦΕ
4.1 CSS Animations μέσω JavaScript

• 4.1.1 setInterval, setTimeout

• 4.1.2 requestAnimationFrame

• 4.1.3 Keyframes μέσω JavaScript
  4.2 Χρήση των Web Animations API

• 4.2.1 element.animate()

• 4.2.2 Εφέ fade-in, slide-in, bounce κ.ά.

• 4.2.3 Συνδυασμός JavaScript & CSS animations
  4.3 Παρακολούθηση αλλαγών στο DOM

• 4.3.1 MutationObserver

• 4.3.2 Intersection Observer για lazy loading

• 4.3.3 Responsive παρακολούθηση αλλαγών