From 5bb764e58e26e31488bb173b93b6f4d0ff916bf7 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:47 +0100 Subject: unslug el: move --- files/el/glossary/accessibility/index.html | 32 + files/el/glossary/index/index.html | 11 + .../index.html" | 11 - .../index.html" | 32 - .../how_does_the_internet_work/index.html | 97 +++ .../index.html | 127 +++ .../what_are_hyperlinks/index.html | 91 +++ .../index.html" | 97 --- .../index.html" | 127 --- .../index.html" | 91 --- files/el/learn/forms/form_validation/index.html | 869 +++++++++++++++++++++ files/el/learn/forms/index.html | 83 ++ files/el/learn/html/forms/index.html | 83 -- .../index.html" | 869 --------------------- files/el/learn/javascript/first_steps/index.html | 66 ++ .../index.html" | 66 -- files/el/mdn/at_ten/index.html | 37 + .../howto/dhmiourgia_logariasmou_mdn/index.html | 42 - files/el/mdn_at_ten/index.html | 37 - files/el/mozilla/add-ons/index.html | 112 +++ .../index.html" | 112 --- .../howto/create_an_mdn_account/index.html | 42 + files/el/tools/about_colon_debugging/index.html | 227 ++++++ files/el/tools/index.html | 230 ++++++ .../functions/default_parameters/index.html | 221 ++++++ .../index.html" | 221 ------ .../about_colon_debugging/index.html" | 227 ------ .../index.html" | 230 ------ 28 files changed, 2245 insertions(+), 2245 deletions(-) create mode 100644 files/el/glossary/accessibility/index.html create mode 100644 files/el/glossary/index/index.html delete mode 100644 "files/el/glossary/\316\264\316\265\316\257\316\272\317\204\316\267\317\202/index.html" delete mode 100644 "files/el/glossary/\317\200\317\201\316\277\317\203\316\262\316\261\317\203\316\271\316\274\317\214\317\204\316\267\317\204\316\261/index.html" create mode 100644 files/el/learn/common_questions/how_does_the_internet_work/index.html create mode 100644 files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html create mode 100644 files/el/learn/common_questions/what_are_hyperlinks/index.html delete mode 100644 "files/el/learn/common_questions/\317\200\317\216\317\202_\316\264\316\277\317\205\316\273\316\265\317\215\316\265\316\271_\317\204\316\277_\316\264\316\271\316\261\316\264\316\257\316\272\317\204\317\205\316\277/index.html" delete mode 100644 "files/el/learn/common_questions/\317\203\316\265\316\273\316\257\316\264\316\265\317\202_\317\204\317\214\317\200\316\277\316\271_\316\264\316\271\316\261\316\272\316\277\316\274\316\271\317\203\317\204\316\255\317\202_\316\272\316\261\316\271_\316\274\316\267\317\207\316\261\316\275\316\255\317\202_\316\261\316\275\316\261\316\266\316\256\317\204\316\267\317\203\316\267\317\202/index.html" delete mode 100644 "files/el/learn/common_questions/\317\204\316\271_\316\265\316\257\316\275\316\261\316\271_\316\277\316\271_\317\205\317\200\316\265\317\201\317\203\317\215\316\275\316\264\316\265\317\203\316\274\316\277\316\271/index.html" create mode 100644 files/el/learn/forms/form_validation/index.html create mode 100644 files/el/learn/forms/index.html delete mode 100644 files/el/learn/html/forms/index.html delete mode 100644 "files/el/learn/html/forms/\316\265\317\200\316\271\316\272\317\215\317\201\317\211\317\203\316\267_\316\264\316\265\316\264\316\277\316\274\316\255\316\275\317\211\316\275_\317\206\317\214\317\201\316\274\316\261\317\202/index.html" create mode 100644 files/el/learn/javascript/first_steps/index.html delete mode 100644 "files/el/learn/javascript/\317\200\317\201\317\216\317\204\316\261_\316\262\316\256\316\274\316\261\317\204\316\261/index.html" create mode 100644 files/el/mdn/at_ten/index.html delete mode 100644 files/el/mdn/contribute/howto/dhmiourgia_logariasmou_mdn/index.html delete mode 100644 files/el/mdn_at_ten/index.html create mode 100644 files/el/mozilla/add-ons/index.html delete mode 100644 "files/el/mozilla/\317\200\317\201\317\214\317\203\316\270\316\265\317\204\316\261/index.html" create mode 100644 files/el/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/el/tools/about_colon_debugging/index.html create mode 100644 files/el/tools/index.html create mode 100644 files/el/web/javascript/reference/functions/default_parameters/index.html delete mode 100644 "files/el/web/javascript/reference/functions/\317\200\317\201\316\277\316\265\317\200\316\271\316\273\316\265\316\263\316\274\316\255\316\275\316\265\317\202_\317\200\316\261\317\201\316\254\316\274\316\265\317\204\317\201\316\277\316\271/index.html" delete mode 100644 "files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/about_colon_debugging/index.html" delete mode 100644 "files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/index.html" (limited to 'files/el') diff --git a/files/el/glossary/accessibility/index.html b/files/el/glossary/accessibility/index.html new file mode 100644 index 0000000000..3f083f6e91 --- /dev/null +++ b/files/el/glossary/accessibility/index.html @@ -0,0 +1,32 @@ +--- +title: Προσβασιμότητα +slug: Glossary/Προσβασιμότητα +tags: + - Γλωσσάριο + - Προσβασιμότητα +translation_of: Glossary/Accessibility +--- +

Η Προσβασιμότητα Ιστού (A11Y) αναφέρεται στις καλύτερες τεχνικές διατήρησης της λειτουργικότητας μιας ιστοσελίδας παρά τους φυσικούς και τεχνικούς περιορισμούς. Η Προσβασιμότητα Ιστού ορίζεται τυπικά και συζητείται στο {{Glossary("W3C")}} διά μέσου της {{Glossary("WAI","Πρωτοβουλίας Προσβασιμότητας Διαδικτύου")}} (ΠΠΔ).

+ +

Learn more

+ +

General knowledge

+ + + +

Learn web accessibility

+ + + +

Technical reference

+ + diff --git a/files/el/glossary/index/index.html b/files/el/glossary/index/index.html new file mode 100644 index 0000000000..018de44537 --- /dev/null +++ b/files/el/glossary/index/index.html @@ -0,0 +1,11 @@ +--- +title: Δείκτης +slug: Glossary/Δείκτης +tags: + - MDN Meta + - Γλωσσάριο + - Δείκτης + - Προσανατολισμός +translation_of: Glossary/Index +--- +

{{Index("/en-US/docs/Glossary")}}

diff --git "a/files/el/glossary/\316\264\316\265\316\257\316\272\317\204\316\267\317\202/index.html" "b/files/el/glossary/\316\264\316\265\316\257\316\272\317\204\316\267\317\202/index.html" deleted file mode 100644 index 018de44537..0000000000 --- "a/files/el/glossary/\316\264\316\265\316\257\316\272\317\204\316\267\317\202/index.html" +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Δείκτης -slug: Glossary/Δείκτης -tags: - - MDN Meta - - Γλωσσάριο - - Δείκτης - - Προσανατολισμός -translation_of: Glossary/Index ---- -

{{Index("/en-US/docs/Glossary")}}

diff --git "a/files/el/glossary/\317\200\317\201\316\277\317\203\316\262\316\261\317\203\316\271\316\274\317\214\317\204\316\267\317\204\316\261/index.html" "b/files/el/glossary/\317\200\317\201\316\277\317\203\316\262\316\261\317\203\316\271\316\274\317\214\317\204\316\267\317\204\316\261/index.html" deleted file mode 100644 index 3f083f6e91..0000000000 --- "a/files/el/glossary/\317\200\317\201\316\277\317\203\316\262\316\261\317\203\316\271\316\274\317\214\317\204\316\267\317\204\316\261/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Προσβασιμότητα -slug: Glossary/Προσβασιμότητα -tags: - - Γλωσσάριο - - Προσβασιμότητα -translation_of: Glossary/Accessibility ---- -

Η Προσβασιμότητα Ιστού (A11Y) αναφέρεται στις καλύτερες τεχνικές διατήρησης της λειτουργικότητας μιας ιστοσελίδας παρά τους φυσικούς και τεχνικούς περιορισμούς. Η Προσβασιμότητα Ιστού ορίζεται τυπικά και συζητείται στο {{Glossary("W3C")}} διά μέσου της {{Glossary("WAI","Πρωτοβουλίας Προσβασιμότητας Διαδικτύου")}} (ΠΠΔ).

- -

Learn more

- -

General knowledge

- - - -

Learn web accessibility

- - - -

Technical reference

- - diff --git a/files/el/learn/common_questions/how_does_the_internet_work/index.html b/files/el/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..ecbf0f41eb --- /dev/null +++ b/files/el/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,97 @@ +--- +title: Πώς δουλεύει το Διαδίκτυο; +slug: Learn/Common_questions/Πώς_δουλεύει_το_Διαδίκτυο +tags: + - Αρχάριος + - Εκμάθηση + - Μηχανισμοί Ιστού +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
+

Αυτό το άρθρο συζητά τι είναι το Διαδίκτυο και πώς δουλεύει.

+
+ + + + + + + + + + + + +
Προαπαιτούμενα:Κανένα, αλλά σας παροτρύνουμε να διαβάσετε το Άρθρο στη θέσπιση στόχων πρώτα.
Ζητούμενο:Θα μάθετε τα βασικά για την τεχνική υποδομή του Ιστού και τη διαφορά μεταξύ Διαδικτύου και Ιστού.
+ +

Περίληψη

+ +

Το Διαδίκτυο είναι η ραχοκοκαλιά του Ιστού, η τεχνική υποδομή που καθιστά τον Ιστό δυνατό. Στη βάση του, το Διαδίκτυο είναι ένα μεγάλο δίκτυο από υπολογιστές που επικοινωνούν όλοι μεταξύ τους.

+ +

Η ιστορία του Διαδικτύου είναι κάπως ασαφής. Ξεκίνησε στα 1960 ως ένα ερευνητικό έργο χρηματοδοτούμενο απ' τον στρατό των ΗΠΑ, μετά εξελίχθηκε σε μια δημόσια υποδομή στα 1980 με την υποστήριξη πολλών δημοσίων πανεπιστημίων και ιδιωτικών εταιριών. Οι διάφορες τεχνολογίες που υποστηρίζουν το Διαδίκτυο έχουν εξελιχθεί με το χρόνο, αλλά ο τρόπος που δουλεύει δεν έχει αλλάξει και πολύ: Διαδίκτυο είναι ένας τρόπος να συνδέεις υπολογιστές όλους μεταξύ τους, και να εξασφαλίζεις ότι, ό,τι κι αν συμβεί, βρίσκουν ένα τρόπο να παραμένουν συνδεδεμένοι.

+ +

Διαδραστική Μαθηση

+ + + +

Βαθύτερη κατάδυση

+ +

Ένα απλό δίκτυο

+ +

Όταν δύο υπολογιστές χρειάζεται να επικοινωνήσουν, πρέπει να τους ενώσεις, είτε φυσικά (συνήθως με ένα καλώδιο Ethernet) είτε ασύρματα (για παράδειγμα με WiFi ή Bluetooth συστήματα). Όλοι οι σύγχρονοι υπολογιστές μπορούν να υποστηρίξουν οποιεσδήποτε από αυτές τις συνδέσεις.

+ +
+

Σημείωση: Για το υπόλοιπο αυτού του άρθρου, θα μιλήσουμε μόνο για φυσικά καλώδια, αλλά τα ασύρματα δίκτυα δουλεύουν παρόμοια.

+
+ +

Two computers linked together

+ +

Ένα τέτοιο δίκτυο δεν είναι περιορισμένο σε δύο υπολογιστές. Μπορείτε να συνδέσετε όσους υπολογιστές επιθυμείτε. Αλλά γίνεται πολύπλοκο γρήγορα. Εάν προσπαθείτε να συνδέσετε, πείτε, δέκα υπολογιστές, χρειάζετε 45 καλώδια, με εννέα πρίζες σε κάθε υπολογιστή!

+ +

Ten computers all together

+ +

Για να λυθεί αυτό το πρόγραμμα, κάθε υπολογστής σε ένα δίκτυο είναι συνδεδεμένος σε ένα ειδικό μικρό υπολογιστή που ονομάζεται δρομολογητής (router). Αυτός ο δρομολογητής έχει μόνο μια δουλειά: σαν ένα σηματοδότη σε σιδηροδρομικό σταθμό, εξασφαλίζει ότι ένα μήνυμα σταλμένο από έναν υπολογιστή φθάνει στο σωστό υπολογιστή προορισμού. Για να στείλει ένα μήνυμα στον υπολογιστή Β, ο υπολογιστής Α πρέπει να στείλει το μήνυμα στο δρομολογητή, ο οποίος με τη σειρά του προωθεί το μήνυμα στον υπολογιστή Β και σιγουρεύεται ότι το μήνυμα δεν παραδώθηκε στον υπολογιστή C.

+ +

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

+ +

Ten computers with a router

+ +

Ένα δίκτυο δικτύων

+ +

Μέχρι εδώ καλά. Αλλά τι γίνεται με εκατοντάδες, χιλιάδες, εκατομμύριους υπολογιστές; Φυσικά ένας μόνος δρομολογητής δεν κλιμακώνεται τόσο πολύ, αλλά, αν διαβάσετε προσεκτικά, είπαμε ότι ένας δρομολογητής είναι ένας υπολογιστής όπως όλοι οι άλλοι, οπότε τι μας αποτρέπει απ' την ένωση δύο δρομολογητών μαζί; Τίποτα, οπότε ας το κάνουμε.

+ +

Two routers linked together

+ +

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

+ +

Routers linked to routers

+ +

Ένα τέτοιο δίκτυο έρχεται πολύ κοντά σε αυτό που ονομάζουμε το Διαδίκτυο, αλλά μας λείπει κάτι. Φτιάξαμε ένα δίκτυο για τους δικούς μας σκοπούς. Υπάρχουν και άλλα δικτύα εκεί έξω: οι φίλοι σας, οι γείτονές σας, όλοι μπορούν να έχουν το δικό τους δίκτυο από υπολογιστές. Αλλά δεν είναι πραγματικά εφικτό να εγκαταστήσετε καλώδια μεταξύ του σπιτιού σας και του υπόλοιπου κόσμου, όποτε πώς το διαχειρίζεστε; Λοιπόν, υπάρχουν ήδη καλώδια συνδεδεμένα με το σπίτι σας, για παράδειγμα, ηλεκτρικής ενέργειας και τηλεφώνου. Η τηλεφωνική υποδομή ήδη συνδέει το σπίτι σας με οποιονδήποτε στον κόσμο οπότε είναι το τέλειο καλώδιο που χρειαζόμαστε. Για να συνδέσουμε το δίκτυό μας στην τηλεφωνική υποδομή, χρειαζόμαστε ένα ειδικό κομμάτι εξοπλισμού που λέγεται μόντεμ. Αυτό το μόντεμ μετατρέπει την πληροφορία από το δίκτυό μας σε πληροφορία διαχειρίσιμη απ' την τηλεφωνική υποδομή και τούμπαλιν.

+ +

A router linked to a modem

+ +

Οπότε είμαστε συνδεδεμένοι στην τηλεφωνική υποδομή. Το επόμενο βήμα είναι να στείλουμε μηνύματα από το δίκτυό μας στο δίκτυο που θέλουμε να συνδεθούμε. Για να το κάνουμε αυτό, θα συνδέσουμε το δίκτυό μας σε έναν Πάροχο Διαδικτυακών Υπηρεσιών (Internet Service Provider). Ένας Πάροχος Διαδικτυακών Υπηρεσιών (ISP) είναι μια εταιρία που διαχειρίζεται μερικούς ειδικούς δρομολογητές που συνδέονται όλοι μεταξύ τους και μπορούν επίσης να προσπελάσουν τους δρομολογητές άλλων Παρόχων. Οπότε το μήνυμα απ' το δίκτυό μας μεταφέρεται μέσω του δικτύου των δικτύων των Παρόχων στο δίκτυο προορισμού. Το Διαδίκτυο αποτελείται από όλη αυτήν την υποδομή των δικτύων.

+ +

Full Internet stack

+ +

Εύρεση υπολογιστών

+ +

Εάν θέλετε να στείλετε ένα μήνυμα σε έναν υπολογιστή, πρέπει να διευκρινίσετε σε ποιον. Επομένως οποιoσδήποτε υπολογιστής συνδεδεμένος σε ένα δίκτυο έχει μια μοναδική διεύθυνση για την αναγνώρισή του, που λέγεται «διεύθυνση IP» (όπου το IP σημαίνει Πρωτόκολλο Διαδικτύου - Internet Protocol). Είναι μια διεύθυνση αποτελούμενη από μια σειρά τεσσάρων αριθμών χωριζόμενων από τελείες, για παράδειγμα: 192.168.2.10.

+ +

Αυτό είναι απολύτως φυσιολογικό για υπολογιστές, αλλά εμείς τα ανθρώπινα όντα δυσκολευόμαστε στη θύμηση τέτοιων διευθύνσεων. Για να γίνουν τα πράγματα ευκολότερα, μπορούμε να δώσουμε ψευδώνυμο σε μια διεύθυνση IP με ένα ανθρωπίνως αναγνώσιμο όνομα που λέγεται όνομα τομέα (domain name). Για παράδειγμα, google.com είναι το όνομα τομέα που χρησιμοποιείται έναντι της IP διεύθυνσης 173.194.121.32. Οπότε χρησιμοποιώντας το όνομα τομέα είναι ο ευκολότερος τρόπος για εμάς να συνδεόμαστε με έναν υπολογιστή μέσω του Διαδικτύου.

+ +

Show how a domain name can alias an IP address

+ +

Διαδίκτυο και ο Ιστός

+ +

Όπως μπορείτε να παρατηρήσετε, όταν περιηγούμαστε στον Ιστό με έναν Περιηγητή Ιστού (Web browser), συνήθως χρησιμοποιούμε το όνομα τομέα για να συνδεθούμε σε έναν ιστότοπο. Αυτό σημαίνει ότι το Διαδίκτυο και ο Ιστός είναι το ίδιο πράγμα; Δεν είναι τόσο απλό. Όπως είδαμε, το Διαδίκτυο είναι η τεχνική υποδομή που επιτρέπει εκατομμύριους υπολογιστές να είναι συνδεδεμένοι όλοι μεταξύ τους. Μεταξύ αυτών των υπολογιστών, μερικοί υπολογιστές (ονομαζόμενοι (Διακομιστές Ιστού - Web Servers) μπορούν να στείλουν μηνύματα κατανοητά μόνο σε περιηγητές ιστού. Το Διαδίκτυο είναι μια υποδομή, ενώ ο Ιστός είναι μια υπηρεσία δημιουργημένη πάνω στην υποδομή.  Αξίζει να σημειωθεί ότι υπάρχουν αρκετές άλλες υπηρεσίες δημιουργημένες μέσα στο Διαδίκτυο, όπως το η-ταχυδρομείο (email) και το  {{Glossary("IRC")}}.

+ +

Επόμενα βήματα

+ + diff --git a/files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html new file mode 100644 index 0000000000..ac2d66edfe --- /dev/null +++ b/files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html @@ -0,0 +1,127 @@ +--- +title: >- + Ποια είναι η διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και + μηχανής αναζήτησης; +slug: Learn/Common_questions/Σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης +tags: + - Αρχάριος + - Μηχανισμοί Ιστού + - Χρειάζεται Διαδραστικό Μάθημα +translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines +--- +
+

Σε αυτό το άρθρο περιγράφουμε διάφορες έννοιες σχετικά με τον ιστό: ιστότοποι, ιστοσελίδες, διακομιστές ιστού, και μηχανές αναζήτησης. Αυτοί οι όροι συχνά μπερδεύονται απ' τους νεοφερμένους στον ιστό, ή χρησιμοποιούνται λανθασμένα. Ας μάθουμε τι σημαίνει ο κάθε ένας.

+
+ + + + + + + + + + + + +
Προαπαιτούμενα:Θα πρέπει να γνωρίζεις πώς δουλεύει το Διαδίκτυο.
Ζητούμενο:Ικανοί να περιγράψετε τις διαφορές μεταξύ μιας ιστοσελίδας, ενός ιστότοπου, ενός διακομιστή ιστού, και μιας μηχανής αναζήτησης.
+ +

Περίληψη

+ +

Όπως με κάθε πεδίο γνώσης, ο ιστός έρχεται με πολλές ασυναρτησίες. Μην ανησυχείτε, δε θα σας κατακλύσουμε με όλες αυτές (έχουμε ένα γλωσσάρι αν είστε περίεργοι). Ωστόσο, υπάρχουν μερικοί βασικοί όροι που πρέπει να καταλάβετε στο ξεκίνημα, αφού θα ακούσετε αυτές τις εκφράσεις συνεχώς καθώς συνεχίζετε να διαβάζετε. Είναι εύκολο να μπερδέψετε αυτούς τους όρους μερικές φορές, αφού αναφέρονται σε σχετικές μα διαφορετικές λειτουργικότητες. Στην πραγματικότητα, θα δείτε μερικές φορές αυτούς τους όρους να καταχρώνται σε δελτία ειδήσεων και αλλού, οπότε το να τους μπερδέψετε είναι κατανοητό.

+ +

Θα καλύψουμε αυτούς τους όρους και τεχνολογίες με περισσότερη λεπτομέρεια καθώς προχωρούμε κι άλλο, αλλά αυτοί οι γρήγοροι ορισμοί θα είναι μια σπουδαία αρχή για σας:

+ +
+
ιστοσελίδα
+
Ένα έγγραφο που μπορεί να απεικονιστεί σε ένα πρόγραμμα περιήγησης όπως το Firefox, το Google Chrome, το Opera, το Microsoft Internet Explorer ή Edge, ή το Safari της Apple. Αυτές επίσης συνηθίζεται να λέγονται απλά «σελίδες».
+
ιστότοπος
+
Μια συλλογή ιστοσελίδων που είναι ομαδοποιημένες και συνήθως συνδεδεμένες με διάφορους τρόπους. Συνήθως λέγεται ένας «ιστότοπος» ή απλά ένας «τόπος».
+
διακομιστής ιστού
+
Ένας υπολογιστής που φιλοξενεί έναν ιστότοπο στο Διαδίκτυο.
+
μηχανή αναζήτησης
+
Ένας ιστότοπος που σας βοηθάει να βρείτε άλλες ιστοσελίδες, όπως η Google, η Bing, η Yahoo.
+
+ +

Ας δούμε μια απλή αναλογία — μια δημόσια βιβλιοθήκη. Αυτά είναι που κάνετε γενικά όταν επισκέπτεστε μια βιβλιοθήκη:

+ +
    +
  1. Βρίσκετε ένα ευρετήριο αναζήτησης και ψάχνετε τον τίτλο του βιβλίου που θέλετε.
    2. +
  2. Σημειώνετε τον αριθμό καταλόγου του βιβλίου.
    3. +
  3. Πηγαίνετε στο συγκεκριμένο τμήμα που περιέχει το βιβλίο, βρίσκετε το σωστό αριθμό καταλόγου, και παίρνετε το βιβλίο.
    4. +
+ +

Ας συγκρίνουμε τη βιβλιοθήκη με ένα διακομιστή ιστού:

+ + + +
+
 
+
+ +

Διαδραστική μάθηση

+ +

Δεν υπάρχει διαδραστική μάθηση ακόμα. Παρακαλούμε, σκεφτείτε να συνεισφέρετε.

+ +

Βαθύτερη κατάδυση

+ +

Λοιπόν, ας σκάψουμε βαθύτερα στο πώς αυτοί οι τέσσερις όροι σχετίζονται και γιατί συγχέονται μερικές φορές μεταξύ τους.

+ +

ιστοσελίδα

+ +

Μια ιστοσελίδα είναι απλά ένα έγγραφο απεικονιζόμενο από έναν {{Glossary("φυλλομετρητή")}}. Τέτοια έγγραφα είναι γραμμένα σε {{Glossary("HTML")}} γλώσσα (την οποία θα εξετάσουμε περαιτέρω με περισσότερη λεπτομέρεια σε άλλα άρθρα). Μια ιστοσελίδα μπορεί να ενσωματώσει μια ποικιλία από διαφορετικούς τύπους πόρων όπως:

+ + + +
+

Σημείωση: Οι φυλλομετρητές μπορούν ακόμη να εμφανίσουν άλλα έγγραφα όπως {{Glossary("PDF")}} αρχεία ή εικόνες, αλλά ο όρος ιστοσελίδα αναφέρεται συγκεκριμένα σε HTML έγγραφα. Αλλιώς, χρησιμοποιούμε μόνο τον όρο έγγραφο.

+
+ +

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

+ +

Example of a web page address in the browser address bar

+ +

Ένας ιστότοπος είναι μια συλλογή συνδεδεμένων ιστοσελίδων (μαζί με τους σχετικούς της πόρους) που μοιράζονται ένα μοναδικό όνομα τομέα. Κάθε ιστοσελίδα δοθείσης του ιστότοπου παρέχει ρητούς συνδέσμους—τις περισσότερες φορές στη μορφή κομματιών κειμένου που είναι δυνατό να γίνει κλικ—που επιτρέπουν το χρήστη να μετακινηθεί από μία σελίδα του ιστότοπου σε μία άλλη.

+ +

Για να προσπελάσετε έναν ιστότοπο, πληκτρολογήστε το όνομα τομέα του στη γραμμή διεύθυνσης του φυλλομετρητή σας, και το πρόγραμμα περιήγησης θα εμφανίσει την κύρια ιστοσελίδα του ιστότοπου, ή  αρχική σελίδα - homepage (ανεπίσημα αναφέρεται ως «η αρχική - the home»):

+ +

Example of a web site domain name in the browser address bar

+ +

Οι έννοιες της ιστοσελίδας και του ιστότοπου είναι ιδιαίτερα εύκολο να μπερδευτούν σε έναν ιστότοπο που περιέχει μόνο μια ιστοσελίδα. Ένας τέτοιος ιστότοπος μερικές φορές καλείται μονοσέλιδος ιστότοπος ή single-page website.

+ +

Διακομιστής ιστού

+ +

Ένας διακομιστής ιστού είναι ένας υπολογιστής που φιλοξενεί έναν ή περισσότερους ιστότοπους. «Φιλοξενώ» σημαίνει ότι όλες οι ιστοσελίδες και τα υποστηριζόμενα αρχεία τους είναι διαθέσιμα σε αυτόν τον υπολογιστή. Ο διακομιστής ιστού θα στείλει οποιαδήποτε ιστοσελίδα από τον ιστότοπο που φιλοξενεί σε οποιοδήποτε πρόγραμμα περιήγησης του χρήστη, ανά αίτηση του χρήστη.

+ +

Μην μπερδεύετε τους ιστότοπους και τους διακομιστές ιστού. Για παράδειγμα, αν ακούσετε κάποιον να λέει, «Ο ιστότοπός μου δεν ανταποκρίνεται», στην πραγματικότητα σημαίνει ότι ο διακομιστής ιστού δεν ανταποκρίνεται και επομένως ο ιστότοπος δεν είναι διαθέσιμος. Πιο σημαντικά, αφού ένας διακομιστής ιστού μπορεί να φιλοξενήσει πολλαπλούς ιστότοπους, ο όρος διακομιστής ιστού δε χρησιμοποιείται ποτέ για να καθορίσει έναν ιστότοπο, μιας και θα προκαλούσε μεγάλη σύγχυση. Στο προηγούμενο μας παράδειγμα, αν λέγαμε, «Ο διακομιστής ιστού μου δεν ανταποκρίνεται», σημαίνει ότι δεν υπάρχει κανένας διαθέσιμος ιστότοπος σε αυτόν τον διακομιστή ιστού.

+ +

Μηχανή αναζήτησης

+ +

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

+ +

Υπάρχουν πολλές εκεί έξω: Google, Bing, Yandex, DuckDuckGo, και πολλές ακόμα. Μερικές είναι γενικού σκοπού, άλλες είναι εξειδικευμένες για συγκεκριμένα θέματα. Χρησιμοποιείστε οποιαδήποτε προτιμάτε.

+ +

Πολλοί αρχάριοι του ιστού μπερδεύουν τις μηχανές αναζήτησης με τα προγράμματα περιήγησης. Ας το ξεκαθαρίσουμε: Ένα πρόγραμμα περιήγησης είναι ένα κομμάτι λογισμικού που ανακτά και εμφανίζει ιστοσελίδες· μια μηχανή αναζήτησης είναι ένας ιστότοπος που βοηθά τους ανθρώπους να βρουν ιστοσελίδες από άλλους ιστότοπους. Η σύγχυση προκύπτει επειδή, τη πρώτη φορά που κάποιος ανοίγει ένα πρόγραμμα περιήγησης, ο φυλλομετρητής δείχνει την αρχική σελίδα μιας μηχανής αναζήτησης. Αυτό βγάζει νόημα, γιατί, προφανώς, το πρώτο πράγμα που θέλετε να κάνετε με ένα πρόγραμμα περιήγησης είναι να βρείτε μια ιστοσελίδα για να δείτε. Μην συγχέετε την υποδομή (π.χ., το πρόγραμμα περιήγησης) με την υπηρεσία (π.χ., τη μηχανή αναζήτησης). Η διάκριση θα σας βοηθήσει αρκετά, αλλά ακόμα και μερικοί επαγγελματίες μιλάνε αόριστα, οπότε μη νιώθετε ανήσυχα γι' αυτό.

+ +

Εδώ βλέπετε ένα στιγμιότυπο του Firefox που δείχνει την περιοχή αναζήτησης της Google ως την προκαθορισμένη σελίδα έναρξης:

+ +

Example of Firefox nightly displaying a custom Google page as default

+ +

Επόμενα βήματα

+ + + +

 

diff --git a/files/el/learn/common_questions/what_are_hyperlinks/index.html b/files/el/learn/common_questions/what_are_hyperlinks/index.html new file mode 100644 index 0000000000..b63ba8a117 --- /dev/null +++ b/files/el/learn/common_questions/what_are_hyperlinks/index.html @@ -0,0 +1,91 @@ +--- +title: Τι είναι οι υπερσύνδεμοι; +slug: Learn/Common_questions/Τι_είναι_οι_υπερσύνδεσμοι +translation_of: Learn/Common_questions/What_are_hyperlinks +--- +
+

Σ' αυτό το άρθρο, θα εξετάσουμε τι είναι οι υπερσύνδεσμοι και γιατί έχουν σημασία.

+
+ + + + + + + + + + + + +
Προαπαιτούμενα:Θα πρέπει να ξέρετε πώς δουλεύει το Διαδίκτυο και να είστε οικίοι με τη διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και μηχανής αναζήτησης.
Ζητούμενο:Μάθετε για τους συνδέσμους στον ιστό και γιατί έχουν σημασία.
+ +

Περίληψη

+ +

Οι Υπερσύνδεσμοι, συνήθως λέγονται σύνδεσμοι, είναι μια θεμελιώδης έννοια πίσω απ' τον Ιστό. Για να εξηγήσουμε τι είναι οι σύνδεσμοι, πρέπει να κάνουμε ένα βήμα πίσω στα πολύ βασικά της αρχιτεκτονικής του Ιστού.

+ +

Πίσω στο 1989, ο Τιμ Μπέρνερς-Λι, ο εφευρέτης του Ιστού, μίλησε για τους τρεις πυλώνες που στέκεται ο Ιστός:

+ +
    +
  1. {{Glossary("URL")}}, ένα σύστημα διευθύνσεων που καταγράφει τα έγγραφα Ιστού
    2. +
  2. {{Glossary("HTTP")}}, ένα πρωτόκολλο επικοινωνίας για να βρίσκει έγγραφα όταν δίνονται με το URL τους.
    3. +
  3. {{Glossary("HTML")}}, μια μορφή εγγράφου που επιτρέπει τους ενσωματωμένους υπερσυνδέσμους.
    4. +
+ +

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

+ +

Πριν τον Ιστό, ήταν αρκετά δύσκολο να προσπελάσετε έγγραφα και να μεταφέρεστε από το ένα σε άλλο. Όντας ανθρωπίνως αναγνώσιμα, τα URL έκαναν τα πράγματα ευκολότερα, αλλά είναι δύσκολο να πληκτρολογήσετε ένα μακρύ URL όποτε θέλετε να προσπελάσετε ένα έγγραφο. Εδώ είναι που οι υπερσύνδεσμοι άλλαξαν τα πάντα. Οι σύνδεσμοι μπορούν να συσχετίσουν οποιαδήποτε συμβολοσειρά κειμένου με ένα URL, έτσι ώστε ο χρήστης να μπορεί ακαριαία να φτάσει το έγγραφο προορισμού ενεργοποιώντας το σύνδεσμο.

+ +

Οι σύνδεσμοι ξεχωρίζουν από το περιβάλλοντα κείμενο με το να είναι υπογραμμισμένοι και σε μπλε κείμενο. Χτυπήστε ελαφρά ή κάντε κλικ σε έναν σύνδεσμο για να τον ενεργοποιήσετε, ή αν χρησιμοποιείτε ένα πληκτρολόγιο, πατήστε Tab μέχρι ο σύνδεσμος να είναι στο επίκεντρο και πατήστε Enter ή το πλήκτρο κενού (Spacebar).

+ +

Example of a basic display and effect of a link in a web page

+ +

Οι σύνδεσμοι είναι η πρωτοπορία που έκανε τον Ιστό τόσο χρήσιμο και πετυχημένο. Στο υπόλοιπο αυτού του άρθρου, συζητάμε τους διάφορους τύπους συνδέσμων και την σημασία τους στη σύγχρονη σχεδίαση Ιστού (Web design).

+ +

Deeper dive

+ +

As we said, a link is a text string tied to a URL, and we use links to allow easy jumping from one document to another. That said, there are some nuances worth considering:

+ + + +
+
Internal link
+
A link between two webpages, where both webpages belong to your website, is called an internal link. Without internal links, there's no such thing as a website (unless, of course, it's a one-page website).
+
External link
+
A link from your webpage to someone else's webpage. Without external links, there is no Web, since the Web is a network of webpages. Use external links to provide information besides the content available through your webpage.
+
Incoming links
+
A link from someone else's webpage to your site. It's the opposite of an external link. Note that you don't have to link back when someone links to your site.
+
+ +

When you're building a website, focus on internal links, since those make your site usable. Find a good balance between having too many links and too few. We'll talk about designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page. On the other hand, if your site has more than about ten pages, it's counter-productive to link to every page from every other page.

+ +

When you're starting out, you don't have to worry about external and incoming links as much, but they are very important if you want search engines to find your site. (See below for more details.)

+ +

Anchors

+ +

Most links tie two webpages together. Anchors tie two sections of one document together. When you follow a link pointing to an anchor, your browser jumps to another part of the current document instead of loading a new document. However, you make and use anchors the same way as other links.

+ +

Example of a basic display and effect of an anchor in a web page

+ + + +

Links matter both to your users and to search engines. Every time search engines crawl a webpage, they index the website by following the links available on the webpage. Search engines not only follow links to discover the various pages of the website, but they also use the link's visible text to determine which search queries are appropriate for reaching the target webpage.

+ +

Links influence how readily a search engine will link to your site. The trouble is, it's hard to measure search engines' activities. Companies naturally want their sites to rank highly in search results.  We know the following about how search engines determine a site's rank:

+ + + +

SEO (search engine optimization) is the study of how to make websites rank highly in search results. Improving a website's use of links is one helpful SEO technique.

+ +

Next steps

+ +

Now you'll want to set up some webpages with links.

+ + diff --git "a/files/el/learn/common_questions/\317\200\317\216\317\202_\316\264\316\277\317\205\316\273\316\265\317\215\316\265\316\271_\317\204\316\277_\316\264\316\271\316\261\316\264\316\257\316\272\317\204\317\205\316\277/index.html" "b/files/el/learn/common_questions/\317\200\317\216\317\202_\316\264\316\277\317\205\316\273\316\265\317\215\316\265\316\271_\317\204\316\277_\316\264\316\271\316\261\316\264\316\257\316\272\317\204\317\205\316\277/index.html" deleted file mode 100644 index ecbf0f41eb..0000000000 --- "a/files/el/learn/common_questions/\317\200\317\216\317\202_\316\264\316\277\317\205\316\273\316\265\317\215\316\265\316\271_\317\204\316\277_\316\264\316\271\316\261\316\264\316\257\316\272\317\204\317\205\316\277/index.html" +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: Πώς δουλεύει το Διαδίκτυο; -slug: Learn/Common_questions/Πώς_δουλεύει_το_Διαδίκτυο -tags: - - Αρχάριος - - Εκμάθηση - - Μηχανισμοί Ιστού -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
-

Αυτό το άρθρο συζητά τι είναι το Διαδίκτυο και πώς δουλεύει.

-
- - - - - - - - - - - - -
Προαπαιτούμενα:Κανένα, αλλά σας παροτρύνουμε να διαβάσετε το Άρθρο στη θέσπιση στόχων πρώτα.
Ζητούμενο:Θα μάθετε τα βασικά για την τεχνική υποδομή του Ιστού και τη διαφορά μεταξύ Διαδικτύου και Ιστού.
- -

Περίληψη

- -

Το Διαδίκτυο είναι η ραχοκοκαλιά του Ιστού, η τεχνική υποδομή που καθιστά τον Ιστό δυνατό. Στη βάση του, το Διαδίκτυο είναι ένα μεγάλο δίκτυο από υπολογιστές που επικοινωνούν όλοι μεταξύ τους.

- -

Η ιστορία του Διαδικτύου είναι κάπως ασαφής. Ξεκίνησε στα 1960 ως ένα ερευνητικό έργο χρηματοδοτούμενο απ' τον στρατό των ΗΠΑ, μετά εξελίχθηκε σε μια δημόσια υποδομή στα 1980 με την υποστήριξη πολλών δημοσίων πανεπιστημίων και ιδιωτικών εταιριών. Οι διάφορες τεχνολογίες που υποστηρίζουν το Διαδίκτυο έχουν εξελιχθεί με το χρόνο, αλλά ο τρόπος που δουλεύει δεν έχει αλλάξει και πολύ: Διαδίκτυο είναι ένας τρόπος να συνδέεις υπολογιστές όλους μεταξύ τους, και να εξασφαλίζεις ότι, ό,τι κι αν συμβεί, βρίσκουν ένα τρόπο να παραμένουν συνδεδεμένοι.

- -

Διαδραστική Μαθηση

- - - -

Βαθύτερη κατάδυση

- -

Ένα απλό δίκτυο

- -

Όταν δύο υπολογιστές χρειάζεται να επικοινωνήσουν, πρέπει να τους ενώσεις, είτε φυσικά (συνήθως με ένα καλώδιο Ethernet) είτε ασύρματα (για παράδειγμα με WiFi ή Bluetooth συστήματα). Όλοι οι σύγχρονοι υπολογιστές μπορούν να υποστηρίξουν οποιεσδήποτε από αυτές τις συνδέσεις.

- -
-

Σημείωση: Για το υπόλοιπο αυτού του άρθρου, θα μιλήσουμε μόνο για φυσικά καλώδια, αλλά τα ασύρματα δίκτυα δουλεύουν παρόμοια.

-
- -

Two computers linked together

- -

Ένα τέτοιο δίκτυο δεν είναι περιορισμένο σε δύο υπολογιστές. Μπορείτε να συνδέσετε όσους υπολογιστές επιθυμείτε. Αλλά γίνεται πολύπλοκο γρήγορα. Εάν προσπαθείτε να συνδέσετε, πείτε, δέκα υπολογιστές, χρειάζετε 45 καλώδια, με εννέα πρίζες σε κάθε υπολογιστή!

- -

Ten computers all together

- -

Για να λυθεί αυτό το πρόγραμμα, κάθε υπολογστής σε ένα δίκτυο είναι συνδεδεμένος σε ένα ειδικό μικρό υπολογιστή που ονομάζεται δρομολογητής (router). Αυτός ο δρομολογητής έχει μόνο μια δουλειά: σαν ένα σηματοδότη σε σιδηροδρομικό σταθμό, εξασφαλίζει ότι ένα μήνυμα σταλμένο από έναν υπολογιστή φθάνει στο σωστό υπολογιστή προορισμού. Για να στείλει ένα μήνυμα στον υπολογιστή Β, ο υπολογιστής Α πρέπει να στείλει το μήνυμα στο δρομολογητή, ο οποίος με τη σειρά του προωθεί το μήνυμα στον υπολογιστή Β και σιγουρεύεται ότι το μήνυμα δεν παραδώθηκε στον υπολογιστή C.

- -

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

- -

Ten computers with a router

- -

Ένα δίκτυο δικτύων

- -

Μέχρι εδώ καλά. Αλλά τι γίνεται με εκατοντάδες, χιλιάδες, εκατομμύριους υπολογιστές; Φυσικά ένας μόνος δρομολογητής δεν κλιμακώνεται τόσο πολύ, αλλά, αν διαβάσετε προσεκτικά, είπαμε ότι ένας δρομολογητής είναι ένας υπολογιστής όπως όλοι οι άλλοι, οπότε τι μας αποτρέπει απ' την ένωση δύο δρομολογητών μαζί; Τίποτα, οπότε ας το κάνουμε.

- -

Two routers linked together

- -

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

- -

Routers linked to routers

- -

Ένα τέτοιο δίκτυο έρχεται πολύ κοντά σε αυτό που ονομάζουμε το Διαδίκτυο, αλλά μας λείπει κάτι. Φτιάξαμε ένα δίκτυο για τους δικούς μας σκοπούς. Υπάρχουν και άλλα δικτύα εκεί έξω: οι φίλοι σας, οι γείτονές σας, όλοι μπορούν να έχουν το δικό τους δίκτυο από υπολογιστές. Αλλά δεν είναι πραγματικά εφικτό να εγκαταστήσετε καλώδια μεταξύ του σπιτιού σας και του υπόλοιπου κόσμου, όποτε πώς το διαχειρίζεστε; Λοιπόν, υπάρχουν ήδη καλώδια συνδεδεμένα με το σπίτι σας, για παράδειγμα, ηλεκτρικής ενέργειας και τηλεφώνου. Η τηλεφωνική υποδομή ήδη συνδέει το σπίτι σας με οποιονδήποτε στον κόσμο οπότε είναι το τέλειο καλώδιο που χρειαζόμαστε. Για να συνδέσουμε το δίκτυό μας στην τηλεφωνική υποδομή, χρειαζόμαστε ένα ειδικό κομμάτι εξοπλισμού που λέγεται μόντεμ. Αυτό το μόντεμ μετατρέπει την πληροφορία από το δίκτυό μας σε πληροφορία διαχειρίσιμη απ' την τηλεφωνική υποδομή και τούμπαλιν.

- -

A router linked to a modem

- -

Οπότε είμαστε συνδεδεμένοι στην τηλεφωνική υποδομή. Το επόμενο βήμα είναι να στείλουμε μηνύματα από το δίκτυό μας στο δίκτυο που θέλουμε να συνδεθούμε. Για να το κάνουμε αυτό, θα συνδέσουμε το δίκτυό μας σε έναν Πάροχο Διαδικτυακών Υπηρεσιών (Internet Service Provider). Ένας Πάροχος Διαδικτυακών Υπηρεσιών (ISP) είναι μια εταιρία που διαχειρίζεται μερικούς ειδικούς δρομολογητές που συνδέονται όλοι μεταξύ τους και μπορούν επίσης να προσπελάσουν τους δρομολογητές άλλων Παρόχων. Οπότε το μήνυμα απ' το δίκτυό μας μεταφέρεται μέσω του δικτύου των δικτύων των Παρόχων στο δίκτυο προορισμού. Το Διαδίκτυο αποτελείται από όλη αυτήν την υποδομή των δικτύων.

- -

Full Internet stack

- -

Εύρεση υπολογιστών

- -

Εάν θέλετε να στείλετε ένα μήνυμα σε έναν υπολογιστή, πρέπει να διευκρινίσετε σε ποιον. Επομένως οποιoσδήποτε υπολογιστής συνδεδεμένος σε ένα δίκτυο έχει μια μοναδική διεύθυνση για την αναγνώρισή του, που λέγεται «διεύθυνση IP» (όπου το IP σημαίνει Πρωτόκολλο Διαδικτύου - Internet Protocol). Είναι μια διεύθυνση αποτελούμενη από μια σειρά τεσσάρων αριθμών χωριζόμενων από τελείες, για παράδειγμα: 192.168.2.10.

- -

Αυτό είναι απολύτως φυσιολογικό για υπολογιστές, αλλά εμείς τα ανθρώπινα όντα δυσκολευόμαστε στη θύμηση τέτοιων διευθύνσεων. Για να γίνουν τα πράγματα ευκολότερα, μπορούμε να δώσουμε ψευδώνυμο σε μια διεύθυνση IP με ένα ανθρωπίνως αναγνώσιμο όνομα που λέγεται όνομα τομέα (domain name). Για παράδειγμα, google.com είναι το όνομα τομέα που χρησιμοποιείται έναντι της IP διεύθυνσης 173.194.121.32. Οπότε χρησιμοποιώντας το όνομα τομέα είναι ο ευκολότερος τρόπος για εμάς να συνδεόμαστε με έναν υπολογιστή μέσω του Διαδικτύου.

- -

Show how a domain name can alias an IP address

- -

Διαδίκτυο και ο Ιστός

- -

Όπως μπορείτε να παρατηρήσετε, όταν περιηγούμαστε στον Ιστό με έναν Περιηγητή Ιστού (Web browser), συνήθως χρησιμοποιούμε το όνομα τομέα για να συνδεθούμε σε έναν ιστότοπο. Αυτό σημαίνει ότι το Διαδίκτυο και ο Ιστός είναι το ίδιο πράγμα; Δεν είναι τόσο απλό. Όπως είδαμε, το Διαδίκτυο είναι η τεχνική υποδομή που επιτρέπει εκατομμύριους υπολογιστές να είναι συνδεδεμένοι όλοι μεταξύ τους. Μεταξύ αυτών των υπολογιστών, μερικοί υπολογιστές (ονομαζόμενοι (Διακομιστές Ιστού - Web Servers) μπορούν να στείλουν μηνύματα κατανοητά μόνο σε περιηγητές ιστού. Το Διαδίκτυο είναι μια υποδομή, ενώ ο Ιστός είναι μια υπηρεσία δημιουργημένη πάνω στην υποδομή.  Αξίζει να σημειωθεί ότι υπάρχουν αρκετές άλλες υπηρεσίες δημιουργημένες μέσα στο Διαδίκτυο, όπως το η-ταχυδρομείο (email) και το  {{Glossary("IRC")}}.

- -

Επόμενα βήματα

- - diff --git "a/files/el/learn/common_questions/\317\203\316\265\316\273\316\257\316\264\316\265\317\202_\317\204\317\214\317\200\316\277\316\271_\316\264\316\271\316\261\316\272\316\277\316\274\316\271\317\203\317\204\316\255\317\202_\316\272\316\261\316\271_\316\274\316\267\317\207\316\261\316\275\316\255\317\202_\316\261\316\275\316\261\316\266\316\256\317\204\316\267\317\203\316\267\317\202/index.html" "b/files/el/learn/common_questions/\317\203\316\265\316\273\316\257\316\264\316\265\317\202_\317\204\317\214\317\200\316\277\316\271_\316\264\316\271\316\261\316\272\316\277\316\274\316\271\317\203\317\204\316\255\317\202_\316\272\316\261\316\271_\316\274\316\267\317\207\316\261\316\275\316\255\317\202_\316\261\316\275\316\261\316\266\316\256\317\204\316\267\317\203\316\267\317\202/index.html" deleted file mode 100644 index ac2d66edfe..0000000000 --- "a/files/el/learn/common_questions/\317\203\316\265\316\273\316\257\316\264\316\265\317\202_\317\204\317\214\317\200\316\277\316\271_\316\264\316\271\316\261\316\272\316\277\316\274\316\271\317\203\317\204\316\255\317\202_\316\272\316\261\316\271_\316\274\316\267\317\207\316\261\316\275\316\255\317\202_\316\261\316\275\316\261\316\266\316\256\317\204\316\267\317\203\316\267\317\202/index.html" +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: >- - Ποια είναι η διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και - μηχανής αναζήτησης; -slug: Learn/Common_questions/Σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης -tags: - - Αρχάριος - - Μηχανισμοί Ιστού - - Χρειάζεται Διαδραστικό Μάθημα -translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines ---- -
-

Σε αυτό το άρθρο περιγράφουμε διάφορες έννοιες σχετικά με τον ιστό: ιστότοποι, ιστοσελίδες, διακομιστές ιστού, και μηχανές αναζήτησης. Αυτοί οι όροι συχνά μπερδεύονται απ' τους νεοφερμένους στον ιστό, ή χρησιμοποιούνται λανθασμένα. Ας μάθουμε τι σημαίνει ο κάθε ένας.

-
- - - - - - - - - - - - -
Προαπαιτούμενα:Θα πρέπει να γνωρίζεις πώς δουλεύει το Διαδίκτυο.
Ζητούμενο:Ικανοί να περιγράψετε τις διαφορές μεταξύ μιας ιστοσελίδας, ενός ιστότοπου, ενός διακομιστή ιστού, και μιας μηχανής αναζήτησης.
- -

Περίληψη

- -

Όπως με κάθε πεδίο γνώσης, ο ιστός έρχεται με πολλές ασυναρτησίες. Μην ανησυχείτε, δε θα σας κατακλύσουμε με όλες αυτές (έχουμε ένα γλωσσάρι αν είστε περίεργοι). Ωστόσο, υπάρχουν μερικοί βασικοί όροι που πρέπει να καταλάβετε στο ξεκίνημα, αφού θα ακούσετε αυτές τις εκφράσεις συνεχώς καθώς συνεχίζετε να διαβάζετε. Είναι εύκολο να μπερδέψετε αυτούς τους όρους μερικές φορές, αφού αναφέρονται σε σχετικές μα διαφορετικές λειτουργικότητες. Στην πραγματικότητα, θα δείτε μερικές φορές αυτούς τους όρους να καταχρώνται σε δελτία ειδήσεων και αλλού, οπότε το να τους μπερδέψετε είναι κατανοητό.

- -

Θα καλύψουμε αυτούς τους όρους και τεχνολογίες με περισσότερη λεπτομέρεια καθώς προχωρούμε κι άλλο, αλλά αυτοί οι γρήγοροι ορισμοί θα είναι μια σπουδαία αρχή για σας:

- -
-
ιστοσελίδα
-
Ένα έγγραφο που μπορεί να απεικονιστεί σε ένα πρόγραμμα περιήγησης όπως το Firefox, το Google Chrome, το Opera, το Microsoft Internet Explorer ή Edge, ή το Safari της Apple. Αυτές επίσης συνηθίζεται να λέγονται απλά «σελίδες».
-
ιστότοπος
-
Μια συλλογή ιστοσελίδων που είναι ομαδοποιημένες και συνήθως συνδεδεμένες με διάφορους τρόπους. Συνήθως λέγεται ένας «ιστότοπος» ή απλά ένας «τόπος».
-
διακομιστής ιστού
-
Ένας υπολογιστής που φιλοξενεί έναν ιστότοπο στο Διαδίκτυο.
-
μηχανή αναζήτησης
-
Ένας ιστότοπος που σας βοηθάει να βρείτε άλλες ιστοσελίδες, όπως η Google, η Bing, η Yahoo.
-
- -

Ας δούμε μια απλή αναλογία — μια δημόσια βιβλιοθήκη. Αυτά είναι που κάνετε γενικά όταν επισκέπτεστε μια βιβλιοθήκη:

- -
    -
  1. Βρίσκετε ένα ευρετήριο αναζήτησης και ψάχνετε τον τίτλο του βιβλίου που θέλετε.
    2. -
  2. Σημειώνετε τον αριθμό καταλόγου του βιβλίου.
    3. -
  3. Πηγαίνετε στο συγκεκριμένο τμήμα που περιέχει το βιβλίο, βρίσκετε το σωστό αριθμό καταλόγου, και παίρνετε το βιβλίο.
    4. -
- -

Ας συγκρίνουμε τη βιβλιοθήκη με ένα διακομιστή ιστού:

- - - -
-
 
-
- -

Διαδραστική μάθηση

- -

Δεν υπάρχει διαδραστική μάθηση ακόμα. Παρακαλούμε, σκεφτείτε να συνεισφέρετε.

- -

Βαθύτερη κατάδυση

- -

Λοιπόν, ας σκάψουμε βαθύτερα στο πώς αυτοί οι τέσσερις όροι σχετίζονται και γιατί συγχέονται μερικές φορές μεταξύ τους.

- -

ιστοσελίδα

- -

Μια ιστοσελίδα είναι απλά ένα έγγραφο απεικονιζόμενο από έναν {{Glossary("φυλλομετρητή")}}. Τέτοια έγγραφα είναι γραμμένα σε {{Glossary("HTML")}} γλώσσα (την οποία θα εξετάσουμε περαιτέρω με περισσότερη λεπτομέρεια σε άλλα άρθρα). Μια ιστοσελίδα μπορεί να ενσωματώσει μια ποικιλία από διαφορετικούς τύπους πόρων όπως:

- - - -
-

Σημείωση: Οι φυλλομετρητές μπορούν ακόμη να εμφανίσουν άλλα έγγραφα όπως {{Glossary("PDF")}} αρχεία ή εικόνες, αλλά ο όρος ιστοσελίδα αναφέρεται συγκεκριμένα σε HTML έγγραφα. Αλλιώς, χρησιμοποιούμε μόνο τον όρο έγγραφο.

-
- -

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

- -

Example of a web page address in the browser address bar

- -

Ένας ιστότοπος είναι μια συλλογή συνδεδεμένων ιστοσελίδων (μαζί με τους σχετικούς της πόρους) που μοιράζονται ένα μοναδικό όνομα τομέα. Κάθε ιστοσελίδα δοθείσης του ιστότοπου παρέχει ρητούς συνδέσμους—τις περισσότερες φορές στη μορφή κομματιών κειμένου που είναι δυνατό να γίνει κλικ—που επιτρέπουν το χρήστη να μετακινηθεί από μία σελίδα του ιστότοπου σε μία άλλη.

- -

Για να προσπελάσετε έναν ιστότοπο, πληκτρολογήστε το όνομα τομέα του στη γραμμή διεύθυνσης του φυλλομετρητή σας, και το πρόγραμμα περιήγησης θα εμφανίσει την κύρια ιστοσελίδα του ιστότοπου, ή  αρχική σελίδα - homepage (ανεπίσημα αναφέρεται ως «η αρχική - the home»):

- -

Example of a web site domain name in the browser address bar

- -

Οι έννοιες της ιστοσελίδας και του ιστότοπου είναι ιδιαίτερα εύκολο να μπερδευτούν σε έναν ιστότοπο που περιέχει μόνο μια ιστοσελίδα. Ένας τέτοιος ιστότοπος μερικές φορές καλείται μονοσέλιδος ιστότοπος ή single-page website.

- -

Διακομιστής ιστού

- -

Ένας διακομιστής ιστού είναι ένας υπολογιστής που φιλοξενεί έναν ή περισσότερους ιστότοπους. «Φιλοξενώ» σημαίνει ότι όλες οι ιστοσελίδες και τα υποστηριζόμενα αρχεία τους είναι διαθέσιμα σε αυτόν τον υπολογιστή. Ο διακομιστής ιστού θα στείλει οποιαδήποτε ιστοσελίδα από τον ιστότοπο που φιλοξενεί σε οποιοδήποτε πρόγραμμα περιήγησης του χρήστη, ανά αίτηση του χρήστη.

- -

Μην μπερδεύετε τους ιστότοπους και τους διακομιστές ιστού. Για παράδειγμα, αν ακούσετε κάποιον να λέει, «Ο ιστότοπός μου δεν ανταποκρίνεται», στην πραγματικότητα σημαίνει ότι ο διακομιστής ιστού δεν ανταποκρίνεται και επομένως ο ιστότοπος δεν είναι διαθέσιμος. Πιο σημαντικά, αφού ένας διακομιστής ιστού μπορεί να φιλοξενήσει πολλαπλούς ιστότοπους, ο όρος διακομιστής ιστού δε χρησιμοποιείται ποτέ για να καθορίσει έναν ιστότοπο, μιας και θα προκαλούσε μεγάλη σύγχυση. Στο προηγούμενο μας παράδειγμα, αν λέγαμε, «Ο διακομιστής ιστού μου δεν ανταποκρίνεται», σημαίνει ότι δεν υπάρχει κανένας διαθέσιμος ιστότοπος σε αυτόν τον διακομιστή ιστού.

- -

Μηχανή αναζήτησης

- -

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

- -

Υπάρχουν πολλές εκεί έξω: Google, Bing, Yandex, DuckDuckGo, και πολλές ακόμα. Μερικές είναι γενικού σκοπού, άλλες είναι εξειδικευμένες για συγκεκριμένα θέματα. Χρησιμοποιείστε οποιαδήποτε προτιμάτε.

- -

Πολλοί αρχάριοι του ιστού μπερδεύουν τις μηχανές αναζήτησης με τα προγράμματα περιήγησης. Ας το ξεκαθαρίσουμε: Ένα πρόγραμμα περιήγησης είναι ένα κομμάτι λογισμικού που ανακτά και εμφανίζει ιστοσελίδες· μια μηχανή αναζήτησης είναι ένας ιστότοπος που βοηθά τους ανθρώπους να βρουν ιστοσελίδες από άλλους ιστότοπους. Η σύγχυση προκύπτει επειδή, τη πρώτη φορά που κάποιος ανοίγει ένα πρόγραμμα περιήγησης, ο φυλλομετρητής δείχνει την αρχική σελίδα μιας μηχανής αναζήτησης. Αυτό βγάζει νόημα, γιατί, προφανώς, το πρώτο πράγμα που θέλετε να κάνετε με ένα πρόγραμμα περιήγησης είναι να βρείτε μια ιστοσελίδα για να δείτε. Μην συγχέετε την υποδομή (π.χ., το πρόγραμμα περιήγησης) με την υπηρεσία (π.χ., τη μηχανή αναζήτησης). Η διάκριση θα σας βοηθήσει αρκετά, αλλά ακόμα και μερικοί επαγγελματίες μιλάνε αόριστα, οπότε μη νιώθετε ανήσυχα γι' αυτό.

- -

Εδώ βλέπετε ένα στιγμιότυπο του Firefox που δείχνει την περιοχή αναζήτησης της Google ως την προκαθορισμένη σελίδα έναρξης:

- -

Example of Firefox nightly displaying a custom Google page as default

- -

Επόμενα βήματα

- - - -

 

diff --git "a/files/el/learn/common_questions/\317\204\316\271_\316\265\316\257\316\275\316\261\316\271_\316\277\316\271_\317\205\317\200\316\265\317\201\317\203\317\215\316\275\316\264\316\265\317\203\316\274\316\277\316\271/index.html" "b/files/el/learn/common_questions/\317\204\316\271_\316\265\316\257\316\275\316\261\316\271_\316\277\316\271_\317\205\317\200\316\265\317\201\317\203\317\215\316\275\316\264\316\265\317\203\316\274\316\277\316\271/index.html" deleted file mode 100644 index b63ba8a117..0000000000 --- "a/files/el/learn/common_questions/\317\204\316\271_\316\265\316\257\316\275\316\261\316\271_\316\277\316\271_\317\205\317\200\316\265\317\201\317\203\317\215\316\275\316\264\316\265\317\203\316\274\316\277\316\271/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Τι είναι οι υπερσύνδεμοι; -slug: Learn/Common_questions/Τι_είναι_οι_υπερσύνδεσμοι -translation_of: Learn/Common_questions/What_are_hyperlinks ---- -
-

Σ' αυτό το άρθρο, θα εξετάσουμε τι είναι οι υπερσύνδεσμοι και γιατί έχουν σημασία.

-
- - - - - - - - - - - - -
Προαπαιτούμενα:Θα πρέπει να ξέρετε πώς δουλεύει το Διαδίκτυο και να είστε οικίοι με τη διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και μηχανής αναζήτησης.
Ζητούμενο:Μάθετε για τους συνδέσμους στον ιστό και γιατί έχουν σημασία.
- -

Περίληψη

- -

Οι Υπερσύνδεσμοι, συνήθως λέγονται σύνδεσμοι, είναι μια θεμελιώδης έννοια πίσω απ' τον Ιστό. Για να εξηγήσουμε τι είναι οι σύνδεσμοι, πρέπει να κάνουμε ένα βήμα πίσω στα πολύ βασικά της αρχιτεκτονικής του Ιστού.

- -

Πίσω στο 1989, ο Τιμ Μπέρνερς-Λι, ο εφευρέτης του Ιστού, μίλησε για τους τρεις πυλώνες που στέκεται ο Ιστός:

- -
    -
  1. {{Glossary("URL")}}, ένα σύστημα διευθύνσεων που καταγράφει τα έγγραφα Ιστού
    2. -
  2. {{Glossary("HTTP")}}, ένα πρωτόκολλο επικοινωνίας για να βρίσκει έγγραφα όταν δίνονται με το URL τους.
    3. -
  3. {{Glossary("HTML")}}, μια μορφή εγγράφου που επιτρέπει τους ενσωματωμένους υπερσυνδέσμους.
    4. -
- -

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

- -

Πριν τον Ιστό, ήταν αρκετά δύσκολο να προσπελάσετε έγγραφα και να μεταφέρεστε από το ένα σε άλλο. Όντας ανθρωπίνως αναγνώσιμα, τα URL έκαναν τα πράγματα ευκολότερα, αλλά είναι δύσκολο να πληκτρολογήσετε ένα μακρύ URL όποτε θέλετε να προσπελάσετε ένα έγγραφο. Εδώ είναι που οι υπερσύνδεσμοι άλλαξαν τα πάντα. Οι σύνδεσμοι μπορούν να συσχετίσουν οποιαδήποτε συμβολοσειρά κειμένου με ένα URL, έτσι ώστε ο χρήστης να μπορεί ακαριαία να φτάσει το έγγραφο προορισμού ενεργοποιώντας το σύνδεσμο.

- -

Οι σύνδεσμοι ξεχωρίζουν από το περιβάλλοντα κείμενο με το να είναι υπογραμμισμένοι και σε μπλε κείμενο. Χτυπήστε ελαφρά ή κάντε κλικ σε έναν σύνδεσμο για να τον ενεργοποιήσετε, ή αν χρησιμοποιείτε ένα πληκτρολόγιο, πατήστε Tab μέχρι ο σύνδεσμος να είναι στο επίκεντρο και πατήστε Enter ή το πλήκτρο κενού (Spacebar).

- -

Example of a basic display and effect of a link in a web page

- -

Οι σύνδεσμοι είναι η πρωτοπορία που έκανε τον Ιστό τόσο χρήσιμο και πετυχημένο. Στο υπόλοιπο αυτού του άρθρου, συζητάμε τους διάφορους τύπους συνδέσμων και την σημασία τους στη σύγχρονη σχεδίαση Ιστού (Web design).

- -

Deeper dive

- -

As we said, a link is a text string tied to a URL, and we use links to allow easy jumping from one document to another. That said, there are some nuances worth considering:

- - - -
-
Internal link
-
A link between two webpages, where both webpages belong to your website, is called an internal link. Without internal links, there's no such thing as a website (unless, of course, it's a one-page website).
-
External link
-
A link from your webpage to someone else's webpage. Without external links, there is no Web, since the Web is a network of webpages. Use external links to provide information besides the content available through your webpage.
-
Incoming links
-
A link from someone else's webpage to your site. It's the opposite of an external link. Note that you don't have to link back when someone links to your site.
-
- -

When you're building a website, focus on internal links, since those make your site usable. Find a good balance between having too many links and too few. We'll talk about designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page. On the other hand, if your site has more than about ten pages, it's counter-productive to link to every page from every other page.

- -

When you're starting out, you don't have to worry about external and incoming links as much, but they are very important if you want search engines to find your site. (See below for more details.)

- -

Anchors

- -

Most links tie two webpages together. Anchors tie two sections of one document together. When you follow a link pointing to an anchor, your browser jumps to another part of the current document instead of loading a new document. However, you make and use anchors the same way as other links.

- -

Example of a basic display and effect of an anchor in a web page

- - - -

Links matter both to your users and to search engines. Every time search engines crawl a webpage, they index the website by following the links available on the webpage. Search engines not only follow links to discover the various pages of the website, but they also use the link's visible text to determine which search queries are appropriate for reaching the target webpage.

- -

Links influence how readily a search engine will link to your site. The trouble is, it's hard to measure search engines' activities. Companies naturally want their sites to rank highly in search results.  We know the following about how search engines determine a site's rank:

- - - -

SEO (search engine optimization) is the study of how to make websites rank highly in search results. Improving a website's use of links is one helpful SEO technique.

- -

Next steps

- -

Now you'll want to set up some webpages with links.

- - diff --git a/files/el/learn/forms/form_validation/index.html b/files/el/learn/forms/form_validation/index.html new file mode 100644 index 0000000000..f4d9184454 --- /dev/null +++ b/files/el/learn/forms/form_validation/index.html @@ -0,0 +1,869 @@ +--- +title: Επικύρωση δεδομένων φόρμας +slug: Learn/HTML/Forms/Επικύρωση_δεδομένων_φόρμας +translation_of: Learn/Forms/Form_validation +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}
+ +

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

+ + + + + + + + + + + + +
Προαπαιτούμενα:Γνώση όρων πληροφορικής, επαρκής κατανόηση των  τεχνολογιών HTML, CSS, και JavaScript.
Σκοπός:Η κατανόηση της σπουδαιότητας της επικύρωσης δεδομένων και πως γίνεται η εφαρμογή της.
+ +

Τι είναι η επικύρωση δεδομένων φόρμας;

+ +

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

+ + + +

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

+ +

Επιδίωξη είναι η εισαγωγή των δεδομένω να είναι όσο το δυνατόν ευκολότερη. Τότε γιατί επιμένουμε να επικυρώνουμε τα δεδομένα στις φόρμες; Για τους τρεις παρακάτω κυρίως λόγους:

+ + + +

Different types of form validation

+ +

There are two different types of form validation which you'll encounter on the web:

+ + + +

In the real world, developers tend to use a combination of client-side and server-side validation.

+ +

Using built-in form validation

+ +

One of the features of HTML5 is the ability to validate most user data without relying on scripts. This is done by using validation attributes on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all those rules, it is considered valid; if not, it is considered invalid.

+ +

When an element is valid:

+ + + +

When an element is invalid:

+ + + +

Validation constraints on input elements — starting simple

+ +

In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.

+ +

Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as fruit-start.html, and a live example below:

+ + + +

{{EmbedLiveSample("Hidden_code", "100%", 50)}}

+ +

To begin with, make a copy of fruit-start.html in a new directory on your hard drive.

+ +

The required attribute

+ +

The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

+ +

Add a required attribute to your input, as shown below:

+ +
<form>
+  <label for="choose">Would you prefer a banana or cherry?</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+ +

Also take note of the CSS included in the example file:

+ +
input:invalid {
+  border: 2px dashed red;
+}
+
+input:valid {
+  border: 2px solid black;
+}
+ +

This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:

+ +

{{EmbedLiveSample("The_required_attribute", "100%", 50)}}

+ +

Validating against a regular expression

+ +

Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a Regular Expression as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as variety of other uses in JavaScript). Regexs are quite complex and we do not intend to teach you them exhaustively in this article.

+ +

Below are some examples to give you a basic idea of how they work:

+ + + +

You can use numbers and other characters in these expressions too, such as:

+ + + +

You can combine these in pretty much any way you want, specifying different parts one after the other:

+ + + +

Anyway, let's implement an example — update your HTML to add a pattern attribute, like so:

+ +
<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="banana|cherry">
+  <button>Submit</button>
+</form>
+ + + +

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}

+ +

In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".

+ +

At this point, try changing the value inside the pattern attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!

+ +
+

Note: Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the email type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the url type automatically require a properly-formed URL.

+
+ +
+

Note: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.

+
+ +

Constraining the length of your entries

+ +

All text fields created by ({{HTMLElement("input")}} or {{HTMLElement("textarea")}}) can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.

+ +

For number fields (i.e. <input type="number">), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.

+ +

Let's look at another example. Create a new copy of the fruit-start.html file.

+ +

Now delete the contents of the <body> element, and replace it with the following:

+ +
<form>
+  <div>
+    <label for="choose">Would you prefer a banana or a cherry?</label>
+    <input id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">How many would you like?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+ + + + + +

Here is the example running live:

+ +

{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}

+ +
+

Note: <input type="number"> (and other types, like range) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).

+
+ +

Full example

+ +

Here is a full example to show off usage of HTML's built-in validation features:

+ +
<form>
+  <p>
+    <fieldset>
+      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
+      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
+      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- The pattern attribute can act as a fallback for browsers which
+         don't implement the number input type but support the pattern attribute.
+         Please note that browsers that support the pattern attribute will make it
+         fail silently when used with a number field.
+         Its usage here acts only as a fallback -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+ +
body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+  margin: 0;
+  padding: 0 5px;
+}
+
+p > label {
+  display: block;
+}
+
+input[type=text],
+input[type=email],
+input[type=number],
+textarea,
+fieldset {
+/* required to properly style form
+   elements on WebKit based browsers */
+  -webkit-appearance: none;
+
+  width : 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input:invalid {
+  box-shadow: 0 0 5px 1px red;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+ +

{{EmbedLiveSample("Full_example", "100%", 420)}}

+ +

Customized error messages

+ +

As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.

+ +

These automated messages have two drawbacks:

+ + + + + + + + + + + + + + + + + + + + + + + + + +
French versions of feedback messages on an English page
BrowserRendering
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
+ +

To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.

+ +

HTML5 provides the constraint validation API to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:

+ +
<form>
+  <label for="mail">I would like you to provide me an e-mail</label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+ +

In JavaScript, you call the setCustomValidity() method:

+ +
var email = document.getElementById("mail");
+
+email.addEventListener("input", function (event) {
+  if (email.validity.typeMismatch) {
+    email.setCustomValidity("I expect an e-mail, darling!");
+  } else {
+    email.setCustomValidity("");
+  }
+});
+ +

{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}

+ +

Validating forms using JavaScript

+ +

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.

+ +

The HTML5 constraint validation API

+ +

More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on each form element.

+ +

Constraint validation API properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
validationMessageA localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (willValidate is false), or the element's value satisfies its constraints.
validityA {{domxref("ValidityState")}} object describing the validity state of the element.
validity.customErrorReturns true if the element has a custom error; false otherwise.
validity.patternMismatchReturns true if the element's value doesn't match the provided pattern; false otherwise.
+
+ If it returns true, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.
validity.rangeOverflowReturns true if the element's value is higher than the provided maximum; false otherwise.
+
+ If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} and CSS pseudo-class.
validity.rangeUnderflowReturns true if the element's value is lower than the provided minimum; false otherwise.
+
+ If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.
validity.stepMismatchReturns true if the element's value doesn't fit the rules provided by the step attribute; otherwise false .
+
+ If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.
validity.tooLongReturns true if the element's value is longer than the provided maximum length; else it wil be false
+
+ If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.
validity.typeMismatchReturns true if the element's value is not in the correct syntax; otherwise false.
+
+ If it returns true, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.
validity.validReturns true if the element's value has no validity problems; false otherwise.
+
+ If it returns true, the element will match the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.
validity.valueMissingReturns true if the element has no value but is a required field; false otherwise.
+
+ If it returns true, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.
willValidateReturns true if the element will be validated when the form is submitted; false otherwise.
+ +

Constraint validation API methods

+ + + + + + + + + + + + + + + + + + +
MethodDescription
checkValidity()Returns true if the element's value has no validity problems; false otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.
setCustomValidity(message)Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.
+
+ If the argument is the empty string, the custom error is cleared.
+ +

For legacy browsers, it's possible to use a polyfill such as Hyperform to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.

+ +

Example using the constraint validation API

+ +

Let's see how to use this API to build custom error messages. First, the HTML:

+ +
<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+ +

This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.

+ +

The aria-live attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.

+ +
CSS
+ +

This CSS styles our form and the error output to look more attractive.

+ +
/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input[type=email]{
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input:invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus:invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

The following JavaScript code handles the custom error validation.

+ +
// There are many ways to pick a DOM node; here we get the form itself and the email
+// input box, as well as the span element into which we will place the error message.
+
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+var error = document.querySelector('.error');
+
+email.addEventListener("input", function (event) {
+  // Each time the user types something, we check if the
+  // email field is valid.
+  if (email.validity.valid) {
+    // In case there is an error message visible, if the field
+    // is valid, we remove the error message.
+    error.innerHTML = ""; // Reset the content of the message
+    error.className = "error"; // Reset the visual state of the message
+  }
+}, false);
+form.addEventListener("submit", function (event) {
+  // Each time the user tries to send the data, we check
+  // if the email field is valid.
+  if (!email.validity.valid) {
+
+    // If the field is not valid, we display a custom
+    // error message.
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+    // And we prevent the form from being sent by canceling the event
+    event.preventDefault();
+  }
+}, false);
+ +

Here is the live result:

+ +

{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}

+ +

The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.

+ +

Validating forms without a built-in API

+ +

Sometimes, such as with legacy browsers or custom widgets, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.

+ +

To validate a form, you have to ask yourself a few questions:

+ +
+
What kind of validation should I perform?
+
You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.
+
What should I do if the form does not validate?
+
This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?
+
How can I help the user to correct invalid data?
+
In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read: + +
+
+ +

Example that doesn't use the constraint validation API

+ +

In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:

+ +
<form>
+  <p>
+    <label for="mail">
+        <span>Please enter an email address:</span>
+        <input type="text" class="mail" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  <p>
+  <!-- Some legacy browsers need to have the `type` attribute
+       explicitly set to `submit` on the `button`element -->
+  <button type="submit">Submit</button>
+</form>
+ +

As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that ARIA is an independent specification that's not specifically related to HTML5.

+ +
CSS
+ +

Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.

+ +
/* This is just to make the example nicer */
+body {
+  font: 1em sans-serif;
+  padding: 0;
+  margin : 0;
+}
+
+form {
+  max-width: 200px;
+}
+
+p * {
+  display: block;
+}
+
+input.mail {
+  -webkit-appearance: none;
+
+  width: 100%;
+  border: 1px solid #333;
+  margin: 0;
+
+  font-family: inherit;
+  font-size: 90%;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* This is our style for the invalid fields */
+input.invalid{
+  border-color: #900;
+  background-color: #FDD;
+}
+
+input:focus.invalid {
+  outline: none;
+}
+
+/* This is the style of our error messages */
+.error {
+  width  : 100%;
+  padding: 0;
+
+  font-size: 80%;
+  color: white;
+  background-color: #900;
+  border-radius: 0 0 5px 5px;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.error.active {
+  padding: 0.3em;
+}
+ +
JavaScript
+ +

The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.

+ +
// There are fewer ways to pick a DOM node with legacy browsers
+var form  = document.getElementsByTagName('form')[0];
+var email = document.getElementById('mail');
+
+// The following is a trick to reach the next sibling Element node in the DOM
+// This is dangerous because you can easily build an infinite loop.
+// In modern browsers, you should prefer using element.nextElementSibling
+var error = email;
+while ((error = error.nextSibling).nodeType != 1);
+
+// As per the HTML5 Specification
+var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+
+// Many legacy browsers do not support the addEventListener method.
+// Here is a simple way to handle this; it's far from the only one.
+function addEvent(element, event, callback) {
+  var previousEventCallBack = element["on"+event];
+  element["on"+event] = function (e) {
+    var output = callback(e);
+
+    // A callback that returns `false` stops the callback chain
+    // and interrupts the execution of the event callback.
+    if (output === false) return false;
+
+    if (typeof previousEventCallBack === 'function') {
+      output = previousEventCallBack(e);
+      if(output === false) return false;
+    }
+  }
+};
+
+// Now we can rebuild our validation constraint
+// Because we do not rely on CSS pseudo-class, we have to
+// explicitly set the valid/invalid class on our email field
+addEvent(window, "load", function () {
+  // Here, we test if the field is empty (remember, the field is not required)
+  // If it is not, we check if its content is a well-formed e-mail address.
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  email.className = test ? "valid" : "invalid";
+});
+
+// This defines what happens when the user types in the field
+addEvent(email, "input", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+  if (test) {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  } else {
+    email.className = "invalid";
+  }
+});
+
+// This defines what happens when the user tries to submit the data
+addEvent(form, "submit", function () {
+  var test = email.value.length === 0 || emailRegExp.test(email.value);
+
+  if (!test) {
+    email.className = "invalid";
+    error.innerHTML = "I expect an e-mail, darling!";
+    error.className = "error active";
+
+    // Some legacy browsers do not support the event.preventDefault() method
+    return false;
+  } else {
+    email.className = "valid";
+    error.innerHTML = "";
+    error.className = "error";
+  }
+});
+ +

The result looks like this:

+ +

{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}

+ +

As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:

+ + + +

Remote validation

+ +

In some cases it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a user name. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the user name rather than asking the user to send the data, then send back the form with an error.

+ +

Performing such a validation requires taking a few precautions:

+ + + +

Conclusion

+ +

Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:

+ + + +

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

+ +

In this module

+ + diff --git a/files/el/learn/forms/index.html b/files/el/learn/forms/index.html new file mode 100644 index 0000000000..215164d6a6 --- /dev/null +++ b/files/el/learn/forms/index.html @@ -0,0 +1,83 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Beginner + - Featured + - Forms + - Guide + - HTML + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.

+ +

Prerequisites

+ +

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our Native form widgets guide.

+ +

The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript first.

+ +
+

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

+
+ +

Basic guides

+ +
+
Your first HTML form
+
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
+
How to structure an HTML form
+
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
+
+ +

What form widgets are available?

+ +
+
The native form widgets
+
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
+
+ +

Validating and submitting form data

+ +
+
Sending form data
+
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
+
Form data validation
+
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
+
+ +

Advanced guides

+ +
+
How to build custom form widgets
+
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
+
Sending forms through JavaScript
+
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
+
HTML forms in legacy browsers
+
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
+
+ +

Form styling guides

+ +
+
Styling HTML forms
+
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
+
Advanced styling for HTML forms
+
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
+
Property compatibility table for form widgets
+
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
+
+ +

See also

+ + diff --git a/files/el/learn/html/forms/index.html b/files/el/learn/html/forms/index.html deleted file mode 100644 index 215164d6a6..0000000000 --- a/files/el/learn/html/forms/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: HTML forms -slug: Learn/HTML/Forms -tags: - - Beginner - - Featured - - Forms - - Guide - - HTML - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.

- -

Prerequisites

- -

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our Native form widgets guide.

- -

The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript first.

- -
-

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

-
- -

Basic guides

- -
-
Your first HTML form
-
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
-
How to structure an HTML form
-
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
-
- -

What form widgets are available?

- -
-
The native form widgets
-
We now look at the functionality of the different form widgets in detail, looking at what options are available to collect different types of data.
-
- -

Validating and submitting form data

- -
-
Sending form data
-
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
-
Form data validation
-
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
-
- -

Advanced guides

- -
-
How to build custom form widgets
-
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
-
Sending forms through JavaScript
-
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)
-
HTML forms in legacy browsers
-
Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.
-
- -

Form styling guides

- -
-
Styling HTML forms
-
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
-
Advanced styling for HTML forms
-
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
-
Property compatibility table for form widgets
-
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.
-
- -

See also

- - diff --git "a/files/el/learn/html/forms/\316\265\317\200\316\271\316\272\317\215\317\201\317\211\317\203\316\267_\316\264\316\265\316\264\316\277\316\274\316\255\316\275\317\211\316\275_\317\206\317\214\317\201\316\274\316\261\317\202/index.html" "b/files/el/learn/html/forms/\316\265\317\200\316\271\316\272\317\215\317\201\317\211\317\203\316\267_\316\264\316\265\316\264\316\277\316\274\316\255\316\275\317\211\316\275_\317\206\317\214\317\201\316\274\316\261\317\202/index.html" deleted file mode 100644 index f4d9184454..0000000000 --- "a/files/el/learn/html/forms/\316\265\317\200\316\271\316\272\317\215\317\201\317\211\317\203\316\267_\316\264\316\265\316\264\316\277\316\274\316\255\316\275\317\211\316\275_\317\206\317\214\317\201\316\274\316\261\317\202/index.html" +++ /dev/null @@ -1,869 +0,0 @@ ---- -title: Επικύρωση δεδομένων φόρμας -slug: Learn/HTML/Forms/Επικύρωση_δεδομένων_φόρμας -translation_of: Learn/Forms/Form_validation ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}
- -

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

- - - - - - - - - - - - -
Προαπαιτούμενα:Γνώση όρων πληροφορικής, επαρκής κατανόηση των  τεχνολογιών HTML, CSS, και JavaScript.
Σκοπός:Η κατανόηση της σπουδαιότητας της επικύρωσης δεδομένων και πως γίνεται η εφαρμογή της.
- -

Τι είναι η επικύρωση δεδομένων φόρμας;

- -

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

- - - -

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

- -

Επιδίωξη είναι η εισαγωγή των δεδομένω να είναι όσο το δυνατόν ευκολότερη. Τότε γιατί επιμένουμε να επικυρώνουμε τα δεδομένα στις φόρμες; Για τους τρεις παρακάτω κυρίως λόγους:

- - - -

Different types of form validation

- -

There are two different types of form validation which you'll encounter on the web:

- - - -

In the real world, developers tend to use a combination of client-side and server-side validation.

- -

Using built-in form validation

- -

One of the features of HTML5 is the ability to validate most user data without relying on scripts. This is done by using validation attributes on form elements, which allow you to specify rules for a form input like whether a value needs to be filled in, the minimum and maximum length of the data, whether it needs to be a number, an email address, or something else, and a pattern that it must match. If the entered data follows all those rules, it is considered valid; if not, it is considered invalid.

- -

When an element is valid:

- - - -

When an element is invalid:

- - - -

Validation constraints on input elements — starting simple

- -

In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.

- -

Let's start with a simple example — an input that allows you to choose your favorite fruit out of a choice of banana or cherry. This involves a simple text {{HTMLElement("input")}} with a matching label, and a submit {{htmlelement("button")}}. You can find the source code on GitHub as fruit-start.html, and a live example below:

- - - -

{{EmbedLiveSample("Hidden_code", "100%", 50)}}

- -

To begin with, make a copy of fruit-start.html in a new directory on your hard drive.

- -

The required attribute

- -

The simplest HTML5 validation feature to use is the {{htmlattrxref("required", "input")}} attribute — if you want to make an input mandatory, you can mark the element using this attribute. When this attribute is set, the form won't submit (and will display an error message) when the input is empty (the input will also be considered invalid).

- -

Add a required attribute to your input, as shown below:

- -
<form>
-  <label for="choose">Would you prefer a banana or cherry?</label>
-  <input id="choose" name="i_like" required>
-  <button>Submit</button>
-</form>
- -

Also take note of the CSS included in the example file:

- -
input:invalid {
-  border: 2px dashed red;
-}
-
-input:valid {
-  border: 2px solid black;
-}
- -

This causes the input to have a bright red dashed border when it is invalid, and a more subtle black border when valid. Try out the new behaviour in the example below:

- -

{{EmbedLiveSample("The_required_attribute", "100%", 50)}}

- -

Validating against a regular expression

- -

Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a Regular Expression as its value. A regular expression (regex) is a pattern that can be used to match character combinations in text strings, so they are ideal for form validation (as well as variety of other uses in JavaScript). Regexs are quite complex and we do not intend to teach you them exhaustively in this article.

- -

Below are some examples to give you a basic idea of how they work:

- - - -

You can use numbers and other characters in these expressions too, such as:

- - - -

You can combine these in pretty much any way you want, specifying different parts one after the other:

- - - -

Anyway, let's implement an example — update your HTML to add a pattern attribute, like so:

- -
<form>
-  <label for="choose">Would you prefer a banana or a cherry?</label>
-  <input id="choose" name="i_like" required pattern="banana|cherry">
-  <button>Submit</button>
-</form>
- - - -

{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}

- -

In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".

- -

At this point, try changing the value inside the pattern attribute to equal some of the examples you saw earlier, and look at how that affects the values you can enter to make the input value valid. Try writing some of your own, and see how you get on! Try to make them fruit-related where possible, so your examples make sense!

- -
-

Note: Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the email type for example validates the inputted value against a regular expression matching a well-formed email address (or a comma-separated list of email addresses if it has the {{htmlattrxref("multiple","input")}} attribute). As a further example, fields with the url type automatically require a properly-formed URL.

-
- -
-

Note: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.

-
- -

Constraining the length of your entries

- -

All text fields created by ({{HTMLElement("input")}} or {{HTMLElement("textarea")}}) can be constrained in size using the {{htmlattrxref("minlength","input")}} and {{htmlattrxref("maxlength","input")}} attributes. A field is invalid if its value is shorter than the {{htmlattrxref("minlength","input")}} value or longer than the {{htmlattrxref("maxlength","input")}} value. Browsers often don't let the user type a longer value than expected into text fields anyway, but it is useful to have this fine-grained control available.

- -

For number fields (i.e. <input type="number">), the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes also provide a validation constraint. If the field's value is lower than the {{htmlattrxref("min","input")}} attribute or higher than the {{htmlattrxref("max","input")}} attribute, the field will be invalid.

- -

Let's look at another example. Create a new copy of the fruit-start.html file.

- -

Now delete the contents of the <body> element, and replace it with the following:

- -
<form>
-  <div>
-    <label for="choose">Would you prefer a banana or a cherry?</label>
-    <input id="choose" name="i_like" required minlength="6" maxlength="6">
-  </div>
-  <div>
-    <label for="number">How many would you like?</label>
-    <input type="number" id="number" name="amount" value="1" min="1" max="10">
-  </div>
-  <div>
-    <button>Submit</button>
-  </div>
-</form>
- - - - - -

Here is the example running live:

- -

{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}

- -
-

Note: <input type="number"> (and other types, like range) can also take a {{htmlattrxref("step", "input")}} attribute, which specifies what increment the value will go up or down by when the input controls are used (like the up and down number buttons).

-
- -

Full example

- -

Here is a full example to show off usage of HTML's built-in validation features:

- -
<form>
-  <p>
-    <fieldset>
-      <legend>Title<abbr title="This field is mandatory">*</abbr></legend>
-      <input type="radio" required name="title" id="r1" value="Mr"><label for="r1">Mr.</label>
-      <input type="radio" required name="title" id="r2" value="Ms"><label for="r2">Ms.</label>
-    </fieldset>
-  </p>
-  <p>
-    <label for="n1">How old are you?</label>
-    <!-- The pattern attribute can act as a fallback for browsers which
-         don't implement the number input type but support the pattern attribute.
-         Please note that browsers that support the pattern attribute will make it
-         fail silently when used with a number field.
-         Its usage here acts only as a fallback -->
-    <input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+">
-  </p>
-  <p>
-    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory">*</abbr></label>
-    <input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
-    <datalist id="l1">
-      <option>Banana</option>
-      <option>Cherry</option>
-      <option>Apple</option>
-      <option>Strawberry</option>
-      <option>Lemon</option>
-      <option>Orange</option>
-    </datalist>
-  </p>
-  <p>
-    <label for="t2">What's your e-mail?</label>
-    <input type="email" id="t2" name="email">
-  </p>
-  <p>
-    <label for="t3">Leave a short message</label>
-    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
-  </p>
-  <p>
-    <button>Submit</button>
-  </p>
-</form>
- -
body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-  margin: 0;
-  padding: 0 5px;
-}
-
-p > label {
-  display: block;
-}
-
-input[type=text],
-input[type=email],
-input[type=number],
-textarea,
-fieldset {
-/* required to properly style form
-   elements on WebKit based browsers */
-  -webkit-appearance: none;
-
-  width : 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-input:invalid {
-  box-shadow: 0 0 5px 1px red;
-}
-
-input:focus:invalid {
-  outline: none;
-}
- -

{{EmbedLiveSample("Full_example", "100%", 420)}}

- -

Customized error messages

- -

As seen in the examples above, each time the user tries to submit an invalid form, the browser displays an error message. The way this message is displayed depends on the browser.

- -

These automated messages have two drawbacks:

- - - - - - - - - - - - - - - - - - - - - - - - - -
French versions of feedback messages on an English page
BrowserRendering
Firefox 17 (Windows 7)Example of an error message with Firefox in French on an English page
Chrome 22 (Windows 7)Example of an error message with Chrome in French on an English page
Opera 12.10 (Mac OSX)Example of an error message with Opera in French on an English page
- -

To customize the appearance and text of these messages, you must use JavaScript; there is no way to do it using just HTML and CSS.

- -

HTML5 provides the constraint validation API to check and customize the state of a form element. Among other things, it's possible to change the text of the error message. Let's see a quick example:

- -
<form>
-  <label for="mail">I would like you to provide me an e-mail</label>
-  <input type="email" id="mail" name="mail">
-  <button>Submit</button>
-</form>
- -

In JavaScript, you call the setCustomValidity() method:

- -
var email = document.getElementById("mail");
-
-email.addEventListener("input", function (event) {
-  if (email.validity.typeMismatch) {
-    email.setCustomValidity("I expect an e-mail, darling!");
-  } else {
-    email.setCustomValidity("");
-  }
-});
- -

{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}

- -

Validating forms using JavaScript

- -

If you want to take control over the look and feel of native error messages, or if you want to deal with browsers that do not support HTML's built-in form validation, you must use JavaScript.

- -

The HTML5 constraint validation API

- -

More and more browsers now support the constraint validation API, and it's becoming reliable. This API consists of a set of methods and properties available on each form element.

- -

Constraint validation API properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDescription
validationMessageA localized message describing the validation constraints that the control does not satisfy (if any), or the empty string if the control is not a candidate for constraint validation (willValidate is false), or the element's value satisfies its constraints.
validityA {{domxref("ValidityState")}} object describing the validity state of the element.
validity.customErrorReturns true if the element has a custom error; false otherwise.
validity.patternMismatchReturns true if the element's value doesn't match the provided pattern; false otherwise.
-
- If it returns true, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.
validity.rangeOverflowReturns true if the element's value is higher than the provided maximum; false otherwise.
-
- If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} and CSS pseudo-class.
validity.rangeUnderflowReturns true if the element's value is lower than the provided minimum; false otherwise.
-
- If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.
validity.stepMismatchReturns true if the element's value doesn't fit the rules provided by the step attribute; otherwise false .
-
- If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.
validity.tooLongReturns true if the element's value is longer than the provided maximum length; else it wil be false
-
- If it returns true, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.
validity.typeMismatchReturns true if the element's value is not in the correct syntax; otherwise false.
-
- If it returns true, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.
validity.validReturns true if the element's value has no validity problems; false otherwise.
-
- If it returns true, the element will match the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.
validity.valueMissingReturns true if the element has no value but is a required field; false otherwise.
-
- If it returns true, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.
willValidateReturns true if the element will be validated when the form is submitted; false otherwise.
- -

Constraint validation API methods

- - - - - - - - - - - - - - - - - - -
MethodDescription
checkValidity()Returns true if the element's value has no validity problems; false otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.
setCustomValidity(message)Adds a custom error message to the element; if you set a custom error message, the element is considered to be invalid, and the specified error is displayed. This lets you use JavaScript code to establish a validation failure other than those offered by the standard constraint validation API. The message is shown to the user when reporting the problem.
-
- If the argument is the empty string, the custom error is cleared.
- -

For legacy browsers, it's possible to use a polyfill such as Hyperform to compensate for the lack of support for the constraint validation API. Since you're already using JavaScript, using a polyfill isn't an added burden to your Web site or Web application's design or implementation.

- -

Example using the constraint validation API

- -

Let's see how to use this API to build custom error messages. First, the HTML:

- -
<form novalidate>
-  <p>
-    <label for="mail">
-      <span>Please enter an email address:</span>
-      <input type="email" id="mail" name="mail">
-      <span class="error" aria-live="polite"></span>
-    </label>
-  </p>
-  <button>Submit</button>
-</form>
- -

This simple form uses the {{htmlattrxref("novalidate","form")}} attribute to turn off the browser's automatic validation; this lets our script take control over validation. However, this doesn't disable support for the constraint validation API nor the application of the CSS pseudo-class {{cssxref(":valid")}}, {{cssxref(":invalid")}}, {{cssxref(":in-range")}} and {{cssxref(":out-of-range")}} classes. That means that even though the browser doesn't automatically check the validity of the form before sending its data, you can still do it yourself and style the form accordingly.

- -

The aria-live attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.

- -
CSS
- -

This CSS styles our form and the error output to look more attractive.

- -
/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input[type=email]{
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input:invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus:invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

The following JavaScript code handles the custom error validation.

- -
// There are many ways to pick a DOM node; here we get the form itself and the email
-// input box, as well as the span element into which we will place the error message.
-
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-var error = document.querySelector('.error');
-
-email.addEventListener("input", function (event) {
-  // Each time the user types something, we check if the
-  // email field is valid.
-  if (email.validity.valid) {
-    // In case there is an error message visible, if the field
-    // is valid, we remove the error message.
-    error.innerHTML = ""; // Reset the content of the message
-    error.className = "error"; // Reset the visual state of the message
-  }
-}, false);
-form.addEventListener("submit", function (event) {
-  // Each time the user tries to send the data, we check
-  // if the email field is valid.
-  if (!email.validity.valid) {
-
-    // If the field is not valid, we display a custom
-    // error message.
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-    // And we prevent the form from being sent by canceling the event
-    event.preventDefault();
-  }
-}, false);
- -

Here is the live result:

- -

{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}

- -

The constraint validation API gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do just with HTML and CSS alone.

- -

Validating forms without a built-in API

- -

Sometimes, such as with legacy browsers or custom widgets, you will not be able to (or will not want to) use the constraint validation API. In that case, you're still able to use JavaScript to validate your form. Validating a form is more a question of user interface than real data validation.

- -

To validate a form, you have to ask yourself a few questions:

- -
-
What kind of validation should I perform?
-
You need to determine how to validate your data: string operations, type conversion, regular expressions, etc. It's up to you. Just remember that form data is always text and is always provided to your script as strings.
-
What should I do if the form does not validate?
-
This is clearly a UI matter. You have to decide how the form will behave: Does the form send the data anyway? Should you highlight the fields which are in error? Should you display error messages?
-
How can I help the user to correct invalid data?
-
In order to reduce the user's frustration, it's very important to provide as much helpful information as possible in order to guide them in correcting their inputs. You should offer up-front suggestions so they know what's expected, as well as clear error messages. If you want to dig into form validation UI requirements, there are some useful articles you should read: - -
-
- -

Example that doesn't use the constraint validation API

- -

In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:

- -
<form>
-  <p>
-    <label for="mail">
-        <span>Please enter an email address:</span>
-        <input type="text" class="mail" id="mail" name="mail">
-        <span class="error" aria-live="polite"></span>
-    </label>
-  <p>
-  <!-- Some legacy browsers need to have the `type` attribute
-       explicitly set to `submit` on the `button`element -->
-  <button type="submit">Submit</button>
-</form>
- -

As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that ARIA is an independent specification that's not specifically related to HTML5.

- -
CSS
- -

Similarly, the CSS doesn't need to change very much; we just turn the {{cssxref(":invalid")}} CSS pseudo-class into a real class and avoid using the attribute selector that does not work on Internet Explorer 6.

- -
/* This is just to make the example nicer */
-body {
-  font: 1em sans-serif;
-  padding: 0;
-  margin : 0;
-}
-
-form {
-  max-width: 200px;
-}
-
-p * {
-  display: block;
-}
-
-input.mail {
-  -webkit-appearance: none;
-
-  width: 100%;
-  border: 1px solid #333;
-  margin: 0;
-
-  font-family: inherit;
-  font-size: 90%;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-/* This is our style for the invalid fields */
-input.invalid{
-  border-color: #900;
-  background-color: #FDD;
-}
-
-input:focus.invalid {
-  outline: none;
-}
-
-/* This is the style of our error messages */
-.error {
-  width  : 100%;
-  padding: 0;
-
-  font-size: 80%;
-  color: white;
-  background-color: #900;
-  border-radius: 0 0 5px 5px;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.error.active {
-  padding: 0.3em;
-}
- -
JavaScript
- -

The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.

- -
// There are fewer ways to pick a DOM node with legacy browsers
-var form  = document.getElementsByTagName('form')[0];
-var email = document.getElementById('mail');
-
-// The following is a trick to reach the next sibling Element node in the DOM
-// This is dangerous because you can easily build an infinite loop.
-// In modern browsers, you should prefer using element.nextElementSibling
-var error = email;
-while ((error = error.nextSibling).nodeType != 1);
-
-// As per the HTML5 Specification
-var emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
-
-// Many legacy browsers do not support the addEventListener method.
-// Here is a simple way to handle this; it's far from the only one.
-function addEvent(element, event, callback) {
-  var previousEventCallBack = element["on"+event];
-  element["on"+event] = function (e) {
-    var output = callback(e);
-
-    // A callback that returns `false` stops the callback chain
-    // and interrupts the execution of the event callback.
-    if (output === false) return false;
-
-    if (typeof previousEventCallBack === 'function') {
-      output = previousEventCallBack(e);
-      if(output === false) return false;
-    }
-  }
-};
-
-// Now we can rebuild our validation constraint
-// Because we do not rely on CSS pseudo-class, we have to
-// explicitly set the valid/invalid class on our email field
-addEvent(window, "load", function () {
-  // Here, we test if the field is empty (remember, the field is not required)
-  // If it is not, we check if its content is a well-formed e-mail address.
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  email.className = test ? "valid" : "invalid";
-});
-
-// This defines what happens when the user types in the field
-addEvent(email, "input", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-  if (test) {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  } else {
-    email.className = "invalid";
-  }
-});
-
-// This defines what happens when the user tries to submit the data
-addEvent(form, "submit", function () {
-  var test = email.value.length === 0 || emailRegExp.test(email.value);
-
-  if (!test) {
-    email.className = "invalid";
-    error.innerHTML = "I expect an e-mail, darling!";
-    error.className = "error active";
-
-    // Some legacy browsers do not support the event.preventDefault() method
-    return false;
-  } else {
-    email.className = "valid";
-    error.innerHTML = "";
-    error.className = "error";
-  }
-});
- -

The result looks like this:

- -

{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}

- -

As you can see, it's not that hard to build a validation system on your own. The difficult part is to make it generic enough to use it both cross-platform and on any form you might create. There are many libraries available to perform form validation; you shouldn't hesitate to use them. Here are a few examples:

- - - -

Remote validation

- -

In some cases it can be useful to perform some remote validation. This kind of validation is necessary when the data entered by the user is tied to additional data stored on the server side of your application. One use case for this is registration forms, where you ask for a user name. To avoid duplication, it's smarter to perform an AJAX request to check the availability of the user name rather than asking the user to send the data, then send back the form with an error.

- -

Performing such a validation requires taking a few precautions:

- - - -

Conclusion

- -

Form validation does not require complex JavaScript, but it does require thinking carefully about the user. Always remember to help your user to correct the data they provide. To that end, be sure to:

- - - -

{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}

- -

In this module

- - diff --git a/files/el/learn/javascript/first_steps/index.html b/files/el/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..f6ecf9065d --- /dev/null +++ b/files/el/learn/javascript/first_steps/index.html @@ -0,0 +1,66 @@ +--- +title: Τα Πρώτα Βήματα στη JavaScript +slug: Learn/JavaScript/Πρώτα_βήματα +tags: + - JavaScript + - Άρθρο + - Αξιολόγηση + - Αριθμοί + - Αρχάριος + - Ενότητα + - Μεταβλητές + - Οδηγός + - Πίνακες + - Συμβολοσειρές + - μαθηματικά + - προγραμματισμός + - τελεστές +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

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

+ +

Προϋποθέσεις

+ +

Πριν ξεκινήσετε αυτήν την ενότητα, δεν χρειάζεστε προηγούμενη γνώση της JavaScript, αλλά θα πρέπει να έχετε κάποια εξοικείωση με την HTML και το CSS. Συνιστάται να εργαστείτε μέσω των παρακάτω ενοτήτων πριν ξεκινήσετε με τη JavaScript:

+ + + +
+

Σημείωση: Εάν εργάζεστε σε έναν υπολογιστή / ταμπλέτα / άλλη συσκευή όπου δεν έχετε τη δυνατότητα να δημιουργήσετε τα δικά σας αρχεία, μπορείτε να δοκιμάσετε (τα περισσότερα) παραδείγματα κώδικα σε ένα online πρόγραμμα κωδικοποίησης όπως το JSBin ή το Thimble.

+
+ +

Οδηγοί

+ +
+
Τί είναι η JavaScript;
+
Καλώς ορίσατε στο μάθημα JavaScript για αρχάριους του MDN! Σε αυτό το πρώτο άρθρο θα εξετάσουμε τη JavaScript από ένα υψηλό επίπεδο, απαντώντας σε ερωτήσεις όπως "τι είναι;" και "τι κάνει;" και να βεβαιωθείτε ότι είστε άνετοι με το σκοπό της JavaScript.
+
Μια πρώτη ματιά στη JavaScript
+
Τώρα που έχετε μάθει μερικά πράγματα σχετικά με τη θεωρία της JavaScript και τι μπορείτε να κάνετε με αυτή, θα σας δώσουμε μια σειρά μαθημάτων με τα βασικά χαρακτηριστικά της JavaScript μέσω ενός πλήρως πρακτικού οδηγού. Εδώ θα δημιουργήσετε ένα απλό παιχνίδι "Μάντεψε τον αριθμό", βήμα προς βήμα.
+
Τι πήγε λάθος; Αντιμετώπιση προβλημάτων στη JavaScript
+
Όταν δημιουργήσατε το παιχνίδι "Μάντεψε τον αριθμό" στο προηγούμενο άρθρο, μπορεί να διαπιστώσατε ότι δεν λειτούργησε. Μην φοβηθείτε - αυτό το άρθρο στοχεύει να σας εξοικονομήσει από το βγάλσιμο των μαλλιών σας πάνω από τέτοια προβλήματα, παρέχοντάς σας μερικές απλές συμβουλές για το πώς μπορείτε να βρείτε και να διορθώσετε σφάλματα σε προγράμματα JavaScript.
+
Αποθήκευση των πληροφοριών που χρειάζεστε - Μεταβλητές
+
Αφού διαβάσατε τα τελευταία άρθρα, πρέπει τώρα να είστε σε θέση να γνωρίζετε τι είναι η JavaScript, τι μπορεί να κάνει για εσάς, πώς την χρησιμοποιείτε παράλληλα με άλλες τεχνολογίες ιστού και ποια είναι τα βασικά χαρακτηριστικά της από ένα υψηλό επίπεδο. Σε αυτό το άρθρο θα φτάσουμε στα πραγματικά βασικά, εξετάζοντας πώς να δουλέψουμε με τα πιο βασικά δομικά στοιχεία της JavaScript - Μεταβλητές.
+
Βασικά μαθηματικά σε JavaScript - αριθμοί και τελεστές 
+
Σε αυτό το σημείο του μαθήματος συζητάμε για τα μαθηματικά στη JavaScript - πώς μπορούμε να συνδυάσουμε τους τελεστές και άλλα χαρακτηριστικά για να χειριστούμε επιτυχώς τους αριθμούς.
+
Χειρισμός κειμένου - συμβολοσειρές στη JavaScript
+
Στη συνέχεια θα στρέψουμε την προσοχή μας σε συμβολοσειρές - έτσι λέγονται κομμάτια κειμένου στον προγραμματισμό. Σε αυτό το άρθρο θα εξετάσουμε όλα τα συνηθισμένα πράγματα που πρέπει να γνωρίζετε σχετικά με τις συμβολοσειρές κατά την εκμάθηση της JavaScript, όπως η δημιουργία συμβολοσειρών, η διαφυγή εισαγωγικών σε συμβολοσειρές και η σύνδεσή τους μαζί.
+
Χρήσιμες μέθοδοι συμβολοσειρών
+
Τώρα εξετάσαμε τα βασικά στοιχεία των συμβολοσειρών, ας ανεβάσουμε ταχύτητα και ας αρχίσουμε να σκεφτόμαστε τι χρήσιμες λειτουργίες μπορούμε να κάνουμε σε συμβολοσειρές με ενσωματωμένες μεθόδους, όπως η εύρεση του μήκους μιας συμβολοσειράς κειμένου, η ένωση και η διαίρεση των συμβολοσειρών, αντικαθιστώντας ένα χαρακτήρα σε μια συμβολοσειρά με έναν άλλο και πολλά άλλα.
+
Πίνακες
+
Στο τελευταίο άρθρο αυτής της ενότητας, θα εξετάσουμε τους πίνακες - ένας τακτικός τρόπος αποθήκευσης μιας λίστας στοιχείων δεδομένων κάτω από ένα ενιαίο όνομα μεταβλητής. Εδώ εξετάζουμε γιατί αυτό είναι χρήσιμο, στη συνέχεια θα διερευνήσουμε πώς να δημιουργήσουμε ένα πίνακα, να ανακτήσουμε, να προσθέσουμε και να αφαιρέσουμε στοιχεία που είναι αποθηκευμένα σε έναν πίνακα και πολλά άλλα.
+
+ +

Αξιολόγηση

+ +

Η παρακάτω αξιολόγηση θα ελέγξει την κατανόησή σας στα βασικά της JavaScript που καλύπτονται στους παραπάνω οδηγούς.

+ +
+
Ανόητη γεννήτρια ιστοριών 
+
Σε αυτήν την αξιολόγηση, θα είστε επιφορτισμένοι με τη χρήση κάποιων από τις γνώσεις που έχετε πάρει στα άρθρα αυτής της ενότητας και την εφαρμογή της στη δημιουργία μιας διασκεδαστικής εφαρμογής που δημιουργεί τυχαίες ανόητες ιστορίες. Καλα να περνατε!
+
diff --git "a/files/el/learn/javascript/\317\200\317\201\317\216\317\204\316\261_\316\262\316\256\316\274\316\261\317\204\316\261/index.html" "b/files/el/learn/javascript/\317\200\317\201\317\216\317\204\316\261_\316\262\316\256\316\274\316\261\317\204\316\261/index.html" deleted file mode 100644 index f6ecf9065d..0000000000 --- "a/files/el/learn/javascript/\317\200\317\201\317\216\317\204\316\261_\316\262\316\256\316\274\316\261\317\204\316\261/index.html" +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Τα Πρώτα Βήματα στη JavaScript -slug: Learn/JavaScript/Πρώτα_βήματα -tags: - - JavaScript - - Άρθρο - - Αξιολόγηση - - Αριθμοί - - Αρχάριος - - Ενότητα - - Μεταβλητές - - Οδηγός - - Πίνακες - - Συμβολοσειρές - - μαθηματικά - - προγραμματισμός - - τελεστές -translation_of: Learn/JavaScript/First_steps ---- -
{{LearnSidebar}}
- -

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

- -

Προϋποθέσεις

- -

Πριν ξεκινήσετε αυτήν την ενότητα, δεν χρειάζεστε προηγούμενη γνώση της JavaScript, αλλά θα πρέπει να έχετε κάποια εξοικείωση με την HTML και το CSS. Συνιστάται να εργαστείτε μέσω των παρακάτω ενοτήτων πριν ξεκινήσετε με τη JavaScript:

- - - -
-

Σημείωση: Εάν εργάζεστε σε έναν υπολογιστή / ταμπλέτα / άλλη συσκευή όπου δεν έχετε τη δυνατότητα να δημιουργήσετε τα δικά σας αρχεία, μπορείτε να δοκιμάσετε (τα περισσότερα) παραδείγματα κώδικα σε ένα online πρόγραμμα κωδικοποίησης όπως το JSBin ή το Thimble.

-
- -

Οδηγοί

- -
-
Τί είναι η JavaScript;
-
Καλώς ορίσατε στο μάθημα JavaScript για αρχάριους του MDN! Σε αυτό το πρώτο άρθρο θα εξετάσουμε τη JavaScript από ένα υψηλό επίπεδο, απαντώντας σε ερωτήσεις όπως "τι είναι;" και "τι κάνει;" και να βεβαιωθείτε ότι είστε άνετοι με το σκοπό της JavaScript.
-
Μια πρώτη ματιά στη JavaScript
-
Τώρα που έχετε μάθει μερικά πράγματα σχετικά με τη θεωρία της JavaScript και τι μπορείτε να κάνετε με αυτή, θα σας δώσουμε μια σειρά μαθημάτων με τα βασικά χαρακτηριστικά της JavaScript μέσω ενός πλήρως πρακτικού οδηγού. Εδώ θα δημιουργήσετε ένα απλό παιχνίδι "Μάντεψε τον αριθμό", βήμα προς βήμα.
-
Τι πήγε λάθος; Αντιμετώπιση προβλημάτων στη JavaScript
-
Όταν δημιουργήσατε το παιχνίδι "Μάντεψε τον αριθμό" στο προηγούμενο άρθρο, μπορεί να διαπιστώσατε ότι δεν λειτούργησε. Μην φοβηθείτε - αυτό το άρθρο στοχεύει να σας εξοικονομήσει από το βγάλσιμο των μαλλιών σας πάνω από τέτοια προβλήματα, παρέχοντάς σας μερικές απλές συμβουλές για το πώς μπορείτε να βρείτε και να διορθώσετε σφάλματα σε προγράμματα JavaScript.
-
Αποθήκευση των πληροφοριών που χρειάζεστε - Μεταβλητές
-
Αφού διαβάσατε τα τελευταία άρθρα, πρέπει τώρα να είστε σε θέση να γνωρίζετε τι είναι η JavaScript, τι μπορεί να κάνει για εσάς, πώς την χρησιμοποιείτε παράλληλα με άλλες τεχνολογίες ιστού και ποια είναι τα βασικά χαρακτηριστικά της από ένα υψηλό επίπεδο. Σε αυτό το άρθρο θα φτάσουμε στα πραγματικά βασικά, εξετάζοντας πώς να δουλέψουμε με τα πιο βασικά δομικά στοιχεία της JavaScript - Μεταβλητές.
-
Βασικά μαθηματικά σε JavaScript - αριθμοί και τελεστές 
-
Σε αυτό το σημείο του μαθήματος συζητάμε για τα μαθηματικά στη JavaScript - πώς μπορούμε να συνδυάσουμε τους τελεστές και άλλα χαρακτηριστικά για να χειριστούμε επιτυχώς τους αριθμούς.
-
Χειρισμός κειμένου - συμβολοσειρές στη JavaScript
-
Στη συνέχεια θα στρέψουμε την προσοχή μας σε συμβολοσειρές - έτσι λέγονται κομμάτια κειμένου στον προγραμματισμό. Σε αυτό το άρθρο θα εξετάσουμε όλα τα συνηθισμένα πράγματα που πρέπει να γνωρίζετε σχετικά με τις συμβολοσειρές κατά την εκμάθηση της JavaScript, όπως η δημιουργία συμβολοσειρών, η διαφυγή εισαγωγικών σε συμβολοσειρές και η σύνδεσή τους μαζί.
-
Χρήσιμες μέθοδοι συμβολοσειρών
-
Τώρα εξετάσαμε τα βασικά στοιχεία των συμβολοσειρών, ας ανεβάσουμε ταχύτητα και ας αρχίσουμε να σκεφτόμαστε τι χρήσιμες λειτουργίες μπορούμε να κάνουμε σε συμβολοσειρές με ενσωματωμένες μεθόδους, όπως η εύρεση του μήκους μιας συμβολοσειράς κειμένου, η ένωση και η διαίρεση των συμβολοσειρών, αντικαθιστώντας ένα χαρακτήρα σε μια συμβολοσειρά με έναν άλλο και πολλά άλλα.
-
Πίνακες
-
Στο τελευταίο άρθρο αυτής της ενότητας, θα εξετάσουμε τους πίνακες - ένας τακτικός τρόπος αποθήκευσης μιας λίστας στοιχείων δεδομένων κάτω από ένα ενιαίο όνομα μεταβλητής. Εδώ εξετάζουμε γιατί αυτό είναι χρήσιμο, στη συνέχεια θα διερευνήσουμε πώς να δημιουργήσουμε ένα πίνακα, να ανακτήσουμε, να προσθέσουμε και να αφαιρέσουμε στοιχεία που είναι αποθηκευμένα σε έναν πίνακα και πολλά άλλα.
-
- -

Αξιολόγηση

- -

Η παρακάτω αξιολόγηση θα ελέγξει την κατανόησή σας στα βασικά της JavaScript που καλύπτονται στους παραπάνω οδηγούς.

- -
-
Ανόητη γεννήτρια ιστοριών 
-
Σε αυτήν την αξιολόγηση, θα είστε επιφορτισμένοι με τη χρήση κάποιων από τις γνώσεις που έχετε πάρει στα άρθρα αυτής της ενότητας και την εφαρμογή της στη δημιουργία μιας διασκεδαστικής εφαρμογής που δημιουργεί τυχαίες ανόητες ιστορίες. Καλα να περνατε!
-
diff --git a/files/el/mdn/at_ten/index.html b/files/el/mdn/at_ten/index.html new file mode 100644 index 0000000000..37882489ed --- /dev/null +++ b/files/el/mdn/at_ten/index.html @@ -0,0 +1,37 @@ +--- +title: MDN at 10 +slug: MDN_at_ten +translation_of: MDN_at_ten +--- +

Celebrate 10 years of documenting your Web.

+ +
+
+

The history of MDN

+ +

In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.

+ +

Learn more about the history

+ + +

Contributing to MDN

+ +

For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.

+ +

Learn more about contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ + + +
    +
  1. MDN at 10
    2. +
  2. The history of MDN
    3. +
  3. Contributing to MDN
    4. +
+
diff --git a/files/el/mdn/contribute/howto/dhmiourgia_logariasmou_mdn/index.html b/files/el/mdn/contribute/howto/dhmiourgia_logariasmou_mdn/index.html deleted file mode 100644 index e01eefbff2..0000000000 --- a/files/el/mdn/contribute/howto/dhmiourgia_logariasmou_mdn/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Δημιουργία λογαριασμού MDN -slug: MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN -tags: - - MDN Meta - - Αρχάριος - - Οδηγός - - Τεκμηρίωση -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}

Για να επεξεργαστείτε περιεχόμενο στο MDN, θα χρειαστείτε ένα προφίλ MDN. Δεν χρειάζεστε προφίλ αν θέλετε μόνο να διαβάσετε και να αναζητήσετε τα έγγραφα του MDN. Αυτός ο οδηγός θα σάς βοηθήσετε να ρυθμίσετε το προφίλ MDN σας.

- -
-
-

Γιατί το MDN απαιτεί τη διεύθυνση email μου;
-
- Η διεύθυνση email σας χρησιμοποιείται για την ανάκτηση του λογαριασμού σας, αλλά και από τους διαχειριστές του MDN, αν χρειαστεί να επικοινωνήσουν μαζί σας σχετικά με το λογαριασμό σας ή τη δραστηριότητά σας στην ιστοσελίδα.

- -

Επιπλέον, μπορείτε να ενεργοποιήσετε τις ειδοποιήσεις (όπως όταν αλλάζουν ορισμένες σελίδες) και τα μηνύματα (για παράδειγμα, αν επιλέξετε να συμμετάσχετε στην ομάδα δοκιμών beta μας, ενδέχεται να λαμβάνετε emails σχετικά με τις νέες λειτουργίες που απαιτούν δοκιμή).
-
- Η διεύθυνση email σας δεν εμφανίζεται ποτέ στο MDN και θα χρησιμοποιηθεί σύμφωνα με την πολιτική απορρήτου μας.

- -
Αν συνδεθείτε στο MDN μέσω GitHub και χρησιμοποιείτε μια διεύθυνση email "noreply" στο GitHub, δεν θα λαμβάνετε μηνύματα (αλλά και ειδοποιήσεις όταν κάνετε εγγραφή σε σελίδες) από το MDN.
-
-
- -
    -
  1. Στο πάνω μέρος κάθε σελίδας στο MDN, θα βρείτε το κουμπί Σύνδεση. Μετακινήστε τον κέρσορά σας σε αυτό (ή πατήστε το, αν χρησιμοποιείτε κινητή συσκευή) για να εμφανιστεί μια λίστα με τις υπηρεσίες πιστοποίησης που υποστηρίζονται για τη σύνδεση στο MDN.
    2. -
  2. Επιλέξτε μια υπηρεσία με την οποία θα συνδεθείτε. Προς το παρόν, μόνο το GitHub είναι διαθέσιμο. Σημειώστε ότι αν επιλέξετε το GitHub, θα συμπεριληφθεί ένας σύνδεσμος για το προφίλ GitHub σας στη δημόσια σελίδα του προφίλ MDN σας.
    3. -
  3. Ακολουθήστε τις υποδείξεις του GitHub για να συνδέσετε το λογαριασμό σας με το MDN.
    4. -
  4. Μόλις η υπηρεσία πιστοποίησης σάς επιστρέψει στο MDN, θα σάς ζητηθεί να εισαγάγετε ένα όνομα χρήστη και μια διεύθυνση email. Το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας. Μην χρησιμοποιείτε τη διεύθυνση email σας ως το όνομα χρήστη σας.
    5. -
  5. Κάντε κλικ στο Δημιουργία προφίλ MDN.
    6. -
  6. Αν η διεύθυνση email που καθορίσατε στο βήμα 4 δεν είναι ίδια με αυτή που χρησιμοποιείτε με την υπηρεσία πιστοποίησης, παρακαλούμε ελέγξτε τα emails σας και κάντε κλικ στο σύνδεσμο του email επιβεβαίωσης που σάς αποστείλαμε.
    7. -
- -

Αυτό ήταν! Έχετε αποκτήσει ένα λογαριασμό MDN και μπορείτε να αρχίσετε αμέσως την επεξεργασία σελίδων!

- -

Μπορείτε να κάνετε κλικ στο όνομά σας στο πάνω μέρος οποιασδήποτε σελίδας του MDN για να δείτε το δημόσιο προφίλ σας. Από εδώ, μπορείτε να κάνετε κλικ στο Επεξεργασία για να κάνετε αλλαγές ή προσθήκες στο προφίλ σας.

- -
-

Τα νέα ονόματα χρήστη δεν μπορούν να περιέχουν κενά ή το χαρακτήρα "@". Θυμηθείτε ότι το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας.

-
diff --git a/files/el/mdn_at_ten/index.html b/files/el/mdn_at_ten/index.html deleted file mode 100644 index 37882489ed..0000000000 --- a/files/el/mdn_at_ten/index.html +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: MDN at 10 -slug: MDN_at_ten -translation_of: MDN_at_ten ---- -

Celebrate 10 years of documenting your Web.

- -
-
-

The history of MDN

- -

In early 2005, a small team of idealists set out to create a new, free, community-built online resource for all Web developers. Their brilliant but offbeat idea grew into today’s Mozilla Developer Network—the premier resource for all open Web technologies. Ten years later, our global community is bigger than ever, and together we’re still creating documentation, sample code and learning resources for all open Web technologies, including CSS, HTML, JavaScript and everything else that makes the open Web as powerful as it is.

- -

Learn more about the history

- - -

Contributing to MDN

- -

For ten years, the MDN community has been documenting the open Web. From fixing simple typos to writing entire suites of an entirely new API, everyone has something to offer and no contribution is too large or too small. We have over 90,000 pages of content that have been written or translated by members of our outstanding community of Mozillians. You can become one of them.

- -

Learn more about contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- - - -
    -
  1. MDN at 10
    2. -
  2. The history of MDN
    3. -
  3. Contributing to MDN
    4. -
-
diff --git a/files/el/mozilla/add-ons/index.html b/files/el/mozilla/add-ons/index.html new file mode 100644 index 0000000000..bbc540795f --- /dev/null +++ b/files/el/mozilla/add-ons/index.html @@ -0,0 +1,112 @@ +--- +title: Πρόσθετα +slug: Mozilla/Πρόσθετα +translation_of: Mozilla/Add-ons +--- +
Τροποποιήστε και επεκτείνετε εφαρμογές της Mozilla
+ +

Add-ons add new functionality to Gecko-based applications such as Firefox, SeaMonkey and Thunderbird. There are two main types of add-on: Extensions add new features to the application, while Themes modify the application's user interface.

+ +

For both extensions and themes, Mozilla operates a repository at addons.mozilla.org, also known as AMO. When you submit add-ons to AMO they are reviewed, and after passing review they are made available to users. You don't have to submit add-ons to AMO, but if you do, users can take confidence in the fact that they have been reviewed, and you can benefit from AMO's visibility as a source for useful add-ons.

+ +

Add-ons can greatly affect the behaviour of the application that hosts them. We've developed a set of guidelines to help ensure that they provide a good experience to users. These guidelines apply for all sorts of add-ons, whether they are hosted at addons.mozilla.org or not.

+ +
+

Επεκτάσεις

+ +

Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add new features to the browser, such as a different way to manage tabs, and they can modify web content to improve the usability or security of particular websites.

+ +

There are three different techniques you can use to build extensions: Add-on SDK-based extensions, manually bootstrapped restartless extensions, and overlay extensions.

+ + + +

Αν μπορείτε, προτείνεται η χρήση του Add-on SDK, το οποίο χρησιμοποιεί το μηχανισμό των μη επανεκκινήσιμων επεκτάσεων αλλά απλοποιεί συγκεκριμένες εργασίες και καθαρίζεται αργότερα από μόνο του. Αν το Add-on SDK δεν ικανοποιεί τις ανάγκες σας, εκτελέστε μια χειροκίνητη, μη επανεκκινήσιμη επέκταση. Οι επεκτάσεις επικάλυψης είναι κυρίως απαρχαιωμένες τώρα, αν και υπάρχουν πολλές  εκεί έξω.

+ +

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

+ +
+
+

Καλές πρακτικές

+ +

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

+ +
+
Επίδοση
+
Εξασφαλίστε ότι η επέκτασή σας είναι γρήγορη, αποκριτική και αποδοτική με τη μνήμη.
+
Ασφάλεια
+
Εξασφαλίστε ότι η επέκταση σας δεν εκτέθει το χρήστη σε κακόβουλες ιστοσελίδες.
+
Πρωτόκολλο
+
Εξασφαλίστε ότι η επέκτασή σας λειτυοργεί αρμονικά με τις άλλες.
+
+
+ +
+

Application-specific

+ +

Most of the documentation assumes you're developing for Firefox Desktop. If you're developing for some other Gecko-based application, there are major differences you need to know about.

+ +
+
Thunderbird
+
Developing extensions for the Thunderbird mail client.
+
Firefox για Android
+
Developing extensions for Firefox for Android.
+
SeaMonkey
+
Developing extensions for the SeaMonkey software suite.
+
+
+
+ +
+

Θέματα

+ +

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

+ +
+
+

Τα Ελαφρά θέματα είναι πολύ πιο απλά στην υλοποίηση απ' ότι τα πλήρη θέματα, αλλά παρέχουν πολύ περιορισμένη εξατομίκευση.

+
+ +
+

Με τα πλήρη θέματα μπορείτε να κάνετε πολύ βαθύτερες τροποποιήσεις στο UI της εφαρμογής. Η τεκμηρίωση για τα πλήρη θέματα είναι ξεπερασμένη, αλλά συνδέεται με την εδώ σαν μια πιθανή βάση για ενημερωμένη τεκμηρίωση

+
+
+ +

Άλλοι τύποι προσθέτων

+ +

Τα πρόσθετα μηχανών αναζήτησης είναι ένας απλός και πολύ συγκεκριμένος τύπος προσθέτων: προσθέτουν νέες μηχανές αναζήτησης στη γραμμή αναζήτησης του περιηγητή.

+ +

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

+ + + +
    +
  1. Overlay extensions
    2. +
  2. Restartless extensions
    3. +
  3. Add-on SDK
    4. +
  4. Extension good practices +
      +
    1. Performance
      2. +
    2. Security
      3. +
    3. Etiquette
      4. +
    +
    5. +
  5. Themes +
      +
    1. Lightweight themes
      2. +
    2. Complete themes
      3. +
    +
    6. +
  6. Publishing add-ons +
      +
    1. addons.mozilla.org
      2. +
    2. Add-on guidelines
      3. +
    +
    7. +
diff --git "a/files/el/mozilla/\317\200\317\201\317\214\317\203\316\270\316\265\317\204\316\261/index.html" "b/files/el/mozilla/\317\200\317\201\317\214\317\203\316\270\316\265\317\204\316\261/index.html" deleted file mode 100644 index bbc540795f..0000000000 --- "a/files/el/mozilla/\317\200\317\201\317\214\317\203\316\270\316\265\317\204\316\261/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Πρόσθετα -slug: Mozilla/Πρόσθετα -translation_of: Mozilla/Add-ons ---- -
Τροποποιήστε και επεκτείνετε εφαρμογές της Mozilla
- -

Add-ons add new functionality to Gecko-based applications such as Firefox, SeaMonkey and Thunderbird. There are two main types of add-on: Extensions add new features to the application, while Themes modify the application's user interface.

- -

For both extensions and themes, Mozilla operates a repository at addons.mozilla.org, also known as AMO. When you submit add-ons to AMO they are reviewed, and after passing review they are made available to users. You don't have to submit add-ons to AMO, but if you do, users can take confidence in the fact that they have been reviewed, and you can benefit from AMO's visibility as a source for useful add-ons.

- -

Add-ons can greatly affect the behaviour of the application that hosts them. We've developed a set of guidelines to help ensure that they provide a good experience to users. These guidelines apply for all sorts of add-ons, whether they are hosted at addons.mozilla.org or not.

- -
-

Επεκτάσεις

- -

Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add new features to the browser, such as a different way to manage tabs, and they can modify web content to improve the usability or security of particular websites.

- -

There are three different techniques you can use to build extensions: Add-on SDK-based extensions, manually bootstrapped restartless extensions, and overlay extensions.

- - - -

Αν μπορείτε, προτείνεται η χρήση του Add-on SDK, το οποίο χρησιμοποιεί το μηχανισμό των μη επανεκκινήσιμων επεκτάσεων αλλά απλοποιεί συγκεκριμένες εργασίες και καθαρίζεται αργότερα από μόνο του. Αν το Add-on SDK δεν ικανοποιεί τις ανάγκες σας, εκτελέστε μια χειροκίνητη, μη επανεκκινήσιμη επέκταση. Οι επεκτάσεις επικάλυψης είναι κυρίως απαρχαιωμένες τώρα, αν και υπάρχουν πολλές  εκεί έξω.

- -

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

- -
-
-

Καλές πρακτικές

- -

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

- -
-
Επίδοση
-
Εξασφαλίστε ότι η επέκτασή σας είναι γρήγορη, αποκριτική και αποδοτική με τη μνήμη.
-
Ασφάλεια
-
Εξασφαλίστε ότι η επέκταση σας δεν εκτέθει το χρήστη σε κακόβουλες ιστοσελίδες.
-
Πρωτόκολλο
-
Εξασφαλίστε ότι η επέκτασή σας λειτυοργεί αρμονικά με τις άλλες.
-
-
- -
-

Application-specific

- -

Most of the documentation assumes you're developing for Firefox Desktop. If you're developing for some other Gecko-based application, there are major differences you need to know about.

- -
-
Thunderbird
-
Developing extensions for the Thunderbird mail client.
-
Firefox για Android
-
Developing extensions for Firefox for Android.
-
SeaMonkey
-
Developing extensions for the SeaMonkey software suite.
-
-
-
- -
-

Θέματα

- -

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

- -
-
-

Τα Ελαφρά θέματα είναι πολύ πιο απλά στην υλοποίηση απ' ότι τα πλήρη θέματα, αλλά παρέχουν πολύ περιορισμένη εξατομίκευση.

-
- -
-

Με τα πλήρη θέματα μπορείτε να κάνετε πολύ βαθύτερες τροποποιήσεις στο UI της εφαρμογής. Η τεκμηρίωση για τα πλήρη θέματα είναι ξεπερασμένη, αλλά συνδέεται με την εδώ σαν μια πιθανή βάση για ενημερωμένη τεκμηρίωση

-
-
- -

Άλλοι τύποι προσθέτων

- -

Τα πρόσθετα μηχανών αναζήτησης είναι ένας απλός και πολύ συγκεκριμένος τύπος προσθέτων: προσθέτουν νέες μηχανές αναζήτησης στη γραμμή αναζήτησης του περιηγητή.

- -

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

- - - -
    -
  1. Overlay extensions
    2. -
  2. Restartless extensions
    3. -
  3. Add-on SDK
    4. -
  4. Extension good practices -
      -
    1. Performance
      2. -
    2. Security
      3. -
    3. Etiquette
      4. -
    -
    5. -
  5. Themes -
      -
    1. Lightweight themes
      2. -
    2. Complete themes
      3. -
    -
    6. -
  6. Publishing add-ons -
      -
    1. addons.mozilla.org
      2. -
    2. Add-on guidelines
      3. -
    -
    7. -
diff --git a/files/el/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/el/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..e01eefbff2 --- /dev/null +++ b/files/el/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,42 @@ +--- +title: Δημιουργία λογαριασμού MDN +slug: MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN +tags: + - MDN Meta + - Αρχάριος + - Οδηγός + - Τεκμηρίωση +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

Για να επεξεργαστείτε περιεχόμενο στο MDN, θα χρειαστείτε ένα προφίλ MDN. Δεν χρειάζεστε προφίλ αν θέλετε μόνο να διαβάσετε και να αναζητήσετε τα έγγραφα του MDN. Αυτός ο οδηγός θα σάς βοηθήσετε να ρυθμίσετε το προφίλ MDN σας.

+ +
+
+

Γιατί το MDN απαιτεί τη διεύθυνση email μου;
+
+ Η διεύθυνση email σας χρησιμοποιείται για την ανάκτηση του λογαριασμού σας, αλλά και από τους διαχειριστές του MDN, αν χρειαστεί να επικοινωνήσουν μαζί σας σχετικά με το λογαριασμό σας ή τη δραστηριότητά σας στην ιστοσελίδα.

+ +

Επιπλέον, μπορείτε να ενεργοποιήσετε τις ειδοποιήσεις (όπως όταν αλλάζουν ορισμένες σελίδες) και τα μηνύματα (για παράδειγμα, αν επιλέξετε να συμμετάσχετε στην ομάδα δοκιμών beta μας, ενδέχεται να λαμβάνετε emails σχετικά με τις νέες λειτουργίες που απαιτούν δοκιμή).
+
+ Η διεύθυνση email σας δεν εμφανίζεται ποτέ στο MDN και θα χρησιμοποιηθεί σύμφωνα με την πολιτική απορρήτου μας.

+ +
Αν συνδεθείτε στο MDN μέσω GitHub και χρησιμοποιείτε μια διεύθυνση email "noreply" στο GitHub, δεν θα λαμβάνετε μηνύματα (αλλά και ειδοποιήσεις όταν κάνετε εγγραφή σε σελίδες) από το MDN.
+
+
+ +
    +
  1. Στο πάνω μέρος κάθε σελίδας στο MDN, θα βρείτε το κουμπί Σύνδεση. Μετακινήστε τον κέρσορά σας σε αυτό (ή πατήστε το, αν χρησιμοποιείτε κινητή συσκευή) για να εμφανιστεί μια λίστα με τις υπηρεσίες πιστοποίησης που υποστηρίζονται για τη σύνδεση στο MDN.
    2. +
  2. Επιλέξτε μια υπηρεσία με την οποία θα συνδεθείτε. Προς το παρόν, μόνο το GitHub είναι διαθέσιμο. Σημειώστε ότι αν επιλέξετε το GitHub, θα συμπεριληφθεί ένας σύνδεσμος για το προφίλ GitHub σας στη δημόσια σελίδα του προφίλ MDN σας.
    3. +
  3. Ακολουθήστε τις υποδείξεις του GitHub για να συνδέσετε το λογαριασμό σας με το MDN.
    4. +
  4. Μόλις η υπηρεσία πιστοποίησης σάς επιστρέψει στο MDN, θα σάς ζητηθεί να εισαγάγετε ένα όνομα χρήστη και μια διεύθυνση email. Το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας. Μην χρησιμοποιείτε τη διεύθυνση email σας ως το όνομα χρήστη σας.
    5. +
  5. Κάντε κλικ στο Δημιουργία προφίλ MDN.
    6. +
  6. Αν η διεύθυνση email που καθορίσατε στο βήμα 4 δεν είναι ίδια με αυτή που χρησιμοποιείτε με την υπηρεσία πιστοποίησης, παρακαλούμε ελέγξτε τα emails σας και κάντε κλικ στο σύνδεσμο του email επιβεβαίωσης που σάς αποστείλαμε.
    7. +
+ +

Αυτό ήταν! Έχετε αποκτήσει ένα λογαριασμό MDN και μπορείτε να αρχίσετε αμέσως την επεξεργασία σελίδων!

+ +

Μπορείτε να κάνετε κλικ στο όνομά σας στο πάνω μέρος οποιασδήποτε σελίδας του MDN για να δείτε το δημόσιο προφίλ σας. Από εδώ, μπορείτε να κάνετε κλικ στο Επεξεργασία για να κάνετε αλλαγές ή προσθήκες στο προφίλ σας.

+ +
+

Τα νέα ονόματα χρήστη δεν μπορούν να περιέχουν κενά ή το χαρακτήρα "@". Θυμηθείτε ότι το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας.

+
diff --git a/files/el/tools/about_colon_debugging/index.html b/files/el/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..0baeead55c --- /dev/null +++ b/files/el/tools/about_colon_debugging/index.html @@ -0,0 +1,227 @@ +--- +title: 'about:debugging' +slug: 'Εργαλεία/about:debugging' +translation_of: 'Tools/about:debugging' +--- +

{{ToolsSidebar}}

+ +

The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.

+ +

Opening the about:debugging page

+ +

There are two ways to open about:debugging:

+ + + +

When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:

+ +
+
Setup
+
Use the Setup tab to configure the connection to your remote device.
+
This Firefox
+
Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.
+
+ +

+ +

If your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true.

+ +

Setup tab

+ +

Connecting to a remote device

+ +

Firefox supports debugging over USB with Android devices, using the about:debugging page.

+ +

Before you connect:

+ +
    +
  1. Enable Developer settings on your Android device.
    2. +
  2. Enable USB debugging in the Android Developer settings.
    3. +
  3. Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.
    4. +
  4. Connect the Android device to your computer using a USB cable.
    5. +
+ +

If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the Refresh devices button.

+ +

If it still doesn't appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed Android Debug Bridge from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the Refresh devices button again. The device should appear.

+ +
+

Note: You do not need to install the full Android Studio SDK. Only adb is needed.

+
+ +

To start a debugging session, first open the page that you wish to debug and then click Connect next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.

+ +

Screenshot of the debugging page for an Android device

+ +

The information on this page is the same as the information on the This Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a Tabs section with an entry for each of the tabs open on the remote device.

+ +

Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:

+ +

+ +

In the image above, there are three tabs open: Network or cache Recipe, Nightly Home, and About Nightly. To debug the contents of one of these tabs, click the Inspect button next to its title. When you do, the Developer Tools open in a new tab.

+ +

+ +

Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Mozilla Firefox Nightly, on a Moto G(5), as well as the title of the page that you are debugging, and the address of the page.

+ +

Connecting over the Network

+ +

You can connect to a Firefox Debug server on your network, or on your debugging machine using the Network Location settings of the about:debugging page.

+ +

+ +

Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:

+ +

+ +

This Firefox

+ +

The This Firefox tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:

+ +
+
Temporary Extensions
+
Displays a list of the extensions that you have loaded using the Load Temporary Add-on button.
+
Extensions
+
This section lists information about the extensions that you have installed on your system.
+
Service Workers, Shared Workers, and Other Workers
+
There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.
+
+ +

+ +

Whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showHiddenAddons preference. If you need to see these extensions, navigate to about:config and make sure that the preference is set to true.

+ +

Extensions

+ +

Loading a temporary extension

+ +

With the Load Temporary Add-on button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the Temporary Extensions header.

+ +

You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.

+ +

The major advantages of this method, compared with installing an add-on from an XPI, are:

+ + + +

Once you have loaded a temporary extension, you can see information about it and perform operations on it.

+ +

Screenshot of the debugging information panel for a temporary extension

+ +

You can use the following buttons:

+ +
+
Inspect
+
Loads the extension in the debugger.
+
Reload
+
Reloads the temporary extension. This is handy when you have made changes to the extension.
+
Remove
+
Unloads the temporary extension.
+
+ +

Other information about the extension is displayed:

+ +
+
Location
+
The location of the extension's source code on your local system.
+
Extension ID
+
The temporary ID assigned to the extension.
+
Internal UUID
+
The internal UUID assigned to the extension.
+
Manifest URL
+
If you click the link, the manifest for this extension is loaded in a new tab.
+
+ +

Updating a temporary extension

+ +

If you install an extension in this way, what happens when you update the extension?

+ + + +

Installed Extensions

+ +

The permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:

+ +

Screenshot of the debugging information panel for an installed extension

+ +

The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.

+ +

Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.

+ +
+

Note: It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

+
+ +

The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.

+ +
+

Note: This list may include add-ons that came preinstalled with Firefox.

+
+ +

If you click Inspect, the Add-on Debugger will start in a new tab.

+ +

{{EmbedYouTube("efCpDNuNg_c")}}

+ +

See the page on the Add-on Debugger for all the things you can do with this tool.

+ +

Workers

+ +

The Workers page shows your workers, categorised as follows:

+ + + +

You can connect the developer tools to each worker, and send push notifications to service workers.

+ +

+ +

Service worker state

+ +

The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:

+ + + +

Screenshot of the debugging panel for a service worker that is in the Running state

+ +
+

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

+
+ +

Unregistering service workers

+ +

Click the Unregister button to unregister the service worker.

+ +

Sending push events to service workers

+ +

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.

+ +

Service workers not compatible

+ +
+

A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

+ +

+
+ +

Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.

diff --git a/files/el/tools/index.html b/files/el/tools/index.html new file mode 100644 index 0000000000..a49c30e6ab --- /dev/null +++ b/files/el/tools/index.html @@ -0,0 +1,230 @@ +--- +title: Εργαλεία Προγραμματισμού του Firefox +slug: Εργαλεία +translation_of: Tools +--- +
Εξετάστε, επεξεργαστείτε και αποσφαλματώστε την HTML, την CSS και την JavaScript στον υπολογιστή και το κινητό
+ +
Εγκατάσταση του Firefox Aurora + +

Τι νέο υπάρχει στο Aurora;

+ +

Το Aurora είναι μια έκδοση προεπισκόπησης έκδοσης του Firefox, όπου μπορείτε να έχετε τα τελευταία χαρακτηριστικά πριν εκδοθούν. Το τρέχον Aurora περιλαμβάνει αυτές τις ενημερώσεις για τα εργαλεία προγραμματισμού:

+ + +
+ +

+ +
+
+

Δημιουργία

+ +

Εργαλεία σύνταξης για ιστοσελίδες και εφαρμογές ιστού.

+ +
+
Scratchpad
+
'Ενας text editor (επεξεργαστής κειμένου) ενσωματωμένος στον Firefox, ο οποίος σας επιτρέπει τη σύνταξη και την εκτελέση  της JavaScript.
+
Επεξεργαστής στυλ
+
Δείτε και επεξεργαστείτε CSS styles για την τρέχουσα σελίδα.
+
Επεξεργαστής σκιών
+
Δείτε και επεξεργαστείτε τα vertex και fragment shaders που χρησιμοποιούνται από το WebGL.
+
+
+ +
+

Εξερεύνηση και αποσφαλμάτωση

+ +

Ερευνείστε, ελέγξτε, και αποσφαλματώστε ιστοσελίδες και εφαρμογές ιστού.

+ +
+
Κονσόλα ιστού
+
Δείτε τα μηνύματα που καταγράφονται σχετικά με μια ιστοσελίδα και αλληλεπιδράστε με την σελίδα χρησιμοποιώντας την JavaScript.
+
Επιθεωρητής σελίδας
+
Δείτε και αλλάξτε την σελίδα σε HTML και CSS.
+
JavaScript διορθωτής σφαλμάτων κώδικα
+
Σταματείστε, ελέγξτε, ερευνείστε και αλλάξτε την JavaScript που τρέχει στην σελίδα.
+
Έλεγχος-Παρακολούθηση δικτύου
+
Δείτε τις απαιτήσεις του δικτύου που πραγματώνονται όταν φορτώνεται η σελίδα.
+
Εργαλειοθήκη προγραμματιστή
+
Μία γραμμή εντολών της επιφάνειας αλληλεπίδρασης για τα εργαλεία του προγραμματιστή.
+
Τρισδιάστατη (3D) εικόνα
+
 Τρισδιάστατη (3D) θέαση της σελίδας.
+
Eyedropper
+
Διαλέξτε ένα χρώμα από την σελίδα.
+
Δουλέοντας με  iframes
+
Πως να στοχοποιήσετε μια συγκεκριμένη iframe.
+
+
+
+ +
+
+
+

Κινητά

+ +

Εργαλεία για προγραμματισμό σε κινητές συσκευές.

+ +
+
Διαχειριστής Εφαρμογών
+
Σχεδιάστε και αναπτύξτε το λειτουργικό σύστημα (OS) Firefox .
+
Firefox OS εξομοιωτής
+
Τρέξτε και αποσφαλματώστε την εφαρμογή Firefox OS στον υπολογιστή σας, χωρίς να χρειάζετε να έχετε μια πραγματική συσκευή Firefox OS.
+
Εικόνα ανταπόκρισης σχεδίου
+
Δείτε πως η ιστοσελίδα ή  η εφαρμογή θα έμοιαζε σε ένα διαφορετικό μέγεθος στην οθόνη χωρίς να χρειάζετε να αλλάξετε το μέγεθος του περιηγητή σας.
+
Αποσφαλμάτωση του Firefox για συσκευές Android
+
Συνδέστε την εργαλειοθήκη του προγραμματιστή με το Firefox για συσκευές Android.
+
+
+ +
+

Επιδόσεις

+ +

Διάγνωστε και επιδιορθώστε προβλήματα εκτέλεσης - αποδοτικότητας (επιδόσεων).

+ +
+
Ανάλυση προφίλ JavaScript
+
Ανακαλύψτε πού ο JavaScript κώδικας καταναλώνει χρόνο.
+
Εργαλείο επισήμανσης χρώματος
+
Επισημαίνει τα μέρη της σελίδας που επαναχρωματίζονται σε απάντηση στα συμβάντα.
+
Συμβάντα αναδιαμόρφωσης σύνδεσης
+
Δείτε συμβάντα αναδιαμόρφωσης στην κονσόλα ιστού.
+
Επιδόσεις δικτύου
+
Δείτε πόσο χρόνο χρειάζονται να φορτώσουν όλα τα μέρη του ιστότοπου .
+
+
+
+ +
+
+
+

Αποσφαλματώτοντας τον περιηγητή

+ +

Κατεξοχήν (ώς προεπιλογή) τα εργαλεία του προγραμματιστή επισυνάπτονται  σε μια ιστοσελίδα ή σε μια εφαρμογή ιστού. Μπορείτε όμως να  τα συνδέσετε συνολοκά στον περιηγητή.  Αυτό είναι χρήσιμο για την ανάπτυξη του περιηγητή και των προσθέτων.

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

Επεκτείνοντας τα εργαλεία του προγραμματιστή

+ +

Τα εργαλεία του προγραμματιστή είναι σχεδιάσμενα με τέτοιο τρόπο ώστε να μπορούν να επεκταθούν. Τα πρόσθετα του Firefox  μπορούν να προσπελάσουν τα εργαλεία του προγραμματιστή και  τα εξαρτήματα που χρησιμοποιούν μπορούν να επεκτείνουν υπάρχοντα εργαλεία ή να προσθέσουν καινούρια εργαλεία. Με το πρωτόκολλο απομακρυσμένης αποσφαλμάτωσης μπορείτε να  σχεδιάσετε τους δικούς σας πελάτες και εξυπηρετητές αποσφαλματώσης. Επίσης σας δίνει τη δυνατότητα να αποσφαλματώσετε ιστοσελίδες χρησιμοποιώντας δικά σας εργαλεία ή να αποσφαλματώσετε διαφορετικούς στόχους χρησιμοποιώντας τα εργαλεία του Firefox.

+ +
+
Προσθέστε ένα νέο πίνακα στα εργαλεία προγραμματιστή
+
Γράψτε ένα πρόσθετο που προσθέτει έναν πίνακα στην εργαλειοθήκη.
+
+ +
+
Πρωτόκολλο Απομακρυσμένης Αποσφαλμάτωσης
+
Το πρωτόκολλο που χρησιμοποιείται για να συνδέει τα εργαλεία του προγραμματιστή του   Firefox με τους στόχους αποσφαλμάτωσης π.χ όπως ο περιηγητής Firefox ή μία συσκευή με λειτουργικό Firefox.
+
Επεξεργαστής πηγαίου κώδικα
+
Μία έκδοση ενός επεξεργαστή κώδικα  στον Firefox η οποιά μπορεί να  ενσωματωθεί στα πρόσθετά σας.
+
The Debugger Interface
+
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
+
Web Console custom output
+
How to extend and customize the output of the Web Console and the Browser Console.
+
Example devtools add-ons
+
Use these examples to understand how to implement a devtools add-on.
+
+
+
+ +
+

Περισσότεροι πόροι

+ +

Αυτό το κεφάλαιο αναφέρει πόρους που δεν υποστηρίζονται από την ομάδα των εργαλείων του προγραμματιστή του Mozilla, αλλά οι οποίοι χρησιμοποιούνται ευρέως από τους προγραμματιστές του ιστού. Έχουμε συμπεριλάβει μερικά από τα πρόσθετα του Firefox σε αυτή τη λίστα, αλλά για την ολοκληρωμένη λίστα δείτε την κατηγορία: "Προγραμματισμός Ιστού" στα πρόσθετα του mozilla.org.

+ +
+
+
+
Firebug
+
Ένα δημοφιλές και πολύ δυνατό εργαλείο προγραμματισμού του ιστού, το οποίο συμπεριλαμβάνει τον JavaScript διορθωτή σφαλμάτων κώδικα, HTML και  CSS θεατή και επεξεργαστή και παρακολούθηση δικτύου.
+
Επιθεωρητής DOM
+
Επιθεώρησε, δες και επεξεργάσου την DOM στις ιστοσελίδες ή  XUL(XML Mozilla) παράθυρα.
+
Προγραμματιστής Ιστού
+
Προσθέτει ένα μενού επιλογών και μια εργαλειοθήκη στον περιηγητή με διάφορα εργαλεία για τους προγραμματιστές του ιστού.
+
+
+ +
+
+
Εργαλεία Δημιουργίας Ιστού
+
Ένα σετ από εργαλεία που αναπτύχθηκαν απο τον Mozilla, το οποίο στοχεύει στον να ξεκινήσουν οι άνθρωποι να ασχολούνται με τον προγραμματισμού του ιστού.
+
W3C Eπικυρωτής
+
Η W3C ιστοσελίδα φιλοξενεί ένα μεγάλο αριθμό από εργαλεία για να ελέγξεις την εγκυρότητα του ιστότοπού σου, συμπεριλαμβανομένων των  HTML και CSS.
+
JSHint (Υπόδειξη JS)
+
Εργαλέιο ανάλυσης του κώδικα JavaScript.
+
+
+
+ + + +
    +
  1. Creating + +
      +
    1. Scratchpad
      2. +
    2. Style Editor
      3. +
    3. Shader Editor
      4. +
    +
    2. +
  2. Debugging +
      +
    1. Page Inspector
      2. +
    2. Web Console
      3. +
    3. Debugger
      4. +
    4. Network Monitor
      5. +
    5. Developer Toolbar
      6. +
    6. 3D View
      7. +
    +
    3. +
  3. Mobile +
      +
    1. App Manager
      2. +
    2. Firefox for Android
      3. +
    3. Firefox OS Simulator
      4. +
    4. Responsive Design View
      5. +
    +
    4. +
  4. Performance +
      +
    1. Profiler
      2. +
    2. Paint Flashing Tool
      3. +
    3. Reflow Event Logging
      4. +
    4. Network Performance
      5. +
    +
    5. +
  5. Debugging the browser +
      +
    1. Browser Console
      2. +
    2. Browser Toolbox
      3. +
    +
    6. +
  6. Extending the devtools +
      +
    1. Adding a panel to the toolbox
      2. +
    2. Example devtools add-ons
      3. +
    3. Remote Debugging Protocol
      4. +
    4. Stream Transport
      5. +
    5. Source Editor
      6. +
    6. The Debugger Interface
      7. +
    7. Web Console custom output
      8. +
    +
    7. +
  7. Settings
    8. +
  8. Release notes
    9. +
diff --git a/files/el/web/javascript/reference/functions/default_parameters/index.html b/files/el/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..1802637dce --- /dev/null +++ b/files/el/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,221 @@ +--- +title: Προεπιλεγμένες παράμετροι +slug: Web/JavaScript/Reference/Functions/Προεπιλεγμένες_παράμετροι +tags: + - ECMAScript 2015 + - JavaScript + - Συναρτήσεις +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +
{{jsSidebar("Συναρτήσεις")}}
+ +

Οι προεπιλεγμένες παράμετροι συναρτήσεων επιτρέπουν την αρχικοποίηση των παραμέτρων με προεπιλεγμένες τιμες, αν η τιμή λείπει ή ειναι τύπου undefined.

+ +
{{EmbedInteractiveExample("pages/js/functions-default.html")}}
+ + + +

Σύνταξη

+ +
function [όνομα]([παράμ1[ = προεπιλεγμένηΤιμή1 ][, ..., παράμN[ = προεπιλεγμένηΤιμήN ]]]) {δηλώσεις
+}
+
+ +

Περιγραφή

+ +

Στην JavaScript, οι προεπιλεγμένες παράμετροι των συναρτήσεων ειναι τύπου {{jsxref("undefined")}}. Ωστόσο, σε κάποιες καταστάσεις μπορεί να χρειαστεί να θέσουμε μια διαφορετική προεπιλεγμένη τιμή. Σε αυτή την περίπτωση μπορούν βοηθήσουν οι προεπιλεγμένες παράμετροι.

+ +

Στο παρελθόν, η γενική στρατηγική ορισμού προεπιλεγμένων τιμών, ηταν ο έλεγχος των τιμών στο σώμα την συνάρτησης και η εκχώρηση τιμής στην περίπτωση που ήταν τύπου undefined. Αν στο επόμενο παράδειγμα, δεν δοθεί τιμή για την b οταν κλήθει η συναρτηση, η τιμή της θα ήταν undefined  κατα την εκτίμηση του a*b και η κλήση της multiply θα επέστρεφε NaN. Ωστόσο, αυτό αποτρέπεται στην δεύτερη γραμμή του παραδείγματος:

+ +
function multiply(a, b) {
+  b = (typeof b !== 'undefined') ?  b : 1;
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+
+ +

Με τις προεπιλεγμένες παραμέτρους στην ES2015, ο έλεγχος στο σώμα της συνάρτησης δεν ειναι πια απαραίτητος. Τωρα μπορούμε απλα να θέσουμε 1 ως προεπιλεγμένη τιμή της b στην κεφαλή της συνάρτησης:

+ +
function multiply(a, b = 1) {
+  return a * b;
+}
+
+multiply(5, 2); // 10
+multiply(5, 1); // 5
+multiply(5);    // 5
+
+ +

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

+ +

Περνώντας undefined σε αντίθεση με άλλες falsy τιμες

+ +

Στην δεύτερη κλήση εδω, ακόμα και αν η δεύτερη παράμετρος είναι ρητά undefined (αλλά οχι null ή άλλες falsy τιμές) κατα την κλήση, η τιμή της παραμέτρου num είναι η προεπιλεγμένη.

+ +
function test(num = 1) {
+  console.log(typeof num);
+}
+
+test();          // 'number' (η num παίρνει τιμή 1)
+test(undefined); // 'number' (η num επίσης παίρνει τιμή 1)
+
+// test with other falsy values:
+test('');        // 'string' (η num παίρνει τιμή '')
+test(null);      // 'object' (η num παίρνει τιμή null)
+
+ +

Εκτίμηση κατα την κλήση

+ +

Η προεπιλεγμένη παράμετρος εκτιμάται κατα την κλήση, οπότε αντίθετα με την Python για παραδειγμα, ενα νεο αντικείμενο δημιουργείται καθε φορά που καλείται η συνάρτηση.

+ +
function append(value, array = []) {
+  array.push(value);
+  return array;
+}
+
+append(1); //[1]
+append(2); //[2], όχι [1, 2]
+
+
+ +

Αυτό εφαρμόζεται ακομα και στις συναρτήσεις και τις μεταβλητές:

+ +
function callSomething(thing = something()) {
+ return thing;
+}
+
+function something() {
+  return 'sth';
+}
+
+callSomething();  //sth
+ +

Οι προεπιλεγμένες παράμετροι ειναι διαθέσιμες σε επόμενες προεπιλεγμένες παραμέτρους

+ +

Οι παράμετροι που εχουν ήδη συναντηθεί είναι διαθέσιμες και στις επόμενες προεπιλεγμένες παραμέτρους:

+ +
function singularAutoPlural(singular, plural = singular + 's',
+                            rallyingCry = plural + ' ATTACK!!!') {
+  return [singular, plural, rallyingCry];
+}
+
+//["Gecko","Geckos", "Geckos ATTACK!!!"]
+singularAutoPlural('Gecko');
+
+//["Fox","Foxes", "Foxes ATTACK!!!"]
+singularAutoPlural('Fox', 'Foxes');
+
+//["Deer", "Deer", "Deer ... change."]
+singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \
+   petition the government for positive change.')
+
+ +

Αυτή η λειτουργικότητα υπολογίζεται σταδιακά. Το επόμενο παράδειγμα επιδεικνύει το πως χειρίζονται άλλες ακραίες περιπτώσεις.

+ +
function go() {
+  return ':P';
+}
+
+function withDefaults(a, b = 5, c = b, d = go(), e = this,
+                      f = arguments, g = this.value) {
+  return [a, b, c, d, e, f, g];
+}
+
+function withoutDefaults(a, b, c, d, e, f, g) {
+  switch (arguments.length) {
+    case 0:
+      a;
+    case 1:
+      b = 5;
+    case 2:
+      c = b;
+    case 3:
+      d = go();
+    case 4:
+      e = this;
+    case 5:
+      f = arguments;
+    case 6:
+      g = this.value;
+    default:
+  }
+  return [a, b, c, d, e, f, g];
+}
+
+withDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+
+withoutDefaults.call({value: '=^_^='});
+// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
+
+ +

Συναρτήσεις που ορίζονται μεσα στο σώμα της συνάρτησης

+ +

Εισάχθηκε στο Gecko 33 {{geckoRelease(33)}}. Οι συναρτήσεις που ορίζονται στο σώμα της συνάρτησης δεν μπορούν να αναφέρονται στίς προεπιλεγμένες παραμέτρους και εμφανίζουν ενα {{jsxref("ReferenceError")}} (αυτή τη στιγμή {{jsxref("TypeError")}} στο SpiderMonkey, βλέπε {{bug(1022967)}}). Οι προεπιλεγμένες παράμετροι εκτελούνται παντα πρώτες και στην συνέχεια εκτελούνται οι δηλώσεις που βρίσκονται στο σώμα της συνάρτησης.

+ +
// Doesn't work! Throws ReferenceError.
+function f(a = go()) {
+  function go() { return ':P'; }
+}
+
+ +

Παράμετροι χωρίς προεπιλεγμένες τιμες μετα τις προεπιλεγμενες παραμέτρους

+ +

Πριν απο το Gecko 26 {{geckoRelease(26)}}, ο ακόλουθος κώδικας προκαλούσε ένα {{jsxref("SyntaxError")}}. Αυτό επιδιορθώθηκε στο {{bug(777060)}} και έχει την αναμενόμενη λειτουργία σε επόμενες εκδόσεις. Οι παράμετροι ορίζονται ακόμα απο τα αριστερά στα δεξιά, αντικαθιστώντας προεπιλεγμένες παραμέτρους ακόμα και αν υπάρχουν επόμενες παράμετροι χωρίς προεπιλεγμένες τιμές.

+ +
function f(x = 1, y) {
+  return [x, y];
+}
+
+f(); // [1, undefined]
+f(2); // [2, undefined]
+
+ +

Αποδόμηση παραμέτρων στον ορισμό προεπιλεγμένων τιμών

+ +

Στον ορισμό προεπιλεγμένων παραμέτρων μπορεί να χρησιμοποιηθεί αποδομημένη ανάθεση:

+ +
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
+  return x + y + z;
+}
+
+f(); // 6
+ +

Προδιαγραφές

+ + + + + + + + + + + + + + + + + + + +
ΠροδιαγραφήΚατάστασηΣχόλιο
{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES2015')}}Αρχικός ορισμός.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
+ +

Συμβατότητα περιηγητών

+ +
+ + +

{{Compat("javascript.functions.default_parameters")}}

+
+ +

Δείτε επίσης

+ + diff --git "a/files/el/web/javascript/reference/functions/\317\200\317\201\316\277\316\265\317\200\316\271\316\273\316\265\316\263\316\274\316\255\316\275\316\265\317\202_\317\200\316\261\317\201\316\254\316\274\316\265\317\204\317\201\316\277\316\271/index.html" "b/files/el/web/javascript/reference/functions/\317\200\317\201\316\277\316\265\317\200\316\271\316\273\316\265\316\263\316\274\316\255\316\275\316\265\317\202_\317\200\316\261\317\201\316\254\316\274\316\265\317\204\317\201\316\277\316\271/index.html" deleted file mode 100644 index 1802637dce..0000000000 --- "a/files/el/web/javascript/reference/functions/\317\200\317\201\316\277\316\265\317\200\316\271\316\273\316\265\316\263\316\274\316\255\316\275\316\265\317\202_\317\200\316\261\317\201\316\254\316\274\316\265\317\204\317\201\316\277\316\271/index.html" +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: Προεπιλεγμένες παράμετροι -slug: Web/JavaScript/Reference/Functions/Προεπιλεγμένες_παράμετροι -tags: - - ECMAScript 2015 - - JavaScript - - Συναρτήσεις -translation_of: Web/JavaScript/Reference/Functions/Default_parameters ---- -
{{jsSidebar("Συναρτήσεις")}}
- -

Οι προεπιλεγμένες παράμετροι συναρτήσεων επιτρέπουν την αρχικοποίηση των παραμέτρων με προεπιλεγμένες τιμες, αν η τιμή λείπει ή ειναι τύπου undefined.

- -
{{EmbedInteractiveExample("pages/js/functions-default.html")}}
- - - -

Σύνταξη

- -
function [όνομα]([παράμ1[ = προεπιλεγμένηΤιμή1 ][, ..., παράμN[ = προεπιλεγμένηΤιμήN ]]]) {δηλώσεις
-}
-
- -

Περιγραφή

- -

Στην JavaScript, οι προεπιλεγμένες παράμετροι των συναρτήσεων ειναι τύπου {{jsxref("undefined")}}. Ωστόσο, σε κάποιες καταστάσεις μπορεί να χρειαστεί να θέσουμε μια διαφορετική προεπιλεγμένη τιμή. Σε αυτή την περίπτωση μπορούν βοηθήσουν οι προεπιλεγμένες παράμετροι.

- -

Στο παρελθόν, η γενική στρατηγική ορισμού προεπιλεγμένων τιμών, ηταν ο έλεγχος των τιμών στο σώμα την συνάρτησης και η εκχώρηση τιμής στην περίπτωση που ήταν τύπου undefined. Αν στο επόμενο παράδειγμα, δεν δοθεί τιμή για την b οταν κλήθει η συναρτηση, η τιμή της θα ήταν undefined  κατα την εκτίμηση του a*b και η κλήση της multiply θα επέστρεφε NaN. Ωστόσο, αυτό αποτρέπεται στην δεύτερη γραμμή του παραδείγματος:

- -
function multiply(a, b) {
-  b = (typeof b !== 'undefined') ?  b : 1;
-  return a * b;
-}
-
-multiply(5, 2); // 10
-multiply(5, 1); // 5
-multiply(5);    // 5
-
- -

Με τις προεπιλεγμένες παραμέτρους στην ES2015, ο έλεγχος στο σώμα της συνάρτησης δεν ειναι πια απαραίτητος. Τωρα μπορούμε απλα να θέσουμε 1 ως προεπιλεγμένη τιμή της b στην κεφαλή της συνάρτησης:

- -
function multiply(a, b = 1) {
-  return a * b;
-}
-
-multiply(5, 2); // 10
-multiply(5, 1); // 5
-multiply(5);    // 5
-
- -

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

- -

Περνώντας undefined σε αντίθεση με άλλες falsy τιμες

- -

Στην δεύτερη κλήση εδω, ακόμα και αν η δεύτερη παράμετρος είναι ρητά undefined (αλλά οχι null ή άλλες falsy τιμές) κατα την κλήση, η τιμή της παραμέτρου num είναι η προεπιλεγμένη.

- -
function test(num = 1) {
-  console.log(typeof num);
-}
-
-test();          // 'number' (η num παίρνει τιμή 1)
-test(undefined); // 'number' (η num επίσης παίρνει τιμή 1)
-
-// test with other falsy values:
-test('');        // 'string' (η num παίρνει τιμή '')
-test(null);      // 'object' (η num παίρνει τιμή null)
-
- -

Εκτίμηση κατα την κλήση

- -

Η προεπιλεγμένη παράμετρος εκτιμάται κατα την κλήση, οπότε αντίθετα με την Python για παραδειγμα, ενα νεο αντικείμενο δημιουργείται καθε φορά που καλείται η συνάρτηση.

- -
function append(value, array = []) {
-  array.push(value);
-  return array;
-}
-
-append(1); //[1]
-append(2); //[2], όχι [1, 2]
-
-
- -

Αυτό εφαρμόζεται ακομα και στις συναρτήσεις και τις μεταβλητές:

- -
function callSomething(thing = something()) {
- return thing;
-}
-
-function something() {
-  return 'sth';
-}
-
-callSomething();  //sth
- -

Οι προεπιλεγμένες παράμετροι ειναι διαθέσιμες σε επόμενες προεπιλεγμένες παραμέτρους

- -

Οι παράμετροι που εχουν ήδη συναντηθεί είναι διαθέσιμες και στις επόμενες προεπιλεγμένες παραμέτρους:

- -
function singularAutoPlural(singular, plural = singular + 's',
-                            rallyingCry = plural + ' ATTACK!!!') {
-  return [singular, plural, rallyingCry];
-}
-
-//["Gecko","Geckos", "Geckos ATTACK!!!"]
-singularAutoPlural('Gecko');
-
-//["Fox","Foxes", "Foxes ATTACK!!!"]
-singularAutoPlural('Fox', 'Foxes');
-
-//["Deer", "Deer", "Deer ... change."]
-singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \
-   petition the government for positive change.')
-
- -

Αυτή η λειτουργικότητα υπολογίζεται σταδιακά. Το επόμενο παράδειγμα επιδεικνύει το πως χειρίζονται άλλες ακραίες περιπτώσεις.

- -
function go() {
-  return ':P';
-}
-
-function withDefaults(a, b = 5, c = b, d = go(), e = this,
-                      f = arguments, g = this.value) {
-  return [a, b, c, d, e, f, g];
-}
-
-function withoutDefaults(a, b, c, d, e, f, g) {
-  switch (arguments.length) {
-    case 0:
-      a;
-    case 1:
-      b = 5;
-    case 2:
-      c = b;
-    case 3:
-      d = go();
-    case 4:
-      e = this;
-    case 5:
-      f = arguments;
-    case 6:
-      g = this.value;
-    default:
-  }
-  return [a, b, c, d, e, f, g];
-}
-
-withDefaults.call({value: '=^_^='});
-// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
-
-
-withoutDefaults.call({value: '=^_^='});
-// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="]
-
- -

Συναρτήσεις που ορίζονται μεσα στο σώμα της συνάρτησης

- -

Εισάχθηκε στο Gecko 33 {{geckoRelease(33)}}. Οι συναρτήσεις που ορίζονται στο σώμα της συνάρτησης δεν μπορούν να αναφέρονται στίς προεπιλεγμένες παραμέτρους και εμφανίζουν ενα {{jsxref("ReferenceError")}} (αυτή τη στιγμή {{jsxref("TypeError")}} στο SpiderMonkey, βλέπε {{bug(1022967)}}). Οι προεπιλεγμένες παράμετροι εκτελούνται παντα πρώτες και στην συνέχεια εκτελούνται οι δηλώσεις που βρίσκονται στο σώμα της συνάρτησης.

- -
// Doesn't work! Throws ReferenceError.
-function f(a = go()) {
-  function go() { return ':P'; }
-}
-
- -

Παράμετροι χωρίς προεπιλεγμένες τιμες μετα τις προεπιλεγμενες παραμέτρους

- -

Πριν απο το Gecko 26 {{geckoRelease(26)}}, ο ακόλουθος κώδικας προκαλούσε ένα {{jsxref("SyntaxError")}}. Αυτό επιδιορθώθηκε στο {{bug(777060)}} και έχει την αναμενόμενη λειτουργία σε επόμενες εκδόσεις. Οι παράμετροι ορίζονται ακόμα απο τα αριστερά στα δεξιά, αντικαθιστώντας προεπιλεγμένες παραμέτρους ακόμα και αν υπάρχουν επόμενες παράμετροι χωρίς προεπιλεγμένες τιμές.

- -
function f(x = 1, y) {
-  return [x, y];
-}
-
-f(); // [1, undefined]
-f(2); // [2, undefined]
-
- -

Αποδόμηση παραμέτρων στον ορισμό προεπιλεγμένων τιμών

- -

Στον ορισμό προεπιλεγμένων παραμέτρων μπορεί να χρησιμοποιηθεί αποδομημένη ανάθεση:

- -
function f([x, y] = [1, 2], {z: z} = {z: 3}) {
-  return x + y + z;
-}
-
-f(); // 6
- -

Προδιαγραφές

- - - - - - - - - - - - - - - - - - - -
ΠροδιαγραφήΚατάστασηΣχόλιο
{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ES2015')}}Αρχικός ορισμός.
{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}{{Spec2('ESDraft')}} 
- -

Συμβατότητα περιηγητών

- -
- - -

{{Compat("javascript.functions.default_parameters")}}

-
- -

Δείτε επίσης

- - diff --git "a/files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/about_colon_debugging/index.html" "b/files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/about_colon_debugging/index.html" deleted file mode 100644 index 0baeead55c..0000000000 --- "a/files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/about_colon_debugging/index.html" +++ /dev/null @@ -1,227 +0,0 @@ ---- -title: 'about:debugging' -slug: 'Εργαλεία/about:debugging' -translation_of: 'Tools/about:debugging' ---- -

{{ToolsSidebar}}

- -

The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.

- -

Opening the about:debugging page

- -

There are two ways to open about:debugging:

- - - -

When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:

- -
-
Setup
-
Use the Setup tab to configure the connection to your remote device.
-
This Firefox
-
Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.
-
- -

- -

If your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true.

- -

Setup tab

- -

Connecting to a remote device

- -

Firefox supports debugging over USB with Android devices, using the about:debugging page.

- -

Before you connect:

- -
    -
  1. Enable Developer settings on your Android device.
    2. -
  2. Enable USB debugging in the Android Developer settings.
    3. -
  3. Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.
    4. -
  4. Connect the Android device to your computer using a USB cable.
    5. -
- -

If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the Refresh devices button.

- -

If it still doesn't appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed Android Debug Bridge from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the Refresh devices button again. The device should appear.

- -
-

Note: You do not need to install the full Android Studio SDK. Only adb is needed.

-
- -

To start a debugging session, first open the page that you wish to debug and then click Connect next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.

- -

Screenshot of the debugging page for an Android device

- -

The information on this page is the same as the information on the This Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a Tabs section with an entry for each of the tabs open on the remote device.

- -

Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:

- -

- -

In the image above, there are three tabs open: Network or cache Recipe, Nightly Home, and About Nightly. To debug the contents of one of these tabs, click the Inspect button next to its title. When you do, the Developer Tools open in a new tab.

- -

- -

Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Mozilla Firefox Nightly, on a Moto G(5), as well as the title of the page that you are debugging, and the address of the page.

- -

Connecting over the Network

- -

You can connect to a Firefox Debug server on your network, or on your debugging machine using the Network Location settings of the about:debugging page.

- -

- -

Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:

- -

- -

This Firefox

- -

The This Firefox tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:

- -
-
Temporary Extensions
-
Displays a list of the extensions that you have loaded using the Load Temporary Add-on button.
-
Extensions
-
This section lists information about the extensions that you have installed on your system.
-
Service Workers, Shared Workers, and Other Workers
-
There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.
-
- -

- -

Whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showHiddenAddons preference. If you need to see these extensions, navigate to about:config and make sure that the preference is set to true.

- -

Extensions

- -

Loading a temporary extension

- -

With the Load Temporary Add-on button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the Temporary Extensions header.

- -

You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.

- -

The major advantages of this method, compared with installing an add-on from an XPI, are:

- - - -

Once you have loaded a temporary extension, you can see information about it and perform operations on it.

- -

Screenshot of the debugging information panel for a temporary extension

- -

You can use the following buttons:

- -
-
Inspect
-
Loads the extension in the debugger.
-
Reload
-
Reloads the temporary extension. This is handy when you have made changes to the extension.
-
Remove
-
Unloads the temporary extension.
-
- -

Other information about the extension is displayed:

- -
-
Location
-
The location of the extension's source code on your local system.
-
Extension ID
-
The temporary ID assigned to the extension.
-
Internal UUID
-
The internal UUID assigned to the extension.
-
Manifest URL
-
If you click the link, the manifest for this extension is loaded in a new tab.
-
- -

Updating a temporary extension

- -

If you install an extension in this way, what happens when you update the extension?

- - - -

Installed Extensions

- -

The permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:

- -

Screenshot of the debugging information panel for an installed extension

- -

The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.

- -

Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.

- -
-

Note: It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

-
- -

The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.

- -
-

Note: This list may include add-ons that came preinstalled with Firefox.

-
- -

If you click Inspect, the Add-on Debugger will start in a new tab.

- -

{{EmbedYouTube("efCpDNuNg_c")}}

- -

See the page on the Add-on Debugger for all the things you can do with this tool.

- -

Workers

- -

The Workers page shows your workers, categorised as follows:

- - - -

You can connect the developer tools to each worker, and send push notifications to service workers.

- -

- -

Service worker state

- -

The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:

- - - -

Screenshot of the debugging panel for a service worker that is in the Running state

- -
-

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

-
- -

Unregistering service workers

- -

Click the Unregister button to unregister the service worker.

- -

Sending push events to service workers

- -

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.

- -

Service workers not compatible

- -
-

A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

- -

-
- -

Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.

diff --git "a/files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/index.html" "b/files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/index.html" deleted file mode 100644 index a49c30e6ab..0000000000 --- "a/files/el/\316\265\317\201\316\263\316\261\316\273\316\265\316\257\316\261/index.html" +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Εργαλεία Προγραμματισμού του Firefox -slug: Εργαλεία -translation_of: Tools ---- -
Εξετάστε, επεξεργαστείτε και αποσφαλματώστε την HTML, την CSS και την JavaScript στον υπολογιστή και το κινητό
- -
Εγκατάσταση του Firefox Aurora - -

Τι νέο υπάρχει στο Aurora;

- -

Το Aurora είναι μια έκδοση προεπισκόπησης έκδοσης του Firefox, όπου μπορείτε να έχετε τα τελευταία χαρακτηριστικά πριν εκδοθούν. Το τρέχον Aurora περιλαμβάνει αυτές τις ενημερώσεις για τα εργαλεία προγραμματισμού:

- - -
- -

- -
-
-

Δημιουργία

- -

Εργαλεία σύνταξης για ιστοσελίδες και εφαρμογές ιστού.

- -
-
Scratchpad
-
'Ενας text editor (επεξεργαστής κειμένου) ενσωματωμένος στον Firefox, ο οποίος σας επιτρέπει τη σύνταξη και την εκτελέση  της JavaScript.
-
Επεξεργαστής στυλ
-
Δείτε και επεξεργαστείτε CSS styles για την τρέχουσα σελίδα.
-
Επεξεργαστής σκιών
-
Δείτε και επεξεργαστείτε τα vertex και fragment shaders που χρησιμοποιούνται από το WebGL.
-
-
- -
-

Εξερεύνηση και αποσφαλμάτωση

- -

Ερευνείστε, ελέγξτε, και αποσφαλματώστε ιστοσελίδες και εφαρμογές ιστού.

- -
-
Κονσόλα ιστού
-
Δείτε τα μηνύματα που καταγράφονται σχετικά με μια ιστοσελίδα και αλληλεπιδράστε με την σελίδα χρησιμοποιώντας την JavaScript.
-
Επιθεωρητής σελίδας
-
Δείτε και αλλάξτε την σελίδα σε HTML και CSS.
-
JavaScript διορθωτής σφαλμάτων κώδικα
-
Σταματείστε, ελέγξτε, ερευνείστε και αλλάξτε την JavaScript που τρέχει στην σελίδα.
-
Έλεγχος-Παρακολούθηση δικτύου
-
Δείτε τις απαιτήσεις του δικτύου που πραγματώνονται όταν φορτώνεται η σελίδα.
-
Εργαλειοθήκη προγραμματιστή
-
Μία γραμμή εντολών της επιφάνειας αλληλεπίδρασης για τα εργαλεία του προγραμματιστή.
-
Τρισδιάστατη (3D) εικόνα
-
 Τρισδιάστατη (3D) θέαση της σελίδας.
-
Eyedropper
-
Διαλέξτε ένα χρώμα από την σελίδα.
-
Δουλέοντας με  iframes
-
Πως να στοχοποιήσετε μια συγκεκριμένη iframe.
-
-
-
- -
-
-
-

Κινητά

- -

Εργαλεία για προγραμματισμό σε κινητές συσκευές.

- -
-
Διαχειριστής Εφαρμογών
-
Σχεδιάστε και αναπτύξτε το λειτουργικό σύστημα (OS) Firefox .
-
Firefox OS εξομοιωτής
-
Τρέξτε και αποσφαλματώστε την εφαρμογή Firefox OS στον υπολογιστή σας, χωρίς να χρειάζετε να έχετε μια πραγματική συσκευή Firefox OS.
-
Εικόνα ανταπόκρισης σχεδίου
-
Δείτε πως η ιστοσελίδα ή  η εφαρμογή θα έμοιαζε σε ένα διαφορετικό μέγεθος στην οθόνη χωρίς να χρειάζετε να αλλάξετε το μέγεθος του περιηγητή σας.
-
Αποσφαλμάτωση του Firefox για συσκευές Android
-
Συνδέστε την εργαλειοθήκη του προγραμματιστή με το Firefox για συσκευές Android.
-
-
- -
-

Επιδόσεις

- -

Διάγνωστε και επιδιορθώστε προβλήματα εκτέλεσης - αποδοτικότητας (επιδόσεων).

- -
-
Ανάλυση προφίλ JavaScript
-
Ανακαλύψτε πού ο JavaScript κώδικας καταναλώνει χρόνο.
-
Εργαλείο επισήμανσης χρώματος
-
Επισημαίνει τα μέρη της σελίδας που επαναχρωματίζονται σε απάντηση στα συμβάντα.
-
Συμβάντα αναδιαμόρφωσης σύνδεσης
-
Δείτε συμβάντα αναδιαμόρφωσης στην κονσόλα ιστού.
-
Επιδόσεις δικτύου
-
Δείτε πόσο χρόνο χρειάζονται να φορτώσουν όλα τα μέρη του ιστότοπου .
-
-
-
- -
-
-
-

Αποσφαλματώτοντας τον περιηγητή

- -

Κατεξοχήν (ώς προεπιλογή) τα εργαλεία του προγραμματιστή επισυνάπτονται  σε μια ιστοσελίδα ή σε μια εφαρμογή ιστού. Μπορείτε όμως να  τα συνδέσετε συνολοκά στον περιηγητή.  Αυτό είναι χρήσιμο για την ανάπτυξη του περιηγητή και των προσθέτων.

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

Επεκτείνοντας τα εργαλεία του προγραμματιστή

- -

Τα εργαλεία του προγραμματιστή είναι σχεδιάσμενα με τέτοιο τρόπο ώστε να μπορούν να επεκταθούν. Τα πρόσθετα του Firefox  μπορούν να προσπελάσουν τα εργαλεία του προγραμματιστή και  τα εξαρτήματα που χρησιμοποιούν μπορούν να επεκτείνουν υπάρχοντα εργαλεία ή να προσθέσουν καινούρια εργαλεία. Με το πρωτόκολλο απομακρυσμένης αποσφαλμάτωσης μπορείτε να  σχεδιάσετε τους δικούς σας πελάτες και εξυπηρετητές αποσφαλματώσης. Επίσης σας δίνει τη δυνατότητα να αποσφαλματώσετε ιστοσελίδες χρησιμοποιώντας δικά σας εργαλεία ή να αποσφαλματώσετε διαφορετικούς στόχους χρησιμοποιώντας τα εργαλεία του Firefox.

- -
-
Προσθέστε ένα νέο πίνακα στα εργαλεία προγραμματιστή
-
Γράψτε ένα πρόσθετο που προσθέτει έναν πίνακα στην εργαλειοθήκη.
-
- -
-
Πρωτόκολλο Απομακρυσμένης Αποσφαλμάτωσης
-
Το πρωτόκολλο που χρησιμοποιείται για να συνδέει τα εργαλεία του προγραμματιστή του   Firefox με τους στόχους αποσφαλμάτωσης π.χ όπως ο περιηγητής Firefox ή μία συσκευή με λειτουργικό Firefox.
-
Επεξεργαστής πηγαίου κώδικα
-
Μία έκδοση ενός επεξεργαστή κώδικα  στον Firefox η οποιά μπορεί να  ενσωματωθεί στα πρόσθετά σας.
-
The Debugger Interface
-
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
-
Web Console custom output
-
How to extend and customize the output of the Web Console and the Browser Console.
-
Example devtools add-ons
-
Use these examples to understand how to implement a devtools add-on.
-
-
-
- -
-

Περισσότεροι πόροι

- -

Αυτό το κεφάλαιο αναφέρει πόρους που δεν υποστηρίζονται από την ομάδα των εργαλείων του προγραμματιστή του Mozilla, αλλά οι οποίοι χρησιμοποιούνται ευρέως από τους προγραμματιστές του ιστού. Έχουμε συμπεριλάβει μερικά από τα πρόσθετα του Firefox σε αυτή τη λίστα, αλλά για την ολοκληρωμένη λίστα δείτε την κατηγορία: "Προγραμματισμός Ιστού" στα πρόσθετα του mozilla.org.

- -
-
-
-
Firebug
-
Ένα δημοφιλές και πολύ δυνατό εργαλείο προγραμματισμού του ιστού, το οποίο συμπεριλαμβάνει τον JavaScript διορθωτή σφαλμάτων κώδικα, HTML και  CSS θεατή και επεξεργαστή και παρακολούθηση δικτύου.
-
Επιθεωρητής DOM
-
Επιθεώρησε, δες και επεξεργάσου την DOM στις ιστοσελίδες ή  XUL(XML Mozilla) παράθυρα.
-
Προγραμματιστής Ιστού
-
Προσθέτει ένα μενού επιλογών και μια εργαλειοθήκη στον περιηγητή με διάφορα εργαλεία για τους προγραμματιστές του ιστού.
-
-
- -
-
-
Εργαλεία Δημιουργίας Ιστού
-
Ένα σετ από εργαλεία που αναπτύχθηκαν απο τον Mozilla, το οποίο στοχεύει στον να ξεκινήσουν οι άνθρωποι να ασχολούνται με τον προγραμματισμού του ιστού.
-
W3C Eπικυρωτής
-
Η W3C ιστοσελίδα φιλοξενεί ένα μεγάλο αριθμό από εργαλεία για να ελέγξεις την εγκυρότητα του ιστότοπού σου, συμπεριλαμβανομένων των  HTML και CSS.
-
JSHint (Υπόδειξη JS)
-
Εργαλέιο ανάλυσης του κώδικα JavaScript.
-
-
-
- - - -
    -
  1. Creating - -
      -
    1. Scratchpad
      2. -
    2. Style Editor
      3. -
    3. Shader Editor
      4. -
    -
    2. -
  2. Debugging -
      -
    1. Page Inspector
      2. -
    2. Web Console
      3. -
    3. Debugger
      4. -
    4. Network Monitor
      5. -
    5. Developer Toolbar
      6. -
    6. 3D View
      7. -
    -
    3. -
  3. Mobile -
      -
    1. App Manager
      2. -
    2. Firefox for Android
      3. -
    3. Firefox OS Simulator
      4. -
    4. Responsive Design View
      5. -
    -
    4. -
  4. Performance -
      -
    1. Profiler
      2. -
    2. Paint Flashing Tool
      3. -
    3. Reflow Event Logging
      4. -
    4. Network Performance
      5. -
    -
    5. -
  5. Debugging the browser -
      -
    1. Browser Console
      2. -
    2. Browser Toolbox
      3. -
    -
    6. -
  6. Extending the devtools -
      -
    1. Adding a panel to the toolbox
      2. -
    2. Example devtools add-ons
      3. -
    3. Remote Debugging Protocol
      4. -
    4. Stream Transport
      5. -
    5. Source Editor
      6. -
    6. The Debugger Interface
      7. -
    7. Web Console custom output
      8. -
    -
    7. -
  7. Settings
    8. -
  8. Release notes
    9. -
-- cgit v1.2.3-54-g00ecf