|
|
|
@ -0,0 +1,192 @@
|
|
|
|
|
# Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία του Εμπορίου
|
|
|
|
|
|
|
|
|
|
Αυτό το μάθημα καλύπτει τα βασικά των γλωσσών προγραμματισμού. Τα θέματα που καλύπτονται εδώ ισχύουν για τις περισσότερες σύγχρονες γλώσσες προγραμματισμού σήμερα. Στην ενότητα 'Εργαλεία του Εμπορίου', θα μάθετε για χρήσιμο λογισμικό που σας βοηθά ως προγραμματιστές.
|
|
|
|
|
|
|
|
|
|
![Intro Programming](webdev101-programming.png)
|
|
|
|
|
> Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac)
|
|
|
|
|
|
|
|
|
|
## Pre-Lecture Quiz
|
|
|
|
|
[Pre-Lecture Quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1)
|
|
|
|
|
|
|
|
|
|
## Εισαγωγή
|
|
|
|
|
|
|
|
|
|
Σε αυτό το μάθημα, θα καλύψουμε:
|
|
|
|
|
|
|
|
|
|
- Τι είναι ο προγραμματισμός;
|
|
|
|
|
- Τύποι γλωσσών προγραμματισμού
|
|
|
|
|
- Βασικά στοιχεία ενός προγράμματος
|
|
|
|
|
- Χρήσιμο λογισμικό και εργαλεία για τους επαγγελματίες προγραμματιστές
|
|
|
|
|
|
|
|
|
|
## Τι είναι ο προγραμματισμός;
|
|
|
|
|
|
|
|
|
|
Προγραμματισμός(επίσης γνωστό ως κώδικας) είναι η διαδικασία συγγραφής οδηγιών σε μία συσκευή, όπως ένας υπολογιστής ή μία φορητή συσκευή. Γράφουμε αυτές τις οδηγίες με μία γλώσσα προγραμματισμού, η οποία ερμηνεύεται από τη συσκευή. Αυτά τα σύνολα οδηγιών μπορούν να αναφέρονται με διάφορα ονόματα, *πρόγραμμα*, *πρόγραμμα υπολογιστή*, *εφαρμογή* και *εκτελέσιμο* είναι μερικά δημοφιλή ονόματα.
|
|
|
|
|
|
|
|
|
|
Ένα *πρόγραμμα* μπορεί να είναι οτιδήποτε γράφεται με κώδικα, ιστοσελίδες, παιχνίδια και εφαρμογές τηλεφώνου είναι προγράμματα. Ενώ είναι δυνατό να δημιουργηθεί ένα πρόγραμμα χωρίς να γραφτεί κώδικας, η υποκείμενη λογική θα βρίσκεται στη συσκευή και η λογική αυτή πιθανότατα γράφτηκε με κώδικα. Ένα πρόγραμμα που *τρέχει* ή *εκτελεί κώδικα* εκτελεί οδηγίες. Η συσκευή με την οποία διαβάζετε αυτό το μάθημα εκτελεί ένα πρόγραμμα για να το εκτυπώσει στην οθόνη σας.
|
|
|
|
|
|
|
|
|
|
✅ Κάντε λίγη έρευνα: ποιος θεωρείται πως ήταν ο πρώτος προγραμματιστής στον κόσμο;
|
|
|
|
|
|
|
|
|
|
## Γλώσσες Προγραμματισμού
|
|
|
|
|
|
|
|
|
|
Οι γλώσσες προγραμματισμού εξυπηρετούν έναν κύριο σκοπό: για τους προγραμματιστές να δημιουργήσουν οδηγίες για αποστολή σε μια συσκευή. Οι συσκευές μπορούν να καταλάβουν μόνο δυαδικά (0 και 1) και για τους *περισσότερους* προγραμματιστές αυτός δεν είναι πολύ αποτελεσματικός τρόπος επικοινωνίας. Οι γλώσσες προγραμματισμού είναι ένα μέσο επικοινωνίας μεταξύ ανθρώπων και υπολογιστών.
|
|
|
|
|
|
|
|
|
|
Οι γλώσσες προγραμματισμού διατίθενται σε διαφορετικές μορφές και ενδέχεται να εξυπηρετούν διαφορετικούς σκοπούς. Για παράδειγμα, η JavaScript χρησιμοποιείται κυρίως για εφαρμογές ιστού, ενώ το Bash χρησιμοποιείται κυρίως για λειτουργικά συστήματα.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Οι *γλώσσες χαμηλού επιπέδου* συνήθως απαιτούν λιγότερα βήματα από *γλώσσες υψηλού επιπέδου* για να ερμηνευτούν από μία συσκευή. Ωστόσο, αυτό που κάνει τις γλώσσες υψηλού επιπέδου δημοφιλείς είναι η ευκολία στην ανάγνωση και η υποστήριξή τους. Η JavaScript θεωρείται γλώσσα υψηλού επιπέδου.
|
|
|
|
|
|
|
|
|
|
Ο παρακάτω κώδικας δείχνει τη διαφορά μεταξύ γλώσσας υψηλού επιπέδου σε JavaScript και γλώσσας χαμηλού επιπέδου σε κώδικα ARM assembly.
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
let number = 10
|
|
|
|
|
let n1 = 0, n2 = 1, nextTerm;
|
|
|
|
|
|
|
|
|
|
for (let i = 1; i <= number; i++) {
|
|
|
|
|
console.log(n1);
|
|
|
|
|
nextTerm = n1 + n2;
|
|
|
|
|
n1 = n2;
|
|
|
|
|
n2 = nextTerm;
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```c
|
|
|
|
|
area ascen,code,readonly
|
|
|
|
|
entry
|
|
|
|
|
code32
|
|
|
|
|
adr r0,thumb+1
|
|
|
|
|
bx r0
|
|
|
|
|
code16
|
|
|
|
|
thumb
|
|
|
|
|
mov r0,#00
|
|
|
|
|
sub r0,r0,#01
|
|
|
|
|
mov r1,#01
|
|
|
|
|
mov r4,#10
|
|
|
|
|
ldr r2,=0x40000000
|
|
|
|
|
back add r0,r1
|
|
|
|
|
str r0,[r2]
|
|
|
|
|
add r2,#04
|
|
|
|
|
mov r3,r0
|
|
|
|
|
mov r0,r1
|
|
|
|
|
mov r1,r3
|
|
|
|
|
sub r4,#01
|
|
|
|
|
cmp r4,#00
|
|
|
|
|
bne back
|
|
|
|
|
end
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
Είτε το πιστεύετε είτε όχι, *και οι δύο κάνουν το ίδιο πράγμα*: τυπώνουν μία ακολουθία Fibonacci μέχρι το 10.
|
|
|
|
|
|
|
|
|
|
✅ Μια ακολουθία Fibonacci [ορίζεται] (https://en.wikipedia.org/wiki/Fibonacci_number) ως ένα σύνολο αριθμών έτσι ώστε κάθε αριθμός να είναι το άθροισμα των δύο προηγούμενων, ξεκινώντας από το 0 και το 1.
|
|
|
|
|
|
|
|
|
|
## Στοιχεία ενός προγράμματος
|
|
|
|
|
|
|
|
|
|
Μια εντολή σε ένα πρόγραμμα ονομάζεται *δήλωση* και συνήθως έχει ένα χαρακτήρα ή διάστιχο που δείχνει που τελείωνει η εντολή αυτή ή όπως αλλίως λέμε που *τερματίζει* η εντολή. Ο τρόπος που τερματίζει ένα πρόγραμμα διαφέρει ανάλογα με τη γλώσσα.
|
|
|
|
|
|
|
|
|
|
Τα περισσότερα προγράμματα βασίζονται στη χρήση δεδομένων είτε από έναν χρήστη είτε από κάπου αλλού, όπου οι δηλώσεις μπορεί να βασίζονται σε δεδομένα για την εκτέλεση οδηγιών. Τα δεδομένα μπορούν να αλλάξουν τον τρόπο συμπεριφοράς ενός προγράμματος, οπότε οι γλώσσες προγραμματισμού μπορούν να αποθηκεύουν προσωρινά τα δεδομένα και να τα χρησιμοποιούν αργότερα. Αυτά τα δεδομένα ονομάζονται *μεταβλητές*. Οι μεταβλητές είναι δηλώσεις που δίνουν εντολή σε μια συσκευή να αποθηκεύει δεδομένα στη μνήμη της. Οι μεταβλητές στα προγράμματα είναι παρόμοιες με αυτές στην άλγεβρα, όπου έχουν ένα μοναδικό όνομα και η τιμή τους μπορεί να αλλάξει με την πάροδο του χρόνου.
|
|
|
|
|
|
|
|
|
|
Υπάρχει πιθανότητα ορισμένες δηλώσεις να μην εκτελεστούν από μια συσκευή. Αυτό συμβαίνει συνήθως είτε λόγω του σχεδιασμού που έχει κάνει ο προγραμματιστής είτε κατά λάθος όταν συμβαίνει ένα απροσδόκητο σφάλμα. Αυτός ο τύπος ελέγχου μιας εφαρμογής το καθιστά πιο στιβαρό και διατηρήσιμο. Συνήθως αυτές οι αλλαγές στον έλεγχο συμβαίνουν όταν πρέπει να ληφθούν κάποιες αποφάσεις. Μια κοινή δήλωση στις σύγχρονες γλώσσες προγραμματισμού για τον έλεγχο του τρόπου εκτέλεσης ενός προγράμματος είναι η δήλωση «if..else».
|
|
|
|
|
|
|
|
|
|
✅ Θα μάθετε περισσότερα για αυτού του είδους τις δηλώσεις σε επόμενα μαθήματα.
|
|
|
|
|
|
|
|
|
|
## Εργαλεία του Εμπορίου
|
|
|
|
|
|
|
|
|
|
[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
|
|
|
|
|
|
|
|
|
|
Σε αυτήν την ενότητα, θα μάθετε για λογισμικό που μπορεί να σας φανεί πολύ χρήσιμο καθώς ξεκινάτε το επαγγελματικό σας ταξίδι.
|
|
|
|
|
|
|
|
|
|
Ένα **περιβάλλον ανάπτυξης** είναι ένα μοναδικό σύνολο εργαλείων και λειτουργιών που ένας προγραμματιστής θα χρησιμοποιεί συχνά όταν φτιάχνει λογισμικό. Ορισμένα από αυτά τα εργαλεία έχουν προσαρμοστεί για συγκεκριμένες ανάγκες του προγραμματιστή και ενδέχεται να αλλάξουν με την πάροδο του χρόνου, εάν ένας προγραμματιστής αλλάξει προτεραιότητες στη δουλειά του ή στα προσωπικά του project ή όταν χρησιμοποιήσει διαφορετική γλώσσα προγραμματισμού. Τα περιβάλλοντα ανάπτυξης είναι τόσο μοναδικά όσο οι προγραμματιστές που τα χρησιμοποιούν.
|
|
|
|
|
|
|
|
|
|
### Editors(Συντάκτες)
|
|
|
|
|
|
|
|
|
|
Ένα από τα πιο κρίσιμα εργαλεία για την ανάπτυξη λογισμικού είναι ο συντάκτης. Οι συντάκτες είναι εκεί όπου γράφετε τον κωδικό σας και μερικές φορές εκεί όπου θα εκτελέσετε τον κωδικό σας.
|
|
|
|
|
|
|
|
|
|
Οι προγραμματιστές χρησιμοποιούν τους συντάκτες για μερικούς επιπλέον λόγους:
|
|
|
|
|
|
|
|
|
|
- *Εντοπισμός σφαλμάτων* Ανακάλυψη σφαλμάτων διαβάζοντας τον κώδικα, γραμμή προς γραμμή. Ορισμένοι συντάκτες έχουν δυνατότητες εντοπισμού σφαλμάτων ή μπορούν να προσαρμοστούν και να προστεθούν για συγκεκριμένες γλώσσες προγραμματισμού.
|
|
|
|
|
- *Επισήμανση σύνταξης* Προσθέτει χρώματα και μορφοποιεί το κείμενο του κώδικα, διευκολύνει την ανάγνωση. Οι περισσότεροι συντάκτες επιτρέπουν προσαρμοσμένη επισήμανση σύνταξης.
|
|
|
|
|
- *Επεκτάσεις και ενσωματώσεις* Προσθήκες που είναι εξειδικευμένες για προγραμματιστές, από προγραμματιστές, για πρόσβαση σε πρόσθετα εργαλεία που δεν είναι ενσωματωμένα στον βασικό συντάκτη. Για παράδειγμα, πολλοί προγραμματιστές χρειάζονται επίσης έναν τρόπο να τεκμηριώσουν τον κώδικά τους και να εξηγήσουν πώς λειτουργεί και θα εγκαταστήσουν μια επέκταση ορθογραφικού ελέγχου για να ελέγξουν για τυπογραφικά λάθη. Οι περισσότερες από αυτές τις προσθήκες προορίζονται για χρήση σε ένα συγκεκριμένο συντάκτη και οι περισσότεροι συντάκτες έρχονται με έναν τρόπο αναζήτησης για διαθέσιμες επεκτάσεις.
|
|
|
|
|
|
|
|
|
|
#### Δημοφιλείς Editors και Web Development Extensions(Επεκτάσεις Ανάπτυξης Ιστού)
|
|
|
|
|
|
|
|
|
|
- [Visual Studio Code](https://code.visualstudio.com/)
|
|
|
|
|
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
|
|
|
|
|
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
|
|
|
|
|
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
|
|
|
|
|
- [Atom](https://atom.io/)
|
|
|
|
|
- [spell-check](https://atom.io/packages/spell-check)
|
|
|
|
|
- [teletype](https://atom.io/packages/teletype)
|
|
|
|
|
- [atom-beautify](https://atom.io/packages/atom-beautify)
|
|
|
|
|
|
|
|
|
|
### Browsers(Πρoγράμματα Περιήγησης)
|
|
|
|
|
|
|
|
|
|
Ένα άλλο σημαντικό εργαλείο είναι το πρόγραμμα περιήγησης. Οι προγραμματιστές ιστού βασίζονται στο πρόγραμμα περιήγησης για να παρατηρήσουν πώς λειτουργεί ο κώδικάς τους στον ιστό, χρησιμοποιείται επίσης για την προβολή οπτικών στοιχείων μιας ιστοσελίδας που είναι γραμμένα στον συντάκτη, όπως HTML.
|
|
|
|
|
|
|
|
|
|
Πολλά προγράμματα περιήγησης διαθέτουν *εργαλεία προγραμματιστών* (DevTools) που περιέχουν ένα σύνολο χρήσιμων λειτουργιών και πληροφοριών που βοηθούν τους προγραμματιστές να συλλέγουν και να συλλαμβάνουν σημαντικές πληροφορίες σχετικά με την εφαρμογή τους. Για παράδειγμα: Εάν μια ιστοσελίδα έχει σφάλματα, μερικές φορές είναι χρήσιμο να γνωρίζετε πότε συνέβησαν. Τα DevTools σε ένα πρόγραμμα περιήγησης μπορούν να ρυθμιστούν έτσι ώστε να συλλαμβάνουν αυτές τις πληροφορίες.
|
|
|
|
|
|
|
|
|
|
#### Δημοφιλείς Browsers και DevTools
|
|
|
|
|
|
|
|
|
|
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
|
|
|
|
|
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
|
|
|
|
|
- [Firefox](https://developer.mozilla.org/docs/Tools)
|
|
|
|
|
|
|
|
|
|
### Command Line Tools(Εργαλεία Γραμμής Εντολών)
|
|
|
|
|
|
|
|
|
|
Ορισμένοι προγραμματιστές προτιμούν μια λιγότερο γραφική προβολή για τις καθημερινές τους εργασίες και βασίζονται στη γραμμή εντολών για να το επιτύχουν. Η ανάπτυξη κώδικα απαιτεί σημαντικό αριθμό δακτυλογράφησης και ορισμένοι προγραμματιστές προτιμούν να μην διακόπτουν τη ροή τους στο πληκτρολόγιο και γι'αυτό χρησιμοποιούν συντομεύσεις πληκτρολογίου για εναλλαγή μεταξύ παραθύρων επιφάνειας εργασίας, εργασία σε διαφορετικά αρχεία και χρήση εργαλείων. Οι περισσότερες εργασίες μπορούν να γίνουν με το ποντίκι, αλλά ένα πλεονέκτημα της χρήσης της γραμμής εντολών είναι ότι πολλά μπορούν να γίνουν με εργαλεία γραμμής εντολών χωρίς την ανάγκη εναλλαγής μεταξύ του ποντικιού και του πληκτρολογίου. Ένα άλλο πλεονέκτημα της γραμμής εντολών είναι ότι είναι διαμορφώσιμη και μπορείτε να αποθηκεύσετε την προσαρμοσμένη διαμόρφωση, να την αλλάξετε αργότερα και επίσης να την εισαγάγετε σε νέα μηχανήματα ανάπτυξης. Επειδή τα περιβάλλοντα ανάπτυξης είναι τόσο μοναδικά για κάθε προγραμματιστή, κάποιοι θα αποφύγουν τη χρήση της γραμμής εντολών, κάποιοι θα βασιστούν εξ ολοκλήρου σε αυτή και κάποιοι προτιμούν έναν συνδυασμό των δύο.
|
|
|
|
|
|
|
|
|
|
### Δημοφιλείς επιλογές γραμμής εντολών
|
|
|
|
|
|
|
|
|
|
Οι επιλογές για τη γραμμή εντολών θα διαφέρουν ανάλογα με το λειτουργικό σύστημα που χρησιμοποιείτε.
|
|
|
|
|
|
|
|
|
|
*💻 = έρχεται προεγκατεστημένο στο λειτουργικό σύστημα*.
|
|
|
|
|
|
|
|
|
|
#### Windows
|
|
|
|
|
|
|
|
|
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
|
|
|
|
|
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (επίσης γνωστό ως CMD) 💻
|
|
|
|
|
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
|
|
|
|
|
- [mintty](https://mintty.github.io/)
|
|
|
|
|
|
|
|
|
|
#### MacOS
|
|
|
|
|
|
|
|
|
|
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
|
|
|
|
|
- [iTerm](https://iterm2.com/)
|
|
|
|
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7)
|
|
|
|
|
|
|
|
|
|
#### Linux
|
|
|
|
|
|
|
|
|
|
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
|
|
|
|
|
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
|
|
|
|
|
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7)
|
|
|
|
|
|
|
|
|
|
#### Δημοφιλή εργαλεία γραμμής εντολών
|
|
|
|
|
|
|
|
|
|
- [Git](https://git-scm.com/) (💻 στα περισσότερα λειτουργικά συστήματα)
|
|
|
|
|
- [NPM](https://www.npmjs.com/)
|
|
|
|
|
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
|
|
|
|
|
|
|
|
|
|
### Documentation(Τεκμηρίωση)
|
|
|
|
|
|
|
|
|
|
Όταν ένας προγραμματιστής θέλει να μάθει κάτι καινούργιο, πιθανότατα θα στραφεί στο documentation(τεκμηρίωση) για να μάθει πώς να το χρησιμοποιεί. Οι προγραμματιστές βασίζονται συχνά στo documentation για να μάθουν πώς να χρησιμοποιούν σωστά τα εργαλεία και τις γλώσσες, καθώς και για να αποκτήσουν βαθύτερη γνώση του πώς λειτουργεί.
|
|
|
|
|
|
|
|
|
|
#### Δημοφιλή documentation για την ανάπτυξη Ιστού(Web Development)
|
|
|
|
|
|
|
|
|
|
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
|
|
|
|
|
- [Frontend Masters](https://frontendmasters.com/learn/)
|
|
|
|
|
|
|
|
|
|
✅ Κάντε λίγη έρευνα: Τώρα που γνωρίζετε τα βασικά για το περιβάλλον ενός προγραμματιστή ιστού(Web Developer), συγκρίνετέ το και βρείτε τις διαφορές με το περιβάλλον ενός σχεδιαστή ιστού(Web Designer).
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
## 🚀 Challenge
|
|
|
|
|
|
|
|
|
|
Συγκρίνετε μερικές γλώσσες προγραμματισμού. Ποια είναι τα μοναδικά χαρακτηριστικά που έχει η JavaScript και δεν έχει η Java και το αντίστροφο; Τι γίνεται με τη COBOL εναντίον της Go;
|
|
|
|
|
|
|
|
|
|
## Post-Lecture Quiz
|
|
|
|
|
[Post-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2)
|
|
|
|
|
|
|
|
|
|
## Review & Self Study
|
|
|
|
|
|
|
|
|
|
Μελετήστε λίγο τις διαφορετικές γλώσσες που είναι διαθέσιμες στον προγραμματιστή. Προσπαθήστε να γράψετε μια γραμμή σε μία γλώσσα και μετά να την ξεναγράψετε σε άλλες δύο. Τι μάθατε?
|
|
|
|
|
|
|
|
|
|
## Άσκηση
|
|
|
|
|
|
|
|
|
|
[Βλέπε έγγραφο](assignment.gr.md)
|