diff options
Diffstat (limited to 'files/el')
55 files changed, 0 insertions, 6730 deletions
diff --git a/files/el/_redirects.txt b/files/el/_redirects.txt deleted file mode 100644 index 41726bc42b..0000000000 --- a/files/el/_redirects.txt +++ /dev/null @@ -1,22 +0,0 @@ -# DO NOT EDIT THIS FILE MANUALLY. -# Use the CLI instead: -# -# yarn content add-redirect <fromURL> <toURL> -# -# FROM-URL TO-URL -/el/docs/Glossary/Δείκτης /el/docs/Glossary/Index -/el/docs/Glossary/Προσβασιμότητα /el/docs/Glossary/Accessibility -/el/docs/Learn/Common_questions/Πώς_δουλεύει_το_Διαδίκτυο /el/docs/Learn/Common_questions/How_does_the_Internet_work -/el/docs/Learn/Common_questions/Σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης /el/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines -/el/docs/Learn/Common_questions/Τι_είναι_οι_υπερσύνδεσμοι /el/docs/Learn/Common_questions/What_are_hyperlinks -/el/docs/Learn/HTML/Forms /el/docs/Learn/Forms -/el/docs/Learn/HTML/Forms/Επικύρωση_δεδομένων_φόρμας /el/docs/Learn/Forms/Form_validation -/el/docs/Learn/JavaScript/Πρώτα_βήματα /el/docs/Learn/JavaScript/First_steps -/el/docs/MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN /el/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account -/el/docs/MDN/Getting_started /el/docs/MDN/Contribute/Getting_started -/el/docs/MDN_at_ten /el/docs/MDN/At_ten -/el/docs/Mozilla/Πρόσθετα /el/docs/Mozilla/Add-ons -/el/docs/Web/JavaScript/Reference/Functions/Προεπιλεγμένες_παράμετροι /el/docs/Web/JavaScript/Reference/Functions/Default_parameters -/el/docs/en /en-US/ -/el/docs/Εργαλεία /el/docs/Tools -/el/docs/Εργαλεία/about:debugging /el/docs/Tools/about:debugging diff --git a/files/el/_wikihistory.json b/files/el/_wikihistory.json deleted file mode 100644 index 1cdc976a85..0000000000 --- a/files/el/_wikihistory.json +++ /dev/null @@ -1,356 +0,0 @@ -{ - "Glossary": { - "modified": "2020-10-07T11:07:46.598Z", - "contributors": [ - "peterbe", - "SphinxKnight", - "wbamberg", - "Epameinondas-Soufleros", - "klez" - ] - }, - "Glossary/AJAX": { - "modified": "2019-03-23T22:21:36.224Z", - "contributors": [ - "dspentzos" - ] - }, - "Glossary/Abstraction": { - "modified": "2019-03-23T22:30:01.944Z", - "contributors": [ - "Epameinondas-Soufleros" - ] - }, - "Glossary/Accessibility": { - "modified": "2019-03-18T21:43:32.407Z", - "contributors": [ - "ValentinHacker" - ] - }, - "Glossary/Computer_Programming": { - "modified": "2019-03-23T22:30:01.059Z", - "contributors": [ - "Epameinondas-Soufleros" - ] - }, - "Glossary/ECMA": { - "modified": "2019-03-23T22:30:01.699Z", - "contributors": [ - "Epameinondas-Soufleros" - ] - }, - "Glossary/Falsy": { - "modified": "2019-03-23T22:24:42.968Z", - "contributors": [ - "SpirosBaden" - ] - }, - "Glossary/HTML": { - "modified": "2019-03-23T22:30:01.581Z", - "contributors": [ - "Epameinondas-Soufleros" - ] - }, - "Glossary/Hoisting": { - "modified": "2019-03-23T22:08:53.838Z", - "contributors": [ - "mathiou", - "mplexus" - ] - }, - "Glossary/Index": { - "modified": "2019-01-17T02:27:54.053Z", - "contributors": [ - "ValentinHacker" - ] - }, - "Glossary/Java": { - "modified": "2019-03-23T22:09:04.953Z", - "contributors": [ - "mplexus" - ] - }, - "Glossary/Null": { - "modified": "2020-03-23T10:56:53.087Z", - "contributors": [ - "K.Gialouris" - ] - }, - "Glossary/ltr": { - "modified": "2019-03-23T22:16:47.243Z", - "contributors": [ - "ncdempelis" - ] - }, - "Learn": { - "modified": "2020-07-16T22:43:39.483Z", - "contributors": [ - "dspentzos", - "SphinxKnight", - "hermesorder", - "sideshowbarker" - ] - }, - "Learn/Common_questions": { - "modified": "2020-07-16T22:35:22.667Z", - "contributors": [ - "stephaniehobson" - ] - }, - "Learn/Common_questions/How_does_the_Internet_work": { - "modified": "2020-07-16T22:35:36.513Z", - "contributors": [ - "Amalchen" - ] - }, - "Learn/Common_questions/Pages_sites_servers_and_search_engines": { - "modified": "2020-07-16T22:35:39.520Z", - "contributors": [ - "Amalchen" - ] - }, - "Learn/Common_questions/What_are_hyperlinks": { - "modified": "2020-07-16T22:35:42.895Z", - "contributors": [ - "Amalchen" - ] - }, - "Learn/Forms": { - "modified": "2020-07-16T22:20:55.179Z", - "contributors": [ - "Jeffrey_Yang" - ] - }, - "Learn/Forms/Form_validation": { - "modified": "2020-07-16T22:21:48.424Z", - "contributors": [ - "stratis-vip" - ] - }, - "Learn/Getting_started_with_the_web": { - "modified": "2020-07-16T22:33:50.911Z", - "contributors": [ - "c-vradis" - ] - }, - "Learn/HTML": { - "modified": "2020-07-16T22:22:16.075Z", - "contributors": [ - "Sheppy" - ] - }, - "Learn/JavaScript": { - "modified": "2020-07-16T22:29:37.459Z", - "contributors": [ - "k33theod" - ] - }, - "Learn/JavaScript/First_steps": { - "modified": "2020-07-16T22:29:49.269Z", - "contributors": [ - "kriminals" - ] - }, - "MDN": { - "modified": "2019-03-24T00:08:44.846Z", - "contributors": [ - "wbamberg", - "Jeremie", - "teoli", - "syssgx" - ] - }, - "MDN/About": { - "modified": "2019-09-10T08:52:06.488Z", - "contributors": [ - "SphinxKnight", - "wbamberg", - "dspentzos" - ] - }, - "MDN/At_ten": { - "modified": "2019-03-23T22:31:03.705Z", - "contributors": [ - "andreaschoukas" - ] - }, - "MDN/Contribute": { - "modified": "2020-12-14T09:31:01.805Z", - "contributors": [ - "wbamberg", - "chrisdavidmills" - ] - }, - "MDN/Contribute/Getting_started": { - "modified": "2020-09-30T17:09:53.346Z", - "contributors": [ - "chrisdavidmills", - "kmavrikakis", - "wbamberg", - "dspentzos", - "ValentinHacker", - "Jeremie", - "jswisher", - "stayros" - ] - }, - "MDN/Contribute/Howto": { - "modified": "2020-12-14T11:30:11.595Z", - "contributors": [ - "wbamberg", - "Sheppy" - ] - }, - "Mozilla": { - "modified": "2019-03-23T23:34:03.331Z", - "contributors": [ - "teoli", - "nikvourlos.gr", - "ethertank" - ] - }, - "Mozilla/Add-ons": { - "modified": "2019-09-09T11:54:45.286Z", - "contributors": [ - "SphinxKnight", - "dspentzos" - ] - }, - "Tools": { - "modified": "2020-07-16T22:44:14.171Z", - "contributors": [ - "SphinxKnight", - "sotos", - "gremlin", - "sro", - "Simaioforos", - "dspentzos" - ] - }, - "Tools/about:debugging": { - "modified": "2020-07-16T22:36:32.137Z", - "contributors": [ - "minasloykas65" - ] - }, - "Web": { - "modified": "2019-03-23T23:26:04.468Z", - "contributors": [ - "ethertank" - ] - }, - "Web/API": { - "modified": "2019-03-23T23:19:20.206Z", - "contributors": [ - "teoli" - ] - }, - "Web/API/CanvasRenderingContext2D": { - "modified": "2019-03-23T22:18:55.663Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/API/CanvasRenderingContext2D/imageSmoothingEnabled": { - "modified": "2019-03-23T22:18:54.552Z", - "contributors": [ - "theodoros_1234" - ] - }, - "Web/API/Geolocation": { - "modified": "2019-03-23T22:59:10.619Z", - "contributors": [ - "fscholz" - ] - }, - "Web/API/Geolocation/getCurrentPosition": { - "modified": "2019-03-23T22:44:30.774Z", - "contributors": [ - "giatzo1702" - ] - }, - "Web/CSS": { - "modified": "2019-09-11T03:35:20.869Z", - "contributors": [ - "SphinxKnight", - "MariosPitsali", - "AlexKapellas" - ] - }, - "Web/HTML": { - "modified": "2020-12-14T11:30:16.619Z", - "contributors": [ - "SphinxKnight" - ] - }, - "Web/HTML/Element": { - "modified": "2020-12-14T06:30:14.256Z", - "contributors": [ - "chrisdavidmills" - ] - }, - "Web/HTML/Element/embed": { - "modified": "2020-12-05T05:47:59.307Z", - "contributors": [ - "chefkafantaris.gr" - ] - }, - "Web/JavaScript": { - "modified": "2020-04-15T17:15:42.022Z", - "contributors": [ - "tassosvallas", - "SphinxKnight", - "webfornet", - "masmanidis" - ] - }, - "Web/JavaScript/Reference": { - "modified": "2020-03-12T19:46:27.026Z", - "contributors": [ - "sideshowbarker" - ] - }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T22:02:48.163Z", - "contributors": [ - "utkarshbhatt12" - ] - }, - "Web/JavaScript/Reference/Functions/Default_parameters": { - "modified": "2020-10-15T22:02:41.992Z", - "contributors": [ - "mankal111" - ] - }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:46:50.495Z", - "contributors": [ - "fscholz" - ] - }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-03-12T19:46:26.398Z", - "contributors": [ - "mathiou" - ] - }, - "Web/JavaScript/Reference/Operators/Comma_Operator": { - "modified": "2020-03-12T19:46:47.274Z", - "contributors": [ - "wheniturnintoamartian" - ] - }, - "Web/Tutorials": { - "modified": "2019-03-18T21:31:21.372Z", - "contributors": [ - "dspentzos" - ] - }, - "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { - "modified": "2019-01-17T03:15:07.858Z", - "contributors": [ - "wbamberg", - "dspentzos" - ] - } -} diff --git a/files/el/glossary/abstraction/index.html b/files/el/glossary/abstraction/index.html deleted file mode 100644 index 51aa77f531..0000000000 --- a/files/el/glossary/abstraction/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Αφαίρεση -slug: Glossary/Abstraction -translation_of: Glossary/Abstraction ---- -<p>Η αφαίρεση στον {{Glossary("computer programming", "προγραμματισμό υπολογιστών")}} είναι ένας τρόπος για να μειώνεται η πολυπλοκότητα και για να σχεδιάζονται και να υλοποιούνται περίπλοκα υπολογιστικά συστήματα με μεγαλύτερη ευκολία, κρύβοντας την τεχνική πολυπλοκότητα των συστημάτων πίσω από απλούστερα {{Glossary("API", "API")}}.</p> diff --git a/files/el/glossary/accessibility/index.html b/files/el/glossary/accessibility/index.html deleted file mode 100644 index c4dfdd8837..0000000000 --- a/files/el/glossary/accessibility/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Προσβασιμότητα -slug: Glossary/Accessibility -tags: - - Γλωσσάριο - - Προσβασιμότητα -translation_of: Glossary/Accessibility -original_slug: Glossary/Προσβασιμότητα ---- -<p><em>Η Προσβασιμότητα Ιστού</em> (<strong>A11Y</strong>) αναφέρεται στις καλύτερες τεχνικές διατήρησης της λειτουργικότητας μιας ιστοσελίδας παρά τους φυσικούς και τεχνικούς περιορισμούς. Η Προσβασιμότητα Ιστού ορίζεται τυπικά και συζητείται στο {{Glossary("W3C")}} διά μέσου της {{Glossary("WAI","Πρωτοβουλίας Προσβασιμότητας Διαδικτύου")}} (ΠΠΔ).</p> - -<h2 id="Learn_more">Learn more</h2> - -<h3 id="General_knowledge">General knowledge</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility">Πηγές "Προσβασιμότητας Ιστού" του MDN</a></li> - <li><<{{Interwiki("wikipedia", "Web accessibility")}}>> στην <a href="https://el.wikipedia.org/wiki/%CE%A0%CF%8D%CE%BB%CE%B7:%CE%9A%CF%8D%CF%81%CE%B9%CE%B1" rel="external">Βικιπέδια</a></li> -</ul> - -<h3 id="Learn_web_accessibility">Learn web accessibility</h3> - -<ul> - <li><a href="http://webaim.org/" rel="external">Προσβασιμότητα Ιστού In Mind</a></li> -</ul> - -<h3 id="Technical_reference">Technical reference</h3> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA">Η ARIA τεκμηρίωση στο MDN</a></li> - <li><a href="http://www.w3.org/WAI/" rel="external">Η αρχική σελίδα της Πρωτοβουλίας της Προσβασιμότητας Ιστού στο MDN</a></li> - <li><a href="http://www.w3.org/TR/wai-aria/" rel="external">Η σύσταση WAI-ARIA</a></li> -</ul> diff --git a/files/el/glossary/ajax/index.html b/files/el/glossary/ajax/index.html deleted file mode 100644 index c10e807964..0000000000 --- a/files/el/glossary/ajax/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: AJAX -slug: Glossary/AJAX -tags: - - AJAX - - 'l10n:priority' - - Γλωσσάρι - - Δομή - - Κώδικας -translation_of: Glossary/AJAX ---- -<p>Το AJAX (Asynchronous {{glossary("JavaScript")}} And {{glossary("XML")}} - Ασύγχρονο {{glossary("JavaScript")}} και {{glossary("XML")}}) είναι μια προγραμματιστική πρακτική συνδυασμού του {{glossary("HTML")}}, του {{glossary("CSS")}}, του JavaScript, του {{glossary("DOM")}} και του αντικειμένου ({{glossary("object")}}) <code>XMLHttpRequest</code>, ώστε να δημιουργηθούν πιο περίπλοκες ιστοσελίδες. Το AJAX σάς επιτρέπει να ενημερώσετε ορισμένα μέρη της ιστοσελίδας, αντί να χρειαστεί να επαναφορτώσετε ολόκληρη τη σελίδα. Το AJAX σάς επιτρέπει επίσης να εργάζεστε ασύγχρονα, δηλαδή ο κώδικάς σας εξακολουθεί να εκτελείται, ενώ κάποιο μέρος της ιστοσελίδας σας προσπαθεί να φορτωθεί εκ νέου (σε σύγκριση με την συγχρονισμένη εργασία όπου ο κώδικάς σας δεν εκτελείται μέχρι να ολοκληρωθεί η φόρτωση του μέρους της ιστοσελίδας σας).</p> - -<h2 id="Μάθετε_περισσότερα">Μάθετε περισσότερα</h2> - -<h3 id="Γενική_γνώση">Γενική γνώση</h3> - -<ul> - <li>Το {{interwiki("wikipedia", "AJAX")}} στη Βικιπαίδεια</li> - <li><a href="http://peoplesofttutorial.com/difference-between-synchronous-and-asynchronous-messaging/">Συγχρονισμένες vs. ασύγχρονες επικοινωνίες</a></li> -</ul> - -<h3 id="Τεχνικές_πληροφορίες">Τεχνικές πληροφορίες</h3> - -<ul> - <li>Το αντικείμενο (object) {{domxref("XMLHttpRequest")}}</li> - <li><a href="/en-US/docs/AJAX">Η τεκμηρίωση του AJAX στο MDN</a></li> -</ul> diff --git a/files/el/glossary/computer_programming/index.html b/files/el/glossary/computer_programming/index.html deleted file mode 100644 index 5274c509c2..0000000000 --- a/files/el/glossary/computer_programming/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Προγραμματισμός υπολογιστών -slug: Glossary/Computer_Programming -tags: - - γλώσσα προγραμματισμού - - προγραμματισμός - - προγραμματισμός υπολογιστών -translation_of: Glossary/Computer_Programming ---- -<p>Ο προγραμματισμός είναι μια διαδικασία με την οποία διατυπώνεται η λύση ενός υπολογιστικού προβλήματος ή αυτοματοποιείται μια επαναλαμβανόμενη εργασία ως ακολουθία οδηγιών σε ένα εκτελέσιμο πρόγραμμα.</p> - -<h2 id="Περισσότερα">Περισσότερα</h2> - -<h3 id="Γενική_γνώση">Γενική γνώση</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Προγραμματισμός")}} στη Βικιπαίδεια</li> -</ul> diff --git a/files/el/glossary/ecma/index.html b/files/el/glossary/ecma/index.html deleted file mode 100644 index f3083147bc..0000000000 --- a/files/el/glossary/ecma/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: ECMA -slug: Glossary/ECMA -tags: - - Γλωσσάρι -translation_of: Glossary/ECMA ---- -<p>Η <strong>Ecma International</strong> (επισήμως <em>European Computer Manufacturers Association</em>) είναι ένας μη κερδοσκοπικός οργανισμός που αναπτύσσει πρότυπα για υλισμικό, επικοινωνίες και γλώσσες προγραμματισμού.</p> - -<p>Στον Ιστό είναι γνωστή ως ο φορέας που τηρεί την <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm">προδιαγραφή ECMA-262</a> (βλ. {{Glossary("ECMAScript")}}), γνωστή ως προδιαγραφή τής γλώσσας {{Glossary("JavaScript")}}.</p> - -<h2 id="Περισσότερα">Περισσότερα</h2> - -<ul> - <li>{{interwiki("wikipedia", "Ecma_International", "Ecma International")}} στη Βικιπαίδεια</li> - <li><a href="http://www.ecma-international.org/">Ιστότοπος της Ecma International</a></li> -</ul> diff --git a/files/el/glossary/falsy/index.html b/files/el/glossary/falsy/index.html deleted file mode 100644 index 9eec983c4a..0000000000 --- a/files/el/glossary/falsy/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Falsy -slug: Glossary/Falsy -tags: - - falsy -translation_of: Glossary/Falsy ---- -<p>F<strong>alsy</strong> τιμή, είναι μια τιμή η οποία επιστρέφει false σε {{Glossary("Boolean")}} βρόγχους.</p> - -<p>H {{Glossary("JavaScript")}} χρησιμοποιεί τύπους {{Glossary("Type_Conversion", "coercion")}} στους Boolean βρόγχους.</p> - -<h2 id="Παραδείγματα">Παραδείγματα</h2> - -<p>Παραδείγματα απο <em>falsy</em> τιμές στην JavaScript (που επιστρέφουν false και έτσι <em>παρακάμπτουν</em> το <code>if</code> block):</p> - -<pre class="brush: js">if (false) -if (null) -if (undefined) -if (0) -if (NaN) -if ('') -if ("") -if (document.all) [1]</pre> - -<p>To [1] <code>document.all</code> έχει χρησιμοποιηθεί στο παρελθόν για την αναγνώριση του περιηγητή και το <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#dom-document-all">HTML specification defines a willful violation</a> απο το πρότυπο ECMAScript, για λόγους συμβατότητας με παλιότερους κώδικες (<code>if (document.all) { // Internet Explorer κώδικας }</code> ή με τη χρήση του <code>document.all</code> χωρίς να γίνεται πρώτα έλεγχος: <code>document.all.foo</code>).</p> - -<p>Μερικές φορές φράφεται <strong>falsey</strong>, αν και στα αγγλικά συνήθως μετατρέποντας μια λέξη σε επίθετο με ένα -y, το τελικό <em>e</em> φεύγει (noise => noisy, ice => icy, shine => shiny)</p> - -<h2 id="Μάθετε_περισσότερα">Μάθετε περισσότερα</h2> - -<ul> - <li>{{Glossary("Truthy")}}</li> - <li>{{Glossary("Type_Conversion", "Coercion")}}</li> - <li>{{Glossary("Boolean")}}</li> -</ul> diff --git a/files/el/glossary/hoisting/index.html b/files/el/glossary/hoisting/index.html deleted file mode 100644 index c777c4cb00..0000000000 --- a/files/el/glossary/hoisting/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Hoisting -slug: Glossary/Hoisting -translation_of: Glossary/Hoisting ---- -<p>Η ανύψωση(Hoisting) είναι ένας όρος που <em>δεν</em> χρησιμοποιείται σε καμία γραπτή κανονιστική προδιαγραφή πριν από την <a href="http://www.ecma-international.org/ecma-262/6.0/index.html">ECMAScript® 2015 Language Specification</a>. Η ανύψωση εφευρέθηκε σαν μια γενική έννοια που περιγράφει το πως δουλεύει το περιβάλλον εκτέλεσης στην JavaScript (ειδικά οι φάσεις της δημιουργίας και της εκτέλεσης) . Αλλά, στην πράξη η έννοια αυτή οδηγεί σε παρεξηγήσεις. Για παράδειγμα, η ανύψωση περιγράφει ότι οι δηλώσεις των μεταβλητών και των μεθόδων μετακινούνται "φυσικά" στην κορυφή του κώδικά, αλλά κάτι τέτοιο δεν συμβαίνει καθόλου. Αυτό που πρακτικά συμβαίνει είναι ότι οι δηλώσεις των μεταβλητών και των μεθόδων τοποθετούνται στην μνήμη κατά τη διάρκεια της φάσης της <u>μεταγλώττισης</u>, αλλά μένουν ακριβώς εκεί όπου δηλώθηκαν μέσα στον κώδικα.</p> - -<h2 id="Μάθε_περισσότερα">Μάθε περισσότερα</h2> - -<h3 id="Τεχνικό_παράδειγμα">Τεχνικό παράδειγμα</h3> - -<p>Ένα από τα πλεονεκτήματα του να τοποθετεί η JavaScript τις δηλώσεις των μεθόδων στη μνήμη πριν να εκτελέσει οποιοδήποτε κωμάτι κώδικα είναι ότι έτσι σου επιτρέπει να χρησιμοποιήσεις τη μέθοδο πριν να την δηλώσεις στον κώδικά σου. Για παράδειγμα:</p> - -<pre class="brush: js">function catName(name) { - console.log("My cat's name is " + name); -} - -catName("Tigger"); -/* -Το αποτέλεσμα του παραπάνω κώδικα είναι: "My cat's name is Tigger" -*/ -</pre> - -<p>Το παραπάνω απόσπασμα κώδικα είναι όπως θα προσδοκούσες να έχεις γράψει τον κώδικα για να δουλέψει. Τώρα, ας δούμε τι γίνεται όταν καλούμε την μέθοδο πριν την γράψουμε:</p> - -<pre class="brush: js">catName("Chloe"); - -function catName(name) { - console.log("My cat's name is " + name); -} -/* -Το αποτέλεσμα του παραπάνω κώδικα είναι: "My cat's name is Chloe" -*/ -</pre> - -<p>Ενώ στον κώδικά μας πρώτα καλούμε την μέθοδο, προτού δηλωθεί η μέθοδος, ο κώδικας εξακολουθεί να δουλεύει. Αυτό συμβαίνει εξ αιτίας του τρόπου που δουλεύει το περιβάλλον εκτέλεσης στην JavaScript.</p> - -<p>Η ανύψωση δουλεύει επίσης καλά και με άλλους τύπους δεδομένων και μεταβλητών. Οι μεταβλητές μπορούν να αρχικοποιούνται και να χρησιμοποιούνται πριν δηλωθούν. Αλλά δεν μπορούν να χρησιμοποιηθούν χωρίς να έχουν αρχικοποιηθεί.</p> - -<h3 id="Τεχνικό_παράδειγμα_2">Τεχνικό παράδειγμα</h3> - -<pre class="brush: js">num = 6; -num + 7; -var num; -/* δεν δίνει λάθος εφ' όσον η μεταβλητή num είναι δηλωμένη */ - -</pre> - -<p><u>Η JavaScript ανυψώνει μόνο δηλώσεις όχι αρχικοποιήσεις.</u> Αν χρησιμοποιείς μία μεταβλητή που δηλώνεται και αρχικοποιείται μετά από την χρήση της, η τιμή της θα είναι undefined. Τα παρακάτω δύο παραδείγματα δείχνουν αυτή τη συμπεριφορά.</p> - -<pre class="brush: js">var x = 1; // Initialize x -console.log(x + " " + y); // '1 undefined' -var y = 2; - - -// Ο παρακάτω κώδικας θα συμπεριφερθεί το ίδιο όπως και ο προηγούμενος κώδικας: -var x = 1; // Initialize x -var y; // Declare y -console.log(x + " " + y); // '1 undefined' -y = 2; // Initialize y -</pre> - -<h3 id="Τεχνικές_αναφορές">Τεχνικές αναφορές</h3> - -<ul> - <li><a href="https://www.udemy.com/understand-javascript/">JavaScript: Understanding the Weird Parts</a> - Udemy.com Course</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var">var statement</a> - MDN</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> - MDN</li> -</ul> diff --git a/files/el/glossary/html/index.html b/files/el/glossary/html/index.html deleted file mode 100644 index 8eb9befa39..0000000000 --- a/files/el/glossary/html/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: HTML -slug: Glossary/HTML -tags: - - HTML - - Γλωσσάρι -translation_of: Glossary/HTML ---- -<p>Η HTML (HyperText Markup Language) είναι μια γλώσσα που περιγράφει τη δομή μιας ιστοσελίδας.</p> - -<h2 id="Σύντομο_ιστορικό">Σύντομο ιστορικό</h2> - -<p>Το 1990, στο πλαίσιο του οράματός του για τον {{glossary("World Wide Web","Ιστό")}}, ο Tim Berners-Lee επινόησε την έννοια {{glossary("hypertext", "υπερκείμενο")}}, την οποία τυποποίησε ένα έτος αργότερα, ορίζοντας μια γλώσσα επισημείωσης η οποία βασιζόταν κυρίως στην {{glossary("SGML")}}. Η {{glossary("IETF")}} άρχισε να προδιαγράφει την HTML το 1993 και τελικά, μετά από αρκετά σχέδια, κυκλοφόρησε την έκδοση 2.0 το 1995. Το 1994 ο Berners-Lee ίδρυσε το {{glossary("W3C")}} ως φορέα ανάπτυξης του Ιστού. Το 1996, το W3C ανέλαβε όσες εργασίες σχετίζονταν με την HTML και ένα έτος αργότερα δημοσίευσε τη Σύσταση HTML 3.2. Το 1999 κυκλοφόρησε η HTML 4.0, η οποία καθιερώθηκε ως πρότυπο {{glossary("ISO")}} το 2000.</p> - -<p>Εκείνη την εποχή, το W3C σχεδόν εγκατέλειψε την HTML και πρόκρινε την {{glossary("XHTML")}}, δίνοντας αφορμή για την ίδρυση ενός ανεξάρτητου ομίλου με την ονομασία {{glossary("WHATWG")}} το 2004. Χάρη στο WHATWG συνεχίστηκε η δουλειά για την {{glossary("HTML5")}}. Οι δύο οργανισμοί κυκλοφόρησαν το πρώτο σχέδιο της γλώσσας το 2008 και το τελικό πρότυπο το 2014.</p> - -<h2 id="Δομή_και_σύνταξη">Δομή και σύνταξη</h2> - -<p>Ένα έγγραφο HTML είναι ένα έγγραφο κειμένου το οποίο απαρτίζεται από {{glossary("element","στοιχεία")}}. Ένα στοιχείο οριοθετείται από δύο {{Glossary("tag","ετικέτες")}}, καθεμιά από τις οποίες περικλείεται σε γωνιώδεις αγκύλες (<code><></code>). Ορισμένα, όμως, στοιχεία είναι <em>κενά</em>, δηλαδή δεν περιέχουν κείμενο –για παράδειγμα, το στοιχείο {{htmlelement("img")}}.</p> - -<p>Οι ετικέτες της HTML μπορούν να εμπλουτιστούν με {{Glossary("attribute","χαρακτηριστικά")}}, με τα οποία παρέχονται πρόσθετες πληροφορίες που επηρεάζουν τον τρόπο με τον οποίο ο περιηγητής ερμηνεύει το στοιχείο:</p> - -<p><img alt="Detail of the structure of an HTML element" src="https://mdn.mozillademos.org/files/7659/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> - -<p>Ένα αρχείο HTML αποθηκεύεται με επέκταση <code>.htm</code> ή <code>.html</code>, διακομίζεται από έναν {{Glossary("Server","διακομιστή Ιστού")}} και αποδίδεται από έναν {{Glossary("Browser","περιηγητή Ιστού")}}.</p> - -<h2 id="Περισσότερα">Περισσότερα</h2> - -<h3 id="Γενικές_γνώσεις">Γενικές γνώσεις</h3> - -<ul> - <li>{{interwiki("wikipedia", "HTML", "HTML")}} στη Βικιπαίδεια</li> -</ul> - -<h3 id="Εκμάθηση_HTML">Εκμάθηση HTML</h3> - -<ul> - <li><a href="http://developer.mozilla.org/en-US/Learn/HTML">Πρόγραμμα της Mozilla για την εκμάθηση της HTML</a></li> - <li><a href="http://www.codecademy.com/en/tracks/web" rel="external">Πρόγραμμα του codecademy.com για την εκμάθηση του Ιστού</a></li> -</ul> - -<h3 id="Τεχνικές_παραπομπές">Τεχνικές παραπομπές</h3> - -<ul> - <li><a href="/en-US/docs/Web/HTML">Έγγραφα του MDN για την HTML</a></li> - <li><a href="http://www.w3.org/TR/html5/" rel="external">Προδιαγραφή της HTML</a></li> -</ul> diff --git a/files/el/glossary/index.html b/files/el/glossary/index.html deleted file mode 100644 index 74ef2ee208..0000000000 --- a/files/el/glossary/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Glossary -slug: Glossary -tags: - - Γλωσσάρι - - αρχάριοι - - ευρετήριο -translation_of: Glossary ---- -<div style="max-width: 300px; float: right; margin: 0 0 .5em 1em;">{{LearnBox({"title":"Μάθε έναν νέο όρο:"})}}</div> - -<p>Για τις τεχνολογίες τού Ιστού υπάρχουν πάρα πολλοί όροι και ακρωνύμια, που χρησιμοποιούνται στην τεκμηρίωση και στον κώδικα. Στο παρόν γλωσσάρι δίνονται ορισμοί λέξεων και ακρωνυμίων που χρειάζεται να γνωρίζει κάποιος για να κατανοεί επαρκώς τον Ιστό και να συμβάλλει σε αυτόν.</p> - -<p>{{GlossaryList({"split":"h3", "css":"multiColumnList"})}}</p> - -<h2 id="Συνεισφορά_στο_γλωσσάρι">Συνεισφορά στο γλωσσάρι</h2> - -<p>Αυτό το γλωσσάρι βρίσκεται διαρκώς υπό επεξεργασία και εμπλουτισμό. Μπορείς να συνεισφέρεις <a href="/en-US/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">γράφοντας νέους όρους</a> ή βελτιώνοντας τους υπάρχοντες. Μπορείς να ξεκινήσεις εύκολα πατώντας το παρακάτω κουμπί ή επιλέγοντας έναν από τους προτεινόμενους όρους, παρακάτω.</p> - -<p><strong><a href="/en-US/docs/new?parent=4391">Προσθήκη νέου όρου στο γλωσσάρι</a></strong></p> - -<p>{{GlossaryList({"terms":["character encoding","DMZ","event","HMAC","condition","modem","OVP","TTL","Unicode"], "filter":"notdefined", "css":"multiColumnList"})}}</p> - -<p>Για να μάθεις περισσότερα για το πώς μπορείς να συνεισφέρεις στο γλωσσάρι, δες τη <a href="/en-US/docs/MDN/Doc_status/Glossary">σελίδα κατάστασης του γλωσσαρίου</a>.</p> diff --git a/files/el/glossary/index/index.html b/files/el/glossary/index/index.html deleted file mode 100644 index a7f08de7d9..0000000000 --- a/files/el/glossary/index/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Δείκτης -slug: Glossary/Index -tags: - - MDN Meta - - Γλωσσάριο - - Δείκτης - - Προσανατολισμός -translation_of: Glossary/Index -original_slug: Glossary/Δείκτης ---- -<p>{{Index("/en-US/docs/Glossary")}}</p> diff --git a/files/el/glossary/java/index.html b/files/el/glossary/java/index.html deleted file mode 100644 index 29c41a3eae..0000000000 --- a/files/el/glossary/java/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Java -slug: Glossary/Java -translation_of: Glossary/Java ---- -<p>H Java είναι μία {{glossary("OOP", "αντικειμενοστραφής")}}, φορητή γλώσσα {{Glossary("computer programming", "προγραμματισμού")}} βασισμένη σε {{Glossary("class", "κλάσεις")}}, σχεδιασμένη για ελάχιστες εξαρτήσεις στην υλοποίηση.</p> - -<h2 id="Μάθε_περισσότερα">Μάθε περισσότερα</h2> - -<h3 id="Γενικές_γνώσεις">Γενικές γνώσεις</h3> - -<ul> - <li>{{interwiki("wikipedia", "Java (programming language)", "Java")}} στην Wikipedia</li> -</ul> diff --git a/files/el/glossary/ltr/index.html b/files/el/glossary/ltr/index.html deleted file mode 100644 index be8f1d2c79..0000000000 --- a/files/el/glossary/ltr/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: ltr -slug: Glossary/ltr -translation_of: Glossary/ltr ---- -<p>ltr (από τα αριστερά προς τα δεξιά) είναι μια παράμετρος του {{glossary("locale")}} που μας δείχνει ότι το κείμενο γράφεται από τα αριστερά προς τα δεξιά. Π.χ., το <code>en-US</code> locale (Αγγλικά των Ηνωμένων Πολιτειών) καθορίζει από-αριστερά-προς-τα-δεξιά.</p> diff --git a/files/el/glossary/null/index.html b/files/el/glossary/null/index.html deleted file mode 100644 index 1a92b8d8f9..0000000000 --- a/files/el/glossary/null/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 'Null' -slug: Glossary/Null -translation_of: Glossary/Null ---- -<p>Στην επιστήμη των υπολογιστών, η τιμή <strong><code>null</code></strong> αντιπροσωπεύει την σκόπιμη αναφορά σε κάτι που δεν υπάρχει ή είναι μη έγκυρο αντικείμενο ή διεύθυνση. Η ακριβής σημασία της τιμής του null ποικίλει ανάλογα με την κάθε γλώσσα.</p> - -<p>Στην {{Glossary("JavaScript")}}, το null είναι μία απο τις {{Glossary("Primitive", "primitive values")}}, καθώς η συμπεριφορά της είναι πρωτόγονη. Απο την άλλη, ο σκοπός της είναι κάθε αλλο παρά πρωτόγονος, καθώς κάθε αντικείμενο προέρχεται απο την τιμή <code>null</code> και επομένως, ο έλεγχος του <code>typeof</code> επιστρέφει <code>"object"</code>:</p> - -<pre class="brush: js">typeof null === 'object'; // true</pre> - -<h2 id="Μάθετε_περισσότερα">Μάθετε περισσότερα</h2> - -<h3 id="Γενικές_γνώσεις">Γενικές γνώσεις</h3> - -<ul> - <li>{{Interwiki("wikipedia", "Null pointer")}} στη Wikipedia</li> -</ul> - -<h3 id="Τεχνική_αναφορά">Τεχνική αναφορά</h3> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Data_structures">JavaScript data types and data structures</a></li> - <li>The JavaScript global object: {{jsxref("null")}}</li> -</ul> 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 deleted file mode 100644 index de72dbcd54..0000000000 --- a/files/el/learn/common_questions/how_does_the_internet_work/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Πώς δουλεύει το Διαδίκτυο; -slug: Learn/Common_questions/How_does_the_Internet_work -tags: - - Αρχάριος - - Εκμάθηση - - Μηχανισμοί Ιστού -translation_of: Learn/Common_questions/How_does_the_Internet_work -original_slug: Learn/Common_questions/Πώς_δουλεύει_το_Διαδίκτυο ---- -<div class="summary"> -<p>Αυτό το άρθρο συζητά τι είναι το Διαδίκτυο και πώς δουλεύει.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Προαπαιτούμενα:</th> - <td>Κανένα, αλλά σας παροτρύνουμε να διαβάσετε το <a href="/en-US/docs/Learn/Thinking_before_coding">Άρθρο στη θέσπιση στόχων</a> πρώτα.</td> - </tr> - <tr> - <th scope="row">Ζητούμενο:</th> - <td>Θα μάθετε τα βασικά για την τεχνική υποδομή του Ιστού και τη διαφορά μεταξύ Διαδικτύου και Ιστού.</td> - </tr> - </tbody> -</table> - -<h2 id="Περίληψη">Περίληψη</h2> - -<p>Το Διαδίκτυο είναι η ραχοκοκαλιά του Ιστού, η τεχνική υποδομή που καθιστά τον Ιστό δυνατό. Στη βάση του, το Διαδίκτυο είναι ένα μεγάλο δίκτυο από υπολογιστές που επικοινωνούν όλοι μεταξύ τους.</p> - -<p><a href="http://en.wikipedia.org/wiki/Internet#History" rel="external">Η ιστορία του Διαδικτύου είναι κάπως ασαφής</a>. Ξεκίνησε στα 1960 ως ένα ερευνητικό έργο χρηματοδοτούμενο απ' τον στρατό των ΗΠΑ, μετά εξελίχθηκε σε μια δημόσια υποδομή στα 1980 με την υποστήριξη πολλών δημοσίων πανεπιστημίων και ιδιωτικών εταιριών. Οι διάφορες τεχνολογίες που υποστηρίζουν το Διαδίκτυο έχουν εξελιχθεί με το χρόνο, αλλά ο τρόπος που δουλεύει δεν έχει αλλάξει και πολύ: Διαδίκτυο είναι ένας τρόπος να συνδέεις υπολογιστές όλους μεταξύ τους, και να εξασφαλίζεις ότι, ό,τι κι αν συμβεί, βρίσκουν ένα τρόπο να παραμένουν συνδεδεμένοι.</p> - -<h2 id="Διαδραστική_Μαθηση">Διαδραστική Μαθηση</h2> - -<ul> - <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">Πώς δουλεύει το διαδίκτυο, σε 5 λεπτά</a>: Ένα 5 λεπτών βίντεο για την κατανόηση των πολύ βασικών εννοιών του Διαδικτύου απ' τον Άαρον Τίτους.</li> -</ul> - -<h2 id="Βαθύτερη_κατάδυση">Βαθύτερη κατάδυση</h2> - -<h3 id="Ένα_απλό_δίκτυο">Ένα απλό δίκτυο</h3> - -<p>Όταν δύο υπολογιστές χρειάζεται να επικοινωνήσουν, πρέπει να τους ενώσεις, είτε φυσικά (συνήθως με ένα <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">καλώδιο Ethernet</a>) είτε ασύρματα (για παράδειγμα με <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> ή <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> συστήματα). Όλοι οι σύγχρονοι υπολογιστές μπορούν να υποστηρίξουν οποιεσδήποτε από αυτές τις συνδέσεις.</p> - -<div class="note"> -<p><strong>Σημείωση:</strong> Για το υπόλοιπο αυτού του άρθρου, θα μιλήσουμε μόνο για φυσικά καλώδια, αλλά τα ασύρματα δίκτυα δουλεύουν παρόμοια.</p> -</div> - -<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> - -<p>Ένα τέτοιο δίκτυο δεν είναι περιορισμένο σε δύο υπολογιστές. Μπορείτε να συνδέσετε όσους υπολογιστές επιθυμείτε. Αλλά γίνεται πολύπλοκο γρήγορα. Εάν προσπαθείτε να συνδέσετε, πείτε, δέκα υπολογιστές, χρειάζετε 45 καλώδια, με εννέα πρίζες σε κάθε υπολογιστή!</p> - -<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> - -<p>Για να λυθεί αυτό το πρόγραμμα, κάθε υπολογστής σε ένα δίκτυο είναι συνδεδεμένος σε ένα ειδικό μικρό υπολογιστή που ονομάζεται <em>δρομολογητής</em> (<em>router</em>). Αυτός ο <em>δρομολογητής</em> έχει μόνο μια δουλειά: σαν ένα σηματοδότη σε σιδηροδρομικό σταθμό, εξασφαλίζει ότι ένα μήνυμα σταλμένο από έναν υπολογιστή φθάνει στο σωστό υπολογιστή προορισμού. Για να στείλει ένα μήνυμα στον υπολογιστή Β, ο υπολογιστής Α πρέπει να στείλει το μήνυμα στο δρομολογητή, ο οποίος με τη σειρά του προωθεί το μήνυμα στον υπολογιστή Β και σιγουρεύεται ότι το μήνυμα δεν παραδώθηκε στον υπολογιστή C.</p> - -<p>Μόλις προσθέσουμε ένα δρομολογητή στο σύστημα, το δίκτυο μας των 10 υπολογιστών απαιτεί μόνο 10 καλώδια: μία μονή πρίζα για κάθε υπολογιστή και ένα δρομολογητή με 10 βύσματα.</p> - -<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> - -<h3 id="Ένα_δίκτυο_δικτύων">Ένα δίκτυο δικτύων</h3> - -<p>Μέχρι εδώ καλά. Αλλά τι γίνεται με εκατοντάδες, χιλιάδες, εκατομμύριους υπολογιστές; Φυσικά ένας μόνος <em>δρομολογητής</em> δεν κλιμακώνεται τόσο πολύ, αλλά, αν διαβάσετε προσεκτικά, είπαμε ότι ένας<em> δρομολογητής</em> είναι ένας υπολογιστής όπως όλοι οι άλλοι, οπότε τι μας αποτρέπει απ' την ένωση δύο <em>δρομολογητών</em> μαζί; Τίποτα, οπότε ας το κάνουμε.</p> - -<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> - -<p>Συνδέοντας υπολογιστές σε δρομολογητές, είμαστε ικανοί να κλιμακώσουμε απεριόριστα.</p> - -<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> - -<p>Ένα τέτοιο δίκτυο έρχεται πολύ κοντά σε αυτό που ονομάζουμε το Διαδίκτυο, αλλά μας λείπει κάτι. Φτιάξαμε ένα δίκτυο για τους δικούς μας σκοπούς. Υπάρχουν και άλλα δικτύα εκεί έξω: οι φίλοι σας, οι γείτονές σας, όλοι μπορούν να έχουν το δικό τους δίκτυο από υπολογιστές. Αλλά δεν είναι πραγματικά εφικτό να εγκαταστήσετε καλώδια μεταξύ του σπιτιού σας και του υπόλοιπου κόσμου, όποτε πώς το διαχειρίζεστε; Λοιπόν, υπάρχουν ήδη καλώδια συνδεδεμένα με το σπίτι σας, για παράδειγμα, ηλεκτρικής ενέργειας και τηλεφώνου. Η τηλεφωνική υποδομή ήδη συνδέει το σπίτι σας με οποιονδήποτε στον κόσμο οπότε είναι το τέλειο καλώδιο που χρειαζόμαστε. Για να συνδέσουμε το δίκτυό μας στην τηλεφωνική υποδομή, χρειαζόμαστε ένα ειδικό κομμάτι εξοπλισμού που λέγεται <em>μόντεμ.</em> Αυτό το <em>μόντεμ</em> μετατρέπει την πληροφορία από το δίκτυό μας σε πληροφορία διαχειρίσιμη απ' την τηλεφωνική υποδομή και τούμπαλιν.</p> - -<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> - -<p>Οπότε είμαστε συνδεδεμένοι στην τηλεφωνική υποδομή. Το επόμενο βήμα είναι να στείλουμε μηνύματα από το δίκτυό μας στο δίκτυο που θέλουμε να συνδεθούμε. Για να το κάνουμε αυτό, θα συνδέσουμε το δίκτυό μας σε έναν Πάροχο Διαδικτυακών Υπηρεσιών (Internet Service Provider). Ένας Πάροχος Διαδικτυακών Υπηρεσιών (ISP) είναι μια εταιρία που διαχειρίζεται μερικούς ειδικούς <em>δρομολογητές</em> που συνδέονται όλοι μεταξύ τους και μπορούν επίσης να προσπελάσουν τους δρομολογητές άλλων Παρόχων. Οπότε το μήνυμα απ' το δίκτυό μας μεταφέρεται μέσω του δικτύου των δικτύων των Παρόχων στο δίκτυο προορισμού. Το Διαδίκτυο αποτελείται από όλη αυτήν την υποδομή των δικτύων.</p> - -<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> - -<h3 id="Εύρεση_υπολογιστών">Εύρεση υπολογιστών</h3> - -<p>Εάν θέλετε να στείλετε ένα μήνυμα σε έναν υπολογιστή, πρέπει να διευκρινίσετε σε ποιον. Επομένως οποιoσδήποτε υπολογιστής συνδεδεμένος σε ένα δίκτυο έχει μια μοναδική διεύθυνση για την αναγνώρισή του, που λέγεται «διεύθυνση IP» (όπου το IP σημαίνει <em>Πρωτόκολλο Διαδικτύου - Internet Protocol</em>). Είναι μια διεύθυνση αποτελούμενη από μια σειρά τεσσάρων αριθμών χωριζόμενων από τελείες, για παράδειγμα: <code>192.168.2.10</code>.</p> - -<p>Αυτό είναι απολύτως φυσιολογικό για υπολογιστές, αλλά εμείς τα ανθρώπινα όντα δυσκολευόμαστε στη θύμηση τέτοιων διευθύνσεων. Για να γίνουν τα πράγματα ευκολότερα, μπορούμε να δώσουμε ψευδώνυμο σε μια διεύθυνση IP με ένα ανθρωπίνως αναγνώσιμο όνομα που λέγεται <em>όνομα τομέα</em> (<em>domain name</em>)<em>. </em>Για παράδειγμα, <code>google.com</code> είναι το όνομα τομέα που χρησιμοποιείται έναντι της IP διεύθυνσης <code>173.194.121.32</code>. Οπότε χρησιμοποιώντας το όνομα τομέα είναι ο ευκολότερος τρόπος για εμάς να συνδεόμαστε με έναν υπολογιστή μέσω του Διαδικτύου.</p> - -<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> - -<h3 id="Διαδίκτυο_και_ο_Ιστός">Διαδίκτυο και ο Ιστός</h3> - -<p>Όπως μπορείτε να παρατηρήσετε, όταν περιηγούμαστε στον Ιστό με έναν Περιηγητή Ιστού (Web browser), συνήθως χρησιμοποιούμε το όνομα τομέα για να συνδεθούμε σε έναν ιστότοπο. Αυτό σημαίνει ότι το Διαδίκτυο και ο Ιστός είναι το ίδιο πράγμα; Δεν είναι τόσο απλό. Όπως είδαμε, το Διαδίκτυο είναι η τεχνική υποδομή που επιτρέπει εκατομμύριους υπολογιστές να είναι συνδεδεμένοι όλοι μεταξύ τους. Μεταξύ αυτών των υπολογιστών, μερικοί υπολογιστές (ονομαζόμενοι (<em>Διακομιστές Ιστού - Web Servers</em>) μπορούν να στείλουν μηνύματα κατανοητά μόνο σε περιηγητές ιστού.<em> </em>Το <em>Διαδίκτυο </em>είναι μια υποδομή, ενώ ο Ιστός είναι μια υπηρεσία δημιουργημένη πάνω στην υποδομή. Αξίζει να σημειωθεί ότι υπάρχουν αρκετές άλλες υπηρεσίες δημιουργημένες μέσα στο Διαδίκτυο, όπως το η-ταχυδρομείο (email) και το {{Glossary("IRC")}}.</p> - -<h2 id="Επόμενα_βήματα">Επόμενα βήματα</h2> - -<ul> - <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Πώς δουλεύει ο Ιστός</a></li> - <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Κατανοώντας τη διαφορά μεταξύ ιστοσελίδας, ιστοτόπου, και μηχανής αναζήτησης</a></li> - <li><a href="/en-US/docs/Learn/Understanding_domain_names">Κατανοώντας τα ονόματα τομέα</a></li> -</ul> diff --git a/files/el/learn/common_questions/index.html b/files/el/learn/common_questions/index.html deleted file mode 100644 index 4aafae4a32..0000000000 --- a/files/el/learn/common_questions/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Common questions -slug: Learn/Common_questions -tags: - - CodingScripting - - Infrastructure - - Learn - - NeedsTranslation - - TopicStub - - Web - - WebMechanics -translation_of: Learn/Common_questions ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p> - -<h2 id="How_the_Web_works">How the Web works</h2> - -<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p> - -<dl> - <dt> - <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3> - </dt> - <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd> - <dt> - <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3> - </dt> - <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd> - <dt> - <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3> - </dt> - <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd> - <dt> - <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3> - </dt> - <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd> - <dt> - <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3> - </dt> - <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd> - <dt> - <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3> - </dt> - <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd> -</dl> - -<h2 id="Tools_and_setup">Tools and setup</h2> - -<p>Questions related to the tools/software you can use to build websites.</p> - -<dl> - <dt> - <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3> - </dt> - <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd> - <dt> - <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3> - </dt> - <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd> - <dt> - <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3> - </dt> - <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd> - <dt> - <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> - </dt> - <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> - <dt> - <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> - </dt> - <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> - <dt> - <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> - </dt> - <dd> - <div> - <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> - </div> - </dd> - <dt> - <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> - </dt> - <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd> - <dt> - <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> - </dt> - <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> - <dt> - <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> - </dt> - <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> - <dt> - <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> - </dt> - <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> -</dl> - -<h2 id="Design_and_accessibility">Design and accessibility</h2> - -<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> - -<dl> - <dt> - <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> - </dt> - <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> - <dt> - <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> - </dt> - <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> - <dt> - <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> - </dt> - <dd>This article introduces the basic concepts behind web accessibility.</dd> - <dt> - <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> - </dt> - <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> - <dt> - <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> - </dt> - <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> -</dl> - -<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> - -<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> - <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> -</ul> 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 deleted file mode 100644 index 6ad88733ae..0000000000 --- a/files/el/learn/common_questions/pages_sites_servers_and_search_engines/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: >- - Ποια είναι η διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και - μηχανής αναζήτησης; -slug: Learn/Common_questions/Pages_sites_servers_and_search_engines -tags: - - Αρχάριος - - Μηχανισμοί Ιστού - - Χρειάζεται Διαδραστικό Μάθημα -translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines -original_slug: Learn/Common_questions/Σελίδες_τόποι_διακομιστές_και_μηχανές_αναζήτησης ---- -<div class="summary"> -<p><span class="seoSummary">Σε αυτό το άρθρο περιγράφουμε διάφορες έννοιες σχετικά με τον ιστό: ιστότοποι, ιστοσελίδες, διακομιστές ιστού, και μηχανές αναζήτησης. Αυτοί οι όροι συχνά μπερδεύονται απ' τους νεοφερμένους στον ιστό, ή χρησιμοποιούνται λανθασμένα. Ας μάθουμε τι σημαίνει ο κάθε ένας.</span></p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Προαπαιτούμενα:</th> - <td>Θα πρέπει να γνωρίζεις <a href="/en-US/Learn/How_the_Internet_works">πώς δουλεύει το Διαδίκτυο</a>.</td> - </tr> - <tr> - <th scope="row">Ζητούμενο:</th> - <td>Ικανοί να περιγράψετε τις διαφορές μεταξύ μιας ιστοσελίδας, ενός ιστότοπου, ενός διακομιστή ιστού, και μιας μηχανής αναζήτησης.</td> - </tr> - </tbody> -</table> - -<h2 id="Περίληψη">Περίληψη</h2> - -<p>Όπως με κάθε πεδίο γνώσης, ο ιστός έρχεται με πολλές ασυναρτησίες. Μην ανησυχείτε, δε θα σας κατακλύσουμε με όλες αυτές (έχουμε ένα <a href="/en-US/docs/Glossary">γλωσσάρι</a> αν είστε περίεργοι). Ωστόσο, υπάρχουν μερικοί βασικοί όροι που πρέπει να καταλάβετε στο ξεκίνημα, αφού θα ακούσετε αυτές τις εκφράσεις συνεχώς καθώς συνεχίζετε να διαβάζετε. Είναι εύκολο να μπερδέψετε αυτούς τους όρους μερικές φορές, αφού αναφέρονται σε σχετικές μα διαφορετικές λειτουργικότητες. Στην πραγματικότητα, θα δείτε μερικές φορές αυτούς τους όρους να καταχρώνται σε δελτία ειδήσεων και αλλού, οπότε το να τους μπερδέψετε είναι κατανοητό.</p> - -<p>Θα καλύψουμε αυτούς τους όρους και τεχνολογίες με περισσότερη λεπτομέρεια καθώς προχωρούμε κι άλλο, αλλά αυτοί οι γρήγοροι ορισμοί θα είναι μια σπουδαία αρχή για σας:</p> - -<dl> - <dt>ιστοσελίδα</dt> - <dd>Ένα έγγραφο που μπορεί να απεικονιστεί σε ένα πρόγραμμα περιήγησης όπως το Firefox, το Google Chrome, το Opera, το Microsoft Internet Explorer ή Edge, ή το Safari της Apple. Αυτές επίσης συνηθίζεται να λέγονται απλά «σελίδες».</dd> - <dt>ιστότοπος</dt> - <dd>Μια συλλογή ιστοσελίδων που είναι ομαδοποιημένες και συνήθως συνδεδεμένες με διάφορους τρόπους. Συνήθως λέγεται ένας «ιστότοπος» ή απλά ένας «τόπος».</dd> - <dt>διακομιστής ιστού</dt> - <dd>Ένας υπολογιστής που φιλοξενεί έναν ιστότοπο στο Διαδίκτυο.</dd> - <dt>μηχανή αναζήτησης</dt> - <dd>Ένας ιστότοπος που σας βοηθάει να βρείτε άλλες ιστοσελίδες, όπως η Google, η Bing, η Yahoo.</dd> -</dl> - -<p>Ας δούμε μια απλή αναλογία — μια δημόσια βιβλιοθήκη. Αυτά είναι που κάνετε γενικά όταν επισκέπτεστε μια βιβλιοθήκη:</p> - -<ol> - <li>Βρίσκετε ένα ευρετήριο αναζήτησης και ψάχνετε τον τίτλο του βιβλίου που θέλετε.</li> - <li>Σημειώνετε τον αριθμό καταλόγου του βιβλίου.</li> - <li>Πηγαίνετε στο συγκεκριμένο τμήμα που περιέχει το βιβλίο, βρίσκετε το σωστό αριθμό καταλόγου, και παίρνετε το βιβλίο.</li> -</ol> - -<p>Ας συγκρίνουμε τη βιβλιοθήκη με ένα διακομιστή ιστού:</p> - -<ul> - <li>Η βιβλιοθήκη είναι σαν έναν εξυπηρετητή ιστού. Έχει διάφορα τμήματα, τα οποία είναι παρόμοια με έναν εξυπηρετητή ιστού που φιλοξενεί πολλαπλούς ιστότοπους.</li> - <li>Τα διαφορετικά τμήματα (φυσική, μαθηματικά, ιστορία, κ.λπ.) στη βιβλιοθήκη είναι σαν τους ιστότοπους. Κάθε τμήμα είναι σαν ένας μοναδικός ιστότοπος (δύο τμήματα δεν περιέχουν ίδια βιβλία).</li> - <li>Τα βιβλία στα τμήματα είναι σαν τις ιστοσελίδες. Ένας ιστότοπος μπορεί να έχει πολλές ιστοσελίδες, π.χ., το τμήμα Φυσικής (ο ιστότοπος) θα έχει βιβλία περί θερμοκρασίας, ήχου, θερμοδυναμικής, στατικές, κ.λπ. (οι ιστοσελίδες).</li> - <li>Το ευρετήριο αναζήτησης είναι σα μια μηχανή αναζήτησης. Κάθε βιβλίο έχει τη δική του μοναδική θέση στη βιβλιοθήκη (δύο βιβλία δε γίνεται να είναι στο ίδιο μέρος) που καθορίζεται απ' τον αριθμό καταλόγου.</li> - <li>Ομοίως, οι ιστοσελίδες έχουν κι αυτές μοναδικές διευθύνσεις. Αυτές οι μοναδικές διευθύνσεις χρησιμοποιούνται για την ανάκτηση μιας ιστοσελίδας από ένα διακομιστή ιστού πληκτρολογώντας τη διεύθυνση στη γραμμή διεύθυνσης ενός φυλλομετρητή (Mozilla Firefox, Safari, Google chrome, κ.λπ.).</li> -</ul> - -<dl> - <dt> </dt> -</dl> - -<h2 id="Διαδραστική_μάθηση">Διαδραστική μάθηση</h2> - -<p><em>Δεν υπάρχει διαδραστική μάθηση ακόμα. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Παρακαλούμε, σκεφτείτε να συνεισφέρετε</a>.</em></p> - -<h2 id="Βαθύτερη_κατάδυση">Βαθύτερη κατάδυση</h2> - -<p>Λοιπόν, ας σκάψουμε βαθύτερα στο πώς αυτοί οι τέσσερις όροι σχετίζονται και γιατί συγχέονται μερικές φορές μεταξύ τους.</p> - -<h3 id="ιστοσελίδα">ιστοσελίδα</h3> - -<p>Μια ιστοσελίδα είναι απλά ένα έγγραφο απεικονιζόμενο από έναν {{Glossary("φυλλομετρητή")}}. Τέτοια έγγραφα είναι γραμμένα σε {{Glossary("HTML")}} γλώσσα (την οποία θα εξετάσουμε περαιτέρω με περισσότερη λεπτομέρεια σε <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">άλλα άρθρα</a>). Μια ιστοσελίδα μπορεί να ενσωματώσει μια ποικιλία από διαφορετικούς τύπους πόρων όπως:</p> - -<ul> - <li><em>πληροφορία στυλ (style information)</em> — ελέγχοντας την εμφάνιση και την αίσθηση μιας σελίδας</li> - <li><em>δέσμες ενεργειών (scripts</em>) — που προσθέτουν διαδραστικότητα στη σελίδα</li> - <li><em>πολυμέσα (media</em>) — εικόνες, ήχους, και βίντεο.</li> -</ul> - -<div class="note"> -<p><strong>Σημείωση: </strong>Οι φυλλομετρητές μπορούν ακόμη να εμφανίσουν άλλα έγγραφα όπως {{Glossary("PDF")}} αρχεία ή εικόνες, αλλά ο όρος <strong>ιστοσελίδα</strong> αναφέρεται συγκεκριμένα σε HTML έγγραφα. Αλλιώς, χρησιμοποιούμε μόνο τον όρο<strong> έγγραφο</strong>.</p> -</div> - -<p>Όλες οι ιστοσελίδες διαθέσιμες στο διαδίκτυο είναι προσβάσιμες στον ιστό μέσω μιας μοναδικής διεύθυνσης. Για να προσπελάσετε μια σελίδα, απλά πληκτρολογείτε τη διεύθυνσή της στη γραμμή διεύθυνσης του προγράμματος περιήγησής σας:</p> - -<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="height: 239px; width: 650px;"></p> - -<p>Ένας <em>ιστότοπος</em> είναι μια συλλογή συνδεδεμένων ιστοσελίδων (μαζί με τους σχετικούς της πόρους) που μοιράζονται ένα μοναδικό όνομα τομέα. Κάθε ιστοσελίδα δοθείσης του ιστότοπου παρέχει ρητούς συνδέσμους—τις περισσότερες φορές στη μορφή κομματιών κειμένου που είναι δυνατό να γίνει κλικ—που επιτρέπουν το χρήστη να μετακινηθεί από μία σελίδα του ιστότοπου σε μία άλλη.</p> - -<p>Για να προσπελάσετε έναν ιστότοπο, πληκτρολογήστε το όνομα τομέα του στη γραμμή διεύθυνσης του φυλλομετρητή σας, και το πρόγραμμα περιήγησης θα εμφανίσει την κύρια ιστοσελίδα του ιστότοπου, ή <em>αρχική σελίδα - homepage </em>(ανεπίσημα αναφέρεται ως «η αρχική - the home»):</p> - -<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="display: block; height: 365px; margin: 0px auto; width: 650px;"></p> - -<p>Οι έννοιες της <em>ιστοσελίδας</em> και του <em>ιστότοπου</em> είναι ιδιαίτερα εύκολο να μπερδευτούν σε έναν ιστότοπο που περιέχει μόνο μια ιστοσελίδα. Ένας τέτοιος ιστότοπος μερικές φορές καλείται <em>μονοσέλιδος ιστότοπος ή single-page website.</em></p> - -<h3 id="Διακομιστής_ιστού">Διακομιστής ιστού</h3> - -<p>Ένας <em>διακομιστής ιστού </em>είναι ένας υπολογιστής που φιλοξενεί έναν ή περισσότερους ιστότοπους. «Φιλοξενώ» σημαίνει ότι όλες οι <em>ιστοσελίδες</em> και τα υποστηριζόμενα αρχεία τους είναι διαθέσιμα σε αυτόν τον υπολογιστή. Ο <em>διακομιστής ιστού</em> θα στείλει οποιαδήποτε ιστοσελίδα από τον ιστότοπο που φιλοξενεί σε οποιοδήποτε πρόγραμμα περιήγησης του χρήστη, ανά αίτηση του χρήστη.</p> - -<p>Μην μπερδεύετε τους <em>ιστότοπους </em>και τους <em>διακομιστές ιστού</em>. Για παράδειγμα, αν ακούσετε κάποιον να λέει, «Ο ιστότοπός μου δεν ανταποκρίνεται», στην πραγματικότητα σημαίνει ότι ο <em>διακομιστής ιστού</em> δεν ανταποκρίνεται και επομένως ο <em>ιστότοπος</em> δεν είναι διαθέσιμος. Πιο σημαντικά, αφού ένας διακομιστής ιστού μπορεί να φιλοξενήσει πολλαπλούς ιστότοπους, ο όρος <em>διακομιστής ιστού</em> δε χρησιμοποιείται ποτέ για να καθορίσει έναν ιστότοπο, μιας και θα προκαλούσε μεγάλη σύγχυση. Στο προηγούμενο μας παράδειγμα, αν λέγαμε, «Ο διακομιστής ιστού μου δεν ανταποκρίνεται», σημαίνει ότι δεν υπάρχει κανένας διαθέσιμος ιστότοπος σε αυτόν τον διακομιστή ιστού.</p> - -<h3 id="Μηχανή_αναζήτησης">Μηχανή αναζήτησης</h3> - -<p>Οι μηχανές αναζήτησης είναι μια κοινή πηγή σύγχυσης στον ιστό. Μια μηχανή αναζήτησης είναι ένα ειδικό είδος ιστότοπου που βοηθά τους χρήστες να βρουν ιστοσελίδες από <em>άλλους</em> ιστότοπους.</p> - -<p>Υπάρχουν πολλές εκεί έξω:<a href="https://www.google.com/"> Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, και πολλές ακόμα. Μερικές είναι γενικού σκοπού, άλλες είναι εξειδικευμένες για συγκεκριμένα θέματα. Χρησιμοποιείστε οποιαδήποτε προτιμάτε.</p> - -<p>Πολλοί αρχάριοι του ιστού μπερδεύουν τις μηχανές αναζήτησης με τα προγράμματα περιήγησης. Ας το ξεκαθαρίσουμε: Ένα <strong><em>πρόγραμμα περιήγησης</em></strong> είναι ένα κομμάτι λογισμικού που ανακτά και εμφανίζει ιστοσελίδες· μια <em><strong>μηχανή αναζήτησης</strong></em> είναι ένας ιστότοπος που βοηθά τους ανθρώπους να βρουν ιστοσελίδες από άλλους ιστότοπους. Η σύγχυση προκύπτει επειδή, τη πρώτη φορά που κάποιος ανοίγει ένα πρόγραμμα περιήγησης, ο φυλλομετρητής δείχνει την αρχική σελίδα μιας μηχανής αναζήτησης. Αυτό βγάζει νόημα, γιατί, προφανώς, το πρώτο πράγμα που θέλετε να κάνετε με ένα πρόγραμμα περιήγησης είναι να βρείτε μια ιστοσελίδα για να δείτε. Μην συγχέετε την υποδομή (π.χ., το πρόγραμμα περιήγησης) με την υπηρεσία (π.χ., τη μηχανή αναζήτησης). Η διάκριση θα σας βοηθήσει αρκετά, αλλά ακόμα και μερικοί επαγγελματίες μιλάνε αόριστα, οπότε μη νιώθετε ανήσυχα γι' αυτό.</p> - -<p>Εδώ βλέπετε ένα στιγμιότυπο του Firefox που δείχνει την περιοχή αναζήτησης της Google ως την προκαθορισμένη σελίδα έναρξης:</p> - -<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="display: block; height: 399px; margin: 0px auto; width: 650px;"></p> - -<h2 id="Επόμενα_βήματα">Επόμενα βήματα</h2> - -<ul> - <li>Σκάψτε βαθύτερα: <a href="/en-US/docs/Learn/What_is_a_web_server">Τι είναι ένας διακομιστής ιστού</a></li> - <li>Δείτε πώς οι ιστοσελίδες είναι συνδεδεμένες σε έναν ιστότοπο: <a href="/en-US/docs/Learn/Understanding_links_on_the_web">Κατανοώντας τους συνδέσμους στον ιστό</a></li> -</ul> - -<p> </p> diff --git a/files/el/learn/common_questions/what_are_hyperlinks/index.html b/files/el/learn/common_questions/what_are_hyperlinks/index.html deleted file mode 100644 index 8c52def6d0..0000000000 --- a/files/el/learn/common_questions/what_are_hyperlinks/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Τι είναι οι υπερσύνδεμοι; -slug: Learn/Common_questions/What_are_hyperlinks -translation_of: Learn/Common_questions/What_are_hyperlinks -original_slug: Learn/Common_questions/Τι_είναι_οι_υπερσύνδεσμοι ---- -<div class="summary"> -<p>Σ' αυτό το άρθρο, θα εξετάσουμε τι είναι οι υπερσύνδεσμοι και γιατί έχουν σημασία.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Προαπαιτούμενα:</th> - <td>Θα πρέπει να ξέρετε <a dir="ltr" href="https://developer.mozilla.org/el/docs/Learn/Common_questions/%CE%A0%CF%8E%CF%82_%CE%B4%CE%BF%CF%85%CE%BB%CE%B5%CF%8D%CE%B5%CE%B9_%CF%84%CE%BF_%CE%94%CE%B9%CE%B1%CE%B4%CE%AF%CE%BA%CF%84%CF%85%CE%BF" lang="el">πώς δουλεύει το Διαδίκτυο</a> και να είστε οικίοι με τη <a dir="ltr" href="https://developer.mozilla.org/el/docs/Learn/Common_questions/%CE%A3%CE%B5%CE%BB%CE%AF%CE%B4%CE%B5%CF%82_%CF%84%CF%8C%CF%80%CE%BF%CE%B9_%CE%B4%CE%B9%CE%B1%CE%BA%CE%BF%CE%BC%CE%B9%CF%83%CF%84%CE%AD%CF%82_%CE%BA%CE%B1%CE%B9_%CE%BC%CE%B7%CF%87%CE%B1%CE%BD%CE%AD%CF%82_%CE%B1%CE%BD%CE%B1%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%B7%CF%82" lang="el">διαφορά μεταξύ ιστοσελίδας, ιστότοπου, διακομιστή ιστού, και μηχανής αναζήτησης</a>.</td> - </tr> - <tr> - <th scope="row">Ζητούμενο:</th> - <td>Μάθετε για τους συνδέσμους στον ιστό και γιατί έχουν σημασία.</td> - </tr> - </tbody> -</table> - -<h2 id="Περίληψη">Περίληψη</h2> - -<p>Οι Υπερσύνδεσμοι, συνήθως λέγονται σύνδεσμοι, είναι μια θεμελιώδης έννοια πίσω απ' τον Ιστό. Για να εξηγήσουμε τι είναι οι σύνδεσμοι, πρέπει να κάνουμε ένα βήμα πίσω στα πολύ βασικά της αρχιτεκτονικής του Ιστού.</p> - -<p>Πίσω στο 1989, ο Τιμ Μπέρνερς-Λι, ο εφευρέτης του Ιστού, μίλησε για τους τρεις πυλώνες που στέκεται ο Ιστός:</p> - -<ol> - <li>{{Glossary("URL")}}, ένα σύστημα διευθύνσεων που καταγράφει τα έγγραφα Ιστού</li> - <li>{{Glossary("HTTP")}}, ένα πρωτόκολλο επικοινωνίας για να βρίσκει έγγραφα όταν δίνονται με το URL τους.</li> - <li>{{Glossary("HTML")}}, μια μορφή εγγράφου που επιτρέπει τους ενσωματωμένους <em>υπερσυνδέσμους</em>.</li> -</ol> - -<p>Όπως μπορείτε να δείτε στους τρεις πυλώνες, όλα στον Ιστό περιστρέφονται γύρω από έγγραφα και πώς να τα προσπελάσουμε. Ο αρχικός σκοπός του Ιστού ήταν να παρέχει έναν εύκολο τρόπο να φτάνετε, να διαβάζετε, και να πλοηγήστε σε έγγραφα κειμένου. Από τότε, ο Ιστός έχει εξελιχθεί για να παρέχει πρόσβαση σε εικόνες, βίντεο, και δυαδικά δεδομένα, αλλά αυτές οι βελτιώσεις έχουν αλλάξει ελάχιστα τους τρεις πυλώνες.</p> - -<p>Πριν τον Ιστό, ήταν αρκετά δύσκολο να προσπελάσετε έγγραφα και να μεταφέρεστε από το ένα σε άλλο. Όντας ανθρωπίνως αναγνώσιμα, τα URL έκαναν τα πράγματα ευκολότερα, αλλά είναι δύσκολο να πληκτρολογήσετε ένα μακρύ URL όποτε θέλετε να προσπελάσετε ένα έγγραφο. Εδώ είναι που οι υπερσύνδεσμοι άλλαξαν τα πάντα. Οι σύνδεσμοι μπορούν να συσχετίσουν οποιαδήποτε συμβολοσειρά κειμένου με ένα URL, έτσι ώστε ο χρήστης να μπορεί ακαριαία να φτάσει το έγγραφο προορισμού ενεργοποιώντας το σύνδεσμο.</p> - -<p>Οι σύνδεσμοι ξεχωρίζουν από το περιβάλλοντα κείμενο με το να είναι υπογραμμισμένοι και σε μπλε κείμενο. Χτυπήστε ελαφρά ή κάντε κλικ σε έναν σύνδεσμο για να τον ενεργοποιήσετε, ή αν χρησιμοποιείτε ένα πληκτρολόγιο, πατήστε Tab μέχρι ο σύνδεσμος να είναι στο επίκεντρο και πατήστε Enter ή το πλήκτρο κενού (Spacebar).</p> - -<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p> - -<p>Οι σύνδεσμοι είναι η πρωτοπορία που έκανε τον Ιστό τόσο χρήσιμο και πετυχημένο. Στο υπόλοιπο αυτού του άρθρου, συζητάμε τους διάφορους τύπους συνδέσμων και την σημασία τους στη σύγχρονη σχεδίαση Ιστού (Web design).</p> - -<h2 id="Deeper_dive">Deeper dive</h2> - -<p>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:</p> - -<h3 id="Types_of_links">Types of links</h3> - -<dl> - <dt>Internal link</dt> - <dd>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).</dd> - <dt>External link</dt> - <dd>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.</dd> - <dt>Incoming links</dt> - <dd>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.</dd> -</dl> - -<p>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.</p> - -<p>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.)</p> - -<h3 id="Anchors">Anchors</h3> - -<p>Most links tie two webpages together. <strong>Anchors </strong>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.</p> - -<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p> - -<h3 id="Links_and_Search_Engines">Links and Search Engines</h3> - -<p>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.</p> - -<p>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:</p> - -<ul> - <li>A link's <em>visible text</em> influences which search queries will find a given URL.</li> - <li>The more <em>incoming links</em> a webpage can boast of, the higher it ranks in search results.</li> - <li><em>External links </em>influence the search ranking both of source and target webpages, but it is unclear by how much.</li> -</ul> - -<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (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.</p> - -<h2 id="Next_steps">Next steps</h2> - -<p>Now you'll want to set up some webpages with links.</p> - -<ul> - <li>To get some more theoretical background, learn about <a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">URLs and their structure</a>, since every link points to a URL.</li> - <li>Want something a bit more practical? The <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a> article of our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module explains how to implement links in detail.</li> -</ul> diff --git a/files/el/learn/forms/form_validation/index.html b/files/el/learn/forms/form_validation/index.html deleted file mode 100644 index 05df49e7cf..0000000000 --- a/files/el/learn/forms/form_validation/index.html +++ /dev/null @@ -1,870 +0,0 @@ ---- -title: Επικύρωση δεδομένων φόρμας -slug: Learn/Forms/Form_validation -translation_of: Learn/Forms/Form_validation -original_slug: Learn/HTML/Forms/Επικύρωση_δεδομένων_φόρμας ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</div> - -<p class="summary">Η επικύρωση των δεδομένω σε φόρμα, εξασφαλίζει ότι οι χρήστες θα συμπληρώσουν τα πεδία της στην σωστή τους μορφή, ώστε να είνα ιβέβαιο πως τα δεδομένα που θα υποβληθούν θα είναι λειτουργήσουν με επιτυχία από τις άλλες εφαρμογές μας. Αυτό το άρθρο, θα διαπραγματευθεί όλα όσα πρέπει να γνωρίζετε σχετικά με την επικύρωση των δεδομένων.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Προαπαιτούμενα:</th> - <td>Γνώση όρων πληροφορικής, επαρκής κατανόηση των τεχνολογιών <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, και <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td> - </tr> - <tr> - <th scope="row">Σκοπός:</th> - <td>Η κατανόηση της σπουδαιότητας της επικύρωσης δεδομένων και πως γίνεται η εφαρμογή της.</td> - </tr> - </tbody> -</table> - -<h2 id="Τι_είναι_η_επικύρωση_δεδομένων_φόρμας">Τι είναι η επικύρωση δεδομένων φόρμας;</h2> - -<p>Αν επισκεφτείτε οποιαδήποτε δημοφιλή ιστοσελίδα με φόρμα εγγραφής, θα διαπιστώσετε ότι σας ενημερώνει όταν δεν εισαγάγετε στη σωστή μορφή τα δεδομένα που απαιτεί. Σας ενημερώνει πως:</p> - -<ul> - <li>«Αυτό το πεδίο είναι υποχρεωτικό» (δεν επιτρέπεται να μείνει κενό)</li> - <li>«Παρακαλώ εισάγετε τον τηλεφωνικό σας αριθμό στην μορφή xxx-xxxx" (υποχρεωτικά τρεις αριθμοί, μετά παύλα και μετά τέσσερις αριθμοί)</li> - <li>«Παρακαλώ εισάγετε μια έγκυρη ηλεκτρονική διεύθυνση» (αν η μορφή της διεύθυνσης δεν είναι της μορφής «κάποιος@παράδειγμα.com»)</li> - <li>«Ο κωδικός ασφαλείας πρέπει να είναι από 8 εως 30 χαρακτήρες, και να περιλαμβάνει κατ' ελάχιστον, ένα κεφαλαίο γράμμα, ένα σύμβολο και έναν αριθμό»</li> -</ul> - -<p>Αυτό καλείται <strong>επικύρωση δεδομένων φόρμας</strong> — όταν εισάγονται δεδομένα, η εφαρμογή ελέγχει ότι τα δεδομένα είναι σωστά. Αν είναι σωστά, η εφαρμογή επιτρέπει τα δεδομένα να υποβληθούν στον εξυπηρετητή και (συνήθως) να αποθηκευτούν σε μια βάση δεδομένων. Αν δεν είναι σωστά τα δεδομένα, ενημερώνει με μήνυμα, εξηγώντας τις διορθώσεις που απαιτούνται. Η επικύρωση δεδομένων φόρμα μπορεί να εφαρμοστεί με διαφορετικούς τρόπους.</p> - -<p>Επιδίωξη είναι η εισαγωγή των δεδομένω να είναι όσο το δυνατόν ευκολότερη. Τότε γιατί επιμένουμε να επικυρώνουμε τα δεδομένα στις φόρμες; Για τους τρεις παρακάτω κυρίως λόγους:</p> - -<ul> - <li><strong>Θέλουμε τα σωστά δεδομένα, στην σωστή μορφή</strong>— οι εφαρμογές θα δυσλειτουργήσουν αν τα δεδομένα των χρηστών αποθηκευτούν σε λανθασμένη μορφή, αν δεν έχουν τις σωστές πληροφορίες ή αν έχουν παραλειφθεί πληροφορίες που απαιτούνται.</li> - <li><strong>We want to protect our users' accounts</strong> — by forcing our users to enter secure passwords, it makes it easier to protect their account information.</li> - <li><strong>We want to protect ourselves</strong> — there are many ways that malicious users can misuse unprotected forms to damage the application they are part of (see <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</li> -</ul> - -<h3 id="Different_types_of_form_validation">Different types of form validation</h3> - -<p>There are two different types of form validation which you'll encounter on the web:</p> - -<ul> - <li><strong>Client-side validation</strong> is validation that occurs in the browser, before the data has been submitted to the server. This is more user-friendly than server-side validation as it gives an instant response. This can be further subdivided: - - <ul> - <li><strong>JavaScript</strong> validation is coded using JavaScript. It is completely customizable.</li> - <li><strong>Built-in form validation</strong> using HTML5 form validation features. This generally does not require JavaScript. Built-in form validation has better performance, but it is not as customizable as JavaScript.</li> - </ul> - </li> - <li><strong>Server-side validation</strong> is validation which occurs on the server, after the data has been submitted. Server-side code is used to validate the data before it is saved into the database. If the data fails authentication, a response is sent back to the client to tell the user what corrections to make. Server-side validation is not as user-friendly as client-side validation, as it does not provide errors until the entire form has been submitted. However, server-side validation is your application's last line of defense against incorrect or even malicious data. All popular <a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">server-side frameworks</a> have features for <strong>validating</strong> and <strong>sanitizing</strong> data (making it safe).</li> -</ul> - -<p>In the real world, developers tend to use a combination of client-side and server-side validation.</p> - -<h2 id="Using_built-in_form_validation">Using built-in form validation</h2> - -<p>One of the features of <a href="/en-US/docs/HTML/HTML5">HTML5</a> is the ability to validate most user data without relying on scripts. This is done by using <a href="/en-US/docs/HTML/HTML5/Constraint_validation">validation attributes</a> 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.</p> - -<p>When an element is valid:</p> - -<ul> - <li>The element matches the {{cssxref(":valid")}} CSS pseudo-class; this will let you apply a specific style to valid elements.</li> - <li>If the user tries to send the data, the browser will submit the form, provided there is nothing else stopping it from doing so (e.g., JavaScript).</li> -</ul> - -<p>When an element is invalid:</p> - -<ul> - <li>The element matches the {{cssxref(":invalid")}} CSS pseudo-class; this will let you apply a specific style to invalid elements.</li> - <li>If the user tries to send the data, the browser will block the form and display an error message.</li> -</ul> - -<h3 id="Validation_constraints_on_input_elements_—_starting_simple">Validation constraints on input elements — starting simple</h3> - -<p>In this section, we'll look at some of the different HTML5 features that can be used to validate {{HTMLElement("input")}} elements.</p> - -<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, and a live example below:</p> - -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><form> - <label for="choose">Would you prefer a banana or cherry?</label> - <input id="choose" name="i_like"> - <button>Submit</button> -</form></pre> - -<pre class="brush: css">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -}</pre> -</div> - -<p>{{EmbedLiveSample("Hidden_code", "100%", 50)}}</p> - -<p>To begin with, make a copy of <code>fruit-start.html</code> in a new directory on your hard drive.</p> - -<h3 id="The_required_attribute">The required attribute</h3> - -<p>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).</p> - -<p>Add a <code>required</code> attribute to your input, as shown below:</p> - -<pre class="brush: html"><form> - <label for="choose">Would you prefer a banana or cherry?</label> - <input id="choose" name="i_like" required> - <button>Submit</button> -</form></pre> - -<p>Also take note of the CSS included in the example file:</p> - -<pre class="brush: css">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -}</pre> - -<p>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:</p> - -<p>{{EmbedLiveSample("The_required_attribute", "100%", 50)}}</p> - -<h3 id="Validating_against_a_regular_expression">Validating against a regular expression</h3> - -<p>Another very common validation feature is the {{htmlattrxref("pattern","input")}} attribute, which expects a <a href="/en-US/docs/JavaScript/Guide/Regular_Expressions">Regular Expression</a> 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.</p> - -<p>Below are some examples to give you a basic idea of how they work:</p> - -<ul> - <li><code>a</code> — matches one character that is a (not b, not aa, etc.)</li> - <li><code>abc</code> — matches <code>a</code>, followed by <code>b</code>, followed by <code>c</code>.</li> - <li><code>a*</code> — matches the character a, zero or more times (<code>+</code> matches a character one or more times).</li> - <li><code>[^a]</code> — matches one character that is <strong>not</strong> a.</li> - <li><code>a|b</code> — matches one character that is a or b.</li> - <li><code>[abc]</code> — matches one character that is a, b, or c.</li> - <li><code>[^abc]</code> — matches one character that is <strong>not</strong> a, b, or c.</li> - <li><code>[a-z]</code> — matches any character in the range a–z, lower case only (you can use <code>[A-Za-z]</code> for lower and upper case, and <code>[A-Z]</code> for upper case only).</li> - <li><code>a.c</code> — matches a, followed by any character, followed by c.</li> - <li><code>a{5}</code> — matches a, 5 times.</li> - <li><code>a{5,7}</code> — matches a, 5 to 7 times, but no less or more.</li> -</ul> - -<p>You can use numbers and other characters in these expressions too, such as:</p> - -<ul> - <li><code>[ -]</code> — matches a space or a dash.</li> - <li><code>[0-9]</code> — matches any digit in the range 0 to 9.</li> -</ul> - -<p>You can combine these in pretty much any way you want, specifying different parts one after the other:</p> - -<ul> - <li><code>[Ll].*k</code> — A single character that is an upper or lowercase L, followed by zero or more characters of any type, followed by a single lowercase k.</li> - <li><code>[A-Z][A-Za-z' -]+</code> — A single upper case character followed by one or more characters that are an upper or lower case letter, a dash, an apostrophe, or a space. This could be used to validate the city/town names of English-speaking countries, which need to start with a capital letter, but don't contain any other characters. Examples from the UK include Manchester, Ashton-under-lyne, and Bishop's Stortford.</li> - <li><code>[0-9]{3}[ -][0-9]{3}[ -][0-9]{4}</code> — A simple match for a US domestic phone number — three digits, followed by a space or a dash, followed by three digits, followed by a space or a dash, followed by four digits. You might have to make this more complex, as some people write their area code in parentheses, but it works for a simple demonstration.</li> -</ul> - -<p>Anyway, let's implement an example — update your HTML to add a <code>pattern</code> attribute, like so:</p> - -<pre class="brush: html"><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></pre> - -<div class="hidden"> -<pre class="brush: css">input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -}</pre> -</div> - -<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 50)}}</p> - -<p>In this example, the {{HTMLElement("input")}} element accepts one of two possible values: the string "banana" or the string "cherry".</p> - -<p>At this point, try changing the value inside the <code>pattern</code> 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!</p> - -<div class="note"> -<p><strong>Note:</strong> Some {{HTMLElement("input")}} element types do not need a {{htmlattrxref("pattern","input")}} attribute to be validated. Specifying the <code>email</code> 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 <code>url</code> type automatically require a properly-formed URL.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: The {{HTMLElement("textarea")}} element does not support the {{htmlattrxref("pattern","input")}} attribute.</p> -</div> - -<h3 id="Constraining_the_length_of_your_entries">Constraining the length of your entries</h3> - -<p>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.</p> - -<p>For number fields (i.e. <code><input type="number"></code>), 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.</p> - -<p>Let's look at another example. Create a new copy of the <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a> file.</p> - -<p>Now delete the contents of the <code><body></code> element, and replace it with the following:</p> - -<pre class="brush: html"><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></pre> - -<ul> - <li>Here you'll see that we've given the <code>text</code> field a <code>minlength</code> and <code>maxlength</code> of 6 — the same length as banana and cherry. Entering less characters will show as invalid, and entering more is not possible in most browsers.</li> - <li>We've also given the <code>number</code> field a <code>min</code> of 1 and a <code>max</code> of 10 — entered numbers outside this range will show as invalid, and you won't be able to use the increment/decrement arrows to move the value outside this range.</li> -</ul> - -<div class="hidden"> -<pre>input:invalid { - border: 2px dashed red; -} - -input:valid { - border: 2px solid black; -} - -div { - margin-bottom: 10px; -}</pre> -</div> - -<p>Here is the example running live:</p> - -<p>{{EmbedLiveSample("Constraining_the_length_of_your_entries", "100%", 70)}}</p> - -<div class="note"> -<p><strong>Note</strong>: <code><input type="number"></code> (and other types, like <code>range</code>) 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).</p> -</div> - -<h3 id="Full_example">Full example</h3> - -<p>Here is a full example to show off usage of HTML's built-in validation features:</p> - -<pre class="brush: html"><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></pre> - -<pre class="brush: css">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; -}</pre> - -<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p> - -<h3 id="Customized_error_messages">Customized error messages</h3> - -<p>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.</p> - -<p>These automated messages have two drawbacks:</p> - -<ul> - <li>There is no standard way to change their look and feel with CSS.</li> - <li>They depend on the browser locale, which means that you can have a page in one language but an error message displayed in another language.</li> -</ul> - -<table> - <caption>French versions of feedback messages on an English page</caption> - <thead> - <tr> - <th scope="col">Browser</th> - <th scope="col">Rendering</th> - </tr> - </thead> - <tbody> - <tr> - <td>Firefox 17 (Windows 7)</td> - <td><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></td> - </tr> - <tr> - <td>Chrome 22 (Windows 7)</td> - <td><img alt="Example of an error message with Chrome in French on an English page" src="/files/4327/error-chrome-win7.png" style="height: 96px; width: 261px;"></td> - </tr> - <tr> - <td>Opera 12.10 (Mac OSX)</td> - <td><img alt="Example of an error message with Opera in French on an English page" src="/files/4331/error-opera-macos.png" style="height: 83px; width: 218px;"></td> - </tr> - </tbody> -</table> - -<p>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.</p> - -<p>HTML5 provides the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#the-constraint-validation-api" rel="external">constraint validation API</a> 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:</p> - -<pre class="brush: html"><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></pre> - -<p>In JavaScript, you call the <a href="/en-US/docs/HTML/HTML5/Constraint_validation#Constraint_API's_element.setCustomValidity()"><code>setCustomValidity()</code></a> method:</p> - -<pre class="brush: js">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(""); - } -});</pre> - -<p>{{EmbedLiveSample("Customized_error_messages", "100%", 50)}}</p> - -<h2 id="Validating_forms_using_JavaScript">Validating forms using JavaScript</h2> - -<p>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.</p> - -<h3 id="The_HTML5_constraint_validation_API">The HTML5 constraint validation API</h3> - -<p>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.</p> - -<h4 id="Constraint_validation_API_properties">Constraint validation API properties</h4> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>validationMessage</code></td> - <td>A 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 (<code>willValidate</code> is <code>false</code>), or the element's value satisfies its constraints.</td> - </tr> - <tr> - <td><code>validity</code></td> - <td>A {{domxref("ValidityState")}} object describing the validity state of the element.</td> - </tr> - <tr> - <td><code>validity.customError</code></td> - <td>Returns <code>true</code> if the element has a custom error; <code>false</code> otherwise.</td> - </tr> - <tr> - <td><code>validity.patternMismatch</code></td> - <td>Returns <code>true</code> if the element's value doesn't match the provided pattern; <code>false</code> otherwise.<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td> - </tr> - <tr> - <td><code>validity.rangeOverflow</code></td> - <td>Returns <code>true</code> if the element's value is higher than the provided maximum; <code>false</code> otherwise.<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} and CSS pseudo-class.</td> - </tr> - <tr> - <td><code>validity.rangeUnderflow</code></td> - <td>Returns <code>true</code> if the element's value is lower than the provided minimum; <code>false</code> otherwise.<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td> - </tr> - <tr> - <td><code>validity.stepMismatch</code></td> - <td>Returns <code>true</code> if the element's value doesn't fit the rules provided by the step attribute; otherwise <code>false</code> .<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td> - </tr> - <tr> - <td><code>validity.tooLong</code></td> - <td>Returns <code>true</code> if the element's value is longer than the provided maximum length; else it wil be false<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} and {{cssxref(":out-of-range")}} CSS pseudo-class.</td> - </tr> - <tr> - <td><code>validity.typeMismatch</code></td> - <td>Returns true if the element's value is not in the correct syntax; otherwise false.<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td> - </tr> - <tr> - <td><code>validity.valid</code></td> - <td>Returns true if the element's value has no validity problems; false otherwise.<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":valid")}} CSS pseudo-class; the {{cssxref(":invalid")}} CSS pseudo-class otherwise.</td> - </tr> - <tr> - <td><code>validity.valueMissing</code></td> - <td>Returns true if the element has no value but is a required field; false otherwise.<br> - <br> - If it returns <code>true</code>, the element will match the {{cssxref(":invalid")}} CSS pseudo-class.</td> - </tr> - <tr> - <td><code>willValidate</code></td> - <td>Returns <code>true</code> if the element will be validated when the form is submitted; <code>false</code> otherwise.</td> - </tr> - </tbody> -</table> - -<h4 id="Constraint_validation_API_methods">Constraint validation API methods</h4> - -<table> - <thead> - <tr> - <th scope="col">Method</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>checkValidity()</code></td> - <td>Returns <code>true</code> if the element's value has no validity problems; <code>false</code> otherwise. If the element is invalid, this method also causes an {{event("invalid")}} event at the element.</td> - </tr> - <tr> - <td><code>setCustomValidity(<em>message</em>)</code></td> - <td>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.<br> - <br> - If the argument is the empty string, the custom error is cleared.</td> - </tr> - </tbody> -</table> - -<p>For legacy browsers, it's possible to use a <a href="https://hyperform.js.org/" rel="external">polyfill such as Hyperform </a> 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.</p> - -<h4 id="Example_using_the_constraint_validation_API">Example using the constraint validation API</h4> - -<p>Let's see how to use this API to build custom error messages. First, the HTML:</p> - -<pre class="brush: 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></pre> - -<p>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.</p> - -<p>The <a href="/en-US/docs/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a> attribute makes sure that our custom error message will be presented to everyone, including those using assistive technologies such as screen readers.</p> - -<h5 id="CSS">CSS</h5> - -<p>This CSS styles our form and the error output to look more attractive.</p> - -<pre class="brush: css">/* 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; -}</pre> - -<h5 id="JavaScript">JavaScript</h5> - -<p>The following JavaScript code handles the custom error validation.</p> - -<pre class="brush: js">// 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);</pre> - -<p>Here is the live result:</p> - -<p>{{EmbedLiveSample("Example_using_the_constraint_validation_API", "100%", 130)}}</p> - -<p>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.</p> - -<h3 id="Validating_forms_without_a_built-in_API">Validating forms without a built-in API</h3> - -<p>Sometimes, such as with legacy browsers or <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">custom widgets</a>, 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.</p> - -<p>To validate a form, you have to ask yourself a few questions:</p> - -<dl> - <dt>What kind of validation should I perform?</dt> - <dd>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.</dd> - <dt>What should I do if the form does not validate?</dt> - <dd>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?</dd> - <dt>How can I help the user to correct invalid data?</dt> - <dd>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: - <ul> - <li>SmashingMagazine: <a href="http://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li> - <li>SmashingMagazine: <a href="http://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li> - <li>Six Revision: <a href="http://sixrevisions.com/user-interface/best-practices-for-hints-and-validation-in-web-forms/" rel="external">Best Practices for Hints and Validation in Web Forms</a></li> - <li>A List Apart: <a href="http://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li> - </ul> - </dd> -</dl> - -<h4 id="Example_that_doesn't_use_the_constraint_validation_API">Example that doesn't use the constraint validation API</h4> - -<p>In order to illustrate this, let's rebuild the previous example so that it works with legacy browsers:</p> - -<pre class="brush: html"><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></pre> - -<p>As you can see, the HTML is almost the same; we just removed the HTML validation features. Note that <a href="/en-US/docs/Accessibility/ARIA">ARIA</a> is an independent specification that's not specifically related to HTML5.</p> - -<h5 id="CSS_2">CSS</h5> - -<p>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.</p> - -<pre class="brush: css">/* 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; -}</pre> - -<h5 id="JavaScript_2">JavaScript</h5> - -<p>The big changes are in the JavaScript code, which needs to do much more of the heavy lifting.</p> - -<pre class="brush: js">// 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"; - } -});</pre> - -<p>The result looks like this:</p> - -<p>{{EmbedLiveSample("Example_that_doesn't_use_the_constraint_validation_API", "100%", 130)}}</p> - -<p>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:</p> - -<ul> - <li>Standalone library - <ul> - <li><a href="http://rickharrison.github.com/validate.js/" rel="external">Validate.js</a></li> - </ul> - </li> - <li>jQuery plug-in: - <ul> - <li><a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" rel="external">Validation</a></li> - </ul> - </li> -</ul> - -<h4 id="Remote_validation">Remote validation</h4> - -<p>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.</p> - -<p>Performing such a validation requires taking a few precautions:</p> - -<ul> - <li>It requires exposing an API and some data publicly; be sure it is not sensitive data.</li> - <li>Network lag requires performing asynchronous validation. This requires some UI work in order to be sure that the user will not be blocked if the validation is not performed properly.</li> -</ul> - -<h2 id="Conclusion">Conclusion</h2> - -<p>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:</p> - -<ul> - <li>Display explicit error messages.</li> - <li>Be permissive about the input format.</li> - <li>Point out exactly where the error occurs (especially on large forms).</li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms/How_to_build_custom_form_widgets", "Learn/HTML/Forms")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/el/learn/forms/index.html b/files/el/learn/forms/index.html deleted file mode 100644 index 03f1ed316c..0000000000 --- a/files/el/learn/forms/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: HTML forms -slug: Learn/Forms -tags: - - Beginner - - Featured - - Forms - - Guide - - HTML - - Landing - - Learn - - NeedsTranslation - - TopicStub - - Web -translation_of: Learn/Forms -original_slug: Learn/HTML/Forms ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">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.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should at least work through our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>. At this point you should find the {{anch("Basic guides")}} easy to understand, and also be able to make use of our <a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Native form widgets</a> guide.</p> - -<p>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 <a href="/en-US/docs/Learn/CSS">CSS</a> and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> first.</p> - -<div class="note"> -<p><strong>Note</strong>: 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 <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Basic_guides">Basic guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="What_form_widgets_are_available">What form widgets are available?</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Validating_and_submitting_form_data">Validating and submitting form data</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Advanced_guides">Advanced guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></dt> - <dd>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.)</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></dt> - <dd>Article covering feature detection, etc. This should be redirected to the cross browser testing module, as the same stuff is covered better there.</dd> -</dl> - -<h2 id="Form_styling_guides">Form styling guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></dt> - <dd>This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></dt> - <dd>This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li> - <li><a href="/en-US/docs/Web/HTML/Element/input">HTML <input> types reference</a></li> -</ul> diff --git a/files/el/learn/getting_started_with_the_web/index.html b/files/el/learn/getting_started_with_the_web/index.html deleted file mode 100644 index f40626603a..0000000000 --- a/files/el/learn/getting_started_with_the_web/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Ξεκινώντας με τον Παγκοσμιο Ιστό -slug: Learn/Getting_started_with_the_web -translation_of: Learn/Getting_started_with_the_web ---- -<div>{{LearnSidebar}}</div> - -<div class="summary"> -<p>To <em>Ξεκινώντας με τον Παγκόσμιο Ιστό </em>αποτελεί μια συνοπτική, εισαγωγική σειρά άρθρων που παρουσιάζει τις πρακτικές πτυχές της ανάπτυξης ιστοσελίδων. Θα στήσετε τα εργαλεία που χρειάζεστε για να δημιουργήσετε μια απλή ιστοσελίδα και για να δημοσιεύσετε τον δικό σας απλό κώδικα.</p> -</div> - -<h2 id="Η_ιστορία_του_πρώτου_σας_ιστότοπου">Η ιστορία του πρώτου σας ιστότοπου</h2> - -<p>Χρειάζεται πολύ δουλειά για να δημιουργήσετε έναν επαγγελματικό ιστότοπο, οπότε αν δεν έχετε καθόλου εμπειρία στην ανάπτυξη ιστοσελίδων, σας ενθαρρύνουμε να ξεκινήσετε από κάτι μικρό. Δεν θα δημιουργήσετε ένα νέο Facebook αμέσως, αλλά από την άλλη δεν θα είναι δύσκολο να δημιουργήσετε τον δικό σας απλό ιστότοπο online, οπότε θα ξεκινήσουμε από εκεί.</p> - -<p>Ακολουθώντας τα άρθρα που παρατίθενται παρακάτω, θα πάτε από το μηδέν στην πρώτη σας ιστοσελίδα online. Ας ξεκινήσουμε!</p> - -<h3 id="Εγκατάσταση_βασικού_λογισμικού"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Εγκατάσταση βασικού λογισμικού</a></h3> - -<p>Υπάρχουν πολλά εργαλεία που μπορείτε να διαλέξετε για την ανάπτυξη ενός ιστοτόπου. Εάν μόλις ξεκινάτε, ίσως να μπερδευτείτε από την πληθώρα προγραμμάτων επεξεργασίας κώδικα, από τα πλαίσια και τα εργαλεία ελέγχου που υπάρχουν εκεί έξω. Στην ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Εγκατάσταση βασικού λογισμικού</a>, σας παρουσιάζουμε βήμα προς βήμα τον τρόπο εγκατάστασης μόνον του λογισμικού που χρειάζεστε για να ξεκινήσετε με τη βασική ανάπτυξη ιστοσελίδων.</p> - -<h3 id="What_will_your_website_look_like"><a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">What will your website look like?</a></h3> - -<p>Πριν ξεκινήσετε να γράφετε κώδικα για τον ιστότοπό σας, θα πρέπει πρώτα να τον σχεδιάσετε. Τι πληροφορία θα παρουσιάσετε; Ποιές γραμματοσειρές και ποιά χρώματα θα χρησιμοποιήσετε; <a href="/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Πως θα φαίνεται ο ιστότοπός σας;</a> Περιγράφουμε μια απλή μέθοδο που μπορείτε να ακολουθήσετε για να σχεδιάσετε τόσο το περιεχόμενο όσο και την εμφάνιση του ιστότοπού σας. </p> - -<h3 id="Ενασχόληση_με_τα_αρχεία"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Ενασχόληση με τα αρχεία</a></h3> - -<p>Ένας ιστότοπος αποτελείται από πολλά αρχεία: περιεχόμενο κειμένου, κώδικα, φύλλα στυλ, περιεχόμενο πολυμέσων κ.ο.κ. Όταν χτίζετε έναν ιστότοπο, πρέπει να συγκεντρώσετε όλα αυτά τα αρχεία σε μια λογική δομή και να βεβαιωθείτε ότι μπορούν να "μιλούν" μεταξύ τους. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Ενασχόληση με αρχεία</a> εξηγεί πώς να οργανώσετε μια λογική δομή αρχείων για τον ιστότοπό σας και ποια θέματα θα πρέπει να γνωρίζετε.</p> - -<h3 id="Τα_βασικά_της_HTML"><a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Τα βασικά της HTML</a></h3> - -<p>Η γλώσσα HTML (Hypertext Markup Language, Γλώσσα Σήμανσης Υπερκειμένου) είναι ο κώδικας που χρησιμοποιείτε για να δομήσετε το περιεχομένό σας στον Παγκόσμιο Ιστό και με τον οποί του δίνετε νόημα και σκοπό. Για παράδειγμα, το περιεχόμενό μου είναι ένα σύνολο παραγράφων ή μια λίστα με κουκκίδες; Έχω τοποθετήσει εικόνες στη σελίδα μου; Έχω έναν πίνακα δεδομένων; Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">Τα βασικά της HTML</a> παρέχει αρκετές πληροφορίες για να εξοικειώθείτε με τη γλώσσα HTML, χωρίς να σας κουράσει.</p> - -<h3 id="Τα_βασικά_των_CSS"><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Τα βασικά των CSS</a></h3> - -<p>Τα Cascading Stylesheets (CSS, Επικαλυπτόμενα Φύλλα Στυλ ή αλλιώς Φύλλα Διαδοχικού Στυλ) είναι ο κώδικας που χρησιμοποιείτε για να δώσετε στυλ στον ιστότοπό σας. Για παράδειγμα, θέλετε το κείμενο να είναι μαύρο ή κόκκινο; Πού πρέπει να εμφανισθεί το περιεχόμενο στην οθόνη; Ποιες εικόνες φόντου και ποια χρώματα θα πρέπει να χρησιμοποιηθούν για να διακοσμήσετε τον ιστότοπό σας; Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Τα βασικά των CSS</a> σας μεταφέρουν σε αυτό που χρειάζεστε για να ξεκινήσετε.</p> - -<h3 id="Τα_βασικά_της_JavaScript"><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Τα βασικά της JavaScript</a></h3> - -<p>Η JavaScript είναι η γλώσσα προγραμματισμού που χρησιμοποιείτε για να προσθέσετε διαδραστικές λειτουργίες στον ιστότοπό σας. Μερικά παραδείγματα θα μπορούσαν να είναι τα παιχνίδια, τα πράγματα που συμβαίνουν όταν πιέζονται κουμπιά ή εισάγονται δεδομένα σε φόρμες, τα δυναμικά εφέ styling, τα κινούμενα σχέδια και πολλά άλλα. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Τα βασικά της JavaScript</a> δίνουν μια ιδέα για το τι είναι δυνατό με αυτή τη συναρπαστική γλώσσα και πώς να ξεκινήσετε.</p> - -<h3 id="Δημοσίευση_του_ιστότοπού_σας"><a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Δημοσίευση του ιστότοπού σας</a></h3> - -<p>Μόλις τελειώσετε με τη σύνταξη του κώδικα και την οργάνωση των αρχείων που αποτελούν τον ιστότοπό σας, πρέπει να τα δημοσιεύσετε όλα online, ώστε να μπορούν να τα βρουν οι χρήστες. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Δημοσίευση του κώδικα </a>περιγράφει τον τρόπο με τον οποίο μπορείτε να ανεβάσετε το δείγμα του απλού κώδικα σας στον παγκόσμιο ιστό με την ελάχιστη δυνατή προσπάθεια.</p> - -<h3 id="Πως_λειτουργεί_ο_Παγκόσμιος_Ιστός"><a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Πως λειτουργεί ο Παγκόσμιος Ιστός</a></h3> - -<p>Όταν επισκέφτεσθε τον αγαπημένο σας ιστότοπο, συμβαίνουν πολλά και περίπλοκα πράγματα στο παρασκήνιο, τα οποία μπορεί να μην γνωρίζετε. Η ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Πώς λειτουργεί ο Παγκόσμιος Ιστός</a> περιγράφει συνοπτικά το τι συμβαίνει όταν βλέπετε μια ιστοσελίδα στον υπολογιστή σας.</p> - -<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> - -<p><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>: Μια εξαιρετική σειρά βίντεο που εξηγεί τα θεμελιώδη στοιχεία του ιστού και που στοχεύει σε πλήρως αρχάριους στην ανάπτυξη ιστού. Δημιουργήθηκε από τον <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</p> - -<div class="note"> -<h2 id="Feedback">Feedback</h2> - -<p>Βοηθήστε μας να βελτιώσουμε τους οδηγούς και τα tutorials σαν και αυτό εδώ συμπληρώνοντας το σχετικό <a href="https://www.surveygizmo.com/s3/4871248/MDN-Guides-Survey">ερωτηματολόγιο</a>.</p> -</div> diff --git a/files/el/learn/html/index.html b/files/el/learn/html/index.html deleted file mode 100644 index e2fcdc4043..0000000000 --- a/files/el/learn/html/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: 'Learning HTML: Guides and tutorials' -slug: Learn/HTML -tags: - - Beginner - - Guide - - HTML - - Intro - - Learn - - NeedsTranslation - - Topic - - TopicStub -translation_of: Learn/HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.</p> - -<h2 id="Learning_pathway">Learning pathway</h2> - -<p>Ideally you should start your learning journey by learning HTML. Start by reading <a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a>. You may then move on to learning about more advanced topics such as:</p> - -<ul> - <li><a href="/en-US/docs/Learn/CSS">CSS</a>, and how to use it to style HTML (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.)</li> - <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much much more.)</li> -</ul> - -<p>Before starting this topic, you should have at least basic familiarity with using computers, and using the web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and understand how to create and manage files, as detailed in <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a> — both are parts of our <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web</a> complete beginner's module.</p> - -<p>It is recommended that you work through <a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the web </a>before attempting this topic, however it isn't absolutely necessary; much of what is covered in the <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> article is also covered in our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, albeit in a lot more detail.</p> - -<h2 id="Modules">Modules</h2> - -<p>This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> - <dd>This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> - <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tables</a></dt> - <dd>Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML Forms</a></dt> - <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.</dd> -</dl> - -<h2 id="Solving_common_HTML_problems">Solving common HTML problems</h2> - -<p><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a> provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</p> - -<h2 id="See_also">See also</h2> - -<div class="document-head" id="wiki-document-head"> -<dl> - <dt><a href="/en-US/docs/Web/HTML">HTML (HyperText Markup Language)</a> on MDN</dt> - <dd>The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.</dd> -</dl> -</div> diff --git a/files/el/learn/index.html b/files/el/learn/index.html deleted file mode 100644 index fb5979aa99..0000000000 --- a/files/el/learn/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Μάθετε προγραμματισμό web -slug: Learn -tags: - - CSS - - HTML - - Web - - Αρχάριος - - Βασικά - - Εισαγωγή - - Εκμάθηση - - Οδηγός - - Προγραμματισμός-ιστού -translation_of: Learn ---- -<p>{{LearnSidebar}}</p> - -<p class="summary">Καλώς ορίσατε στην περιοχή εκμάθησης του MDN. Αυτή η σειρά άρθρων απευθύνεται σε αρχάριους και έχει ως σκοπό να σας προσφέρει όλες τις γνώσεις που θα χρειαστείτε για να ξεκινήσετε με την ανάπτυξη ιστοσελίδων.</p> - -<p>Στόχος της περιοχής εκμάθησης του MDN δεν είναι να σας κάνει "επαγγελματίες", αλλά να σας βοηθήσει να αποκτήσετε κάποια εξοικείωση. Από εκεί και πέρα, θα μπορέσετε να εξελιχθείτε με τη <a href="https://developer.mozilla.org/el">βοήθεια του MDN</a> και άλλων πηγών που αναλύουν πιο σύνθετα θέματα, τα οποία απαιτούν βασικές γνώσεις.</p> - -<p>Αν είστε εντελώς αρχάριοι, ο προγραμματισμός web μπορεί να σας φανεί δύσκολος — εμείς όμως θα σας καθοδηγήσουμε και θα σας παρέχουμε αρκετές λεπτομέρειες, ώστε να αισθανθείτε άνετα και να μάθετε σωστά τα περιεχόμενα. Δεν θα έχετε κανένα πρόβλημα, είτε αν σπουδάζετε ήδη αυτό το αντικείμενο, είτε αν διδάσκετε και ψάχνετε υλικό για την τάξη σας, είτε αν το κάνετε σαν χόμπι, είτε αν θέλετε απλά να μάθετε τον τρόπο λειτουργίας των τεχνολογιών web.</p> - -<h2 id="Τι_νέο_υπάρχει">Τι νέο υπάρχει;</h2> - -<p>Το περιεχόμενο στην περιοχή εκμάθησης εμπλουτίζεται τακτικά. Εκδίδουμε <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">σημειώσεις έκδοσης για την περιοχή εκμάθησης</a> για να ενημερώνεστε σχετικά με τις αλλαγές — μην ξεχνάτε να ελέγχετε τακτικά για νέο περιεχόμενο!</p> - -<p>Αν έχετε απορίες όσον αφορά τα θέματα που θέλετε να καλύψουμε ή αυτά που θεωρείτε ότι απουσιάζουν, ενημερώστε μας στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>.</p> - -<h2 id="Από_πού_να_ξεκινήσετε">Από πού να ξεκινήσετε</h2> - -<ul class="card-grid"> - <li><span>Για αρχάριους:</span> Αν είστε αρχάριοι στον προγραμματισμό web, θα σας προτείναμε να ξεκινήσετε με την ενότητα <a href="/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a>, η οποία παρέχει μια εισαγωγή στον προγραμματισμό web.</li> - <li><span>Πέρα από τα βασικά:</span> Αν έχετε ήδη μερικές γνώσεις, το επόμενο βήμα είναι να μάθετε λεπτομερώς {{Glossary("HTML")}} και {{Glossary("CSS")}}. Ξεκινήστε με την ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στην HTML</a> και έπειτα, συνεχίστε στην ενότητα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/First_steps">Εισαγωγή στην CSS</a>.</li> - <li><span>Προχωρώντας σε σενάρια:</span>Αν έχετε ήδη εξοικειωθεί με τις HTML και CSS, ή σας ενδιαφέρει κυρίως η συγγραφή κώδικα, μπορείτε να προχωρήσετε στην {{Glossary("JavaScript")}} ή στον προγραμματισμό από την πλευρά του διακομιστή. Ξεκινήστε με τις ενότητες <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Πρώτα βήματα στη JavaScript</a> και <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">Πρώτα βήματα στην πλευρά του διακομιστή</a>.</li> - <li><span>Πλαίσια και εργαλεία:</span>Αφού κατακτήσετε τις βασικές γνώσεις σε HTML, CSS και JavaScript, θα πρέπει να μάθετε τα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">εργαλεία προγραμματισμού από την πλευρά του πελάτη</a> και έπειτα, εμβαθύνετε στα <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks">πλαίσια JavaScript από την πλευρά του πελάτη</a> και στον <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">προγραμματισμό ιστοσελίδων από την πλευρά του διακομιστή</a>.</li> -</ul> - -<div class="note"> -<p><strong>Σημείωση</strong>: Το <a href="/en-US/docs/Glossary">γλωσσάρι</a> μας παρέχει ορισμούς όρων. Επίσης, αν έχετε μια συγκεκριμένη απορία σχετικά με τον προγραμματισμό web, η ενότητα <a href="/en-US/docs/Learn/Common_questions">Συχνές ερωτήσεις</a> ίσως μπορεί να σας βοηθήσει.</p> -</div> - -<p>{{LearnBox({"title":"Τυχαίο λεξιλόγιο"})}}</p> - -<h2 id="Καλυπτόμενα_θέματα"><span>Καλυπτόμενα θέματα</span></h2> - -<p>Ακολουθεί μια λίστα με όλα τα θέματα που καλύπτονται στην περιοχή εκμάθησης του MDN.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το web</a></dt> - <dd>Παρέχεται μια ουσιαστική εισαγωγή στον προγραμματισμό web για αρχάριους.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML — Κατασκευή του web</a></dt> - <dd>Η HTML είναι η γλώσσα που χρησιμοποιούμε για να κατασκευάσουμε τα διάφορα μέρη του περιεχομένου μας και να καθορίσουμε τη σημασία ή το σκοπό τους. Αυτό το άρθρο εξηγεί την HTML σε βάθος.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS — Διακόσμηση του web</a></dt> - <dd>Η CSS είναι η γλώσσα που χρησιμοποιούμε για να διακοσμήσουμε και να διατάξουμε το περιεχόμενο, καθώς και να προσθέσουμε συμπεριφορές, όπως εφέ κίνησης. Αυτό το άρθρο σας παρέχει βασική εκπαίδευση της CSS.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript — Δυναμικά σενάρια από την πλευρά του πελάτη</a></dt> - <dd>Η JavaScript είναι μια γλώσσα προγραμματισμού σεναρίων που χρησιμοποιούμε για να προσθέσουμε δυναμική λειτουργικότητα σε ιστοσελίδες. Αυτό το άρθρο εξηγεί όλα όσα χρειάζεστε για να εξοικειωθείτε με τη σύνταξη και την κατανόηση της Javascript.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">Προσβασιμότητα — κάντε το web χρήσιμο για όλους</a></dt> - <dd>Η προσβασιμότητα είναι η πρακτική με την οποία κάνετε το διαδικτυακό περιεχόμενο διαθέσιμο για όσους περισσότερους χρήστες γίνεται, ανεξαρτήτως αναπηρίας, συσκευής, τοποθεσίας ή άλλων παραγόντων. Αυτό το άρθρο παρέχει όλες τις απαραίτητες πληροφορίες.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Performance">Επιδόσεις web — γρήγορες και ανταποκρίσιμες ιστοσελίδες</a></dt> - <dd>Οι επιδόσεις web είναι η τέχνη του να επιτυγχάνει κανείς υψηλή ταχύτητα λήψης των εφαρμογών web, καθώς και καλή ανταποκρισιμότητα κατά την αλληλεπίδραση με το χρήστη, ανεξάρτητα από το εύρος ζώνης του χρήστη, το μέγεθος της οθόνης, το δίκτυο ή τις ικανότητες της συσκευής.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing">Εργαλεία και δοκιμή</a></dt> - <dd>Αυτό το άρθρο καλύπτει τα εργαλεία που χρησιμοποιούν οι προγραμματιστές για να διευκολύνουν τη δουλειά τους, όπως εργαλεία δοκιμής για διαφορετικά προγράμματα περιήγησης, linters, formatters, εργαλεία μεταμόρφωσης, συστήματα ελέγχου εκδόσεων, εργαλεία ανάπτυξης και πλαίσια JavaScript από την πλευρά του πελάτη.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side">Προγραμματισμός ιστοσελίδων από την πλευρά του διακομιστή</a></dt> - <dd>Ακόμα κι αν επικεντρώνεστε στον προγραμματισμό web από την πλευρά του πελάτη, είναι χρήσιμο να γνωρίζετε πώς λειτουργούν οι διακομιστές και οι λειτουργίες του κώδικά τους. Αυτό το άρθρο παρέχει μια γενική εισαγωγή στον τρόπο λειτουργίας του διακομιστή, καθώς και λεπτομερείς οδηγούς, οι οποίοι δείχνουν πώς να αναπτύξετε μια εφαρμογή από πλευράς διακομιστή με τη βοήθεια δύο γνωστών πλαισίων — Django (Python) και Express (node.js).</dd> -</dl> - -<h2 id="Απόκτηση_παραδειγμάτων_κώδικα">Απόκτηση παραδειγμάτων κώδικα</h2> - -<p>Τα παραδείγματα κώδικα που θα συναντήσετε στην περιοχή εκμάθησης είναι όλα <a href="https://github.com/mdn/learning-area/">διαθέσιμα στο GitHub</a>. Αν θέλετε να τα αντιγράψετε όλα στον υπολογιστή σας, ο πιο εύκολος τρόπος είναι να <a href="https://github.com/mdn/learning-area/archive/master.zip">κάνετε λήψη του ZIP του πιο πρόσφατου κύριου branch κώδικα</a>.</p> - -<p>Αν προτιμάτε να αντιγράψετε το αποθετήριο με έναν πιο ευέλικτο τρόπο, που επιτρέπει αυτόματες ενημερώσεις, μπορείτε να ακολουθήσετε τις πιο σύνθετες οδηγίες:</p> - -<ol> - <li><a href="https://git-scm.com/downloads">Κάντε εγκατάσταση του Git</a> στον υπολογιστή σας. Αυτό είναι το λογισμικό συστήματος ελέγχου εκδόσεων, πάνω στο οποίο λειτουργεί το GitHub.</li> - <li>Ανοίξτε τη <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">γραμμή εντολών</a> (Windows) ή το τερματικό (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>) στον υπολογιστή σας.</li> - <li>Για να αντιγράψετε το αποθετήριο της περιοχής εκμάθησης σε ένα φάκελο με όνομα "learning-area" στην τοποθεσία που δείχνει η γραμμή εντολών ή το τερματικό σας, χρησιμοποιήστε την εξής εντολή: - <pre class="brush: bash notranslate">git clone https://github.com/mdn/learning-area</pre> - </li> - <li>Μπορείτε πλέον να ανοίξετε τον κατάλογο και να βρείτε τα αρχεία που ψάχνετε (είτε μέσω Finder/Εξερεύνησης αρχείων είτε μέσω της <a href="https://en.wikipedia.org/wiki/Cd_(command)">εντολής</a> <a href="https://en.wikipedia.org/wiki/Cd_(command)"><code>cd</code></a>).</li> -</ol> - -<p>Μπορείτε να ενημερώσετε το αποθετήριο <code>learning-area</code> μετά από τυχόν αλλαγές που έγιναν στην κύρια έκδοση στο GitHub, ακολουθώντας τα εξής βήματα:</p> - -<ol> - <li>Στη γραμμή εντολών/τερματικό, μπείτε στον κατάλογο <code>learning-area</code> με την εντολή <code>cd</code>. Για παράδειγμα, αν βρίσκεστε στον γονικό κατάλογο: - - <pre class="brush: bash notranslate">cd learning-area</pre> - </li> - <li>Ενημερώστε το αποθετήριο με την ακόλουθη εντολή: - <pre class="brush: bash notranslate">git pull</pre> - </li> -</ol> - -<h2 id="Επικοινωνήστε_μαζί_μας">Επικοινωνήστε μαζί μας</h2> - -<p>Αν θέλετε να επικοινωνήσετε με εμάς για οτιδήποτε, ο καλύτερος τρόπος είναι να μας αφήσετε ένα μήνυμα στο <a href="https://discourse.mozilla.org/c/mdn">φόρουμ μας στο Discourse</a>. Θα θέλαμε να μας πείτε αν θεωρείτε ότι κάτι είναι λάθος ή λείπει από την ιστοσελίδα, αν έχετε αιτήματα για νέα θέματα εκμάθησης, αν έχετε αιτήματα για βοήθεια με ό,τι δεν κατανοείτε, ή οποιαδήποτε άλλη απορία/ανησυχία.</p> - -<p>Αν σας ενδιαφέρει να βοηθήσετε με την ανάπτυξη/βελτίωση του περιεχομένου, ρίξτε μια ματιά στο <a href="/en-US/docs/Learn/How_to_contribute">πώς να μπορέσετε να βοηθήσετε</a> και να έρθετε σε επικοινωνία μαζί μας! Θα χαρούμε ιδιαίτερα να μιλήσουμε μαζί σας, είτε είστε μαθητής, είτε είστε δάσκαλος, είτε είστε έμπειρος προγραμματιστής web, είτε απλά ενδιαφέρεστε να συμβάλλετε στη βελτίωση της εμπειρίας εκμάθησης.</p> - -<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> - -<dl> - <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla newsletter για προγραμματιστές</a></dt> - <dd>Το newsletter μας για προγραμματιστές web, το οποίο αποτελεί μια εξαιρετική πηγή πληροφοριών για όλα τα επίπεδα εμπειρίας.</dd> - <dt><a href="https://learnjavascript.online/">Learn JavaScript</a></dt> - <dd>Μια εξαίσια πηγή πληροφοριών για νέους προγραμματιστές web — Μάθετε JavaScript σε ένα διαδραστικό περιβάλλον, με σύντομα μαθήματα και διαδραστικά τεστ, ενώ παρέχεται αυτοματοποιημένη αξιολόγηση. Τα πρώτα 40 μαθήματα είναι δωρεάν και μπορείτε να αποκτήσετε ολόκληρη τη σειρά μαθημάτων με μια μικρή εφάπαξ πληρωμή.</dd> - <dt><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web demystified</a></dt> - <dd>Μια θαυμάσια σειρά βίντεο που εξηγεί τα θεμελιώδη θέματα του web και απευθύνεται σε αρχάριους. Δημιουργήθηκε από τον <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</dd> - <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> - <dd>Μια εξαιρετική, διαδραστική ιστοσελίδα για εκμάθηση γλωσσών προγραμματισμού από την αρχή.</dd> - <dt><a href="https://www.bitdegree.org/learn/">BitDegree</a></dt> - <dd>Βασική θεωρία κώδικα με μια διασκεδαστική διαδικασία εκμάθησης. Απευθύνεται κυρίως σε αρχάριους.</dd> - <dt><a href="https://code.org/">Code.org</a></dt> - <dd>Βασική θεωρία και εξάσκηση κώδικα, απευθύνεται κυρίως σε παιδιά/αρχάριους.</dd> - <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a></dt> - <dd>Δωρεάν μαθήματα ανοικτού κώδικα για τεχνολογικές ικανότητες. Παρέχεται καθοδήγηση και η εκμάθηση επιτυγχάνεται μέσω εργασιών.</dd> - <dt><a href="https://www.freecodecamp.org/">freeCodeCamp.org</a></dt> - <dd>Διαδραστική ιστοσελίδα με οδηγούς και εργασίες για να μάθετε προγραμματισμό web.</dd> - <dt><a href="https://foundation.mozilla.org/en/initiatives/web-literacy/core-curriculum/">Web literacy map</a></dt> - <dd>Ένα πλαίσιο για βασικές γνώσεις σχετικά με το web και ικανότητες, ενώ παρέχει επίσης πρόσβαση σε διδακτικές δραστηριότητες, ταξινομημένες σε κατηγορίες.</dd> - <dt><a href="https://edabit.com/challenges/javascript">Edabit</a></dt> - <dd>Χιλιάδες διαδραστικές προκλήσεις JavaScript.</dd> -</dl> diff --git a/files/el/learn/javascript/first_steps/index.html b/files/el/learn/javascript/first_steps/index.html deleted file mode 100644 index f9f0e1e060..0000000000 --- a/files/el/learn/javascript/first_steps/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Τα Πρώτα Βήματα στη JavaScript -slug: Learn/JavaScript/First_steps -tags: - - JavaScript - - Άρθρο - - Αξιολόγηση - - Αριθμοί - - Αρχάριος - - Ενότητα - - Μεταβλητές - - Οδηγός - - Πίνακες - - Συμβολοσειρές - - μαθηματικά - - προγραμματισμός - - τελεστές -translation_of: Learn/JavaScript/First_steps -original_slug: Learn/JavaScript/Πρώτα_βήματα ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Στην πρώτη ενότητα της JavaScript, απαντούμε πρώτα σε μερικές θεμελιώδεις ερωτήσεις όπως "τι είναι η JavaScript;", "πώς μοιάζει;" και "τι μπορεί να κάνει;", προτού προχωρήσουμε στην πρώτη σας πρακτική εμπειρία συγγραφής JavaScript. Μετά από αυτό, συζητάμε λεπτομερώς μερικά βασικά δομικά στοιχεία , όπως μεταβλητές, αλφαριθμητικά, αριθμούς και πίνακες.</p> - -<h2 id="Προϋποθέσεις">Προϋποθέσεις</h2> - -<p>Πριν ξεκινήσετε αυτήν την ενότητα, δεν χρειάζεστε προηγούμενη γνώση της JavaScript, αλλά θα πρέπει να έχετε κάποια εξοικείωση με την HTML και το CSS. Συνιστάται να εργαστείτε μέσω των παρακάτω ενοτήτων πριν ξεκινήσετε με τη JavaScript:</p> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με τον Ιστό</a> (που περιλαμβάνει μια πραγματικά <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">βασική εισαγωγή JavaScript</a>).</li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στην HTML</a>.</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Εισαγωγή στο CSS</a>.</li> -</ul> - -<div class="note"> -<p><strong>Σημείωση</strong>: Εάν εργάζεστε σε έναν υπολογιστή / ταμπλέτα / άλλη συσκευή όπου δεν έχετε τη δυνατότητα να δημιουργήσετε τα δικά σας αρχεία, μπορείτε να δοκιμάσετε (τα περισσότερα) παραδείγματα κώδικα σε ένα online πρόγραμμα κωδικοποίησης όπως το <a href="http://jsbin.com/">JSBin</a> ή το <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Οδηγοί">Οδηγοί</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Τί είναι η JavaScript</a>;</dt> - <dd>Καλώς ορίσατε στο μάθημα JavaScript για αρχάριους του MDN! Σε αυτό το πρώτο άρθρο θα εξετάσουμε τη JavaScript από ένα υψηλό επίπεδο, απαντώντας σε ερωτήσεις όπως "τι είναι;" και "τι κάνει;" και να βεβαιωθείτε ότι είστε άνετοι με το σκοπό της JavaScript.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">Μια πρώτη ματιά στη JavaScript</a></dt> - <dd>Τώρα που έχετε μάθει μερικά πράγματα σχετικά με τη θεωρία της JavaScript και τι μπορείτε να κάνετε με αυτή, θα σας δώσουμε μια σειρά μαθημάτων με τα βασικά χαρακτηριστικά της JavaScript μέσω ενός πλήρως πρακτικού οδηγού. Εδώ θα δημιουργήσετε ένα απλό παιχνίδι "Μάντεψε τον αριθμό", βήμα προς βήμα.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">Τι πήγε λάθος; Αντιμετώπιση προβλημάτων στη JavaScript</a></dt> - <dd>Όταν δημιουργήσατε το παιχνίδι "Μάντεψε τον αριθμό" στο προηγούμενο άρθρο, μπορεί να διαπιστώσατε ότι δεν λειτούργησε. Μην φοβηθείτε - αυτό το άρθρο στοχεύει να σας εξοικονομήσει από το βγάλσιμο των μαλλιών σας πάνω από τέτοια προβλήματα, παρέχοντάς σας μερικές απλές συμβουλές για το πώς μπορείτε να βρείτε και να διορθώσετε σφάλματα σε προγράμματα JavaScript.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Αποθήκευση των πληροφοριών που χρειάζεστε - Μεταβλητές</a></dt> - <dd>Αφού διαβάσατε τα τελευταία άρθρα, πρέπει τώρα να είστε σε θέση να γνωρίζετε τι είναι η JavaScript, τι μπορεί να κάνει για εσάς, πώς την χρησιμοποιείτε παράλληλα με άλλες τεχνολογίες ιστού και ποια είναι τα βασικά χαρακτηριστικά της από ένα υψηλό επίπεδο. Σε αυτό το άρθρο θα φτάσουμε στα πραγματικά βασικά, εξετάζοντας πώς να δουλέψουμε με τα πιο βασικά δομικά στοιχεία της JavaScript - Μεταβλητές.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Βασικά μαθηματικά σε JavaScript - αριθμοί και τελεστές </a></dt> - <dd>Σε αυτό το σημείο του μαθήματος συζητάμε για τα μαθηματικά στη JavaScript - πώς μπορούμε να συνδυάσουμε τους τελεστές και άλλα χαρακτηριστικά για να χειριστούμε επιτυχώς τους αριθμούς.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Χειρισμός κειμένου - συμβολοσειρές στη JavaScript</a></dt> - <dd>Στη συνέχεια θα στρέψουμε την προσοχή μας σε συμβολοσειρές - έτσι λέγονται κομμάτια κειμένου στον προγραμματισμό. Σε αυτό το άρθρο θα εξετάσουμε όλα τα συνηθισμένα πράγματα που πρέπει να γνωρίζετε σχετικά με τις συμβολοσειρές κατά την εκμάθηση της JavaScript, όπως η δημιουργία συμβολοσειρών, η διαφυγή εισαγωγικών σε συμβολοσειρές και η σύνδεσή τους μαζί.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Χρήσιμες μέθοδοι συμβολοσειρών</a></dt> - <dd>Τώρα εξετάσαμε τα βασικά στοιχεία των συμβολοσειρών, ας ανεβάσουμε ταχύτητα και ας αρχίσουμε να σκεφτόμαστε τι χρήσιμες λειτουργίες μπορούμε να κάνουμε σε συμβολοσειρές με ενσωματωμένες μεθόδους, όπως η εύρεση του μήκους μιας συμβολοσειράς κειμένου, η ένωση και η διαίρεση των συμβολοσειρών, αντικαθιστώντας ένα χαρακτήρα σε μια συμβολοσειρά με έναν άλλο και πολλά άλλα.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Πίνακες</a></dt> - <dd>Στο τελευταίο άρθρο αυτής της ενότητας, θα εξετάσουμε τους πίνακες - ένας τακτικός τρόπος αποθήκευσης μιας λίστας στοιχείων δεδομένων κάτω από ένα ενιαίο όνομα μεταβλητής. Εδώ εξετάζουμε γιατί αυτό είναι χρήσιμο, στη συνέχεια θα διερευνήσουμε πώς να δημιουργήσουμε ένα πίνακα, να ανακτήσουμε, να προσθέσουμε και να αφαιρέσουμε στοιχεία που είναι αποθηκευμένα σε έναν πίνακα και πολλά άλλα.</dd> -</dl> - -<h2 id="Αξιολόγηση">Αξιολόγηση</h2> - -<p>Η παρακάτω αξιολόγηση θα ελέγξει την κατανόησή σας στα βασικά της JavaScript που καλύπτονται στους παραπάνω οδηγούς.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Ανόητη γεννήτρια ιστοριών</a> </dt> - <dd>Σε αυτήν την αξιολόγηση, θα είστε επιφορτισμένοι με τη χρήση κάποιων από τις γνώσεις που έχετε πάρει στα άρθρα αυτής της ενότητας και την εφαρμογή της στη δημιουργία μιας διασκεδαστικής εφαρμογής που δημιουργεί τυχαίες ανόητες ιστορίες. Καλα να περνατε!</dd> -</dl> diff --git a/files/el/learn/javascript/index.html b/files/el/learn/javascript/index.html deleted file mode 100644 index 1730d9953f..0000000000 --- a/files/el/learn/javascript/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: JavaScript -slug: Learn/JavaScript -translation_of: Learn/JavaScript ---- -<div class="note"><span style="background-color: #ffffff; font-size: 14px;">Κατά τη μετάφραση αυτού του κειμένου η ορολογία δεν μεταφράζεται, όταν κάποιος όρος στην αγγλική δεν είναι κατανοητός μπορείται να τον αναζητήσετε στο internet ή στο Glossar**. **Θα υλοποιηθεί σταδιακά.</span></div> - -<p class="summary">Η JavaScript είναι μια γλώσσα προγραμματισμού που επιτρέπει να υλοποιήσετε σύνθετες ενέργειες σε ιστοσελίδες - κάθε φορά που μια ιστοσελίδα κάνει περισσότερα από το να προβάλει στατικό περιεχόμενο - περιέχει δηλαδή έγκαιρα ενημερωμένο περιεχόμενο, ή χάρτες με αλληλεπίδραση ή κινούμενα 2D/3D γραφικά ή κυλιόμενα βίντεο, jukeboxes, κλπ. - μπορείται να στοιχηματίσεται ότι είναι πολύ πιθανό να περιλαμβάνει javascript.</p> - -<h3 id="Διαδρομές_μάθησης"><strong>Διαδρομές μάθησης</strong></h3> - -<p>Η εκμάθηση της JavaScript είναι αποδεδειγμένα δυσκολότερη από άλλες σχετικές τεχνολογίες όπως <a href="/en-US/docs/Learn/HTML">HTML</a> και <a href="/en-US/docs/Learn/CSS">CSS</a>. Πριν προσπαθήσετε να μάθετε JavaScript, πρέπει να είστε εξοικοιωμένοι τουλάχιστο με αυτές τις 2 τεχνολογίες (HTM, CSS), ή και άλλες. Ξεκίνηστε δουλεύοντα στις παρακάτω ενότητες:</p> - -<ul> - <li><a href="/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduction to HTML</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a></li> -</ul> - -<p>Προηγούμενη εμπειρία με άλλες γλώσσες προγραμματισμού μπορεί να σας βοηθήσει.</p> - -<p>Αφού εξοικιωθείται με τα βασικά της javascript, θα είστε σε θέση να μάθεται περισσότερα για πιο προχωρημένα θέματα, πχ:</p> - -<ul> - <li>JavaScript in depth, as taught in our <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript guide</a></li> - <li><a href="/en-US/docs/Web/API">HTML5 APIs</a></li> -</ul> - -<h3 id="ΕΝΟΤΗΤΕΣ"><strong>ΕΝΟΤΗΤΕΣ</strong></h3> - -<p>Αυτό το θέμα περιέχει τις ακόλουθες ενότητες και προτείνεται να ακολουθήσετε την σειρά τους κατά τη μελέτη σας. </p> - -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> - <dd>Στην πρώτο κεφάλαιο, απαντούνται κάποιες βασικές ερωτήσεις όπως "Τι είναι η javascript;" , "Πως εμφανίζεται;", και "Τι μπορείται να κάνετε με αυτήν;", πριν ξεκινήσετε με τα πρώτα παραδείγματα κώδικα. Μετά από αύτό θα αναφερθούν κάποιες βασικά χαρακτηριστικά της γλώσσας με λεπτομέρειες, όπως μεταβλητές (variables), συμβολοσειρές (strings), αριθμοί (numbers) και λίστες (arrays). </dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> - <dd>Σε αυτό το κεφάλαιο συνεχίζεται η κάλυψη των βασικών χαρακτηριστικών της γλώσσας με έμφαση στους συχνότερα συναντώμενους τύπους μποκ κώδικα όπως είναι υποθέσεις (conditional statements), επαναλήψει (loops), συναρτήσεις (functions), και συμβάντα (events). Εάν έχετε ήδη συναντήσει τα παραπάνω, εδώ θα αναπτυχθούν με λεπτομέρεια.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> - <dd>Στη javascript πολλά πράγματα είναι αντικείμενα (objects), από βασικά στοιχεία της γλώσσας όπως string και arrays μέχρι τα APIs του browser. Μπορείτε επίσης να δημιουργήσετε δικά σας αντικείμενα στα οποία να βάλετε συναρτήσεις και μεταβλητές δημιουργώντας αποτελεσματικό κώδικα. Η αντικειμενοστρεφής φύση της γλώσσας πρέπει να γίνει κατανοητή για να επεκτείνεται τις γνώσεις σας και να γράψετε αποτελεσματικό κώδικα. Γιαυτό έχει δημιουργηθεί και αυτό το κεφάλαιο για να σας βοηθήσει. Εδώ θα διδαχθείται τη θεωρία των αντικειμένων τη σύνταξή τους λεπτομερειακά, θα δείτε πω να κάνετε τα δικά σας αντικείμενα και επεξηγείται τι είναι τα JSON data και πως να δουλεύετε με αυτά.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> - <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> -</dl> - -<h2 id="Solving_common_JavaScript_problems">Solving common JavaScript problems</h2> - -<p><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a> provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.</p> - -<h2 id="See_also">See also</h2> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript">JavaScript on MDN</a></dt> - <dd>The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.</dd> - <dt><a href="https://www.youtube.com/user/codingmath">Coding math</a></dt> - <dd>An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by <a href="https://twitter.com/bit101">Keith Peters</a>.</dd> -</dl> diff --git a/files/el/mdn/about/index.html b/files/el/mdn/about/index.html deleted file mode 100644 index 6e6e0dedd1..0000000000 --- a/files/el/mdn/about/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: Σχετικά με το MDN -slug: MDN/About -translation_of: MDN/About ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubNav("/en-US/docs/MDN")}}</div> - -<p>Το MDN Web Docs είναι μια εξελισσόμενη πλατφόρμα εκμάθησης για τις διαδικτυακές τεχνολογίες και το λογισμικό που τροφοδοτεί το διαδίκτυο, καθώς και τα εξής:</p> - -<ul> - <li>Διαδικτυακά πρότυπα, όπως τα <a href="/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a>, <a href="/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> και <a href="/en-US/docs/JavaScript" title="/en-US/docs/JavaScript">JavaScript</a></li> - <li><a href="/en-US/docs/Apps" title="/en-US/docs/Apps">Ανάπτυξη εφαρμογών ανοικτού ιστού</a></li> - <li><a href="/en-US/docs/Add-ons" title="/en-US/docs/Add-ons">Ανάπτυξη προσθέτων του Firefox</a></li> -</ul> - -<h2 id="Η_αποστολή_μας">Η αποστολή μας</h2> - -<p>Η αποστολή του MDN είναι απλή: παροχή αναγκαίων πληροφοριών στους προγραμματιστές, ώστε να αναπτύξουν έργα στο <a href="/en-US/docs/Web">ανοικτό διαδίκτυο</a>. Αν είναι μια ανοικτή τεχνολογία που αφορά το διαδίκτυο, θέλουμε να την καταγράψουμε.</p> - -<p>Επιπλέον, παρέχουμε τεκμηρίωση σχετικά με τα <a href="/en-US/docs/Mozilla">προϊόντα της Mozilla</a> και το πώς <a href="/en-US/docs/Mozilla">να αναπτύξετε και να συνεισφέρετε στα έργα της Mozilla</a>.</p> - -<p>Αν δεν είστε σίγουροι εάν ένα συγκεκριμένο θέμα πρέπει να καλυφθεί στο MDN, διαβάστε το "<a href="/en-US/docs/Project:MDN/Contributing/Does_this_belong">Does this belong on MDN?</a>".</p> - -<h2 id="Πώς_μπορείτε_να_βοηθήσετε">Πώς μπορείτε να βοηθήσετε</h2> - -<p>Δεν χρειάζεται να ξέρετε από προγραμματισμό—ή πολύ καλό προγραμματισμό—για να μπορέσετε να βοηθήσετε το MDN! Έχουμε πολλούς τρόπους με τους οποίους μπορείτε να βοηθήσετε, from reviewing articles to be sure they make sense, to contributing text, to adding sample code. In fact, there are so many ways to help that we have a <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> page that helps you pick tasks to do, based on your interests and how much time you have to spare!</p> - -<p>You can also help by <a href="/en-US/docs/MDN/About/Promote">promoting MDN</a> on your own blog or website.</p> - -<h2 id="The_MDN_community">The MDN community</h2> - -<p>Our community is a global one! We have amazing contributors all around the world, in a number of languages. If you'd like to learn more about us, or if you need help of any kind with MDN, feel free to check out our <a href="https://discourse.mozilla-community.org/c/mdn">discussion forum</a> or <a href="irc://irc.mozilla.org#mdn">IRC channel</a>! You can also keep up with what we're up to by following our Twitter account, <a href="http://twitter.com/MozDevNet">@MozDevNet</a>. You can also send tweets our way if you see something wrong or if you'd like to offer feedback (or great big thank yous) to our writers and contributors!</p> - -<h2 id="Using_MDN_Web_Docs_content">Using MDN Web Docs content</h2> - -<p>MDN's content is available free of charge, and under open source licenses.</p> - -<h3 id="Copyrights_and_licenses">Copyrights and licenses</h3> - -<p>MDN's content is entirely available under various open source licenses. This section covers the types of content we provide and what licenses are in effect for each.</p> - -<h4 id="Τεκμηρίωση_και_άρθρα">Τεκμηρίωση και άρθρα</h4> - -<p><strong>MDN wiki documents</strong> have been prepared with the contributions of many authors, both within and outside the Mozilla Foundation. Unless otherwise indicated, the content is available under the terms of the <a class="external text" href="http://creativecommons.org/licenses/by-sa/2.5/" rel="nofollow" title="http://creativecommons.org/licenses/by-sa/2.5/">Creative Commons Attribution-ShareAlike license</a> (CC-BY-SA), v2.5 or any later version. Please attribute "Mozilla Contributors" and include a hyperlink (online) or URL (in print) to the specific wiki page for the content being sourced. For example, to provide attribution for this article, you can write:</p> - -<blockquote><a href="https://developer.mozilla.org/en-US/docs/MDN/About">About MDN</a> by <a href="https://developer.mozilla.org/en-US/docs/MDN/About$history">Mozilla Contributors</a> is licensed under <a href="http://creativecommons.org/licenses/by-sa/2.5/">CC-BY-SA 2.5</a>.</blockquote> - -<p>Note that in the example, "Mozilla Contributors" links to the history of the cited page. See <a href="http://wiki.creativecommons.org/Marking/Users">Best practices for attribution</a> for further explanation.</p> - -<div class="note"> -<p>See <a href="/en-US/docs/MDN_content_on_WebPlatform.org" title="/en-US/docs/MDN_content_on_WebPlatform.org">MDN content on WebPlatform.org</a> for information about how to reuse and attribute MDN content on that site.</p> -</div> - -<h4 id="Δείγματα_και_τμήματα_κώδικα">Δείγματα και τμήματα κώδικα</h4> - -<p>Code samples added on or after August 20, 2010 are in the <a class="external" href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://wiki.creativecommons.org/Public_domain">public domain</a> (<a href="https://creativecommons.org/publicdomain/zero/1.0/">CC0</a>). No licensing notice is necessary, but if you need one, you can use: "Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/".</p> - -<p>Code samples added to this wiki before August 20, 2010 are available under the <a class="external" href="http://www.opensource.org/licenses/mit-license.php" title="http://www.opensource.org/licenses/mit-license.php">MIT license</a>; you should insert the following attribution information into the MIT template: "© <date of last wiki page revision> <name of person who put it in the wiki>".</p> - -<h4 id="Συνεισφορές">Συνεισφορές</h4> - -<p>If you wish to contribute to this wiki, you must make your documentation available under the Attribution-ShareAlike license (or occasionally an alternative license already specified by the page you are editing), and your code samples available under <a href="http://creativecommons.org/publicdomain/zero/1.0/" title="http://creativecommons.org/publicdomain/zero/1.0/">Creative Commons CC-0</a> (a Public Domain dedication). Adding to this wiki means you agree that your contributions will be made available under those licenses.</p> - -<p>Some older content was made available under a license other than the licenses noted above; these are indicated at the bottom of each page by way of an <a class="internal" href="/Archive/Meta_docs/Examples/Alternate_License_Block" title="Project:En/Examples/Alternate License Block">Alternate License Block</a>.</p> - -<div class="warning"> -<p>Δεν μπορούν να δημιουργηθούν νέες σελίδες με διαφορετικές άδειες.</p> -</div> - -<p><strong>Copyright for contributed materials remains with the author unless the author assigns it to someone else</strong>.</p> - -<p>If you have any questions or concerns about anything discussed here, please contact <a class="external" href="mailto:mdn-admins@mozilla.org?subject=MDN%20licensing%20question" rel="nofollow" title="mailto:eshepherd@mozilla.com">the MDN administrators</a>.</p> - -<h4 id="Λογότυπα_και_εμπορικά_σήματα">Λογότυπα και εμπορικά σήματα</h4> - -<hr> -<p>The rights in the trademarks, logos, service marks of the Mozilla Foundation, as well as the look and feel of this web site, are not licensed under the Creative Commons license, and to the extent they are works of authorship (like logos and graphic design), they are not included in the work that is licensed under those terms. If you use the text of documents, and wish to also use any of these rights, or if you have any other questions about complying with our licensing terms for this collection, you should contact the Mozilla Foundation here: <a class="external text" href="mailto:licensing@mozilla.org" rel="nofollow" title="mailto:licensing@mozilla.org">licensing@mozilla.org</a>.</p> - -<h3 id="Σύνδεση_στο_MDN">Σύνδεση στο MDN</h3> - -<p>Δείτε αυτό το άρθρο για καθοδήγηση σχετικά με τη <a href="/en-US/docs/MDN/About/Linking_to_MDN">σύνδεση στο MDN</a> για καλύτερες πρακτικές κατά τη σύνδεση.</p> - -<h2 id="Λήψη_περιεχομένου">Λήψη περιεχομένου</h2> - -<p>Μπορείτε να κάνετε λήψη ενός <a href="https://mdn-downloads.s3-us-west-2.amazonaws.com/developer.mozilla.org.tar.gz">πλήρους tarball του MDN</a> (2.1 GB από το Φεβρουάριο του 2017).</p> - -<h3 id="Μεμονωμένες_σελίδες">Μεμονωμένες σελίδες</h3> - -<p>Μπορείτε να ανακτήσετε το περιεχόμενο μιας μόνο σελίδας στο MDN προσθέτοντας <a href="/en-US/docs/MDN/Contribute/Tools/Document_parameters#URL_parameters">παραμέτρους URL</a> για να καθορίσετε ποια μορφή θέλετε.</p> - -<h3 id="Εργαλεία_τρίτων">Εργαλεία τρίτων</h3> - -<p>Μπορείτε να δείτε το περιεχόμενο του MDN μέσω εργαλείων τρίτων, όπως το <a href="http://kapeli.com/dash">Dash</a> (για macOS) και το <a href="http://zealdocs.org/">Zeal</a> (για Linux και Windows).</p> - -<p>Το <a href="https://kapeli.com/">Kapeli</a> δημοσιεύει επίσης <a href="https://kapeli.com/mdn_offline">έγγραφα του MDN εκτός σύνδεσης</a>, που καλύπτουν τα: HTML, CSS, JavaScript, SVG και XSLT.</p> - -<h2 id="Reporting_problems_with_MDN_Web_Docs">Reporting problems with MDN Web Docs</h2> - -<p>See <a href="/en-US/docs/MDN/Contribute/Howto/Report_a_problem">How to report a problem on MDN</a>.</p> - -<h2 id="History_of_MDN_Web_Docs">History of MDN Web Docs</h2> - -<p>The MDN Web Docs (previously <em>Mozilla Developer Network (MDN)</em>, previously <em>Mozilla Developer Center (MDC)</em>, a.k.a. <em>Devmo</em>) project started in early 2005, when the <a class="external" href="http://www.mozillafoundation.org">Mozilla Foundation</a> obtained a license from AOL to use the original Netscape <a href="https://web.archive.org/web/*/devedge.netscape.com" title="Project:en/DevEdge">DevEdge</a> content. The DevEdge content was mined for still-useful material, which was then migrated by volunteers into this wiki so it would be easier to update and maintain.</p> - -<p>You can find more history of MDN on our <a href="/en-US/docs/MDN_at_ten">10th anniversary celebration</a> page, including an oral history by some of the people who were involved.</p> - -<h2 id="Σχετικά_με_τη_Mozilla">Σχετικά με τη Mozilla</h2> - -<p>Αν θέλετε να μάθετε περισσότερα σχετικά με το ποιοι είμαστε, το πώς να γίνετε μέλος της <em>Mozilla</em> ή απλά το πού θα μάς βρείτε, έχετε έρθει στο σωστό μέρος. Για να μάθετε τι μάς κινητοποιεί και μάς διαφοροποιεί, παρακαλούμε επισκεφθείτε τη σελίδα <a href="http://www.mozilla.org/en-US/mission/">αποστολής</a> μας.</p> diff --git a/files/el/mdn/at_ten/index.html b/files/el/mdn/at_ten/index.html deleted file mode 100644 index 88a96305f3..0000000000 --- a/files/el/mdn/at_ten/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: MDN at 10 -slug: MDN/At_ten -translation_of: MDN_at_ten -original_slug: MDN_at_ten ---- -<p class="summary">Celebrate 10 years of documenting your Web.</p> - -<div class="column-container"> -<div class="column-8"> -<h2 id="The_history_of_MDN">The history of MDN</h2> - -<p>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.</p> - -<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/History_of_MDN">Learn more <span class="offscreen">about the history</span></a></p> - - -<h2 id="Contributing_to_MDN">Contributing to MDN</h2> - -<p>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.</p> - -<p><a class="learnmore" href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Learn more <span class="offscreen">about contributing</span></a></p> - -<p> </p> - -<p> </p> -</div> - -<div class="column-4">{{TenthCampaignQuote}}</div> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="/en-US/docs/MDN_at_ten/">MDN at 10</a></li> - <li><a href="/en-US/docs/MDN_at_ten/History_of_MDN">The history of MDN</a></li> - <li><a href="/en-US/docs/MDN_at_ten/Contributing_to_MDN">Contributing to MDN</a></li> -</ol> -</div> diff --git a/files/el/mdn/contribute/getting_started/index.html b/files/el/mdn/contribute/getting_started/index.html deleted file mode 100644 index a4de2cf3e8..0000000000 --- a/files/el/mdn/contribute/getting_started/index.html +++ /dev/null @@ -1,116 +0,0 @@ ---- -title: Ξεκινώντας στο MDN -slug: MDN/Contribute/Getting_started -tags: - - MDN Meta - - Αρχάριος - - Αρχίζοντας - - Εισαγωγή - - Οδηγός -translation_of: MDN/Contribute/Getting_started ---- -<div class="blockIndicator warning"> - -</div> - -<p>{{MDNSidebar}}</p> - -<div>{{IncludeSubnav("/el-GR/docs/MDN")}}</div> - -<div><font><font>Είμαστε μια ανοιχτή κοινότητα προγραμματιστών και συγγραφέων που δημιουργούμε πόρους για ένα καλύτερο διαδίκτυο, ανεξαρτήτως μάρκας, προγράμματος περιήγησης, ή πλατφόρμας. </font><font>Οποιοσδήποτε μπορεί να συνεισφέρει και να μάς κάνει δυνατότερους. </font><font>Μαζί, μπορούμε να συνεχίσουμε να οδηγούμε την καινοτομία στο διαδίκτυο για να υπηρετήσουμε το γενικότερο καλό. </font><font>Όλα ξεκινούν εδώ, μαζί σας.</font></font></div> - -<div></div> - -<p><span><font><font>Κάθε μέρος του MDN (από τον κώδικα που καθιστά την ιστοσελίδα λειτουργική, έως και την τεκμηρίωση, τα δείγματα κώδικα και τα έτοιμα παραδείγματα) έχει δημιουργηθεί από μια κοινότητα προγραμματιστών και συγγραφέων. </font><font>Ο καθένας έχει κάτι να προσφέρει και ελπίζουμε ότι θα ενωθείτε μαζί μας!</font></font></span></p> - -<h2 id="3_απλά_βήματα_για_το_MDN"><span><font><font>3 απλά βήματα για το MDN</font></font></span></h2> - -<p><span class="seoSummary"><font><font>Το MDN είναι ένα wiki, όπου </font></font><strong><font><font>ο καθένας</font></font></strong><font><font> μπορεί να προσθέσει και να επεξεργαστεί το περιεχόμενο. </font><font>Δεν χρειάζεται να είστε προγραμματιστής ή να γνωρίζετε πολλά για την τεχνολογία. </font><font>Υπάρχουν πολλά πράγματα που πρέπει να γίνουν, από απλές εργασίες, όπως η επιθεώρηση κειμένων και η διόρθωση λαθών, έως και πολύπλοκες, όπως η σύνταξη των εγγράφων των API. Αυτός ο οδηγός θα σάς βοηθήσει να ξεκινήσετε και θα σάς κατευθύνει έτσι, ώστε να βρείτε τρόπους για να βελτιώσετε κι <em>εσείς </em>το περιεχόμενο του MDN.</font></font></span></p> - -<p><font><font>Η συνεισφορά είναι εύκολη και ασφαλής. </font><font>Ακόμα και αν κάνετε κάποιο λάθος, αυτό μπορεί να διορθωθεί εύκολα· </font><font>αν δεν ξέρετε ακριβώς πώς πρέπει να είναι τα πράγματα, ή η γραμματική σας δεν είναι και τόσο καλή, μην ανησυχείτε γι 'αυτό! </font><font>Έχουμε μια ομάδα ατόμων, των οποίων η δουλειά είναι να εξασφαλίζουν ότι το περιεχόμενο του MDN είναι όσο το δυνατόν καλύτερο. </font><font>Κάποιος θα είναι μαζί σας για να βεβαιωθεί ότι η εργασία σας είναι τακτοποιημένη και καλογραμμένη. </font><font>Μοιραστείτε τις γνώσεις σας, ακολουθήστε τις δυνάμεις σας και εμπιστευτείτε την υπόλοιπη κοινότητα, που θα σάς βοηθήσει να βελτιώσετε ακόμη περισσότερο την εργασία σας.</font></font></p> - -<h3 id="Βήμα_1_Δημιουργήστε_ένα_λογαριασμό_στο_MDN"><font><font>Βήμα 1: Δημιουργήστε ένα λογαριασμό στο MDN</font></font></h3> - -<p><font><font>Για να ξεκινήσετε τη συνεισφορά σας στο MDN, θα πρέπει να έχετε ένα λογαριασμό στο MDN. </font><font>Για περισσότερες λεπτομέρειες, παρακαλούμε δείτε </font></font><a href="/el-GR/docs/MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN"><font><font>πώς μπορείτε να δημιουργήσετε ένα λογαριασμό</font></font></a><font><font>. Σημειώστε ότι θα</font></font> <a href="https://github.com/join">χρειαστείτε ένα λογαριασμό GitHub</a> πριν μπορέσετε να δημιουργήσετε ένα λογαριασμό MDN, αφού χρησιμοποιούμε το GitHub για πιστοποίηση, προς το παρόν.</p> - -<h3 id="Βήμα_2_Επιλέξτε_μια_εργασία"><font><font>Βήμα 2: Επιλέξτε μια εργασία</font></font></h3> - -<p><font><font>Τώρα που έχετε συνδεθεί, διαβάστε τις περιγραφές</font></font> των διαφορετικών τύπων εργασιών στην {{anch("Πιθανοί τύποι εργασιών", "παρακάτω λίστα")}} και αποφασίστε ποιος τύπος σάς ταιριάζει περισσότερο. Μπορείτε να επιλέξετε οποιαδήποτε εργασία επιθυμείτε και να ξεκινήσετε τη συνεισφορά σας.</p> - -<p>Αν η εργασία σας συμπεριλαμβάνει τη δημιουργία νέων σελίδων, παρακαλούμε δείτε το {{SectionOnPage("/en-US/docs/MDN/Contribute/Howto/Create_and_edit_pages", "Getting page creation permissions")}} για σημαντικές πληροφορίες σχετικά με το πώς να λάβετε δικαιώματα για την προσθήκη νέων σελίδων· για λόγους ασφαλείας, οι νέοι λογαριασμοί δεν έχουν αυτή την ικανότητα από προεπιλογή.</p> - -<h3 id="Βήμα_3_Κάντε_την_εργασία"><font><font>Βήμα 3: Κάντε την εργασία</font></font></h3> - -<p><font><font>Μόλις αποφασίσετε τι είδους εργασία θέλετε να κάνετε, βρείτε μια συγκεκριμένη σελίδα, παράδειγμα κώδικα κ.λπ., για να εργαστείτε και απλά κάντε το!</font></font></p> - -<p><font><font>Μην σάς ανησυχεί η τελειότητα· </font><font>άλλοι συνεισφέροντες του MDN είναι εδώ για να σάς βοηθήσουν να διορθώσετε τα λάθη που ξεγλίστρησαν. </font><font>Αν έχετε ερωτήσεις στην πορεία, δείτε την </font></font><a href="/el-GR/docs/MDN/Community"><font><font>κοινοτική</font></font></a><font><font> σελίδα για πληροφορίες σχετικά με τις λίστες αλληλογραφίας και τα κανάλια συνομιλιών, όπου μπορείτε να βρείτε απαντήσεις.</font></font></p> - -<div class="note"> -<p><font><font>Αν θέλετε να πειραματιστείτε με την επεξεργασία του MDN για να κάνετε κάτι "πραγματικό", έχουμε μια σελίδα </font></font><strong><a href="/el-GR/docs/Sandbox"><font><font>Sandbox</font></font></a></strong><font><font> όπου μπορείτε να παίξετε. Παρακαλούμε περιορίστε τα πειράματά σας σε αυτή τη σελίδα. </font><font>Παρακαλούμε μην κάνετε περιττές αλλαγές στις σελίδες περιεχομένου, μόνο και μόνο για να δείτε τι θα συμβεί, </font><font>κάτι που δημιουργεί ένα χάος για τους άλλους να καθαρίσουν, ή ακόμη χειρότερα, συγχύζει τους αναγνώστες που προσπαθούν απλά να μάθουν κάτι ή ψάχνουν κάτι.</font></font></p> -</div> - -<p><font><font>Όταν τελειώσετε με την επιλεγμένη εργασία σας, μη διστάσετε να επιλέξετε ένα άλλο στοιχείο, ή δείτε παρακάτω τα </font></font><a href="#Other_things_you_can_do_on_MDN"><font><font>άλλα πράγματα που μπορείτε να κάνετε στο </font></font></a><font><font>MDN.</font></font></p> - -<h2 id="Πιθανοί_τύποι_εργασιών"><font><font>Πιθανοί τύποι εργασιών</font></font></h2> - -<p><font><font>Υπάρχουν πολλοί δρόμοι που μπορείτε να ακολουθήσετε για να συνεισφέρετε στο MDN, ανάλογα με το σύνολο των ικανοτήτων και των ενδιαφερόντων σας. Ακόμα κι αν ορισμένες εργασίες ενδέχεται να είναι αποκαρδιωτικές, έχουμε πολλές απλές δραστηριότητες που διατίθενται. </font><font>Πολλές από αυτές απαιτούν μόνο πέντε λεπτά (ή και λιγότερο!) από το χρόνο σας. </font><font>Παρακάτω, μαζί με την εργασία και τη σύντομη περιγραφή της, θα βρείτε τον κατά προσέγγιση χρόνο που απαιτεί ο κάθε τύπος εργασίας συνήθως.</font></font></p> - -<h3 id="Επιλογή_1_Μου_αρέσουν_οι_λέξεις"><font><font>Επιλογή 1: Μου αρέσουν οι λέξεις</font></font></h3> - -<p><font><font>Μπορείτε να μάς βοηθήσετε να αξιολογήσουμε ή να τροποποιήσουμε τα υπάρχοντα έγγραφα και να εφαρμόσουμε τις σωστές ετικέτες.</font></font></p> - -<ul> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page"><font><font>Ρύθμιση περίληψης για μια σελίδα</font></font></a><font><font> (5-15 λεπτά)</font></font></li> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Do_an_editorial_review"><font><font>Αξιολογήσεις επεξεργασίας</font></font></a><font><font> (5-30 λεπτά)</font></font></li> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary"><font><font>Προσθήκη νέας καταχώρησης στο Γλωσσάριο</font></font></a><font><font> (15-60 λεπτά)</font></font></li> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web"><font><font>Σύνταξη άρθρου για να βοηθήσετε τους συνανθρώπους σας να μάθουν για το διαδίκτυο</font></font></a><font><font> (1-3 ώρες)</font></font></li> - <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag">Προσθήκη/Αφαίρεση ετικετών από σελίδες</a> (15-60 λεπτά)</li> -</ul> - -<div class="note"><font><font>Αν αξιολογείτε άρθρα ή συντάσσετε καινούρια, σάς ζητούμε να εξετάσετε τον </font></font><a href="/el-GR/docs/MDN/Contribute/Guidelines/Style_guide"><font><font>Οδηγό στυλ</font></font></a><font><font>. </font><font>Έτσι, θα διασφαλιστεί η συνοχή των άρθρων.</font></font></div> - -<h3 id="Επιλογή_2_Μου_αρέσει_ο_κώδικας"><font><font>Επιλογή 2: Μου αρέσει ο κώδικας</font></font></h3> - -<p><font><font>Χρειαζόμαστε περισσότερα δείγματα κώδικα! </font><font>Μπορείτε, επίσης, να βοηθήσετε στην ανάπτυξη της πλατφόρμας της ιστοσελίδα μας,</font><font> <a href="/el-GR/docs/MDN/Kuma">Kuma</a>, ή να βοηθήσετε στον εμπλουτισμό της βάσης δεδομένων μας σχετικά με τα δεδομένα συμβατότητας των προγραμμάτων περιήγησης.</font></font></p> - -<ul> - <li><a href="/en-US/docs/MDN/Contribute/Howto/Convert_code_samples_to_be_live"><font><font>Μετατροπή δειγμάτων κώδικα για να είναι "ζωντανά"</font></font></a><font><font> (30 λεπτά)</font></font></li> - <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/developer.mozilla.org">Διαβάστε τον οδηγό "Συνεισφορά"</a> (30 λεπτά)</li> - <li><a href="http://kuma.readthedocs.org/en/latest/installation.html"><font><font>Δημιουργία ενός περιβάλλοντος ανάπτυξης του Kuma</font></font></a><font><font> (1 ώρα)</font></font></li> - <li><a href="https://github.com/mozilla/kuma#readme"><font><font>Αποστολή διορθώσεων κώδικα στην βάση κώδικα του Kuma</font></font></a><font><font> (1 ώρα)</font></font></li> - <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Add_or_update_browser_compatibility_data">Προσθήκη ή ενημέρωση δεδομένων <font><font>συμβατότητας των προγραμμάτων περιήγησης</font></font></a> (30 λεπτά)</li> -</ul> - -<h3 id="Επιλογή_3_Μου_αρέσουν_και_οι_λέξεις_και_ο_κώδικας"><font><font>Επιλογή 3: Μου αρέσουν και οι λέξεις και ο κώδικας</font></font></h3> - -<p><font><font>Έχουμε εργασίες που απαιτούν τεχνικές και γλωσσικές δεξιότητες, όπως η σύνταξη νέων άρθρων, η εξέταση της τεχνικής ακρίβειας, ή η προσαρμογή εγγράφων.</font></font></p> - -<ul> - <li><a href="/el-GR/docs/MDN/About/Promote"><font><font>Προώθηση του MDN στη δική σας ιστοσελίδα</font></font></a><font><font> (5 λεπτά)</font></font></li> - <li><a href="https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Remove__Experimental__Macros">Αφαίρεση "πειραματικών" μακροεντολών από στοιχεία που δεν είναι πλέον πειραματικά</a> (5-30 λεπτά)</li> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Do_a_technical_review"><font><font>Τεχνικές αξιολογήσεις</font></font></a><font><font> (30 λεπτά)</font></font></li> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Create_and_edit_pages"><font><font>Σύνταξη νέου άρθρου σχετικά με ένα θέμα που απαιτείται τώρα</font></font></a><font><font> (1 ώρα ή περισσότερο)</font></font></li> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web"><font><font>Δημιουργία διαδραστικής άσκησης για να βοηθήσετε τους συνανθρώπους σας να μάθουν για το διαδίκτυο</font></font></a><font><font> (1 ώρα ή περισσότερο)</font></font></li> - <li><a href="/el-GR/docs/MDN/Contribute/Howto/Resolve_a_mentored_developer_doc_request"><font><font>Διόρθωση σφάλματος στην τεκμηρίωση</font></font></a><font><font> από την </font></font><a href="http://www.joshmatthews.net/bugsahoy/?mdn=1"><font><font>κατηγορία MDN στο Ahoy Bugs</font></font></a><font><font> (1 ώρα ή περισσότερο)</font></font></li> -</ul> - -<h3 id="Επιλογή_4_Θέλω_το_MDN_στη_γλώσσα_μου"><font><font>Επιλογή 4: Θέλω το MDN στη γλώσσα μου</font></font></h3> - -<p><font><font>Όλες οι εργασίες μεταφράσεων στο MDN γίνονται απο την καταπληκτική κοινότητά των εθελοντών μας.</font></font></p> - -<ul> - <li><a href="/el-GR/docs/MDN/Contribute/Localize/Translating_pages"><font><font>Μετάφραση σελίδων</font></font></a><font><font> (2 ώρες) (Δείτε </font></font><font><font>τις </font></font><a href="https://developer.mozilla.org/en-US/docs/MDN/Doc_status/l10nPriority">κορυφαίες προτεραιότητες</a>)</li> - <li><font><font>Σύνδεση με άλλους μεταφραστές από τα </font></font><a href="/el-GR/docs/MDN/Contribute/Localize/Localization_projects"><font><font>έργα μετάφρασης</font></font></a><font><font> (30 λεπτά)</font></font></li> -</ul> - -<h3 id="Επιλογή_5_Βρήκα_κάποιες_λανθασμένες_πληροφορίες_αλλά_δεν_ξέρω_πώς_να_τις_φτιάξω"><font><font>Επιλογή 5: Βρήκα κάποιες λανθασμένες πληροφορίες, αλλά δεν ξέρω πώς να τις φτιάξω</font></font></h3> - -<p><font><font>Μπορείτε να αναφέρετε προβλήματα </font></font><a class="external" href="https://bugzilla.mozilla.org/form.doc"><font><font>καταθέτοντας ένα σφάλμα τεκμηρίωσης</font></font></a><font><font>. </font><font>(5 λεπτά)</font></font></p> - -<h2 id="Άλλα_πράγματα_που_μπορείτε_να_κάνετε_στο_MDN"><font><font>Άλλα πράγματα που μπορείτε να κάνετε στο MDN</font></font></h2> - -<ul> - <li><a href="/el-GR/docs/MDN/Community"><font><font>Συμμετοχή στην κοινότητα του MDN</font></font></a><font><font>.</font></font></li> - <li><a href="/el-GR/profile"><font><font>Συμπλήρωση του προφίλ σας</font></font></a><font><font> έτσι, ώστε οι άλλοι να μπορούν να μάθουν περισσότερα για εσάς.</font></font></li> - <li><font><font>Μάθετε περισσότερα σχετικά με τη </font></font><a href="/el-GR/docs/MDN/Contribute"><font><font>συνεισφορά στο </font></font></a><font><font>MDN.</font></font></li> -</ul> diff --git a/files/el/mdn/contribute/howto/index.html b/files/el/mdn/contribute/howto/index.html deleted file mode 100644 index 782028400e..0000000000 --- a/files/el/mdn/contribute/howto/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: 'MDN web docs: How-to guides' -slug: MDN/Contribute/Howto -tags: - - Documentation - - Landing - - MDN Meta - - NeedsTranslation - - TopicStub -translation_of: MDN/Contribute/Howto ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p>These articles provide step-by-step guides to accomplishing specific goals when contributing to MDN.</p> - -<p>{{LandingPageListSubpages}}</p> diff --git a/files/el/mdn/contribute/index.html b/files/el/mdn/contribute/index.html deleted file mode 100644 index 8e44caade3..0000000000 --- a/files/el/mdn/contribute/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Contributing to MDN -slug: MDN/Contribute -tags: - - Guide - - Landing - - MDN Meta - - NeedsTranslation - - TopicStub -translation_of: MDN/Contribute ---- -<div>{{MDNSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p>Welcome! By visiting this page, you've taken the first step toward becoming a contributor to MDN!</p> - -<p><span class="seoSummary">The guides listed here cover all aspects of contributing to MDN, including style guides, guides to using our editor and tools, and more. Please make sure you have read (and are compliant with) the <a href="https://www.mozilla.org/en-US/about/legal/terms/mozilla/">Mozilla Terms</a> before editing or creating any pages. </span></p> - -<p>If you haven't contributed to MDN previously, the <a href="/en-US/docs/MDN/Getting_started">Getting Started</a> guide can help you pick a task to jump in and help with.</p> - -<p>{{LandingPageListSubPages()}}</p> diff --git a/files/el/mdn/index.html b/files/el/mdn/index.html deleted file mode 100644 index 90c3910de3..0000000000 --- a/files/el/mdn/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: 'Project:Αποσαφηνισμοί' -slug: MDN -tags: - - Landing - - MDN Meta - - 'l10n:priority' -translation_of: MDN ---- -<div>{{MDNSidebar}}</div><h2 id="Εισαγωγή">Εισαγωγή</h2> - -<p>Οι <strong>Αποσαφηνισμοί</strong> στο MDC wiki είναι η διαδικασία επίλυσης <em>ασαφειών</em><em>,</em> αναφερόμενοι στα θέματα που δημιουργούνται όταν άρθρα σχετικά με δύο ή περισσότερα αντικείμενα έχουν τον ίδιο "φυσικό" τίτλο.</p> - -<p>Κάθε σελίδα μέσα στο wiki θα πρέπει να έχει έναν μοναδικό τίτλο. Αυτό μπορεί να προκαλέσει προβλήματα όταν δύο σελίδες, θεωρητικά, έχουν τον ίδιο ακριβώς τίτλο. Για παράδειγμα, το <a href="/en/indexOf" title="en/indexOf">indexOf</a> είναι μια μέθοδος και για String αλλά και για Array objects στην JavaScript.</p> - -<div class="note"><span class="highlightred"><strong>Σημείωση</strong>: η ακόλουθη πολιτική έχει αλλάξει από την πρώτη της έκδοση.</span></div> - -<p>Όπως και στην Wikipedia, διαφοροποιούμε τις σελίδες τοποθετώντας περιεχόμενο σε παρενθέσεις μετά το όνομα (π.χ., "Mercury (planet)"). Ωστόσο, κάποιοι χρήστες που θα ψάξουν πληροφορίες για το "indexOf" είναι πολύ πιθανό να έρθουν στο Devmo και να γράψουν "indexOf" μέσα στο search box. Η αναζήτηση θα δώσει αποτελέσματα για όλες τις σελίδες που περιέχουν την λέξη "indexOf", κάτι που δεν θα βοηθούσε γενικότερα, δεδομένου ότι θα εμφανιστεί σε τίτλους, άρθρα, οδηγούς, δείγματα κώδικα, και αναφορές μέσα σε όλο το wiki. Με σκοπό να βοηθήσουμε όσους ψάχνουν κάτι τέτοιο να το βρούνε πιο εύκολα, ξεκινήσαμε να προσθέτουμε σελίδες αποσαφηνισμού (disambiguation pages) στο wiki.</p> - -<h3 id="When_to_create_a_disambiguation_page" name="When_to_create_a_disambiguation_page">Πότε να δημιουργήσετε μια σελίδα αποσαφηνισμού</h3> - -<p>Οι σελίδες αποσαφηνισμού θα πρέπει να δημιουργούνται μόνο για να επιλύσουν κάποιο θέμα ασάφειας ανάμεσα σε δύο ή περισσότερες σελίδες.</p> - -<h3 id="How_to_create_a_disambiguation_page" name="How_to_create_a_disambiguation_page">Πώς να δημιουργήσετε μια σελίδα αποσαφηνισμού</h3> - -<p>Οι σελίδες αποσαφηνισμού είναι σχεδιασμένες ξεχωριστά από τους συντάκτες να συνδέονται με όλες τις σελίδες που ο χρήστης μπορεί να ψάχνει για έναν όρο. Αυτό βοηθάει τους χρήστες να βρούν γρήγορα αυτό που ψάχνουν.</p> - -<p>Για να δημιουργήσετε μια σελίδα αποσαφηνισμού, απλώς δημιουργήστε μια σελίδα όπου ο τίτλος της θα είναι ο ασαφής όρος; για παράδειγμα, <a href="/en/indexOf" title="en/indexOf">indexOf</a>.</p> - -<h3 id="What_to_include_in_a_disambiguation_page" name="What_to_include_in_a_disambiguation_page">Τι να προσθέσετε σε μια σελίδα αποσαφηνισμού</h3> - -<p>Όταν δημιουργείτε μια σελίδα αποσαφηνισμού, θα πρέπει να κάνετε τα ακόλουθα:</p> - -<h4 id="Short_introductory_line" name="Short_introductory_line">Σύντομος πρόλογος μιας γραμμής</h4> - -<p>Προσθέστε μια σειρά σύντομου προλόγου στην αρχή, όπως για παράδειγμα "το<strong> indexOf</strong> είναι μια μέθοδος για διάφορα JavaScript objects:", "το <strong>indexOf</strong> χρησιμοποιείται με διάφορους τρόπους:", ή, πιο απλά, "το <strong>indexOf</strong> μπορεί να σημαίνει πολλά πράγματα:".</p> - -<h4 id="The_.22disambig.22_template" name="The_.22disambig.22_template">Το "disambig" template</h4> - -<p>Προσθέστε την <a href="/Project:en/Custom_Templates#Template:disambig" title="Project:en/Custom_Templates#Template:disambig">disambig template</a> στο τέλος της σελίδας. Αυτό εισάγει μια standard σημείωση καθώς και την κατηγορία αποσαφηνισμού.</p> - -<h4 id="Linked_list_of_ambiguous_page_titles" name="Linked_list_of_ambiguous_page_titles">Συνδεδεμένη λίστα τίτλων μια ασαφούς σελίδας</h4> - -<p>Απλώς προσθέστε μια linked list από τους τίτλους μιας ασαφούς σελίδας, με μια σύντομη περιγραφή για το καθένα. Θα αναφερόμαστε στην σελίδα <a href="/en/indexOf" title="en/indexOf">indexOf</a> για περισσ.</p> - -<p>Σε περίπτωση που το παραπάνω δεν είναι εύκολα χρήσιμο, μπορείτε να αναδιατάξετε τις πληροφορίες σε νέα λογικά τμήματα στην σελίδα.</p> - -<h3 id="Best_Practices" name="Best_Practices">Καλύτερες πρακτικές</h3> - -<ol> - <li>Οι σελίδες αποσαφηνισμού θα να δείχνουν μόνο σε σελίδες που υπάρχουν μέσα στο wiki.</li> - <li>Μην βάζετε συνδέσμους σε άλλες σελίδες στην σύνοψη των σελίδων αποσαφηνισμού. Για παράδειγμα, μην κάνετε αυτό: "<em><a href="/en/indexOf" title="en/indexOf">indexOf</a> - <a href="/en/DOM/form.method" title="en/DOM/form.method">method</a> for the <a href="/en/String" title="en/String">String</a> object in <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a></em>". Απλά αφήστε το ως "<em><a href="/en/indexOf" title="en/indexOf">indexOf</a> - method for the String object in JavaScript</em>". Τα επιπρόσθετα links δεν βοηθάνε σε κάτι σε μια σελίδα αποσαφηνισμού.</li> - <li>Μικρύνετε τον τίτλο του συνδέσμου, αν είναι απαραίτητο, για τον όρο που πρόκειται να αποσαφηνιστεί. Αντί να δείχνετε στο <a href="/en/JavaScript/Reference/Global_Objects/String/indexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf">Core JavaScript 1.5 Reference:Objects:String:indexOf</a>, χρησιμοποιείστε εναλλακτικά την πιο σύντομη μορφή <a href="/en/JavaScript/Reference/Global_Objects/String/indexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf">indexOf</a>.</li> - <li>Οι σελίδες αποσαφηνισμού δεν προσφέρονται για τακτικές "free association". <strong>Χρησιμοποιείστε τες προσεκτικά και μόνο όταν χρειάζεται.</strong></li> -</ol> - -<h3 id="Fixing_links_to_disambiguated_topics" name="Fixing_links_to_disambiguated_topics">Διορθώνοντας συνδέσμους σε θέματα αποσαφηνισμού</h3> - -<p>Αφού έχετε δημιουργήσει μια disambiguation page, κάντε κλικ στον σύνδεσμο "What links here" για να δείτε αν οποιαδήποτε σελίδα οδηγεί στην νέα disambiguation page. Σ'αυτήν την περίπτωση, παρακαλούμε πηγαίνετε σε αυτές τις σελίδες και αλλάξτε τα links όπου είναι δυνατό, ώστε να δείχνουν στην σωστή σελίδα μέσα στο wiki.</p> - -<p>Για παράδειγμα, αν μια σελίδα που αναφέρεται στην μέθοδο JavaScript String object's <code>indexOf</code>, συνδέεται με την <a href="/en/indexOf" title="en/indexOf">indexOf</a> σελίδα disambiguation, αυτό το link θα πρέπει να αλλάξει έτσι ώστε να δείχνει κατευθείαν στην σελίδα <a href="/en/JavaScript/Reference/Global_Objects/String/indexOf" title="en/Core_JavaScript_1.5_Reference/Global_Objects/String/indexOf">Core JavaScript 1.5 Reference:Objects:String:indexOf</a>.</p> - -<p>Εάν δημιουργείτε μια σελίδα αποσαφηνισμού που θα περιλαμβάνει links που οδηγούν σε μια υπάρχουσα σελίδα, κάντε κλικ στο "What links here" για να βρείτε όλες τις σελίδες που συνδέονται με την σελίδα που πρόκειται να μετακινήσετε. Σιγουρευτείτε ότι εκείνες οι σελίδες δεν θα υποστούν αλλαγές πριν κάνετε την μεταφορά.</p> - -<p><strong>Ο κώδικας τιμής για την δημιουργία σελίδων αποσαφηνισμού είναι να διορθωθούν όλα τα links που συνδέονται με αυτή.</strong></p> - -<h3 id="If_you_need_help_or_have_questions" name="If_you_need_help_or_have_questions">Εάν χρειάζεστε βοήθεια ή έχετε ερωτήσεις</h3> - -<p>Εάν δεν γνωρίζετε πώς να ονομάσετε ή να αποσαφηνίσετε μια σελίδα, παρακαλούμε επικοινωνήστε με email στον <a class="link-mailto" href="mailto:eshepherd@mozilla.com" title="mailto:eshepherd@mozilla.com">Eric Shepherd</a> ή στείλτε το στην <a class="external" href="http://mail.mozilla.org/listinfo/devmo-general">devmo-general mailing list</a>.</p> - -<p>Εναλλακτικά, μπείτε στο IRC στον server <code>irc.mozilla.org</code> και ρωτήστε κάποιον στο κανάλι <code><a class="link-irc" href="irc://irc.mozilla.org/#devmo">#devmo</a></code>.</p> - -<h3 id="For_more_information" name="For_more_information">Για περισσότερες πληροφορίες</h3> - -<p>Η σελίδα <a class="external" href="http://en.wikipedia.org/wiki/Disambiguation">Wikipedia Disambiguation page</a> περιέχει συνοπτικά τις πολιτικές και τους τρόπους προσέγγισης. Σημειώστε ότι οι πολιτικές μας δεν συμφωνούν απόλυτα.</p> diff --git a/files/el/mozilla/add-ons/index.html b/files/el/mozilla/add-ons/index.html deleted file mode 100644 index af9a81c295..0000000000 --- a/files/el/mozilla/add-ons/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Πρόσθετα -slug: Mozilla/Add-ons -translation_of: Mozilla/Add-ons -original_slug: Mozilla/Πρόσθετα ---- -<div class="summary">Τροποποιήστε και επεκτείνετε εφαρμογές της Mozilla</div> - -<p><span class="seoSummary">Add-ons add new functionality to <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>-based applications such as Firefox, SeaMonkey and Thunderbird.</span><strong> </strong>There are two main types of add-on: <a href="#Extensions">Extensions</a> add new features to the application, while <a href="#Themes">Themes</a> modify the application's user interface.</p> - -<p>For both extensions and themes, Mozilla operates a repository at <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, also known as AMO. When you <a href="/en-US/Add-ons/Submitting_an_add-on_to_AMO">submit add-ons to AMO</a> 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.</p> - -<p>Add-ons can greatly affect the behaviour of the application that hosts them. We've developed a <a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">set of guidelines</a> 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 <a href="https://addons.mozilla.org/">addons.mozilla.org</a> or not.</p> - -<hr> -<h2 id="Επεκτάσεις"><a name="Extensions">Επεκτάσεις</a></h2> - -<p>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.</p> - -<p>There are three different techniques you can use to build extensions: Add-on SDK-based extensions, manually bootstrapped restartless extensions, and overlay extensions.</p> - -<ul class="card-grid"> - <li><span><a href="https://developer.mozilla.org/en-US/Add-ons/SDK">Επεκτάσεις προσθέτου SDK</a></span><br> - Develop restartless extensions using a set of high-level JavaScript APIs.</li> - <li><strong><span><a href="/en-US/Add-ons/Bootstrapped_extensions">Μη επανεκκινήσιμες επεκτάσεις</a></span></strong><br> - Develop extensions that don't require a browser restart.</li> - <li><strong><a href="/en-US/Add-ons/Overlay_Extensions">Επεκτάσεις επικάλυψης</a></strong><br> - Develop traditional extensions using a XUL overlay.</li> -</ul> - -<p>Αν μπορείτε, προτείνεται η χρήση του Add-on SDK, το οποίο χρησιμοποιεί το μηχανισμό των μη επανεκκινήσιμων επεκτάσεων αλλά απλοποιεί συγκεκριμένες εργασίες και καθαρίζεται αργότερα από μόνο του. Αν το Add-on SDK δεν ικανοποιεί τις ανάγκες σας, εκτελέστε μια χειροκίνητη, μη επανεκκινήσιμη επέκταση. Οι επεκτάσεις επικάλυψης είναι κυρίως απαρχαιωμένες τώρα, αν και υπάρχουν πολλές εκεί έξω.</p> - -<p>Για περισσότερες πληροφορίες σχετικά με την επιλογή ποιας τεχνικής να χρησιμοποιήσετε, διαβάστε αυτή τη <a href="/en-US/Add-ons/Comparing_Extension_Toolchains">σύγκριση</a>.</p> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Καλές_πρακτικές">Καλές πρακτικές</h3> - -<p>Όπως και να αναπτύσσετε μια επέκταση, υπάρχουν μερικές οδηγίες που μπορείτε να ακολουθήσετε για να εξασφαλίστε ότι η επέκτασή σας παρέχει την καλύτερη δυνατή εμπειρία χρήσης.</p> - -<dl> - <dt><a href="/en-US/Add-ons/Performance_best_practices_in_extensions">Επίδοση</a></dt> - <dd>Εξασφαλίστε ότι η επέκτασή σας είναι γρήγορη, αποκριτική και αποδοτική με τη μνήμη.</dd> - <dt><a href="/en-US/Add-ons/Security_best_practices_in_extensions">Ασφάλεια</a></dt> - <dd>Εξασφαλίστε ότι η επέκταση σας δεν εκτέθει το χρήστη σε κακόβουλες ιστοσελίδες.</dd> - <dt><a href="/en-US/Add-ons/Extension_etiquette">Πρωτόκολλο</a></dt> - <dd>Εξασφαλίστε ότι η επέκτασή σας λειτυοργεί αρμονικά με τις άλλες.</dd> -</dl> -</div> - -<div class="column-half"> -<h3 id="Application-specific">Application-specific</h3> - -<p>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.</p> - -<dl> - <dt><a href="/en-US/Add-ons/Thunderbird">Thunderbird</a></dt> - <dd>Developing extensions for the Thunderbird mail client.</dd> - <dt><a href="/en-US/Add-ons/Firefox_for_Android">Firefox για Android</a></dt> - <dd>Developing extensions for Firefox for Android.</dd> - <dt><a href="/en-US/Add-ons/SeaMonkey_2">SeaMonkey</a></dt> - <dd>Developing extensions for the <a href="http://www.seamonkey-project.org/">SeaMonkey</a> software suite.</dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Θέματα"><a name="Themes">Θέματα</a></h2> - -<p>Τα θέματα είναι πρόσθετα που διαμορφώνουν το περιβάλλον εργασίας χρήστη της εφαρμογής. Υπάρχουν δύο κατηγορίες θεμάτων: τα ελαφρά και τα πλήρη θέματα.</p> - -<div class="column-container"> -<div class="column-half"> -<p>Τα <a href="https://addons.mozilla.org/en-US/developers/docs/themes">Ελαφρά θέματα</a> είναι πολύ πιο απλά στην υλοποίηση απ' ότι τα πλήρη θέματα, αλλά παρέχουν πολύ περιορισμένη εξατομίκευση.</p> -</div> - -<div class="column-half"> -<p>Με τα <a href="/en-US/docs/Themes">πλήρη θέματα</a> μπορείτε να κάνετε πολύ βαθύτερες τροποποιήσεις στο UI της εφαρμογής. Η τεκμηρίωση για τα πλήρη θέματα είναι ξεπερασμένη, αλλά συνδέεται με την εδώ σαν μια πιθανή βάση για ενημερωμένη τεκμηρίωση</p> -</div> -</div> - -<h2 id="Άλλοι_τύποι_προσθέτων">Άλλοι τύποι προσθέτων</h2> - -<p>Τα <a href="/en-US/docs/Creating_OpenSearch_plugins_for_Firefox">πρόσθετα μηχανών αναζήτησης</a> είναι ένας απλός και πολύ συγκεκριμένος τύπος προσθέτων: προσθέτουν νέες μηχανές αναζήτησης στη γραμμή αναζήτησης του περιηγητή.</p> - -<p>Τα <strong style="line-height: 1.5;"><a href="/en-US/docs/Plugins">Plugins</a> </strong><span style="line-height: 1.5;">βοηθούν την εφαρμογή να καταλάβει περιεχόμενο που δεν υποστηρίζει από μόνη της. Είμαστε στη διαδικασία αποδοκιμασίας της υποστήριξης για αυτά τα plugins, καθώς έχουν ιστορικό πρόκλησης προβλημάτων σταθερότητας, απόδοσης και ασφάλειας.</span></p> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="/en-US/Add-ons/Overlay_Extensions" title="Overlay extensions">Overlay extensions</a></li> - <li><a href="/en-US/Add-ons/Bootstrapped_extensions" title="Restartless extensions">Restartless extensions</a></li> - <li><a href="/en-US/Add-ons/SDK">Add-on SDK</a></li> - <li><a href="#">Extension good practices</a> - <ol> - <li><a href="/en-US/Add-ons/Performance_best_practices_in_extensions" title="Performance">Performance</a></li> - <li><a href="/en-US/Add-ons/Security_best_practices_in_extensions" title="Security">Security</a></li> - <li><a href="/en-US/Add-ons/Extension_etiquette" title="Etiquette">Etiquette</a></li> - </ol> - </li> - <li><a href="#">Themes</a> - <ol> - <li><a href="https://addons.mozilla.org/en-US/developers/docs/themes" title="Lightweight themes">Lightweight themes</a></li> - <li><a href="/en-US/docs/Themes" title="Complete themes">Complete themes</a></li> - </ol> - </li> - <li><a href="#">Publishing add-ons</a> - <ol> - <li><a href="https://addons.mozilla.org/" title="addons.mozilla.org">addons.mozilla.org</a></li> - <li><a href="/en-US/docs/Mozilla/Add-ons/Add-on_guidelines">Add-on guidelines</a></li> - </ol> - </li> -</ol> diff --git a/files/el/mozilla/index.html b/files/el/mozilla/index.html deleted file mode 100644 index 5f5afa2bd2..0000000000 --- a/files/el/mozilla/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Mozilla -slug: Mozilla -tags: - - NeedsTranslation - - TopicStub -translation_of: Mozilla ---- -<p>Αυτό θα είναι σύντομα ένα φοβερό σελίδα προορισμού για το Mozilla εσωτερικά. Προς το παρόν, δεν είναι.</p> - -<div>{{LandingPageListSubpages}}</div> 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 deleted file mode 100644 index 488930adca..0000000000 --- a/files/el/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Δημιουργία λογαριασμού MDN -slug: orphaned/MDN/Contribute/Howto/Create_an_MDN_account -tags: - - MDN Meta - - Αρχάριος - - Οδηγός - - Τεκμηρίωση -translation_of: MDN/Contribute/Howto/Create_an_MDN_account -original_slug: MDN/Contribute/Howto/Dhmiourgia_logariasmou_MDN ---- -<div>{{MDNSidebar}}</div><p><span class="seoSummary">Για να επεξεργαστείτε περιεχόμενο στο MDN, θα χρειαστείτε ένα προφίλ MDN. Δεν χρειάζεστε προφίλ αν θέλετε μόνο να διαβάσετε και να αναζητήσετε τα έγγραφα του MDN. Αυτός ο οδηγός θα σάς βοηθήσετε να ρυθμίσετε το προφίλ MDN σας.</span></p> - -<div class="pull-aside"> -<div class="moreinfo"> -<p><strong>Γιατί το MDN απαιτεί τη διεύθυνση email μου;</strong><br> - <br> - Η διεύθυνση email σας χρησιμοποιείται για την ανάκτηση του λογαριασμού σας, αλλά και από τους διαχειριστές του MDN, αν χρειαστεί να επικοινωνήσουν μαζί σας σχετικά με το λογαριασμό σας ή τη δραστηριότητά σας στην ιστοσελίδα.</p> - -<p>Επιπλέον, μπορείτε να ενεργοποιήσετε τις ειδοποιήσεις (όπως <a href="/en-US/docs/MDN/Contribute/Howto/Watch_a_page">όταν αλλάζουν ορισμένες σελίδες</a>) και τα μηνύματα (για παράδειγμα, αν επιλέξετε να συμμετάσχετε στην ομάδα δοκιμών beta μας, ενδέχεται να λαμβάνετε emails σχετικά με τις νέες λειτουργίες που απαιτούν δοκιμή).<br> - <br> - Η διεύθυνση email σας δεν εμφανίζεται ποτέ στο MDN και θα χρησιμοποιηθεί σύμφωνα με την <a href="https://www.mozilla.org/privacy/websites/">πολιτική απορρήτου</a> μας.</p> - -<div class="note">Αν συνδεθείτε στο MDN μέσω GitHub και χρησιμοποιείτε μια διεύθυνση email "noreply" στο GitHub, δεν θα λαμβάνετε μηνύματα (αλλά και ειδοποιήσεις όταν κάνετε εγγραφή σε σελίδες) από το MDN.</div> -</div> -</div> - -<ol> - <li>Στο πάνω μέρος κάθε σελίδας στο MDN, θα βρείτε το κουμπί <strong>Σύνδεση</strong>. Μετακινήστε τον κέρσορά σας σε αυτό (ή πατήστε το, αν χρησιμοποιείτε κινητή συσκευή) για να εμφανιστεί μια λίστα με τις υπηρεσίες πιστοποίησης που υποστηρίζονται για τη σύνδεση στο MDN.</li> - <li>Επιλέξτε μια υπηρεσία με την οποία θα συνδεθείτε. Προς το παρόν, μόνο το GitHub είναι διαθέσιμο. Σημειώστε ότι αν επιλέξετε το GitHub, θα συμπεριληφθεί ένας σύνδεσμος για το προφίλ GitHub σας στη δημόσια σελίδα του προφίλ MDN σας.</li> - <li>Ακολουθήστε τις υποδείξεις του GitHub για να συνδέσετε το λογαριασμό σας με το MDN.</li> - <li>Μόλις η υπηρεσία πιστοποίησης σάς επιστρέψει στο MDN, θα σάς ζητηθεί να εισαγάγετε ένα όνομα χρήστη και μια διεύθυνση email. <em>Το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας. Μην χρησιμοποιείτε τη διεύθυνση email σας ως το όνομα χρήστη σας</em><strong>.</strong></li> - <li>Κάντε κλικ στο <strong>Δημιουργία προφίλ MDN</strong>.</li> - <li>Αν η διεύθυνση email που καθορίσατε στο βήμα 4 δεν είναι ίδια με αυτή που χρησιμοποιείτε με την υπηρεσία πιστοποίησης, παρακαλούμε ελέγξτε τα emails σας και κάντε κλικ στο σύνδεσμο του email επιβεβαίωσης που σάς αποστείλαμε.</li> -</ol> - -<p>Αυτό ήταν! Έχετε αποκτήσει ένα λογαριασμό MDN και μπορείτε να αρχίσετε αμέσως την επεξεργασία σελίδων!</p> - -<p>Μπορείτε να κάνετε κλικ στο όνομά σας στο πάνω μέρος οποιασδήποτε σελίδας του MDN για να δείτε το δημόσιο προφίλ σας. Από εδώ, μπορείτε να κάνετε κλικ στο <strong>Επεξεργασία</strong> για να κάνετε αλλαγές ή προσθήκες στο προφίλ σας.</p> - -<div class="note"> -<p>Τα νέα ονόματα χρήστη δεν μπορούν να περιέχουν κενά ή το χαρακτήρα "@". Θυμηθείτε ότι το όνομα χρήστη σας θα εμφανίζεται δημοσίως έτσι, ώστε να αναγνωριστεί η εργασία σας.</p> -</div> diff --git a/files/el/tools/about_colon_debugging/index.html b/files/el/tools/about_colon_debugging/index.html deleted file mode 100644 index 8cc9fc9fb3..0000000000 --- a/files/el/tools/about_colon_debugging/index.html +++ /dev/null @@ -1,228 +0,0 @@ ---- -title: about:debugging -slug: Tools/about:debugging -translation_of: Tools/about:debugging -original_slug: Εργαλεία/about:debugging ---- -<p>{{ToolsSidebar}}</p> - -<p>The <code>about:debugging</code> 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.</p> - -<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2> - -<p>There are two ways to open <code>about:debugging</code>:</p> - -<ul> - <li>Type <code>about:debugging</code> in the Firefox URL bar.</li> - <li>In the <strong>Tools</strong> > <strong>Web Developer</strong> menu, click <strong>Remote Debugging</strong>.</li> -</ul> - -<p>When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:</p> - -<dl> - <dt>Setup</dt> - <dd>Use the Setup tab to configure the connection to your remote device.</dd> - <dt>This Firefox</dt> - <dd>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.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p> - -<p>If your <code>about:debugging</code> page is different from the one displayed here, go to <code>about:config</code>, find and set the option <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> - -<h2 id="Setup_tab">Setup tab</h2> - -<h3 id="Connecting_to_a_remote_device">Connecting to a remote device</h3> - -<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p> - -<p>Before you connect:</p> - -<ol> - <li>Enable Developer settings on your Android device.</li> - <li>Enable USB debugging in the Android Developer settings.</li> - <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li> - <li>Connect the Android device to your computer using a USB cable.</li> -</ol> - -<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p> - -<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> 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 <strong>Refresh devices</strong> button again. The device should appear.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p> -</div> - -<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> 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.</p> - -<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p> - -<p>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:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p> - -<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16916/remote_debugger.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>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.</p> - -<h3 id="Connecting_over_the_Network">Connecting over the Network</h3> - -<p>You can connect to a Firefox Debug server on your network, or on your debugging machine using the <strong>Network Location</strong> settings of the about:debugging page.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p> - -<p>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:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="This_Firefox">This Firefox</h2> - -<p>The <strong>This Firefox</strong> tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:</p> - -<dl> - <dt>Temporary Extensions</dt> - <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd> - <dt>Extensions</dt> - <dd>This section lists information about the extensions that you have installed on your system.</dd> - <dt>Service Workers, Shared Workers, and Other Workers</dt> - <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p> - -<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p> - -<h2 id="Extensions">Extensions</h2> - -<h3 id="Loading_a_temporary_extension">Loading a temporary extension</h3> - -<p>With the <strong>Load Temporary Add-on</strong> 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 <strong>Temporary Extensions</strong> header.</p> - -<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p> - -<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p> - -<ul> - <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li> - <li>You can load an add-on without signing it and without needing to disable signing.</li> -</ul> - -<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p> - -<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p> - -<p>You can use the following buttons:</p> - -<dl> - <dt>Inspect</dt> - <dd>Loads the extension in the debugger.</dd> - <dt>Reload</dt> - <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd> - <dt>Remove</dt> - <dd>Unloads the temporary extension.</dd> -</dl> - -<p>Other information about the extension is displayed:</p> - -<dl> - <dt>Location</dt> - <dd>The location of the extension's source code on your local system.</dd> - <dt>Extension ID</dt> - <dd>The temporary ID assigned to the extension.</dd> - <dt>Internal UUID</dt> - <dd>The internal UUID assigned to the extension.</dd> - <dt>Manifest URL</dt> - <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd> -</dl> - -<h3 id="Updating_a_temporary_extension">Updating a temporary extension</h3> - -<p>If you install an extension in this way, what happens when you update the extension?</p> - -<ul> - <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> - <li>For other changes, click the <strong>Reload</strong> button. This does what it says: - <ul> - <li>Reloads any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> - <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li> - </ul> - </li> -</ul> - -<h3 id="Installed_Extensions">Installed Extensions</h3> - -<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p> - -<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p> - -<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p> - -<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p> - -<div class="note"> -<p><strong>Note: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> -</div> - -<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p> - -<div class="blockIndicator note"> -<p><strong>Note: </strong>This list may include add-ons that came preinstalled with Firefox.</p> -</div> - -<p>If you click <strong>Inspect</strong>, the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p> - -<p>{{EmbedYouTube("efCpDNuNg_c")}}</p> - -<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> - -<h2 id="Workers">Workers</h2> - -<p>The Workers page shows your workers, categorised as follows:</p> - -<ul> - <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> - <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> - <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> -</ul> - -<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p> - -<h3 id="Service_worker_state">Service worker state</h3> - -<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p> - -<ul> - <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li> - <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li> - <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li> -</ul> - -<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p> - -<div class="note"> -<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> -</div> - -<h3 id="Unregistering_service_workers">Unregistering service workers</h3> - -<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p> - -<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> - -<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p> - -<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> - -<div> -<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p> -</div> - -<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p> diff --git a/files/el/tools/index.html b/files/el/tools/index.html deleted file mode 100644 index 25db1c14c5..0000000000 --- a/files/el/tools/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Εργαλεία Προγραμματισμού του Firefox -slug: Tools -translation_of: Tools -original_slug: Εργαλεία ---- -<div class="summary">Εξετάστε, επεξεργαστείτε και αποσφαλματώστε την HTML, την CSS και την JavaScript στον υπολογιστή και το κινητό</div> - -<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/aurora/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Εγκατάσταση του Firefox Aurora</a> - -<h3 id="Τι_νέο_υπάρχει_στο_Aurora">Τι νέο υπάρχει στο Aurora;</h3> - -<p>Το Aurora είναι μια έκδοση προεπισκόπησης έκδοσης του Firefox, όπου μπορείτε να έχετε τα τελευταία χαρακτηριστικά πριν εκδοθούν. Το τρέχον Aurora περιλαμβάνει αυτές τις ενημερώσεις για τα εργαλεία προγραμματισμού:</p> - -<ul> - <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">Μοντέλο χρωματικής επισήμανσης κουτιού στην Σελίδα Επιθεωρητή</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Working_with_iframes">Υποστήριξη κονσόλας ιστού για την εκτέλεση JS σε frames</a></li> - <li>Βελτιώσεις στην οθόνη της κονσόλας ιστού: χρωματικές <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">επισημάνσεις κώδικα, χρωματικές επισημάνσεις κόμβων και επιθεώρηση</a></li> - <li>Βελτιώσεις θεμάτων της επιθεώρησης δικτύου, <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Network_request_fields"> μικρογραφίες εικόνων, προεπισκόπηση εικόνας</a>, <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Preview">HTML προεπισκόπηση</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console#Browser_Console_command_line">Η εισαγωγή της κονσόλας ιστού πρέπει τώρα να είναι ενεργοποιημένη στις Ρυθμίσεις</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Available_Toolbox_Buttons">Εικονίδια για το Scratchpad και άλλα εργαλεία είναι κρυμμένα ως προεπιλογή</a></li> -</ul> -</div> - -<p><img alt="" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="Creating" name="Creating">Δημιουργία</h2> - -<p>Εργαλεία σύνταξης για ιστοσελίδες και εφαρμογές ιστού.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad" title="Tools/Scratchpad">Scratchpad</a></dt> - <dd>'Ενας text editor (επεξεργαστής κειμένου) ενσωματωμένος στον Firefox, ο οποίος σας επιτρέπει τη σύνταξη και την εκτελέση της JavaScript.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor">Επεξεργαστής στυλ</a></dt> - <dd>Δείτε και επεξεργαστείτε CSS styles για την τρέχουσα σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor">Επεξεργαστής σκιών</a></dt> - <dd>Δείτε και επεξεργαστείτε τα vertex και fragment shaders που χρησιμοποιούνται από το <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Exploring" name="Exploring">Εξερεύνηση και αποσφαλμάτωση</h2> - -<p>Ερευνείστε, ελέγξτε, και αποσφαλματώστε ιστοσελίδες και εφαρμογές ιστού.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Κονσόλα ιστού</a></dt> - <dd>Δείτε τα μηνύματα που καταγράφονται σχετικά με μια ιστοσελίδα και αλληλεπιδράστε με την σελίδα χρησιμοποιώντας την JavaScript.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Επιθεωρητής σελίδας</a></dt> - <dd>Δείτε και αλλάξτε την σελίδα σε HTML και CSS.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger" title="Tools/Debugger">JavaScript διορθωτής σφαλμάτων κώδικα</a></dt> - <dd>Σταματείστε, ελέγξτε, ερευνείστε και αλλάξτε την JavaScript που τρέχει στην σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Έλεγχος-Παρακολούθηση δικτύου</a></dt> - <dd>Δείτε τις απαιτήσεις του δικτύου που πραγματώνονται όταν φορτώνεται η σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/GCLI">Εργαλειοθήκη προγραμματιστή</a></dt> - <dd>Μία γραμμή εντολών της επιφάνειας αλληλεπίδρασης για τα εργαλεία του προγραμματιστή.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/3D_View">Τρισδιάστατη (3D) εικόνα</a></dt> - <dd> Τρισδιάστατη (3D) θέαση της σελίδας.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> - <dd>Διαλέξτε ένα χρώμα από την σελίδα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Working_with_iframes">Δουλέοντας με iframes</a></dt> - <dd>Πως να στοχοποιήσετε μια συγκεκριμένη iframe.</dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Mobile" name="Mobile">Κινητά</h2> - -<p>Εργαλεία για προγραμματισμό σε κινητές συσκευές.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager">Διαχειριστής Εφαρμογών</a></dt> - <dd>Σχεδιάστε και αναπτύξτε το λειτουργικό σύστημα (OS) Firefox .</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox_OS_Simulator">Firefox OS εξομοιωτής</a></dt> - <dd>Τρέξτε και αποσφαλματώστε την εφαρμογή Firefox OS στον υπολογιστή σας, χωρίς να χρειάζετε να έχετε μια πραγματική συσκευή Firefox OS.</dd> - <dt><a href="https://developer.mozilla.org/en-us/docs/Tools/Responsive_Design_View">Εικόνα ανταπόκρισης σχεδίου</a></dt> - <dd>Δείτε πως η ιστοσελίδα ή η εφαρμογή θα έμοιαζε σε ένα διαφορετικό μέγεθος στην οθόνη χωρίς να χρειάζετε να αλλάξετε το μέγεθος του περιηγητή σας.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Firefox for Android">Αποσφαλμάτωση του Firefox για συσκευές Android</a></dt> - <dd>Συνδέστε την εργαλειοθήκη του προγραμματιστή με το Firefox για συσκευές Android.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Performance" name="Performance">Επιδόσεις</h2> - -<p>Διάγνωστε και επιδιορθώστε προβλήματα εκτέλεσης - αποδοτικότητας (επιδόσεων).</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance" title="Tools/Profiler">Ανάλυση προφίλ JavaScript </a></dt> - <dd>Ανακαλύψτε πού ο JavaScript κώδικας καταναλώνει χρόνο.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool">Εργαλείο επισήμανσης χρώματος</a></dt> - <dd>Επισημαίνει τα μέρη της σελίδας που επαναχρωματίζονται σε απάντηση στα συμβάντα.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Reflow_events">Συμβάντα αναδιαμόρφωσης σύνδεσης</a></dt> - <dd>Δείτε συμβάντα αναδιαμόρφωσης στην κονσόλα ιστού.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">Επιδόσεις δικτύου </a></dt> - <dd>Δείτε πόσο χρόνο χρειάζονται να φορτώσουν όλα τα μέρη του ιστότοπου .</dd> -</dl> -</div> -</div> - -<hr> -<div class="column-container"> -<div class="column-half"> -<h2 id="Αποσφαλματώτοντας_τον_περιηγητή">Αποσφαλματώτοντας τον περιηγητή</h2> - -<p>Κατεξοχήν (ώς προεπιλογή) τα εργαλεία του προγραμματιστή επισυνάπτονται σε μια ιστοσελίδα ή σε μια εφαρμογή ιστού. Μπορείτε όμως να τα συνδέσετε συνολοκά στον περιηγητή. Αυτό είναι χρήσιμο για την ανάπτυξη του περιηγητή και των προσθέτων.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Κονσόλα Περιηγητή</a></dt> - <dd>Δείτε τα μηνύματα που καταγράφονται απο τον ίδιο τον περιηγητή καθώς και των προσθέτων, και τρέξτε τον κώδικα JavaScript στου περιηγητή .</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">Εργαλειοθήκη Περιηγητή</a></dt> - <dd>Συνδέστε τα εργαλεία του προγραμματιστή στον ίδιο τον περιηγητή.</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Επεκτείνοντας_τα_εργαλεία_του_προγραμματιστή">Επεκτείνοντας τα εργαλεία του προγραμματιστή</h2> - -<p>Τα εργαλεία του προγραμματιστή είναι σχεδιάσμενα με τέτοιο τρόπο ώστε να μπορούν να επεκταθούν. Τα πρόσθετα του Firefox μπορούν να προσπελάσουν τα εργαλεία του προγραμματιστή και τα εξαρτήματα που χρησιμοποιούν μπορούν να επεκτείνουν υπάρχοντα εργαλεία ή να προσθέσουν καινούρια εργαλεία. Με το πρωτόκολλο απομακρυσμένης αποσφαλμάτωσης μπορείτε να σχεδιάσετε τους δικούς σας πελάτες και εξυπηρετητές αποσφαλματώσης. Επίσης σας δίνει τη δυνατότητα να αποσφαλματώσετε ιστοσελίδες χρησιμοποιώντας δικά σας εργαλεία ή να αποσφαλματώσετε διαφορετικούς στόχους χρησιμοποιώντας τα εργαλεία του Firefox.</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Προσθέστε ένα νέο πίνακα στα εργαλεία προγραμματιστή</a></dt> - <dd>Γράψτε ένα πρόσθετο που προσθέτει έναν πίνακα στην εργαλειοθήκη.</dd> -</dl> - -<dl> - <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Πρωτόκολλο Απομακρυσμένης Αποσφαλμάτωσης</a></dt> - <dd>Το πρωτόκολλο που χρησιμοποιείται για να συνδέει τα εργαλεία του προγραμματιστή του Firefox με τους στόχους αποσφαλμάτωσης π.χ όπως ο περιηγητής Firefox ή μία συσκευή με λειτουργικό Firefox.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Editor">Επεξεργαστής πηγαίου κώδικα</a></dt> - <dd>Μία έκδοση ενός επεξεργαστή κώδικα στον Firefox η οποιά μπορεί να ενσωματωθεί στα πρόσθετά σας.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> - <dd>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.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> - <dd>How to extend and customize the output of the <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> - <dd>Use these examples to understand how to implement a devtools add-on.</dd> -</dl> -</div> -</div> - -<hr> -<h2 id="Περισσότεροι_πόροι">Περισσότεροι πόροι</h2> - -<p>Αυτό το κεφάλαιο αναφέρει πόρους που δεν υποστηρίζονται από την ομάδα των εργαλείων του προγραμματιστή του Mozilla, αλλά οι οποίοι χρησιμοποιούνται ευρέως από τους προγραμματιστές του ιστού. Έχουμε συμπεριλάβει μερικά από τα πρόσθετα του Firefox σε αυτή τη λίστα, αλλά για την ολοκληρωμένη λίστα δείτε την κατηγορία: <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">"Προγραμματισμός Ιστού" στα πρόσθετα του mozilla.org</a>.</p> - -<div class="column-container"> -<div class="column-half"> -<dl> - <dt><a href="https://www.getfirebug.com/" title="Firebug">Firebug</a></dt> - <dd>Ένα δημοφιλές και πολύ δυνατό εργαλείο προγραμματισμού του ιστού, το οποίο συμπεριλαμβάνει τον JavaScript διορθωτή σφαλμάτων κώδικα, HTML και CSS θεατή και επεξεργαστή και παρακολούθηση δικτύου.</dd> - <dt><a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">Επιθεωρητής DOM </a></dt> - <dd>Επιθεώρησε, δες και επεξεργάσου την DOM στις ιστοσελίδες ή XUL(XML Mozilla) παράθυρα.</dd> - <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/" title="Web-Developer">Προγραμματιστής Ιστού</a></dt> - <dd>Προσθέτει ένα μενού επιλογών και μια εργαλειοθήκη στον περιηγητή με διάφορα εργαλεία για τους προγραμματιστές του ιστού.</dd> -</dl> -</div> - -<div class="column-half"> -<dl> - <dt><a href="https://webmaker.org/en-US/tools/">Εργαλεία Δημιουργίας Ιστού</a></dt> - <dd>Ένα σετ από εργαλεία που αναπτύχθηκαν απο τον Mozilla, το οποίο στοχεύει στον να ξεκινήσουν οι άνθρωποι να ασχολούνται με τον προγραμματισμού του ιστού.</dd> - <dt><a href="http://www.w3.org/Status.html" title="W3C">W3C Eπικυρωτής</a></dt> - <dd>Η W3C ιστοσελίδα φιλοξενεί ένα μεγάλο αριθμό από εργαλεία για να ελέγξεις την εγκυρότητα του ιστότοπού σου, συμπεριλαμβανομένων των <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> και <a href="http://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> - <dt><a href="http://www.jshint.com/" title="JSHint">JSHint (Υπόδειξη JS)</a></dt> - <dd>Εργαλέιο ανάλυσης του κώδικα JavaScript.</dd> -</dl> -</div> -</div> - -<h2 id="Subnav">Subnav</h2> - -<ol> - <li><a href="#">Creating</a> - - <ol> - <li><a href="/en-US/docs/Tools/Scratchpad" title="Scratchpad">Scratchpad</a></li> - <li><a href="/en-US/docs/Tools/Style_Editor" title="Style Editor">Style Editor</a></li> - <li><a href="/en-US/docs/Tools/Shader_Editor">Shader Editor</a></li> - </ol> - </li> - <li><a href="#">Debugging</a> - <ol> - <li><a href="/en-US/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Page Inspector</a></li> - <li><a href="/en-US/docs/Tools/Web_Console" title="Web Console">Web Console</a></li> - <li><a href="/en-US/docs/Tools/Debugger" title="Debugger">Debugger</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor" title="Network Monitor">Network Monitor</a></li> - <li><a href="/en-US/docs/Tools/GCLI" title="GCLI">Developer Toolbar</a></li> - <li><a href="/en-US/docs/Tools/3D_View" title="3D View">3D View</a></li> - </ol> - </li> - <li><a href="#">Mobile</a> - <ol> - <li><a href="/en-US/Firefox_OS/Using_the_App_Manager" title="App Manager">App Manager</a></li> - <li><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Debugging Firefox for Android">Firefox for Android</a></li> - <li><a href="/en-US/docs/Tools/Firefox_OS_Simulator" title="Firefox OS Simulator">Firefox OS Simulator</a></li> - <li><a href="/en-US/docs/Tools/Responsive_Design_View" title="Responsive Design View">Responsive Design View</a></li> - </ol> - </li> - <li><a href="#">Performance</a> - <ol> - <li><a href="/en-US/docs/Tools/Profiler" title="Profiler">Profiler</a></li> - <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool" title="Paint Flashing Tool">Paint Flashing Tool</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Reflow_events" title="Reflow event logging">Reflow Event Logging</a></li> - <li><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis" title="Network Performance">Network Performance</a></li> - </ol> - </li> - <li><a href="#">Debugging the browser</a> - <ol> - <li><a href="/en-US/docs/Tools/Browser_Console" title="Browser Console">Browser Console</a></li> - <li><a href="/en-US/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></li> - </ol> - </li> - <li><a href="#">Extending the devtools</a> - <ol> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Adding a panel to the toolbox</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Example_add-ons">Example devtools add-ons </a></li> - <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></li> - <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol_Stream_Transport">Stream Transport</a></li> - <li><a href="/en-US/docs/Tools/Editor" title="Source Editor">Source Editor</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></li> - </ol> - </li> - <li><a href="/en-US/docs/Tools_Toolbox#Settings">Settings</a></li> - <li><a href="/en-US/docs/Tools/Release_notes">Release notes</a></li> -</ol> diff --git a/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html b/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html deleted file mode 100644 index f4d86f8c60..0000000000 --- a/files/el/web/api/canvasrenderingcontext2d/imagesmoothingenabled/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: CanvasRenderingContext2D.imageSmoothingEnabled -slug: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled -translation_of: Web/API/CanvasRenderingContext2D/imageSmoothingEnabled ---- -<div>{{APIRef}} {{SeeCompatTable}}</div> - -<p>Η ιδιότητα <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.imageSmoothingEnabled</code></strong> του Canvas 2D API μπορεί να καθοριστεί για να αλλάξει αν οι εικόνες θα είναι λείες (<code>true</code>, προεπιλογή) ή όχι (<code>false</code>). Όταν ζητηθεί η ιδιότητα <code>imageSmoothingEnabled</code>, επιστρέφει την τελευταία τιμή που καθορίστικε.</p> - -<p>Αυτή η ιδιότητα είναι χρήσημη για παιχνίδια με θέμα pixel-art, όταν ο καμβάς κλιμακώνεται για παράδειγμα. Ο προεπιλεγμένος αλγόριθμος κλιμάκωσης μπορεί να δημιουργίσει θολά εφέ, και να καταστρέψει τα εικονοστοιχεία. Σε αυτή την περίπτωση ορίστε αυτή την ιδιότητα σε <code>false</code>. Δείτε επίσης την ιδιότητα CSS {{cssxref("image-rendering")}}.</p> - -<h2 id="Σύνταξη">Σύνταξη</h2> - -<pre class="syntaxbox"><var><em>ctx</em>.imageSmoothingEnabled = value;</var></pre> - -<h3 id="Επιλογές">Επιλογές</h3> - -<dl> - <dt><code>value</code></dt> - <dd>Ένα {{jsxref("Boolean")}} που δείχνωντας αν θα είναι λείες οι εικόνες ή όχι.</dd> -</dl> - -<h2 id="Παραδείγματα">Παραδείγματα</h2> - -<h3 id="Using_the_globalAlpha_property" name="Using_the_globalAlpha_property">Χρησιμοποιώντας την ιδιότητα <code>imageSmoothingEnabled</code></h3> - -<p>Αυτό είναι ένα απλό απόσπασμα κώδικα που χρησιμοποιά την ιδιότητα <code>imageSmoothingEnabled</code> με μία κλιμακωμένη εικόνα.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js; highlight[7-10]">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; -img.onload = function() { - ctx.mozImageSmoothingEnabled = false; - ctx.webkitImageSmoothingEnabled = false; - ctx.msImageSmoothingEnabled = false; - ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 0, 0, 400, 200); -}; -</pre> - -<p>Επεξεργάστε τον παρακάτω κώδικα και δείτε ζωντανά τις αλλαγές σας στον καμβά:</p> - -<div class="hidden"> -<h6 id="Playable_code" name="Playable_code">Playable code</h6> - -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code" style="height:140px;"> -var img = new Image(); -img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; -img.onload = function() { - ctx.mozImageSmoothingEnabled = false; - ctx.webkitImageSmoothingEnabled = false; - ctx.msImageSmoothingEnabled = false; - ctx.imageSmoothingEnabled = false; - ctx.drawImage(img, 0, 0, 400, 200); -};</textarea> -</pre> - -<pre class="brush: js">var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); -var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var edit = document.getElementById('edit'); -var code = textarea.value; - -function drawCanvas() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - eval(textarea.value); -} - -reset.addEventListener('click', function() { - textarea.value = code; - drawCanvas(); -}); - -edit.addEventListener('click', function() { - textarea.focus(); -}) - -textarea.addEventListener('input', drawCanvas); -window.addEventListener('load', drawCanvas); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400) }}</p> - -<h2 id="Προδιαγραφές">Προδιαγραφές</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Προδιαγραφή</th> - <th scope="col">Κατάσταση</th> - <th scope="col">Σχόλιο</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-imagesmoothingenabled", "CanvasRenderingContext2D.imageSmoothingEnabled")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Συμβατότητα_προγραμμάτων_περιήγησης">Συμβατότητα προγραμμάτων περιήγησης</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Χαρακτηριστικό</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>30 [1]</td> - <td>{{ CompatVersionUnknown() }}<br> - {{property_prefix("moz")}}<br> - {{ CompatGeckoDesktop(51)}}</td> - <td>{{ CompatVersionUnknown() }}<br> - {{property_prefix("ms")}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Χαρακτηριστικό</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}<br> - {{property_prefix("moz")}}<br> - {{ CompatGeckoMobile(51)}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Υποστηρίζεται με <code>webkit</code> prefix μέχρι την έκδοση 29.</p> - -<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> - -<ul> - <li>Την διεπαφή που την καθορίζει, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{cssxref("image-rendering")}}</li> -</ul> diff --git a/files/el/web/api/canvasrenderingcontext2d/index.html b/files/el/web/api/canvasrenderingcontext2d/index.html deleted file mode 100644 index d6aa558a9c..0000000000 --- a/files/el/web/api/canvasrenderingcontext2d/index.html +++ /dev/null @@ -1,448 +0,0 @@ ---- -title: CanvasRenderingContext2D -slug: Web/API/CanvasRenderingContext2D -tags: - - API - - Canvas - - CanvasRenderingContext2D - - Games - - Graphics - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/CanvasRenderingContext2D ---- -<div>{{APIRef}}</div> - -<div>The <strong>CanvasRenderingContext2D</strong> interface is used for drawing rectangles, text, images and other objects onto the canvas element. It provides the 2D rendering context for the drawing surface of a {{ HTMLElement("canvas") }} element.</div> - -<div> </div> - -<p>To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <code><canvas> element</code>, supplying "2d" as the argument:</p> - -<pre class="brush: js">var canvas = document.getElementById('myCanvas'); // in your HTML this element appears as <canvas id="mycanvas"></canvas> -var ctx = canvas.getContext('2d'); -</pre> - -<p>Once you have the 2D rendering context for a canvas, you can draw within it. For example:</p> - -<pre class="brush: js">ctx.fillStyle = 'rgb(200,0,0)'; // sets the color to fill in the rectangle with -ctx.fillRect(10, 10, 55, 50); // draws the rectangle at position 10, 10 with a width of 55 and a height of 50 -</pre> - -<p>See the properties and methods in the sidebar and below. The <a href="/en-US/docs/Web/API/Canvas_API/Tutorial" title="Canvas tutorial">canvas tutorial</a> has more information, examples, and resources as well.</p> - -<h2 id="Drawing_rectangles">Drawing rectangles</h2> - -<p>There are three methods that immediately draw rectangles to the bitmap.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.clearRect()")}}</dt> - <dd>Sets all pixels in the rectangle defined by starting point <em>(x, y)</em> and size <em>(width, height)</em> to transparent black, erasing any previously drawn content.</dd> - <dt>{{domxref("CanvasRenderingContext2D.fillRect()")}}</dt> - <dd>Draws a filled rectangle at <em>(x, y) </em>position whose size is determined by <em>width</em> and <em>height</em>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeRect()")}}</dt> - <dd>Paints a rectangle which has a starting point at <em>(x, y)</em> and has a<em> w</em> width and an <em>h</em> height onto the canvas, using the current stroke style.</dd> -</dl> - -<h2 id="Drawing_text">Drawing text</h2> - -<p>The following methods are provided for drawing text. See also the {{domxref("TextMetrics")}} object for text properties.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillText()")}}</dt> - <dd>Draws (fills) a given text at the given (x,y) position.</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeText()")}}</dt> - <dd>Draws (strokes) a given text at the given <em>(x, y) </em>position.</dd> - <dt>{{domxref("CanvasRenderingContext2D.measureText()")}}</dt> - <dd>Returns a {{domxref("TextMetrics")}} object.</dd> -</dl> - -<h2 id="Line_styles">Line styles</h2> - -<p>The following methods and properties control how lines are drawn.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.lineWidth")}}</dt> - <dd>Width of lines. Default <code>1.0</code></dd> - <dt>{{domxref("CanvasRenderingContext2D.lineCap")}}</dt> - <dd>Type of endings on the end of lines. Possible values: <code>butt</code> (default), <code>round</code>, <code>square</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineJoin")}}</dt> - <dd>Defines the type of corners where two lines meet. Possible values: <code>round</code>, <code>bevel</code>, <code>miter</code> (default).</dd> - <dt>{{domxref("CanvasRenderingContext2D.miterLimit")}}</dt> - <dd>Miter limit ratio. Default <code>10</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</dt> - <dd>Returns the current line dash pattern array containing an even number of non-negative numbers.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setLineDash()")}}</dt> - <dd>Sets the current line dash pattern.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</dt> - <dd>Specifies where to start a dash array on a line.</dd> -</dl> - -<h2 id="Text_styles">Text styles</h2> - -<p>The following properties control how text is laid out.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.font")}}</dt> - <dd>Font setting. Default value <code>10px sans-serif</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textAlign")}}</dt> - <dd>Text alignment setting. Possible values: <code>start</code> (default), <code>end</code>, <code>left</code>, <code>right</code> or <code>center</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.textBaseline")}}</dt> - <dd>Baseline alignment setting. Possible values: <code>top</code>, <code>hanging</code>, <code>middle</code>, <code>alphabetic</code> (default), <code>ideographic</code>, <code>bottom</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.direction")}}</dt> - <dd>Directionality. Possible values: <code>ltr, rtl</code>, <code>inherit</code> (default).</dd> -</dl> - -<h2 id="Fill_and_stroke_styles">Fill and stroke styles</h2> - -<p>Fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fillStyle")}}</dt> - <dd>Color or style to use inside shapes. Default <code>#000</code> (black).</dd> - <dt>{{domxref("CanvasRenderingContext2D.strokeStyle")}}</dt> - <dd>Color or style to use for the lines around shapes. Default <code>#000</code> (black).</dd> -</dl> - -<h2 id="Gradients_and_patterns">Gradients and patterns</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createLinearGradient()")}}</dt> - <dd>Creates a linear gradient along the line given by the coordinates represented by the parameters.</dd> - <dt>{{domxref("CanvasRenderingContext2D.createRadialGradient()")}}</dt> - <dd>Creates a radial gradient given by the coordinates of the two circles represented by the parameters.</dd> - <dt>{{domxref("CanvasRenderingContext2D.createPattern()")}}</dt> - <dd>Creates a pattern using the specified image (a {{domxref("CanvasImageSource")}}). It repeats the source in the directions specified by the repetition argument. This method returns a {{domxref("CanvasPattern")}}.</dd> -</dl> - -<h2 id="Shadows">Shadows</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.shadowBlur")}}</dt> - <dd>Specifies the blurring effect. Default <code>0</code></dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowColor")}}</dt> - <dd>Color of the shadow. Default fully-transparent black.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetX")}}</dt> - <dd>Horizontal distance the shadow will be offset. Default 0.</dd> - <dt>{{domxref("CanvasRenderingContext2D.shadowOffsetY")}}</dt> - <dd>Vertical distance the shadow will be offset. Default 0.</dd> -</dl> - -<h2 id="Paths">Paths</h2> - -<p>The following methods can be used to manipulate paths of objects.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.beginPath()")}}</dt> - <dd>Starts a new path by emptying the list of sub-paths. Call this method when you want to create a new path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.closePath()")}}</dt> - <dd>Causes the point of the pen to move back to the start of the current sub-path. It tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing.</dd> - <dt>{{domxref("CanvasRenderingContext2D.moveTo()")}}</dt> - <dd>Moves the starting point of a new sub-path to the <strong>(x, y)</strong> coordinates.</dd> - <dt>{{domxref("CanvasRenderingContext2D.lineTo()")}}</dt> - <dd>Connects the last point in the subpath to the <code>x, y</code> coordinates with a straight line.</dd> - <dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()")}}</dt> - <dd>Adds a cubic Bézier curve to the path. It requires three points. The first two points are control points and the third one is the end point. The starting point is the last point in the current path, which can be changed using <code>moveTo()</code> before creating the Bézier curve.</dd> - <dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()")}}</dt> - <dd>Adds a quadratic Bézier curve to the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.arc()")}}</dt> - <dd>Adds an arc to the path which is centered at <em>(x, y)</em> position with radius<em> r</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> - <dt>{{domxref("CanvasRenderingContext2D.arcTo()")}}</dt> - <dd>Adds an arc to the path with the given control points and radius, connected to the previous point by a straight line.</dd> - <dt>{{domxref("CanvasRenderingContext2D.ellipse()")}} {{experimental_inline}}</dt> - <dd>Adds an ellipse to the path which is centered at <em>(x, y)</em> position with the radii <em>radiusX</em> and <em>radiusY</em> starting at <em>startAngle</em> and ending at <em>endAngle</em> going in the given direction by <em>anticlockwise</em> (defaulting to clockwise).</dd> - <dt>{{domxref("CanvasRenderingContext2D.rect()")}}</dt> - <dd>Creates a path for a rectangle at<em> </em>position <em>(x, y)</em> with a size that is determined by <em>width</em> and <em>height</em>.</dd> -</dl> - -<h2 id="Drawing_paths">Drawing paths</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.fill()")}}</dt> - <dd>Fills the subpaths with the current fill style.</dd> - <dt>{{domxref("CanvasRenderingContext2D.stroke()")}}</dt> - <dd>Strokes the subpaths with the current stroke style.</dd> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}}</dt> - <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}}</dt> - <dd>Scrolls the current path or a given path into the view.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clip()")}}</dt> - <dd>Creates a clipping path from the current sub-paths. Everything drawn after <code>clip()</code> is called appears inside the clipping path only. For an example, see <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing" title="Clipping paths">Clipping paths</a> in the Canvas tutorial.</dd> - <dt>{{domxref("CanvasRenderingContext2D.isPointInPath()")}}</dt> - <dd>Reports whether or not the specified point is contained in the current path.</dd> - <dt>{{domxref("CanvasRenderingContext2D.isPointInStroke()")}}</dt> - <dd>Reports whether or not the specified point is inside the area contained by the stroking of a path.</dd> -</dl> - -<h2 id="Transformations">Transformations</h2> - -<p>Objects in the <code>CanvasRenderingContext2D</code> rendering context have a current transformation matrix and methods to manipulate it. The transformation matrix is applied when creating the current default path, painting text, shapes and {{domxref("Path2D")}} objects. The methods listed below remain for historical and compatibility reasons as {{domxref("SVGMatrix")}} objects are used in most parts of the API nowadays and will be used in the future instead.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.currentTransform")}}</dt> - <dd>Current transformation matrix ({{domxref("SVGMatrix")}} object).</dd> - <dt>{{domxref("CanvasRenderingContext2D.rotate()")}}</dt> - <dd>Adds a rotation to the transformation matrix. The angle argument represents a clockwise rotation angle and is expressed in radians.</dd> - <dt>{{domxref("CanvasRenderingContext2D.scale()")}}</dt> - <dd>Adds a scaling transformation to the canvas units by x horizontally and by y vertically.</dd> - <dt>{{domxref("CanvasRenderingContext2D.translate()")}}</dt> - <dd>Adds a translation transformation by moving the canvas and its origin x horzontally and y vertically on the grid.</dd> - <dt>{{domxref("CanvasRenderingContext2D.transform()")}}</dt> - <dd>Multiplies the current transformation matrix with the matrix described by its arguments.</dd> - <dt>{{domxref("CanvasRenderingContext2D.setTransform()")}}</dt> - <dd>Resets the current transform to the identity matrix, and then invokes the <code>transform()</code> method with the same arguments.</dd> - <dt>{{domxref("CanvasRenderingContext2D.resetTransform()")}} {{experimental_inline}}</dt> - <dd>Resets the current transform by the identity matrix.</dd> -</dl> - -<h2 id="Compositing">Compositing</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.globalAlpha")}}</dt> - <dd>Alpha value that is applied to shapes and images before they are composited onto the canvas. Default <code>1.0</code> (opaque).</dd> - <dt>{{domxref("CanvasRenderingContext2D.globalCompositeOperation")}}</dt> - <dd>With <code>globalAlpha</code> applied this sets how shapes and images are drawn onto the existing bitmap.</dd> -</dl> - -<h2 id="Drawing_images">Drawing images</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawImage()")}}</dt> - <dd>Draws the specified image. This method is available in multiple formats, providing a great deal of flexibility in its use.</dd> -</dl> - -<h2 id="Pixel_manipulation">Pixel manipulation</h2> - -<p>See also the {{domxref("ImageData")}} object.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.createImageData()")}}</dt> - <dd>Creates a new, blank {{domxref("ImageData")}} object with the specified dimensions. All of the pixels in the new object are transparent black.</dd> - <dt>{{domxref("CanvasRenderingContext2D.getImageData()")}}</dt> - <dd>Returns an {{domxref("ImageData")}} object representing the underlying pixel data for the area of the canvas denoted by the rectangle which starts at <em>(sx, sy)</em> and has an <em>sw</em> width and <em>sh</em> height.</dd> - <dt>{{domxref("CanvasRenderingContext2D.putImageData()")}}</dt> - <dd>Paints data from the given {{domxref("ImageData")}} object onto the bitmap. If a dirty rectangle is provided, only the pixels from that rectangle are painted.</dd> -</dl> - -<h2 id="Image_smoothing">Image smoothing</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} {{experimental_inline}}</dt> - <dd>Image smoothing mode; if disabled, images will not be smoothed if scaled.</dd> -</dl> - -<h2 id="The_canvas_state">The canvas state</h2> - -<p>The <code>CanvasRenderingContext2D</code> rendering context contains a variety of drawing style states (attributes for line styles, fill styles, shadow styles, text styles). The following methods help you to work with that state:</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.save()")}}</dt> - <dd>Saves the current drawing style state using a stack so you can revert any change you make to it using <code>restore()</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.restore()")}}</dt> - <dd>Restores the drawing style state to the last element on the 'state stack' saved by <code>save()</code>.</dd> - <dt>{{domxref("CanvasRenderingContext2D.canvas")}}</dt> - <dd>A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.</dd> -</dl> - -<h2 id="Hit_regions">Hit regions</h2> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>Adds a hit region to the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>Removes all hit regions from the canvas.</dd> -</dl> - -<h2 id="Non-standard_APIs">Non-standard APIs</h2> - -<h3 id="Blink_and_WebKit">Blink and WebKit</h3> - -<p>Most of these APIs are <a href="https://code.google.com/p/chromium/issues/detail?id=363198">deprecated and will be removed in the future</a>.</p> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.clearShadow()</code></dt> - <dd>Removes all shadow settings like {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}}.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.drawImageFromRect()</code></dt> - <dd>This is redundant with an equivalent overload of <code>drawImage</code>.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setAlpha()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.globalAlpha")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setCompositeOperation()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.globalCompositeOperation")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineWidth()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineWidth")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineJoin()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineJoin")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setLineCap()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineCap")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setMiterLimit()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.miterLimit")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setStrokeColor()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.strokeStyle")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setFillColor()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.fillStyle")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.setShadow()</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.shadowColor")}} and {{domxref("CanvasRenderingContext2D.shadowBlur")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDash</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.getLineDash()")}} and {{domxref("CanvasRenderingContext2D.setLineDash()")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitLineDashOffset</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.lineDashOffset")}} instead.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitImageSmoothingEnabled</code></dt> - <dd>Use {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}} instead.</dd> -</dl> - -<h3 id="Blink_only">Blink only</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.getContextAttributes()</code></dt> - <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns an <code>Canvas2DContextAttributes</code> object that contains the attributes "storage" to indicate which storage is used ("persistent" by default) and the attribute "alpha" (<code>true</code> by default) to indicate that transparency is used in the canvas.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.isContextLost()</code></dt> - <dd>Inspired by the same <code>WebGLRenderingContext</code> method it returns <code>true</code> if the Canvas context has been lost, or <code>false</code> if not.</dd> -</dl> - -<h3 id="WebKit_only">WebKit only</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitBackingStorePixelRatio</code></dt> - <dd>The backing store size in relation to the canvas element. See <a href="http://www.html5rocks.com/en/tutorials/canvas/hidpi/">High DPI Canvas</a>.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitGetImageDataHD</code></dt> - <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.webkitPutImageDataHD</code></dt> - <dd>Intended for HD backing stores, but removed from canvas specifications.</dd> -</dl> - -<dl> -</dl> - -<h3 id="Gecko_only">Gecko only</h3> - -<dl> - <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.filter")}}</dt> - <dd>CSS and SVG filters as Canvas APIs. Likely to be standardized in a new version of the specification.</dd> -</dl> - -<h4 id="Prefixed_APIs">Prefixed APIs</h4> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransform</code></dt> - <dd>Sets or gets the current transformation matrix, see {{domxref("CanvasRenderingContext2D.currentTransform")}}. {{ gecko_minversion_inline("7.0") }}</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozCurrentTransformInverse</code></dt> - <dd>Sets or gets the current inversed transformation matrix. {{ gecko_minversion_inline("7.0") }}</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.mozImageSmoothingEnabled</code></dt> - <dd>See {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled")}}.</dd> - <dt>{{non-standard_inline}} {{deprecated_inline}} <code>CanvasRenderingContext2D.mozTextStyle</code></dt> - <dd>Introduced in in Gecko 1.9, deprecated in favor of the {{domxref("CanvasRenderingContext2D.font")}} property.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozDrawText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.strokeText()")}} or {{domxref("CanvasRenderingContext2D.fillText()")}} instead.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozMeasureText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is unimplemented starting with Gecko 7.0. Use {{domxref("CanvasRenderingContext2D.measureText()")}} instead.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozPathText()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> - <dt>{{non-standard_inline}} {{obsolete_inline}} <code>CanvasRenderingContext2D.mozTextAlongPath()</code></dt> - <dd>This method was introduced in Gecko 1.9 and is removed starting with Gecko 7.0.</dd> -</dl> - -<h4 id="Internal_APIs_(chrome-context_only)">Internal APIs (chrome-context only)</h4> - -<dl> - <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.asyncDrawXULElement()")}}</dt> - <dd>Renders a region of a XUL element into the <code>canvas</code>.</dd> - <dt>{{non-standard_inline}} {{domxref("CanvasRenderingContext2D.drawWindow()")}}</dt> - <dd>Renders a region of a window into the <code>canvas</code>. The contents of the window's viewport are rendered, ignoring viewport clipping and scrolling.</dd> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.demote()</code></dt> - <dd>This causes a context that is currently using a hardware-accelerated backend to fallback to a software one. All state should be preserved.</dd> -</dl> - -<h3 id="Internet_Explorer">Internet Explorer</h3> - -<dl> - <dt>{{non-standard_inline}} <code>CanvasRenderingContext2D.msFillRule</code></dt> - <dd>The <a class="external" href="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t" title="http://cairographics.org/manual/cairo-cairo-t.html#cairo-fill-rule-t">fill rule</a> to use. This must be one of <code>evenodd</code> or <code>nonzero</code> (default).</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#2dcontext:canvasrenderingcontext2d", "CanvasRenderingContext2D")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("1")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.8")}}</td> - <td>{{CompatIE("9")}}</td> - <td>{{CompatOpera("9")}}</td> - <td>{{CompatSafari("2")}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Compatibility_notes">Compatibility notes</h2> - -<ul> - <li>Starting with Gecko 5.0 {{geckoRelease("5.0")}}, specifying invalid values are now silently ignored for the following methods and properties: <code>translate()</code>, <code>transform()</code>, <code>rotate(), </code><code>scale(),</code> <code>rect()</code>, <code>clearRect()</code>, <code>fillRect()</code>, <code>strokeRect()</code>, <code>lineTo()</code>, <code>moveTo()</code>, <code>quadraticCurveTo()</code>, <code>arc()</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>, <code>shadowBlur</code>.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("HTMLCanvasElement")}}</li> -</ul> diff --git a/files/el/web/api/geolocation/getcurrentposition/index.html b/files/el/web/api/geolocation/getcurrentposition/index.html deleted file mode 100644 index f22b26d7ba..0000000000 --- a/files/el/web/api/geolocation/getcurrentposition/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Geolocation.getCurrentPosition() -slug: Web/API/Geolocation/getCurrentPosition -translation_of: Web/API/Geolocation/getCurrentPosition ---- -<p>{{ APIRef("Geolocation API") }}</p> - -<p>Η μέθοδος <strong><code>Geolocation.getCurrentPosition()</code></strong> χρησιμοποιείται ώστε να ανακτηθεί η τρέχουσα τοποθεσία της συσκευής.</p> - -<h2 id="Συντακτικό">Συντακτικό</h2> - -<pre class="syntaxbox">navigator.geolocation.getCurrentPosition(<em>success[</em>, <em>error[</em>, <em>options]]</em>)</pre> - -<h3 id="Παράμετροι">Παράμετροι</h3> - -<dl> - <dt><em>success</em></dt> - <dd>Μία συνάρτηση επανάκλησης (callback function) που δέχεται ένα αντικείμενο τύπου {{domxref("Position")}} ως μοναδική παράμετρο εισόδου.</dd> - <dt><em>error</em> {{optional_inline}}</dt> - <dd>Μία προαιρετική συνάρτηση επανάκλησης (callback function) που δέχεται ένα αντικείμενο τύπου {{domxref("PositionError")}} ως μοναδική παράμετρο εισόδου.</dd> - <dt><em>options</em> {{optional_inline}}</dt> - <dd>Ένα προαιρετικό αντικείμενο τύπου {{domxref("PositionOptions")}}.</dd> -</dl> - -<h2 id="Παράδειγμα">Παράδειγμα</h2> - -<pre class="brush: js">var options = { - enableHighAccuracy: true, - timeout: 5000, - maximumAge: 0 -}; - -function success(pos) { - var crd = pos.coords; - - console.log('Your current position is:'); - console.log('Latitude : ' + crd.latitude); - console.log('Longitude: ' + crd.longitude); - console.log('More or less ' + crd.accuracy + ' meters.'); -}; - -function error(err) { - console.warn('ERROR(' + err.code + '): ' + err.message); -}; - -navigator.geolocation.getCurrentPosition(success, error, options); -</pre> - -<h2 id="Προδιαγραφές">Προδιαγραφές</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Προδιαγραφή</th> - <th scope="col">Κατάσταση</th> - <th scope="col">Σχόλιο</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Αρχικές προδιαγραφές</td> - </tr> - </tbody> -</table> - -<h2 id="Συμβατότητα_προγράμματος_περιήγησης">Συμβατότητα προγράμματος περιήγησης</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Χαρακτηριστικό</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Βασική υποστήριξη</td> - <td>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Αφαιρέθηκε στην έκδοση 15.0<br> - Επαναπροστέθηκε στην έκδοση 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Χαρακτηριστικό</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Βασική υποστήριξη</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Χρησιμοποιώντας geolocation</a></li> - <li>{{domxref("Navigator.geolocation")}}</li> -</ul> diff --git a/files/el/web/api/geolocation/index.html b/files/el/web/api/geolocation/index.html deleted file mode 100644 index 81d4548549..0000000000 --- a/files/el/web/api/geolocation/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Geolocation -slug: Web/API/Geolocation -tags: - - API - - Advanced - - Geolocation API - - Interface - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/API/Geolocation ---- -<div>{{APIRef("Geolocation API")}}</div> - -<p>The <code><strong>Geolocation</strong></code> interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.</p> - -<p>An object with this interface is obtained using the {{domxref("NavigatorGeolocation.geolocation")}} property implemented by the {{domxref("Navigator")}} object.</p> - -<div class="note"> -<p><strong>Note:</strong> For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.</p> -</div> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>Geolocation</code> interface neither implements, nor inherits any property.</em></p> - -<h2 id="Methods">Methods</h2> - -<p><em><em>The <code>Geolocation</code> interface doesn't inherit any </em>method</em>.</p> - -<dl> - <dt>{{domxref("Geolocation.getCurrentPosition()")}}</dt> - <dd>Determines the device's current location and gives back a {{domxref("Position")}} object with the data.</dd> - <dt>{{domxref("Geolocation.watchPosition()")}}</dt> - <dd>Returns a <code>long</code> value representing the newly established callback function to be invoked whenever the device location changes.</dd> - <dt>{{domxref("Geolocation.clearWatch()")}}</dt> - <dd>Removes the particular handler previously installed using <code>watchPosition()</code>.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Geolocation')}}</td> - <td>{{Spec2('Geolocation')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5</td> - <td>{{CompatGeckoDesktop("1.9.1")}}</td> - <td>9</td> - <td>10.60<br> - Removed in 15.0<br> - Reintroduced in 16.0</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatGeckoMobile("4")}}</td> - <td>{{CompatUnknown()}}</td> - <td>10.60</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/WebAPI/Using_geolocation" title="/en-US/docs/WebAPI/Using_geolocation">Using geolocation</a></li> -</ul> diff --git a/files/el/web/api/index.html b/files/el/web/api/index.html deleted file mode 100644 index 5f7d964ff7..0000000000 --- a/files/el/web/api/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Web API Interfaces -slug: Web/API -tags: - - API - - Apps - - JavaScript - - Reference - - Web -translation_of: Web/API ---- -<p>When writing code for the Web using JavaScript, there are a great many APIs available. Below is a list of all the interfaces (that is, types of objects) that you may be able to use while developing your Web app or site.</p> - -<div> -<div>{{APIListAlpha}}</div> -</div> - -<p> </p> diff --git a/files/el/web/css/index.html b/files/el/web/css/index.html deleted file mode 100644 index 68cd44735d..0000000000 --- a/files/el/web/css/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: CSS -slug: Web/CSS -tags: - - CSS - - CSS 3 -translation_of: Web/CSS ---- -<p><strong>Cascading Style Sheets</strong>, τις περισσότερες φορές με την συντομογραφία CSS, είναι μια <a href="/en-US/docs/DOM/stylesheet">stylesheet</a> γλώσσα όπου χρησιμοποιείται για να περιγράψει την παρουσίαση ενός εγγράφου γραμμένου σε <a href="/en-US/docs/HTML">HTML</a> ή <a href="/en-US/docs/XML">XML</a> ( συμπεριλαμβανομένου διαφόρων ειδών XML γλώσσες όπως <a href="/en-US/docs/SVG">SVG</a> ή <a href="/en-US/docs/XHTML">XHTML</a>). Η CSS περιγράφει το πώς το δομημένο στοιχείο θα πρέπει να εμφανίζεται στην οθόνη, σε χαρτί, στην ομιλία, ή σε άλλα μέσα ενημέρωσης.</p> - -<p>Η CSS είναι μια από τις βασικές γλώσσες του ανοικτού διαδικτύου και έχει μια τυποποιημένη <a class="external" href="http://w3.org/Style/CSS/#specs">W3C ιδιότητα</a>. Αναπτύχθηκε σε επίπεδα, η CSS1 είναι πλέον παρωχημένη, η CSS2.1 συστήνεται και η CSS3, οι οποίες χωρίζονται σε μικρότερες ενότητες.</p> - -<section id="sect1"> -<ul class="card-grid"> - <li>CSS Αναφορές - <p>Μια <a href="/en-US/docs/Web/CSS/Reference">λεπτομερής αναφορά</a> για έμπειρους προγραμματιστές, περιγράφοντας κάθε ιδιότητα και έννοια της CSS.</p> - </li> - <li>CSS Παραδείγματα - <p><a href="/en-US/docs/CSS/Getting_Started">Βήμα-βήμα</a> παραδείγματα για βοήθεια αρχάριων προγραμματιστών για το ξεκίνημα τους. Περιέχει όλες τις απαραίτητες βασικές αρχές.</p> - </li> - <li>CSS3 Επίδειξη - <p><a href="/en-US/demos/tag/tech:css3">Συλλογή από παρουσιάσεις</a>, παρουσιάσεις τελευταίων CSS τεχνολογιών. Ώθηση για δημιουργικότητα.</p> - </li> -</ul> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="Documentation" name="Documentation">Τεκμηρίωση και προγράμματα εκμάθησης</h2> - -<dl> - <dt>Βασικές έννοιες CSS</dt> - <dd>Περιγράφει <a href="/el/docs/">τη σύνταξη και τις δομές της γλώσσας</a> και εισάγει βασικά στοιχεία όπως η <a href="/el/docs/">εξειδίκευση</a> και η <a href="/el/docs/">κληρονομικότητα</a>, το <a href="/el/docs/">μοντέλο box</a> και το <a href="/el/docs/">margin collapsing</a>, <a href="/el/docs/">stacking</a> και <a href="/el/docs/">block-formatting</a> πλαίσια, ή τις <a href="/el/docs/">initial</a>, <a href="/el/docs/">computed</a>, <a href="/el/docs/">used</a> και <a href="/el/docs/">actual</a> αξίες. Ορίζονται επίσης οντότητες όπως οι <a href="/el/docs/">CSS shorthand properties</a>.</dd> - <dt><a href="/en-US/docs/Web/Guide/CSS">CSS developer guide</a></dt> - <dd>Articles to help you learn <strong>CSS</strong> techniques to make your content shine.</dd> - <dt><a href="/en-US/docs/Web/CSS/Common_CSS_Questions">Common CSS questions</a></dt> - <dd>Answers to common questions about <strong>CSS</strong>.</dd> -</dl> - -<h2 class="Tools" id="Tools" name="Tools">Εργαλεία για CSS ανάπτυξη</h2> - -<ul> - <li>The <a class="external" href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> checks if a given CSS is valid. The service at <a href="//www.OnlineWebCheck.com/">OnlineWebCheck.com</a> also does the same. These are invaluable debugging tools.</li> - <li><a href="/en-US/docs/Tools">Firefox Developer Tools</a> allow viewing and editing live CSS of a page via the <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a> and <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a> tools.</li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a> for Firefox, a popular extension of that navigator that allows to edit live CSS on watched sites. Very practical to test some changes, though this extension does much more.</li> - <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">Web Developer extension</a> for Firefox also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.</li> - <li><a class="external link-https" href="https://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension</a> for Firefox allows editing CSS in the sidebar.</li> -</ul> -</div> - -<div class="section"> -<h2 class="Related_Topics" id="News" name="News">Νέα</h2> - -<ul> - <li><a href="http://www.w3.org/TR/css-text-decor-3/">CSS Text-decoration Level 3</a> reached the <em>Candidate Recommandation</em> status, defining that the <code>text-decoration-*</code> and <code>text-emphasis-*</code> properties. The long known {{cssxref("text-shadow")}} is also defined in it. (<em>August 1st, 2013)</em></li> - <li>Gecko's now support {{cssxref("background-origin")}}<code>: local</code>. It will be available from Firefox 25 (and already is in Nightly). <em>(July 25th, 2013)</em></li> - <li><a href="http://www.w3.org/TR/pointerevents/">Pointer Events</a> reached the <em>Candidate Recommandation</em> status, meaning that the CSS property <code>touch-action</code>, currently only implemented in IE10 (with the <code>-ms-</code> prefix), is no more experimental. <em>(May 6th, 2013)</em></li> - <li>Gecko's support of <a href="/en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes"><em>flexible boxes</em></a> has been adapted to match a recent specification clarification: from Firefox 23 {{cssxref("::before")}} and {{cssxref("::after")}} will be flex items, and as such can be repositioned using {{cssxref("order")}} and {{cssxref("align-self")}}. <em>(May 3rd, 2013)</em></li> -</ul> - -<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Σχετικά Άρθρα</h2> - -<ul> - <li>Mozilla Learn <a href="/en-US/learn/css">CSS resources</a>.</li> - <li>Open Web languages on which CSS is often applied: <a href="/en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG">SVG</a>, <a href="/en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML">XML</a>.</li> - <li>Mozilla technologies which make extensive use of CSS: <a href="/en-US/docs/XUL">XUL</a>, Firefox and Thunderbird <a href="/en-US/docs/Extensions">extensions</a> and <a href="/en-US/docs/Themes">themes</a>.</li> -</ul> -</div> -</div> -</section> diff --git a/files/el/web/html/element/embed/index.html b/files/el/web/html/element/embed/index.html deleted file mode 100644 index 0a6e398b10..0000000000 --- a/files/el/web/html/element/embed/index.html +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: '<embed>: The Embed External Content element' -slug: Web/HTML/Element/embed -translation_of: Web/HTML/Element/embed ---- -<div>{{HTMLRef}}</div> - -<p>The <strong>HTML <code><embed></code> element</strong> embeds external content at the specified point in the document. This content is provided by an external application or other source of interactive content such as a browser plug-in.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/embed.html", "tabbed-standard")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</div> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> This topic documents only the element that is defined as part of HTML5. It does not address earlier, non-standardized implementation of the element.</p> -</div> - -<p>Keep in mind that most modern browsers have deprecated and removed support for browser plug-ins, so relying upon <code><embed></code> is generally not wise if you want your site to be operable on the average user's browser.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/Guide/HTML/Content_categories#Flow_content">Flow content</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content">phrasing content</a>, embedded content, interactive content, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#Palpable_content">palpable content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td>None, it is an {{Glossary("empty element")}}.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>Must have a start tag, and must not have an end tag.</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts embedded content.</td> - </tr> - <tr> - <th scope="row">Implicit ARIA role</th> - <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">No corresponding role</a></td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>{{ARIARole("application")}}, {{ARIARole("document")}}, {{ARIARole("img")}}, {{ARIARole("none")}}, {{ARIARole("presentation")}}</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLEmbedElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element's attributes include the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("height")}}</dt> - <dd>The displayed height of the resource, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</dd> - <dt>{{htmlattrdef("src")}}</dt> - <dd>The URL of the resource being embedded.</dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>The {{glossary("MIME type")}} to use to select the plug-in to instantiate.</dd> - <dt>{{htmlattrdef("width")}}</dt> - <dd>The displayed width of the resource, in <a href="https://drafts.csswg.org/css-values/#px">CSS pixels</a>. This must be an absolute value; percentages are <em>not</em> allowed.</dd> -</dl> - -<h2 id="Usage_notes">Usage notes</h2> - -<p>You can use the {{cssxref("object-position")}} property to adjust the positioning of the embedded object within the element's frame, and the {{cssxref("object-fit")}} property to control how the object's size is adjusted to fit within the frame.</p> - -<h2 id="Παράδειγμα">Παράδειγμα</h2> - -<pre class="brush: html notranslate"><embed type="video/quicktime" src="movie.mov" width="640" height="480" title="Title of my video"> -</pre> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<p>Use the <a href="/en-US/docs/Web/HTML/Global_attributes/title"><code>title</code> attribute</a> on an <code>embed</code> element to label its content so that people navigating with assistive technology such as a screen reader can understand what it contains. The title's value should concisely describe the embedded content. Without a title, they may not be able to determine what its embedded content is. This context shift can be confusing and time-consuming, especially if the <code>embed</code> element contains interactive content like video or audio.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-embed-element', '<embed>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'semantics-embedded-content.html#the-embed-element', '<embed>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div class="note"> -<p><strong>Note</strong>: Prior to version 45, Firefox did not display content of HTML resource, but a generic message saying the content needs a plug-in (see {{Bug("730768")}}).</p> -</div> - -<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> - -<p>{{Compat("html.elements.embed")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Other elements that are used for embedding content of various types include {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, and {{HTMLElement("video")}}.</li> - <li>Positioning and sizing the embedded content within its frame: {{cssxref("object-position")}} and {{cssxref("object-fit")}}</li> -</ul> diff --git a/files/el/web/html/element/index.html b/files/el/web/html/element/index.html deleted file mode 100644 index 216697c5a6..0000000000 --- a/files/el/web/html/element/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: HTML elements reference -slug: Web/HTML/Element -tags: - - Basic - - Element - - HTML - - NeedsTranslation - - Reference - - TopicStub - - Web - - 'l10n:priority' -translation_of: Web/HTML/Element ---- -<div>{{HTMLSidebar("Elements")}}</div> - -<p><span class="seoSummary">This page lists all the {{Glossary("HTML")}} {{Glossary("Element","elements")}}, which are created using {{Glossary("Tag", "tags")}}.</span> They are grouped by function to help you find what you have in mind easily. An alphabetical list of all elements is provided in the sidebar on every element's page as well as this one.</p> - -<div class="note"> -<p>For more information about the basics of HTML elements and attributes, see <a href="/en-US/docs/Web/Guide/HTML/Introduction#Elements_%E2%80%94_the_basic_building_blocks">the section on elements in the Introduction to HTML article</a>.</p> -</div> - -<h2 id="Main_root">Main root</h2> - -<p>{{HTMLRefTable("HTML Root Element")}}</p> - -<h2 id="Document_metadata">Document metadata</h2> - -<p>Metadata contains information about the page. This includes information about styles, scripts and data to help software ({{Glossary("search engine", "search engines")}}, {{Glossary("Browser","browsers")}}, etc.) use and render the page. Metadata for styles and scripts may be defined in the page or link to another file that has the information. </p> - -<p>{{HTMLRefTable("HTML Document Metadata")}}</p> - -<h2 id="Sectioning_root">Sectioning root</h2> - -<p>{{HTMLRefTable("Sectioning Root Element")}}</p> - -<h2 id="Content_sectioning">Content sectioning</h2> - -<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. </p> - -<p>{{HTMLRefTable("HTML Sections")}}</p> - -<h2 id="Text_content">Text content</h2> - -<p>Use HTML text content elements to organize blocks or sections of content placed between the opening {{HTMLElement("body")}} and closing <code></body></code> tags. Important for {{Glossary("accessibility")}} and {{Glossary("SEO")}}, these elements identify the purpose or structure of that content. </p> - -<p>{{HTMLRefTable("HTML Grouping Content")}}</p> - -<h2 id="Inline_text_semantics">Inline text semantics</h2> - -<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p> - -<p>{{HTMLRefTable("HTML Text-Level Semantics")}}</p> - -<h2 id="Image_and_multimedia">Image and multimedia</h2> - -<p>HTML supports various multimedia resources such as images, audio, and video.</p> - -<p>{{HTMLRefTable("multimedia")}}</p> - -<h2 id="Embedded_content">Embedded content</h2> - -<p>In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.</p> - -<p>{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}</p> - -<h2 id="Scripting">Scripting</h2> - -<p>In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.</p> - -<p>{{HTMLRefTable("HTML Scripting")}}</p> - -<h2 id="Demarcating_edits">Demarcating edits</h2> - -<p>These elements let you provide indications that specific parts of the text have been altered.</p> - -<p>{{HTMLRefTable("HTML Edits")}}</p> - -<h2 id="Table_content">Table content</h2> - -<p>The elements here are used to create and handle tabular data.</p> - -<p>{{HTMLRefTable("HTML tabular data")}}</p> - -<h2 id="Forms">Forms</h2> - -<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML forms guide</a>.</p> - -<p>{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}</p> - -<h2 id="Interactive_elements">Interactive elements</h2> - -<p>HTML offers a selection of elements which help to create interactive user interface objects.</p> - -<p>{{HTMLRefTable("HTML interactive elements")}}</p> - -<h2 id="Web_Components">Web Components</h2> - -<p>Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.</p> - -<p>{{HTMLRefTable({"include":["Web Components"],"exclude":["Deprecated", "Obsolete"]})}}</p> - -<h2 id="Obsolete_and_deprecated_elements">Obsolete and deprecated elements</h2> - -<div class="warning"> -<p><strong>Warning:</strong> These are old HTML elements which are deprecated and should not be used. <strong>You should never use them in new projects, and should replace them in old projects as soon as you can.</strong> They are listed here for informational purposes only.</p> -</div> - -<p>{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}</p> diff --git a/files/el/web/html/index.html b/files/el/web/html/index.html deleted file mode 100644 index 81b787c6ed..0000000000 --- a/files/el/web/html/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: 'HTML: HyperText Markup Language' -slug: Web/HTML -tags: - - HTML - - HTML5 - - Landing - - NeedsTranslation - - TopicStub - - Web - - 'l10n:priority' -translation_of: Web/HTML ---- -<div>{{HTMLSidebar}}</div> - -<p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href="/en-US/docs/Web/CSS">CSS</a>) or functionality/behavior (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</span></p> - -<p>"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p> - -<p>HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}}, {{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("li")}} and many others.</p> - -<p>An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "<code><</code>" and "<code>></code>". The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code><title></code> tag can be written as <code><Title></code>, <code><TITLE></code>, or in any other way.</p> - -<p>The articles below can help you learn more about HTML.</p> - -<h2 id="Key_resources">Key resources</h2> - -<dl> - <dt><span>HTML Introduction</span></dt> - <dd>If you're new to Web development, be sure to read our <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML Basics</a> article to learn what HTML is and how to use it.</dd> - <dt><span>HTML Tutorials</span></dt> - <dd>For articles about how to use HTML, as well as tutorials and complete examples, check out our <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a>.</dd> - <dt><span>HTML Reference</span></dt> - <dd>In our extensive <a href="/en-US/docs/Web/HTML/Reference">HTML reference</a> section, you'll find the details about every element and attribute in HTML.</dd> -</dl> - -<div class="callout"> -<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> - -<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> - -<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> -</div> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Tools" id="Beginners_tutorials">Beginner's tutorials</h2> - -<p>Our <a href="/en-US/docs/Learn/HTML">HTML Learning Area</a> features multiple modules that teach HTML from the ground up — no previous knowledge required.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a></dt> - <dd>This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a></dt> - <dd>This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML tables</a></dt> - <dd>Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></dt> - <dd>Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></dt> - <dd>Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.</dd> -</dl> - -<h2 id="Advanced_topics">Advanced topics</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_enabled_image">CORS enabled image</a></dt> - <dd class="landingPageList">The {{htmlattrxref("crossorigin", "img")}} attribute, in combination with an appropriate {{glossary("CORS")}} header, allows images defined by the {{HTMLElement("img")}} element to be loaded from foreign origins and used in a {{HTMLElement("canvas")}} element as if they were being loaded from the current origin.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/CORS_settings_attributes">CORS settings attributes</a></dt> - <dd class="landingPageList">Some HTML elements that provide support for <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>, such as {{HTMLElement("img")}} or {{HTMLElement("video")}}, have a <code>crossorigin</code> attribute (<code>crossOrigin</code> property), which lets you configure the CORS requests for the element's fetched data.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Preloading_content">Preloading content with rel="preload"</a></dt> - <dd class="landingPageList">The <code>preload</code> value of the {{htmlelement("link")}} element's {{htmlattrxref("rel", "link")}} attribute allows you to write declarative fetch requests in your HTML {{htmlelement("head")}}, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how <code>preload</code> works.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="References">References</h2> - -<dl> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Reference">HTML reference</a></dt> - <dd class="landingPageList">HTML consists of <strong>elements</strong>, each of which may be modified by some number of <strong>attributes</strong>. HTML documents are connected to each other with <a href="/en-US/docs/Web/HTML/Link_types">links</a>.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Element">HTML element reference</a></dt> - <dd class="landingPageList">Browse a list of all {{glossary("HTML")}} {{glossary("Element", "elements")}}.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Attributes">HTML attribute reference</a></dt> - <dd class="landingPageList">Elements in HTML have <strong>attributes</strong>. These are additional values that configure the elements or adjust their behavior in various ways.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Global_attributes">Global attributes</a></dt> - <dd class="landingPageList">Global attributes may be specified on all <a href="/en-US/docs/Web/HTML/Element">HTML elements</a>, <em>even those not specified in the standard</em>. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Inline_elements">Inline elements</a> and <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level elements</a></dt> - <dd class="landingPageList">HTML elements are usually "inline" or "block-level" elements. An inline element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block."</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Link_types">Link types</a></dt> - <dd class="landingPageList">In HTML, various link types can be used to establish and define the relationship between two documents. Link elements that types can be set on include {{HTMLElement("a")}}, {{HTMLElement("area")}} and {{HTMLElement("link")}}.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/Media/Formats">Guide to media types and formats on the web</a></dt> - <dd class="landingPageList">The {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements allow you to play audio and video media natively within your content without the need for external software support.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/Guide/HTML/Content_categories">HTML content categories</a></dt> - <dd class="landingPageList">HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each has a set of other content categories they can contain and elements that can or can't be used in them. This is a guide to these categories.</dd> - <dt class="landingPageList"><a href="/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Quirks mode and standards mode</a></dt> - <dd class="landingPageList">Historical information on quirks mode and standards mode.</dd> -</dl> - -<h2 class="landingPageList" id="Related_topics">Related topics</h2> - -<dl> - <dt><a href="/en-US/docs/Web/HTML/Applying_color">Applying color to HTML elements using CSS</a></dt> - <dd>This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.</dd> -</dl> -</div> -</div> - -<p><span class="alllinks"><a href="/en-US/docs/tag/HTML">View All...</a></span></p> diff --git a/files/el/web/index.html b/files/el/web/index.html deleted file mode 100644 index c3027373cc..0000000000 --- a/files/el/web/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Web technology for developers -slug: Web -tags: - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web ---- -<p>The open Web presents incredible opportunities for developers. To take full advantage of these technologies, you need to know how to use them. Below you'll find links to our Web technology documentation.</p> - - -<div class="row topicpage-table"> - <div class="section"> - <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Documentation for Web developers</h2> - <dl> - <dt> - <a href="/en-US/docs/Web/Reference">Web Developer Reference</a></dt> - <dd> - A list of all references for Web technologies, including those for HTML, CSS, and so on.</dd> - <dt> - <a href="/en-US/docs/Web/Guide">Web Developer Guide</a></dt> - <dd> - The Web Developer Guide provides useful how-to content to help you actually use Web technologies to do what you want or need to do.</dd> - <dt> - <a href="/en-US/docs/Web/Tutorials">Tutorials for Web developers</a></dt> - <dd> - A list of tutorials to take you step-by-step through learning APIs, technologies, or broad topic areas.</dd> - <dt> - <a href="/en-US/docs/Web/Apps">Developing Web applications</a></dt> - <dd> - Documentation for Web application developers; Web apps are true write-once, deploy anywhere apps for mobile, desktop, and Firefox OS.</dd> - <dt> - <a href="/en-US/docs/Code_snippets">Code snippets</a></dt> - <dd> - This is a quick list of useful code snippets (small code samples) available for developers of extensions for the various Mozilla applications. Many of these samples can also be used in <a href="/en-US/docs/XULRunner">XULRunner</a> applications, as well as in actual Mozilla code itself.</dd> - </dl> - <p><span class="alllinks"><a href="/en-US/docs/tag/Web">View All...</a></span></p> - </div> - <div class="section"> - <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">Web technology references</h2> - <dl> - <dt> - <a href="/en-US/docs/Web/API">Web APIs</a></dt> - <dd> - Reference material for each of the interfaces that comprise the Web's APIs, including the DOM and all of the related APIs and interfaces you can use to build Web content and apps.</dd> - <dt> - <a href="/en-US/docs/Web/HTML">HTML</a></dt> - <dd> - HyperText Markup Language is the language used to describe and define the content of a Web page.</dd> - <dt> - <a href="/en-US/docs/Web/CSS">CSS</a></dt> - <dd> - Cascading Style Sheets are used to describe the appearance of Web content.</dd> - <dt> - <a href="/en-US/docs/SVG">SVG</a></dt> - <dd> - Scalable Vector Graphics let you describe images as sets of vectors and shapes in order to allow them to scale smoothly regardless of the size at which they're drawn.</dd> - <dt> - <a href="/en-US/docs/Web/MathML">MathML</a></dt> - <dd> - The Mathematical Markup Language makes it possible to display complex mathematical equations and syntax.</dd> - </dl> - </div> -</div> - - -<h3 id="Temporary" name="Temporary">Temporary</h3> -<p>The stuff below here is temporary to help keep track of things while organization work is ongoing. Pay it no mind.</p> - -<div>{{ListSubpages}}</div> diff --git a/files/el/web/javascript/index.html b/files/el/web/javascript/index.html deleted file mode 100644 index fbe8c790b4..0000000000 --- a/files/el/web/javascript/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: JavaScript -slug: Web/JavaScript -translation_of: Web/JavaScript ---- -<div>{{JsSidebar}}</div> - -<p class="summary"><strong>Η JavaScript</strong><sup>®</sup> (συντομογραφία <strong>JS</strong>) είναι μια αντικειμενοστρεφής, ελαφριά γλώσσα προγραμματισμού που δεν χρειάζεται μεταγλώτισση (compailation), με <a href="https://en.wikipedia.org/wiki/First-class_functions" title="https://en.wikipedia.org/wiki/First-class_functions">πρώτης κατηγορίας λειτουργίες</a>. Ενώ είναι κυρίως γνωστή ως γλώσσα σενάριου (scripting language) για ιστοσελίδες, ωστόσο <a href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_web_pages">χρησιμοποιείται σε πολλά περιβάλλοντα χωρίς την χρήση προγράμματος περιήγησης (browser)</a> όπως <a class="external" href="https://nodejs.org/">node.js</a> ή <a href="https://couchdb.apache.org/">Apache CouchDB</a>. Πρόκειται για μια <a href="https://en.wikipedia.org/wiki/Prototype-based_programming">πρωτότυπη</a> , πολλαπλών παραδείγματων scripting γλώσσα προγραμματισμού που είναι δυναμική, και υποστηρίζει αντικειμενοστρεφή, επιβλητικό, και λειτουργικό στυλ του προγραμματισμού. Διαβάστε περισσότερα <a href="/en-US/docs/Web/JavaScript/About_JavaScript">σχετικά με την JavaScript</a>.</p> - -<p>Αυτό το τμήμα της ιστοσελίδας είναι αφιερωμένο στην ίδια τη γλώσσα JavaScript, και όχι στα μέρη που δεν είναι ειδικά για ιστοσελίδες ή άλλα περιβάλλοντα υποδοχής. Για πληροφορίες σχετικά με {{Glossary("API","APIs")}} ειδικά για ιστοσελίδες, παρακαλούμε δείτε τα <a href="/en-US/docs/Web/API">Web APIs</a> και <a href="/en-US/docs/Glossary/DOM">DOM</a>.</p> - -<p>Το πρότυπο της JavaScript ονομάζεται <a href="/en-US/docs/JavaScript/Language_Resources">ECMAScript</a>. Από το 2012, όλοι τα σύγχρονα προγράμματα περιήγησης (browsers) υποστηρίζουν πλήρως την ECMAScript 5.1. Παλαιότεροι φυλλομετρητές υποστηρίζουν τουλάχιστον την ECMAScript 3. Στις 17 Ιουνίου του 2015, δημοσιεύθηκε η 6η κύρια έκδοση της ECMAScript. Επίσημα η έκδοση αυτή ονομάζεται ECMAScript 2015, αλλά συχνά αναφέρεται και ως ECMAScript 6 ή ES6. Το εγχειρίδιο που παρουσιάζεται καλύπτει την ECMAScript 6 ενώ έχει ήδη ξεκινήσει η διαδικασία με τα πρώτα τμήματα της ECMAScript 7.</p> - -<p>Δεν πρέπει να μπερδεύουμε την JavaScript με την <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">Java programming language</a>. Η Java είναι εμπορικά κατοχυρωμένη από την Oracle στις Η.Π.Α. και σε άλλες χώρες. Ωστόσο οι δύο αυτές γλώσσες προγραμματισμού έχουν διαφορετική σύνταξη, φρασεολογία και χρήσεις.</p> - -<div class="column-container"> -<div class="column-half"> -<h2 id="ΜΑΘΗΜΑΤΑ">ΜΑΘΗΜΑΤΑ</h2> - -<p>Μάθε πως να προγραμματίζεις με την JavaScript με οδηγίες και μαθήματα.</p> - -<h3 id="Για_αρχάριους">Για αρχάριους</h3> - -<p>Περιηγηθείτε στην ενότητα <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">Περιοχή μαθημάτων της Javascript</a> αν θέλετε να μάθετε Javascript αλλά δεν έχετε προηγούμενη εμπειρία. Οι πλήρεις ενότητες που παρέχονται είναι οι εξής :</p> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">JavaScript τα πρώτα βήματα</a></dt> - <dd>Απαντά σε ορισμένα θεμελιώδη ερωτήματα όπως τι είναι το JavaScript, με τι μοιάζει, και τι μπορεί να κάνει καθώς και τα βασικά χαρακτηριστικά της Javascript όπως μεταβλητές, συμβολοσειρές, αριθμούς και πίνακες.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Δομικά στοιχεία της JavaScript</a></dt> - <dd>Συνεχίζει την κάλυψη των βασικών θεμελιωδών χαρακτηριστικών της Javascript στρέφοντας την προσοχή μας σε κοινούς τύπους κομματιών κώδικα, όπως οι δηλώσεις συνθήκης (conditional statements), βρόγχους (loops), λειτουργίες (functions) και γεγονότα (events).</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">Παρουσίαση αντικειμένων (objects) της JavaScript</a></dt> - <dd>Είναι πολύ σημαντικό να κατανοήσετε την αντικειμενοστραφή (object-oriented) φύση της JavaScript, αν θέλετε να προχωρήσετε περισσότερο με τις γνώσεις σας στη γλώσσα και να γράφετε πιο αποδοτικό κώδικα, γι' αυτό παρέχεται αυτή την ενότητα για να σας βοηθήσει.</dd> -</dl> - -<h3 id="Οδηγός_Javascript">Οδηγός Javascript</h3> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">Οδηγός Javascript</a></dt> - <dd>Ένας αναλυτικότερος οδηγός για την Javascript για εκείνους που έχουν προηγούμενη εμπειρία είτε στην Javascript είτε σε κάποια άλλη γλώσσα προγραματισμού.</dd> -</dl> - -<h3 id="Μεσαίο_επίπεδο"><span style="">Μεσαίο επίπεδο</span></h3> - -<ul> - <li>αυστηρή ισότητα χρησιμοποιώντας ===</li> - <li> χαλαρή ισότητα χρησιμοποιώντας ==</li> - <li>την μέθοδο <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></li> -</ul> - -<dl> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Εισαγωγή ξανά στην JavaScript</a></dt> - <dd><span style="font-weight: normal;">Επισκόπηση για εκείνους που νομίζουν ότι γνωρίζουν σχετικά με την Javascript.</span></dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Δόμες δεδομένων της JavaScript</a></dt> - <dd>Επισκόπηση των διαθέσιμων δομών δεδομένων στην JavaScript.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Συγκρίσεις ισότητας και ομοιότητας</a></dt> - <dd>Η Javascript προσφέρει τρεις διαφορετικές λειτουργίες σύγκρισης αξίας : </dd> -</dl> - -<h3 id="Για_προχωρημένους">Για προχωρημένους</h3> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Κληρονομικότητα και η αλυσίδα των πρωτότυπων</a></dt> - <dd>Επεξήγηση της ευρέως παρεξηγημένης και υποτιμημένης κληρονομικότητας που βασίζεται στα πρωτότυπα.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Αυστηρή λειτουργία</a></dt> - <dd>Η αυστηρή λειτουργία ορίζει ότι δεν μπορείτε να χρησιμοποιήσετε οποιαδήποτε μεταβλητή πριν την αρχικοποίηση της. Πρόκειται για μια περιορισμένη παραλλαγή του ECMAScript 5 για την ταχύτερη απόδοση και τον ευκολότερο εντοπισμό σφαλμάτων.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></dt> - <dd>JavaScript typed arrays provide a mechanism for accessing raw binary data.</dd> - <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Διαχείρηση Μνήμης</a></dt> - <dd>Κύκλος ζωής μνήμης και συλλογή απορριμάτων στην JavaScript.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/EventLoop">Μοντέλο συγχρονισμού και Βρόγχος Γεγονότων.</a></dt> - <dd>Η JavaScript έχει ένα μοντέλο συγχρονισμού βασισμένο σε έναν "βρόγχο (Λούπα) γεγονότος".</dd> -</dl> -</div> - -<div class="column-half"> -<h2 id="Reference">Reference</h2> - -<p>Browse the complete <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> documentation.</p> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Standard objects</a></dt> - <dd>Εξοικιωθείτε με τα standard built-in αντικείμενα {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}} , {{jsxref("WeakSet")}}, και άλλα.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Expressions and operators</a></dt> - <dd>Learn more about the behavior of JavaScript's operators {{jsxref("Operators/instanceof", "instanceof")}}, {{jsxref("Operators/typeof", "typeof")}}, {{jsxref("Operators/new", "new")}}, {{jsxref("Operators/this", "this")}}, the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">operator precedence</a>, and more.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Statements and declarations</a></dt> - <dd>Learn how {{jsxref("Statements/do...while", "do-while")}}, {{jsxref("Statements/for...in", "for-in")}}, {{jsxref("Statements/for...of", "for-of")}}, {{jsxref("Statements/try...catch", "try-catch")}}, {{jsxref("Statements/let", "let")}}, {{jsxref("Statements/var", "var")}}, {{jsxref("Statements/const", "const")}}, {{jsxref("Statements/if...else", "if-else")}}, {{jsxref("Statements/switch", "switch")}}, and more JavaScript statements and keywords work.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></dt> - <dd>Learn how to work with JavaScript's functions to develop your applications.</dd> -</dl> - -<h2 id="Tools_resources">Tools & resources</h2> - -<p>Helpful tools while writing and debugging your JavaScript code.</p> - -<dl> - <dt><a href="/en-US/docs/Tools">Firefox Developer Tools</a></dt> - <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, and more.</dd> - <dt><a class="external" href="http://www.getfirebug.com/">Firebug</a></dt> - <dd>Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Shells</a></dt> - <dd>A JavaScript shell allows you to quickly test snippets of JavaScript code.</dd> - <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> - <dd> - <p>Collaboration made easy.</p> - </dd> - <dt><a href="http://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> - <dd>Stack Overflow questions tagged with "JavaScript".</dd> - <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript versions and release notes</a></dt> - <dd>Browse JavaScript's feature history and implementation status.</dd> -</dl> -</div> -</div> diff --git a/files/el/web/javascript/reference/functions/default_parameters/index.html b/files/el/web/javascript/reference/functions/default_parameters/index.html deleted file mode 100644 index e3229bc633..0000000000 --- a/files/el/web/javascript/reference/functions/default_parameters/index.html +++ /dev/null @@ -1,222 +0,0 @@ ---- -title: Προεπιλεγμένες παράμετροι -slug: Web/JavaScript/Reference/Functions/Default_parameters -tags: - - ECMAScript 2015 - - JavaScript - - Συναρτήσεις -translation_of: Web/JavaScript/Reference/Functions/Default_parameters -original_slug: Web/JavaScript/Reference/Functions/Προεπιλεγμένες_παράμετροι ---- -<div>{{jsSidebar("Συναρτήσεις")}}</div> - -<p>Οι<strong> προεπιλεγμένες παράμετροι συναρτήσεων</strong> επιτρέπουν την αρχικοποίηση των παραμέτρων με προεπιλεγμένες τιμες, αν η τιμή λείπει ή ειναι τύπου <code>undefined</code>.</p> - -<div>{{EmbedInteractiveExample("pages/js/functions-default.html")}}</div> - -<p class="hidden">Ο πηγαίος κώδικας αυτού του διαδραστικού παραδείγματος είναι αποθηκευμένος σε ενα GitHub αποθετήριο. Αν θα θέλατε να συμβάλλετε στο έργο των διαδραστικών παραδειγμάτων, παρακαλώ κάντε clone το <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> και στείλτε μας ενα pull request.</p> - -<h2 id="Σύνταξη">Σύνταξη</h2> - -<pre class="syntaxbox">function [<em>όνομα</em>]([<em>παράμ1</em>[ = προεπιλεγμένηΤιμή1 ][, ..., <em>παράμN</em>[ = προεπιλεγμένηΤιμήN ]]]) {<em>δηλώσεις</em> -} -</pre> - -<h2 id="Περιγραφή">Περιγραφή</h2> - -<p>Στην JavaScript, οι προεπιλεγμένες παράμετροι των συναρτήσεων ειναι τύπου <code>{{jsxref("undefined")}}</code>. Ωστόσο, σε κάποιες καταστάσεις μπορεί να χρειαστεί να θέσουμε μια διαφορετική προεπιλεγμένη τιμή. Σε αυτή την περίπτωση μπορούν βοηθήσουν οι προεπιλεγμένες παράμετροι.</p> - -<p>Στο παρελθόν, η γενική στρατηγική ορισμού προεπιλεγμένων τιμών, ηταν ο έλεγχος των τιμών στο σώμα την συνάρτησης και η εκχώρηση τιμής στην περίπτωση που ήταν τύπου <code>undefined</code>. Αν στο επόμενο παράδειγμα, δεν δοθεί τιμή για την <code>b</code> οταν κλήθει η συναρτηση, η τιμή της θα ήταν <code>undefined</code> κατα την εκτίμηση του <code>a*b</code> και η κλήση της <code>multiply</code> θα επέστρεφε <code>NaN</code>. Ωστόσο, αυτό αποτρέπεται στην δεύτερη γραμμή του παραδείγματος:</p> - -<pre class="brush: js">function multiply(a, b) { - b = (typeof b !== 'undefined') ? b : 1; - return a * b; -} - -multiply(5, 2); // 10 -multiply(5, 1); // 5 -multiply(5); // 5 -</pre> - -<p>Με τις προεπιλεγμένες παραμέτρους στην ES2015, ο έλεγχος στο σώμα της συνάρτησης δεν ειναι πια απαραίτητος. Τωρα μπορούμε απλα να θέσουμε <code>1</code> ως προεπιλεγμένη τιμή της <code>b</code> στην κεφαλή της συνάρτησης:</p> - -<pre class="brush: js">function multiply(a, b = 1) { - return a * b; -} - -multiply(5, 2); // 10 -multiply(5, 1); // 5 -multiply(5); // 5 -</pre> - -<h2 id="Παραδείγματα">Παραδείγματα</h2> - -<h3 id="Περνώντας_undefined_σε_αντίθεση_με_άλλες_falsy_τιμες">Περνώντας <code>undefined</code> σε αντίθεση με άλλες falsy τιμες</h3> - -<p>Στην δεύτερη κλήση εδω, ακόμα και αν η δεύτερη παράμετρος είναι ρητά <code>undefined</code> (αλλά οχι <code>null</code> ή άλλες <em>falsy τιμές</em>) κατα την κλήση, η τιμή της παραμέτρου <code>num</code> είναι η προεπιλεγμένη.</p> - -<pre class="brush: js">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) -</pre> - -<h3 id="Εκτίμηση_κατα_την_κλήση">Εκτίμηση κατα την κλήση</h3> - -<p>Η προεπιλεγμένη παράμετρος εκτιμάται κατα την κλήση, οπότε αντίθετα με την Python για παραδειγμα, ενα νεο αντικείμενο δημιουργείται καθε φορά που καλείται η συνάρτηση.</p> - -<pre class="brush: js">function append(value, array = []) { - array.push(value); - return array; -} - -append(1); //[1] -append(2); //[2], όχι [1, 2] - -</pre> - -<p>Αυτό εφαρμόζεται ακομα και στις συναρτήσεις και τις μεταβλητές:</p> - -<pre class="brush: js">function callSomething(thing = something()) { - return thing; -} - -function something() { - return 'sth'; -} - -callSomething(); //sth</pre> - -<h3 id="Οι_προεπιλεγμένες_παράμετροι_ειναι_διαθέσιμες_σε_επόμενες_προεπιλεγμένες_παραμέτρους">Οι προεπιλεγμένες παράμετροι ειναι διαθέσιμες σε επόμενες προεπιλεγμένες παραμέτρους</h3> - -<p>Οι παράμετροι που εχουν ήδη συναντηθεί είναι διαθέσιμες και στις επόμενες προεπιλεγμένες παραμέτρους:</p> - -<pre class="brush: js">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.') -</pre> - -<p>Αυτή η λειτουργικότητα υπολογίζεται σταδιακά. Το επόμενο παράδειγμα επιδεικνύει το πως χειρίζονται άλλες ακραίες περιπτώσεις.</p> - -<pre class="brush: js">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, "=^_^="] -</pre> - -<h3 id="Συναρτήσεις_που_ορίζονται_μεσα_στο_σώμα_της_συνάρτησης">Συναρτήσεις που ορίζονται μεσα στο σώμα της συνάρτησης</h3> - -<p>Εισάχθηκε στο Gecko 33 {{geckoRelease(33)}}. Οι συναρτήσεις που ορίζονται στο σώμα της συνάρτησης δεν μπορούν να αναφέρονται στίς προεπιλεγμένες παραμέτρους και εμφανίζουν ενα {{jsxref("ReferenceError")}} (αυτή τη στιγμή {{jsxref("TypeError")}} στο SpiderMonkey, βλέπε {{bug(1022967)}}). Οι προεπιλεγμένες παράμετροι εκτελούνται παντα πρώτες και στην συνέχεια εκτελούνται οι δηλώσεις που βρίσκονται στο σώμα της συνάρτησης.</p> - -<pre class="brush: js">// Doesn't work! Throws ReferenceError. -function f(a = go()) { - function go() { return ':P'; } -} -</pre> - -<h3 id="Παράμετροι_χωρίς_προεπιλεγμένες_τιμες_μετα_τις_προεπιλεγμενες_παραμέτρους">Παράμετροι χωρίς προεπιλεγμένες τιμες μετα τις προεπιλεγμενες παραμέτρους</h3> - -<p>Πριν απο το Gecko 26 {{geckoRelease(26)}}, ο ακόλουθος κώδικας προκαλούσε ένα {{jsxref("SyntaxError")}}. Αυτό επιδιορθώθηκε στο {{bug(777060)}} και έχει την αναμενόμενη λειτουργία σε επόμενες εκδόσεις. Οι παράμετροι ορίζονται ακόμα απο τα αριστερά στα δεξιά, αντικαθιστώντας προεπιλεγμένες παραμέτρους ακόμα και αν υπάρχουν επόμενες παράμετροι χωρίς προεπιλεγμένες τιμές.</p> - -<pre class="brush: js">function f(x = 1, y) { - return [x, y]; -} - -f(); // [1, undefined] -f(2); // [2, undefined] -</pre> - -<h3 id="Αποδόμηση_παραμέτρων_στον_ορισμό_προεπιλεγμένων_τιμών">Αποδόμηση παραμέτρων στον ορισμό προεπιλεγμένων τιμών</h3> - -<p>Στον ορισμό προεπιλεγμένων παραμέτρων μπορεί να χρησιμοποιηθεί <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">αποδομημένη ανάθεση</a>:</p> - -<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { - return x + y + z; -} - -f(); // 6</pre> - -<h2 id="Προδιαγραφές">Προδιαγραφές</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Προδιαγραφή</th> - <th scope="col">Κατάσταση</th> - <th scope="col">Σχόλιο</th> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-function-definitions', 'Function Definitions')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Αρχικός ορισμός.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function Definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Συμβατότητα_περιηγητών">Συμβατότητα περιηγητών</h2> - -<div> -<div class="hidden">Ο πίνακας συμβατότητας σε αυτή τη σελίδα παράγεται απο δομημένα δεδομένα. Αν θα θέλατε να συμβάλλετε στα δεδομένα, παρακαλώ κάντε checkout το <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> και στείλτε μας ένα pull request.</div> - -<p>{{Compat("javascript.functions.default_parameters")}}</p> -</div> - -<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> - -<ul> - <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Αρχική πρόταση στο ecmascript.org</a></li> -</ul> diff --git a/files/el/web/javascript/reference/functions/index.html b/files/el/web/javascript/reference/functions/index.html deleted file mode 100644 index a18367e482..0000000000 --- a/files/el/web/javascript/reference/functions/index.html +++ /dev/null @@ -1,596 +0,0 @@ ---- -title: Functions -slug: Web/JavaScript/Reference/Functions -tags: - - Constructor - - Function - - Functions - - JavaScript - - NeedsTranslation - - Parameter - - TopicStub - - parameters -translation_of: Web/JavaScript/Reference/Functions ---- -<div>{{jsSidebar("Functions")}}</div> - -<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> - -<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> - -<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> - -<h2 id="Description">Description</h2> - -<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> - -<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> - -<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> - -<pre class="brush: js">/* Declare the function 'myFunc' */ -function myFunc(theObject) { - theObject.brand = "Toyota"; -} - -/* - * Declare variable 'mycar'; - * create and initialize a new Object; - * assign reference to it to 'mycar' - */ -var mycar = { - brand: "Honda", - model: "Accord", - year: 1998 -}; - -/* Logs 'Honda' */ -console.log(mycar.brand); - -/* Pass object reference to the function */ -myFunc(mycar); - -/* - * Logs 'Toyota' as the value of the 'brand' property - * of the object, as changed to by the function. - */ -console.log(mycar.brand); -</pre> - -<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> - -<h2 id="Defining_functions">Defining functions</h2> - -<p>There are several ways to define functions:</p> - -<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> - -<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> - -<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { - <em>statements</em> -} -</pre> - -<dl> - <dt><code>name</code></dt> - <dd>The function name.</dd> -</dl> - -<dl> - <dt><code>param</code></dt> - <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> -</dl> - -<dl> - <dt><code>statements</code></dt> - <dd>The statements comprising the body of the function.</dd> -</dl> - -<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> - -<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> - -<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { - <em>statements</em> -} -</pre> - -<dl> - <dt><code>name</code></dt> - <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> -</dl> - -<dl> - <dt><code>param</code></dt> - <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> - <dt><code>statements</code></dt> - <dd>The statements comprising the body of the function.</dd> -</dl> - -<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> - -<pre class="brush: js">var myFunction = function() { - statements -}</pre> - -<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> - -<pre class="brush: js">var myFunction = function namedFunction(){ - statements -} -</pre> - -<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> - -<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> - -<p>When functions are used only once, a common pattern is an <strong>IIFE (<em>Immediately Invokable Function Expression</em>)</strong>.</p> - -<pre class="brush: js">(function() { - statements -})();</pre> - -<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> - -<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> - -<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> - -<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { - <em>statements</em> -} -</pre> - -<dl> - <dt><code>name</code></dt> - <dd>The function name.</dd> -</dl> - -<dl> - <dt><code>param</code></dt> - <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> -</dl> - -<dl> - <dt><code>statements</code></dt> - <dd>The statements comprising the body of the function.</dd> -</dl> - -<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> - -<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> - -<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { - <em>statements</em> -} -</pre> - -<dl> - <dt><code>name</code></dt> - <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> -</dl> - -<dl> - <dt><code>param</code></dt> - <dd>The name of an argument to be passed to the function. A function can have up to 255 arguments.</dd> - <dt><code>statements</code></dt> - <dd>The statements comprising the body of the function.</dd> -</dl> - -<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> - -<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> - -<pre class="syntaxbox">([param[, param]]) => { - statements -} - -param => expression -</pre> - -<dl> - <dt><code>param</code></dt> - <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> - <dt><code>statements or expression</code></dt> - <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> -</dl> - -<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> - -<div class="note"> -<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> -</div> - -<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> - -<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) -</pre> - -<dl> - <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> - <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> -</dl> - -<dl> - <dt><code>functionBody</code></dt> - <dd>A string containing the JavaScript statements comprising the function body.</dd> -</dl> - -<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> - -<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> - -<div class="note"> -<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> -</div> - -<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> - -<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) -</pre> - -<dl> - <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> - <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> -</dl> - -<dl> - <dt><code>functionBody</code></dt> - <dd>A string containing the JavaScript statements comprising the function definition.</dd> -</dl> - -<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> - -<h2 id="Function_parameters">Function parameters</h2> - -<h3 id="Default_parameters">Default parameters</h3> - -<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> - -<h3 id="Rest_parameters">Rest parameters</h3> - -<p>The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> - -<h2 id="The_arguments_object">The <code>arguments</code> object</h2> - -<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> - -<ul> - <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> - <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> - <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> - <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> -</ul> - -<h2 id="Defining_method_functions">Defining method functions</h2> - -<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> - -<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> - -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> - <dd> - <p>Binds an object property to a function that will be called when that property is looked up.</p> - </dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> - <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> -</dl> - -<h3 id="Method_definition_syntax">Method definition syntax</h3> - -<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> - -<pre class="brush: js">var obj = { - foo() {}, - bar() {} -};</pre> - -<h2 id="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> - -<p>Compare the following:</p> - -<p>A function defined with the <code>Function</code> <em>constructor</em> assigned to the variable <code>multiply:</code></p> - -<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> - -<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> - -<pre class="brush: js">function multiply(x, y) { - return x * y; -} // there is no semicolon here -</pre> - -<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> - -<pre class="brush: js">var multiply = function(x, y) { - return x * y; -}; -</pre> - -<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> - -<pre class="brush: js">var multiply = function func_name(x, y) { - return x * y; -}; -</pre> - -<h3 id="Differences">Differences</h3> - -<p>All do approximately the same thing, with a few subtle differences:</p> - -<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> - -<pre class="brush: js">var y = function x() {}; -alert(x); // throws an error -</pre> - -<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> - -<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> - -<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> - -<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> - -<pre class="brush: js">function anonymous() { -} -</pre> - -<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> - -<pre class="brush: js">var foo = new Function("alert(anonymous);"); -foo(); -</pre> - -<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> - -<pre class="brush: js">foo(); // alerts FOO! -function foo() { - alert('FOO!'); -} -</pre> - -<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> - -<pre class="brush: js">/* - * Declare and initialize a variable 'p' (global) - * and a function 'myFunc' (to change the scope) inside which - * declare a varible with same name 'p' (current) and - * define three functions using three different ways:- - * 1. function declaration - * 2. function expression - * 3. function constructor - * each of which will log 'p' - */ -var p = 5; -function myFunc() { - var p = 9; - - function decl() { - console.log(p); - } - var expr = function() { - console.log(p); - }; - var cons = new Function('\tconsole.log(p);'); - - decl(); - expr(); - cons(); -} -myFunc(); - -/* - * Logs:- - * 9 - for 'decl' by function declaration (current scope) - * 9 - for 'expr' by function expression (current scope) - * 5 - for 'cons' by Function constructor (global scope) - */ -</pre> - -<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> - -<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> - -<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); -foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> - -<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> - -<ul> - <li>becomes part of an expression</li> - <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> -</ul> - -<pre class="brush: js">var x = 0; // source element -if (x === 0) { // source element - x = 10; // not a source element - function boo() {} // not a source element -} -function foo() { // source element - var y = 20; // source element - function bar() {} // source element - while (y === 10) { // source element - function blah() {} // not a source element - y++; // not a source element - } -} -</pre> - -<h3 id="Examples">Examples</h3> - -<pre class="brush: js">// function declaration -function foo() {} - -// function expression -(function bar() {}) - -// function expression -x = function hello() {} - - -if (x) { - // function expression - function world() {} -} - - -// function declaration -function a() { - // function declaration - function b() {} - if (0) { - // function expression - function c() {} - } -} -</pre> - -<h2 id="Block-level_functions">Block-level functions</h2> - -<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> - -<pre class="brush: js">'use strict'; - -function f() { - return 1; -} - -{ - function f() { - return 2; - } -} - -f() === 1; // true - -// f() === 2 in non-strict mode -</pre> - -<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> - -<p>In a word: Don't.</p> - -<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> - -<pre class="brush: js">if (shouldDefineZero) { - function zero() { // DANGER: compatibility risk - console.log("This is zero."); - } -} -</pre> - -<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> - -<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> - -<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> - -<pre class="brush: js">var zero; -if (shouldDefineZero) { - zero = function() { - console.log("This is zero."); - }; -} -</pre> - -<h2 id="Examples_2">Examples</h2> - -<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> - -<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> - -<pre class="brush: js">// This function returns a string padded with leading zeros -function padZeros(num, totalLen) { - var numStr = num.toString(); // Initialize return value as string - var numZeros = totalLen - numStr.length; // Calculate no. of zeros - for (var i = 1; i <= numZeros; i++) { - numStr = "0" + numStr; - } - return numStr; -} -</pre> - -<p>The following statements call the padZeros function.</p> - -<pre class="brush: js">var result; -result = padZeros(42,4); // returns "0042" -result = padZeros(42,2); // returns "42" -result = padZeros(5,4); // returns "0005" -</pre> - -<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> - -<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise, some other action is taken.</p> - -<pre class="brush: js"> if ('function' === typeof window.noFunc) { - // use noFunc() - } else { - // do something else - } -</pre> - -<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition. Implemented in JavaScript 1.0</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("javascript.functions")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Statements/function", "function statement")}}</li> - <li>{{jsxref("Operators/function", "function expression")}}</li> - <li>{{jsxref("Statements/function*", "function* statement")}}</li> - <li>{{jsxref("Operators/function*", "function* expression")}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> - <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> - <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> - <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> - <li>{{jsxref("Functions/get", "getter")}}</li> - <li>{{jsxref("Functions/set", "setter")}}</li> - <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> -</ul> diff --git a/files/el/web/javascript/reference/global_objects/index.html b/files/el/web/javascript/reference/global_objects/index.html deleted file mode 100644 index f59e3e8592..0000000000 --- a/files/el/web/javascript/reference/global_objects/index.html +++ /dev/null @@ -1,193 +0,0 @@ ---- -title: Standard built-in objects -slug: Web/JavaScript/Reference/Global_Objects -tags: - - JavaScript - - NeedsTranslation - - Reference - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects ---- -<div>{{jsSidebar("Objects")}}</div> - -<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> - -<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong>. The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope (but only if ECMAScript 5 strict mode is not used; in that case it returns {{jsxref("undefined")}}). In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> - -<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> - -<h2 id="Standard_objects_by_category">Standard objects by category</h2> - -<h3 id="Value_properties">Value properties</h3> - -<p>These global properties return a simple value; they have no properties or methods.</p> - -<ul> - <li>{{jsxref("Infinity")}}</li> - <li>{{jsxref("NaN")}}</li> - <li>{{jsxref("undefined")}}</li> - <li>{{jsxref("null")}} literal</li> -</ul> - -<h3 id="Function_properties">Function properties</h3> - -<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> - -<ul> - <li>{{jsxref("Global_Objects/eval", "eval()")}}</li> - <li>{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}</li> - <li>{{jsxref("Global_Objects/isFinite", "isFinite()")}}</li> - <li>{{jsxref("Global_Objects/isNaN", "isNaN()")}}</li> - <li>{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}</li> - <li>{{jsxref("Global_Objects/parseInt", "parseInt()")}}</li> - <li>{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}</li> - <li>{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> - <li>{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}</li> - <li>{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> - <li>{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}</li> - <li>{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}</li> -</ul> - -<h3 id="Fundamental_objects">Fundamental objects</h3> - -<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> - -<ul> - <li>{{jsxref("Object")}}</li> - <li>{{jsxref("Function")}}</li> - <li>{{jsxref("Boolean")}}</li> - <li>{{jsxref("Symbol")}}</li> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("EvalError")}}</li> - <li>{{jsxref("InternalError")}}</li> - <li>{{jsxref("RangeError")}}</li> - <li>{{jsxref("ReferenceError")}}</li> - <li>{{jsxref("SyntaxError")}}</li> - <li>{{jsxref("TypeError")}}</li> - <li>{{jsxref("URIError")}}</li> -</ul> - -<h3 id="Numbers_and_dates">Numbers and dates</h3> - -<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> - -<ul> - <li>{{jsxref("Number")}}</li> - <li>{{jsxref("Math")}}</li> - <li>{{jsxref("Date")}}</li> -</ul> - -<h3 id="Text_processing">Text processing</h3> - -<p>These objects represent strings and support manipulating them.</p> - -<ul> - <li>{{jsxref("String")}}</li> - <li>{{jsxref("RegExp")}}</li> -</ul> - -<h3 id="Indexed_collections">Indexed collections</h3> - -<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> - -<ul> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Int8Array")}}</li> - <li>{{jsxref("Uint8Array")}}</li> - <li>{{jsxref("Uint8ClampedArray")}}</li> - <li>{{jsxref("Int16Array")}}</li> - <li>{{jsxref("Uint16Array")}}</li> - <li>{{jsxref("Int32Array")}}</li> - <li>{{jsxref("Uint32Array")}}</li> - <li>{{jsxref("Float32Array")}}</li> - <li>{{jsxref("Float64Array")}}</li> -</ul> - -<h3 id="Keyed_collections">Keyed collections</h3> - -<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> - -<ul> - <li>{{jsxref("Map")}}</li> - <li>{{jsxref("Set")}}</li> - <li>{{jsxref("WeakMap")}}</li> - <li>{{jsxref("WeakSet")}}</li> -</ul> - -<h3 id="Vector_collections">Vector collections</h3> - -<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> - -<ul> - <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> - <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> - <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> - <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> - <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> - <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</li> - <li>{{jsxref("Uint8x16", "SIMD.Uint8x16")}} {{experimental_inline}}</li> - <li>{{jsxref("Uint16x8", "SIMD.Uint16x8")}} {{experimental_inline}}</li> - <li>{{jsxref("Uint32x4", "SIMD.Uint32x4")}} {{experimental_inline}}</li> - <li>{{jsxref("Bool8x16", "SIMD.Bool8x16")}} {{experimental_inline}}</li> - <li>{{jsxref("Bool16x8", "SIMD.Bool16x8")}} {{experimental_inline}}</li> - <li>{{jsxref("Bool32x4", "SIMD.Bool32x4")}} {{experimental_inline}}</li> - <li>{{jsxref("Bool64x2", "SIMD.Bool64x2")}} {{experimental_inline}}</li> -</ul> - -<h3 id="Structured_data">Structured data</h3> - -<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> - -<ul> - <li>{{jsxref("ArrayBuffer")}}</li> - <li>{{jsxref("SharedArrayBuffer")}} {{experimental_inline}}</li> - <li>{{jsxref("Atomics")}} {{experimental_inline}}</li> - <li>{{jsxref("DataView")}}</li> - <li>{{jsxref("JSON")}}</li> -</ul> - -<h3 id="Control_abstraction_objects">Control abstraction objects</h3> - -<ul> - <li>{{jsxref("Promise")}}</li> - <li>{{jsxref("Generator")}}</li> - <li>{{jsxref("GeneratorFunction")}}</li> - <li>{{experimental_inline}} {{jsxref("AsyncFunction")}}</li> -</ul> - -<h3 id="Reflection">Reflection</h3> - -<ul> - <li>{{jsxref("Reflect")}}</li> - <li>{{jsxref("Proxy")}}</li> -</ul> - -<h3 id="Internationalization">Internationalization</h3> - -<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> - -<ul> - <li>{{jsxref("Intl")}}</li> - <li>{{jsxref("Global_Objects/Collator", "Intl.Collator")}}</li> - <li>{{jsxref("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> - <li>{{jsxref("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> -</ul> - -<h3 id="WebAssembly">WebAssembly</h3> - -<ul> - <li>{{jsxref("WebAssembly")}}</li> - <li>{{jsxref("WebAssembly.Module")}}</li> - <li>{{jsxref("WebAssembly.Instance")}}</li> - <li>{{jsxref("WebAssembly.Memory")}}</li> - <li>{{jsxref("WebAssembly.Table")}}</li> - <li>{{jsxref("WebAssembly.CompileError")}}</li> - <li>{{jsxref("WebAssembly.LinkError")}}</li> - <li>{{jsxref("WebAssembly.RuntimeError")}}</li> -</ul> - -<h3 id="Other">Other</h3> - -<ul> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> -</ul> diff --git a/files/el/web/javascript/reference/index.html b/files/el/web/javascript/reference/index.html deleted file mode 100644 index 4205970b93..0000000000 --- a/files/el/web/javascript/reference/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: JavaScript reference -slug: Web/JavaScript/Reference -tags: - - JavaScript - - NeedsTranslation - - TopicStub - - 'l10n:priority' -translation_of: Web/JavaScript/Reference ---- -<div>{{JsSidebar}}</div> - -<p>This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more <a href="/en-US/docs/Web/JavaScript/Reference/About">about this reference</a>.</p> - -<h2 id="Global_Objects">Global Objects</h2> - -<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div> - -<h2 id="Statements">Statements</h2> - -<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> - -<h2 id="Expressions_and_operators">Expressions and operators</h2> - -<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> - -<h2 id="Functions">Functions</h2> - -<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> -</ul> - -<h2 id="Additional_reference_pages">Additional reference pages</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> -</ul> diff --git a/files/el/web/javascript/reference/operators/comma_operator/index.html b/files/el/web/javascript/reference/operators/comma_operator/index.html deleted file mode 100644 index 97e396cc1e..0000000000 --- a/files/el/web/javascript/reference/operators/comma_operator/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Τελεστής Κόμμα -slug: Web/JavaScript/Reference/Operators/Comma_Operator -tags: - - JavaScript - - Κόμμα - - Τελεστής - - Τελεστής Κόμμα -translation_of: Web/JavaScript/Reference/Operators/Comma_Operator ---- -<div>{{jsSidebar("Τελεστές")}}</div> - -<p>Ο<strong> τελεστής κόμμα</strong> αποτιμά κάθε τελεστέο του (από τα αριστερά προς τα δεξιά) και επιστρέφει τη τιμή του τελευταίου τελεστέου.</p> - -<h2 id="Σύνταξη">Σύνταξη</h2> - -<pre class="syntaxbox"><em>έκφραση1</em>, <em>έκφραση2, έκφραση3...</em></pre> - -<h2 id="Παράμετροι">Παράμετροι</h2> - -<dl> - <dt><code>έκφραση1</code>, <code>έκφραση2</code>, <code>έκφραση3...</code></dt> - <dd>Οποιαδήποτε έκφραση.</dd> -</dl> - -<h2 id="Περιγραφή">Περιγραφή</h2> - -<p>Μπορείτε να χρησιμοποιήσετε τον τελεστή κόμμα όποτε θέλετε να συμπεριλάβετε πολλαπλές εκφράσεις σε σημείο που απαιτείται μία έκφραση. Η πιο κοινή χρήση αυτού του τελεστή είναι η προμήθεια πολλαπλών παραμέτρων σε έναν <code>for</code> βρόχο.</p> - -<h2 id="Παραδείγματα">Παραδείγματα</h2> - -<p>Αν <code>a</code> είναι ένας διδιάστατος πίνακας με 10 στοιχεία σε κάθε πλευρά, ο ακόλουθος κώδικας χρησιμοποιεί τον τελεστή κόμμα για να αυξήσει δύο μεταβλητές με την μία.</p> - -<p>Ο ακόλουθος κώδικας εκτυπώνει τις τιμές των διαγώνιων στοιχείων του πίνακα:</p> - -<pre class="brush:js;highlight:[1]">for (var i = 0, j = 9; i <= 9; i++, j--) - console.log('a[' + i + '][' + j + '] = ' + a[i][j]);</pre> - -<p>Παρατηρήστε ότι το κόμμα στις αναθέσεις όπως στην <code>var</code> δήλωση μπορεί να μην έχει το κανονικό αποτέλεσμα του τελεστή κόμμα επειδή δεν υπάρχει μέσα σε έκφραση. Στο ακόλουθο παράδειγμα, το <code>a</code> παίρνει την τιμή του <code>b = 3</code> (η οποία είναι 3), αλλά η έκφραση <code>c = 4</code> επίσης αποτιμάται και το αποτέλεσμά της επιστρέφει στην κονσόλα (δηλαδή, 4). Αυτό οφείλεται στην <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">προτεραιότητα τελεστών και προσεταιριστικότητα</a>.</p> - -<pre class="brush: js">// Παρατηρήστε οτι τα παρακάτω δημιουργούν globals το οποίο απαγορεύεται στο strict mode. - -a = b = 3, c = 4; // Επιστρέφει 4 στην κονσόλα -console.log(a); // 3 (αριστερότερο) - -x = (y = 5, z = 6); // Επιστρέφει 6 στην κονσόλα -console.log(x); // 6 (δεξιότερο) -</pre> - -<p>Ο τελεστής κόμμα είναι τελείως διαφορετικός από το κόμμα μέσα σε πίνακες, αντικείμενα, και ορίσματα και παραμέτρους συνάρτησης.</p> - -<h3 id="Επεξεργασία_και_επιστροφή">Επεξεργασία και επιστροφή</h3> - -<p>Ένα παράδειγμα ακόμα που μπορεί να κάνει κάποιος με τον τελεστή κόμμα είναι επεξεργασία πρίν την επιστροφή. Όπως αναφέρθηκε, μόνο το τελευταίο στοιχείο θα γυρίσει, πλην όμως, όλα τα άλλα πρόκειται να αποτιμηθούν εξίσου. Οπότε, κάποιος θα μπορούσε να κάνει:</p> - -<pre class="brush: js">function myFunc() { - var x = 0; - - return (x += 1, x); // Ίδιο με το return ++x; -}</pre> - -<h2 id="Προδιαγραφές">Προδιαγραφές</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Προδιαγραφή</th> - <th scope="col">Κατάσταση</th> - <th scope="col">Σχόλιο</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-comma-operator', 'Comma operator')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-comma-operator', 'Comma operator')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11.14', 'Comma operator')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11.14', 'Comma operator')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Αρχικός Ορισμός</td> - </tr> - </tbody> -</table> - -<h2 id="Συμβατότητα_Προγράμματος_Περιήγησης">Συμβατότητα Προγράμματος Περιήγησης</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Χαρακτηριστικό</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Βασική Υποστήριξη</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>3.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Χαρακτηριστικό</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Βασική Υποστήριξη</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Δείτε_επίσης">Δείτε επίσης</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for βρόχος</a></li> -</ul> diff --git a/files/el/web/javascript/reference/operators/index.html b/files/el/web/javascript/reference/operators/index.html deleted file mode 100644 index 9ed1cba01e..0000000000 --- a/files/el/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -title: Expressions and operators -slug: Web/JavaScript/Reference/Operators -tags: - - JavaScript - - εκφράσεις - - τελεστές -translation_of: Web/JavaScript/Reference/Operators ---- -<div>{{jsSidebar("Operators")}}</div> - -<p>Στο κεφάλαιο αυτό περιγράφονται όλοι οι τελεστές, οι εκφράσεις και οι λέξεις κλειδιά της JavaScript.</p> - -<h2 id="Εκφράσεις_και_τελεστές_ανά_κατηγορία">Εκφράσεις και τελεστές ανά κατηγορία</h2> - -<p>Για αλφαβητική ταξινόμηση δείτε το μενού στα αριστερά.</p> - -<h3 id="Πρωταρχικές_εκφράσεις">Πρωταρχικές εκφράσεις</h3> - -<p>Βασικές λέξεις κλειδιά και γενικές εκφράσεις στην JavaScript.</p> - -<dl> - <dt>{{jsxref("Operators/this", "this")}}</dt> - <dd>Η λέξη κλειδί <code>this</code> αναφέρεται στο προγραμματιστικό πλαίσιο της εκάστοτε συνάρτησης.</dd> - <dt>{{jsxref("Operators/function", "function")}}</dt> - <dd>Η λέξη κλειδί <code>function</code> ορίζει μια εκφραση δήλωσης συνάρτησης (function).</dd> - <dt>{{jsxref("Operators/class", "class")}}</dt> - <dd>Η λέξη κλειδί <code>class</code> ορίζει μια έκφραση δήλωσης κλάσης(class).</dd> - <dt>{{jsxref("Operators/function*", "function*")}}</dt> - <dd>Η λέξη κλειδί <code>function*</code> ορίζει μια έκφραση δήλωσης συνάρτησης γεννήτριας (generator function).</dd> - <dt>{{jsxref("Operators/yield", "yield")}}</dt> - <dd>Διακόπτει και συνεχίζει μια συνάρτηση γεννήτρια.</dd> - <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> - <dd>Αναθέτει σε μια άλλη συνάρτηση γεννήτριας ή σε κάποιο επαναλήψιμο αντικείμενο.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt> - <dd>Η <code>async function</code> ορίζει μια έκφραση δήλωσης ασυγχρονης συνάρτησης (async function).</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt> - <dd>Διακόπτει και συνεχίζει μια ασύγχρονη συνάρτηση, και περιμένει την ασύχρονη απάντηση/απόρριψη από αυτή.</dd> - <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> - <dd>Βασική σύνταξη αρχικοποίησης ενός πίνακα (Array).</dd> - <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> - <dd>Βασική σύνταξη αρχικοποίησης ενός αντικειμένου (Object).</dd> - <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> - <dd>Βασική σύνταξη αρχικοποίησης μιας κοινής έκφρασης (Regular Expression).</dd> - <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> - <dd>Τελεστής ομαδοποίησης.</dd> -</dl> - -<h3 id="Εκφράσεις_αριστερής_πλευράς_(Left-hand-side)">Εκφράσεις αριστερής πλευράς (Left-hand-side)</h3> - -<p>Οι τιμές στο αριστερό μέρος αποτελούν τον προορισμό της ανάθεσης.</p> - -<dl> - <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> - <dd>Οι τελεστές μέλους παρέχουν πρόσβαση στις ιδιότητες ή στις μεθόδους ενός αντικειμένου.<br> - (<code>object.property</code> and <code>object["property"]</code>).</dd> - <dt>{{jsxref("Operators/new", "new")}}</dt> - <dd>Ο τελεστής <code>new</code> δημιουργεί ένα στιγμιότυπο ενός κατασκευαστή (constructor).</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> - <dd>Στους κατασκευαστές, <code>new.target</code> αναφέρεται στους κατασκευαστές που κλήθηκαν από το {{jsxref("Operators/new", "new")}}.</dd> - <dt>{{jsxref("Operators/super", "super")}}</dt> - <dd>Η λέξη κλειδί <code>super</code> καλεί τον κατασκευαστή του γονέα (parent constructor).</dd> - <dt>{{jsxref("Operators/Spread_operator", "...obj")}}</dt> - <dd>Η σύνταξη διάδοσης (Spread syntax) επιτρέπει σε μια έκφραση να εξαπλωθεί σε σημεία όπου αναμένονται πολλαπλά ορίσματα (πχ. κλήση συνάρτησης) ή πολλαπλά στοιχεία (πχ αρχική δήλωση πινάκων).</dd> -</dl> - -<h3 id="Επαυξηση_και_μείωση">Επαυξηση και μείωση</h3> - -<p>Τελεστές Postfix/prefix επαύξησης και postfix/prefix μείωσης.</p> - -<dl> - <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> - <dd>Τελεστής αύξησης μετά την μεταβλητή (Postfix).</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> - <dd>Τελεστής μείωσης μετά την μεταβλητή (Postfix).</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> - <dd>Τελεστής αύξησης πριν την μεταβλητή (Prefix).</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> - <dd>Τελεστής μείωσης πριν την μεταβλητή (Prefix).</dd> -</dl> - -<h3 id="Μοναδιαίοι_τελεστές">Μοναδιαίοι τελεστές</h3> - -<p>Μοναδιαία είναι η διαδικασία που απαιτεί μόνο εναν τελεστή.</p> - -<dl> - <dt>{{jsxref("Operators/delete", "delete")}}</dt> - <dd>Ο τελεστής <code>delete</code> διαγράφει ένα χαρακτηριστικό από ένα αντικείμενο.</dd> - <dt>{{jsxref("Operators/void", "void")}}</dt> - <dd>Ο τελεστής <code>void</code> απορρίπτει την επιστρεφόμενη τιμή μιας έκφρασης.</dd> - <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> - <dd>Ο τελεστής <code>typeof</code> προσδιορίζει τον τύπο ενός δεδομένου αντικειμένου.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> - <dd>Ο τελεστής unary plus μετατρέπει τον όρο πράξης του σε αριθμό (Number type).</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> - <dd>Ο τελεστής unary negation μετατρέπει τον όρο πράξης του σε αριθμό (Number type) και ακολούθως τον μετατρέπει σε αρνητικό.</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> - <dd>Τελεστής άρνησης σε επίπεδο bit (Bitwise NOT).</dd> - <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> - <dd>Τελεστής λογικής άρνησης (Logical NOT).</dd> -</dl> - -<h3 id="Αριθμητικοί_τελεστές">Αριθμητικοί τελεστές</h3> - -<p>Οι αριθμητικοί τελεστές δέχονται αριθμητικές τιμές σαν ορίσματα πράξης (είτε αριθμούς, είτε μεταβλητές) και επιστρέφουν μια απλή αριθμητική τιμή.</p> - -<dl> - <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> - <dd>Τελεστής πρόσθεσης.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> - <dd>Τελεστής αφαίρεσης.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> - <dd>Τελεστής διαίρεσης.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> - <dd>Τελεστής πολλαπλασιασμού.</dd> - <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> - <dd>Τελεστής υπολοίπου διαίρεσης.</dd> -</dl> - -<dl> - <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> - <dd>Εκθετικός τελεστής.</dd> -</dl> - -<h3 id="Σχεσιακοί_τελεστές">Σχεσιακοί τελεστές</h3> - -<p>Ενας τελεστής σύγκρισης συγκρίνει τα ορίσματα πράξης και επιστρέφει μια Boolean τιμή βασισμένη στο αν η σύγκριση είναι αληθής.</p> - -<dl> - <dt>{{jsxref("Operators/in", "in")}}</dt> - <dd>Ο τελεστής <code>in</code> προσδιορίζει αν ενα αντικείμενο έχει ένα συγκεκριμένο χαρακτηριστικό.</dd> - <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> - <dd>Ο τελεστής <code>instanceof</code> προσδιορίζει αν ένα αντικείμενο είναι στιγμιότυπο ενός άλλου αντικειμένου.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> - <dd>Τελεστής 'μικρότερο από'.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> - <dd>Τελεστής 'μεγαλύτερο από'.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> - <dd>Τελεστής 'μικρότερο από ή ίσο'.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> - <dd>Τελεστής 'μεγαλύτερο από ή ίσο'.</dd> -</dl> - -<div class="note"> -<p><strong>Σημείωση: </strong>το <strong>=></strong> δεν είναι τελεστής αλλά αποτελεί σημειογραφία για τις <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p> -</div> - -<h3 id="Τελεστές_ισότητας">Τελεστές ισότητας</h3> - -<p>Το αποτέλεσμα των τελεστών ισότητας είναι πάντα τύπου Boolean και βασίζεται στο αν η σύγκριση είανι αληθής.</p> - -<dl> - <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> - <dd>Τελεστής ισότητας.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> - <dd>Τελεστής ανισότητας, διαφορετικότητας.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> - <dd>Τελεστής ισότητας ταυτότητας.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> - <dd>Τελεστής ανισότητας ταυτότητας.</dd> -</dl> - -<h3 id="Τελεστές_κύλισης_bits">Τελεστές κύλισης bits</h3> - -<p>Λειτουργία κύλισης όλων των bits των ορισμάτων.</p> - -<dl> - <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> - <dd>Τελεστής αριστερής κύλισης bit (Bitwise left shift).</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> - <dd>Τελεστής δεξιάς κύλισης bit (Bitwise right shift).</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> - <dd>Τελεστής δεξιάς κύλισης bit χωρίς πρόσημο (Bitwise right shift).</dd> -</dl> - -<h3 id="Δυαδικοί_τελεστές_bits">Δυαδικοί τελεστές bits</h3> - -<p>Οι δυαδικοί τελεστές bits χειριζονται τα ορίσματα τους σαν σετ απο 32 bits (0,1) και επιστρέφουν μια αριθμητική τιμή.</p> - -<dl> - <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> - <dd>Bitwise AND.</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> - <dd>Bitwise OR.</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> - <dd>Bitwise XOR.</dd> -</dl> - -<h3 id="Δυαδικοί_λογικοί_τελεστές">Δυαδικοί λογικοί τελεστές</h3> - -<p>Οι λογικοί τελεστές τυπικά χρησιμοποιούνται με boolean (λογικές) τιμές, και επιστρέφουν μια επίσης boolean τιμή.</p> - -<dl> - <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> - <dd>Λογικό 'και' (AND).</dd> - <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> - <dd>Λογικό 'ή' (OR).</dd> -</dl> - -<h3 id="Τριαδικός_υποθετικός_τελεστής">Τριαδικός υποθετικός τελεστής</h3> - -<dl> - <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> - <dd> - <p>Ο υποθετικός τελεστής επιστρέφει μια εκ των δύο τιμών, βάση της λογική τιμής της δεδομένης συνθήκης.</p> - </dd> -</dl> - -<h3 id="Τελεστές_ανάθεσης.">Τελεστές ανάθεσης.</h3> - -<p>Ένας τελεστής ανάθεσης αναθέτει μια τιμή στο αριστερό όρισμα βάση της τιμής του δεξιού ορίσματος.</p> - -<dl> - <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> - <dd>Τελεστής ανάθεσης.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> - <dd>Τελεστής ανάθεσης πολλαπλάσιου.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> - <dd>Τελεστής ανάθεσης διαιρεταίου.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> - <dd>Τελεστής ανάθεσης υπολοίπου.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> - <dd>Τελεστής ανάθεσης αθροίσματος.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> - <dd>Τελεστής ανάθεσης αφαίρεσης.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> - <dd>Τελεστής ανάθεσης αριστερής κύλισης bit.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> - <dd>Τελεστής ανάθεσης δεξιάς κύλισης bit.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> - <dd>Τελεστής ανάθεσης δεξιάς κύλισης bit χωρίς πρόσημο.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> - <dd>Τελεστής ανάθεσης λογικού AND σε επίπεδο bits.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> - <dd>Τελεστής ανάθεσης λογικού XOR σε επίπεδο bits.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> - <dd>Τελεστής ανάθεσης λογικού OR σε επίπεδο bits.</dd> - <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> - {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> - <dd> - <p>Η ανάθεση διάσπασης(destructuring) επιτρέπει την απευθείας ανάθεση των χαρακτηριστικών, ενός αντικειμένου ή ενός πίνακα, σε μεταβλητές.</p> - </dd> -</dl> - -<h3 id="Τελεστης_κόμμα_''_(comma)">Τελεστης κόμμα ',' (comma)</h3> - -<dl> - <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> - <dd>Ο τελεστής κόμμα(',') επιτρέπει σε πολλαπλές εκφράσεις να εκτιμηθούν σε μία μόνο δήλωση, και επιστρέφει το αποτέλεσμα της τελευταίας εκφρασης.</dd> -</dl> - -<h3 id="Non-standard_features">Non-standard features</h3> - -<dl> - <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</dt> - <dd>Η λέξη κλειδί <code>function</code> μπορεί να χρησιμοποιηθεί για να ορίσει για συνάρτηση γεννήτρια μέσα σε μια έκφραση. Για να γίνει η συνάρτηση, συναρτηση γεννήτριας το σώμα της θα πρέπει να περιέχει τουλαχιστον μια {{jsxref("Operators/yield", "yield")}} εκφραση.</dd> - <dt>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> - <dd>The expression closure syntax is a shorthand for writing simple function.</dd> - <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> - <dd>Array comprehensions.</dd> - <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> - <dd>Generator comprehensions.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>New: Spread operator, destructuring assignment, <code>super</code> keyword.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> -</ul> diff --git a/files/el/web/tutorials/index.html b/files/el/web/tutorials/index.html deleted file mode 100644 index 12a5837128..0000000000 --- a/files/el/web/tutorials/index.html +++ /dev/null @@ -1,247 +0,0 @@ ---- -title: Οδηγοί εκμάθησης -slug: Web/Tutorials -tags: - - CSS - - HTML - - JavaScript - - MDN - - Αρχάριος - - Κώδικας - - Οδηγός - - Οδηγός εκμάθησης - - Σχεδιασμός ιστού -translation_of: Web/Tutorials ---- -<p>Οι σύνδεσμοι σε αυτή τη σελίδα οδηγούν σε μια ποικιλία οδηγών εκμάθησης και εργαλεία εκπαίδευσης. <strong>Είτε ξεκινάτε τώρα, μαθαίνετε τα βασικά, ή είστε έμπειρος στον προγραμματισμό ιστού, εδώ μπορείτε να βρείτε χρήσιμους πόρους για καλύτερες πρακτικές. </strong>Αυτοί οι πόροι δημιουργούνται από πρωτοποριακές εταιρείες και από προγραμματιστές που έχουν ασπαστεί τα ανοικτά πρότυπα και τις βέλτιστες πρακτικές για προγραμματισμό ιστού, που παρέχουν ή επιτρέπουν μεταφράσεις, μέσω μιας ανοικτής άδειας περιεχομένου, όπως η Creative Commons.</p> - -<h2 id="Για_αρχάριους_στο_διαδίκτυο">Για αρχάριους στο διαδίκτυο</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web">Ξεκινώντας με το διαδίκτυο</a></dt> - <dd>Το<em> "Ξεκινώντας με το διαδίκτυο" </em>είναι μια περιεκτική σειρά, που σάς εισάγει στις πρακτικότητες του προγραμματισμού ιστού. Θα ρυθμίσετε τα εργαλεία που χρειάζεστε ώστε να κατασκευάσετε μια απλή ιστοσελίδα και να δημοσιεύσετε το δικό σας απλό κώδικα.</dd> -</dl> - -<h2 class="Documentation" id="Documentation" name="Documentation">Οδηγοί εκμάθησης HTML</h2> - -<h3 id="Εισαγωγικό_επίπεδο">Εισαγωγικό επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Εισαγωγή στο HTML</a></dt> - <dd>Αυτή η ενότητα θέτει τα θεμέλια, εξοικειώνοντάς σας με σημαντικές ιδέες και συντακτικό, την προβολή εφαρμογών HTML σε κείμενο, τη δημιουργία υπερσυνδέσμων και τη χρήση του HTML για τη δόμηση μιας ιστοσελίδας.</dd> - <dt><strong><a href="https://developer.mozilla.org/en-US/docs/HTML/Element">Αναφορά σε στοιχεία HTML του MDN</a></strong></dt> - <dd>Μια περιεκτική αναφορά για τα στοιχεία HTML και πώς τα υποστηρίζουν τα διάφορα προγράμματα περιήγησης.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt><strong><a href="https://www.theblogstarter.com/html-for-beginners">Δημιουργία μιας απλής ιστοσελίδας με HTML</a> (The Blog Starter)</strong></dt> - <dd>Ένας οδηγός HTML για αρχάριους, ο οποίος περιλαμβάνει επεξηγήσεις για κοινές ετικέτες, συμπεριλαμβανομένων και των ετικετών HTML5. Περιλαμβάνει επίσης έναν οδηγό βήμα προς βήμα για τη δημιουργία μιας βασικής ιστοσελίδας με παραδείγματα.</dd> - <dt><strong><a href="http://wikiversity.org/wiki/Web_Design/HTML_Challenges" rel="external">Προκλήσεις HTML</a> (Wikiversity)</strong></dt> - <dd>Τελειοποιήστε τις ικανότητες HTML σας μέσω των προκλήσεων (για παράδειγμα, "Να χρησιμοποιήσω ένα στοιχείο <h2> ή ένα στοιχείο <strong>;"), με έμφαση στις σημαντικές επισημάνσεις.</dd> -</dl> -</div> -</div> - -<h3 id="Μέσο_επίπεδο">Μέσο επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Πολυμέσα και ενσωμάτωση</a></dt> - <dd>Αυτή η ενότητα εξερευνεί τις χρήσεις του HTML για τη συμπερίληψη πολυμέσων στις ιστοσελίδες σας, καθώς και τους διάφορους τρόπους με τους οποίους μπορούν να προστεθούν εικόνες και να ενσωματωθούν βίντεο, ήχος, ακόμη και ολόκληρες ιστοσελίδες.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Tables">Πίνακες HTML</a></dt> - <dd>Η απεικόνηση των δεδομένων πίνακα που βρίσκονται σε μια ιστοσελίδα, με έναν κατανοητό, {{glossary("Accessibility", "προσιτό")}} τρόπο, μπορεί να είναι δύσκολη υπόθεση. Αυτή η ενότητα καλύπτει βασικές σημάνσεις πίνακα, καθώς και πιο περίπλοκες λειτουργίες, όπως η υλοποίηση λεζαντών και επισκοπήσεων.</dd> -</dl> -</div> -</div> - -<h3 id="Προηγμένο_επίπεδο">Προηγμένο επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Forms">Φόρμες HTML</a></dt> - <dd>Οι φόρμες είναι αναπόσπαστο κομμάτι του διαδικτύου — παρέχουν μέγαλο ποσοστό της λειτουργικότητας που χρειάζεστε για την αλληλεπίδραση με τις ιστοσελίδες, π.χ. εγγραφή και σύνδεση, αποστολή σχολίων, αγορά προϊόντων και πολλά άλλα. Αυτή η ενότητα θα σάς βοηθήσει να ξεκινήσετε τη δημιουγία των μερών των φορμών που αφορούν το πρόγραμμα-πελάτη.</dd> - <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Tips_for_Authoring_Fast-loading_HTML_Pages">Συμβουλές για τη δημιουργία σελίδων HTML ταχείας φόρτωσης</a></strong></dt> - <dd>Βελτιστοποιήστε τις ιστοσελίδες ώστε να είναι πιο αποκρίσιμες για τους επισκέπτες και να μειώσετε τη φόρτωση στο διακομιστή σας και τη σύνδεσή σας στο διαδίκτυο.</dd> -</dl> -</div> -</div> - -<h2 class="Documentation" id="Documentation" name="Documentation">Οδηγοί εκμάθησης CSS</h2> - -<h3 id="Εισαγωγικό_επίπεδο_2">Εισαγωγικό επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics">Βασικά CSS</a></dt> - <dd>Το CSS (Cascading Style Sheets - Διαδοχικά Φύλλα Στυλ) είναι ο κώδικας που χρησιμοποιείτε για να δώσετε στυλ στην ιστοσελίδα σας. Το "<em>Βασικά CSS"</em> σάς παρέχει όλα όσα χρειάζεστε για να ξεκινήσετε. Θα απαντήσουμε σε ερωτήσεις όπως: Πώς μετατρέπω το κείμενό μου σε μαύρο ή κόκκινο; Πώς μπορώ να κάνω το περιεχόμενό μου να εμφανίζεται στο τάδε σημείο της οθόνης; Πώς διακοσμώ την ιστοσελίδα μου με εικόνες και χρώματα φόντου;</dd> - <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Εισαγωγή στο CSS</a></dt> - <dd>Αυτή η ενότητα εμβαθύνει στον τρόπο λειτουργίας του CSS, συμπεριλαμβανομένων και των επιλογέων και των ιδιοτήτων, της εγγραφής κανόνων CSS, της εφαρμογής CSS σε HTML, του καθορισμού μήκους, χρώματος και άλλων στοιχείων CSS, cascade and inheritance, box model basics, and debugging CSS.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt> - <dd>Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module we recap the box model then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images and other features, and fancy features such as drop shadows and filters on boxes.</dd> - <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Styling text</a></dt> - <dd>Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</dd> - <dt><strong><a href="https://developer.mozilla.org/en-US/docs/Common_CSS_Questions">Common CSS Questions</a></strong></dt> - <dd>Common questions and answers for beginners.</dd> -</dl> -</div> -</div> - -<h3 id="Μέσο_επίπεδο_2">Μέσο επίπεδο</h3> - -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">Διάταξη CSS</a></dt> - <dd>At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.</dd> - <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_Reference">Αναφορά CSS</a></strong></dt> - <dd>Complete reference to CSS, with details on support by Firefox and other browsers.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt><strong><a href="http://www.alistapart.com/articles/fluidgrids/" rel="external">Ρευστά πλέγματα (Fluid Grids)</a> (A List Apart)</strong></dt> - <dd>Design layouts that fluidly resize with the browser window, while still using a typographic grid.</dd> - <dt><strong><a href="http://en.wikiversity.org/wiki/Web_Design/CSS_challenges" rel="external">Προκλήσεις CSS </a>(Wikiversity)</strong></dt> - <dd>Flex your CSS skills, and see where you need more practice.</dd> -</dl> -</div> -</div> - -<h3 id="Προηγμένο_επίπεδο_2">Προηγμένο επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt><strong><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Χρήση μεταμορφώσεων CSS</a></strong></dt> - <dd>Apply rotation, skewing, scaling, and translation using CSS.</dd> - <dt><strong><a href="https://developer.mozilla.org/en-US/docs/CSS/CSS_transitions">Μεταβάσεις CSS</a></strong></dt> - <dd>CSS transitions, part of the draft CSS3 specification, provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt><strong><a href="http://www.html5rocks.com/tutorials/webfonts/quick/" rel="external">Γρήγορος οδηγός για υλοποίηση γραμματοσειρών ιστού με το @font-face</a> (HTML5 Rocks)</strong></dt> - <dd>The @font-face feature from CSS3 allows you to use custom typefaces on the web in an accessible, manipulatable, and scalable way.</dd> - <dt><strong><a href="http://davidwalsh.name/starting-css" rel="external">Starting to Write CSS</a> (David Walsh)</strong></dt> - <dd>An introduction to tools and methodologies to write more succinct, maintainable, and scalable CSS.</dd> -</dl> -</div> -</div> - -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></dt> - <dd>Learn how to draw graphics using scripting using the canvas element.</dd> - <dt><strong><a href="http://html5doctor.com/" rel="external">HTML5 Doctor</a></strong></dt> - <dd>Articles about using HTML5 right now.</dd> -</dl> -</div> - -<h2 class="Documentation" id="Documentation" name="Documentation">Οδηγοί εκμάθησης JavaScript</h2> - -<h3 id="Εισαγωγικό_επίπεδο_3">Εισαγωγικό επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt> </dt> - <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a></dt> - <dd>In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript building blocks</a></dt> - <dd>In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.</dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Getting started with JavaScript</a></dt> - <dd>What is JavaScript and how can it help you?</dd> - <dt><strong><a href="http://www.codecademy.com/">Codecademy</a> (Codecademy)</strong></dt> - <dd>Το Codecademy είναι ένας εύκολος τρόπος για να μάθετε πώς να γράφετε κώδικα JavaScript. Είναι διαδραστικό και μπορείτε να το κάνετε με τους φίλους σας.</dd> -</dl> -</div> -</div> - -<h3 id="Μέσο_επίπεδο_3">Μέσο επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Introducing JavaScript objects</a></dt> - <dd>In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.</dd> - <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Client-side web APIs</a></dt> - <dd>When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. </dd> -</dl> -</div> - -<div class="section"> -<dl> - <dt><strong><a href="https://developer.mozilla.org/en-US/docs/A_re-introduction_to_JavaScript">A re-Introduction to JavaScript</a></strong></dt> - <dd>A recap of the JavaScript programming language aimed at intermediate-level developers.</dd> - <dt><strong><a href="http://eloquentjavascript.net/" rel="external">Eloquent JavaScript</a></strong></dt> - <dd>A comprehensive guide to intermediate and advanced JavaScript methodologies.</dd> - <dt><strong><a href="http://speakingjs.com/es5/" rel="external">Speaking JavaScript</a> (Dr. Axel Rauschmayer)</strong></dt> - <dd>For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.</dd> - <dt><strong><a href="http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/" rel="external">Essential JavaScript Design Patterns</a> (Addy Osmani)</strong></dt> - <dd>An introduction to essential JavaScript design patterns.</dd> -</dl> -</div> -</div> - -<h3 id="Προηγμένο_επίπεδο_3">Προηγμένο επίπεδο</h3> - -<div class="row topicpage-table"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Web/JavaScript/Guide">Οδηγός JavaScript</a></dt> - <dd>A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.</dd> - <dt><strong><a href="https://github.com/getify/You-Dont-Know-JS" rel="external">You Don't Know JS</a> (Kyle Simpson)</strong></dt> - <dd>Μια σειρά βιβλίων που μελετά τους κύριους μηχανισμούς της γλώσσας JavaScript εις βάθος.</dd> - <dt><strong><a href="http://bonsaiden.github.com/JavaScript-Garden/" rel="external">JavaScript Garden</a></strong></dt> - <dd>Τεκμηρίωση για τα πιο "περίεργα" μέρη της JavaScript.</dd> - <dt><strong><a href="http://exploringjs.com/es6/" rel="external">Εξερεύνηση του ES6</a> (Δρ. Axel Rauschmayer)</strong></dt> - <dd>Αξιόπιστες και αναλυτικές πληροφορίες στο ECMAScript 2015.</dd> -</dl> -</div> - -<div class="section"><strong><a href="http://shichuan.github.io/javascript-patterns" rel="external">Μοτίβα JavaScript</a></strong> - -<dl> - <dd>A JavaScript pattern and antipattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.</dd> - <dt><strong><a href="http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/">Πώς λειτουργούν τα προγράμματα περιήγησης</a></strong></dt> - <dd>Ένας λεπτομερές ερευνητικό άρθρο που περιγράφει τα διαφορετικά, σύγχρονα προγράμματα περιήγησης, τους μηχανισμούς τους, την απόδοση σελίδων κλπ.</dd> - <dt><a href="https://github.com/bolshchikov/js-must-watch">Βίντεο JavaScript</a> (GitHub)</dt> - <dd>Μια συλλογή από βίντεο JavaScript προς παρακολούθηση.</dd> -</dl> -</div> -</div> - -<h3 id="Ανάπτυξη_επεκτάσεων">Ανάπτυξη επεκτάσεων</h3> - -<div class="row topicpage-table" style="width: 100%;"> -<div class="section"> -<dl> - <dt><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a></dt> - <dd>Το WebExtensions είναι ένα σύστημα για πολλαπλά προγράμματα περιήγησης και αφορά την ανάπτυξη προσθέτων για προγράμματα περιήγησης. Σε μεγάλο βαθμό, το σύστημα είναι συμβατό με το <a class="external-icon external" href="https://developer.chrome.com/extensions">API επεκτάσεων</a>, που υποστηρίζεται από το Google Chrome και το Opera. Οι επεκτάσεις που γράφονται για αυτά τα προγράμματα περιήγησης θα εκτελούνται, στις περισσότερες περιπτώσεις, στο Firefox ή στο <a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/extensions/">Microsoft Edge</a> με <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_from_Google_Chrome">λίγες μόνο αλλαγές</a>. Το API είναι επίσης πλήρως συμβατό με το <a href="https://developer.mozilla.org/en-US/Firefox/Multiprocess_Firefox">Firefox με πολυδιεργασίες</a>.</dd> -</dl> -</div> -</div> |