Skip to content

Commit 0fd4e9d

Browse files
authored
Merge pull request #37 from ipapoutsidis/master
Need merge for devtools
2 parents 5cdc613 + ac57d1b commit 0fd4e9d

File tree

7 files changed

+85
-79
lines changed

7 files changed

+85
-79
lines changed

1-js/01-getting-started/2-manuals-specifications/article.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -5,23 +5,23 @@
55

66
## Προδιαγραφή
77

8-
[Tο ECMA-262 προδιαγραφή](https://www.ecma-international.org/publications/standards/Ecma-262.htm) περιέχει τo πιο αναλύτικο, λεπτομερή και τυποποιημένη πληροφορία σχετικά με την JavaScript. Ορίζει την ιδια τη γλώσσα.
8+
[Tο ECMA-262 προδιαγραφή](https://www.ecma-international.org/publications/standards/Ecma-262.htm) περιέχει την πιο αναλυτική, λεπτομερή και τυποποιημένη πληροφορία σχετικά με την JavaScript. Ορίζει την ίδια τη γλώσσα.
99

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

12-
Μια νέα έκδοση προδιαγραφών κυκλοφορεί κάθε χρόνο. Μεταξύ αυτών των εκδόσεων, η τελευταία έκδοση υπάρχει στο <https://tc39.es/ecma262/>.
12+
Μια νέα έκδοση προδιαγραφών κυκλοφορεί κάθε χρόνο. Μεταξύ αυτών των εκδόσεων, η τελευταία έκδοση υπάρχει και στο <https://tc39.es/ecma262/>.
1313

14-
Για να διαβάσετε για τα πιο πρόσφατα νέα σχετικά για τα χαρακτηριστικά, συμπεριλαμβανομένων εκείνων που είναι "almost standard" (το λεγόμενο "stage 3") , βλ. <https://github.com/tc39/proposals>.
14+
Για να διαβάσετε για τα πιο πρόσφατα νέα σχετικά για τα χαρακτηριστικά, συμπεριλαμβανομένων εκείνων που είναι "almost standard" (το λεγόμενο "stage 3") , βλέπε στο <https://github.com/tc39/proposals>.
1515

16-
Επίσης, εαν αναπτύσσεται για το πρόγραμμα περιήγησης, τότε υπάρχουν και άλλες προδιαγραφές που καλύπτονται στο [δεύτερο μέρος](info:browser-environment) του εκπαιδευτικού υλικού.
16+
Επίσης, εάν αναπτύσσεται για το πρόγραμμα περιήγησης, τότε υπάρχουν και άλλες προδιαγραφές που καλύπτονται στο [δεύτερο μέρος](info:browser-environment) του εκπαιδευτικού υλικού.
1717

1818
## Εγχειρίδια
1919

20-
- **MDN (Mozilla) JavaScript Reference** είναι ένα εγχειρίδιο με παραδείγματα και άλλες πληροφορίες. Είναι καλό να λάβετε σε βάθος πληροφορίες σχετικά με μεμονωμένες λειτουργίες γλώσσας, μεθόδους κ.λπ.
20+
- **MDN (Mozilla) JavaScript Reference** είναι ένα εγχειρίδιο με παραδείγματα και άλλες πληροφορίες. Είναι καλό να λάβετε σε βάθος πληροφορίες σχετικά με μεμονωμένες λειτουργίες γλώσσας, μεθόδους κλπ.
2121

2222
Μπορεί κανείς να το βρει στο <https://developer.mozilla.org/en-US/ docs/Web/JavaScript/Reference>.
2323

24-
Αν και είναι καλύτερα να χρησιμοποιήσετε μια αναζήτηση στο Διαδίκτυο. Απλά χρησιμοποιήστε "MDN [όρος]" σαν ερώτημα, π.χ. <https://google.com/search?q=MDN+parseInt> αναζητήση σχετικά για το `parseInt` function.
24+
Αν και είναι καλύτερα να χρησιμοποιήσετε μια αναζήτηση στο Διαδίκτυο. Απλά χρησιμοποιήστε "MDN [όρος]" σαν ερώτημα, πχ. <https://google.com/search?q=MDN+parseInt> αναζήτηση σχετικά για το `parseInt` function.
2525

2626

2727
- **MSDN** – Microsoft εγχειρίδιο με πολλές πληροφορίες, όπως JavaScript (συχνά αναφέρεται ως JScript). Εάν κάποιος χρειάζεται κάτι συγκεκριμένο για τον Internet Explorer, καλύτερα να πάτε στο: <http://msdn.microsoft.com/>.
@@ -34,8 +34,8 @@ JavaScript είναι μια αναπτυσσόμενη γλώσσα, νέα χ
3434

3535
Για να δείτε την υποστήριξή τους μεταξύ των μηχανών περιήγησης και άλλων προγραμμάτων περιήγησης, δείτε:
3636

37-
- <http://caniuse.com> - ανά χαρακτηριστικό πίνακες υποστήριξης, π. χ. για να δείτε ποιες μηχανές υποστηρίζουν τη σύγχρονη λειτουργία κρυπτογράφη: <http://caniuse.com/#feat=cryptography>.
38-
- <https://kangax.github.io/compat-table> - ένας πίνακας με χαρακτηριστικά γλώσσας και μηχανές που υποστηρίζουν ή δεν υποστηρίζουν.
37+
- <http://caniuse.com> - ανά χαρακτηριστικό πίνακες υποστήριξης, π. χ. για να δείτε ποιες μηχανές υποστηρίζουν τη σύγχρονη λειτουργία για cryptography: <http://caniuse.com/#feat=cryptography>.
38+
- <https://kangax.github.io/compat-table> - ένας πίνακας με χαρακτηριστικά γλώσσας και μηχανές που υποστηρίζουν ή που δεν υποστηρίζουν.
3939

4040
Όλοι αυτές οι πήγες είναι χρήσιμοι στο real-life development, καθώς περιέχουν πολύτιμες πληροφορίες σχετικά με τις γλωσσικές λεπτομέρειες, την υποστήριξή τους κλπ.
4141

+31-25
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,69 @@
11
# Developer console
22

3-
Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
3+
Ο κώδικας είναι επιρρεπής σε σφάλματα. Πολύ πιθανόν θα κάνετε σφάλματα ... Ω, μα τι λέω; Θα κάνετε οπωσδήποτε λάθη, τουλάχιστον αν είστε άνθρωπος, όχι [ρομπότ](https://en.wikipedia.org/wiki/Bender_(Futurama)).
44

5-
But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
5+
Αλλά στο πρόγραμμα περιήγησης, οι χρήστες δεν βλέπουν τα λάθη από προεπιλογή. Έτσι, αν κάτι πάει στραβά στο script, δεν θα δούμε τι είναι σπασμένο και δεν μπορούμε να το διορθώσουμε.
66

7-
To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
7+
Για να δούμε τα σφάλματα και να λάβουμε πολλές άλλες χρήσιμες πληροφορίες σχετικά με τα script, τα "developer tools" έχουν ενσωματωθεί στα προγράμματα περιήγησης.
88

9-
Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific.
9+
Οι περισσότεροι προγραμματιστές κλίνουν προς το Chrome ή τον Firefox για ανάπτυξη, επειδή αυτά τα προγράμματα περιήγησης έχουν τα καλύτερα developer tools. Άλλα προγράμματα περιήγησης παρέχουν επίσης developer tools, μερικές φορές με ειδικές λειτουργίες, αλλά συνήθως προσπαθούν να "προφτάσουν" στο Chrome ή τον Firefox. Έτσι, οι περισσότεροι προγραμματιστές έχουν ένα "αγαπημένο" πρόγραμμα περιήγησης και μεταβαίνουν σε άλλους, εάν ένα πρόβλημα είναι συγκεκριμένο για τον browser.
1010

11-
Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
11+
Τα developer tools είναι ισχυρά, έχουν πολλά χαρακτηριστικά. Για να ξεκινήσετε, θα μάθουμε πώς να τα ανοίγουμε, να εξετάζουμε τα σφάλματα και να εκτελούμε τις εντολές της JavaScript.
1212

1313
## Google Chrome
1414

15-
Open the page [bug.html](bug.html).
15+
Ανοίξτε τη σελίδα [bug.html](bug.html).
1616

17-
There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
17+
Υπάρχει ένα σφάλμα μέσα στον κώδικα της JavaScript. Είναι κρυμμένο από τα μάτια ενός τακτικού επισκέπτη, οπότε ας ανοίξουμε developer tools για να το δούμε.
1818

19-
Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
19+
Πάτησε `key:F12` ή, εάν είσαι στο Mac, τότε `key:Cmd+Opt+J`.
2020

21-
The developer tools will open on the Console tab by default.
21+
Τα developer tools θα ανοίξουν στην καρτέλα Console από προεπιλογή.
2222

23-
It looks somewhat like this:
23+
Φαίνεται κάπως έτσι:
2424

2525
![chrome](chrome.png)
2626

27-
The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar.
27+
Η ακριβής εμφάνιση των develοper tools εξαρτάται από την έκδοση του Chrome. Αλλάζει από καιρό σε καιρό, αλλά πρέπει να είναι παρόμοια.
2828

29-
- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
30-
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.
29+
- Εδώ μπορούμε να δούμε το κόκκινο μήνυμα σφάλματος. Σε αυτήν την περίπτωση, στο script περιέχει μια άγνωστη εντολή "lalala".
30+
- Στα δεξιά, υπάρχει ένας σύνδεσμος με δυνατότητα κλικ στην πηγή `bug.html: 12` με τον αριθμό γραμμής όπου παρουσιάστηκε το σφάλμα.
3131

32-
Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.
32+
Κάτω από το μήνυμα σφάλματος υπάρχει ένα μπλε σύμβολο `>`. Σηματοδοτεί μια "γραμμή εντολών" όπου μπορούμε να πληκτρολογήσουμε εντολές JavaScript. Πατήστε το πλήκτρο `Enter` για να τα εκτελέσετε (`πλήκτρο: Shift + Enter` για εισαγωγή εντολών πολλαπλών γραμμών).
3333

34-
Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
34+
Τώρα μπορούμε να δούμε λάθη, και αυτό είναι αρκετό για μια αρχή. Θα επιστρέψουμε αργότερα στα developer tools και θα καλύψουμε λεπτομερέστερα το σφάλμα στο κεφάλαιο <info:debugging-chrome>.
3535

3636
```smart header="Multi-line input"
3737
Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
3838
3939
To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
4040
```
4141

42-
## Firefox, Edge, and others
42+
## Firefox, Edge, και άλλο
4343

44-
Most other browsers use `key:F12` to open developer tools.
44+
Τα περισσότερα προγράμματα περιήγησης χρησιμοποιούν το `key:F12` για να ανοίξουν τα developer tools.
4545

46-
The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another.
46+
Η εμφάνιση και η αίσθηση είναι αρκετά όμοια. Μόλις μάθετε πώς να χρησιμοποιήσετε ένα από αυτά τα εργαλεία (μπορείτε να ξεκινήσετε με το Chrome), μπορείτε εύκολα να μεταβείτε σε άλλο.
4747

4848
## Safari
4949

50-
Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
50+
Το Safari (πρόγραμμα περιήγησης του Mac, που δεν υποστηρίζεται από τα Windows / Linux) είναι λίγο ιδιαίτερο εδώ. Πρέπει πρώτα να ενεργοποιήσουμε το μενού "Develop menu".
5151

52-
Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom:
52+
Ανοίξτε τις Προτιμήσεις και μεταβείτε στο παράθυρο "Για προχωρημένους". Υπάρχει ένα πλαίσιο ελέγχου στο κάτω μέρος:
5353

5454
![safari](safari.png)
5555

56-
Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options.
56+
Τώρα, το πλήκτρο: `Cmd + Opt + C` μπορεί να αλλάξει την κονσόλα. Επίσης, σημειώστε ότι εμφανίστηκε το νέο στοιχείο μενού με τίτλο "Develop". Έχει πολλές εντολές και επιλογές.
5757

58-
## Summary
58+
```smart header="Multi-line input"
59+
Συνήθως, όταν βάζουμε μια γραμμή κώδικα στην κονσόλα, και στη συνέχεια πατάμε το πλήκτρο 'Enter', εκτελείται.
60+
61+
Για να εισαγάγετε πολλές γραμμές, πατήστε το πλήκτρο 'Shift + Enter'. Με αυτό τον τρόπο μπορείτε να εισάγετε μεγάλα κομμάτια κώδικα JavaScript.
62+
```
63+
64+
## Περίληψη
5965

60-
- Developer tools allow us to see errors, run commands, examine variables, and much more.
61-
- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
66+
- Τα Developer tools μας επιτρέπουν να βλέπουμε σφάλματα, να τρέχουμε εντολές, να εξετάζουμε μεταβλητές και πολλά άλλα.
67+
- Μπορούν να ανοίξουν με `key: F12` για τα περισσότερα προγράμματα περιήγησης στα Windows. Το Chrome για Mac χρειάζεται `key:Cmd + Opt + J`, Safari:` key: Cmd + Opt + C` (πρέπει πρώτα να ενεργοποιηθεί).
6268

63-
Now we have the environment ready. In the next section, we'll get down to JavaScript.
69+
Τώρα έχουμε έτοιμο το περιβάλλον. Στην επόμενη ενότητα, θα διεισδύσουμε στην JavaScript.

1-js/02-first-steps/01-hello-world/1-hello-alert/task.md

+4-5
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ importance: 5
22

33
---
44

5-
# Show an alert
5+
# Δείξε το alert
66

7-
Create a page that shows a message "I'm JavaScript!".
7+
Δημιουργήστε μια σελίδα που να εμφανίζει το μήνυμα "I'm JavaScript!".
88

9-
Do it in a sandbox, or on your hard drive, doesn't matter, just ensure that it works.
10-
11-
[demo src="solution"]
9+
Φτιάξτε το σε ένα sandbox, ή στο σκληρό σας δίσκο, δεν έχει σημασία, απλά βεβαιωθείτε ότι λειτουργεί.
1210

11+
[demo src="solution"]

1-js/02-first-steps/01-hello-world/2-hello-alert-ext/solution.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ The HTML code:
22

33
[html src="index.html"]
44

5-
For the file `alert.js` in the same folder:
5+
Για το αρχείο `alert.js` να βρίσκεται στο ίδιο φάκελο:
66

77
[js src="alert.js"]
88

1-js/02-first-steps/01-hello-world/2-hello-alert-ext/task.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ importance: 5
22

33
---
44

5-
# Show an alert with an external script
5+
# Δείξε το alert από το εξωτερικό αρχείο
66

7-
Take the solution of the previous task <info:task/hello-alert>. Modify it by extracting the script content into an external file `alert.js`, residing in the same folder.
7+
Πάρτε τη λύση της προηγούμενης εργασίας από τo <info:task/hello-alert>. Τροποποιήστε και εξάγετε το περιεχόμενο του script σε ένα εξωτερικό αρχείο `alert.js`, που βρίσκεται στον ίδιο φάκελο.
88

9-
Open the page, ensure that the alert works.
9+
Ανοίξτε τη σελίδα, βεβαιωθείτε ότι η ειδοποίηση λειτουργεί.

0 commit comments

Comments
 (0)