📚 Περιεχόμενα Ενότητας

3.1 Τι είναι η JavaScript;
Από Στατικό σε Διαδραστικό
3.2 Πού γράφουμε JavaScript;
3.3 Το πρώτο μου πρόγραμμα
3.4 Μεταβλητές
3.5 Τύποι Δεδομένων
3.6 Βασικές Πράξεις
3.7 Συναρτήσεις
3.8 Διάδραση με τον χρήστη

3.1 Τι είναι η JavaScript;

💡 Μια απλή εξήγηση

Η JavaScript είναι μια γλώσσα προγραμματισμού που κάνει τις ιστοσελίδες ζωντανές και διαδραστικές!

Σκέψου την ιστοσελίδα σαν ένα σπίτι:

HTML = Τα τούβλα και η δομή του σπιτιού
CSS = Η βαφή, τα έπιπλα, η διακόσμηση
JavaScript = Ο ηλεκτρισμός που ανάβει τα φώτα, ανοίγει τις πόρτες!

Τι μπορεί να κάνει η JavaScript;

                ✨ Παραδείγματα
                📱 Να εμφανίσει μηνύματα στον χρήστη
🎯 Να αντιδράσει όταν πατάμε κουμπιά
🎨 Να αλλάξει χρώματα και στυλ δυναμικά
✅ Να ελέγξει αν συμπληρώσαμε σωστά μια φόρμα
🧮 Να κάνει υπολογισμούς
🎮 Να φτιάξει παιχνίδια στον browser
📊 Να δημιουργήσει γραφήματα

            

Προοδευτική Κατανόηση: Από Στατικό σε Διαδραστικό

🎯 Τρία στάδια εξέλιξης

Πριν μάθουμε πού γράφουμε JavaScript, ας δούμε πώς μια ιστοσελίδα γίνεται από στατική σε διαδραστική!

1️⃣ Μόνο HTML (Χωρίς JavaScript)

Ένα απλό κουμπί που δεν κάνει τίποτα

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Μόνο Κουμπί</title>
</head>
<body>
    <h1>Απλό Κουμπί (Χωρίς JavaScript)</h1>

    <!-- Απλώς εμφανίζει ένα κουμπί -->
    <button>Πάτα με!</button>
</body>
</html>

🟢 Τι κάνει: Απλώς εμφανίζει ένα κουμπί, αλλά δεν συμβαίνει τίποτα όταν το πατήσεις.

2️⃣ HTML με onclick (Χωρίς JavaScript λογική)

Το attribute onclick υπάρχει, αλλά είναι άδειο

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Onclick χωρίς JavaScript</title>
</head>
<body>
    <h1>Κουμπί με onclick (Χωρίς JavaScript)</h1>

    <!-- Το onclick υπάρχει, αλλά δεν έχει καμία εντολή -->
    <button onclick="">Πάτα με!</button>
</body>
</html>

🟡 Τι κάνει: Έχει το attribute onclick, αλλά δεν τρέχει τίποτα επειδή είναι άδειο.

3️⃣ HTML με JavaScript (Ενεργή εντολή)

Τώρα το κουμπί εκτελεί πραγματικό κώδικα JavaScript!

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Κουμπί με JavaScript</title>
</head>
<body>
    <h1>Κουμπί με JavaScript</h1>

    <!-- Όταν το πατήσεις, θα εμφανίσει μήνυμα -->
    <button onclick="alert('Γεια σου!')">Πάτα με!</button>
</body>
</html>

🟣 Τι κάνει: Όταν πατήσεις το κουμπί, εκτελείται JavaScript και εμφανίζεται ένα μήνυμα (alert).

                💡 Η Διαφορά
                1️⃣ Χωρίς JavaScript: Το κουμπί είναι απλά διακοσμητικό
2️⃣ Με άδειο onclick: Υπάρχει η "θύρα" για JavaScript, αλλά δεν υπάρχει κώδικας
3️⃣ Με JavaScript: Το κουμπί γίνεται ζωντανό και διαδραστικό! ✨

            

Ποιος κάνει τι;

🔍 Ας αναλύσουμε το παράδειγμα 3️⃣

Στο παράδειγμα <button onclick="alert('Γεια σου!')">Πάτα με!</button> υπάρχουν τρία μέρη:

Κομμάτι	Γλώσσα	Τι κάνει
<button>...</button>	HTML	Δημιουργεί κουμπί
onclick="..."	HTML attribute που «μιλάει» στη JavaScript	Ορίζει τι θα γίνει όταν γίνει κλικ
alert('Γεια σου!')	JavaScript	Εκτελεί εντολή εμφάνισης μηνύματος

⚙️ Άλλες εντολές JavaScript (όπως το alert())

📚 Βασικές ενσωματωμένες εντολές

Η JavaScript έχει πολλές ενσωματωμένες εντολές (συναρτήσεις) που μπορείς να χρησιμοποιήσεις. Μερικές από τις πιο βασικές:

Εντολή	Τι κάνει
alert('Μήνυμα')	Εμφανίζει ένα μήνυμα στον χρήστη
console.log('Κάτι')	Εμφανίζει μήνυμα στην κονσόλα (χρήσιμο για προγραμματιστές)
prompt('Ερώτηση')	Ζητά από τον χρήστη να γράψει κάτι σε ένα μικρό παράθυρο
confirm('Σίγουρα;')	Εμφανίζει μήνυμα με κουμπιά OK/Cancel
document.write('Κείμενο')	Εμφανίζει κείμενο απευθείας στη σελίδα
document.getElementById('id')	Βρίσκει ένα HTML στοιχείο για να το αλλάξεις με JavaScript

🧮 Άλλες "ενέργειες" όπως το onclick

🎯 HTML Events

Εκτός από το onclick, υπάρχουν πολλά HTML events που ενεργοποιούν JavaScript κώδικα όταν κάτι συμβεί. Μερικά παραδείγματα:

Event	Πότε ενεργοποιείται
onclick	Όταν γίνει κλικ
onmouseover	Όταν ο δείκτης περάσει πάνω από το στοιχείο
onmouseout	Όταν ο δείκτης φύγει από το στοιχείο
onchange	Όταν αλλάξει η τιμή σε πεδίο φόρμας
onkeydown	Όταν πατηθεί πλήκτρο στο πληκτρολόγιο
onload	Όταν φορτώσει πλήρως η σελίδα

📘 Παράδειγμα με onmouseover

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Mouse Events</title>
</head>
<body>
    <h1>Δοκίμασε τα Mouse Events</h1>
    
    <!-- Όταν περάσεις το ποντίκι πάνω, θα εμφανιστεί μήνυμα -->
    <button onmouseover="alert('Πέρασες το ποντίκι!')">Δοκίμασε!</button>
</body>
</html>

📗 Πολλαπλά Events στο ίδιο στοιχείο

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Πολλαπλά Events</title>
</head>
<body>
    <h1>Κουμπί με πολλά events</h1>
    
    <button 
        onclick="alert('Πάτησες το κουμπί!')"
        onmouseover="console.log('Το ποντίκι είναι πάνω στο κουμπί')"
        onmouseout="console.log('Το ποντίκι έφυγε από το κουμπί')">
        Διαδραστικό Κουμπί
    </button>
</body>
</html>

3.2 Πού γράφουμε JavaScript;

Υπάρχουν 3 τρόποι να γράψουμε JavaScript, ακριβώς όπως με το CSS!

Τρόπος 1: Inline JavaScript

📘 Μέσα στα HTML elements

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Inline JavaScript</title>
</head>
<body>
    <h1>Inline JavaScript Παράδειγμα</h1>
    
    <!-- Όταν πατήσεις το κουμπί, θα εμφανιστεί μήνυμα -->
    <button onclick="alert('Γεια σου!')">Πάτα με!</button>
</body>
</html>

⚠️ Σημείωση: Όπως και με το CSS, δεν το χρησιμοποιούμε συχνά!

Τρόπος 2: Internal JavaScript

📗 Μέσα στο <script> tag

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Το πρώτο μου πρόγραμμα</title>
</head>
<body>

    <h1>Γεια σου JavaScript!</h1>

    <!-- Η JavaScript γράφεται μέσα στο script tag -->
    <script>
        // Αυτός ο κώδικας θα τρέξει όταν φορτώσει η σελίδα
        alert("Καλωσήρθες!");
    </script>

</body>
</html>

Τρόπος 3: External JavaScript (Ο καλύτερος!)

📕 Σε ξεχωριστό αρχείο .js

Αρχείο: index.html

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Εξωτερικό JavaScript</title>
</head>
<body>
    <h1>Γεια σου!</h1>

    <!-- Συνδέουμε το αρχείο JavaScript -->
    <script src="script.js"></script>
</body>
</html>

Αρχείο: script.js

// Όλος ο κώδικας JavaScript εδώ!
alert("Γεια από το script.js!");

3.3 Το πρώτο μου πρόγραμμα

🎯 Ας γράψουμε το πρώτο μας πρόγραμμα!

Κάθε προγραμματιστής ξεκινάει με το κλασικό "Hello World!"

📘 Παράδειγμα 1: Μήνυμα στην οθόνη

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
    <h1>Το πρώτο μου πρόγραμμα</h1>
    
    <script>
        // Εμφανίζει ένα μήνυμα popup
        alert("Γεια σου Κόσμε!");
    </script>
</body>
</html>

📗 Παράδειγμα 2: Μήνυμα στην κονσόλα

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Console.log Παράδειγμα</title>
</head>
<body>
    <h1>Μήνυμα στην Κονσόλα</h1>
    <p>Άνοιξε την κονσόλα (F12) για να δεις το μήνυμα!</p>
    
    <script>
        // Εμφανίζει μήνυμα στην κονσόλα του browser
        console.log("Γεια σου από την κονσόλα!");
    </script>
</body>
</html>

💡 Τι είναι η κονσόλα;

Η κονσόλα είναι ένα "κρυφό" παράθυρο στον browser όπου οι προγραμματιστές βλέπουν μηνύματα.

Πώς την ανοίγω;

Πάτα F12 ή Ctrl + Shift + I
Πήγαινε στην καρτέλα "Console"

📝 Πλήρες Παράδειγμα console.log

Δες πώς γράφουμε ολόκληρο το παράδειγμα με περισσότερες χρήσεις του console.log:

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Παράδειγμα console.log</title>
</head>
<body>
    <h1>Το πρώτο μου πρόγραμμα JavaScript</h1>
    <button onclick="console.log('Πάτησες το κουμπί!')">
        Πάτα με!
    </button>

    <script>
        // Εμφανίζει μήνυμα στην κονσόλα του browser
        console.log("Γεια σου από την κονσόλα!");
        
        // Περισσότερα παραδείγματα:
        console.log("Κείμενο");
        console.log(42);
        console.log(true);
        
        // Πολλαπλές τιμές
        console.log("Το αποτέλεσμα είναι:", 5 + 3);
        
        // Με μεταβλητές
        let name = "Μαρία";
        console.log("Γεια σου", name);
    </script>
</body>
</html>

💡 Συμβουλή: Αποθήκευσε αυτόν τον κώδικα σε ένα αρχείο .html και άνοιξέ το στον browser. Μετά πάτα F12 για να δεις τα μηνύματα στην κονσόλα!

3.4 Μεταβλητές

💡 Τι είναι οι μεταβλητές;

Οι μεταβλητές είναι σαν "κουτιά" που αποθηκεύουμε τιμές!

Φαντάσου ότι έχεις ένα κουτί με όνομα "ηλικία" και μέσα βάζεις τον αριθμό 20.

Πώς δημιουργούμε μεταβλητές

                🔑 Οι 3 τρόποι
                let → Για μεταβλητές που μπορούν να αλλάξουν (χρησιμοποιούμε αυτό!)
const → Για σταθερές (δεν μπορούν να αλλάξουν)
var → Παλιός τρόπος (δεν τον χρησιμοποιούμε πια)

            

📘 Παραδείγματα

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Μεταβλητές</title>
</head>
<body>
    <h1>Παράδειγμα Μεταβλητών</h1>
    
    <script>
        // Δημιουργούμε μεταβλητή
        let onoma = "Γιάννης";
        let ilikia = 20;

        // Εμφανίζουμε τις τιμές
        console.log(onoma);    // Γιάννης
        console.log(ilikia);   // 20

        // Αλλάζουμε τιμή
        ilikia = 21;
        console.log(ilikia);   // 21

        // Σταθερά (δεν μπορεί να αλλάξει)
        const PI = 3.14;
        console.log(PI);       // 3.14
    </script>
</body>
</html>

⚠️ Κανόνες για ονόματα μεταβλητών

✅ Μπορούν να περιέχουν γράμματα, αριθμούς, _ και $
✅ let onoma, let ilikia1, let _test
❌ ΔΕΝ μπορούν να ξεκινούν με αριθμό
❌ let 1test (ΛΑΘΟΣ!)
❌ ΔΕΝ μπορούν να έχουν κενά
❌ let my name (ΛΑΘΟΣ!)

3.5 Τύποι Δεδομένων

💡 Τι είδους τιμές μπορούμε να αποθηκεύσουμε;

Υπάρχουν διάφοροι τύποι δεδομένων στη JavaScript!

Οι βασικοί τύποι

📘 Παράδειγμα με όλους τους τύπους

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Τύποι Δεδομένων</title>
</head>
<body>
    <h1>Τύποι Δεδομένων στη JavaScript</h1>
    
    <script>
        // 1. String (Κείμενο)
        let onoma = "Μαρία";
        let poli = 'Αθήνα';
        let minima = "Γεια σου!";

        // 2. Number (Αριθμοί)
        let ilikia = 25;
        let timi = 19.99;
        let thermokrasia = -5;

        // 3. Boolean (Αληθές/Ψευδές)
        let einaiEnilikos = true;
        let exeiDiplwma = false;

        // Εμφάνιση στην κονσόλα
        console.log("String:", onoma, "τύπος:", typeof onoma);
        console.log("Number:", ilikia, "τύπος:", typeof ilikia);
        console.log("Boolean:", einaiEnilikos, "τύπος:", typeof einaiEnilikos);
    </script>
</body>
</html>

3.6 Βασικές Πράξεις

Αριθμητικές Πράξεις

📘 Μαθηματικά

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Αριθμητικές Πράξεις</title>
</head>
<body>
    <h1>Μαθηματικές Πράξεις</h1>
    
    <script>
        let a = 10;
        let b = 3;

        console.log(a + b);   // 13 (πρόσθεση)
        console.log(a - b);   // 7  (αφαίρεση)
        console.log(a * b);   // 30 (πολλαπλασιασμός)
        console.log(a / b);   // 3.333... (διαίρεση)
        console.log(a % b);   // 1  (υπόλοιπο)
    </script>
</body>
</html>

Ενώνω κείμενα (Concatenation)

📗 Συνδυασμός strings

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Ένωση Κειμένων</title>
</head>
<body>
    <h1>Συνδυασμός Strings</h1>
    
    <script>
        let onoma = "Ελένη";
        let epitheto = "Παπαδοπούλου";

        // Τρόπος 1: Με +
        let pliroNoma = onoma + " " + epitheto;
        console.log(pliroNoma);  // Ελένη Παπαδοπούλου

        // Τρόπος 2: Template literals (πιο εύκολος!)
        let minima = `Γεια σου, ${onoma}!`;
        console.log(minima);     // Γεια σου, Ελένη!
    </script>
</body>
</html>

🔹 Τρόπος 1: Με τον τελεστή `+`

📘 Concatenation με +

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Concatenation με +</title>
</head>
<body>
    <h1>Ένωση κειμένων με +</h1>
    
    <script>
        let onoma = "Ελένη";
        let epitheto = "Παπαδοπούλου";
        let pliroNoma = onoma + " " + epitheto;
        
        console.log(pliroNoma); // Ελένη Παπαδοπούλου
    </script>
</body>
</html>

                    ➤ Τι κάνει:
                    Ο τελεστής + ενώνει (concatenates) συμβολοσειρές (strings).
Ανάμεσα σε δύο strings, τα βάζει κολλητά.
Εδώ προσθέτουμε και ένα κενό " " για να μην κολλήσουν τα ονόματα.

                

➤ Σημείωση:

Αυτός ο τρόπος λειτουργεί πάντα, αλλά όταν έχεις πολλά strings ή μεταβλητές, γίνεται λίγο κουραστικός να βάζεις συνεχώς + και " ".

🔹 Τρόπος 2: Με Template Literals (νεότερος, πιο εύχρηστος)

📗 Template Literals

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Template Literals</title>
</head>
<body>
    <h1>Ένωση κειμένων με Template Literals</h1>
    
    <script>
        let onoma = "Ελένη";
        let minima = `Γεια σου, ${onoma}!`;
        
        console.log(minima); // Γεια σου, Ελένη!
    </script>
</body>
</html>

                    ➤ Τι κάνει:
                    Χρησιμοποιεί backticks (αυτά: `, όχι απλά μονά εισαγωγικά ').
Μέσα στα backticks, μπορείς να "βάλεις" μεταβλητές ή εκφράσεις μέσα σε ${ }.
Η JavaScript θα τις αντικαταστήσει αυτόματα με την τιμή τους.

                

➤ Πλεονεκτήματα:

✅ Πολύ πιο καθαρός και αναγνώσιμος κώδικας.
✅ Μπορείς να γράφεις πολλαπλές γραμμές χωρίς \n.
✅ Μπορείς να βάζεις εκφράσεις, όχι μόνο μεταβλητές:

let a = 5, b = 3;
console.log(`Το άθροισμα είναι ${a + b}`); // Το άθροισμα είναι 8

                ✨ Συνοψίζοντας:
                
                            Μέθοδος
                            Παράδειγμα
                            Πλεονεκτήματα
                        
                            + (παραδοσιακός τρόπος)
                            "Γεια " + onoma
                            Απλός, υποστηρίζεται παντού
                        
                            Template literals (${})
                            `Γεια ${onoma}`
                            Πιο καθαρός, ευέλικτος, υποστηρίζει εκφράσεις και πολλαπλές γραμμές

Μέθοδος	Παράδειγμα	Πλεονεκτήματα
+ (παραδοσιακός τρόπος)	"Γεια " + onoma	Απλός, υποστηρίζεται παντού
Template literals (${})	`Γεια ${onoma}`	Πιο καθαρός, ευέλικτος, υποστηρίζει εκφράσεις και πολλαπλές γραμμές

3.7 Συναρτήσεις

💡 Τι είναι οι συναρτήσεις;

Οι συναρτήσεις είναι "κουτιά κώδικα" που μπορούμε να χρησιμοποιήσουμε ξανά και ξανά!

Αντί να γράφουμε τον ίδιο κώδικα πολλές φορές, τον γράφουμε μία φορά σε μια συνάρτηση.

📘 Δημιουργία συνάρτησης

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Συναρτήσεις</title>
</head>
<body>
    <h1>Παράδειγμα Συνάρτησης</h1>
    
    <script>
        // Δημιουργούμε μια συνάρτηση
        function poiLeia() {
            console.log("Γεια σου!");
            console.log("Τι κάνεις;");
        }

        // Καλούμε (τρέχουμε) τη συνάρτηση
        poiLeia();  // Θα εμφανίσει τα μηνύματα
        poiLeia();  // Μπορούμε να την καλέσουμε όσες φορές θέλουμε!
    </script>
</body>
</html>

Συναρτήσεις με παραμέτρους

📗 Παράδειγμα με παραμέτρους

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Συναρτήσεις με Παραμέτρους</title>
</head>
<body>
    <h1>Συναρτήσεις με Παραμέτρους</h1>
    
    <script>
        // Συνάρτηση που δέχεται παραμέτρους
        function poiGeia(onoma) {
            console.log("Γεια σου, " + onoma + "!");
        }

        // Καλούμε με διαφορετικά ονόματα
        poiGeia("Γιώργος");  // Γεια σου, Γιώργος!
        poiGeia("Μαρία");    // Γεια σου, Μαρία!

        // Συνάρτηση με πολλές παραμέτρους
        function prosthese(a, b) {
            let apotelesma = a + b;
            console.log(a + " + " + b + " = " + apotelesma);
        }

        prosthese(5, 3);   // 5 + 3 = 8
        prosthese(10, 20); // 10 + 20 = 30
    </script>
</body>
</html>

Συναρτήσεις που επιστρέφουν τιμή

📕 Return

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Συναρτήσεις με Return</title>
</head>
<body>
    <h1>Συνάρτηση που Επιστρέφει Τιμή</h1>
    
    <script>
        // Συνάρτηση που επιστρέφει αποτέλεσμα
        function pollaplasiasmos(a, b) {
            return a * b;
        }

        let apotelesma = pollaplasiasmos(4, 5);
        console.log(apotelesma);  // 20

        // Μπορούμε να το χρησιμοποιήσουμε απευθείας
        console.log(pollaplasiasmos(3, 7));  // 21
    </script>
</body>
</html>

3.8 Διάδραση με τον χρήστη

💡 Τρόποι επικοινωνίας

Μπορούμε να "μιλήσουμε" με τον χρήστη με διάφορους τρόπους!

1. Εμφάνιση μηνύματος (alert)

📘 alert()

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Alert Παράδειγμα</title>
</head>
<body>
    <h1>Μήνυμα Alert</h1>
    
    <script>
        // Εμφανίζει popup με μήνυμα
        alert("Καλωσήρθες στην ιστοσελίδα μου!");
    </script>
</body>
</html>

2. Ρώτησε τον χρήστη (prompt)

📗 prompt()

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Prompt Παράδειγμα</title>
</head>
<body>
    <h1>Ερώτηση με Prompt</h1>
    
    <script>
        // Ρωτάει και παίρνει απάντηση
        let onoma = prompt("Πώς σε λένε;");
        alert("Γεια σου, " + onoma + "!");
    </script>
</body>
</html>

3. Ερώτηση Ναι/Όχι (confirm)

📕 confirm()

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Confirm Παράδειγμα</title>
</head>
<body>
    <h1>Ερώτηση Ναι/Όχι</h1>
    
    <script>
        // Ρωτάει και επιστρέφει true ή false
        let apantisi = confirm("Είσαι σίγουρος;");

        if (apantisi) {
            alert("Είπες ΝΑΙ!");
        } else {
            alert("Είπες ΟΧΙ!");
        }
    </script>
</body>
</html>

4. Πρακτικό Παράδειγμα

🎮 Μίνι Πρόγραμμα

<!DOCTYPE html>
<html lang="el">
<head>
    <meta charset="UTF-8">
    <title>Έλεγχος Ηλικίας</title>
</head>
<body>
    <h1>Πρόγραμμα Ελέγχου Ηλικίας</h1>
    
    <script>
        // Ρωτάμε το όνομα
        let onoma = prompt("Πώς σε λένε;");

        // Ρωτάμε την ηλικία
        let ilikia = prompt("Πόσο χρονών είσαι;");

        // Ελέγχουμε αν είναι ενήλικας
        if (ilikia >= 18) {
            alert("Γεια σου " + onoma + "! Είσαι ενήλικας.");
        } else {
            alert("Γεια σου " + onoma + "! Είσαι ανήλικος.");
        }
    </script>
</body>
</html>

🎉 Συγχαρητήρια!

Μόλις έμαθες τα βασικά της JavaScript!

Τι μπορείς να κάνεις τώρα:

✅ Να γράφεις μεταβλητές
✅ Να κάνεις πράξεις
✅ Να φτιάχνεις συναρτήσεις
✅ Να επικοινωνείς με τον χρήστη

Στην επόμενη ενότητα θα μάθουμε πιο προχωρημένα πράγματα όπως loops, arrays και DOM manipulation!