Κωδικοποιούμε αριθμομηχανή με Javascript

Zehda · Δεκ 10, 2024, 10:21

Εισαγωγή στη Javascript
Αυτή είναι η εποχή του διαδικτύου και η Javascript είναι από τις πιο δημοφιλείς γλώσσες προγραμματισμού που χρησιμοποιούνται για τη δημιουργία διαδραστικών εφαρμογών. Είτε πρόκειται για ιστότοπους, εφαρμογές κινητών ή εφαρμογές επιτραπέζιου υπολογιστή, η Javascript είναι παντού.

Τι είναι η Javascript;
Η Javascript είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται κυρίως στον τομέα της ανάπτυξης ιστοσελίδων. Είναι μια γλώσσα υψηλού επιπέδου, που σημαίνει ότι είναι πιο κοντά στη φυσική γλώσσα από ό,τι οι γλώσσες υπολογιστών χαμηλού επιπέδου. Κατά την εκτέλεση σε περιβάλλον περιήγησης, η Javascript επιτρέπει στους προγραμματιστές να δημιουργούν ζωηρές και προσαρμόσιμες ιστοσελίδες.

Ιστορία και Χρήση της Javascript
Η Javascript δημιουργήθηκε το 1995 από τον Brendan Eich στη Netscape και από τότε έχει εξελιχθεί σημαντικά. Σήμερα, δεν είναι μόνο γλώσσα που χρησιμοποιείται για scripting ιστοσελίδων. Η Javascript μπορεί να τρέξει σε διάφορες πλατφόρμες μέσω περιηγητών και υποστηρίζει πλήρως την ανάπτυξη server-side εφαρμογών με τεχνολογίες όπως Node.js.

Βασικές Έννοιες μιας Αριθμομηχανής
Για να κατανοήσουμε πώς μπορούμε να κωδικοποιήσουμε μια απλή αριθμομηχανή, χρειάζονται κάποιες βασικές έννοιες.

Λειτουργίες που υποστηρίζει η αριθμομηχανή
Μια αριθμομηχανή συχνά υποστηρίζει τέσσερις βασικές λειτουργίες: πρόσθεση, αφαίρεση, πολλαπλασιασμό και διαίρεση. Αυτές οι λειτουργίες είναι θεμελιώδεις για την εκτέλεση των περισσότερων αριθμητικών υπολογισμών.

Τα στοιχεία της διεπαφής χρήστη (UI)
Μια αριθμομηχανή απαιτεί μια απλή και φιλική προς τον χρήστη διεπαφή, που θα περιλαμβάνει κουμπιά για κάθε λειτουργία και πεδία εισόδου για τους αριθμούς που θέλουμε να υπολογίσουμε.

Ρύθμιση του Περιβάλλοντος
Πριν από την αρχή της κωδικοποίησης, χρειαζόμαστε ένα δομημένο περιβάλλον ανάπτυξης.

Εργαλεία και Πόροι για την ανάπτυξη
Αρκετά δημοφιλή εργαλεία περιλαμβάνουν το Visual Studio Code για τον κώδικα και τον Chrome για την προεπισκόπηση του έργου σας. Καλή είναι επίσης η χρήση ενός online editor εάν δεν επιθυμείτε να εγκαταστήσετε εργαλεία.

Δημιουργία ενός HTML εγγράφου
Αρχικά πρέπει να δημιουργήσουμε ένα απλό HTML έγγραφο. Μπορείτε να ανοίξετε ένα νέο αρχείο και να το αποθηκεύσετε με την κατάληξη .html.

Κώδικας [Επιογή]

1<!DOCTYPE html>
2<html lang="el">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Αριθμομηχανή</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div id="calculator">
11        <input type="text" id="display" disabled>
12        <div class="buttons">
13            <button onclick="clearDisplay()">C</button>
14            <button onclick="appendToDisplay('1')">1</button>
15            <button onclick="appendToDisplay('2')">2</button>
16            <button onclick="appendToDisplay('3')">3</button>
17            <button onclick="setOperation('+')">+</button>
18            <button onclick="appendToDisplay('4')">4</button>
19            <button onclick="appendToDisplay('5')">5</button>
20            <button onclick="appendToDisplay('6')">6</button>
21            <button onclick="setOperation('-')">-</button>
22            <button onclick="appendToDisplay('7')">7</button>
23            <button onclick="appendToDisplay('8')">8</button>
24            <button onclick="appendToDisplay('9')">9</button>
25            <button onclick="setOperation('*')">*</button>
26            <button onclick="calculate()">=</button>
27            <button onclick="appendToDisplay('0')">0</button>
28            <button onclick="setOperation('/')">/</button>
29        </div>
30    </div>
31    <script src="script.js"></script>
32</body>
33</html>
34

Σχεδίαση της Αριθμομηχανής
Με την HTML έτοιμη, τώρα ας προχωρήσουμε στη σχεδίαση.

HTML Κατασκευή
Η HTML κατασκευή περιλαμβάνει την ιεραρχία των στοιχείων που αναφέρει η ιστοσελίδα μας. Φροντίστε ο visual layout να είναι καθαρός και οργανωμένος.

Δημιουργία Κουμπιών και Πεδίων Εισόδου
Στην HTML, έχουμε ήδη δημιουργήσει κουμπιά. Φροντίστε να αντιστοιχούν άμεσα στις λειτουργίες που έχουμε προγραμματίσει.

Styling με CSS
Για να δώσουμε στυλ στην αριθμομηχανή μας, μπορούμε να δημιουργήσουμε ένα αρχείο style.css και να προσθέσουμε κώδικα CSS για να κάνουμε τη διεπαφή πιο όμορφη.

Κώδικας [Επιογή]

1body {
2    font-family: Arial, sans-serif;
3    display: flex;
4    justify-content: center;
5    padding: 50px;
6}
7
8#calculator {
9    display: inline-block;
10}
11
12#display {
13    width: 160px;
14    height: 40px;
15    font-size: 24px;
16    text-align: right;
17}
18
19.buttons {
20    display: grid;
21    grid-template-columns: repeat(4, 1fr);
22    grid-gap: 5px;
23}
24
25button {
26    font-size: 20px;
27    padding: 10px;
28}
29

Κωδικοποίηση Λειτουργιών με Javascript
Τώρα ήρθε η στιγμή να προγραμματίσουμε τις λειτουργίες της αριθμομηχανής.

Λειτουργίες πρόσθεσης, αφαίρεσης, πολλαπλασιασμού, διαίρεσης
Θα κωδικοποιήσουμε τις βασικές αριθμητικές λειτουργίες και θα τις συνδέσουμε με τα κουμπιά μας.

Δημιουργία λειτουργίας πρόσθεσης
Ας δημιουργήσουμε τις λειτουργίες που θα χρησιμοποιήσει η αριθμομηχανή:

Κώδικας [Επιογή]

1let displayValue = '';
2let firstOperand = null;
3let secondOperand = null;
4let currentOperation = null;
5
6function appendToDisplay(value) {
7    displayValue += value;
8    document.getElementById('display').value = displayValue;
9}
10
11function clearDisplay() {
12    displayValue = '';
13    firstOperand = null;
14    secondOperand = null;
15    currentOperation = null;
16    document.getElementById('display').value = '';
17}
18

Δημιουργία λειτουργίας αφαίρεσης

Κώδικας [Επιογή]

1function setOperation(operation) {
2    if (firstOperand === null) {
3        firstOperand = parseFloat(displayValue);
4        currentOperation = operation;
5        displayValue = '';
6    }
7}
8

Δημιουργία λειτουργίας πολλαπλασιασμού

Κώδικας [Επιογή]

1function multiply() {
2    if (currentOperation === '*') {
3        secondOperand = parseFloat(displayValue);
4        displayValue = (firstOperand * secondOperand).toString();
5        document.getElementById('display').value = displayValue;
6        firstOperand = null; // Reset for next calculation
7        currentOperation = null;
8    }
9}
10

Δημιουργία λειτουργίας διαίρεσης

Κώδικας [Επιογή]

1function divide() {
2    if (currentOperation === '/') {
3        secondOperand = parseFloat(displayValue);
4        if (secondOperand !== 0) {
5            displayValue = (firstOperand / secondOperand).toString();
6            document.getElementById('display').value = displayValue;
7        } else {
8            alert("Διαίρεση με το μηδέν δεν επιτρέπεται!");
9        }
10        firstOperand = null; // Reset for next calculation
11        currentOperation = null;
12    }
13}
14

Σύνδεση του Javascript με HTML
Ήρθε η ώρα να κάνουμε σύνδεση του κώδικα Javascript με την HTML.

Εκδηλώσεις και Χειριστές
Στη Javascript, προσθέτουμε τις λειτουργίες στο HTML μέσω των εκδηλώσεων που έχουμε ορίσει για κάθε κουμπί.

Δοκιμές και Αποσφαλμάτωση
Δοκιμάστε την αριθμομηχανή σας και βεβαιωθείτε ότι οι λειτουργίες δουλεύουν σωστά. Οποιεσδήποτε σφάλματα να τα εντοπίσετε και να τα διορθώσετε.

Συμπέρασμα
Η ανάπτυξη μιας απλής αριθμομηχανής με Javascript είναι ένα εξαιρετικό project για να κατανοήσετε τα θεμέλια του προγραμματισμού και της ανάπτυξης ιστοσελίδων. Είτε είστε αρχάριος είτε έμπειρος προγραμματιστής, η Javascript προσφέρει τις δυνατότητες για να αναπτύξετε πολύπλοκες εφαρμογές με μεγάλη ευκολία.

Συχνές Ερωτήσεις
1. Τι είναι η Javascript;
Η Javascript είναι μια γλώσσα προγραμματισμού που χρησιμοποιείται για τη δημιουργία διαδραστικών και δυναμικών ιστοσελίδων.

2. Ποιες λειτουργίες περιλαμβάνει μια απλή αριθμομηχανή;
Περιλαμβάνει πρόσθεση, αφαίρεση, πολλαπλασιασμό και διαίρεση.

3. Πώς μπορώ να δώσω στυλ στην αριθμομηχανή μου;
Μπορείτε να χρησιμοποιήσετε το CSS για να προσθέσετε στυλ στην αριθμομηχανή σας και να κάνετε τη διεπαφή πιο φιλική προς τον χρήστη.

4. Πού μπορώ να εκτελέσω τον κώδικα Javascript;
Μπορείτε να εκτελέσετε τον κώδικα Javascript απευθείας σε οποιονδήποτε σύγχρονο περιηγητή ανοιχτού κώδικα και να τον δοκιμάσετε.

5. Τι εργαλεία χρειάζομαι για την ανάπτυξή μου;
Για την ανάπτυξη μπορείτε να χρησιμοποιήσετε εργαλεία όπως το Visual Studio Code και τον περιηγητή Chrome για τη δοκιμή και την αποσφαλμάτωση.

Κωδικοποιούμε αριθμομηχανή με Javascript

Zehda