Εισαγωγή στη 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 για τη δοκιμή και την αποσφαλμάτωση.