Εισαγωγή & Θεμελιώδεις έννοιες

Κεφάλαιο 1: Πώς λειτουργεί το Διαδίκτυο; (Κοιτάζοντας "Κάτω από το Καπό")

Πριν γράψουμε έστω και μία γραμμή κώδικα, είναι κρίσιμο να καταλάβουμε τη μεγάλη εικόνα. Τι ακριβώς συμβαίνει από τη στιγμή που πληκτρολογείς www.google.com στον browser σου μέχρι τη στιγμή που εμφανίζεται η σελίδα αναζήτησης;

Ας το δούμε βήμα-βήμα, χρησιμοποιώντας απλές αναλογίες.

1.1 Client vs. Server: Ο διάλογος του διαδικτύου

Φαντάσου το διαδίκτυο σαν μια γιγαντιαία, παγκόσμια βιβλιοθήκη. Σε αυτό το σενάριο:

  • Ο Client (Πελάτης): Είσαι εσύ, ή πιο σωστά, η συσκευή σου (ο υπολογιστής, το κινητό σου) και το πρόγραμμα περιήγησης (browser) που χρησιμοποιείς (Chrome, Firefox, Safari). Ο Client είναι αυτός που ζητάει πληροφορίες. Είναι ο επισκέπτης της βιβλιοθήκης που ψάχνει ένα συγκεκριμένο βιβλίο.

  • Ο Server (Εξυπηρετητής): Είναι ένας πανίσχυρος υπολογιστής, κάπου στον κόσμο, που είναι συνεχώς συνδεδεμένος στο διαδίκτυο. Η δουλειά του είναι να αποθηκεύει ιστοσελίδες (τα "βιβλία" της βιβλιοθήκης μας) και να τις σερβίρει (να τις δίνει) σε όποιον Client τις ζητήσει. Κάθε ιστοσελίδα που επισκέπτεσαι (Facebook, YouTube, ειδησεογραφικά sites) "ζει" σε έναν ή πολλούς servers.

Με απλά λόγια: Η σχέση Client-Server είναι ο πυρήνας του web. Ο Client ζητάει, και ο Server απαντάει. Όλη η μαγεία του διαδικτύου είναι ένας συνεχής διάλογος μεταξύ Clients και Servers.

1.2 HTTP Request: Το "Γράμμα" που στέλνει ο Client

Ωραία, ο Client θέλει μια σελίδα από τον Server. Πώς ακριβώς του το ζητάει; Δεν του τηλεφωνεί. Του στέλνει ένα ψηφιακό "μήνυμα" που ονομάζεται HTTP Request (Αίτημα HTTP).

Το HTTP (HyperText Transfer Protocol) είναι απλά το σύνολο των κανόνων, η "γλώσσα", που χρησιμοποιούν οι Clients και οι Servers για να μιλήσουν μεταξύ τους.

Ένα απλό HTTP Request περιέχει πληροφορίες όπως:

  • Τι θέλω; (π.χ. GET - Θέλω να λάβω δεδομένα)
  • Ποια συγκεκριμένη σελίδα θέλω; (π.χ. /about-us.html)
  • Ποιος browser κάνει την αίτηση; (π.χ. Chrome)
  • Ποιες γλώσσες καταλαβαίνω; (π.χ. Ελληνικά, Αγγλικά)

Όταν ο Server λάβει αυτό το αίτημα, το επεξεργάζεται, βρίσκει την ιστοσελίδα που ζητήθηκε, και στέλνει πίσω τη δική του απάντηση: το HTTP Response (Απάντηση HTTP). Αυτή η απάντηση περιέχει την ίδια την ιστοσελίδα (τον κώδικα HTML, CSS, JavaScript) και έναν κωδικό κατάστασης, όπως:

  • 200 OK: "Όλα πήγαν καλά, ορίστε η σελίδα που ζήτησες."
  • 404 Not Found: "Έψαξα, αλλά δεν μπόρεσα να βρω τη σελίδα που μου ζήτησες." (Σίγουρα το έχεις δει!)
  • 500 Internal Server Error: "Κάτι πήγε πολύ στραβά από τη μεριά μου, οπότε δεν μπορώ να σε εξυπηρετήσω τώρα."

Σημείωση: Σήμερα, το πιο συνηθισμένο είναι το HTTPS. Το "S" σημαίνει Secure (Ασφαλές). Είναι ακριβώς το ίδιο με το HTTP, αλλά όλη η επικοινωνία μεταξύ του browser σου και του server είναι κρυπτογραφημένη. Γι' αυτό βλέπεις το λουκετάκι δίπλα στη διεύθυνση των περισσότερων σύγχρονων sites.

1.3 Domain Name & DNS: Ο τηλεφωνικός κατάλογος του διαδικτύου

Έχουμε ένα τελευταίο κομμάτι στο παζλ. Όταν ο browser σου θέλει να στείλει ένα μήνυμα (HTTP Request) στον server της Google, πώς ξέρει πού να το στείλει;

Οι υπολογιστές και οι servers στο διαδίκτυο δεν αναγνωρίζονται με ονόματα όπως google.com. Αναγνωρίζονται με αριθμητικές διευθύνσεις, που λέγονται IP Addresses (π.χ. 142.250.180.142). Μια IP είναι σαν τη διεύθυνση του σπιτιού του Server.

Θα ήταν αδύνατο για εμάς τους ανθρώπους να θυμόμαστε αυτούς τους αριθμούς για κάθε site που θέλουμε να επισκεφτούμε. Για αυτόν τον λόγο εφευρέθηκαν τα Domain Names (Ονόματα Τομέα), όπως google.com, wikipedia.org, κ.λπ.

Εδώ έρχεται το DNS (Domain Name System). Το DNS είναι ο "τηλεφωνικός κατάλογος" του διαδικτύου. Όταν πληκτρολογείς www.google.com στον browser σου, συμβαίνει το εξής:

  1. Ο browser σου δεν ξέρει πού είναι αυτό.
  2. Ρωτάει έναν κοντινό DNS server: "Φίλε, ξέρεις ποια είναι η IP διεύθυνση για το www.google.com;"
  3. Ο DNS server ψάχνει στον κατάλογό του και απαντάει: "Ναι, είναι το 142.250.180.142."
  4. Τέλεια! Τώρα ο browser σου ξέρει την ακριβή "ταχυδρομική διεύθυνση" του server της Google και μπορεί να του στείλει το HTTP Request.

Συνοψίζοντας τη Ροή:

  1. Εσύ (Client) πληκτρολογείς www.example.com στον browser σου.
  2. Ο browser σου ρωτάει το DNS για την IP διεύθυνση του www.example.com.
  3. Το DNS απαντάει με την IP (π.χ. 93.184.216.34).
  4. Ο browser σου στέλνει ένα HTTP Request στη διεύθυνση 93.184.216.34, ζητώντας την αρχική σελίδα.
  5. Ο Server σε αυτή τη διεύθυνση λαμβάνει το αίτημα, βρίσκει τα αρχεία της ιστοσελίδας…
  6. …και στέλνει πίσω ένα HTTP Response που περιέχει τον κώδικα (HTML, CSS, JS).
  7. Ο browser σου λαμβάνει αυτόν τον κώδικα και τον "μεταφράζει" στην όμορφη, διαδραστική ιστοσελίδα που βλέπεις στην οθόνη σου.

Συγχαρητήρια! Μόλις έμαθες τον θεμελιώδη μηχανισμό που κάνει ολόκληρο το World Wide Web να λειτουργεί. Δεν χρειάζεται να απομνημονεύσεις κάθε λεπτομέρεια, αλλά η κατανόηση αυτής της ροής θα σου δώσει μια τεράστια ώθηση καθώς προχωράμε στα επόμενα κεφάλαια.

Κεφάλαιο 2: Τα εργαλεία του προγραμματιστή

Τώρα που ξέρουμε τη διαδρομή από το αίτημα (request) μέχρι την απάντηση (response), είναι ώρα να δούμε με τι θα "χτίσουμε" την απάντηση. Για να γράψουμε κώδικα, χρειαζόμαστε ένα ψηφιακό γραφείο, ένα μέρος για να ελέγχουμε τη δουλειά μας και έναν τρόπο να δίνουμε εντολές στον υπολογιστή μας.

2.1 Ο Code Editor: Το ψηφιακό μας εργαστήρι (Visual Studio Code)

Φαντάσου έναν επεξεργαστή κειμένου όπως το Microsoft Word ή το Google Docs, αλλά φτιαγμένο ειδικά για να γράφεις κώδικα. Αυτό είναι ένας Code Editor.

  • Τι είναι: Είναι ένα πρόγραμμα που μας βοηθά να γράφουμε κώδικα πιο εύκολα και γρήγορα. Ενώ θα μπορούσες θεωρητικά να γράψεις HTML ακόμα και στο Σημειωματάριο (Notepad) των Windows, ένας καλός editor προσφέρει δυνατότητες που αλλάζουν τα πάντα:
    • Syntax Highlighting: Χρωματίζει διαφορετικά μέρη του κώδικά σου (tags, attributes, text) για να είναι πιο ευανάγνωστος.
    • Autocompletion: Προβλέπει τι πας να γράψεις και σου προτείνει επιλογές, γλιτώνοντάς σε από πληκτρολόγηση και τυπογραφικά λάθη.
    • Error Checking: Υπογραμμίζει πιθανά λάθη στον κώδικά σου πριν καν τον τρέξεις.
  • Η επιλογή μας: Visual Studio Code (VS Code) Υπάρχουν πολλοί εξαιρετικοί code editors, αλλά θα χρησιμοποιήσουμε το VS Code. Γιατί;
    1. Είναι δωρεάν.
    2. Είναι απίστευτα δημοφιλές. Αυτό σημαίνει ότι υπάρχει μια τεράστια κοινότητα που παρέχει υποστήριξη και αμέτρητους οδηγούς online.
    3. Έχει ένα γιγαντιαίο "οικοσύστημα" από extensions (επεκτάσεις), μικρά προγραμματάκια που μπορείς να εγκαταστήσεις για να του δώσεις νέες δυνατότητες.
  • Πρώτα Βήματα:
    1. Πήγαινε στην επίσημη ιστοσελίδα: https://code.visualstudio.com/
    2. Κατέβασε την έκδοση για το λειτουργικό σου σύστημα (Windows, Mac, Linux) και κάνε την εγκατάσταση.
    3. Άνοιξέ το! Αυτό είναι το νέο σου ψηφιακό γραφείο.
  • Οι 2 πρώτες "Υπερδυνάμεις" που θα του δώσουμε (Extensions): Μέσα από το VS Code, πήγαινε στην καρτέλα "Extensions" (το εικονίδιο με τα τετραγωνάκια στα αριστερά) και εγκατέστησε τα εξής:
    1. Live Server: Αυτό το μαγικό extension δημιουργεί έναν μικρό, τοπικό web server στον υπολογιστή σου. Όταν ανοίγεις ένα HTML αρχείο με το Live Server, κάθε φορά που σώζεις μια αλλαγή στον κώδικά σου, η ιστοσελίδα στο browser σου ανανεώνεται αυτόματα! Όχι άλλο πάτημα του F5 εκατοντάδες φορές την ημέρα.
    2. Prettier - Code Formatter: Το Prettier είναι ένας "αυτόματος στυλίστας" για τον κώδικά σου. Εξασφαλίζει ότι ο κώδικάς σου έχει πάντα σωστή στοίχιση και μορφοποίηση με το πάτημα ενός κουμπιού (ή αυτόματα κάθε φορά που σώζεις). Αυτό σε βοηθά να διατηρείς τον κώδικα καθαρό και ευανάγνωστο, μια κρίσιμη συνήθεια για κάθε προγραμματιστή.

2.2 Ο Web Browser: Το "Παράθυρο" και τα "Γυαλιά" μας (Developer Tools)

Ο browser (Chrome, Firefox, Edge) δεν είναι απλά το πρόγραμμα για να βλέπουμε ιστοσελίδες. Είναι και το πιο σημαντικό μας εργαλείο για να τις ελέγχουμε και να διορθώνουμε τα λάθη τους (debugging).

Κάθε σύγχρονος browser έρχεται με ένα ενσωματωμένο σετ εργαλείων για προγραμματιστές, τα Developer Tools (ή DevTools).

  • Πώς τα ανοίγεις:
    • Πατώντας το πλήκτρο F12.
    • Με το συνδυασμό πλήκτρων Ctrl+Shift+I (ή Cmd+Option+I σε Mac).
    • Κάνοντας δεξί κλικ οπουδήποτε σε μια σελίδα και επιλέγοντας "Inspect" (Επιθεώρηση).

  • Τι μπορείς να κάνεις με αυτά; Άνοιξε τα DevTools σε οποιαδήποτε σελίδα τώρα και κοίτα την καρτέλα "Elements". Αυτό που βλέπεις είναι ο ζωντανός HTML κώδικας της σελίδας! Μπορείς να κάνεις κλικ σε οποιοδήποτε στοιχείο (π.χ. έναν τίτλο) και στα δεξιά να δεις ακριβώς ποιοι κανόνες CSS εφαρμόζονται πάνω του.

    Μικρή άσκηση: Πήγαινε σε μια σελίδα, άνοιξε τα DevTools, βρες τον HTML κώδικα ενός τίτλου, κάνε διπλό κλικ πάνω στο κείμενο και άλλαξέ το. Η αλλαγή θα φανεί ζωντανά στη σελίδα σου! (Μην ανησυχείς, οι αλλαγές είναι προσωρινές και μόνο για εσένα. Με μια ανανέωση της σελίδας, όλα επανέρχονται).

Το εργαλείο "Inspect Element" θα γίνει ο καλύτερός σου φίλος. Είναι ο τρόπος να καταλαβαίνεις γιατί ένα στοιχείο δεν εμφανίζεται εκεί που θέλεις ή γιατί δεν έχει το χρώμα που περιμένεις.

2.3 Το Terminal/Command Line: Ο Πίνακας Ελέγχου

Αυτό είναι το εργαλείο που συχνά τρομάζει τους αρχάριους: η μαύρη οθόνη με το λευκό κείμενο που αναβοσβήνει. Το Terminal (σε Mac/Linux) ή το Command Prompt/PowerShell (σε Windows) είναι ένας τρόπος να δίνεις εντολές απευθείας στον υπολογιστή σου, χρησιμοποιώντας κείμενο αντί για κλικ του ποντικιού.

  • Γιατί το χρειαζόμαστε; Στην αρχή, δεν θα το χρησιμοποιούμε πολύ. Αλλά είναι απολύτως απαραίτητο για το επόμενο μεγάλο κεφάλαιο: το Git. Το Git είναι ένα σύστημα που λειτουργεί μέσω εντολών στο terminal, και πολλοί σύγχρονοι αυτοματισμοί και εργαλεία του web development βασίζονται σε αυτό.

  • Οι 3-4 Εντολές που ΠΡΕΠΕΙ να ξέρεις: Δεν χρειάζεται να γίνεις ειδικός. Απλά νιώσε άνετα με τα παρακάτω:

    • ls (σε Mac/Linux) ή dir (σε Windows): Σου δείχνει τη λίστα με τα αρχεία και τους φακέλους που υπάρχουν στην τοποθεσία που βρίσκεσαι τώρα. ("List")
    • cd [όνομα φακέλου]: Σε μετακινεί μέσα στον φάκελο που του λες. ("Change Directory"). Για να πας στον προηγούμενο φάκελο, γράφεις cd ...
    • mkdir [όνομα νέου φακέλου]: Δημιουργεί έναν νέο, κενό φάκελο. ("Make Directory").

Αυτό είναι όλο! Ο στόχος δεν είναι η αποστήθιση, αλλά να μην φοβάσαι να ανοίξεις το terminal και να γράψεις μια εντολή όταν σου το ζητήσουμε. Το VS Code έχει και ένα ενσωματωμένο terminal που μπορείς να ανοίξεις (Ctrl + ` ), κάνοντας τα πράγματα ακόμα πιο εύκολα.

Συνοψίζοντας, το εργαστήρι μας είναι έτοιμο:

  1. VS Code: Το μέρος όπου γράφουμε και οργανώνουμε τον κώδικά μας.
  2. Browser DevTools: Το μέρος όπου ελέγχουμε, δοκιμάζουμε και διορθώνουμε τον κώδικά μας.
  3. Terminal: Το κέντρο ελέγχου για πιο προχωρημένες λειτουργίες, όπως το Git.