From 6a3eacdca68980f475326dc6693fca97d6f93294 Mon Sep 17 00:00:00 2001 From: "localizeflow[bot]" Date: Fri, 6 Mar 2026 12:20:50 +0000 Subject: [PATCH] chore(i18n): sync translations with latest source changes (chunk 1/1, 12 changes) --- translations/el/.co-op-translator.json | 10 +- .../README.md | 691 ++++++++-------- translations/el/AGENTS.md | 326 ++++---- translations/el/README.md | 193 ++--- translations/sv/.co-op-translator.json | 10 +- .../README.md | 646 +++++++-------- translations/sv/AGENTS.md | 236 +++--- translations/sv/README.md | 188 ++--- translations/th/.co-op-translator.json | 10 +- .../README.md | 749 +++++++++--------- translations/th/AGENTS.md | 329 ++++---- translations/th/README.md | 212 ++--- 12 files changed, 1813 insertions(+), 1787 deletions(-) diff --git a/translations/el/.co-op-translator.json b/translations/el/.co-op-translator.json index 7be17fd6b..a7db4fd3c 100644 --- a/translations/el/.co-op-translator.json +++ b/translations/el/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T21:16:19+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:05:54+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "el" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:12:15+00:00", + "translation_date": "2026-03-06T12:18:30+00:00", "source_file": "AGENTS.md", "language_code": "el" }, @@ -516,8 +516,8 @@ "language_code": "el" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:07:46+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:00:55+00:00", "source_file": "README.md", "language_code": "el" }, diff --git a/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 5b41d1d82..d170856ca 100644 --- a/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/el/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,15 +1,15 @@ # Εισαγωγή στις Γλώσσες Προγραμματισμού και τα Σύγχρονα Εργαλεία Ανάπτυξης -Γεια σου, μελλοντικέ προγραμματιστή! 👋 Μπορώ να σου πω κάτι που ακόμα με συγκλονίζει κάθε μέρα; Είσαι έτοιμος να ανακαλύψεις ότι ο προγραμματισμός δεν αφορά μόνο τους υπολογιστές – αφορά το να έχεις πραγματικές υπερδυνάμεις για να ζωντανέψεις τις πιο τρελές σου ιδέες! +Γεια σου, μελλοντικέ προγραμματιστή! 👋 Μπορώ να σου πω κάτι που ακόμα μου προκαλεί ρίγος κάθε μέρα; Είσαι έτοιμος να ανακαλύψεις ότι ο προγραμματισμός δεν είναι απλώς για υπολογιστές – είναι σαν να έχεις πραγματικές υπερδυνάμεις για να ζωντανέψεις τις πιο τρελές σου ιδέες! -Ξέρεις εκείνη τη στιγμή που χρησιμοποιείς την αγαπημένη σου εφαρμογή και όλα απλά συνδυάζονται τέλεια; Όταν πατάς ένα κουμπί και συμβαίνει κάτι μαγικό που σε κάνει να πεις "ουάου, πώς ΤΟ ΕΚΑΝΑΝ αυτό;" Λοιπόν, κάποιος ακριβώς σαν κι εσένα – πιθανόν να είναι καθισμένος στο αγαπημένο του καφέ στις 2 τα ξημερώματα με τον τρίτο του εσπρέσο – έγραψε τον κώδικα που δημιούργησε αυτή τη μαγεία. Και να τι θα σε εντυπωσιάσει: στο τέλος αυτού του μαθήματος, όχι μόνο θα καταλάβεις πώς το έκαναν, αλλά θα θέλεις κι εσύ να το δοκιμάσεις! +Ξέρεις εκείνη τη στιγμή που χρησιμοποιείς την αγαπημένη σου εφαρμογή και όλα ταιριάζουν τέλεια; Όταν πατάς ένα κουμπί και συμβαίνει κάτι μαγικό που σε κάνει να λες "ουάου, πώς το ΕΚΑΝΑΝ αυτό;" Λοιπόν, κάποιος σαν εσένα – πιθανώς καθισμένος στο αγαπημένο του καφέ στις 2 το πρωί με τον τρίτο εσπρέσο του – έγραψε τον κώδικα που δημιούργησε αυτή τη μαγεία. Και αυτό που θα σε αφήσει άφωνο: στο τέλος αυτού του μαθήματος, όχι μόνο θα καταλάβεις πώς το έκαναν, αλλά θα ανυπομονείς να το δοκιμάσεις ο ίδιος! -Κοίτα, καταλαβαίνω αν ο προγραμματισμός σου φαίνεται τρομακτικός αυτή τη στιγμή. Όταν ξεκίνησα, πίστευα ειλικρινά ότι έπρεπε να είσαι κάποιος μαθηματικός ιδιοφυής ή να προγραμματίζεις από τότε που ήσουν πέντε χρονών. Αλλά αυτό που άλλαξε εντελώς την οπτική μου ήταν: ο προγραμματισμός είναι ακριβώς όπως να μαθαίνεις να κάνεις συζητήσεις σε μια νέα γλώσσα. Ξεκινάς με το "γεια" και το "ευχαριστώ", μετά μαθαίνεις να παραγγέλνεις καφέ, και πριν το καταλάβεις κάνεις βαθιές φιλοσοφικές συζητήσεις! Μόνο που εδώ, κάνεις συζητήσεις με υπολογιστές, και ειλικρινά; Είναι οι πιο υπομονετικοί συνομιλητές που θα έχεις ποτέ – ποτέ δεν κρίνουν τα λάθη σου και πάντα ενθουσιάζονται να προσπαθήσουν ξανά! +Κοίτα, καταλαβαίνω απόλυτα αν ο προγραμματισμός σου φαίνεται τρομακτικός τώρα. Όταν άρχισα, πίστευα ειλικρινά ότι χρειάζεται να είσαι κάποιο είδος μαθηματικού ιδιοφυΐα ή να προγραμματίζεις από πέντε χρονών. Αλλά αυτό που άλλαξε τελείως την οπτική μου: ο προγραμματισμός είναι ακριβώς σαν να μαθαίνεις να κάνεις συζητήσεις σε μια νέα γλώσσα. Ξεκινάς με "γεια" και "ευχαριστώ", μετά μαθαίνεις να παραγγέλνεις καφέ, και προτού το καταλάβεις, κάνεις βαθιές φιλοσοφικές συζητήσεις! Εκτός από το ότι σε αυτή την περίπτωση κάνεις συζητήσεις με υπολογιστές, και ειλικρινά; Είναι οι πιο υπομονετικοί συνομιλητές που θα έχεις ποτέ – δεν κρίνουν ποτέ τα λάθη σου και πάντα ενθουσιάζονται να προσπαθήσουν ξανά! -Σήμερα, θα εξερευνήσουμε τα απίστευτα εργαλεία που κάνουν την σύγχρονη ανάπτυξη ιστοσελίδων όχι μόνο δυνατή, αλλά και σοβαρά εθιστική. Μιλάω για τους ίδιους ακριβώς επεξεργαστές, προγράμματα περιήγησης και ροές εργασίας που χρησιμοποιούν οι προγραμματιστές στη Netflix, Spotify και το αγαπημένο σου indie studio εφαρμογών κάθε μέρα. Και να το μέρος που θα σε κάνει να χορέψεις από χαρά: τα περισσότερα από αυτά τα επαγγελματικά, βιομηχανικά πρότυπα εργαλεία είναι εντελώς δωρεάν! +Σήμερα, θα εξερευνήσουμε τα απίστευτα εργαλεία που κάνουν τη σύγχρονη ανάπτυξη ιστοσελίδων όχι απλά εφικτή, αλλά σοβαρά εθιστική. Μιλάω για τους ίδιους επεξεργαστές κώδικα, φυλλομετρητές και ροές εργασίας που χρησιμοποιούν οι προγραμματιστές της Netflix, της Spotify και του αγαπημένου σου ανεξάρτητου στούντιο εφαρμογών κάθε μέρα. Και εδώ είναι το κομμάτι που θα σε κάνει να χορέψεις από χαρά: τα περισσότερα από αυτά τα επαγγελματικά, βιομηχανικά αναγνωρισμένα εργαλεία είναι εντελώς δωρεάν! ![Intro Programming](../../../../translated_images/el/webdev101-programming.d6e3f98e61ac4bff.webp) -> Σκέτς από [Tomomi Imura](https://twitter.com/girlie_mac) +> Σημείωση σκίτσου από την [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey @@ -22,84 +22,85 @@ journey Επεξεργαστές Κώδικα: 4: You Περιηγητές & Εργαλεία Ανάπτυξης: 5: You Γραμμή Εντολών: 3: You - section Εξάσκηση - Ντετέκτιβ Γλωσσών: 4: You + section Άσκηση + Ντετέκτιβ Γλώσσας: 4: You Εξερεύνηση Εργαλείων: 5: You Σύνδεση Κοινότητας: 5: You ``` ## Ας Δούμε Τι Ξέρεις Ήδη! -Πριν βουτήξουμε στα διασκεδαστικά, έχω περιέργεια – τι ξέρεις ήδη για αυτόν τον κόσμο του προγραμματισμού; Και άκου, αν κοιτάς αυτές τις ερωτήσεις και σκέφτεσαι "Δεν έχω απολύτως καμία ιδέα για τίποτα από αυτά", αυτό δεν είναι απλώς εντάξει, είναι τέλειο! Σημαίνει ότι είσαι στο ακριβώς σωστό μέρος. Σκέψου αυτό το κουίζ σαν τέντωμα πριν την άσκηση – απλώς ζεσταίνουμε τους μυς του εγκεφάλου! +Πριν βουτήξουμε στα διασκεδαστικά, είμαι περίεργος – τι ήδη ξέρεις για αυτόν τον κόσμο του προγραμματισμού; Και άκου, αν κοιτάς αυτές τις ερωτήσεις και σκέφτεσαι "Δεν έχω απολύτως καμία ιδέα για τίποτα από όλα αυτά," αυτό δεν είναι απλά εντάξει, είναι τέλειο! Αυτό σημαίνει ότι βρίσκεσαι ακριβώς στο σωστό μέρος. Σκέψου αυτό το κουίζ σαν ένα ζέσταμα πριν την προπόνηση – απλώς "ζεσταίνουμε" τους μυς του εγκεφάλου! -[Κάνε το προ-μάθημα κουίζ](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Κάνε το προκαταρκτικό κουίζ](https://ff-quizzes.netlify.app/web/) -## Η Περιπέτεια που Ετοιμαζόμαστε να Κάνουμε Μαζί -Εντάξει, είμαι πραγματικά γεμάτος ενθουσιασμό για όσα θα εξερευνήσουμε σήμερα! Σοβαρά, εύχομαι να μπορούσα να δω το πρόσωπό σου όταν καταλάβεις μερικές από αυτές τις έννοιες. Να το απίστευτο ταξίδι που θα κάνουμε μαζί: +## Η Περιπέτεια που Θα Ζήσουμε Μαζί -- **Τι είναι ο προγραμματισμός πραγματικά (και γιατί είναι το πιο κουλ πράγμα στον κόσμο!)** – Θα ανακαλύψουμε πώς ο κώδικας είναι στην ουσία η αόρατη μαγεία που κινεί τα πάντα γύρω σου, από το ξυπνητήρι που ξαφνικά ξέρει ότι είναι Δευτέρα το πρωί, μέχρι τον αλγόριθμο που επιμελεί τέλεια τις Netflix προτάσεις σου -- **Γλώσσες προγραμματισμού και οι εκπληκτικές προσωπικότητές τους** – Φαντάσου να μπαίνεις σε ένα πάρτι όπου ο καθένας έχει τελείως διαφορετικές υπερδυνάμεις και τρόπους να λύνει προβλήματα. Έτσι είναι ο κόσμος των γλωσσών προγραμματισμού, και θα λατρέψεις να τις γνωρίσεις! -- **Τα βασικά δομικά στοιχεία που κάνουν τη ψηφιακή μαγεία να συμβαίνει** – Σκέψου τα σαν το απόλυτο δημιουργικό σετ LEGO. Μόλις καταλάβεις πώς ενώνονται αυτά τα κομμάτια, θα συνειδητοποιήσεις ότι μπορείς να φτιάξεις κυριολεκτικά οτιδήποτε ονειρευτεί το μυαλό σου -- **Επαγγελματικά εργαλεία που θα σε κάνουν να νιώσεις σαν να σου έδωσαν το ραβδί ενός μάγου** – Δεν υπερβάλλω εδώ – αυτά τα εργαλεία θα σε κάνουν πραγματικά να νιώσεις ότι έχεις υπερδυνάμεις, και το καλύτερο; Είναι τα ίδια που χρησιμοποιούν οι επαγγελματίες! +Εντάξει, είμαι πραγματικά γεμάτος ενθουσιασμό για αυτά που θα ανακαλύψουμε σήμερα! Σοβαρά, θα ήθελα να σου δω το πρόσωπο όταν μερικές από αυτές τις έννοιες "κουμπώσουν." Αυτή είναι η απίστευτη διαδρομή που θα πάρουμε μαζί: -> 💡 **Να το θυμάσαι**: Μην προσπαθήσεις καν να απομνημονεύσεις τα πάντα σήμερα! Τώρα απλώς θέλω να νιώσεις αυτήν την σπίθα ενθουσιασμού για το τι είναι δυνατό. Οι λεπτομέρειες θα κολλήσουν φυσικά καθώς θα εξασκούμαστε μαζί – έτσι συμβαίνει η αληθινή μάθηση! +- **Τι ακριβώς είναι ο προγραμματισμός (και γιατί είναι το πιο κουλ πράγμα!)** – Θα ανακαλύψουμε πώς ο κώδικας είναι κυριολεκτικά η αόρατη μαγεία που τροφοδοτεί τα πάντα γύρω σου, από αυτό το ξυπνητήρι που με κάποιον τρόπο ξέρει ότι είναι Δευτέρα πρωί μέχρι τον αλγόριθμο που επιμελείται τέλεια τις προτάσεις σου στο Netflix +- **Οι γλώσσες προγραμματισμού και οι υπέροχες προσωπικότητές τους** – Φαντάσου να πηγαίνεις σε ένα πάρτυ όπου κάθε άτομο έχει εντελώς διαφορετικές υπερδυνάμεις και τρόπους επίλυσης προβλημάτων. Έτσι είναι ο κόσμος των γλωσσών προγραμματισμού, και θα λατρέψεις να τις γνωρίσεις! +- **Τα βασικά δομικά στοιχεία που κάνουν την ψηφιακή μαγεία να συμβαίνει** – Σκέψου τα σαν το απόλυτο δημιουργικό σετ LEGO. Μόλις καταλάβεις πώς ταιριάζουν αυτά τα κομμάτια, θα καταλάβεις ότι μπορείς κυριολεκτικά να φτιάξεις οτιδήποτε ονειρεύεται το μυαλό σου +- **Επαγγελματικά εργαλεία που θα σε κάνουν να νιώσεις σαν να σου έδωσαν το ξύλο ενός μάγου** – Δεν υπερβάλλω εδώ – αυτά τα εργαλεία θα σε κάνουν πραγματικά να νιώσεις ότι έχεις υπερδυνάμεις, και το καλύτερο; Είναι τα ίδια που χρησιμοποιούν οι επαγγελματίες! -> Μπορείς να κάνεις αυτό το μάθημα στο [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> 💡 **Να θυμάσαι το εξής**: Μην προσπαθήσεις καν να τα αποστηθίσεις όλα σήμερα! Αυτή τη στιγμή, θέλω απλώς να νιώσεις αυτόν τον σπινθήρα ενθουσιασμού για το τι είναι δυνατό. Οι λεπτομέρειες θα μείνουν φυσικά όσο εξασκούμαστε μαζί – έτσι μαθαίνει κανείς πραγματικά! -## Τι Είναι Ακριβώς ο Προγραμματισμός; +> Μπορείς να παρακολουθήσεις αυτό το μάθημα στο [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -Εντάξει, ας απαντήσουμε στην ερώτηση του εκατομμυρίου: τι είναι πραγματικά ο προγραμματισμός; +## Λοιπόν, Τι Ακριβώς *ΕΙΝΑΙ* ο Προγραμματισμός; -Θα σου πω μια ιστορία που άλλαξε εντελώς τον τρόπο που το σκέφτομαι. Την προηγούμενη εβδομάδα, προσπαθούσα να εξηγήσω στη μαμά μου πώς να χρησιμοποιήσει το νέο έξυπνο τηλεχειριστήριο της τηλεόρασης. Έπιασα τον εαυτό μου να λέει πράγματα όπως "Πάτα το κόκκινο κουμπί, αλλά όχι το μεγάλο κόκκινο κουμπί, το μικρό κόκκινο κουμπί στα αριστερά... όχι, το άλλο αριστερά σου... καλά, τώρα κράτα το για δύο δευτερόλεπτα, όχι ένα, όχι τρία..." Σου θυμίζει κάτι; 😅 +Εντάξει, ας καταπιαστούμε με την ερώτηση του εκατομμυρίου: τι είναι πραγματικά ο προγραμματισμός; -Αυτός είναι ο προγραμματισμός! Είναι η τέχνη να δίνεις απίστευτα λεπτομερείς, βήμα προς βήμα οδηγίες σε κάτι που είναι πανίσχυρο αλλά χρειάζεται τα πάντα να του εξηγηθούν τέλεια. Μόνο που αντί να εξηγείς στη μαμά σου (που μπορεί να ρωτήσει "ποιο κόκκινο κουμπί;!"), εξηγείς σε έναν υπολογιστή (που κάνει ακριβώς ό,τι λες, ακόμα κι αν αυτό που είπες δεν είναι ακριβώς αυτό που ήθελες). +Θα σου πω μια ιστορία που άλλαξε τελείως το πώς το σκέφτομαι. Την προηγούμενη εβδομάδα, προσπαθούσα να εξηγήσω στη μητέρα μου πώς να χρησιμοποιήσει το νέο μας έξυπνο τηλεχειριστήριο της τηλεόρασης. Έπιασα τον εαυτό μου να λέει πράγματα όπως "Πάτα το κόκκινο κουμπί, όχι το μεγάλο κόκκινο, το μικρό κόκκινο αριστερά… όχι, το άλλο αριστερά σου… εντάξει, τώρα κράτα το για δύο δευτερόλεπτα, όχι ένα, όχι τρία…" Σου θυμίζει κάτι; 😅 -Αυτό που με εντυπωσίασε όταν το έμαθα πρώτη φορά: οι υπολογιστές είναι στην ουσία απλοί στον πυρήνα τους. Καταλαβαίνουν κυριολεκτικά μόνο δύο πράγματα – 1 και 0, που είναι βασικά "ναι" και "όχι" ή "αναμμένο" και "σβηστό". Αυτό είναι όλο! Αλλά εδώ γίνεται η μαγεία – δεν χρειάζεται να μιλάμε σε 1 και 0 σαν να είμαστε μέσα στο Matrix. Εκεί έρχονται οι **γλώσσες προγραμματισμού** να σώσουν την κατάσταση. Είναι σαν να έχεις τον καλύτερο μεταφραστή στον κόσμο που παίρνει τις απλές ανθρώπινες σκέψεις σου και τις μετατρέπει στη γλώσσα των υπολογιστών. +Αυτός είναι ο προγραμματισμός! Η τέχνη να δίνεις εξαιρετικά λεπτομερείς, βήμα-βήμα οδηγίες σε κάτι που είναι πολύ ισχυρό αλλά χρειάζεται τα πάντα να του λέγονται ακριβώς. Εκτός από το ότι η εξήγηση δεν πηγαίνει στη μητέρα σου (που μπορεί να ρωτήσει "ποιο κόκκινο κουμπί;"), αλλά σε έναν υπολογιστή (που απλώς κάνει ακριβώς ό,τι του λες, ακόμα και αν αυτό που είπες δεν είναι ακριβώς αυτό που ήθελες). -Και αυτό που ακόμα με συγκλονίζει κάθε πρωί όταν ξυπνάω: κυριολεκτικά *όλα* τα ψηφιακά πράγματα στη ζωή σου ξεκίνησαν από κάποιον ακριβώς σαν κι εσένα, πιθανώς καθισμένο σε πυζάμες με ένα φλιτζάνι καφέ, να γράφει κώδικα στον φορητό υπολογιστή του. Αυτό το φίλτρο του Instagram που σε κάνει να δείχνεις άψογος; Κάποιος το κωδικοποίησε. Η πρόταση που σου έφερε το νέο αγαπημένο τραγούδι; Ένας προγραμματιστής έφτιαξε αυτόν τον αλγόριθμο. Η εφαρμογή που σε βοηθά να μοιράζεσαι τους λογαριασμούς του δείπνου με φίλους; Ναι, κάποιος σκέφτηκε "αυτό είναι ενοχλητικό, μάλλον μπορώ να το διορθώσω" και… το έκανε! +Αυτό που μου προκάλεσε δέος όταν το έμαθα πρώτα: οι υπολογιστές στην ουσία είναι αρκετά απλοί στη βάση τους. Καταλαβαίνουν κυριολεκτικά μόνο δύο πράγματα – 1 και 0, που είναι βασικά "ναι" και "όχι" ή "αναμμένο" και "σβηστό". Αυτό είναι! Αλλά εδώ γίνεται μαγικό – δεν χρειάζεται να μιλάμε σε 1 και 0 σαν να είμαστε στη Μήτρα. Εδώ μπαίνουν τα **γλώσσες προγραμματισμού**. Είναι σαν να έχεις τον καλύτερο μεταφραστή στον κόσμο που μετατρέπει τις κανονικές ανθρώπινες σκέψεις σου σε γλώσσα υπολογιστή. -Όταν μαθαίνεις να προγραμματίζεις, δεν αποκτάς απλώς μια νέα δεξιότητα – γίνεσαι μέρος μιας απίστευτης κοινότητας ανθρώπων που λύνουν προβλήματα και περνούν τις μέρες τους σκεπτόμενοι, "Τι θα γινόταν αν μπορούσα να φτιάξω κάτι που κάνει τη μέρα κάποιου λίγο καλύτερη;" Ειλικρινά, υπάρχει κάτι πιο κουλ από αυτό; +Και αυτό που ακόμα μου προκαλεί πραγματικά ρίγη κάθε πρωί όταν ξυπνάω: κυριολεκτικά τα *πάντα* ψηφιακά στη ζωή σου ξεκίνησαν από κάποιον σαν εσένα, πιθανώς καθισμένο με τις πιτζάμες και ένα φλιτζάνι καφέ, να πληκτρολογεί κώδικα στο λάπτοπ του. Αυτό το φίλτρο του Instagram που σε κάνει να φαίνεσαι άψογος; Κάποιος το κωδικοποίησε. Η πρόταση που σε οδήγησε στο νέο αγαπημένο σου τραγούδι; Ένας προγραμματιστής έφτιαξε αυτόν τον αλγόριθμο. Η εφαρμογή που σε βοηθά να μοιράζεις τους λογαριασμούς του δείπνου με φίλους; Ναι, κάποιος σκέφτηκε "αυτό είναι εκνευριστικό, σίγουρα μπορώ να το διορθώσω" και μετά... το έκανε! -✅ **Κυνήγι Διασκεδαστικού Γεγονότος**: Να κάτι πολύ ωραίο για να κοιτάξεις όταν έχεις λίγο ελεύθερο χρόνο – ποιος νομίζεις ότι ήταν ο πρώτος προγραμματιστής υπολογιστή στον κόσμο; Θα σου δώσω μια υπόδειξη: δεν είναι απαραίτητα αυτός που περιμένεις! Η ιστορία πίσω από αυτό το άτομο είναι απολύτως συναρπαστική και δείχνει ότι ο προγραμματισμός πάντα είχε να κάνει με τη δημιουργική επίλυση προβλημάτων και το να σκέφτεσαι έξω από το κουτί. +Όταν μάθεις να προγραμματίζεις, δεν μαθαίνεις απλά μια νέα δεξιότητα – γίνεσαι μέρος αυτής της απίστευτης κοινότητας ανθρώπων που λύνουν προβλήματα και περνούν τις μέρες τους σκεπτόμενοι, "τι θα γινόταν αν μπορούσα να φτιάξω κάτι που κάνει τη μέρα κάποιου λίγο καλύτερη;" Ειλικρινά, υπάρχει κάτι πιο κουλ από αυτό; + +✅ **Κυνήγι Διασκεδαστικού Γεγονότος**: Εδώ είναι κάτι πολύ ενδιαφέρον για να ψάξεις όταν έχεις λίγο χρόνο – ποιος νομίζεις ότι ήταν ο πρώτος προγραμματιστής υπολογιστών στον κόσμο; Θα σου δώσω μια υπόδειξη: ίσως να μην είναι αυτό που περιμένεις! Η ιστορία αυτής της προσωπικότητας είναι απολύτως συναρπαστική και δείχνει ότι ο προγραμματισμός πάντα είχε να κάνει με τη δημιουργική επίλυση προβλημάτων και το να σκέφτεσαι έξω από τα συνηθισμένα. ### 🧠 **Ώρα Ελέγχου: Πώς Νιώθεις;** **Πάρε μια στιγμή να σκεφτείς:** -- Σου βγάζει νόημα τώρα η ιδέα του "να δίνεις οδηγίες στους υπολογιστές"; -- Μπορείς να σκεφτείς μια καθημερινή εργασία που θα ήθελες να αυτοματοποιήσεις με προγραμματισμό; -- Ποιες ερωτήσεις σου έρχονται στο μυαλό για όλο αυτό τον προγραμματισμό; +- Καταλαβαίνεις τώρα την ιδέα του "δίνοντας οδηγίες σε υπολογιστές"; +- Μπορείς να σκεφτείς μια καθημερινή δουλειά που θα ήθελες να αυτοματοποιήσεις με προγραμματισμό; +- Ποιες ερωτήσεις σου έρχονται στο μυαλό σχετικά με αυτόν τον προγραμματισμό; -> **Να θυμάσαι**: Είναι απόλυτα φυσιολογικό αν μερικές έννοιες σου φαίνονται ασαφείς τώρα. Ο προγραμματισμός είναι σαν να μαθαίνεις μια νέα γλώσσα – χρειάζεται χρόνος για να δημιουργηθούν οι νευρωνικές διαδρομές στον εγκέφαλο. Πάς πολύ καλά! +> **Να θυμάσαι**: Είναι απόλυτα φυσιολογικό αν μερικές έννοιες φαίνονται θολές τώρα. Το να μαθαίνεις προγραμματισμό είναι σαν να μαθαίνεις μια νέα γλώσσα – παίρνει χρόνο για να δημιουργήσει ο εγκέφαλός σου αυτές τις νευρωνικές διαδρομές. Τα καταφέρνεις υπέροχα! ## Οι Γλώσσες Προγραμματισμού Είναι Σαν Διάφορες Γεύσεις Μαγείας -Εντάξει, αυτό ίσως ακουστεί περίεργο, αλλά μείνε μαζί μου – οι γλώσσες προγραμματισμού είναι πολύ σαν διαφορετικά είδη μουσικής. Σκέψου το: έχεις jazz, που είναι ομαλή και αυτοσχεδιαστική, rock που είναι δυνατή και απλή, κλασική μουσική που είναι κομψή και δομημένη, και hip-hop που είναι δημιουργική και εκφραστική. Κάθε στυλ έχει τη δική του ατμόσφαιρα, τη δική του κοινότητα παθιασμένων θαυμαστών και το καθένα είναι τέλειο για διαφορετικές διαθέσεις και περιστάσεις. +Εντάξει, αυτό θα ακούγεται παράξενο, αλλά μείνε μαζί μου – οι γλώσσες προγραμματισμού μοιάζουν πολύ με διαφορετικά είδη μουσικής. Σκέψου το: έχεις τζαζ, που είναι ομαλή και αυτοσχεδιαστική, ροκ που είναι δυναμική και απλή, κλασική που είναι κομψή και δομημένη, και χιπ-χοπ που είναι δημιουργική και εκφραστική. Κάθε στυλ έχει τη δική του ατμόσφαιρα, τη δική του κοινότητα παθιασμένων θαυμαστών, και το καθένα είναι τέλειο για διαφορετικές διαθέσεις και περιστάσεις. -Οι γλώσσες προγραμματισμού λειτουργούν ακριβώς έτσι! Δεν θα έγραφες το ίδιο παιχνίδι για κινητά με γλώσσα που χρησιμοποιείς για να επεξεργαστείς τεράστια κλιματικά δεδομένα, όπως δεν θα άκουγες death metal σε τάξη γιόγκα (τουλάχιστον σε περισσότερες τάξεις γιόγκα! 😄). +Οι γλώσσες προγραμματισμού λειτουργούν ακριβώς έτσι! Δεν θα χρησιμοποιούσες την ίδια γλώσσα για να φτιάξεις ένα διασκεδαστικό παιχνίδι για κινητά που θα χρησιμοποιούσες για να επεξεργαστείς μεγάλα ποσά δεδομένων για το κλίμα, όπως δεν θα άκουγες ντεθ μέταλ σε μάθημα γιόγκα (εντάξει, στις περισσότερες γιόγκα! 😄). -Αλλά κάνε μου την χάρη, κάθε φορά που το σκέφτομαι με εκπλήσσει: αυτές οι γλώσσες είναι σαν να έχεις τον πιο υπομονετικό, λαμπρό διερμηνέα στον κόσμο καθισμένο δίπλα σου. Μπορείς να εκφράσεις τις ιδέες σου με τρόπο φυσικό στον ανθρώπινο εγκέφαλό σου και αυτοί αναλαμβάνουν όλη την πολύπλοκη δουλειά της μετάφρασης σε 1 και 0 που μιλάνε οι υπολογιστές. Είναι σαν να έχεις έναν φίλο που μιλάει τέλεια και τις δύο γλώσσες, "ανθρώπινης δημιουργικότητας" και "λογικής υπολογιστή" – και δεν κουράζεται ποτέ, δεν χρειάζεται διαλείμματα για καφέ και ποτέ δεν σε κρίνει αν ρωτήσεις ξανά την ίδια ερώτηση! +Αλλά αυτό που με αφήνει έκπληκτο κάθε φορά που το σκέφτομαι: αυτές οι γλώσσες είναι σαν να έχεις τον πιο υπομονετικό, λαμπρό διερμηνέα στον κόσμο δίπλα σου. Μπορείς να εκφράσεις τις ιδέες σου με τρόπο που νιώθεις φυσικός για τον ανθρώπινο εγκέφαλό σου, και αυτοί αναλαμβάνουν όλη τη πολύπλοκη δουλειά του να το μεταφράσουν στα 1 και 0 που μιλάνε οι υπολογιστές. Είναι σαν να έχεις έναν φίλο που μιλά άπταιστα και τις δύο "ανθρώπινη δημιουργικότητα" και "λογική υπολογιστή" – και ποτέ δεν κουράζεται, δεν χρειάζεται διάλειμμα για καφέ και δεν σε κρίνει αν ρωτήσεις την ίδια ερώτηση δύο φορές! ### Δημοφιλείς Γλώσσες Προγραμματισμού και Χρήσεις τους ```mermaid mindmap root((Γλώσσες Προγραμματισμού)) - Ανάπτυξη Ιστού + Web Development JavaScript Μαγεία Frontend Διαδραστικές Ιστοσελίδες TypeScript JavaScript + Τύποι Επιχειρησιακές Εφαρμογές - Δεδομένα & ΤΝ + Data & AI Python Επιστήμη Δεδομένων Μηχανική Μάθηση - Αυτοματισμός + Αυτοματοποίηση R Στατιστική Έρευνα - Κινητές Εφαρμογές + Mobile Apps Java Android Επιχειρήσεις @@ -109,7 +110,7 @@ mindmap Kotlin Σύγχρονο Android Πολυπλατφορμικό - Συστήματα & Απόδοση + Systems & Performance C++ Παιχνίδια Κρίσιμη Απόδοση @@ -120,41 +121,41 @@ mindmap Υπηρεσίες Νέφους Κλιμακούμενο Backend ``` -| Γλώσσα | Καλύτερα για | Γιατί είναι δημοφιλής | -|----------|----------|------------------| -| **JavaScript** | Ανάπτυξη ιστοσελίδων, διεπαφές χρήστη | Τρέχει στους περιηγητές και υποστηρίζει διαδραστικές ιστοσελίδες | -| **Python** | Επιστήμη δεδομένων, αυτοματοποίηση, AI | Εύκολη στην ανάγνωση και μάθηση, ισχυρές βιβλιοθήκες | +| Γλώσσα | Καλύτερη για | Γιατί Είναι Δημοφιλής | +|---------|-----------|----------------------| +| **JavaScript** | Ανάπτυξη ιστοσελίδων, διεπαφές χρήστη | Τρέχει στους φυλλομετρητές και τροφοδοτεί διαδραστικές ιστοσελίδες | +| **Python** | Επιστήμη δεδομένων, αυτοματοποίηση, AI | Εύκολη στην ανάγνωση και εκμάθηση, ισχυρές βιβλιοθήκες | | **Java** | Επιχειρησιακές εφαρμογές, εφαρμογές Android | Ανεξάρτητη πλατφόρμα, ανθεκτική σε μεγάλα συστήματα | | **C#** | Εφαρμογές Windows, ανάπτυξη παιχνιδιών | Ισχυρή υποστήριξη από το οικοσύστημα της Microsoft | -| **Go** | Υπηρεσίες νέφους, συστήματα backend | Γρήγορη, απλή, σχεδιασμένη για σύγχρονους υπολογιστές | +| **Go** | Υπηρεσίες cloud, backend συστήματα | Γρήγορη, απλή, σχεδιασμένη για σύγχρονη πληροφορική | -### Γλώσσες Υψηλού Επίπέδου έναντι Χαμηλού Επίπεδου +### Γλώσσες Υψηλού Επίπεδου vs. Χαμηλού Επίπεδου -Εντάξει, αυτή ήταν ειλικρινά η έννοια που "έσπασε" το μυαλό μου όταν ξεκίνησα, οπότε θα μοιραστώ την αναλογία που τελικά μου έκανε κλικ – και ελπίζω να σε βοηθήσει και εσένα! +Εντάξει, αυτή ήταν ειλικρινά η έννοια που μου έσπασε το μυαλό όταν ξεκίνησα, οπότε θα μοιραστώ την αναλογία που τελικά με βοήθησε να την καταλάβω – και ελπίζω να σε βοηθήσει κι εσένα! -Φαντάσου ότι επισκέπτεσαι μια χώρα όπου δεν μιλάς τη γλώσσα και απελπισμένα πρέπει να βρεις την πλησιέστερη τουαλέτα (έχουμε περάσει όλοι από αυτό, σωστά; 😅): +Φαντάσου ότι βρίσκεσαι σε μια χώρα όπου δεν μιλάς τη γλώσσα, και χρειάζεσαι απεγνωσμένα να βρεις την πιο κοντινή τουαλέτα (όλοι έχουμε βρεθεί εκεί, σωστά; 😅): -- **Ο προγραμματισμός χαμηλού επιπέδου** είναι σαν να μαθαίνεις τόσο καλά τη τοπική διάλεκτο που μπορείς να μιλήσεις με την γιαγιά που πουλάει φρούτα στη γωνία, χρησιμοποιώντας πολιτισμικές αναφορές, τοπική αργκό και αστεία που καταλαβαίνει μόνο κάποιος που μεγάλωσε εκεί. Πολύ εντυπωσιακό και απίστευτα αποδοτικό... αν είσαι άπταιστος! Αλλά αρκετά συντριπτικό όταν απλά ψάχνεις για τουαλέτα. +- **Ο προγραμματισμός χαμηλού επιπέδου** είναι σαν να μαθαίνεις τη ντόπια διάλεκτο τόσο καλά που μπορείς να συνομιλήσεις με τη γιαγιά που πουλάει φρούτα στη γωνία χρησιμοποιώντας πολιτισμικές αναφορές, τοπικά ιδιώματα και αστεία που μόνο κάποιος που μεγάλωσε εκεί θα καταλάβαινε. Πολύ εντυπωσιακό και απίστευτα αποδοτικό... αν τυχαίνει να μιλάς την γλώσσα! Αλλά αρκετά συντριπτικό όταν απλώς προσπαθείς να βρεις ένα μπάνιο. -- **Ο προγραμματισμός υψηλού επιπέδου** είναι σαν να έχεις αυτόν τον υπέροχο ντόπιο φίλο που απλά σε καταλαβαίνει. Μπορείς να πεις "Πραγματικά πρέπει να βρω μια τουαλέτα" στα απλά αγγλικά και εκείνος να μεταφράσει όλη την πολιτισμική γλώσσα και να σου δώσει οδηγίες που βγάζουν απόλυτο νόημα στον εγκέφαλό σου που δεν είναι ντόπιος. +- **Ο προγραμματισμός υψηλού επιπέδου** είναι σαν να έχεις αυτόν τον εκπληκτικό ντόπιο φίλο που σε καταλαβαίνει. Μπορείς να πεις "Πραγματικά χρειάζομαι να βρω μια τουαλέτα" στα απλά αγγλικά, και αυτοί αναλαμβάνουν όλη τη μετάφραση στην κουλτούρα και σου δίνουν οδηγίες με τρόπο που έχει απόλυτο νόημα για το μη-ντόπιο μυαλό σου. Σε όρους προγραμματισμού: -- **Οι γλώσσες χαμηλού επιπέδου** (όπως Assembly ή C) σου επιτρέπουν να έχεις απίστευτα λεπτομερείς συζητήσεις με το πραγματικό υλικό του υπολογιστή, αλλά πρέπει να σκέφτεσαι σαν μηχανή, που είναι... ας το πούμε, μεγάλη πνευματική αλλαγή! -- **Οι γλώσσες υψηλού επιπέδου** (όπως JavaScript, Python ή C#) σε αφήνουν να σκέφτεσαι σαν άνθρωπος ενώ αυτές διαχειρίζονται όλη τη μηχανική ορολογία στα παρασκήνια. Επιπλέον, έχουν αυτές τις απίστευτα φιλόξενες κοινότητες γεμάτες ανθρώπους που θυμούνται πώς ήταν να είσαι αρχάριος και πραγματικά θέλουν να βοηθήσουν! +- Οι **γλώσσες χαμηλού επιπέδου** (όπως Assembly ή C) σου επιτρέπουν να έχεις απίστευτα λεπτομερείς συνομιλίες με το υλικό του υπολογιστή, αλλά πρέπει να σκέφτεσαι σαν μηχανή, το οποίο... ας πούμε ότι είναι αρκετά μεγάλο άλμα νοητικά! +- Οι **γλώσσες υψηλού επιπέδου** (όπως JavaScript, Python ή C#) σου επιτρέπουν να σκέφτεσαι σαν άνθρωπος ενώ αυτοί αναλαμβάνουν όλη τη "μηχανική γλώσσα" πίσω από τα παρασκήνια. Επιπλέον, έχουν απίστευτες, φιλόξενες κοινότητες γεμάτες ανθρώπους που θυμούνται πώς ήταν να είσαι νέος και πραγματικά θέλουν να βοηθήσουν! -Μαντέψτε με ποια θα σε προτείνω να ξεκινήσεις; 😉 Οι γλώσσες υψηλού επιπέδου είναι σαν τις βοηθητικές ρόδες που δεν θέλεις να βγάλεις ποτέ γιατί κάνουν όλη την εμπειρία πολύ πιο απολαυστική! +Μάντεψε με ποιο ξεκινάω να προτείνω; 😉 Οι γλώσσες υψηλού επιπέδου είναι σαν να έχεις βοηθητικές ρόδες που δεν θέλεις ποτέ να αφαιρέσεις γιατί κάνουν όλη την εμπειρία πολύ πιο ευχάριστη! ```mermaid flowchart TB A["👤 Ανθρώπινη Σκέψη:
'Θέλω να υπολογίσω αριθμούς Fibonacci'"] --> B{Επίπεδο Γλώσσας} - B -->|Υψηλού Επιπέδου| C["🌟 JavaScript/Python
Εύκολο στην ανάγνωση και γραφή"] + B -->|Υψηλού Επιπέδου| C["🌟 JavaScript/Python
Εύκολο στην ανάγνωση και τη συγγραφή"] B -->|Χαμηλού Επιπέδου| D["⚙️ Assembly/C
Άμεσος έλεγχος υλικού"] C --> E["📝 Γράψε: fibonacci(10)"] D --> F["📝 Γράψε: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 Κατανόηση Υπολογιστή:
Ο μεταφραστής χειρίζεται την πολυπλοκότητα"] + E --> G["🤖 Κατανόηση Υπολογιστή:
Ο μεταφραστής διαχειρίζεται την πολυπλοκότητα"] F --> G G --> H["💻 Ίδιο Αποτέλεσμα:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -163,15 +164,15 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### Άφησέ Με να Σου Δείξω Γιατί Οι Γλώσσες Υψηλού Επίπεδου Είναι Πολύ Φιλικές +### Άσε Με Να Σου Δείξω Γιατί οι Γλώσσες Υψηλού Επιπέδου Είναι Πιο Φιλικές -Εντάξει, πρόκειται να σου δείξω κάτι που δείχνει τέλεια γιατί αγάπησα τις γλώσσες υψηλού επιπέδου, αλλά πρώτα – πρέπει να μου υποσχεθείς κάτι. Όταν δεις το πρώτο παράδειγμα κώδικα, μην πανικοβληθείς! Προορίζεται να φαίνεται τρομακτικό. Αυτό είναι το σημείο που θέλω να κάνω! +Εντάξει, θα σου δείξω κάτι που αναδεικνύει τέλεια γιατί ερωτεύτηκα τις γλώσσες υψηλού επιπέδου, αλλά πρώτα – θέλω να μου υποσχεθείς κάτι. Όταν δεις το πρώτο παράδειγμα κώδικα, μην πανικοβληθείς! Είναι φυσιολογικό να φαίνεται λίγο τρομακτικό. Αυτό ακριβώς τονίζω! -Θα δούμε το ίδιο ακριβώς έργο γραμμένο σε δύο τελείως διαφορετικά στυλ. Και τα δύο δημιουργούν την ακολουθία Fibonacci – αυτό το όμορφο μαθηματικό μοτίβο όπου κάθε αριθμός είναι το άθροισμα των δύο προηγούμενων: 0, 1, 1, 2, 3, 5, 8, 13... (Διασκεδαστικό γεγονός: θα βρεις αυτό το μοτίβο κυριολεκτικά παντού στη φύση – στις σπείρες σπόρων ηλίανθου, στα μοτίβα κουκουναριών, ακόμα και στο πώς σχηματίζονται οι γαλαξίες!) +Θα δούμε την ίδια ακριβώς εργασία γραμμένη σε δύο εντελώς διαφορετικά στυλ. Και τα δύο δημιουργούν την ακολουθία Fibonacci – είναι ένα όμορφο μαθηματικό μοτίβο όπου κάθε αριθμός είναι το άθροισμα των δύο προηγουμένων: 0, 1, 1, 2, 3, 5, 8, 13... (Διασκεδαστικό γεγονός: θα βρεις αυτό το μοτίβο κυριολεκτικά παντού στη φύση – στο σπείρωμα των ηλιόσπορων, στα μοτίβα των κουκουναριών, ακόμα και στον τρόπο σχηματισμού των γαλαξιών!) -Έτοιμος να δεις τη διαφορά; Πάμε! +Έτοιμος να δεις τη διαφορά; Ας πάμε! -**Γλώσσα υψηλού επιπέδου (JavaScript) – Ανθρώπινη φιλική:** +**Γλώσσα υψηλού επιπέδου (JavaScript) – Φιλική στον άνθρωπο:** ```javascript // Βήμα 1: Βασική ρύθμιση Fibonacci @@ -182,18 +183,18 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Αυτό κάνει ο κώδικας:** -- **Δηλώνει** μια σταθερά για να καθορίσει πόσους αριθμούς Fibonacci θέλουμε να δημιουργήσουμε -- **Αρχικοποιεί** δύο μεταβλητές για να παρακολουθεί τους τρέχοντες και επόμενους αριθμούς στην ακολουθία -- **Ορίζει** τις αρχικές τιμές (0 και 1) που καθορίζουν το μοτίβο Fibonacci -- **Εμφανίζει** ένα μήνυμα κεφαλίδας για να ταυτοποιήσει την έξοδο μας +**Αυτό κάνει αυτός ο κώδικας:** +- **Δηλώνει** μια σταθερά που καθορίζει πόσους αριθμούς Fibonacci θέλουμε να παράγουμε +- **Αρχικοποιεί** δύο μεταβλητές για να παρακολουθεί τους τρέχοντες και τους επόμενους αριθμούς της σειράς +- **Ορίζει** τις αρχικές τιμές (0 και 1) που καθορίζουν το μοτίβο Fibonacci +- **Εμφανίζει** ένα επικεφαλίδα μήνυμα για να αναγνωρίσουμε την έξοδο μας ```javascript -// Βήμα 2: Δημιουργήστε τη σειρά με έναν βρόχο +// Βήμα 2: Δημιουργήστε την ακολουθία με έναν βρόχο for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Υπολογίστε τον επόμενο αριθμό στη σειρά + // Υπολογίστε τον επόμενο αριθμό στην ακολουθία const sum = current + next; current = next; next = sum; @@ -201,10 +202,10 @@ for (let i = 0; i < fibonacciCount; i++) { ``` **Αναλύοντας τι συμβαίνει εδώ:** -- **Επαναλαμβάνει** μέσω κάθε θέσης στην ακολουθία μας χρησιμοποιώντας έναν βρόχο `for` -- **Εμφανίζει** κάθε αριθμό με τη θέση του χρησιμοποιώντας τη μορφοποίηση προτύπου συμβολοσειράς -- **Υπολογίζει** τον επόμενο αριθμό Fibonacci προσθέτοντας τις τρέχουσες και επόμενες τιμές -- **Ενημερώνει** τις μεταβλητές παρακολούθησης για να προχωρήσει στην επόμενη επανάληψη +- **Κάνει βρόχο** μέσα από κάθε θέση στη σειρά μας χρησιμοποιώντας έναν `for` βρόχο +- **Εμφανίζει** κάθε αριθμό με τη θέση του χρησιμοποιώντας μορφοποίηση template literal +- **Υπολογίζει** τον επόμενο αριθμό Fibonacci προσθέτοντας την τρέχουσα με την επόμενη τιμή +- **Ενημερώνει** τις μεταβλητές παρακολούθησης για να μετακινηθεί στον επόμενο γύρο ```javascript // Βήμα 3: Σύγχρονη λειτουργική προσέγγιση @@ -224,10 +225,10 @@ console.log(fibSequence); ``` **Στο παραπάνω έχουμε:** -- **Δημιουργήσει** μια επαναχρησιμοποιήσιμη συνάρτηση χρησιμοποιώντας τη σύγχρονη σύνταξη βέλους -- **Κατασκευάσει** έναν πίνακα για να αποθηκεύσουμε την πλήρη ακολουθία αντί να εμφανίζουμε έναν-έναν -- **Χρησιμοποιήσει** δεικτοδότηση πίνακα για να υπολογίσουμε κάθε νέο αριθμό από τις προηγούμενες τιμές -- **Επιστρέψει** την πλήρη ακολουθία για ευέλικτη χρήση σε άλλα μέρη του προγράμματος +- **Δημιουργήσει** μια επαναχρησιμοποιήσιμη συνάρτηση χρησιμοποιώντας σύγχρονη σύνταξη arrow function +- **Κατασκευάσει** έναν πίνακα για να αποθηκεύσουμε όλη τη σειρά αντί να την εμφανίζουμε έναν έναν +- **Χρησιμοποιήσει** δείκτες πίνακα για να υπολογίσουμε κάθε νέο αριθμό από τις προηγούμενες τιμές +- **Επιστρέψει** όλη τη σειρά για ευέλικτη χρήση σε άλλα μέρη του προγράμματός μας **Γλώσσα χαμηλού επιπέδου (ARM Assembly) – Φιλική στον υπολογιστή:** @@ -256,27 +257,28 @@ back add r0,r1 end ``` -Παρατήρησε πώς η έκδοση JavaScript διαβάζεται σχεδόν σαν αγγλικές οδηγίες, ενώ η έκδοση Assembly χρησιμοποιεί κρυπτογραφημένες εντολές που ελέγχουν άμεσα τον επεξεργαστή του υπολογιστή. Και οι δύο πραγματοποιούν το ίδιο έργο, αλλά η γλώσσα υψηλού επιπέδου είναι πολύ πιο εύκολη για τους ανθρώπους να καταλάβουν, να γράψουν και να διατηρήσουν. +Παρατήρησε πώς η έκδοση JavaScript διαβάζεται σχεδόν σαν οδηγίες στα Αγγλικά, ενώ η έκδοση Assembly χρησιμοποιεί κρυπτογραφικές εντολές που ελέγχουν απευθείας τον επεξεργαστή του υπολογιστή. Και οι δύο εκτελούν την ίδια ακριβώς εργασία, αλλά η γλώσσα υψηλού επιπέδου είναι πολύ πιο εύκολη για τους ανθρώπους να καταλάβουν, να γράψουν και να συντηρήσουν. **Κύριες διαφορές που θα παρατηρήσεις:** -- **Αναγνωσιμότητα**: Η JavaScript χρησιμοποιεί περιγραφικά ονόματα όπως `fibonacciCount` ενώ η Assembly χρησιμοποιεί κρυπτογραφικές ετικέτες όπως `r0`, `r1` -- **Σχόλια**: Οι γλώσσες υψηλού επιπέδου ενθαρρύνουν επεξηγηματικά σχόλια που κάνουν τον κώδικα αυτο-τεκμηριωμένο -- **Δομή**: Η λογική ροή του JavaScript ταιριάζει με τον τρόπο που οι άνθρωποι σκέφτονται για τα προβλήματα βήμα προς βήμα -- **Συντήρηση**: Η ενημέρωση της έκδοσης JavaScript για διάφορες απαιτήσεις είναι απλή και καθαρή +- **Αναγνωσιμότητα**: Η JavaScript χρησιμοποιεί περιγραφικά ονόματα όπως `fibonacciCount` ενώ η Assembly χρησιμοποιεί κρυπτικά ετικέτες όπως `r0`, `r1` +- **Σχόλια**: Οι γλώσσες υψηλού επιπέδου ενθαρρύνουν επεξηγηματικά σχόλια που κάνουν τον κώδικα αυτο-τεκμηριούμενο +- **Δομή**: Η λογική ροή της JavaScript ταιριάζει με τον τρόπο που οι άνθρωποι σκέφτονται τα προβλήματα βήμα-βήμα +- **Συντήρηση**: Η ενημέρωση της έκδοσης JavaScript για διαφορετικές απαιτήσεις είναι απλή και ξεκάθαρη + +✅ **Σχετικά με τη σειρά Fibonacci**: Αυτό το απόλυτα υπέροχο αριθμητικό μοτίβο (όπου κάθε αριθμός ισούται με το άθροισμα των δύο προηγούμενων: 0, 1, 1, 2, 3, 5, 8...) εμφανίζεται κυριολεκτικά *παντού* στη φύση! Θα το βρείτε στις σπείρες των ηλίανθων, στα μοτίβα των πετάλων πεύκου, στον τρόπο που καμπυλώνουν τα κελύφη του ναυτίλου, και ακόμα στον τρόπο που αναπτύσσονται τα κλαδιά των δέντρων. Είναι πραγματικά εντυπωσιακό το πώς τα μαθηματικά και ο κώδικας μπορούν να μας βοηθήσουν να κατανοήσουμε και να αναπαράγουμε τα μοτίβα που η φύση χρησιμοποιεί για να δημιουργεί ομορφιά! -✅ **Σχετικά με την ακολουθία Fibonacci**: Αυτό το απολύτως υπέροχο μοτίβο αριθμών (όπου κάθε αριθμός ισούται με το άθροισμα των δύο προηγούμενων: 0, 1, 1, 2, 3, 5, 8...) εμφανίζεται κυριολεκτικά *παντού* στη φύση! Θα το βρείτε στις σπείρες των ηλιοτροπίων, στα μοτίβα των κουκουναριών, στον τρόπο που καμπυλώνουν τα κοχύλια ναυτίλου, και ακόμα και στο πώς μεγαλώνουν τα κλαδιά των δέντρων. Είναι πραγματικά εντυπωσιακό το πώς τα μαθηματικά και ο κώδικας μπορούν να μας βοηθήσουν να κατανοήσουμε και να αναπαράγουμε τα μοτίβα που χρησιμοποιεί η φύση για να δημιουργήσει ομορφιά! -## Τα Θεμελιώδη Στοιχεία Που Δημιουργούν Τη Μαγεία +## Τα Τούβλα που Δημιουργούν τη Μαγεία -Εντάξει, τώρα που είδες πώς μοιάζουν οι γλώσσες προγραμματισμού σε δράση, ας αναλύσουμε τα βασικά κομμάτια που αποτελούν κυριολεκτικά κάθε πρόγραμμα που έχει γράψει ποτέ άνθρωπος. Σκέψου τα σαν τα απαραίτητα υλικά στην αγαπημένη σου συνταγή – μόλις καταλάβεις τι κάνει το καθένα, θα μπορείς να διαβάζεις και να γράφεις κώδικα σε σχεδόν οποιαδήποτε γλώσσα! +Εντάξει, τώρα που είδατε πώς μοιάζουν οι γλώσσες προγραμματισμού στην πράξη, ας αναλύσουμε τα θεμελιώδη κομμάτια που απαρτίζουν κυριολεκτικά κάθε πρόγραμμα που έχει γραφτεί ποτέ. Σκεφτείτε τα σαν τα βασικά υλικά στην αγαπημένη σας συνταγή – μόλις καταλάβετε τι κάνει το καθένα, θα μπορείτε να διαβάζετε και να γράφετε κώδικα σχεδόν σε οποιαδήποτε γλώσσα! -Αυτό είναι κάπως σαν να μαθαίνεις τη γραμματική του προγραμματισμού. Θυμάσαι στο σχολείο όταν μάθαινες για ουσιαστικά, ρήματα και πώς να σχηματίζεις προτάσεις; Ο προγραμματισμός έχει τη δική του έκδοση γραμματικής, και ειλικρινά, είναι πολύ πιο λογική και συγχωρητική από τη γραμματική της Αγγλικής γλώσσας! 😄 +Αυτό μοιάζει κάπως με το να μαθαίνεις τη γραμματική του προγραμματισμού. Θυμηθείτε όταν στο σχολείο μάθατε για ουσιαστικά, ρήματα και πώς να φτιάχνετε προτάσεις; Ο προγραμματισμός έχει τη δική του έκδοση γραμματικής και ειλικρινά, είναι πολύ πιο λογική και επιεικής από ό,τι ήταν η αγγλική γραμματική! 😄 -### Δηλώσεις: Οι Οδηγίες Βήμα προς Βήμα +### Δηλώσεις: Οι Οδηγίες Βήμα-Βήμα -Ας ξεκινήσουμε με τις **δηλώσεις** – αυτές είναι σαν μεμονωμένες προτάσεις σε μια συνομιλία με τον υπολογιστή σου. Κάθε δήλωση λέει στον υπολογιστή να κάνει ένα συγκεκριμένο πράγμα, σαν να δίνεις οδηγίες: "Στρίψε αριστερά εδώ", "Σταμάτα στο κόκκινο φανάρι", "Πάρκαρε εκεί". +Ας ξεκινήσουμε με τις **δηλώσεις** – είναι σαν μεμονωμένες προτάσεις σε μια συζήτηση με τον υπολογιστή σας. Κάθε δήλωση λέει στον υπολογιστή να κάνει ένα συγκεκριμένο πράγμα, κάπως σαν να δίνετε οδηγίες: "Στρίψε αριστερά εδώ," "Σταμάτα στο κόκκινο φανάρι," "Παρκάρισε εκεί." -Αυτό που λατρεύω στις δηλώσεις είναι πόσο ευανάγνωστες είναι συνήθως. Δες αυτό: +Αυτό που μου αρέσει στις δηλώσεις είναι το πόσο αναγνώσιμες είναι συνήθως. Ρίξτε μια ματιά: ```javascript // Βασικές δηλώσεις που εκτελούν μεμονωμένες ενέργειες @@ -284,31 +286,31 @@ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Αυτό που κάνει αυτός ο κώδικας:** -- **Δηλώνει** μια σταθερή μεταβλητή για να αποθηκεύσει το όνομα χρήστη -- **Εμφανίζει** ένα μήνυμα χαιρετισμού στην κονσόλα -- **Υπολογίζει** και αποθηκεύει το αποτέλεσμα μιας μαθηματικής λειτουργίας + +**Αυτό που κάνει ο κώδικας:** +- **Δηλώνει** μια σταθερά μεταβλητή για να αποθηκεύσει το όνομα ενός χρήστη +- **Εμφανίζει** ένα μήνυμα χαιρετισμού στην κονσόλα +- **Υπολογίζει** και αποθηκεύει το αποτέλεσμα μιας μαθηματικής πράξης ```javascript // Δηλώσεις που αλληλεπιδρούν με ιστοσελίδες document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**Βήμα προς βήμα, αυτό συμβαίνει:** -- **Τροποποιεί** τον τίτλο της ιστοσελίδας που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης -- **Αλλάζει** το χρώμα φόντου ολόκληρης της σελίδας -### Μεταβλητές: Το Σύστημα Μνήμης Του Προγράμματός Σου +**Βήμα-βήμα, αυτό συμβαίνει:** +- **Τροποποιεί** τον τίτλο της ιστοσελίδας που εμφανίζεται στην καρτέλα του προγράμματος περιήγησης +- **Αλλάζει** το χρώμα φόντου ολόκληρου του σώματος της σελίδας -Εντάξει, οι **μεταβλητές** είναι ειλικρινά μία από τις αγαπημένες μου έννοιες για διδασκαλία επειδή είναι τόσο παρόμοιες με πράγματα που ήδη χρησιμοποιείς κάθε μέρα! +### Μεταβλητές: Το Σύστημα Μνήμης του Προγράμματός Σας -Σκέψου για λίγο τη λίστα επαφών του τηλεφώνου σου. Δεν απομνημονεύεις όλους τους αριθμούς τηλεφώνου – αντίθετα, αποθηκεύεις "Μαμά", "Καλύτερος Φίλος" ή "Το Πιτσαρία Που Παραδίδει Έως Τις 2 ΠΜ" και αφήνεις το τηλέφωνό σου να θυμάται τους πραγματικούς αριθμούς. Οι μεταβλητές λειτουργούν ακριβώς με τον ίδιο τρόπο! Είναι σαν ετικετοποιημένα δοχεία όπου το πρόγραμμα μπορεί να αποθηκεύει πληροφορίες και να τις ανακαλεί αργότερα χρησιμοποιώντας ένα όνομα που βγάζει νόημα. +Εντάξει, οι **μεταβλητές** είναι ειλικρινά από τις αγαπημένες μου έννοιες για διδασκαλία επειδή μοιάζουν τόσο πολύ με πράγματα που ήδη χρησιμοποιείτε καθημερινά! -Αυτό που είναι πραγματικά κουλ: οι μεταβλητές μπορούν να αλλάζουν καθώς τρέχει το πρόγραμμα (γι' αυτό και λέγονται "μεταβλητές" – κατάλαβες τι έκαναν εκεί;). Ακριβώς όπως μπορείς να ενημερώνεις την επαφή ενός πιτσαρία όταν ανακαλύπτεις κάπου ακόμα καλύτερο, οι μεταβλητές μπορούν να ενημερώνονται καθώς το πρόγραμμα μαθαίνει νέα δεδομένα ή όταν οι καταστάσεις αλλάζουν! +Σκεφτείτε για μια στιγμή τη λίστα επαφών στο τηλέφωνό σας. Δεν απομνημονεύετε όλα τα τηλέφωνα – αντίθετα, αποθηκεύετε "Μαμά," "Καλύτερος Φίλος," ή "Εστιατόριο που Παραδίδει ως τις 2 π.μ." και αφήνετε το τηλέφωνο να θυμάται τους πραγματικούς αριθμούς. Οι μεταβλητές δουλεύουν ακριβώς το ίδιο! Είναι σαν δοχεία με ετικέτες όπου το πρόγραμμα μπορεί να αποθηκεύει πληροφορίες και να τις ανακτά αργότερα με ένα όνομα που έχει νόημα. -Άσε με να σου δείξω πόσο απλό και όμορφο μπορεί να είναι αυτό: +Αυτό που είναι πραγματικά ωραίο: οι μεταβλητές μπορούν να αλλάξουν καθώς τρέχει το πρόγραμμα (γι’ αυτό λέγονται "μεταβλητές" – καταλαβαίνετε το λογοπαίγνιο;). Ακριβώς όπως μπορεί να ενημερώσετε την επαφή του εστιατορίου πίτσας όταν βρείτε κάτι καλύτερο, έτσι και οι μεταβλητές μπορούν να ενημερώνονται καθώς το πρόγραμμα μαθαίνει νέα πράγματα ή αλλάζουν οι συνθήκες! + +Ας δείξω πόσο όμορφα απλό μπορεί να είναι αυτό: ```javascript // Βήμα 1: Δημιουργία βασικών μεταβλητών @@ -317,26 +319,26 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Κατανόηση αυτών των εννοιών:** -- **Αποθήκευση** αμετάβλητων τιμών σε μεταβλητές `const` (όπως το όνομα του ιστότοπου) -- **Χρήση** `let` για τιμές που μπορούν να αλλάζουν μέσα στο πρόγραμμα -- **Ανάθεση** διαφορετικών τύπων δεδομένων: συμβολοσειρές (κείμενο), αριθμοί, και boolean (αληθές/ψευδές) -- **Επιλογή** περιγραφικών ονομάτων που εξηγούν τι αποθηκεύει κάθε μεταβλητή + +**Κατανόηση αυτών των εννοιών:** +- **Αποθηκεύει** αμετάβλητες τιμές σε `const` μεταβλητές (π.χ. όνομα ιστοσελίδας) +- **Χρησιμοποιεί** `let` για τιμές που μπορεί να αλλάζουν κατά τη διάρκεια του προγράμματος +- **Αναθέτει** διαφορετικούς τύπους δεδομένων: αλφαριθμητικά (κείμενο), αριθμούς και boolean (true/false) +- **Επιλέγει** περιγραφικά ονόματα που εξηγούν τι περιέχει κάθε μεταβλητή ```javascript -// Βήμα 2: Εργασία με αντικείμενα για ομαδοποίηση σχετικών δεδομένων +// Βήμα 2: Εργασία με αντικείμενα για την ομαδοποίηση σχετικών δεδομένων const weatherData = { location: "San Francisco", humidity: 65, windSpeed: 12 }; ``` - -**Στο παραπάνω έχουμε:** -- **Δημιουργήσει** ένα αντικείμενο για να ομαδοποιήσουμε σχετικές πληροφορίες καιρού -- **Οργανώσει** πολλά δεδομένα κάτω από ένα όνομα μεταβλητής -- **Χρησιμοποιήσει** ζεύγη κλειδί-τιμή για να ετικετοποιήσουμε κάθε πληροφορία ξεκάθαρα + +**Πάνω απ’ όλα, έχουμε:** +- **Δημιουργήσει** ένα αντικείμενο για να ομαδοποιήσουμε σχετικές πληροφορίες καιρού +- **Οργανώσει** πολλαπλές πληροφορίες κάτω από ένα όνομα μεταβλητής +- **Χρησιμοποιήσει** ζεύγη κλειδί-τιμής για να ετικετοποιήσουμε καθαρά κάθε κομμάτι πληροφορίας ```javascript // Βήμα 3: Χρήση και ενημέρωση μεταβλητών @@ -347,36 +349,36 @@ console.log(`Wind speed: ${weatherData.windSpeed} mph`); currentWeather = "cloudy"; temperature = 68; ``` - -**Ας κατανοήσουμε κάθε μέρος:** -- **Εμφάνιση** πληροφοριών χρησιμοποιώντας template literals με σύνταξη `${}` -- **Πρόσβαση** σε ιδιότητες αντικειμένων με τελεία (`weatherData.windSpeed`) -- **Ενημέρωση** μεταβλητών δηλωμένων με `let` για να αντανακλούν μεταβαλλόμενες συνθήκες -- **Συνδυασμός** πολλών μεταβλητών για δημιουργία νοημάτων μηνυμάτων + +**Ας κατανοήσουμε κάθε μέρος:** +- **Εμφανίζει** πληροφορίες χρησιμοποιώντας template literals με τη σύνταξη `${}` +- **Προσπελαύνει** τις ιδιότητες του αντικειμένου με σημειογραφία τελείας (`weatherData.windSpeed`) +- **Ενημερώνει** μεταβλητές δηλωμένες με `let` για να αντανακλούν αλλαγές στις συνθήκες +- **Συνδυάζει** πολλαπλές μεταβλητές για να δημιουργήσει νοηματικά μηνύματα ```javascript -// Βήμα 4: Σύγχρονο αποδόμημα για πιο καθαρό κώδικα +// Βήμα 4: Σύγχρονη αποδόμηση για πιο καθαρό κώδικα const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**Τι πρέπει να ξέρεις:** -- **Εξαγωγή** συγκεκριμένων ιδιοτήτων από αντικείμενα με αποδομητική ανάθεση -- **Δημιουργία** νέων μεταβλητών αυτόματα με τα ίδια ονόματα όπως τα κλειδιά των αντικειμένων -- **Απλοποίηση** του κώδικα αποφεύγοντας επαναλαμβανόμενη χρήση τελείας -### Ροή Ελέγχου: Διδάσκοντας Το Πρόγραμμά Σου Να Σκέφτεται +**Τι πρέπει να ξέρετε:** +- **Εξάγει** συγκεκριμένες ιδιότητες από αντικείμενα με την κατανομή (destructuring assignment) +- **Δημιουργεί** νέες μεταβλητές αυτόματα με τα ίδια ονόματα των κλειδιών του αντικειμένου +- **Απλοποιεί** τον κώδικα αποφεύγοντας την επαναλαμβανόμενη σημειογραφία τελείας -Εντάξει, εδώ ο προγραμματισμός γίνεται απολύτως εκπληκτικός! Η **ροή ελέγχου** ουσιαστικά μαθαίνει στο πρόγραμμα πώς να παίρνει έξυπνες αποφάσεις, ακριβώς όπως το κάνεις κι εσύ κάθε μέρα χωρίς καν να το συνειδητοποιείς. +### Έλεγχος Ροής: Διδάσκοντας το Πρόγραμμά Σας να Σκέφτεται -Φαντάσου το εξής: σήμερα το πρωί μάλλον πέρασες από κάτι σαν "Αν βρέχει, θα πάρω ομπρέλα. Αν κάνει κρύο, θα φορέσω μπουφάν. Αν αργώ, θα παραλείψω το πρωινό και θα πάρω καφέ στο δρόμο." Ο εγκέφαλός σου ακολουθεί αυτή την if-then λογική δεκάδες φορές κάθε μέρα! +Εντάξει, εδώ γίνεται πραγματικά συναρπαστικό! Ο **έλεγχος ροής** είναι βασικά το να διδάσκεις το πρόγραμμα πώς να παίρνει έξυπνες αποφάσεις, ακριβώς όπως κάνετε εσείς κάθε μέρα χωρίς να το σκέφτεστε. -Αυτό είναι που κάνει τα προγράμματα να φαίνονται έξυπνα και ζωντανά, αντί να απλώς ακολουθούν κάποιο βαρετό και προβλέψιμο σενάριο. Μπορούν να δουν μια κατάσταση, να αξιολογήσουν τι συμβαίνει, και να ανταποκριθούν κατάλληλα. Είναι σαν να δίνεις στο πρόγραμμα ένα μυαλό που μπορεί να προσαρμοστεί και να κάνει επιλογές! +Φανταστείτε το εξής: σήμερα το πρωί πιθανόν κάνατε κάτι σαν "Αν βρέχει, θα πάρω ομπρέλα. Αν κάνει κρύο, θα φορέσω μπουφάν. Αν αργώ, θα παραλείψω το πρωινό και θα πάρω καφέ στο δρόμο." Ο εγκέφαλός σας ακολουθεί φυσικά αυτήν τη λογική αν-τότε δεκάδες φορές κάθε μέρα! -Θες να δεις πόσο όμορφα λειτουργεί αυτό; Άσε με να σου δείξω: +Αυτό κάνει τα προγράμματα να φαίνονται έξυπνα και ζωντανά, αντί απλά να ακολουθούν κάποιο βαρετό, προβλέψιμο σενάριο. Μπορούν πραγματικά να κοιτάξουν την κατάσταση, να αξιολογήσουν τι συμβαίνει και να ανταποκριθούν κατάλληλα. Σαν να δίνετε στο πρόγραμμά σας έναν εγκέφαλο που μπορεί να προσαρμοστεί και να παίρνει αποφάσεις! + +Θέλετε να δείτε πόσο όμορφα λειτουργεί; Ας δείξω: ```javascript -// Βήμα 1: Βασική συνθήκη λογικής +// Βήμα 1: Βασική λογική υπό συνθήκη const userAge = 17; if (userAge >= 18) { @@ -386,12 +388,12 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Αυτό που κάνει ο κώδικας:** -- **Ελέγχει** αν η ηλικία χρήστη πληροί την προϋπόθεση για ψήφο -- **Εκτελεί** διαφορετικά μπλοκ κώδικα με βάση το αποτέλεσμα της συνθήκης -- **Υπολογίζει** και εμφανίζει πόσος χρόνος μένει μέχρι να μπορεί να ψηφίσει αν είναι κάτω των 18 -- **Προσφέρει** συγκεκριμένη, χρήσιμη ανατροφοδότηση για κάθε σενάριο + +**Αυτό που κάνει ο κώδικας:** +- **Ελέγχει** αν η ηλικία του χρήστη πληροί την προϋπόθεση ψήφου +- **Εκτελεί** διαφορετικά μπλοκ κώδικα ανάλογα με το αποτέλεσμα της συνθήκης +- **Υπολογίζει** και εμφανίζει πόσος χρόνος απομένει μέχρι την ικανότητα ψήφου αν είναι κάτω των 18 +- **Προσφέρει** συγκεκριμένη και χρήσιμη ανατροφοδότηση για κάθε περίπτωση ```javascript // Βήμα 2: Πολλαπλές συνθήκες με λογικούς τελεστές @@ -406,23 +408,23 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Ανάλυση τι συμβαίνει εδώ:** -- **Συνδυάζει** πολλαπλές συνθήκες με τον τελεστή `&&` (και) -- **Δημιουργεί** ιεραρχία συνθηκών με `else if` για πολλαπλά σενάρια -- **Χειρίζεται** όλες τις πιθανές περιπτώσεις με μια τελική δήλωση `else` -- **Παρέχει** σαφή και πράξημο ανατροφοδότηση για κάθε διαφορετική κατάσταση + +**Ανάλυση όσων συμβαίνουν εδώ:** +- **Συνδυάζει** πολλαπλές προϋποθέσεις με τον τελεστή `&&` (και) +- **Δημιουργεί** ιεραρχία συνθηκών με `else if` για πολλαπλά σενάρια +- **Χειρίζεται** όλες τις πιθανές περιπτώσεις με μια τελευταία δήλωση `else` +- **Προσφέρει** σαφή και εφαρμόσιμη ανατροφοδότηση για κάθε διαφορετική κατάσταση ```javascript -// Βήμα 3: Συνοπτική συνθήκη με τον τριμερικό τελεστή +// Βήμα 3: Συνοπτική συνθήκη με τριαδικό τελεστή const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Τι πρέπει να θυμάσαι:** -- **Χρησιμοποίησε** τον τριαδικό τελεστή (`? :`) για απλές συνθήκες με δύο επιλογές -- **Γράψε** πρώτα τη συνθήκη, μετά `?`, μετά την αληθή περίπτωση, μετά `:`, και μετά την ψευδή περίπτωση -- **Εφάρμοσε** αυτό το μοτίβο όταν χρειάζεσαι να αναθέσεις τιμές βάσει συνθηκών + +**Τι πρέπει να θυμάστε:** +- **Χρησιμοποιείστε** τον τελεστή ternary (`? :`) για απλές συνθήκες με δύο επιλογές +- **Γράψτε** πρώτα τη συνθήκη, μετά το `?`, μετά το αποτέλεσμα αν αληθές, μετά το `:`, και τέλος το αποτέλεσμα αν ψευδές +- **Εφαρμόστε** αυτό το μοτίβο όταν χρειάζεται να αναθέσετε τιμές βάσει συνθηκών ```javascript // Βήμα 4: Διαχείριση πολλαπλών συγκεκριμένων περιπτώσεων @@ -444,55 +446,55 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**Αυτός ο κώδικας πετυχαίνει τα εξής:** -- **Ταιριάζει** την τιμή μιας μεταβλητής σε πολλές συγκεκριμένες περιπτώσεις -- **Ομαδοποιεί** παρόμοιες περιπτώσεις μαζί (εργάσιμες ημέρες έναντι σαββατοκύριακων) -- **Εκτελεί** το κατάλληλο μπλοκ κώδικα όταν βρεθεί ταύτιση -- **Περιλαμβάνει** μια `default` περίπτωση για την αντιμετώπιση απρόβλεπτων τιμών -- **Χρησιμοποιεί** δηλώσεις `break` για να εμποδίσει τον κώδικα να συνεχίσει στην επόμενη περίπτωση -> 💡 **Αναλογία από την πραγματική ζωή**: Σκέψου τη ροή ελέγχου σαν το πιο υπομονετικό GPS στον κόσμο που σου δίνει οδηγίες. Μπορεί να σου πει "Αν υπάρχει κίνηση στην Οδό Κεντρικής, πάρε τον αυτοκινητόδρομο. Αν ο δρόμος μπλοκάρεται από έργα, δοκίμασε τη διαδρομή με θέα." Τα προγράμματα χρησιμοποιούν ακριβώς αυτό το είδος λογικής για να ανταποκρίνονται έξυπνα σε διαφορετικές καταστάσεις και πάντα να προσφέρουν την καλύτερη δυνατή εμπειρία στους χρήστες. +**Αυτός ο κώδικας επιτυγχάνει:** +- **Ταιριάζει** την τιμή της μεταβλητής με πολλαπλές συγκεκριμένες περιπτώσεις +- **Ομαδοποιεί** παρόμοιες περιπτώσεις μαζί (εργάσιμες ημέρες έναντι σαββατοκύριακων) +- **Εκτελεί** το αντίστοιχο μπλοκ κώδικα όταν βρεθεί ταίριασμα +- **Περιλαμβάνει** μια περίπτωση `default` για να χειριστεί απρόβλεπτες τιμές +- **Χρησιμοποιεί** δηλώσεις `break` για να αποτρέψει τη συνέχεια στον επόμενο case + +> 💡 **Πραγματικό παράδειγμα**: Σκεφτείτε τον έλεγχο ροής σαν να έχετε το πιο υπομονετικό GPS στον κόσμο που σας δίνει οδηγίες. Μπορεί να πει "Αν έχει κίνηση στη Λεωφόρο Κύρια, πάρε τον αυτοκινητόδρομο. Αν οι εργασίες κλείνουν τον αυτοκινητόδρομο, δοκίμασε τη γραφική διαδρομή." Τα προγράμματα χρησιμοποιούν ακριβώς αυτόν τον τύπο λογικής για να ανταποκρίνονται έξυπνα σε διάφορες καταστάσεις και πάντα να προσφέρουν την καλύτερη δυνατή εμπειρία στους χρήστες. -### 🎯 **Έλεγχος Έννοιας: Κυριαρχία Στα Θεμελιώδη Στοιχεία** +### 🎯 **Έλεγχος Εννοιών: Κατανόηση των Βασικών** -**Ας δούμε πώς τα πας με τα βασικά:** -- Μπορείς να εξηγήσεις τη διαφορά ανάμεσα σε μεταβλητή και δήλωση με δικά σου λόγια; -- Σκέψου ένα πραγματικό παράδειγμα όπου θα χρησιμοποιούσες μια απόφαση τύπου if-then (όπως στο παράδειγμα της ψήφου) -- Ποιο είναι κάτι στην λογική του προγραμματισμού που σε εξέπληξε; +**Ας δούμε πώς τα πάτε με τα βασικά:** +- Μπορείτε να εξηγήσετε τη διαφορά μεταξύ μεταβλητής και δήλωσης με δικά σας λόγια; +- Σκεφτείτε ένα παράδειγμα της καθημερινότητας όπου θα χρησιμοποιούσατε μια απόφαση αν-τότε (όπως το παράδειγμα της ψήφου) +- Ποιο είναι ένα πράγμα για τη λογική προγραμματισμού που σας εξέπληξε; -**Γρήγορο ενισχυτικό αυτοπεποίθησης:** +**Γρήγορο κίνητρο αυτοπεποίθησης:** ```mermaid flowchart LR - A["📝 Δηλώσεις
(Εντολές)"] --> B["📦 Μεταβλητές
(Αποθήκευση)"] --> C["🔀 Έλεγχος Ροής
(Αποφάσεις)"] --> D["🎉 Λειτουργικό Πρόγραμμα!"] + A["📝 Δηλώσεις
(Οδηγίες)"] --> B["📦 Μεταβλητές
(Αποθήκευση)"] --> C["🔀 Ροή Ελέγχου
(Αποφάσεις)"] --> D["🎉 Λειτουργικό Πρόγραμμα!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **Τι θα ακολουθήσει**: Θα περάσουμε υπέροχα εξερευνώντας πιο βαθιά αυτές τις έννοιες καθώς θα συνεχίζουμε μαζί αυτό το απίστευτο ταξίδι! Τώρα απλώς εστίασε στο να νιώθεις τον ενθουσιασμό για όλες τις εκπληκτικές δυνατότητες που έχεις μπροστά σου. Οι συγκεκριμένες δεξιότητες και τεχνικές θα έρθουν φυσικά καθώς θα εξασκούμαστε μαζί – υπόσχομαι πως αυτό θα είναι πολύ πιο διασκεδαστικό από όσο πιθανώς φαντάζεσαι! +``` +✅ **Τι ακολουθεί**: Θα διασκεδάσουμε απίστευτα εξερευνώντας βαθύτερα αυτές τις έννοιες καθώς προχωρούμε σε αυτό το απίστευτο ταξίδι μαζί! Αυτή τη στιγμή, απλά συγκεντρωθείτε στο να νιώσετε τον ενθουσιασμό για όλες τις εκπληκτικές δυνατότητες που έρχονται. Οι συγκεκριμένες δεξιότητες και τεχνικές θα αποτυπωθούν φυσικά καθώς εξασκούμαστε – υπόσχομαι ότι θα είναι πολύ πιο διασκεδαστικό απ’ όσο φαντάζεστε! -## Εργαλεία Του Εμπορίου +## Εργαλεία της Τέχνης -Εντάξει, εδώ πραγματικά ενθουσιάζομαι τόσο που σχεδόν δεν μπορώ να το συγκρατήσω! 🚀 Ετοιμαζόμαστε να μιλήσουμε για τα απίστευτα εργαλεία που θα σε κάνουν να νιώσεις σαν να σου έδωσαν τα κλειδιά ενός ψηφιακού διαστημικού σκάφους. +Εντάξει, εδώ πραγματικά ενθουσιάζομαι τόσο που σχεδόν δεν μπορώ να συγκρατηθώ! 🚀 Ετοιμαζόμαστε να μιλήσουμε για τα απίστευτα εργαλεία που θα σας κάνουν να νιώσετε σαν να κρατάτε τα κλειδιά ενός ψηφιακού διαστημόπλοιου. -Ξέρεις πώς ένας σεφ έχει τα τέλεια ισορροπημένα μαχαίρια που νιώθεις σαν προέκταση των χεριών του; Ή πώς ένας μουσικός έχει την κιθάρα που μοιάζει να τραγουδά τη στιγμή που την αγγίζει; Λοιπόν, οι προγραμματιστές έχουμε τη δική μας εκδοχή αυτών των μαγικών εργαλείων, και εδώ είναι το πιο εκπληκτικό που θα σου αλλάξει το μυαλό – τα περισσότερα είναι εντελώς δωρεάν! +Ξέρετε πώς ένας σεφ έχει αυτά τα απόλυτα ισορροπημένα μαχαίρια που νιώθουν σαν προέκταση των χεριών του; Ή πώς ένας μουσικός έχει εκείνη την κιθάρα που μοιάζει να τραγουδάει τη στιγμή που την αγγίζει; Ε, οι προγραμματιστές έχουμε τη δική μας έκδοση αυτών των μαγικών εργαλείων, και εδώ είναι κάτι που θα σας αφήσει άφωνους – τα περισσότερα από αυτά είναι εντελώς δωρεάν! -Πραγματικά χοροπηδάω στην καρέκλα μου σκεπτόμενος να τα μοιραστώ μαζί σου, γιατί έχουν επαναστατικοποιήσει τον τρόπο που φτιάχνουμε λογισμικό. Μιλάμε για βοηθούς προγραμματισμού με τεχνητή νοημοσύνη που μπορούν να σε βοηθήσουν να γράψεις τον κώδικά σου (σοβαρά τώρα!), περιβάλλοντα στην cloud όπου μπορείς να δημιουργήσεις ολόκληρες εφαρμογές από κυριολεκτικά οπουδήποτε υπάρχει Wi-Fi και εργαλεία debugging τόσο προηγμένα που είναι σαν να έχεις ακτίνες Χ για τα προγράμματά σου. +Σχεδόν σκαρφαλώνω στην καρέκλα μου από ενθουσιασμό όταν σκέφτομαι να τα μοιραστώ μαζί σας γιατί έχουν αλλάξει ολοκληρωτικά τον τρόπο που δημιουργούμε λογισμικό. Μιλάμε για βοηθούς κωδικοποίησης με τεχνητή νοημοσύνη που μπορούν να γράφουν κώδικα για εσάς (δεν αστειεύομαι!), περιβάλλοντα στο cloud όπου μπορείτε να φτιάξετε ολόκληρες εφαρμογές από οπουδήποτε με Wi-Fi, και εργαλεία εντοπισμού σφαλμάτων τόσο εξελιγμένα που μοιάζουν να έχουν ακτίνες Χ στα προγράμματά σας. -Και να το κομμάτι που ακόμα μου προκαλεί ανατριχίλα: αυτά δεν είναι «εργαλεία για αρχάριους» που θα ξεπεράσεις αργότερα. Αυτά είναι τα ίδια επαγγελματικού επιπέδου εργαλεία που χρησιμοποιούν προγραμματιστές στη Google, το Netflix, και στο indie στούντιο εφαρμογών που αγαπάς ακριβώς αυτή τη στιγμή. Θα νιώθεις τεράστιος επαγγελματίας όταν τα χρησιμοποιείς! +Και το κομμάτι που πάντα μου δίνει ρίγος: αυτά δεν είναι εργαλεία «για αρχάριους» που θα ξεπεράσετε. Αυτά είναι ακριβώς τα ίδια επαγγελματικά εργαλεία που χρησιμοποιούν προγραμματιστές στην Google, στο Netflix, και σε εκείνο το indie στούντιο που λατρεύετε, αυτή ακριβώς τη στιγμή. Θα νιώθετε επαγγελματίες όταν τα χρησιμοποιείτε! ```mermaid graph TD - A["💡 Η Ιδέα Σας"] --> B["⌨️ Επεξεργαστής Κώδικα
(VS Code)"] - B --> C["🌐 Εργαλεία Προγραμματιστή Περιηγητή
(Δοκιμή & Αποσφαλμάτωση)"] - C --> D["⚡ Γραμμή Εντολών
(Αυτοματισμός & Εργαλεία)"] + A["💡 Η Ιδέα Σου"] --> B["⌨️ Επεξεργαστής Κώδικα
(VS Code)"] + B --> C["🌐 Εργαλεία Ανάπτυξης Περιηγητή
(Δοκιμές & Εντοπισμός Σφαλμάτων)"] + C --> D["⚡ Γραμμή Εντολών
(Αυτοματοποίηση & Εργαλεία)"] D --> E["📚 Τεκμηρίωση
(Μάθηση & Αναφορά)"] - E --> F["🚀 Εκπληκτική Ιστοσελίδα!"] + E --> F["🚀 Εκπληκτική Εφαρμογή Ιστού!"] B -.-> G["🤖 Βοηθός Τεχνητής Νοημοσύνης
(GitHub Copilot)"] - C -.-> H["📱 Δοκιμή Συσκευών
(Ανταποκρινόμενος Σχεδιασμός)"] + C -.-> H["📱 Δοκιμή Συσκευής
(Ανταποκρίσιμος Σχεδιασμός)"] D -.-> I["📦 Διαχειριστές Πακέτων
(npm, yarn)"] E -.-> J["👥 Κοινότητα
(Stack Overflow)"] @@ -502,109 +504,110 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### Επεξεργαστές Κώδικα και IDEs: Οι Νέοι Ψηφιακοί Καλύτεροι Φίλοι Σου +``` +### Επεξεργαστές Κώδικα και IDEs: Οι Νέοι Σχεδόν Φίλοι Σας στον Ψηφιακό Κόσμο -Ας μιλήσουμε για επεξεργαστές κώδικα – αυτοί σοβαρά πρόκειται να γίνουν τα νέα αγαπημένα σου μέρη για να περάσεις χρόνο! Σκέψου τους σαν το προσωπικό σου καταφύγιο κωδικοποίησης όπου θα περνάς το μεγαλύτερο μέρος του χρόνου σου δημιουργώντας και ολοκληρώνοντας τις ψηφιακές σου δημιουργίες. +Ας μιλήσουμε για επεξεργαστές κώδικα – αυτοί πρόκειται σοβαρά να γίνουν τα νέα σας αγαπημένα μέρη για να περνάτε τον χρόνο σας! Σκεφτείτε τους σαν το προσωπικό σας καταφύγιο κωδικοποίησης όπου θα περνάτε το μεγαλύτερο μέρος του χρόνου σας δημιουργώντας και τελειοποιώντας τις ψηφιακές σας δημιουργίες. -Αλλά να τι είναι μαγικό στους σύγχρονους επεξεργαστές: δεν είναι απλά ένα ωραίο πρόγραμμα επεξεργασίας κειμένου. Είναι σαν να έχεις τον πιο έξυπνο, υποστηρικτικό μέντορα προγραμματισμού καθισμένο δίπλα σου 24/7. Σου βρίσκουν τα λάθη πριν καν τα παρατηρήσεις, προτείνουν βελτιώσεις που σε κάνουν να φαίνεσαι ιδιοφυΐα, σε βοηθούν να καταλάβεις τι κάνει κάθε κομμάτι κώδικα, και κάποιοι μπορούν ακόμα να προβλέψουν τι πρόκειται να γράψεις και να προσφέρουν να ολοκληρώσουν τις σκέψεις σου! +Αλλά εδώ είναι το μαγικό με τους σύγχρονους επεξεργαστές: δεν είναι απλά καλοφτιαγμένοι επεξεργαστές κειμένου. Είναι σαν να έχετε τον πιο λαμπρό, υποστηρικτικό μέντορα κώδικα δίπλα σας 24/7. Διόρθωνουν τα τυπογραφικά σας λάθη πριν τα προσέξετε, προτείνουν βελτιώσεις που σας κάνουν να φαίνεστε ιδιοφυΐες, σας βοηθούν να καταλάβετε τι κάνει κάθε κομμάτι κώδικα, και μερικοί μπορούν ακόμα να προβλέψουν τι θα γράψετε και να προσφέρουν να ολοκληρώσουν τις σκέψεις σας! -Θυμάμαι όταν ανακάλυψα για πρώτη φορά το auto-completion – ένιωσα κυριολεκτικά σαν να ζω στο μέλλον. Ξεκινάς να γράφεις κάτι και ο επεξεργαστής σου λέει, "Ρε συ, μήπως σκεφτόσουν αυτή τη συνάρτηση που κάνει ακριβώς αυτό που χρειάζεσαι;" Είναι σαν να έχεις έναν τηλεπαθητικό φίλο προγραμματισμού! +Θυμάμαι όταν ανακάλυψα για πρώτη φορά την αυτόματη συμπλήρωση – ένιωσα κυριολεκτικά σαν να ζω στο μέλλον. Αρχίζεις να πληκτρολογείς κάτι και ο επεξεργαστής λέει, "Έλεγες αυτή τη συνάρτηση που κάνει ακριβώς ό,τι χρειάζεσαι;" Είναι σαν να έχεις έναν τηλεπαθητικό φίλο στο κωδικογράφημα! -**Τι κάνει αυτούς τους επεξεργαστές τόσο απίθανους;** +**Τι κάνει αυτούς τους επεξεργαστές τόσο εκπληκτικούς;** -Οι σύγχρονοι επεξεργαστές κώδικα προσφέρουν μια εντυπωσιακή γκάμα δυνατοτήτων για να αυξήσουν την παραγωγικότητά σου: +Οι σύγχρονοι επεξεργαστές κώδικα προσφέρουν μια εντυπωσιακή ποικιλία χαρακτηριστικών για να αυξήσουν την παραγωγικότητά σας: -| Δυνατότητα | Τι Κάνει | Γιατί Βοηθάει | -|------------|----------|---------------| -| **Έγχρωμη Ανάδειξη Συντακτικού** | Χρωματίζει διαφορετικά μέρη του κώδικά σου | Κάνει τον κώδικα πιο εύκολο στην ανάγνωση και εύρεση λαθών | -| **Αυτόματη Συμπλήρωση** | Προτείνει κώδικα καθώς πληκτρολογείς | Επιταχύνει τον προγραμματισμό και μειώνει τα τυπογραφικά λάθη | -| **Εργαλεία Εντοπισμού Σφαλμάτων** | Σε βοηθάει να βρεις και να διορθώσεις λάθη | Εξοικονομεί ώρες δυσκολιών και αναζητήσεων λαθών | -| **Πρόσθετα** | Προσθέτουν εξειδικευμένες λειτουργίες | Προσαρμόζουν τον επεξεργαστή σου για οποιαδήποτε τεχνολογία | -| **Βοηθοί Τεχνητής Νοημοσύνης** | Προτείνουν κώδικα και εξηγήσεις | Επιταχύνουν τη μάθηση και την παραγωγικότητα | +| Χαρακτηριστικό | Τι Κάνει | Γιατί Βοηθάει | +|---------|--------------|--------------| +| **Επισήμανση Συντακτικού** | Βαφτίζει διαφορετικά μέρη του κώδικα | Κάνει τον κώδικα πιο εύκολο στην ανάγνωση και στην εύρεση λαθών | +| **Αυτόματη Συμπλήρωση** | Προτείνει κώδικα καθώς πληκτρολογείτε | Επιταχύνει τον προγραμματισμό και μειώνει τα τυπογραφικά λάθη | +| **Εργαλεία Αποσφαλμάτωσης** | Βοηθά να βρείτε και να διορθώσετε λάθη | Εξοικονομεί ώρες στην ανεύρεση σφαλμάτων | +| **Επεκτάσεις** | Προσθέτουν εξειδικευμένες λειτουργίες | Προσαρμόζουν τον επεξεργαστή για οποιαδήποτε τεχνολογία | +| **Βοηθοί AI** | Προτείνουν κώδικα και εξηγήσεις | Επιταχύνουν τη μάθηση και την παραγωγικότητα | -> 🎥 **Βίντεο Πόρος**: Θέλεις να δεις αυτά τα εργαλεία σε δράση; Δες αυτό το [βίντεο Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) για μια ολοκληρωμένη επισκόπηση. +> 🎥 **Βίντεο Πόρος**: Θέλετε να δείτε αυτά τα εργαλεία σε δράση; Δείτε αυτό το [βίντεο Εργαλεία της Τέχνης](https://youtube.com/watch?v=69WJeXGBdxg) για μια ολοκληρωμένη επισκόπηση. -#### Συνιστώμενοι Επεξεργαστές για Web Development +#### Προτεινόμενοι Επεξεργαστές για Ανάπτυξη Ιστού -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Δωρεάν) -- Ο πιο δημοφιλής μεταξύ των web developers -- Εξαιρετικό οικοσύστημα προσθέτων -- Ενσωματωμένο τερματικό και ολοκλήρωση με Git -- **Απαραίτητα πρόσθετα**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Προτάσεις κώδικα με τεχνητή νοημοσύνη - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Συνεργασία σε πραγματικό χρόνο - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Αυτόματη μορφοποίηση κώδικα - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Ανίχνευση ορθογραφικών λαθών στον κώδικα +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Δωρεάν) +- Πιο δημοφιλής στους προγραμματιστές ιστού +- Εξαιρετικό οικοσύστημα επεκτάσεων +- Ενσωματωμένο τερματικό και υποστήριξη Git +- **Επιβεβλημένες επεκτάσεις**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - Προτάσεις κώδικα με AI + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Συνεργασία σε πραγματικό χρόνο + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Αυτόματη μορφοποίηση κώδικα + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Εντοπίζει τυπογραφικά λάθη στον κώδικα -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Επί πληρωμή, δωρεάν για φοιτητές) -- Προηγμένα εργαλεία debugging και testing -- Έξυπνη αυτόματη συμπλήρωση κώδικα -- Ενσωματωμένος έλεγχος έκδοσης +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Επί πληρωμή, δωρεάν για φοιτητές) +- Προηγμένα εργαλεία αποσφαλμάτωσης και δοκιμών +- Έξυπνη ολοκλήρωση κώδικα +- Ενσωματωμένος έλεγχος έκδοσης -**Cloud-Based IDEs** (Διάφορες τιμές) -- [GitHub Codespaces](https://github.com/features/codespaces) - Ολόκληρο VS Code μέσα στον browser σου -- [Replit](https://replit.com/) - Ιδανικό για μάθηση και κοινή χρήση κώδικα -- [StackBlitz](https://stackblitz.com/) - Άμεση ανάπτυξη web εφαρμογών πλήρους στοίβας +**IDEs βάσει Cloud** (Διάφορες τιμές) +- [GitHub Codespaces](https://github.com/features/codespaces) - Πλήρες VS Code σε πρόγραμμα περιήγησης +- [Replit](https://replit.com/) - Ιδανικό για μάθηση και κοινή χρήση κώδικα +- [StackBlitz](https://stackblitz.com/) - Άμεση ανάπτυξη web full-stack -> 💡 **Συμβουλή για να ξεκινήσεις**: Ξεκίνα με το Visual Studio Code – είναι δωρεάν, ευρέως χρησιμοποιούμενο στη βιομηχανία, και έχει μια τεράστια κοινότητα που δημιουργεί χρήσιμα tutorials και πρόσθετα. +> 💡 **Συμβουλή για ξεκίνημα**: Ξεκινήστε με το Visual Studio Code – είναι δωρεάν, ευρέως χρησιμοποιούμενο στη βιομηχανία και έχει μια τεράστια κοινότητα που δημιουργεί χρήσιμα μαθήματα και επεκτάσεις. -### Περιηγητές Ιστού: Το Μυστικό Σου Εργαστήριο Ανάπτυξης -Εντάξει, ετοιμάσου να σοκαριστείς τελείως! Ξέρεις πώς χρησιμοποιείς τους περιηγητές για να σκρολάρεις στα social media και να βλέπεις βίντεο; Λοιπόν, αποδεικνύεται πως έκρυβαν αυτό το απίστευτο μυστικό εργαστήριο προγραμματισμού όλον αυτόν τον καιρό, περιμένοντας απλά να το ανακαλύψεις! +### Προγράμματα Περιήγησης: Το Μυστικό Εργαστήριο Ανάπτυξής Σας -Κάθε φορά που κάνεις δεξί κλικ σε μια ιστοσελίδα και επιλέγεις "Επιθεώρηση στοιχείου" ανοίγεις έναν κρυφό κόσμο εργαλείων προγραμματιστή που είναι ειλικρινά πιο ισχυρά από μερικά ακριβά λογισμικά που πληρωνόμουν εκατοντάδες ευρώ παλιότερα. Είναι σαν να ανακαλύπτεις ότι η παλιά σου κουζίνα έκρυβε ένα επαγγελματικό εργαστήριο σεφ πίσω από ένα κρυφό πάνελ! -Την πρώτη φορά που μου έδειξε κάποιος τα DevTools του browser, πέρασα περίπου τρεις ώρες απλώς κάνοντας κλικ και λέγοντας «ΠΕΡΙΜΕΝΕ, ΜΠΟΡΕΙ ΝΑ ΚΑΝΕΙ ΚΙ ΑΥΤΟ;!» Μπορείς κυριολεκτικά να επεξεργαστείς οποιαδήποτε ιστοσελίδα σε πραγματικό χρόνο, να δεις ακριβώς πόσο γρήγορα φορτώνει τα πάντα, να δοκιμάσεις πώς φαίνεται ο ιστότοπός σου σε διαφορετικές συσκευές, και ακόμα να αποσφαλματώσεις JavaScript σαν απόλυτος επαγγελματίας. Είναι πραγματικά απίστευτο! +Εντάξει, ετοιμαστείτε να σας φύγει το μυαλό! Ξέρετε πώς χρησιμοποιείτε τα προγράμματα περιήγησης για να σκρολάρετε στα κοινωνικά δίκτυα και να βλέπετε βίντεο; Λοιπόν, αποδείχτηκε ότι κρύβουν αυτό το απίστευτο μυστικό εργαστήριο προγραμματιστών όλη αυτή την ώρα, απλά περιμένοντας να το ανακαλύψετε! -**Γιατί οι browsers είναι το μυστικό σου όπλο:** +Κάθε φορά που κάνετε δεξί κλικ σε μια ιστοσελίδα και επιλέγετε "Επιθεώρηση στοιχείου", ανοίγετε έναν κρυφό κόσμο εργαλείων ανάπτυξης που είναι ειλικρινά πιο ισχυρά από ορισμένα ακριβά προγράμματα που πλήρωνα εκατοντάδες ευρώ. Είναι σαν να ανακαλύπτετε ότι η συνηθισμένη σας κουζίνα έκρυβε ένα επαγγελματικό εργαστήριο σεφ πίσω από μια μυστική πόρτα! +Την πρώτη φορά που κάποιος μου έδειξε τα DevTools του browser, πέρασα περίπου τρεις ώρες απλώς κάνοντας κλικ και λέγοντας «ΠΕΡΙΜΕΝΕ, ΜΠΟΡΕΙ ΝΑ ΚΑΝΕΙ ΚΙ ΑΥΤΟ;!» Μπορείς κυριολεκτικά να επεξεργαστείς οποιαδήποτε ιστοσελίδα σε πραγματικό χρόνο, να δεις ακριβώς πόσο γρήγορα φορτώνει το κάθε τι, να δοκιμάσεις πώς φαίνεται ο ιστότοπός σου σε διαφορετικές συσκευές, και ακόμα να κάνεις αποσφαλμάτωση JavaScript σαν απόλυτος επαγγελματίας. Είναι πραγματικά εκπληκτικό! -Όταν δημιουργείς μια ιστοσελίδα ή μια web εφαρμογή, χρειάζεται να δεις πώς φαίνεται και πώς συμπεριφέρεται στον πραγματικό κόσμο. Οι browsers όχι μόνο εμφανίζουν τη δουλειά σου, αλλά παρέχουν και λεπτομερή ανατροφοδότηση για την απόδοση, την προσβασιμότητα και πιθανά προβλήματα. +**Αυτός είναι ο λόγος που οι browsers είναι το μυστικό σου όπλο:** + +Όταν δημιουργείς έναν ιστότοπο ή μια διαδικτυακή εφαρμογή, χρειάζεται να δεις πώς φαίνεται και πώς συμπεριφέρεται σε πραγματικές συνθήκες. Οι browsers όχι μόνο εμφανίζουν τη δουλειά σου, αλλά παρέχουν και λεπτομερή ανατροφοδότηση σχετικά με τις επιδόσεις, την προσβασιμότητα και πιθανά προβλήματα. #### Εργαλεία Ανάπτυξης Browser (DevTools) Οι σύγχρονοι browsers περιλαμβάνουν ολοκληρωμένες σουίτες ανάπτυξης: -| Κατηγορία Εργαλείου | Τι Κάνει | Παράδειγμα Χρήσης | +| Κατηγορία Εργαλείων | Τι Κάνει | Παράδειγμα Χρήσης | |---------------------|----------|-------------------| -| **Επιθεωρητής Στοιχείων** | Προβολή και επεξεργασία HTML/CSS σε πραγματικό χρόνο | Προσαρμογή στυλ για άμεσα αποτελέσματα | -| **Κονσόλα** | Προβολή μηνυμάτων σφαλμάτων και δοκιμή JavaScript | Αποσφαλμάτωση προβλημάτων και πειραματισμός με κώδικα | -| **Παρακολούθηση Δικτύου** | Παρακολούθηση φόρτωσης πόρων | Βελτιστοποίηση απόδοσης και χρόνων φόρτωσης | -| **Έλεγχος Προσβασιμότητας** | Δοκιμή για συμπεριληπτικό σχεδιασμό | Εξασφάλιση λειτουργικότητας για όλους τους χρήστες | +| **Επιθεωρητής Στοιχείων** | Προβολή και επεξεργασία HTML/CSS σε πραγματικό χρόνο | Προσαρμογή στυλ για άμεσο αποτέλεσμα | +| **Κονσόλα** | Προβολή μηνυμάτων σφάλματος και δοκιμή JavaScript | Αποσφαλμάτωση προβλημάτων και πειραματισμός με κώδικα | +| **Παρακολούθηση Δικτύου** | Παρακολούθηση του πώς φορτώνουν οι πόροι | Βελτιστοποίηση επιδόσεων και χρόνων φόρτωσης | +| **Έλεγχος Προσβασιμότητας** | Δοκιμή για συμπεριληπτικό σχεδιασμό | Διασφάλιση λειτουργίας του ιστότοπου για όλους τους χρήστες | | **Προσομοιωτής Συσκευών** | Προεπισκόπηση σε διαφορετικά μεγέθη οθόνης | Δοκιμή responsive σχεδιασμού χωρίς πολλές συσκευές | -#### Προτεινόμενοι Browsers για Ανάπτυξη +#### Συνιστώμενοι Browsers για Ανάπτυξη -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Πρότυπα DevTools με εκτενή τεκμηρίωση -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Εξαιρετικά εργαλεία CSS Grid και προσβασιμότητας -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Βασισμένος σε Chromium με πόρους ανάπτυξης της Microsoft +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Βιομηχανικό πρότυπο DevTools με εκτενή τεκμηρίωση +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Εξαιρετικά εργαλεία για CSS Grid και προσβασιμότητα +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Βασισμένος στο Chromium με πόρους ανάπτυξης από την Microsoft -> ⚠️ **Σημαντική Συμβουλή Δοκιμών**: Πάντα να δοκιμάζεις τους ιστότοπούς σου σε πολλαπλούς browsers! Αυτό που λειτουργεί τέλεια στο Chrome μπορεί να φαίνεται διαφορετικό στο Safari ή στο Firefox. Οι επαγγελματίες προγραμματιστές δοκιμάζουν σε όλους τους μεγάλους browsers για να εξασφαλίσουν συνεπή εμπειρία χρήστη. +> ⚠️ **Σημαντική Συμβουλή Δοκιμών**: Δοκίμασε πάντα τις ιστοσελίδες σου σε πολλούς browsers! Ό,τι λειτουργεί τέλεια στο Chrome μπορεί να φαίνεται διαφορετικό στο Safari ή Firefox. Οι επαγγελματίες προγραμματιστές ελέγχουν σε όλους τους μεγάλους browsers για να εξασφαλίσουν συνεπείς εμπειρίες χρήστη. -### Εργαλεία Γραμμής Εντολών: Η Πύλη σου σε Υπερδυνάμεις Προγραμματιστή +### Εργαλεία Γραμμής Εντολών: Η Πύλη σου προς Υπερδυνάμεις Προγραμματιστή -Εντάξει, ας έχουμε μια εντελώς ειλικρινή στιγμή εδώ για τη γραμμή εντολών, γιατί θέλω να το ακούσεις από κάποιον που το καταλαβαίνει πραγματικά. Την πρώτη φορά που την είδα – αυτήν την τρομακτική μαύρη οθόνη με το αναβοσβήσιμο κείμενο – σκέφτηκα κυριολεκτικά, «Όχι, ούτε καν! Φαίνεται κάτι από ταινία χάκερ των 1980s, και σίγουρα δεν είμαι αρκετά έξυπνος γι’ αυτό!» 😅 +Εντάξει, ας έχουμε μια εντελώς ειλικρινή στιγμή εδώ για τη γραμμή εντολών, γιατί θέλω να το ακούσεις από κάποιον που το καταλαβαίνει πραγματικά. Όταν την πρωτοείδα – αυτή την τρομακτική μαύρη οθόνη με το αναβοσβήσιμο κείμενο – πραγματικά σκέφτηκα, «Όχι, καθόλου! Αυτό μοιάζει με κάτι από μια ταινία χάκερ της δεκαετίας του 1980, και σίγουρα δεν είμαι αρκετά έξυπνος για αυτό!» 😅 -Αλλά εδώ είναι τι θα ήθελα να μου είχε πει κάποιος τότε, και τι σου λέω τώρα: η γραμμή εντολών δεν είναι τρομακτική – είναι σαν να έχεις μια άμεση συνομιλία με τον υπολογιστή σου. Σκέψου την ως τη διαφορά μεταξύ της παραγγελίας φαγητού μέσω μιας κομψής εφαρμογής με εικόνες και μενού (που είναι ωραίο και εύκολο) και της εισόδου στο αγαπημένο σου τοπικό εστιατόριο, όπου ο σεφ ξέρει ακριβώς τι σου αρέσει και μπορεί να σου ετοιμάσει κάτι τέλειο απλώς λέγοντας «έκπληξέ με με κάτι καταπληκτικό.» +Αλλά αυτό που θα ήθελα να μου είχε πει κάποιος τότε, και αυτό που σου λέω τώρα, είναι: η γραμμή εντολών δεν είναι τρομακτική – είναι πραγματικά σαν να έχεις μια άμεση συνομιλία με τον υπολογιστή σου. Φαντάσου τη διαφορά μεταξύ παραγγελίας φαγητού μέσω μιας κομψής εφαρμογής με εικόνες και μενού (που είναι ωραία και εύκολη), και του να μπεις στο αγαπημένο σου τοπικό εστιατόριο όπου ο σεφ ξέρει ακριβώς τι σου αρέσει και μπορεί να φτιάξει κάτι τέλειο, απλώς λέγοντας «έκπληξέ με με κάτι υπέροχο». -Η γραμμή εντολών είναι το μέρος όπου οι προγραμματιστές νιώθουν σαν απόλυτοι μάγοι. Πληκτρολογείς μερικές λέξεις που μοιάζουν μαγικές (εντάξει, είναι απλές εντολές, αλλά νιώθουν μαγικές!), πατάς enter και ΜΠΑΜ – δημιούργησες ολόκληρες δομές έργων, εγκατέστησες ισχυρά εργαλεία από όλο τον κόσμο, ή ανέβασες την εφαρμογή σου στο διαδίκτυο για εκατομμύρια ανθρώπους να τη δουν. Μόλις δοκιμάσεις αυτή τη δύναμη, είναι εθιστικό! +Η γραμμή εντολών είναι το μέρος όπου πηγαίνουν οι προγραμματιστές για να νιώσουν σαν απόλυτοι μάγοι. Πληκτρολογείς μερικές φαινομενικά μαγικές λέξεις (εντάξει, είναι απλώς εντολές, αλλά νιώθουν μαγικές!), πατάς enter, και ΜΠΟΥΜ – έχεις δημιουργήσει ολόκληρες δομές έργου, εγκατέστησες πανίσχυρα εργαλεία από όλο τον κόσμο, ή ανέβασες την εφαρμογή σου στο διαδίκτυο για να τη δουν εκατομμύρια άνθρωποι. Μόλις πάρεις μια πρώτη γεύση αυτής της δύναμης, ειλικρινά γίνεται εθιστικό! **Γιατί η γραμμή εντολών θα γίνει το αγαπημένο σου εργαλείο:** -Ενώ οι γραφικές διεπαφές είναι υπέροχες για πολλές εργασίες, η γραμμή εντολών υπερισχύει στον αυτοματισμό, την ακρίβεια και την ταχύτητα. Πολλά εργαλεία ανάπτυξης δουλεύουν κυρίως μέσω διεπαφής γραμμής εντολών, και η εκμάθησή τους μπορεί να βελτιώσει δραματικά την παραγωγικότητά σου. +Ενώ οι γραφικές διεπαφές είναι υπέροχες για πολλές εργασίες, η γραμμή εντολών ξεχωρίζει στην αυτοματοποίηση, την ακρίβεια και την ταχύτητα. Πολλά εργαλεία ανάπτυξης λειτουργούν κυρίως μέσω της γραμμής εντολών, και η εκμάθηση της αποδοτικής χρήσης τους μπορεί να βελτιώσει δραματικά την παραγωγικότητά σου. ```bash -# Βήμα 1: Δημιουργήστε και μεταβείτε στον κατάλογο του έργου +# Βήμα 1: Δημιουργήστε και μεταβείτε στον φάκελο του έργου mkdir my-awesome-website cd my-awesome-website ``` -**Αυτό που κάνει ο κώδικας:** -- **Δημιουργεί** έναν νέο φάκελο "my-awesome-website" για το έργο σου -- **Μετακινείσαι** στον νεοδημιουργημένο φάκελο για να ξεκινήσεις να δουλεύεις +**Αυτός ο κώδικας κάνει τα εξής:** +- **Δημιουργεί** έναν νέο φάκελο με το όνομα "my-awesome-website" για το έργο σου +- **Μπαίνει** μέσα στον νέο φάκελο για να ξεκινήσεις να δουλεύεις ```bash -# Βήμα 2: Αρχικοποιήστε το έργο με το package.json +# Βήμα 2: Αρχικοποιήστε το έργο με package.json npm init -y # Εγκαταστήστε σύγχρονα εργαλεία ανάπτυξης @@ -612,224 +615,222 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Βήμα βήμα, τι συμβαίνει:** -- **Αρχικοποιεί** ένα νέο έργο Node.js με τις προεπιλεγμένες ρυθμίσεις χρησιμοποιώντας `npm init -y` -- **Εγκαθιστά** το Vite ως σύγχρονο εργαλείο κατασκευής για γρήγορη ανάπτυξη και παραγωγή -- **Προσθέτει** το Prettier για αυτόματο φορμάρισμα κώδικα και το ESLint για έλεγχο ποιότητας κώδικα -- **Χρησιμοποιεί** τη σημαία `--save-dev` για να δηλώσει αυτές τις εξαρτήσεις ως μόνο για ανάπτυξη +**Βήμα προς βήμα, εδώ συμβαίνει:** +- **Αρχικοποιεί** νέο έργο Node.js με προεπιλεγμένες ρυθμίσεις χρησιμοποιώντας `npm init -y` +- **Εγκαθιστά** το Vite ως μοντέρνο εργαλείο κατασκευής για γρήγορη ανάπτυξη και παραγωγή +- **Προσθέτει** το Prettier για αυτόματο format κώδικα και το ESLint για έλεγχο ποιότητας κώδικα +- **Χρησιμοποιεί** τη σημαία `--save-dev` για να τα ορίσει ως εξαρτήσεις μόνο ανάπτυξης ```bash -# Βήμα 3: Δημιουργήστε τη δομή και τα αρχεία του έργου +# Βήμα 3: Δημιουργήστε τη δομή του έργου και τα αρχεία mkdir src assets echo 'My Site

Hello World

' > index.html -# Εκκινήστε τον διακομιστή ανάπτυξης +# Εκκίνηση διακομιστή ανάπτυξης npx vite ``` -**Στο παραπάνω έχουμε:** -- **Οργανώσει** το έργο μας δημιουργώντας ξεχωριστούς φακέλους για τον κώδικα πηγής και τα αρχεία -- **Παράγει** ένα βασικό αρχείο HTML με σωστή δομή εγγράφου -- **Ξεκίνησε** τον διακομιστή ανάπτυξης Vite για live-reloading και hot module replacement +**Στο παραπάνω, έχουμε:** +- **Οργανώσει** το έργο μας δημιουργώντας ξεχωριστούς φακέλους για τον πηγαίο κώδικα και τα assets +- **Δημιουργήσει** ένα βασικό αρχείο HTML με σωστή δομή εγγράφου +- **Ξεκινήσει** τον διακομιστή ανάπτυξης Vite για ζωντανή ανανέωση και hot module replacement -#### Απαραίτητα Εργαλεία Γραμμής Εντολών για Web Ανάπτυξη +#### Απαραίτητα Εργαλεία Γραμμής Εντολών για Ανάπτυξη Ιστού | Εργαλείο | Σκοπός | Γιατί το Χρειάζεσαι | -|----------|---------|---------------------| -| **[Git](https://git-scm.com/)** | Έλεγχος έκδοσης | Παρακολούθηση αλλαγών, συνεργασία με άλλους, backup της δουλειάς σου | +|----------|--------|---------------------| +| **[Git](https://git-scm.com/)** | Έλεγχος εκδόσεων | Παρακολούθηση αλλαγών, συνεργασία με άλλους, δημιουργία αντιγράφων ασφαλείας | | **[Node.js & npm](https://nodejs.org/)** | Εκτέλεση JavaScript & διαχείριση πακέτων | Εκτέλεση JavaScript εκτός browser, εγκατάσταση σύγχρονων εργαλείων ανάπτυξης | | **[Vite](https://vitejs.dev/)** | Εργαλείο κατασκευής & dev server | Αστραπιαία ανάπτυξη με hot module replacement | -| **[ESLint](https://eslint.org/)** | Ποιότητα κώδικα | Αυτόματη εύρεση και διόρθωση προβλημάτων στον κώδικα JavaScript | -| **[Prettier](https://prettier.io/)** | Μορφοποίηση κώδικα | Κρατά τον κώδικά σου συνεπή και εύκολο στην ανάγνωση | +| **[ESLint](https://eslint.org/)** | Ποιότητα κώδικα | Αυτόματη εύρεση και διόρθωση προβλημάτων στον JavaScript κώδικα | +| **[Prettier](https://prettier.io/)** | Μορφοποίηση κώδικα | Κρατάει τον κώδικα συνεπή μορφοποιημένο και ευανάγνωστο | -#### Επιλογές ανά Πλατφόρμα +#### Επιλογές Ανά Πλατφόρμα **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Σύγχρονο, πλήρες τερματικό -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Ισχυρό περιβάλλον scripting -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Παραδοσιακή γραμμή εντολών των Windows +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Σύγχρονο, πλούσιο σε λειτουργίες τερματικό +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Δυνατό περιβάλλον scripting +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Παραδοσιακή γραμμή εντολών Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Ενσωματωμένη εφαρμογή τερματικού -- **[iTerm2](https://iterm2.com/)** - Βελτιωμένο τερματικό με προηγμένες δυνατότητες +- **[iTerm2](https://iterm2.com/)** - Ενισχυμένο τερματικό με προχωρημένες λειτουργίες **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Τυπικό shell του Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Προηγμένος τερματικός εξομοιωτής +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Πρότυπο Linux shell +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Προηγμένος εξομοιωτής τερματικού > 💻 = Προεγκατεστημένο στο λειτουργικό σύστημα -> 🎯 **Μονοπάτι Εκμάθησης**: Ξεκίνα με βασικές εντολές όπως `cd` (αλλαγή φακέλου), `ls` ή `dir` (λίστα αρχείων), και `mkdir` (δημιουργία φακέλου). Εξασκήσου με σύγχρονες εντολές ροής εργασίας όπως `npm install`, `git status`, και `code .` (άνοιγμα τρέχοντος φακέλου στο VS Code). Καθώς νιώθεις πιο άνετα, θα μαθαίνεις φυσικά πιο προχωρημένες εντολές και τεχνικές αυτοματισμού. +> 🎯 **Μονοπάτι Μάθησης:** Ξεκίνα με βασικές εντολές όπως `cd` (αλλαγή φακέλου), `ls` ή `dir` (λίστα αρχείων), και `mkdir` (δημιουργία φακέλου). Πρακτική με μοντέρνες εντολές ροής εργασίας όπως `npm install`, `git status`, και `code .` (ανοίγει τον τρέχοντα φάκελο στο VS Code). Καθώς νιώθεις πιο άνετα, θα μάθεις φυσικά πιο προχωρημένες εντολές και τεχνικές αυτοματοποίησης. -### Τεκμηρίωση: Ο Πάντα Διαθέσιμος Μέντοράς σου στη Μάθηση +### Τεκμηρίωση: Ο Πάντα Διαθέσιμος Μέντορας Μάθησης σου -Εντάξει, άσε με να μοιραστώ ένα μικρό μυστικό που θα σε κάνει να αισθανθείς πολύ καλύτερα ως αρχάριος: ακόμα και οι πιο έμπειροι προγραμματιστές περνάνε μεγάλο μέρος του χρόνου τους διαβάζοντας τεκμηρίωση. Και αυτό δεν είναι επειδή δεν ξέρουν τι κάνουν – είναι σημάδι σοφίας! +Εντάξει, άσε με να μοιραστώ ένα μικρό μυστικό που θα σε κάνει να νιώσεις πολύ καλύτερα για το ότι είσαι αρχάριος: ακόμα και οι πιο έμπειροι προγραμματιστές περνούν τεράστιο μέρος του χρόνου τους διαβάζοντας τεκμηρίωση. Και αυτό δεν είναι επειδή δεν ξέρουν τι κάνουν – είναι στην πραγματικότητα σημάδι σοφίας! -Σκέψου την τεκμηρίωση ως την πρόσβαση στους πιο υπομονετικούς και γνώστες εκπαιδευτές του κόσμου που είναι διαθέσιμοι 24/7. Είσαι κολλημένος με ένα πρόβλημα στις 2 το ξημέρωμα; Η τεκμηρίωση είναι εκεί με έναν ζεστό εικονικό αγκαλιά και ακριβώς την απάντηση που χρειάζεσαι. Θέλεις να μάθεις για κάποια νέα δροσερή λειτουργία που όλοι συζητούν; Η τεκμηρίωση σε υποστηρίζει με βήμα-βήμα παραδείγματα. Προσπαθείς να καταλάβεις γιατί κάτι λειτουργεί όπως λειτουργεί; Το μάντεψες – η τεκμηρίωση είναι έτοιμη να το εξηγήσει με τρόπο που τελικά να βγάζει νόημα! +Σκέψου την τεκμηρίωση σαν να έχεις πρόσβαση στους πιο υπομονετικούς και γνώστες δασκάλους του κόσμου, διαθέσιμους 24/7. Έμεινες μπλοκαρισμένος σε ένα πρόβλημα στις 2 π.μ.; Η τεκμηρίωση είναι εκεί με μια ζεστή εικονική αγκαλιά και ακριβώς την απάντηση που χρειάζεσαι. Θέλεις να μάθεις για κάποια νέα φοβερή λειτουργία για την οποία μιλάνε όλοι; Η τεκμηρίωση σε στηρίζει με παραδείγματα βήμα-βήμα. Προσπαθείς να καταλάβεις γιατί κάτι λειτουργεί όπως λειτουργεί; Μάντεψε – η τεκμηρίωση είναι έτοιμη να το εξηγήσει με τρόπο που επιτέλους να "κολλάει"! -Κάτι που άλλαξε εντελώς την οπτική μου είναι το εξής: ο κόσμος της web ανάπτυξης αλλάζει αστραπιαία, και κανείς (εννοώ ΚΑΝΕΙΣ!) δεν θυμάται τα πάντα από μνήμης. Έχω δει έμπειρους προγραμματιστές με πάνω από 15 χρόνια εμπειρίας να ψάχνουν βασική σύνταξη, και ξέρεις τι; Αυτό δεν είναι ντροπή – είναι έξυπνο! Δεν πρόκειται για τέλεια μνήμη, αλλά για το να ξέρεις πού θα βρεις γρήγορα αξιόπιστες απαντήσεις και πώς να τις εφαρμόσεις. +Κάτι που άλλαξε ολοκληρωτικά την προοπτική μου: ο κόσμος της ανάπτυξης web κινείται απίστευτα γρήγορα, και κανείς (εννοώ καθόλου κανείς!) δεν κρατάει τα πάντα απομνημονευμένα. Έχω δει κορυφαίους προγραμματιστές με πάνω από 15 χρόνια εμπειρίας να ψάχνουν απλή σύνταξη, και ξέρεις κάτι; Αυτό δεν είναι ντροπιαστικό – είναι έξυπνο! Δεν είναι θέμα τέλειας μνήμης, αλλά το να ξέρεις πού να βρεις αξιόπιστες απαντήσεις γρήγορα και πώς να τις εφαρμόσεις. -**Εδώ συμβαίνει η πραγματική μαγεία:** +**Εδώ γίνεται η πραγματική μαγεία:** -Οι επαγγελματίες προγραμματιστές ξοδεύουν σημαντικό μέρος του χρόνου τους διαβάζοντας τεκμηρίωση – όχι επειδή δεν ξέρουν τι κάνουν, αλλά επειδή το τοπίο της web ανάπτυξης εξελίσσεται τόσο γρήγορα που η συνεχής μάθηση είναι απαραίτητη. Η καλή τεκμηρίωση σε βοηθάει να κατανοήσεις όχι μόνο *πώς* να χρησιμοποιήσεις κάτι, αλλά *γιατί* και *πότε* να το χρησιμοποιήσεις. +Οι επαγγελματίες προγραμματιστές αφιερώνουν μεγάλο μέρος του χρόνου τους διαβάζοντας τεκμηρίωση – όχι επειδή δεν ξέρουν τι κάνουν, αλλά επειδή το τοπίο της ανάπτυξης ιστού εξελίσσεται τόσο γρήγορα που η παραμονή ενημερωμένος απαιτεί συνεχή μάθηση. Η καλή τεκμηρίωση σε βοηθά να καταλάβεις όχι μόνο *πώς* να χρησιμοποιήσεις κάτι, αλλά *γιατί* και *πότε* να το χρησιμοποιήσεις. -#### Βασικοί Πόροι Τεκμηρίωσης +#### Απαραίτητοι Πόροι Τεκμηρίωσης **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Το πρότυπο χρυσού για την τεκμηρίωση τεχνολογιών web -- Αναλυτικοί οδηγοί για HTML, CSS, και JavaScript -- Περιλαμβάνει πληροφορίες συμβατότητας browsers -- Δείχνει πρακτικά παραδείγματα και διαδραστικές επίδειξεις +- Το χρυσό πρότυπο για τεκμηρίωση τεχνολογιών web +- Αναλυτικοί οδηγοί για HTML, CSS και JavaScript +- Περιλαμβάνει πληροφορίες συμβατότητας browser +- Προσφέρει πρακτικά παραδείγματα και διαδραστικές επιδείξεις **[Web.dev](https://web.dev)** (από την Google) - Σύγχρονες βέλτιστες πρακτικές ανάπτυξης web -- Οδηγοί για βελτιστοποίηση απόδοσης +- Οδηγοί βελτιστοποίησης επιδόσεων - Αρχές προσβασιμότητας και συμπεριληπτικού σχεδιασμού -- Μελέτες περίπτωσης από πραγματικά έργα +- Μελέτες περιπτώσεων από πραγματικά έργα **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Πόροι ανάπτυξης για τον Edge browser +- Πόροι ανάπτυξης browser Edge - Οδηγοί για Progressive Web Apps -- Ενημερώσεις για cross-platform ανάπτυξη +- Γνώσεις για ανάπτυξη πολλαπλών πλατφορμών **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Δομημένα προγράμματα εκμάθησης +- Διαρθρωμένα προγράμματα μάθησης - Βίντεο μαθήματα από ειδικούς του κλάδου -- Πρακτικές ασκήσεις κώδικα +- Πρακτικές ασκήσεις κωδικοποίησης -> 📚 **Στρατηγική Μελέτης**: Μην προσπαθείς να απομνημονεύσεις την τεκμηρίωση – μάθε να την περιηγείσαι αποτελεσματικά. Αποθήκευσε στις σελιδοδείκτες συχνά χρησιμοποιούμενους πόρους και εξασκήσου στη χρήση της αναζήτησης για να βρίσκεις πληροφορίες γρήγορα. +> 📚 **Στρατηγική Μελέτης:** Μην προσπαθείς να απομνημονεύεις την τεκμηρίωση – μάθε αντ' αυτού πώς να την περιηγείσαι αποδοτικά. Αποθήκευσε σελιδοδείκτες τα συχνά χρησιμοποιούμενα αναφορικά σημεία και εξασκήσου να χρησιμοποιείς λειτουργίες αναζήτησης για να βρίσκεις γρήγορα συγκεκριμένες πληροφορίες. -### 🔧 **Έλεγχος Εμπειρίας Εργαλείων: Τι Σου Κάθεται Καλά;** +### 🔧 **Έλεγχος Εμπειρίας στα Εργαλεία: Τι Σου Αρέσει;** -**Πάρε μια στιγμή να σκεφτείς:** -- Ποιο εργαλείο ανυπομονείς να δοκιμάσεις πρώτο; (Δεν υπάρχει λάθος απάντηση!) -- Η γραμμή εντολών εξακολουθεί να φαίνεται τρομακτική ή είσαι περίεργος για αυτήν; -- Μπορείς να φανταστείς να χρησιμοποιείς τα DevTools του browser για να ρίξεις μια ματιά πίσω από το παρασκήνιο των αγαπημένων σου ιστοσελίδων; +**Κάνε ένα διάλειμμα να σκεφτείς:** +- Ποιο εργαλείο είσαι πιο ενθουσιασμένος να δοκιμάσεις πρώτα; (Δεν υπάρχει λάθος απάντηση!) +- Η γραμμή εντολών ακόμα φαίνεται τρομακτική ή σε ενδιαφέρει να τη μάθεις; +- Μπορείς να φανταστείς να χρησιμοποιείς τα DevTools του browser για να ρίξεις μια ματιά πίσω από την κουρτίνα των αγαπημένων σου ιστοσελίδων; ```mermaid -pie title "Χρόνος που αφιερώνεται από τον προγραμματιστή με εργαλεία" +pie title "Χρόνος που Δαπανάται από τον Προγραμματιστή με Εργαλεία" "Επεξεργαστής Κώδικα" : 40 - "Δοκιμή σε Περιηγητή" : 25 + "Δοκιμές στον Περιηγητή" : 25 "Γραμμή Εντολών" : 15 "Ανάγνωση Τεκμηρίωσης" : 15 - "Αντιμετώπιση Σφαλμάτων" : 5 + "Εντοπισμός Σφαλμάτων" : 5 ``` -> **Αστεία παρατήρηση**: Οι περισσότεροι προγραμματιστές περνούν περίπου το 40% του χρόνου τους στον επεξεργαστή κώδικα, αλλά πρόσεξε πόσος χρόνος αφιερώνεται στο testing, τη μάθηση και την επίλυση προβλημάτων. Ο προγραμματισμός δεν είναι απλώς γραφή κώδικα – είναι κατασκευή εμπειριών! +> **Ενδιαφέρον στοιχείο:** Οι περισσότεροι προγραμματιστές περνούν περίπου το 40% του χρόνου τους στον επεξεργαστή κώδικα, αλλά παρατήρησε πόσος χρόνος πηγαίνει σε δοκιμές, μάθηση, και επίλυση προβλημάτων. Ο προγραμματισμός δεν είναι απλώς να γράφεις κώδικα – είναι να δημιουργείς εμπειρίες! -✅ **Θέμα για σκέψη**: Να κάτι ενδιαφέρον να σκεφτείς – πώς νομίζεις ότι τα εργαλεία για την κατασκευή ιστοσελίδων (ανάπτυξη) μπορεί να διαφέρουν από τα εργαλεία για το σχεδιασμό της εμφάνισής τους (design); Είναι σαν τη διαφορά μεταξύ ενός αρχιτέκτονα που σχεδιάζει ένα όμορφο σπίτι και ενός εργολάβου που το κατασκευάζει. Και οι δύο είναι κρίσιμοι, αλλά χρειάζονται διαφορετικά κουτιά εργαλείων! Αυτός ο τρόπος σκέψης θα σε βοηθήσει πραγματικά να δεις τη μεγαλύτερη εικόνα του πώς ζωντανεύουν οι ιστοσελίδες. +✅ **Θέμα για σκέψη:** Να κάτι ενδιαφέρον για να το σκεφτείς – πώς νομίζεις ότι τα εργαλεία για την κατασκευή ιστοσελίδων (ανάπτυξη) μπορεί να διαφέρουν από τα εργαλεία για τον σχεδιασμό της εμφάνισής τους (σχεδιασμός); Είναι σαν τη διαφορά μεταξύ ενός αρχιτέκτονα που σχεδιάζει ένα όμορφο σπίτι και ενός εργολάβου που το χτίζει πραγματικά. Και τα δύο είναι κρίσιμα, αλλά χρειάζονται διαφορετικά εργαλειοθήκες! Αυτός ο τρόπος σκέψης θα σε βοηθήσει να δεις τη μεγαλύτερη εικόνα του πώς ζωντανεύουν οι ιστοσελίδες. ## Πρόκληση GitHub Copilot Agent 🚀 Χρησιμοποίησε τη λειτουργία Agent για να ολοκληρώσεις την παρακάτω πρόκληση: -**Περιγραφή:** Ερεύνησε τα χαρακτηριστικά ενός μοντέρνου επεξεργαστή κώδικα ή IDE και δείξε πώς μπορεί να βελτιώσει τη ροή εργασίας σου ως web developer. +**Περιγραφή:** Εξερεύνησε τα χαρακτηριστικά ενός σύγχρονου επεξεργαστή κώδικα ή IDE και δείξε πώς μπορεί να βελτιώσει τη ροή εργασίας σου ως web developer. -**Προτροπή:** Επίλεξε έναν επεξεργαστή κώδικα ή IDE (όπως Visual Studio Code, WebStorm, ή ένα cloud-based IDE). Κατάγραψε τρία χαρακτηριστικά ή επεκτάσεις που σε βοηθούν να γράφεις, αποσφαλματώνεις, ή να διατηρείς τον κώδικα πιο αποτελεσματικά. Για κάθε ένα, δώσε μια σύντομη εξήγηση για το πώς ωφελεί τη ροή εργασίας σου. +**Οδηγία:** Επέλεξε έναν επεξεργαστή κώδικα ή IDE (όπως Visual Studio Code, WebStorm ή ένα cloud-based IDE). Κατάγραψε τρία χαρακτηριστικά ή επεκτάσεις που σε βοηθούν να γράφεις, να αποσφαλματώνεις ή να διατηρείς κώδικα πιο αποδοτικά. Για κάθε ένα, δώσε μια σύντομη εξήγηση πώς ωφελεί τη ροή εργασίας σου. --- ## 🚀 Πρόκληση -**Εντάξει, ντετέκτιβ, έτοιμος για την πρώτη σου υπόθεση;** +**Λοιπόν, ντετέκτιβ, έτοιμος για την πρώτη σου υπόθεση;** -Τώρα που έχεις αυτή τη φοβερή βάση, έχω μια περιπέτεια που θα σε βοηθήσει να δεις πόσο απίστευτα διαφορετικός και συναρπαστικός είναι ο κόσμος του προγραμματισμού. Και πρόσεχε – δεν πρόκειται ακόμα για γραφή κώδικα, οπότε κανένα άγχος! Σκέψου τον εαυτό σου ως ντετέκτιβ γλωσσών προγραμματισμού στην πρώτη σου συναρπαστική υπόθεση! +Τώρα που έχεις αυτή την υπέροχη βάση, έχω μια περιπέτεια που θα σε βοηθήσει να δεις πόσο απίστευτα διαφορετικός και συναρπαστικός είναι ο κόσμος του προγραμματισμού. Και άκου – δεν πρόκειται ακόμα για γραφή κώδικα, οπότε μη νιώθεις πίεση! Φαντάσου τον εαυτό σου ως ντετέκτιβ γλωσσών προγραμματισμού στην πρώτη σου συναρπαστική υπόθεση! -**Η αποστολή σου, αν την αποδεχθείς:** -1. **Γίνε εξερευνητής γλωσσών**: Διάλεξε τρεις γλώσσες προγραμματισμού από εντελώς διαφορετικά σύμπαντα – ίσως μία που φτιάχνει ιστοσελίδες, μία που δημιουργεί εφαρμογές κινητών, και μία που επεξεργάζεται δεδομένα για επιστήμονες. Βρες παραδείγματα της ίδιας απλής εργασίας γραμμένα σε κάθε γλώσσα. Σου υπόσχομαι ότι θα εντυπωσιαστείς από το πόσο διαφορετικά μπορεί να φαίνονται ενώ κάνουν ακριβώς το ίδιο! +**Η αποστολή σου, αν αρνηθείς να την αποδεχτείς:** +1. **Γίνε εξερευνητής γλωσσών:** Διάλεξε τρεις γλώσσες προγραμματισμού από τελείως διαφορετικούς κόσμους – ίσως μία που φτιάχνει ιστοσελίδες, μία που δημιουργεί κινητές εφαρμογές, και μία που επεξεργάζεται δεδομένα για επιστήμονες. Βρες παραδείγματα για το ίδιο απλό έργο γραμμένα σε κάθε γλώσσα. Υπόσχομαι ότι θα εντυπωσιαστείς πόσο διαφορετικά μπορούν να φαίνονται, παρόλο που κάνουν το ίδιο ακριβώς πράγμα! -2. **Αποκάλυψε τις ιστορίες προέλευσής τους**: Τι κάνει κάθε γλώσσα ξεχωριστή; Ένα ωραίο γεγονός – κάθε γλώσσα προγραμματισμού δημιουργήθηκε γιατί κάποιος σκέφτηκε, «Ξέρεις κάτι; Πρέπει να υπάρχει καλύτερος τρόπος να λυθεί αυτό το συγκεκριμένο πρόβλημα.» Μπορείς να καταλάβεις ποια ήταν αυτά τα προβλήματα; Μερικές από αυτές τις ιστορίες είναι πραγματικά συναρπαστικές! +2. **Αποκάλυψε την προέλευσή τους:** Τι κάνει κάθε γλώσσα ξεχωριστή; Ιδού ένα ωραίο γεγονός – κάθε γλώσσα προγραμματισμού δημιουργήθηκε γιατί κάποιος σκέφτηκε, «Ξέρεις κάτι; Πρέπει να υπάρχει καλύτερος τρόπος να λυθεί αυτό το συγκεκριμένο πρόβλημα.» Μπορείς να καταλάβεις ποια ήταν αυτά τα προβλήματα; Μερικές από αυτές τις ιστορίες είναι πραγματικά συναρπαστικές! -3. **Γνώρισε τις κοινότητες**: Δες πώς είναι φιλόξενες και παθιασμένες οι κοινότητες κάθε γλώσσας. Κάποιες έχουν εκατομμύρια προγραμματιστές που μοιράζονται γνώση και βοηθούν ο ένας τον άλλον, άλλες είναι μικρότερες αλλά απίστευτα δεμένες και υποστηρικτικές. Θα λατρέψεις να δεις τις διαφορετικές προσωπικότητες που έχουν αυτές οι κοινότητες! +3. **Γνώρισε τις κοινότητες:** Δες πόσο φιλόξενες και παθιασμένες είναι οι κοινότητες κάθε γλώσσας. Κάποιες έχουν εκατομμύρια προγραμματιστών που μοιράζονται γνώση και βοηθούν ο ένας τον άλλον, άλλες είναι μικρότερες αλλά απίστευτα δεμένες και υποστηρικτικές. Θα λατρέψεις να δεις τις διαφορετικές προσωπικότητες αυτών των κοινοτήτων! -4. **Άκου το ένστικτό σου**: Ποια γλώσσα σου φαίνεται πιο προσβάσιμη τώρα; Μην αγχωθείς για την «τέλεια» επιλογή – απλώς άκου το ένστικτό σου! Δεν υπάρχει λάθος απάντηση εδώ, και πάντα μπορείς να εξερευνήσεις άλλες αργότερα. +4. **Ακολούθησε το ένστικτό σου:** Ποια γλώσσα σου φαίνεται πιο προσιτή αυτή τη στιγμή; Μην αγχώνεσαι για την «τέλεια» επιλογή – απλά άκου το ένστικτό σου! Ειλικρινά δεν υπάρχει λάθος απάντηση εδώ, και μπορείς πάντα να εξερευνήσεις άλλες αργότερα. -**Επιπλέον ντετέκτιβ εργασία**: Μάθε αν μπορείς ποια μεγάλα sites ή εφαρμογές είναι φτιαγμένα με κάθε γλώσσα. Σου εγγυώμαι ότι θα σοκαριστείς μαθαίνοντας τι τροφοδοτεί Instagram, Netflix ή εκείνο το κινητό παιχνίδι που δεν μπορείς να σταματήσεις να παίζεις! +**Μπόνους για τον ντετέκτιβ:** Δες αν μπορείς να ανακαλύψεις ποιοι μεγάλοι ιστότοποι ή εφαρμογές είναι χτισμένοι με κάθε γλώσσα. Σου εγγυώμαι ότι θα σοκαριστείς να μάθεις τι τροφοδοτεί το Instagram, το Netflix ή εκείνο το κινητό παιχνίδι που δεν μπορείς να σταματήσεις να παίζεις! -> 💡 **Θυμήσου**: Δεν προσπαθείς να γίνεις ειδικός σε καμία από αυτές τις γλώσσες σήμερα. Απλώς γνωρίζεις τη γειτονιά πριν αποφασίσεις πού θέλεις να στήσεις μαγαζί. Πάρε τον χρόνο σου, διασκέδασε και άσε την περιέργεια να σε οδηγήσει! +> 💡 **Θυμήσου:** Δεν προσπαθείς να γίνεις ειδικός σε καμία από αυτές τις γλώσσες σήμερα. Απλώς γνωρίζεις τη γειτονιά πριν αποφασίσεις πού θέλεις να στήσεις το μαγαζί σου. Πάρε το χρόνο σου, διασκέδασε, και άφησε την περιέργειά σου να σε καθοδηγήσει! -## Ας Γιορτάσουμε Ό,τι Ανακάλυψες! +## Ας Γιορτάσουμε Όσα Ανακάλυψες! -Θεέ μου, έχουμε απορροφήσει τόσες απίστευτες πληροφορίες σήμερα! Είμαι πραγματικά ενθουσιασμένος να δω πόσο από αυτό το καταπληκτικό ταξίδι έχει μείνει μέσα σου. Και να θυμάσαι – δεν είναι διαγώνισμα που πρέπει να πετύχεις απόλυτα. Είναι περισσότερο μια γιορτή για όλα τα ωραία πράγματα που έμαθες για αυτόν τον συναρπαστικό κόσμο στον οποίο πρόκειται να βουτήξεις! +Ω Θεέ μου, έχεις απορροφήσει τόσο απίστευτες πληροφορίες σήμερα! Είμαι πραγματικά ενθουσιασμένος να δω πόσα από αυτό το υπέροχο ταξίδι έχεις κρατήσει μαζί σου. Και θυμήσου – αυτό δεν είναι ένα τεστ όπου πρέπει να τα κάνεις όλα τέλεια. Είναι περισσότερο ένας εορτασμός όλων των φοβερών πραγμάτων που έμαθες για αυτόν τον συναρπαστικό κόσμο που πρόκειται να βυθιστείς! [Κάνε το κουίζ μετά το μάθημα](https://ff-quizzes.netlify.app/web/) -## Ανασκόπηση & Αυτομελέτη -**Πάρε το χρόνο σου να εξερευνήσεις και να το διασκεδάσεις!** +## Ανασκόπηση & Αυτομάθηση -Κάλυψες πολύ υλικό σήμερα, και αυτό είναι κάτι να νιώθεις περήφανος! Τώρα έρχεται το διασκεδαστικό κομμάτι – να εξερευνήσεις τα θέματα που κέντρισαν την περιέργειά σου. Θυμήσου, αυτό δεν είναι εργασία για το σπίτι – είναι μια περιπέτεια! +**Πάρε το χρόνο σου να εξερευνήσεις και να διασκεδάσεις!** +Έχεις καλύψει πολλή ύλη σήμερα, και αυτό είναι κάτι για το οποίο μπορείς να είσαι περήφανος! Τώρα ξεκινά το διασκεδαστικό μέρος – να εξερευνήσεις τα θέματα που προκάλεσαν την περιέργειά σου. Θυμήσου, αυτό δεν είναι σπίτι – είναι μια περιπέτεια! **Βυθίσου πιο βαθιά σε ό,τι σε ενθουσιάζει:** -**Πάρε πρακτική με γλώσσες προγραμματισμού:** +**Δοκίμασε πρακτικά τις γλώσσες προγραμματισμού:** - Επισκέψου τις επίσημες ιστοσελίδες 2-3 γλωσσών που τράβηξαν την προσοχή σου. Η κάθε μία έχει τη δική της προσωπικότητα και ιστορία! -- Δοκίμασε κάποια διαδικτυακά προγραμματιστικά περιβάλλοντα όπως το [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ή [Replit](https://replit.com/). Μην φοβηθείς να πειραματιστείς – δεν θα σπάσεις τίποτα! -- Διάβασε για το πώς γεννήθηκε η αγαπημένη σου γλώσσα. Σοβαρά, μερικές από αυτές τις ιστορίες προέλευσης είναι συναρπαστικές και θα σε βοηθήσουν να καταλάβεις γιατί οι γλώσσες λειτουργούν όπως λειτουργούν. +- Δοκίμασε κάποια διαδικτυακά playgrounds κώδικα όπως το [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), ή [Replit](https://replit.com/). Μην φοβηθείς να πειραματιστείς – δεν μπορείς να σπάσεις τίποτα! +- Διάβασε για το πώς δημιουργήθηκε η αγαπημένη σου γλώσσα. Σοβαρά τώρα, μερικές από αυτές τις ιστορίες προέλευσης είναι συναρπαστικές και θα σε βοηθήσουν να καταλάβεις γιατί οι γλώσσες λειτουργούν όπως λειτουργούν. -**Νιώσε άνετα με τα νέα σου εργαλεία:** -- Κατέβασε το Visual Studio Code αν δεν το έχεις ήδη – είναι δωρεάν και θα το λατρέψεις! -- Περάσε λίγα λεπτά εξερευνώντας την αγορά επεκτάσεων (Extensions marketplace). Είναι σαν ένα κατάστημα εφαρμογών για τον κώδικά σου! -- Άνοιξε τα Εργαλεία Προγραμματιστή (Developer Tools) του browser σου και κάνε κλικ εδώ κι εκεί. Μην ανησυχείς αν δεν καταλαβαίνεις τα πάντα – απλώς εξοικειώσου με το τι υπάρχει. +**Γίνε άνετος με τα νέα σου εργαλεία:** +- Κατέβασε το Visual Studio Code αν δεν το έχεις κάνει ήδη – είναι δωρεάν και θα το λατρέψεις! +- Περάστε μερικά λεπτά περιηγούμενος στην αγορά επεκτάσεων. Είναι σαν ένα app store για τον επεξεργαστή κώδικά σου! +- Άνοιξε τα Developer Tools του browser σου και κάνε κλικ ανάμεσα. Μην ανησυχείς αν δεν καταλαβαίνεις τα πάντα – απλά εξοικειώσου με όσα υπάρχουν εκεί. -**Γίνε μέρος της κοινότητας:** -- Ακολούθησε κάποιες κοινότητες προγραμματιστών στο [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ή [GitHub](https://github.com/). Η κοινότητα προγραμματιστών είναι απίστευτα φιλόξενη προς τους νέους! -- Δες βίντεο με μαθήματα για αρχάριους στο YouTube. Υπάρχουν τόσοι πολλοί υπέροχοι δημιουργοί που θυμούνται πώς είναι να ξεκινάς. +**Γίνε μέλος της κοινότητας:** +- Ακολούθησε μερικές κοινότητες προγραμματιστών στο [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), ή [GitHub](https://github.com/). Η κοινότητα προγραμματιστών είναι εξαιρετικά φιλόξενη για τους νεοεισερχόμενους! +- Δες μερικά βίντεο για αρχάριους στο YouTube. Υπάρχουν πολλοί εξαιρετικοί δημιουργοί εκεί έξω που θυμούνται πώς είναι να ξεκινάς. - Σκέψου να συμμετάσχεις σε τοπικές συναντήσεις ή διαδικτυακές κοινότητες. Πίστεψέ με, οι προγραμματιστές αγαπούν να βοηθούν τους νεοεισερχόμενους! -> 🎯 **Άκου, αυτό θέλω να θυμάσαι**: Δεν περιμένουμε να γίνεις μάγος του κώδικα μέσα σε μια νύχτα! Τώρα απλώς γνωρίζεις αυτόν τον απίθανο νέο κόσμο που πρόκειται να γίνεις μέρος του. Πάρε το χρόνο σου, απόλαυσε το ταξίδι, και θυμήσου – κάθε προγραμματιστής που θαυμάζεις κάθονταν ακριβώς εκεί που είσαι τώρα, νιώθοντας ενθουσιασμό και ίσως λίγο υπερφορτωμένος. Είναι απόλυτα φυσιολογικό, και αυτό σημαίνει ότι τα πας πολύ καλά! - - +> 🎯 **Άκου, αυτό θέλω να θυμάσαι**: Δεν αναμένεται να γίνεις μάγος του κώδικα μέσα σε μία νύχτα! Αυτή τη στιγμή, απλώς γνωρίζεις αυτόν τον καταπληκτικό νέο κόσμο που πρόκειται να γίνεις μέρος του. Πάρε τον χρόνο σου, απόλαυσε το ταξίδι, και θυμήσου – κάθε προγραμματιστής που θαυμάζεις κάποτε καθότανε ακριβώς εκεί που είσαι τώρα, νιώθοντας ενθουσιασμό και ίσως λίγο μπερδεμένος. Αυτό είναι τελείως φυσιολογικό, και σημαίνει ότι τα πας καλά! -## Εργασία +## Ανάθεση [Reading the Docs](assignment.md) -> 💡 **Μικρή παρότρυνση για την εργασία σου**: Θα ήθελα πολύ να σε δω να εξερευνήσεις εργαλεία που δεν έχουμε καλύψει ακόμα! Άφησε για λίγο στην άκρη τους επεξεργαστές, browsers και εργαλεία γραμμής εντολών που έχουμε ήδη αναφέρει – υπάρχει ένας ολόκληρος καταπληκτικός κόσμος με απίθανα εργαλεία ανάπτυξης που περιμένουν να τα ανακαλύψεις. Ψάξε για αυτά που συντηρούνται ενεργά και έχουν ζωντανές, φιλικές κοινότητες (συνήθως έχουν τα καλύτερα tutorials και τους πιο υποστηρικτικούς ανθρώπους όταν κολλήσεις και χρειαστείς βοήθεια). +> 💡 **Μικρή ώθηση για την ανάθεσή σου**: Θα ήθελα πάρα πολύ να σε δω να εξερευνάς κάποια εργαλεία που δεν έχουμε καλύψει ακόμα! Παράβλεψε τους επεξεργαστές, browsers και εργαλεία γραμμής εντολών που έχουμε ήδη αναφέρει – υπάρχει όλο αυτό το απίστευτο σύμπαν εκπληκτικών εργαλείων ανάπτυξης που περιμένει να ανακαλυφθεί. Ψάξε για αυτά που συντηρούνται ενεργά και έχουν ζωντανές, βοηθητικές κοινότητες (αυτά έχουν τις καλύτερες οδηγίες και τα πιο υποστηρικτικά άτομα όταν κολλήσεις και χρειαστείς ένα φιλικό χέρι). --- ## 🚀 Το Χρονοδιάγραμμα του Ταξιδιού σου στον Προγραμματισμό -### ⚡ **Τι μπορείς να κάνεις στα επόμενα 5 λεπτά** -- [ ] Αποθήκευσε σελιδοδείκτες 2-3 ιστοσελίδες γλωσσών προγραμματισμού που τράβηξαν την προσοχή σου -- [ ] Κατέβασε το Visual Studio Code αν δεν το έχεις ήδη -- [ ] Άνοιξε τα DevTools του browser σου (F12) και κάνε κλικ σε οποιαδήποτε ιστοσελίδα -- [ ] Γίνε μέλος σε μια κοινότητα προγραμματιστών (Dev.to, Reddit r/webdev, ή Stack Overflow) +### ⚡ **Τι Μπορείς να Κάνεις στα Επόμενα 5 Λεπτά** +- [ ] Κράτα σελιδοδείκτη σε ιστοσελίδες 2-3 γλωσσών προγραμματισμού που τράβηξαν το ενδιαφέρον σου +- [ ] Κατέβασε το Visual Studio Code αν δεν το έχεις ήδη κάνει +- [ ] Άνοιξε τα DevTools του browser σου (F12) και κλίκαρε σε οποιαδήποτε ιστοσελίδα +- [ ] Γίνε μέλος σε μία κοινότητα προγραμματισμού (Dev.to, Reddit r/webdev, ή Stack Overflow) -### ⏰ **Τι μπορείς να πετύχεις αυτήν την ώρα** -- [ ] Ολοκλήρωσε το quiz μετά το μάθημα και σκέψου τις απαντήσεις σου +### ⏰ **Τι Μπορείς να Ολοκληρώσεις Αυτή την Ώρα** +- [ ] Ολοκλήρωσε το κουίζ μετά το μάθημα και σκέψου τις απαντήσεις σου - [ ] Ρύθμισε το VS Code με την επέκταση GitHub Copilot - [ ] Δοκίμασε ένα παράδειγμα "Hello World" σε 2 διαφορετικές γλώσσες προγραμματισμού online - [ ] Δες ένα βίντεο "Μια μέρα στη ζωή ενός προγραμματιστή" στο YouTube -- [ ] Ξεκίνα την έρευνα σου για τις γλώσσες προγραμματισμού (από την πρόκληση) +- [ ] Ξεκίνα την ερευνητική σου δουλειά για τις γλώσσες προγραμματισμού (από την πρόκληση) -### 📅 **Η περιπέτεια της εβδομάδας σου** -- [ ] Ολοκλήρωσε την εργασία και εξερεύνησε 3 νέα εργαλεία ανάπτυξης +### 📅 **Η Περιπέτεια της Εβδομάδας σου** +- [ ] Ολοκλήρωσε την ανάθεση και εξερεύνησε 3 νέα εργαλεία ανάπτυξης - [ ] Ακολούθησε 5 προγραμματιστές ή λογαριασμούς προγραμματισμού στα social media -- [ ] Δοκίμασε να φτιάξεις κάτι μικρό στο CodePen ή Replit (ακόμα και μόνο "Hello, [Το Όνομά Σου]!") -- [ ] Διάβασε ένα άρθρο προγραμματιστή για το ταξίδι κάποιου με τον κώδικα -- [ ] Συμμετέχει σε ένα εικονικό meetup ή δες μια ομιλία για προγραμματισμό -- [ ] Άρχισε να μαθαίνεις τη γλώσσα που διάλεξες με online tutorials +- [ ] Προσπάθησε να φτιάξεις κάτι μικρό στο CodePen ή Replit (ακόμα και απλά "Hello, [Το Όνομά σου]!") +- [ ] Διάβασε ένα post σε blog προγραμματιστή σχετικά με το ταξίδι κάποιου στον κώδικα +- [ ] Συμμετάσχετε σε μια διαδικτυακή συνάντηση ή παρακολούθησε μια ομιλία προγραμματισμού +- [ ] Ξεκίνα να μαθαίνεις τη γλώσσα που επέλεξες με διαδικτυακά μαθήματα -### 🗓️ **Η μεταμόρφωση του μήνα σου** +### 🗓️ **Η Μεταμόρφωσή σου Μέσα στον Μήνα** - [ ] Φτιάξε το πρώτο σου μικρό project (ακόμα και μια απλή ιστοσελίδα μετράει!) -- [ ] Συνεισφέρε σε ένα ανοιχτού κώδικα project (ξεκίνα με διορθώσεις τεκμηρίωσης) -- [ ] Γίνε μέντορας σε κάποιον που μόλις ξεκινάει το ταξίδι στον προγραμματισμό -- [ ] Δημιούργησε την προσωπική σου ιστοσελίδα-πορτφόλιο προγραμματιστή +- [ ] Συνεισφέρε σε ένα open-source project (ξεκίνα με διορθώσεις τεκμηρίωσης) +- [ ] Μέντορας σε κάποιον που μόλις ξεκινά το ταξίδι προγραμματισμού +- [ ] Δημιούργησε την προσωπική σου ιστοσελίδα-χαρτοφυλάκιο προγραμματιστή - [ ] Συνδέσου με τοπικές κοινότητες προγραμματιστών ή ομάδες μελέτης -- [ ] Ξεκίνα να σχεδιάζεις τον επόμενο στόχο μάθησής σου +- [ ] Ξεκίνα να σχεδιάζεις το επόμενο εκπαιδευτικό σου ορόσημο -### 🎯 **Τελικός έλεγχος αναστοχασμού** +### 🎯 **Τελικός Απολογισμός** -**Πριν προχωρήσεις, πάρε μια στιγμή να γιορτάσεις:** -- Ποιο ήταν το ένα πράγμα για τον προγραμματισμό σήμερα που σε ενθουσίασε; -- Ποιο εργαλείο ή έννοια θέλεις να εξερευνήσεις πρώτα; -- Πώς αισθάνεσαι που ξεκινάς αυτό το ταξίδι στον προγραμματισμό; -- Ποια είναι μια ερώτηση που θα ήθελες να κάνεις σε έναν προγραμματιστή τώρα; +**Πριν προχωρήσεις, πάρε μια στιγμή για να γιορτάσεις:** +- Ποιο είναι ένα πράγμα για τον προγραμματισμό που σε ενθουσίασε σήμερα; +- Ποιο εργαλείο ή έννοια θέλεις να εξερευνήσεις πρώτο; +- Πώς νιώθεις που ξεκινάς αυτό το ταξίδι στον προγραμματισμό; +- Ποια είναι μια ερώτηση που θα ήθελες να κάνεις σε έναν προγραμματιστή αυτή τη στιγμή; ```mermaid journey - title Το Ταξίδι σας για την Ενίσχυση της Αυτοπεποίθησής σας + title Το Ταξίδι Ενίσχυσης της Αυτοπεποίθησής Σου section Σήμερα Curious: 3: You Overwhelmed: 4: You @@ -838,16 +839,16 @@ journey Exploring: 4: You Learning: 5: You Connecting: 4: You - section Επόμενος Μήνας + section Τον Επόμενο Μήνα Building: 5: You Confident: 5: You Helping Others: 5: You ``` -> 🌟 **Θυμήσου**: Κάθε ειδικός ήταν κάποτε αρχάριος. Κάθε έμπειρος προγραμματιστής ένιωσε κάποτε ακριβώς όπως νιώθεις τώρα – ενθουσιασμό, ίσως λίγη υπερφόρτωση, και σίγουρα περιέργεια για το τι είναι δυνατό. Είσαι σε καταπληκτική παρέα, και αυτό το ταξίδι πρόκειται να είναι απίθανο. Καλώς ήρθες στον υπέροχο κόσμο του προγραμματισμού! 🎉 +> 🌟 **Θυμήσου**: Κάθε ειδικός ήταν κάποτε αρχάριος. Κάθε ανώτερος προγραμματιστής ένιωθε ακριβώς όπως εσύ τώρα – ενθουσιασμένος, ίσως λίγο μπερδεμένος, και σίγουρα περίεργος για το τι είναι δυνατόν. Βρίσκεσαι σε καταπληκτική παρέα, και αυτό το ταξίδι θα είναι απίστευτο. Καλωσόρισες στον υπέροχο κόσμο του προγραμματισμού! 🎉 --- **Αποποίηση ευθυνών**: -Το παρόν έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να έχετε υπόψη σας ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα προέλευσής του πρέπει να θεωρείται η έγκυρη πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. +Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που καταβάλλουμε προσπάθεια για ακρίβεια, παρακαλούμε να γνωρίζετε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του πρέπει να θεωρείται η αξιόπιστη πηγή. Για κρίσιμες πληροφορίες, συνιστάται η επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. \ No newline at end of file diff --git a/translations/el/AGENTS.md b/translations/el/AGENTS.md index b10a934d6..09ed63570 100644 --- a/translations/el/AGENTS.md +++ b/translations/el/AGENTS.md @@ -2,36 +2,36 @@ ## Επισκόπηση Έργου -Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών αρχών ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, περιλαμβάνοντας 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML. +Αυτό είναι ένα εκπαιδευτικό αποθετήριο προγράμματος σπουδών για τη διδασκαλία των βασικών της ανάπτυξης ιστού σε αρχάριους. Το πρόγραμμα σπουδών είναι ένα ολοκληρωμένο μάθημα 12 εβδομάδων που έχει αναπτυχθεί από τους Microsoft Cloud Advocates, με 24 πρακτικά μαθήματα που καλύπτουν JavaScript, CSS και HTML. ### Κύρια Στοιχεία -- **Εκπαιδευτικό Περιεχόμενο**: 24 οργανωμένα μαθήματα ταξινομημένα σε ενότητες έργων -- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Περιηγητή, Παιχνίδι Διαστήματος, Εφαρμογή Τραπεζικής, Επεξεργαστής Κώδικα και Βοηθός Συνομιλίας AI -- **Διαδραστικά Quiz**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά το μάθημα) -- **Υποστήριξη Πολλών Γλωσσών**: Αυτόματες μεταφράσεις σε 50+ γλώσσες μέσω GitHub Actions +- **Εκπαιδευτικό Περιεχόμενο**: 24 δομημένα μαθήματα οργανωμένα σε ενότητες με βάση έργα +- **Πρακτικά Έργα**: Terrarium, Παιχνίδι Πληκτρολόγησης, Επέκταση Browser, Παιχνίδι στο Διάστημα, Τραπεζική Εφαρμογή, Επεξεργαστής Κώδικα και Βοηθός Chat με AI +- **Διαδραστικά Κουίζ**: 48 κουίζ με 3 ερωτήσεις το καθένα (αξιολογήσεις πριν/μετά τα μαθήματα) +- **Πολυγλωσσική Υποστήριξη**: Αυτόματες μεταφράσεις για πάνω από 50 γλώσσες μέσω GitHub Actions - **Τεχνολογίες**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (για έργα AI) ### Αρχιτεκτονική - Εκπαιδευτικό αποθετήριο με δομή βασισμένη σε μαθήματα - Κάθε φάκελος μαθήματος περιέχει README, παραδείγματα κώδικα και λύσεις -- Αυτόνομα έργα σε ξεχωριστούς καταλόγους (quiz-app, διάφορα έργα μαθημάτων) -- Σύστημα μετάφρασης με χρήση GitHub Actions (co-op-translator) -- Τεκμηρίωση που σερβίρεται μέσω Docsify και διατίθεται σε μορφή PDF +- Ανεξάρτητα έργα σε ξεχωριστούς καταλόγους (quiz-app, διάφορα μαθήματα έργων) +- Σύστημα μετάφρασης που χρησιμοποιεί GitHub Actions (co-op-translator) +- Τεκμηρίωση προσβάσιμη μέσω Docsify και διαθέσιμη ως PDF -## Εντολές Ρύθμισης +## Εντολές Ρυθμίσεων -Αυτό το αποθετήριο προορίζεται κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία σε συγκεκριμένα έργα: +Αυτό το αποθετήριο προορίζεται κυρίως για κατανάλωση εκπαιδευτικού περιεχομένου. Για εργασία με συγκεκριμένα έργα: -### Ρύθμιση Κύριου Αποθετηρίου +### Κύρια Ρύθμιση Αποθετηρίου ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Ρύθμιση Εφαρμογής Κουίζ (Vue 3 + Vite) +### Ρύθμιση Quiz App (Vue 3 + Vite) ```bash cd quiz-app @@ -41,7 +41,7 @@ npm run build # Δημιουργία για παραγωγή npm run lint # Εκτέλεση ESLint ``` -### API Έργο Τράπεζας (Node.js + Express) +### API Τραπεζικού Έργου (Node.js + Express) ```bash cd 7-bank-project/api @@ -51,7 +51,7 @@ npm run lint # Εκτέλεση ESLint npm run format # Μορφοποίηση με Prettier ``` -### Έργα Επέκτασης Περιηγητή +### Έργα Επέκτασης Browser ```bash cd 5-browser-extension/solution @@ -59,15 +59,15 @@ npm install # Ακολουθήστε τις οδηγίες φόρτωσης επεκτάσεων ειδικές για τον περιηγητή ``` -### Έργα Παιχνιδιού Διαστήματος +### Έργα Παιχνιδιού στο Διάστημα ```bash cd 6-space-game/solution npm install -# Ανοίξτε το index.html στον περιηγητή ή χρησιμοποιήστε το Live Server +# Ανοίξτε το index.html σε πρόγραμμα περιήγησης ή χρησιμοποιήστε Live Server ``` -### Έργο Συνομιλίας (Python Backend) +### Έργο Chat (Backend Python) ```bash cd 9-chat-project/solution/backend/python @@ -76,207 +76,207 @@ pip install openai python api.py ``` -## Ροή Εργασίας Ανάπτυξης +## Ροή Ανάπτυξης ### Για Συνεργάτες Περιεχομένου -1. **Διακλάδωση (Fork)** του αποθετηρίου στο λογαριασμό σας στο GitHub -2. **Κλωνοποίηση (Clone)** του fork τοπικά -3. **Δημιουργία νέου κλάδου** για τις αλλαγές σας -4. Κάντε αλλαγές στο περιεχόμενο των μαθημάτων ή στα παραδείγματα κώδικα -5. Δοκιμάστε τις αλλαγές κώδικα στους αντίστοιχους φακέλους έργων -6. Υποβάλετε pull requests ακολουθώντας τις οδηγίες συμβολής +1. **Κάντε fork το αποθετήριο** στον λογαριασμό σας στο GitHub +2. **Κλωνοποιήστε το fork τοπικά** +3. **Δημιουργήστε νέο branch** για τις αλλαγές σας +4. Κάντε αλλαγές σε περιεχόμενο μαθήματος ή παραδείγματα κώδικα +5. Δοκιμάστε τις αλλαγές σε σχετικούς καταλόγους έργων +6. Υποβάλετε pull requests σύμφωνα με τις οδηγίες συνεισφοράς ### Για Μαθητές -1. Κάντε fork ή clone το αποθετήριο -2. Πλοηγηθείτε στους φακέλους μαθημάτων κατά σειρά +1. Κάντε fork ή κλωνοποιήστε το αποθετήριο +2. Πλοηγηθείτε στους καταλόγους μαθημάτων διαδοχικά 3. Διαβάστε τα αρχεία README για κάθε μάθημα 4. Ολοκληρώστε τα κουίζ πριν το μάθημα στη διεύθυνση https://ff-quizzes.netlify.app/web/ -5. Μελετήστε τα παραδείγματα κώδικα στους φακέλους μαθημάτων +5. Εργαστείτε μέσα από τα παραδείγματα κώδικα στους φακέλους μαθημάτων 6. Ολοκληρώστε εργασίες και προκλήσεις 7. Κάντε τα κουίζ μετά το μάθημα ### Ζωντανή Ανάπτυξη -- **Τεκμηρίωση**: Τρέξτε `docsify serve` στην ρίζα (θύρα 3000) -- **Εφαρμογή Κουίζ**: Τρέξτε `npm run dev` στον φάκελο quiz-app -- **Έργα**: Χρησιμοποιήστε την επέκταση VS Code Live Server για έργα HTML -- **API Έργα**: Τρέξτε `npm start` στους αντίστοιχους φακέλους API +- **Τεκμηρίωση**: Εκτελέστε `docsify serve` στον ριζικό φάκελο (θύρα 3000) +- **Quiz App**: Εκτελέστε `npm run dev` στον φάκελο quiz-app +- **Έργα**: Χρησιμοποιήστε το VS Code Live Server extension για HTML έργα +- **API Έργα**: Εκτελέστε `npm start` στους αντίστοιχους φακέλους API ## Οδηγίες Δοκιμών -### Δοκιμή Εφαρμογής Κουίζ +### Δοκιμές Quiz App ```bash cd quiz-app -npm run lint # Έλεγχος για προβλήματα μορφοποίησης κώδικα -npm run build # Επαλήθευση επιτυχίας της κατασκευής +npm run lint # Ελέγξτε για προβλήματα στο στυλ κώδικα +npm run build # Επιβεβαιώστε ότι η κατασκευή είναι επιτυχής ``` -### Δοκιμή API Τράπεζας +### Δοκιμές Bank API ```bash cd 7-bank-project/api -npm run lint # Έλεγχος για ζητήματα στυλ κώδικα -node server.js # Επαλήθευση εκκίνησης διακομιστή χωρίς σφάλματα +npm run lint # Ελέγξτε για προβλήματα στο στυλ κώδικα +node server.js # Επαληθεύστε ότι ο διακομιστής ξεκινά χωρίς σφάλματα ``` ### Γενική Προσέγγιση Δοκιμών -- Πρόκειται για εκπαιδευτικό αποθετήριο χωρίς πλήρεις αυτοματοποιημένες δοκιμές +- Αυτό είναι ένα εκπαιδευτικό αποθετήριο χωρίς πλήρεις αυτοματοποιημένες δοκιμές - Οι χειροκίνητες δοκιμές εστιάζουν σε: - - Εκτέλεση παραδειγμάτων κώδικα χωρίς σφάλματα - - Σωστή λειτουργία συνδέσμων στην τεκμηρίωση - - Επιτυχής ολοκλήρωση δημιουργίας έργων - - Τα παραδείγματα ακολουθούν βέλτιστες πρακτικές + - Τα παραδείγματα κώδικα να τρέχουν χωρίς σφάλματα + - Οι σύνδεσμοι στην τεκμηρίωση να λειτουργούν σωστά + - Οι κατασκευές έργων να ολοκληρώνονται επιτυχώς + - Τα παραδείγματα να ακολουθούν βέλτιστες πρακτικές -### Έλεγχοι Πριν την Υποβολή +### Έλεγχοι Πριν Υποβολή -- Τρέξτε `npm run lint` σε φακέλους με package.json +- Εκτελέστε `npm run lint` σε φακέλους με package.json - Επαληθεύστε ότι οι σύνδεσμοι markdown είναι έγκυροι -- Δοκιμάστε παραδείγματα κώδικα στον περιηγητή ή Node.js -- Επιβεβαιώστε ότι οι μεταφράσεις διατηρούν σωστή δομή +- Δοκιμάστε παραδείγματα κώδικα στο πρόγραμμα περιήγησης ή Node.js +- Ελέγξτε ότι οι μεταφράσεις διατηρούν τη σωστή δομή ## Οδηγίες Στυλ Κώδικα ### JavaScript - Χρησιμοποιήστε σύγχρονη σύνταξη ES6+ -- Ακολουθήστε τις τυπικές ρυθμίσεις ESLint που παρέχονται στα έργα +- Ακολουθήστε τις τυποποιημένες ρυθμίσεις ESLint που παρέχονται στα έργα - Χρησιμοποιήστε κατανοητά ονόματα μεταβλητών και συναρτήσεων για εκπαιδευτική σαφήνεια - Προσθέστε σχόλια που εξηγούν έννοιες για τους μαθητές -- Μορφοποιήστε με Prettier όπου έχει ρυθμιστεί +- Διαμορφώστε με Prettier όπου έχει ρυθμιστεί ### HTML/CSS - Σημαντικά στοιχεία HTML5 -- Αρχές responsive σχεδίασης -- Καθαρή ονοματοθεσία κλάσεων +- Αρχές responsive design +- Καθαρή ονοματοδοσία κλάσεων - Σχόλια που εξηγούν τεχνικές CSS για μαθητές ### Python - Οδηγίες στυλ PEP 8 - Καθαρά, εκπαιδευτικά παραδείγματα κώδικα -- Σημειώσεις τύπων όπου βοηθούν στη μάθηση +- Υποδείξεις τύπων όπου βοηθούν στη μάθηση ### Τεκμηρίωση Markdown -- Καθαρή ιεραρχία κεφαλίδων -- Μπλοκ κώδικα με δήλωση γλώσσας -- Σύνδεσμοι για επιπλέον πόρους -- Στιγμιότυπα και εικόνες στους φακέλους `images/` -- Εναλλακτικό κείμενο για εικόνες για προσβασιμότητα +- Ξεκάθαρη ιεραρχία τίτλων +- Μπλοκ κώδικα με καθορισμένη γλώσσα +- Σύνδεσμοι σε πρόσθετους πόρους +- Στιγμιότυπα και εικόνες στους καταλόγους `images/` +- Περιγραφικό κείμενο (alt) για εικόνες για προσβασιμότητα ### Οργάνωση Αρχείων -- Μαθήματα αριθμημένα διαδοχικά (1-getting-started-lessons, 2-js-basics κτλ.) -- Κάθε έργο έχει φακέλους `solution/` και συχνά `start/` ή `your-work/` -- Αποθηκεύονται εικόνες σε φακέλους `images/` κάθε μαθήματος -- Μεταφράσεις στη δομή `translations/{language-code}/` +- Μαθήματα αριθμημένα διαδοχικά (1-getting-started-lessons, 2-js-basics, κλπ.) +- Κάθε έργο έχει φακέλους `solution/` και συνήθως `start/` ή `your-work/` +- Οι εικόνες αποθηκεύονται σε φακέλους `images/` συγκεκριμένων μαθημάτων +- Οι μεταφράσεις βρίσκονται στη δομή `translations/{language-code}/` -## Δημιουργία και Ανάπτυξη +## Κατασκευή και Ανάπτυξη -### Ανάπτυξη Εφαρμογής Κουίζ (Azure Static Web Apps) +### Ανάπτυξη Quiz App (Azure Static Web Apps) -Η εφαρμογή κουίζ έχει ρυθμιστεί για ανάπτυξη σε Azure Static Web Apps: +Το quiz-app είναι διαμορφωμένο για ανάπτυξη σε Azure Static Web Apps: ```bash cd quiz-app -npm run build # Δημιουργεί τον φάκελο dist/ -# Αναπτύσσει μέσω ροής εργασίας GitHub Actions κατά την ώθηση στο main +npm run build # Δημιουργεί το φάκελο dist/ +# Αναπτύσσει μέσω της ροής εργασίας GitHub Actions κατά την προώθηση στο main ``` -Ρυθμίσεις Azure Static Web Apps: -- **Τοποθεσία εφαρμογής**: `/quiz-app` -- **Τοποθεσία εξόδου**: `dist` +Διαμόρφωση Azure Static Web Apps: +- **Θέση εφαρμογής**: `/quiz-app` +- **Θέση εξόδου**: `dist` - **Ροή εργασίας**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` ### Δημιουργία PDF Τεκμηρίωσης ```bash -npm install # Εγκαταστήστε το docsify-to-pdf -npm run convert # Δημιουργήστε PDF από το docs +npm install # Εγκατάσταση του docsify-to-pdf +npm run convert # Δημιουργία PDF από docs ``` ### Τεκμηρίωση Docsify ```bash npm install -g docsify-cli # Εγκαταστήστε το Docsify παγκοσμίως -docsify serve # Εξυπηρετήστε στο localhost:3000 +docsify serve # Σερβίρετε στο localhost:3000 ``` -### Δημιουργίες ανά Έργο +### Κατασκευές Ανά Έργο -Κάθε φάκελος έργου μπορεί να έχει τη δική του διαδικασία δημιουργίας: -- Vue έργα: `npm run build` δημιουργεί πακέτα παραγωγής -- Στατικά έργα: Δεν απαιτείται βήμα δημιουργίας, τα αρχεία σερβίρονται απευθείας +Κάθε φάκελος έργου μπορεί να έχει τη δική του διαδικασία κατασκευής: +- Έργα Vue: `npm run build` δημιουργεί παραγωγικά πακέτα +- Στατικά έργα: Χωρίς βήμα κατασκευής, τα εξυπηρετεί άμεσα ## Οδηγίες Pull Request -### Μορφοποίηση Τίτλου +### Μορφή Τίτλου -Χρησιμοποιήστε σαφείς, περιγραφικούς τίτλους που δείχνουν το πεδίο αλλαγής: -- `[Quiz-app] Προσθήκη νέου κουίζ για μάθημα X` -- `[Lesson-3] Διόρθωση ορθογραφικού λάθους στο έργο terrarium` +Χρησιμοποιήστε σαφείς, περιγραφικούς τίτλους που δείχνουν το αντικείμενο αλλαγής: +- `[Quiz-app] Προσθήκη νέου κουίζ για το μάθημα X` +- `[Lesson-3] Διόρθωση τυπογραφικού στο έργο terrarium` - `[Translation] Προσθήκη ισπανικής μετάφρασης για το μάθημα 5` -- `[Docs] Ενημέρωση οδηγών ρύθμισης` +- `[Docs] Ενημέρωση οδηγιών ρύθμισης` ### Απαραίτητοι Έλεγχοι Πριν υποβάλετε PR: 1. **Ποιότητα Κώδικα**: - - Τρέξτε `npm run lint` στους σχετικούς φακέλους έργων + - Εκτελέστε `npm run lint` σε σχετικούς φακέλους έργων - Διορθώστε όλα τα σφάλματα και προειδοποιήσεις lint -2. **Επαλήθευση Δημιουργίας**: - - Τρέξτε `npm run build` εφόσον ισχύει - - Επιβεβαιώστε απουσία σφαλμάτων δημιουργίας +2. **Επαλήθευση Κατασκευής**: + - Εκτελέστε `npm run build` όπου έχει εφαρμογή + - Βεβαιωθείτε ότι δεν υπάρχουν σφάλματα κατασκευής -3. **Έλεγχος Συνδέσμων**: - - Δοκιμάστε όλους τους συνδέσμους markdown - - Επαληθεύστε την απόδοση εικόνων +3. **Επαλήθευση Συνδέσμων**: + - Ελέγξτε όλους τους συνδέσμους markdown + - Εξασφαλίστε ότι οι εικόνες φορτώνουν σωστά -4. **Έλεγχος Περιεχομένου**: - - Επιμεληθείτε για ορθογραφικά και γραμματικά λάθη - - Επιβεβαιώστε ότι τα παραδείγματα κώδικα είναι σωστά και εκπαιδευτικά - - Διασφαλίστε ότι οι μεταφράσεις διατηρούν το αρχικό νόημα +4. **Ανασκόπηση Περιεχομένου**: + - Διορθώστε ορθογραφικά και γραμματικά λάθη + - Επαληθεύστε την ορθότητα και εκπαιδευτική αξία των παραδειγμάτων κώδικα + - Ελέγξτε ότι οι μεταφράσεις διατηρούν το αρχικό νόημα -### Απαιτήσεις Συμβολής +### Απαιτήσεις Συμμετοχής -- Συμφωνήστε με το Microsoft CLA (αυτόματος έλεγχος στην πρώτη PR) -- Ακολουθήστε τον [Κώδικα Συμπεριφοράς της Microsoft Open Source](https://opensource.microsoft.com/codeofconduct/) +- Συμφωνία με το Microsoft CLA (αυτοματοποιημένος έλεγχος στο πρώτο PR) +- Ακολούθηση του [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Δείτε το [CONTRIBUTING.md](./CONTRIBUTING.md) για λεπτομερείς οδηγίες -- Αναφέρετε αριθμούς θεμάτων στην περιγραφή PR όπου ισχύει +- Αναφορά αριθμού θεμάτων στην περιγραφή PR όταν ισχύει ### Διαδικασία Αναθεώρησης -- Τα PR ελέγχονται από συντηρητές και την κοινότητα +- Τα PR ελέγχονται από διαχειριστές και την κοινότητα - Δίνεται προτεραιότητα στην εκπαιδευτική σαφήνεια - Τα παραδείγματα κώδικα πρέπει να ακολουθούν τις τρέχουσες βέλτιστες πρακτικές - Οι μεταφράσεις ελέγχονται για ακρίβεια και πολιτισμική καταλληλότητα ## Σύστημα Μετάφρασης -### Αυτόματη Μετάφραση +### Αυτόματες Μεταφράσεις - Χρησιμοποιεί GitHub Actions με ροή εργασίας co-op-translator -- Μεταφράζει αυτόματα σε 50+ γλώσσες -- Αρχεία πηγής στους κύριους φακέλους -- Μεταφρασμένα αρχεία στους φακέλους `translations/{language-code}/` +- Μεταφράζει σε πάνω από 50 γλώσσες αυτόματα +- Αρχεία πηγής στους κύριους καταλόγους +- Μεταφρασμένα αρχεία σε φακέλους `translations/{language-code}/` ### Προσθήκη Χειροκίνητων Βελτιώσεων Μετάφρασης -1. Εντοπίστε το αρχείο στο `translations/{language-code}/` +1. Εντοπίστε το αρχείο σε `translations/{language-code}/` 2. Κάντε βελτιώσεις διατηρώντας τη δομή -3. Επιβεβαιώστε ότι τα παραδείγματα κώδικα είναι λειτουργικά -4. Δοκιμάστε τυχόν τοπικοποιημένο περιεχόμενο κουίζ +3. Βεβαιωθείτε ότι τα παραδείγματα κώδικα παραμένουν λειτουργικά +4. Δοκιμάστε το τοπικευμένο περιεχόμενο κουίζ ### Μεταδεδομένα Μετάφρασης -Τα μεταφρασμένα αρχεία περιλαμβάνουν κεφαλίδα μεταδεδομένων: +Τα μεταφρασμένα αρχεία περιλαμβάνουν επικεφαλίδα μεταδεδομένων: ```markdown ``` -## Αποσφαλμάτωση και Επίλυση Προβλημάτων +## Αντιμετώπιση Σφαλμάτων και Επίλυση Προβλημάτων -### Συνήθη Προβλήματα +### Συνηθισμένα Προβλήματα -**Η εφαρμογή κουίζ δεν ξεκινά**: -- Ελέγξτε την έκδοση Node.js (προτείνεται v14+) -- Διαγράψτε τους φακέλους `node_modules` και το αρχείο `package-lock.json`, τρέξτε ξανά `npm install` +**Αποτυχία εκκίνησης της εφαρμογής κουίζ**: +- Ελέγξτε την έκδοση Node.js (συνιστάται v14+) +- Διαγράψτε `node_modules` και `package-lock.json`, εκτελέστε ξανά `npm install` - Ελέγξτε για συγκρούσεις θυρών (προεπιλογή: Vite χρησιμοποιεί θύρα 5173) -**Ο server API δεν ξεκινά**: -- Βεβαιωθείτε ότι η έκδοση Node.js είναι >=10 -- Ελέγξτε αν η θύρα είναι ελεύθερη -- Εξασφαλίστε ότι έχουν εγκατασταθεί όλες οι εξαρτήσεις με `npm install` +**Ο διακομιστής API δεν ξεκινά**: +- Επαληθεύστε ότι η έκδοση Node.js είναι επαρκής (node >=10) +- Ελέγξτε αν η θύρα χρησιμοποιείται ήδη +- Βεβαιωθείτε ότι όλες οι εξαρτήσεις έχουν εγκατασταθεί με `npm install` -**Η επέκταση περιηγητή δεν φορτώνει**: -- Βεβαιωθείτε ότι το manifest.json είναι σωστά μορφοποιημένο -- Ελέγξτε για σφάλματα στην κονσόλα του περιηγητή -- Ακολουθήστε τις οδηγίες εγκατάστασης της επέκτασης που είναι ειδικές για τον περιηγητή +**Η επέκταση browser δεν φορτώνει**: +- Επαληθεύστε ότι το manifest.json είναι σωστά μορφοποιημένο +- Ελέγξτε την κονσόλα του browser για σφάλματα +- Ακολουθήστε οδηγίες εγκατάστασης επεκτάσεων ειδικές για τον browser -**Προβλήματα με το έργο συνομιλίας Python**: -- Βεβαιωθείτε ότι έχει εγκατασταθεί το πακέτο OpenAI: `pip install openai` -- Βεβαιωθείτε ότι η μεταβλητή περιβάλλοντος GITHUB_TOKEN υπάρχει +**Προβλήματα με το έργο Python chat**: +- Βεβαιωθείτε ότι το πακέτο OpenAI είναι εγκατεστημένο: `pip install openai` +- Επαληθεύστε ότι το περιβαλλοντικό μεταβλητό GITHUB_TOKEN έχει οριστεί - Ελέγξτε τα δικαιώματα πρόσβασης στα GitHub Models -**Τα Docsify δεν σερβίρουν τεκμηρίωση**: -- Εγκαταστήστε το docsify-cli παγκοσμίως: `npm install -g docsify-cli` -- Εκτελέστε από τη ρίζα του αποθετηρίου +**Η Docsify δεν εξυπηρετεί τεκμηρίωση**: +- Εγκαταστήστε docsify-cli παγκόσμια: `npm install -g docsify-cli` +- Εκτελέστε από τον ριζικό φάκελο του αποθετηρίου - Ελέγξτε ότι υπάρχει το αρχείο `docs/_sidebar.md` -### Συμβουλές Ανάπτυξης Περιβάλλοντος +### Συμβουλές για Περιβάλλον Ανάπτυξης -- Χρησιμοποιήστε VS Code με την επέκταση Live Server για έργα HTML -- Εγκαταστήστε τις επεκτάσεις ESLint και Prettier για συνεπή μορφοποίηση -- Χρησιμοποιήστε τα DevTools του περιηγητή για αποσφαλμάτωση JavaScript -- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools στον περιηγητή +- Χρησιμοποιήστε VS Code με επέκταση Live Server για HTML έργα +- Εγκαταστήστε ESLint και Prettier για συνεπή μορφοποίηση +- Χρησιμοποιήστε DevTools του browser για debugging JavaScript +- Για έργα Vue, εγκαταστήστε την επέκταση Vue DevTools στον browser -### Σκέψεις για την Απόδοση +### Θέματα Απόδοσης -- Μεγάλος αριθμός μεταφρασμένων αρχείων (50+ γλώσσες) σημαίνει μεγάλο μέγεθος κλώνου -- Χρησιμοποιήστε shallow clone αν εργάζεστε μόνο στο περιεχόμενο: `git clone --depth 1` -- Αποκλείστε τις μεταφράσεις από τις αναζητήσεις όταν δουλεύετε στα Αγγλικά -- Οι διαδικασίες δημιουργίας μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, Vite build) +- Ο μεγάλος αριθμός μεταφρασμένων αρχείων (πάνω από 50 γλώσσες) σημαίνει ότι οι πλήρεις κλωνοποιήσεις είναι μεγάλες +- Χρησιμοποιήστε shallow clone αν εργάζεστε μόνο με περιεχόμενο: `git clone --depth 1` +- Αποφύγετε τις μεταφράσεις στις αναζητήσεις όταν εργάζεστε με αγγλικό περιεχόμενο +- Οι διαδικασίες κατασκευής μπορεί να είναι αργές στην πρώτη εκτέλεση (npm install, κατασκευή Vite) -## Σκέψεις Ασφαλείας +## Θέματα Ασφαλείας -### Μεταβλητές Περιβάλλοντος +### Περιβαλλοντικές Μεταβλητές - Τα κλειδιά API δεν πρέπει ποτέ να δεσμεύονται στο αποθετήριο - Χρησιμοποιήστε αρχεία `.env` (ήδη στο `.gitignore`) -- Τεκμηριώστε τις απαιτούμενες μεταβλητές περιβάλλοντος στα README των έργων +- Τεκμηριώστε τις απαιτούμενες περιβαλλοντικές μεταβλητές στα README των έργων -### Έργα Python +### Python Έργα - Χρησιμοποιήστε εικονικά περιβάλλοντα: `python -m venv venv` -- Κρατάτε τις εξαρτήσεις ενημερωμένες -- Τα tokens GitHub πρέπει να έχουν τα ελάχιστα απαραίτητα δικαιώματα +- Διατηρήστε τις εξαρτήσεις ενημερωμένες +- Τα GitHub tokens πρέπει να έχουν ελάχιστα απαραίτητα δικαιώματα ### Πρόσβαση σε GitHub Models - Απαιτούνται Personal Access Tokens (PAT) για GitHub Models -- Τα tokens πρέπει να φυλάσσονται ως μεταβλητές περιβάλλοντος +- Τα tokens πρέπει να αποθηκεύονται ως περιβαλλοντικές μεταβλητές - Ποτέ μην δεσμεύετε tokens ή διαπιστευτήρια ## Επιπλέον Σημειώσεις -### Στοχευόμενο Κοινό +### Στόχος Κοινού -- Απόλυτοι αρχάριοι στην ανάπτυξη ιστού -- Φοιτητές και αυτοδίδακτοι -- Καθηγητές που χρησιμοποιούν το πρόγραμμα σπουδών στις τάξεις +- Πλήρεις αρχάριοι στην ανάπτυξη ιστού +- Μαθητές και αυτοδίδακτοι +- Εκπαιδευτικοί που χρησιμοποιούν το πρόγραμμα σπουδών σε τάξεις - Το περιεχόμενο έχει σχεδιαστεί για προσβασιμότητα και σταδιακή ανάπτυξη δεξιοτήτων ### Εκπαιδευτική Φιλοσοφία -- Προσέγγιση μάθησης βασισμένη σε έργα -- Συχνές επαναλήψεις γνώσης (κουίζ) -- Πρακτικές ασκήσεις κώδικα -- Παραδείγματα εφαρμογών πραγματικού κόσμου -- Εστίαση στις βασικές αρχές πριν τα frameworks +- Προσέγγιση μάθησης μέσω έργων +- Συχνές δοκιμές γνώσεων (κουίζ) +- Πρακτικές ασκήσεις κωδικοποίησης +- Παραδείγματα εφαρμογών σε πραγματικό κόσμο +- Εστίαση στα βασικά πριν τα frameworks ### Συντήρηση Αποθετηρίου -- Δραστήρια κοινότητα μαθητών και συνεργατών +- Ενεργή κοινότητα μαθητών και συνεργατών - Τακτικές ενημερώσεις εξαρτήσεων και περιεχομένου -- Παρακολούθηση θεμάτων και συζητήσεων από τους συντηρητές +- Παρακολούθηση θεμάτων και συζητήσεων από τους διαχειριστές - Αυτόματες ενημερώσεις μεταφράσεων μέσω GitHub Actions ### Σχετικοί Πόροι @@ -381,28 +381,28 @@ CO_OP_TRANSLATOR_METADATA: - [Microsoft Learn modules](https://docs.microsoft.com/learn/) - [Student Hub resources](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) συνιστάται για μαθητές -- Επιπλέον μαθήματα: Generative AI, Data Science, ML, IoT διαθέσιμα +- Επιπλέον μαθήματα: Generative AI, Data Science, ML, IoT curricula διαθέσιμα ### Εργασία με Συγκεκριμένα Έργα -Για λεπτομερείς οδηγίες για τα επιμέρους έργα, ανατρέξτε στα αρχεία README σε: -- `quiz-app/README.md` - Εφαρμογή κουίζ Vue 3 -- `7-bank-project/README.md` - Εφαρμογή τραπεζικού με αυθεντικοποίηση -- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης περιηγητή -- `6-space-game/README.md` - Παιχνίδι βασισμένο σε canvas +Για λεπτομερείς οδηγίες σε μεμονωμένα έργα, ανατρέξτε στα αρχεία README σε: +- `quiz-app/README.md` - Εφαρμογή quiz με Vue 3 +- `7-bank-project/README.md` - Τραπεζική εφαρμογή με αυθεντικοποίηση +- `5-browser-extension/README.md` - Ανάπτυξη επέκτασης browser +- `6-space-game/README.md` - Ανάπτυξη παιχνιδιού βασισμένου σε Canvas - `9-chat-project/README.md` - Έργο βοηθού συνομιλίας AI ### Δομή Monorepo -Παρόλο που δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα: -- Κάθε μάθημα είναι αυτόνομο +Αν και δεν είναι παραδοσιακό monorepo, αυτό το αποθετήριο περιέχει πολλαπλά ανεξάρτητα έργα: +- Κάθε μάθημα είναι ανεξάρτητο - Τα έργα δεν μοιράζονται εξαρτήσεις -- Εργαστείτε σε επιμέρους έργα χωρίς να επηρεάζετε άλλα -- Κλωνοποιήστε ολόκληρο το αποθετήριο για πλήρη εμπειρία προγράμματος σπουδών +- Εργαστείτε σε μεμονωμένα έργα χωρίς να επηρεάζετε τα άλλα +- Κλωνοποιήστε ολόκληρο το αποθετήριο για την πλήρη εμπειρία προγράμματος σπουδών --- -**Αποποίηση Ευθύνης**: -Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που προσπαθούμε για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η επίσημη πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπους. Δεν φέρουμε ευθύνη για οποιεσδήποτε παρανοήσεις ή λανθασμένες ερμηνείες προκύψουν από τη χρήση αυτής της μετάφρασης. +**Αποποίηση ευθυνών**: +Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. \ No newline at end of file diff --git a/translations/el/README.md b/translations/el/README.md index a396bff4d..602c8e4c3 100644 --- a/translations/el/README.md +++ b/translations/el/README.md @@ -10,70 +10,80 @@ [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -# Ανάπτυξη Ιστού για Αρχάριους - Ένα Πρόγραμμα Σπουδών +# Ανάπτυξη Ιστού για Αρχαρίους - Ένα Πρόγραμμα Σπουδών -Μάθετε τα βασικά της ανάπτυξης ιστού με το ολοκληρωμένο μας μάθημα 12 εβδομάδων από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσα από πρακτικά έργα όπως τεραρίουμ, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Ασχοληθείτε με κουίζ, συζητήσεις και πρακτικές εργασίες. Αναβαθμίστε τις δεξιότητές σας και βελτιστοποιήστε την απορρόφηση γνώσεων με την αποτελεσματική παιδαγωγική βασισμένη σε έργα. Ξεκινήστε το ταξίδι σας στον κώδικα σήμερα! +Μάθετε τα βασικά της ανάπτυξης ιστοσελίδων με το ολοκληρωμένο 12-εβδομαδιαίο μάθημά μας από τους Microsoft Cloud Advocates. Κάθε ένα από τα 24 μαθήματα εμβαθύνει σε JavaScript, CSS και HTML μέσω πρακτικών έργων όπως τεραριαμικά, επεκτάσεις προγράμματος περιήγησης και παιχνίδια στο διάστημα. Συμμετέχετε σε κουίζ, συζητήσεις και πρακτικές αναθέσεις. Βελτιώστε τις δεξιότητές σας και μεγιστοποιήστε τη διατήρηση γνώσεων με την αποτελεσματική παιδαγωγική μας που βασίζεται σε έργα. Ξεκινήστε το ταξίδι κωδικοποίησής σας σήμερα! -Εγγραφείτε στην Κοινότητα Discord Azure AI Foundry +Γίνετε μέλος της κοινότητας Azure AI Foundry στο Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Ακολουθήστε αυτά τα βήματα για να ξεκινήσετε να χρησιμοποιείτε αυτούς τους πόρους: -1. **Αντιγράψτε το Αποθετήριο**: Κάντε κλικ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +Ακολουθήστε αυτά τα βήματα για να ξεκινήσετε με αυτούς τους πόρους: +1. **Δημιουργήστε Fork το Αποθετήριο**: Κάντε κλικ [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) 2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -3. [**Εγγραφείτε στο Discord του Azure AI Foundry και γνωρίστε ειδικούς και άλλους προγραμματιστές**](https://discord.com/invite/ByRwuEEgH4) +3. [**Γίνετε μέλος του Azure AI Foundry Discord και γνωρίστε ειδικούς και άλλους προγραμματιστές**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Υποστήριξη Πολλών Γλωσσών +### 🌐 Υποστήριξη Πολλαπλών Γλωσσών -#### Υποστηρίζεται μέσω GitHub Action (Αυτόματη & Πάντα Ενημερωμένη) +#### Υποστηρίζεται μέσω GitHub Action (Αυτοματοποιημένα & Πάντα Ενημερωμένα) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](./README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Προτιμάτε να Κλωνοποιήσετε τοπικά;** - -> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς τις μεταφράσεις, χρησιμοποιήστε sparse checkout: +> **Προτιμάτε να κλωνοποιήσετε τοπικά;** +> +> Αυτό το αποθετήριο περιλαμβάνει πάνω από 50 μεταφράσεις γλωσσών, που αυξάνουν σημαντικά το μέγεθος λήψης. Για να κλωνοποιήσετε χωρίς μεταφράσεις, χρησιμοποιήστε τον αραιό έλεγχο: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> > Αυτό σας δίνει όλα όσα χρειάζεστε για να ολοκληρώσετε το μάθημα με πολύ πιο γρήγορη λήψη. -**Εάν επιθυμείτε να υποστηριχθούν επιπλέον γλώσσες μετάφρασης, αυτές είναι καταγεγραμμένες [εδώ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Εάν επιθυμείτε να υποστηρίζονται επιπλέον γλώσσες μετάφρασης, αναφέρονται [εδώ](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** -[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) +[![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Άνοιγμα%20στο%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _Είσαι φοιτητής/φοιτήτρια;_ +#### 🧑‍🎓 _Είστε φοιτητής;_ -Επισκεφθείτε τη [**σελίδα Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα φοιτητών και ακόμα τρόπους να λάβετε δωρεάν κουπόνι πιστοποίησης. Αυτή είναι η σελίδα που θέλετε να αποθηκεύσετε στα αγαπημένα σας και να ελέγχετε περιστασιακά καθώς ενημερώνουμε το περιεχόμενο κάθε μήνα. +Επισκεφθείτε τη [**Σελίδα για Φοιτητές**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) όπου θα βρείτε πόρους για αρχάριους, πακέτα για φοιτητές και ακόμα τρόπους να πάρετε δωρεάν κουπόνι πιστοποιητικού. Αυτή είναι η σελίδα που θέλετε να αποθηκεύσετε στα αγαπημένα σας και να ελέγχετε περιοδικά καθώς ανανεώνουμε το περιεχόμενο κάθε μήνα. -### 📣 Ανακοίνωση - Νέες προκλήσεις λειτουργίας GitHub Copilot Agent για ολοκλήρωση! +### 📣 Ανακοίνωση - Νέες προκλήσεις λειτουργίας GitHub Copilot Agent για να ολοκληρώσετε! -Προστέθηκε νέα πρόκληση, αναζητήστε το "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Αυτή είναι μια νέα πρόκληση για να ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και το Agent mode. Αν δεν έχετε χρησιμοποιήσει το Agent mode πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα. +Νέα πρόκληση προστέθηκε, ψάξτε για "GitHub Copilot Agent Challenge 🚀" στα περισσότερα κεφάλαια. Αυτή είναι μια νέα πρόκληση για να ολοκληρώσετε χρησιμοποιώντας το GitHub Copilot και τη λειτουργία Agent. Αν δεν έχετε χρησιμοποιήσει τη λειτουργία Agent πριν, μπορεί όχι μόνο να δημιουργεί κείμενο αλλά και να δημιουργεί και να επεξεργάζεται αρχεία, να εκτελεί εντολές και άλλα. -### 📣 Ανακοίνωση - _Νέο έργο για κατασκευή με χρήση Γενετικής Τεχνητής Νοημοσύνης_ +### 📣 Ανακοίνωση - _Νέο Έργο για κατασκευή με τη χρήση Generative AI_ -Πρόσθετο νέο έργο Βοηθού AI, δείτε το [έργο](./9-chat-project/README.md) +Πρόσφατα προστέθηκε ένα νέο έργο βοηθού AI, δείτε το [έργο](./9-chat-project/README.md) -### 📣 Ανακοίνωση - _Νέο Πρόγραμμα Σπουδών_ για Γενετική Τεχνητή Νοημοσύνη σε JavaScript μόλις κυκλοφόρησε +### 📣 Ανακοίνωση - _Νέο πρόγραμμα σπουδών_ για Generative AI για JavaScript μόλις κυκλοφόρησε -Μην χάσετε το νέο μας πρόγραμμα σπουδών για Γενετική Τεχνητή Νοημοσύνη! +Μην χάσετε το νέο μας πρόγραμμα σπουδών για Generative AI! Επισκεφθείτε [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) για να ξεκινήσετε! ![Background](../../translated_images/el/background.148a8d43afde5730.webp) -- Μαθήματα που καλύπτουν από τα βασικά ως το RAG. -- Αλληλεπιδράστε με ιστορικούς χαρακτήρες μέσω GenAI και της εφαρμογής συνοδού μας. -- Διασκεδαστική και καλογραμμένη αφήγηση, θα ταξιδεύετε στο χρόνο! +- Μαθήματα που καλύπτουν από τα βασικά μέχρι το RAG. +- Αλληλεπιδράστε με ιστορικούς χαρακτήρες χρησιμοποιώντας GenAI και την companion εφαρμογή μας. +- Διασκεδαστική και συναρπαστική αφήγηση, θα ταξιδεύετε στο χρόνο! ![character](../../translated_images/el/character.5c0dd8e067ffd693.webp) -Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσης και μια πρόκληση για να σας καθοδηγήσει στη μάθηση θεμάτων όπως: -- Εντολές και μηχανική εντολών +Κάθε μάθημα περιλαμβάνει ανάθεση για ολοκλήρωση, έλεγχο γνώσεων και πρόκληση που σας καθοδηγούν στην εκμάθηση θεμάτων όπως: +- Πώς να δημιουργείτε prompts και μηχανική prompts - Δημιουργία εφαρμογών κειμένου και εικόνας - Εφαρμογές αναζήτησης @@ -83,130 +93,129 @@ ## 🌱 Ξεκινώντας -> **Καθηγητές**, έχουμε [περιλάβει μερικές προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα εκτιμούσαμε το feedback σας [στο φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Καθηγητές**, έχουμε [συμπεριλάβει ορισμένες προτάσεις](for-teachers.md) για το πώς να χρησιμοποιήσετε αυτό το πρόγραμμα σπουδών. Θα θέλαμε πολύ τα σχόλιά σας [στο φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα προ-λεκτικό κουίζ και συνεχίστε διαβάζοντας το υλικό του μαθήματος, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγχοντας την κατανόησή σας με το μετα-λεκτικό κουίζ. +**[Μαθητές](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, για κάθε μάθημα, ξεκινήστε με ένα προ-μάθημα κουίζ και συνεχίστε διαβάζοντας το υλικό του μαθήματος, ολοκληρώνοντας τις διάφορες δραστηριότητες και ελέγξτε την κατανόησή σας με το μετα-μάθημα κουίζ. -Για να βελτιώσετε την εκπαιδευτική σας εμπειρία, συνδεθείτε με τους συναδέλφους σας για να δουλέψετε μαζί στα έργα! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των μεσαζόντων μας θα είναι διαθέσιμη για να απαντήσει στις ερωτήσεις σας. +Για να βελτιώσετε την εμπειρία μάθησής σας, συνδεθείτε με τους συμφοιτητές σας για να δουλέψετε στα έργα μαζί! Οι συζητήσεις ενθαρρύνονται στο [φόρουμ συζητήσεών μας](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) όπου η ομάδα των συντονιστών μας θα είναι διαθέσιμη να απαντήσει στις ερωτήσεις σας. Για περαιτέρω εκπαίδευση, συνιστούμε ανεπιφύλακτα να εξερευνήσετε το [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) για επιπλέον υλικό μελέτης. ### 📋 Ρύθμιση του περιβάλλοντός σας -Αυτό το πρόγραμμα σπουδών έχει ένα περιβάλλον ανάπτυξης έτοιμο για χρήση! Καθώς ξεκινάτε, μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε [Codespace](https://github.com/features/codespaces/) (_ένα περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς ανάγκη εγκαταστάσεων_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Αυτό το πρόγραμμα σπουδών έχει έτοιμο περιβάλλον ανάπτυξης! Όταν ξεκινάτε, μπορείτε να επιλέξετε να τρέξετε το πρόγραμμα σε ένα [Codespace](https://github.com/features/codespaces/) (_περιβάλλον βασισμένο σε πρόγραμμα περιήγησης, χωρίς ανάγκη εγκατάστασης_), ή τοπικά στον υπολογιστή σας χρησιμοποιώντας έναν επεξεργαστή κειμένου όπως το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). #### Δημιουργήστε το αποθετήριό σας -Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε πατώντας το κουμπί **Use this template** στο πάνω μέρος της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στο λογαριασμό σας στο GitHub με ένα αντίγραφο του προγράμματος σπουδών. +Για να αποθηκεύετε εύκολα τη δουλειά σας, συνιστάται να δημιουργήσετε το δικό σας αντίγραφο αυτού του αποθετηρίου. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Use this template** στην κορυφή της σελίδας. Αυτό θα δημιουργήσει ένα νέο αποθετήριο στον λογαριασμό σας στο GitHub με ένα αντίγραφο του προγράμματος σπουδών. Ακολουθήστε αυτά τα βήματα: -1. **Αντιγράψτε το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην πάνω δεξιά γωνία αυτής της σελίδας. +1. **Δημιουργήστε Fork το Αποθετήριο**: Κάντε κλικ στο κουμπί "Fork" στην επάνω δεξιά γωνία αυτής της σελίδας. 2. **Κλωνοποιήστε το Αποθετήριο**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### Εκτέλεση του προγράμματος σε Codespace +#### Τρέξιμο του προγράμματος σε Codespace -Στο αντίγραφο αυτού του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace για να δουλέψετε. +Στο αντίγραφο που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει έναν νέο Codespace για να εργαστείτε. ![Codespace](../../translated_images/el/createcodespace.0238bbf4d7a8d955.webp) -#### Εκτέλεση του προγράμματος τοπικά στον υπολογιστή σας - -Για να τρέξετε αυτό το πρόγραμμα τοπικά, θα χρειαστείτε έναν επεξεργαστή κειμένου, ένα πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μάθημά μας, [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία του Χειριστή](../../1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία για να επιλέξετε εκείνο που σας ταιριάζει καλύτερα. - -Η σύστασή μας είναι να χρησιμοποιήσετε [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ως επεξεργαστή, που επίσης διαθέτει ενσωματωμένο [Τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Μπορείτε να κατεβάσετε το Visual Studio Code [εδώ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +#### Τρέξιμο του προγράμματος τοπικά στον υπολογιστή σας +Για να τρέξετε αυτό το πρόγραμμα τοπικά στον υπολογιστή σας θα χρειαστείτε έναν επεξεργαστή κειμένου, έναν πρόγραμμα περιήγησης και ένα εργαλείο γραμμής εντολών. Το πρώτο μας μάθημα, [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία](../../1-getting-started-lessons/1-intro-to-programming-languages), θα σας καθοδηγήσει ανάμεσα στις διάφορες επιλογές για κάθε ένα από αυτά τα εργαλεία, για να επιλέξετε ποια δουλεύει καλύτερα για εσάς. -1. Κλωνοποιήστε το αποθετήριό σας στον υπολογιστή σας. Μπορείτε να το κάνετε πατώντας το κουμπί **Code** και αντιγράφοντας το URL: +Η σύστασή μας είναι να χρησιμοποιήσετε το [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ως επεξεργαστή σας, που έχει επίσης ενσωματωμένο [τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Μπορείτε να κατεβάσετε το Visual Studio Code [εδώ](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Κλωνοποιήστε το αποθετήριο στον υπολογιστή σας. Μπορείτε να το κάνετε κάνοντας κλικ στο κουμπί **Code** και αντιγράφοντας τη διεύθυνση URL: [CodeSpace](./images/createcodespace.png) - Στη συνέχεια, ανοίξτε το [Τερματικό](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα στο [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την ακόλουθη εντολή, αντικαθιστώντας το `` με το URL που μόλις αντιγράψατε: + + Στη συνέχεια, ανοίξτε το [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) μέσα στο [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) και εκτελέστε την ακόλουθη εντολή, αντικαθιστώντας το `` με τη διεύθυνση URL που μόλις αντιγράψατε: ```bash git clone ``` -2. Ανοίξτε τον φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο **File** > **Open Folder** και επιλέγοντας τον φάκελο που μόλις κλωνοποιήσατε. +2. Ανοίξτε το φάκελο στο Visual Studio Code. Μπορείτε να το κάνετε κάνοντας κλικ στο **File** > **Open Folder** και επιλέγοντας το φάκελο που μόλις κλωνοποιήσατε. -> Συνιστώμενες επεκτάσεις για το Visual Studio Code: +> Προτεινόμενες επεκτάσεις Visual Studio Code: > > * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - για προεπισκόπηση σελίδων HTML μέσα στο Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - για να σας βοηθήσει να γράφετε κώδικα πιο γρήγορα ## 📂 Κάθε μάθημα περιλαμβάνει: -- προαιρετική σχεδίαση ιδεών (sketchnote) +- προαιρετικό σκιτσάκι - προαιρετικό συμπληρωματικό βίντεο -- προθέρμανση quiz πριν το μάθημα +- προ-μαθησιακό quiz για προθέρμανση - γραπτό μάθημα -- για μαθήματα βασισμένα σε project, οδηγίες βήμα προς βήμα για το πώς να χτίσετε το έργο +- για μαθήματα βασισμένα σε έργα, οδηγούς βήμα προς βήμα για την κατασκευή του έργου - ελέγχους γνώσης - μια πρόκληση - συμπληρωματική ανάγνωση -- εργασίες -- [τεστ μετά το μάθημα](https://ff-quizzes.netlify.app/web/) +- ανάθεση +- [μετα-μαθησιακό quiz](https://ff-quizzes.netlify.app/web/) -> **Μια σημείωση για τα κουίζ**: Όλα τα κουίζ βρίσκονται στον φάκελο Quiz-app, συνολικά 48 κουίζ με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/) και η εφαρμογή κουίζ μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`. +> **Σημείωση σχετικά με τα quiz**: Όλα τα quiz περιέχονται στο φάκελο Quiz-app, συνολικά 48 quiz με τρεις ερωτήσεις το καθένα. Είναι διαθέσιμα [εδώ](https://ff-quizzes.netlify.app/web/), η εφαρμογή quiz μπορεί να τρέξει τοπικά ή να αναπτυχθεί στο Azure· ακολουθήστε τις οδηγίες στον φάκελο `quiz-app`. ## 🗃️ Μαθήματα -| | Όνομα Έργου | Διδασκόμενες Έννοιες | Στόχοι Μάθησης | Σχετικό Μάθημα | Συγγραφέας | +| | Όνομα Έργου | Διδασκόμενες Έννοιες | Μαθησιακοί Στόχοι | Συνδεδεμένο Μάθημα | Συγγραφέας | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία του Επαγγέλματος | Μάθετε τις βασικές αρχές πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει τη συνεργασία με ομάδα | Πώς να χρησιμοποιήσετε το GitHub στο έργο σας, πώς να συνεργάζεστε με άλλους σε μια βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας στον ιστό | [Βασικά της Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | Βασικά JS | Τύποι Δεδομένων JavaScript | Τα βασικά των τύπων δεδομένων JavaScript | [Τύποι Δεδομένων](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για τις συναρτήσεις και τις μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους στην JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην πράξη | Δημιουργήστε το HTML για να φτιάξετε ένα online terrarium, εστιάζοντας στη δημιουργία διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην πράξη | Δημιουργήστε το CSS για το στυλιζάρισμα του online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένου και του responsive design | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε τον JavaScript κώδικα για να κάνει το terrarium λειτουργικό ως interface με σύρσιμο και απόθεση, εστιάζοντας σε κλεισίματα και χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Παιχνίδι Πληκτρολόγησης](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε τα γεγονότα πληκτρολογίου για να οδηγήσετε τη λογική της εφαρμογής JavaScript | [Προγραμματισμός με Γεγονότα](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να στήσετε τα πρώτα στοιχεία μιας επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθετήριο | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες στο τοπικό αποθετήριο | [APIs, Φόρμες και Τοπικό Αποθετήριο](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Διαδικασίες υπόβαθρου στον περιηγητή, απόδοση στον ιστό | Χρησιμοποιήστε τις διαδικασίες υπόβαθρου για τη διαχείριση του εικονιδίου της επέκτασης· μάθετε για την απόδοση του ιστού και κάποιες βελτιστοποιήσεις για βελτίωση | [Εργασίες Υπόβαθρου και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας τόσο Κλάσεις όσο και Σύνθεση και το μοτίβο Pub/Sub, σε προετοιμασία για την κατασκευή ενός παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Σχεδίαση σε καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται για ζωγραφική στοιχείων στην οθόνη | [Σχεδίαση σε Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Κίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν να κινηθούν χρησιμοποιώντας καρτεσιανές συντεταγμένες και το Canvas API | [Κίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας πατήματα πλήκτρων και διαθέτοντας λειτουργία ανάρρωσης για ομαλή απόδοση στο παιχνίδι | [Ανίχνευση Σύγκρουσης](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Διατήρηση σκορ | Εκτελέστε μαθηματικούς υπολογισμούς βάσει της κατάστασης και απόδοσης του παιχνιδιού | [Διατήρηση Σκορ](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς μεταβλητών | [Η Συνθήκη Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Web Εφαρμογή | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας routing και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Σύνδεσης και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση των διαδικασιών επικύρωσης | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Μέθοδοι Ανάκτησης και Χρήσης Δεδομένων | Πώς ρέουν τα δεδομένα μέσα και έξω από την εφαρμογή σας, πώς να τα ανακτάτε, να τα αποθηκεύετε και να τα απορρίπτετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή διατηρεί την κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Κώδικας Περιηγητή/VSCode](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση επεξεργαστή κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [Βοηθοί Τεχνητής Νοημοσύνης](./9-chat-project/README.md) | Εργασία με AI | Μάθετε πώς να δημιουργήσετε τον δικό σας βοηθό τεχνητής νοημοσύνης | [Έργο Βοηθού AI](./9-chat-project/README.md) | Chris | +| 01 | Ξεκινώντας | Εισαγωγή στον Προγραμματισμό και τα Εργαλεία της Εργασίας | Μάθετε τις βασικές αρχές πίσω από τις περισσότερες γλώσσες προγραμματισμού και για το λογισμικό που βοηθά τους επαγγελματίες προγραμματιστές να κάνουν τη δουλειά τους | [Εισαγωγή στις Γλώσσες Προγραμματισμού και Εργαλεία](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Ξεκινώντας | Βασικά του GitHub, περιλαμβάνει συνεργασία με ομάδα | Πώς να χρησιμοποιείτε το GitHub στο έργο σας, πώς να συνεργάζεστε με άλλους σε βάση κώδικα | [Εισαγωγή στο GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Ξεκινώντας | Προσβασιμότητα | Μάθετε τα βασικά της προσβασιμότητας ιστού | [Βασικά της Προσβασιμότητας](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Βασικά JS | Τύποι Δεδομένων JavaScript | Τα βασικά των τύπων δεδομένων JavaScript | [Τύποι Δεδομένων](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Βασικά JS | Συναρτήσεις και Μέθοδοι | Μάθετε για τις συναρτήσεις και μεθόδους για τη διαχείριση της ροής λογικής μιας εφαρμογής | [Συναρτήσεις και Μέθοδοι](./2-js-basics/2-functions-methods/README.md) | Jasmine και Christopher | +| 06 | Βασικά JS | Λήψη Αποφάσεων με JS | Μάθετε πώς να δημιουργείτε συνθήκες στον κώδικά σας χρησιμοποιώντας μεθόδους λήψης αποφάσεων | [Λήψη Αποφάσεων](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Βασικά JS | Πίνακες και Βρόχοι | Εργαστείτε με δεδομένα χρησιμοποιώντας πίνακες και βρόχους σε JavaScript | [Πίνακες και Βρόχοι](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML στην Πράξη | Δημιουργήστε το HTML για ένα διαδικτυακό terrarium, εστιάζοντας στην κατασκευή μιας διάταξης | [Εισαγωγή στο HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS στην Πράξη | Δημιουργήστε το CSS για το στυλ του διαδικτυακού terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της ανταπόκρισης της σελίδας | [Εισαγωγή στο CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | Κλεισίματα JavaScript, χειρισμός DOM | Δημιουργήστε τον JavaScript κώδικα για τη λειτουργία του terrarium ως διεπαφή drag/drop, εστιάζοντας στα κλεισίματα και χειρισμό DOM | [Κλεισίματα JavaScript, χειρισμός DOM](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Παιχνίδι Πληκτρολόγησης](./4-typing-game/solution/README.md) | Δημιουργία Παιχνιδιού Πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε τα γεγονότα πληκτρολογίου για να κατευθύνετε τη λογική της εφαρμογής JavaScript | [Προγραμματισμός με βάση τα γεγονότα](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Εργασία με Περιηγητές | Μάθετε πώς λειτουργούν οι περιηγητές, την ιστορία τους και πώς να στήσετε τα πρώτα στοιχεία επέκτασης περιηγητή | [Σχετικά με τους Περιηγητές](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στο τοπικό αποθηκευτικό χώρο | Δημιουργήστε τα στοιχεία JavaScript της επέκτασης περιηγητή σας για να καλέσετε ένα API χρησιμοποιώντας μεταβλητές αποθηκευμένες τοπικά | [APIs, Φόρμες και Τοπική Αποθήκευση](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Πράσινη Επέκταση Περιηγητή](./5-browser-extension/solution/README.md) | Φόντινες διεργασίες στον περιηγητή, απόδοση ιστοσελίδας | Χρησιμοποιήστε τις φόντινες διεργασίες του περιηγητή για να διαχειριστείτε το εικονίδιο της επέκτασης· μάθετε για την απόδοση του ιστού και ορισμένες βελτιστοποιήσεις | [Φόντινες εργασίες και Απόδοση](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Προχωρημένη Ανάπτυξη Παιχνιδιών με JavaScript | Μάθετε για την Κληρονομικότητα χρησιμοποιώντας και Κλάσεις και Σύνθεση και το πρότυπο Pub/Sub, ως προετοιμασία για τη δημιουργία παιχνιδιού | [Εισαγωγή στην Προχωρημένη Ανάπτυξη Παιχνιδιών](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Σχεδίαση στον καμβά | Μάθετε για το Canvas API, που χρησιμοποιείται για να ζωγραφίζετε στοιχεία σε οθόνη | [Σχεδίαση στον Καμβά](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πώς τα στοιχεία μπορούν να αποκτούν κίνηση χρησιμοποιώντας τα καρτεσιανά συντεταγμένα και το Canvas API | [Μετακίνηση Στοιχείων](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Ανίχνευση συγκρούσεων | Κάντε τα στοιχεία να συγκρούονται και να αντιδρούν το ένα στο άλλο χρησιμοποιώντας πατήματα και παρέχετε λειτουργία ψύξης για τη βελτίωση της απόδοσης του παιχνιδιού | [Ανίχνευση Συγκρούσεων](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Διατήρηση σκορ | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και απόδοση του παιχνιδιού | [Διατήρηση Σκορ](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Παιχνίδι Διαστήματος](./6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση παιχνιδιού | Μάθετε για τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού πόρων και της επαναφοράς τιμών μεταβλητών | [Η Συνθήκη Τερματισμού](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Πρότυπα HTML και Διαδρομές σε μια Ιστοσελίδα | Μάθετε πώς να δημιουργήσετε τη δομή μιας πολυσέλιδης ιστοσελίδας χρησιμοποιώντας δρομολόγηση και πρότυπα HTML | [Πρότυπα HTML και Διαδρομές](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Δημιουργία Φόρμας Εισόδου και Εγγραφής | Μάθετε για τη δημιουργία φορμών και τη διαχείριση ρουτινών ελέγχου | [Φόρμες](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Μέθοδοι Λήψης και Χρήσης Δεδομένων | Πώς τα δεδομένα ρέουν μέσα κι έξω από την εφαρμογή σας, πώς να τα λαμβάνετε, να τα αποθηκεύετε και να τα απορρίπτετε | [Δεδομένα](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Εφαρμογή Τραπεζικής](./7-bank-project/solution/README.md) | Έννοιες Διαχείρισης Κατάστασης | Μάθετε πώς η εφαρμογή σας διατηρεί κατάσταση και πώς να τη διαχειρίζεστε προγραμματιστικά | [Διαχείριση Κατάστασης](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Κώδικας Browser/VScode](../../8-code-editor) | Εργασία με το VScode | Μάθετε πώς να χρησιμοποιείτε έναν επεξεργαστή κώδικα | [Χρήση του επεξεργαστή κώδικα VScode](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [Βοηθοί Τεχνητής Νοημοσύνης](./9-chat-project/README.md) | Εργασία με ΤΝ | Μάθετε πώς να φτιάξετε τον δικό σας βοηθό ΤΝ | [Έργο βοηθού ΤΝ](./9-chat-project/README.md) | Chris | ## 🏫 Παιδαγωγική Το πρόγραμμα σπουδών μας έχει σχεδιαστεί με δύο βασικές παιδαγωγικές αρχές στο μυαλό: * μάθηση βασισμένη σε έργα -* συχνά κουίζ +* συχνά quiz -Το πρόγραμμα διδάσκει τα βασικά της JavaScript, HTML και CSS, καθώς και τα πιο σύγχρονα εργαλεία και τεχνικές που χρησιμοποιούν οι σύγχρονοι προγραμματιστές ιστού. Οι μαθητές θα έχουν την ευκαιρία να αναπτύξουν πρακτική εμπειρία δημιουργώντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια οικολογική επέκταση περιηγητή, ένα παιχνίδι τύπου εισβολέα στο διάστημα και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει μια στέρεη κατανόηση της ανάπτυξης στον ιστό. +Το πρόγραμμα διδάσκει τα βασικά του JavaScript, HTML και CSS, καθώς και τα πιο πρόσφατα εργαλεία και τεχνικές που χρησιμοποιούν οι σημερινοί προγραμματιστές ιστού. Οι σπουδαστές θα έχουν την ευκαιρία να αποκτήσουν πρακτική εμπειρία χτίζοντας ένα παιχνίδι πληκτρολόγησης, ένα εικονικό terrarium, μια φιλική προς το περιβάλλον επέκταση περιηγητή, ένα παιχνίδι τύπου space-invader και μια τραπεζική εφαρμογή για επιχειρήσεις. Μέχρι το τέλος της σειράς, οι μαθητές θα έχουν αποκτήσει σταθερή κατανόηση της ανάπτυξης ιστού. -> 🎓 Μπορείτε να παρακολουθήσετε τα πρώτα μαθήματα αυτού του προγράμματος ως [Μονοπάτι Μάθησης](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn! +> 🎓 Μπορείτε να παρακολουθήσετε τα πρώτα λίγα μαθήματα αυτού του προγράμματος σπουδών ως [Μονοπάτι Μάθησης](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) στο Microsoft Learn! -Διασφαλίζοντας ότι το περιεχόμενο εναρμονίζεται με τα έργα, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Επίσης, γράψαμε αρκετά εισαγωγικά μαθήματα στα βασικά της JavaScript για την εισαγωγή εννοιών, συνοδευόμενα από ένα βίντεο από τη συλλογή βίντεο "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)", αρκετοί από τους συγγραφείς του οποίου συνέβαλαν σε αυτό το πρόγραμμα σπουδών. +Διασφαλίζοντας ότι το περιεχόμενο ευθυγραμμίζεται με τα έργα, η διαδικασία γίνεται πιο ελκυστική για τους μαθητές και η διατήρηση των εννοιών ενισχύεται. Επίσης γράψαμε αρκετά αρχικά μαθήματα στα βασικά της JavaScript για να παρουσιάσουμε έννοιες, σε συνδυασμό με βίντεο από τη συλλογή "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" με βιντεομαθήματα, με μερικούς από τους συγγραφείς τους να έχουν συμβάλει σε αυτό το πρόγραμμα σπουδών. -Επιπλέον, ένα χαμηλού ρίσκου κουίζ πριν το μάθημα θέτει την πρόθεση του μαθητή προς την εκμάθηση ενός θέματος, ενώ ένα δεύτερο κουίζ μετά το μάθημα εξασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών σχεδιάστηκε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί ολόκληρο ή κατά τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα προς το τέλος του κύκλου των 12 εβδομάδων. +Επιπλέον, ένα ανεπίσημο quiz πριν από το μάθημα θέτει τον σκοπό του μαθητή προς την εκμάθηση μιας θεματικής ενότητας, ενώ ένα δεύτερο quiz μετά το μάθημα διασφαλίζει περαιτέρω διατήρηση. Αυτό το πρόγραμμα σπουδών έχει σχεδιαστεί ώστε να είναι ευέλικτο και διασκεδαστικό και μπορεί να παρακολουθηθεί στο σύνολό του ή μεμονωμένα τμήματα. Τα έργα ξεκινούν μικρά και γίνονται όλο και πιο σύνθετα μέχρι το τέλος του δωδεκαβδομαδιαίου κύκλου. -Παρόλο που αποφεύγουμε εσκεμμένα την εισαγωγή πλαισίων εργασίας JavaScript για να εστιάσουμε στις βασικές δεξιότητες που χρειάζεται ένας προγραμματιστής ιστού πριν από την υιοθέτηση πλαισίου, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Ενώ έχουμε σκοπίμως αποφύγει την εισαγωγή πλαισίων JavaScript για να επικεντρωθούμε στις βασικές δεξιότητες που χρειάζεται ένας προγραμματιστής ιστού πριν την υιοθέτηση πλαισίου, ένα καλό επόμενο βήμα για την ολοκλήρωση αυτού του προγράμματος σπουδών θα ήταν η εκμάθηση του Node.js μέσω μιας άλλης συλλογής βίντεο: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -> Επισκεφτείτε τις οδηγίες μας [Κώδικας Συμπεριφοράς](CODE_OF_CONDUCT.md) και [Συνεισφοράς](CONTRIBUTING.md). Καλωσορίζουμε τα εποικοδομητικά σας σχόλια! +> Επισκεφτείτε τους [Κανόνες Συμπεριφοράς](CODE_OF_CONDUCT.md) και τις οδηγίες [Συμμετοχής](CONTRIBUTING.md). Καλωσορίζουμε τις εποικοδομητικές σας παρατηρήσεις! ## 🧭 Πρόσβαση εκτός σύνδεσης -Μπορείτε να εκτελέσετε αυτή την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κάντε fork αυτό το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στη τοπική σας μηχανή και μετά στο ριζικό φάκελο αυτού του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην πόρτα 3000 στον τοπικό σας υπολογιστή: `localhost:3000`. +Μπορείτε να τρέξετε αυτή την τεκμηρίωση εκτός σύνδεσης χρησιμοποιώντας το [Docsify](https://docsify.js.org/#/). Κλωνοποιήστε το αποθετήριο, [εγκαταστήστε το Docsify](https://docsify.js.org/#/quickstart) στον τοπικό σας υπολογιστή και μετά στον ριζικό φάκελο του αποθετηρίου, πληκτρολογήστε `docsify serve`. Ο ιστότοπος θα σερβιριστεί στην θύρα 3000 στο τοπικό σας μηχάνημα: `localhost:3000`. ## 📘 PDF - -Ένα PDF με όλα τα μαθήματα μπορείτε να βρείτε [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). +Ένα PDF με όλα τα μαθήματα μπορεί να βρεθεί [εδώ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Άλλα Μαθήματα + Η ομάδα μας παράγει και άλλα μαθήματα! Δείτε: @@ -224,7 +233,7 @@ --- -### Σειρά για Δημιουργική Τεχνητή Νοημοσύνη +### Σειρά για Τη Γενετική Τεχνητή Νοημοσύνη [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -232,7 +241,7 @@ --- -### Κεντρική Μάθηση +### Βασική Μάθηση [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -251,11 +260,11 @@ ## Λήψη Βοήθειας -Αν κολλήσετε ή έχετε ερωτήσεις σχετικά με τη δημιουργία εφαρμογών AI, συμμετάσχετε με άλλους μαθητές και έμπειρους προγραμματιστές σε συζητήσεις σχετικά με το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα. +Αν κολλήσετε ή έχετε απορίες σχετικά με την ανάπτυξη εφαρμογών ΤΝ, συμμετάσχετε σε συζητήσεις με άλλους μαθητές και έμπειρους προγραμματιστές για το MCP. Είναι μια υποστηρικτική κοινότητα όπου οι ερωτήσεις είναι ευπρόσδεκτες και η γνώση μοιράζεται ελεύθερα. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Αν έχετε ανατροφοδότηση για το προϊόν ή λάθη κατά την ανάπτυξη, επισκεφθείτε: +Εάν έχετε ανατροφοδότηση προϊόντος ή λάθη κατά την ανάπτυξη, επισκεφτείτε: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) @@ -266,6 +275,6 @@ --- -**Απόρρητο**: -Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας υπηρεσία μετάφρασης με τεχνητή νοημοσύνη [Co-op Translator](https://github.com/Azure/co-op-translator). Παρόλο που επιδιώκουμε την ακρίβεια, παρακαλείστε να γνωρίζετε ότι οι αυτοματοποιημένες μεταφράσεις μπορεί να περιέχουν σφάλματα ή ανακρίβειες. Το πρωτότυπο έγγραφο στη γλώσσα του θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική μετάφραση από ανθρώπινο μεταφραστή. Δεν φέρουμε ευθύνη για τυχόν παρερμηνείες ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. +**Αποποίηση ευθυνών**: +Το παρόν έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία αυτόματης μετάφρασης AI [Co-op Translator](https://github.com/Azure/co-op-translator). Παρότι προσπαθούμε για ακρίβεια, παρακαλούμε να σημειώσετε ότι οι αυτόματες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το αρχικό έγγραφο στη μητρική του γλώσσα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή λανθασμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης. \ No newline at end of file diff --git a/translations/sv/.co-op-translator.json b/translations/sv/.co-op-translator.json index 6aedfe20f..1e0860828 100644 --- a/translations/sv/.co-op-translator.json +++ b/translations/sv/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T23:15:38+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:17:15+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "sv" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:23:53+00:00", + "translation_date": "2026-03-06T12:20:45+00:00", "source_file": "AGENTS.md", "language_code": "sv" }, @@ -516,8 +516,8 @@ "language_code": "sv" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:18:18+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:13:32+00:00", "source_file": "README.md", "language_code": "sv" }, diff --git a/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md index 4987a183a..28a3ac5d0 100644 --- a/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/sv/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,27 +1,27 @@ # Introduktion till programmeringsspråk och moderna utvecklarverktyg - -Hej där, framtida utvecklare! 👋 Får jag berätta något som fortfarande ger mig rysningar varje dag? Du är på väg att upptäcka att programmering inte bara handlar om datorer – det handlar om att ha riktiga superkrafter för att förverkliga dina vildaste idéer! -Du vet det ögonblick när du använder din favoritapp och allt bara klickar perfekt? När du trycker på en knapp och något helt magiskt händer som får dig att säga "wow, hur gjorde de DET?" Någon precis som du – säkert sittande på sitt favoritkaffe på morgonen klockan 2 med sin tredje espresso – skrev koden som skapade den magin. Och här kommer något som kommer att spränga ditt sinne: i slutet av den här lektionen kommer du inte bara att förstå hur de gjorde det, utan du kommer att vara ivrig att prova själv! +Hej där, blivande utvecklare! 👋 Kan jag berätta något som fortfarande ger mig rysningar varje dag? Du är på väg att upptäcka att programmering inte bara handlar om datorer – det handlar om att ha verkliga superkrafter för att förverkliga dina vildaste idéer! -Vi tar det från början: jag förstår helt om programmering känns skrämmande just nu. När jag började trodde jag ärligt talat att man behövde vara något slags mattegeni eller ha kodat sedan man var fem år gammal. Men det här är vad som helt förändrade mitt perspektiv: programmering är precis som att lära sig att prata på ett nytt språk. Du börjar med "hej" och "tack", sen beställer du en kaffe och plötsligt har du djupa filosofiska diskussioner! Fast i det här fallet pratar du med datorer, och ärligt? De är de mest tålmodiga samtalspartner du någonsin kommer att ha – de dömer aldrig dina misstag och de är alltid taggade att försöka igen! +Du vet det ögonblick när du använder din favoritapp och allt klickar perfekt? När du trycker på en knapp och något helt magiskt händer som får dig att tänka "wow, hur GJORDE de det?" Någon precis som du – förmodligen sittande på sitt favoritkafé klockan 2 på morgonen med sin tredje espresso – skrev koden som skapade den magin. Och här är något som kommer att blåsa dig av stolen: i slutet av denna lektion kommer du inte bara förstå hur de gjorde det, utan du kommer att vara ivrig att prova själv! -Idag ska vi utforska de otroliga verktyg som gör modern webbprogrammering inte bara möjlig, utan riktigt beroendeframkallande. Jag menar precis samma redigerare, webbläsare och arbetsflöden som utvecklare på Netflix, Spotify och din favorit indieapp-studio använder varje dag. Och här kommer det som får dig att vilja dansa glädjedans: de flesta av dessa professionella, branschstandardverktyg är helt gratis! +Lyssna, jag förstår helt om programmering känns skrämmande just nu. När jag började trodde jag faktiskt att man var tvungen att vara något slags mattegeni eller ha kodat sedan man var fem år gammal. Men här är vad som helt förändrade mitt perspektiv: programmering är precis som att lära sig att föra samtal på ett nytt språk. Du börjar med "hej" och "tack," sedan går du vidare till att beställa kaffe, och innan du vet ordet av håller du djupa filosofiska diskussioner! Fast i det här fallet pratar du med datorer, och ärligt talat? De är de tålamodigaste samtalspartnerna du någonsin kommer att hitta – de dömer aldrig dina misstag och är alltid lika glada att försöka igen! + +Idag ska vi utforska de otroliga verktyg som gör modern webbutveckling inte bara möjlig, utan seriöst beroendeframkallande. Jag pratar om exakt samma redigerare, webbläsare och arbetsflöden som utvecklare på Netflix, Spotify och din favorit indie-appstudio använder varje dag. Och här är delen som kommer få dig att göra en glad dans: de flesta av dessa professionella, industristandard verktyg är helt gratis! ![Intro Programming](../../../../translated_images/sv/webdev101-programming.d6e3f98e61ac4bff.webp) > Sketchnote av [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title Din programmeringsresa idag + title Din Programmeringsresa Idag section Upptäck - Vad är programmering: 5: You + Vad är Programmering: 5: You Programmeringsspråk: 4: You Verktygsöversikt: 5: You section Utforska - Kodeditorer: 4: You - Webbläsare & utvecklarverktyg: 5: You - Kommandoraden: 3: You + Kodredigerare: 4: You + Webbläsare & Utvecklarverktyg: 5: You + Kommandorad: 3: You section Öva Språkdetsektiv: 4: You Verktygsutforskning: 5: You @@ -29,69 +29,69 @@ journey ``` ## Låt oss se vad du redan kan! -Innan vi hoppar in i det roliga, jag är nyfiken – vad vet du redan om den här programmeringsvärlden? Och lyssna, om du tänker på de här frågorna och känner "jag har verkligen noll koll på något av det här," så är det inte bara okej, det är perfekt! Det betyder att du är precis på rätt plats. Tänk på det här quizet som att stretcha innan träningen – vi värmer bara upp hjärnmusklerna! +Innan vi hoppar in i det roliga är jag nyfiken – vad vet du redan om den här programmeringsvärlden? Och hör här, om du ser på dessa frågor och tänker "jag har bokstavligen noll koll på det här," så är det inte bara okej, det är perfekt! Det betyder att du är på exakt rätt plats. Tänk på detta quiz som stretching före ett träningspass – vi värmer bara upp hjärnmusklerna! -[Ta förtestet](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[Ta för-lektionsquizet](https://ff-quizzes.netlify.app/web/) -## Äventyret vi ska gå på tillsammans +## Äventyret vi snart ska ge oss ut på tillsammans -Okej, jag är genuint sprudlande av spänning över vad vi ska utforska idag! På riktigt, jag önskar att jag kunde se ditt ansikte när några av dessa koncept klickar. Här är den otroliga resan vi tar tillsammans: +Okej, jag bubblar verkligen av spänning över vad vi ska utforska idag! Seriöst, jag önskar att jag kunde se ditt ansikte när några av dessa koncept klickar. Här är den otroliga resan vi gör tillsammans: -- **Vad programmering egentligen är (och varför det är det coolaste som finns!)** – Vi ska upptäcka hur kod bokstavligen är den osynliga magin som driver allt runt omkring dig, från det alarm som på något sätt vet att det är måndag morgon till algoritmen som perfekt anpassar dina Netflix-rekommendationer -- **Programmeringsspråk och deras fantastiska personligheter** – Föreställ dig att du går in på en fest där varje person har helt olika superkrafter och sätt att lösa problem. Så är programmeringsspråkens värld, och du kommer att älska att träffa dem! -- **De grundläggande byggstenarna som får den digitala magin att hända** – Tänk på dessa som det ultimata kreativa LEGO-setet. När du förstår hur dessa bitar passar ihop, inser du att du bokstavligen kan bygga vad din fantasi än drömmer om -- **Professionella verktyg som får dig att känna att du just fått en trollstav** – Jag överdriver inte här – de här verktygen får dig verkligen att känna att du har superkrafter, och det bästa av allt? Det är de samma proffsen använder! +- **Vad programmering egentligen är (och varför det är det coolaste någonsin!)** – Vi ska upptäcka hur kod bokstavligen är den osynliga magin som driver allt runt omkring dig, från alarmet som på något sätt vet att det är måndag morgon till algoritmen som perfekt kuraterar dina rekommendationer på Netflix +- **Programmeringsspråk och deras fantastiska personligheter** – Föreställ dig att gå in på en fest där varje person har helt olika superkrafter och sätt att lösa problem på. Så är programmeringsspråkens värld, och du kommer att älska att träffa dem! +- **De grundläggande byggstenarna som får digital magi att hända** – Tänk på detta som det ultimata kreativa LEGO-setet. När du förstår hur dessa delar passar ihop kommer du inse att du bokstavligen kan bygga vad som helst din fantasi drömmer om +- **Professionella verktyg som får dig att känna att du just fått en trollspö** – Jag överdriver inte här – de här verktygen kommer verkligen få dig att känna att du har superkrafter, och det bästa? Det är samma verktyg som proffsen använder! -> 💡 **Här är grejen**: Försök inte ens memorera allt idag! Just nu vill jag bara att du ska känna den där gnistan av spänning över vad som är möjligt. Detaljerna fastnar naturligt när vi övar tillsammans – så lär du dig på riktigt! +> 💡 **Här är saken**: Försök inte ens memorera allt idag! Just nu vill jag bara att du ska känna det där pirret av spänning över vad som är möjligt. Detaljerna fastnar naturligt när vi övar tillsammans – så funkar riktig inlärning! -> Du kan ta den här lektionen på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> Du kan ta denna lektion på [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## Så vad är egentligen *programmering*? +## Så vad exakt *är* programmering? -Okej, låt oss ta oss an miljonfrågan: vad är programmering egentligen? +Okej, låt oss ta itu med den miljonfrågan: vad är programmering, egentligen? -Jag ger dig en historia som helt förändrade hur jag tänker på det här. Förra veckan försökte jag förklara för min mamma hur man använder vår nya smarta TV-fjärrkontroll. Jag fann mig själv säga saker som "Tryck på den röda knappen, men inte den stora röda knappen, den lilla röda knappen till vänster... nej, din andra vänster... okej, håll nu i två sekunder, inte en, inte tre..." Låter det bekant? 😅 +Jag ska ge dig en historia som helt förändrade hur jag tänker om detta. Förra veckan försökte jag förklara för min mamma hur man använder vår nya smarta TV-fjärrkontroll. Jag fångade mig själv när jag sa saker som "Tryck på den röda knappen, men inte den stora röda knappen, den lilla röda knappen till vänster… nej, din andra vänster… okej, håll den i två sekunder, inte en, inte tre..." Känner du igen dig? 😅 -Det är programmering! Det är konsten att ge otroligt detaljerade, steg-för-steg-instruktioner till något som är väldigt kraftfullt men som behöver allt uttalat perfekt. Fast istället för att förklara för din mamma (som kan fråga ”vilken röd knapp?!”), förklarar du för en dator (som bara gör exakt vad du säger, även om det du sa inte riktigt var vad du menade). +Det är programmering! Det är konsten att ge otroligt detaljerade, steg-för-steg instruktioner till något som är väldigt kraftfullt men behöver allt stavat helt perfekt. Fast istället för att förklara för din mamma (som kan fråga "vilken röd knapp?!"), förklarar du för en dator (som bara gör exakt vad du säger, även om det du sa inte riktigt är vad du menade). -Här är vad som blåste bort mig när jag först lärde mig det: datorer är faktiskt ganska enkla i grunden. De förstår bokstavligen bara två saker – 1 och 0, vilket i princip är ”ja” och ”nej” eller ”på” och ”av.” Det är allt! Men här blir det magiskt – vi behöver inte prata i 1:or och 0:or som i The Matrix. Då kommer **programmeringsspråken** till undsättning. De är som världens bästa översättare som tar dina helt normala mänskliga tankar och omvandlar dem till datorspråk. +Här är vad som blåste mitt sinne när jag först lärde mig detta: datorer är faktiskt ganska enkla i grunden. De förstår bokstavligen bara två saker – 1 och 0, vilket i princip bara är "ja" och "nej" eller "på" och "av." Det är allt! Men här blir det magiskt – vi behöver inte tala i 1 och 0 som i The Matrix. Det är där **programmeringsspråken** räddar oss. De är som att ha världens bästa översättare som tar dina helt normala mänskliga tankar och konverterar dem till datorns språk. -Och här är vad som fortfarande ger mig riktiga rysningar varje morgon när jag vaknar: bokstavligen *allt* digitalt i ditt liv började med någon precis som du, förmodligen sittande i pyjamas med en kopp kaffe, som skrev kod på sin laptop. Det Instagram-filter som får dig att se felfri ut? Någon kodade det. Rekommendationen som ledde dig till din nya favoritlåt? En utvecklare byggde den algoritmen. Appen som hjälper dig att dela middagsnotan med vänner? Japp, någon tänkte "det här är irriterande, jag kan nog fixa det" och sedan... gjorde de det! +Och här är något som fortfarande ger mig kalla kårar varje morgon när jag vaknar: bokstavligen *allt* digitalt i ditt liv började med någon precis som du, antagligen sittande i sina pyjamas med en kopp kaffe, skrivande kod på sin laptop. Det Instagramfilter som får dig att se felfri ut? Någon kodade det. Rekommendationen som ledde dig till din nya favoritlåt? En utvecklare byggde den algoritmen. Appen som hjälper dig att dela notan med vänner? Japp, någon tänkte "det här är irriterande, jag tror jag kan fixa det" och sedan... gjorde de det! -När du lär dig programmera plockar du inte bara upp en ny färdighet – du blir del av den här otroliga gemenskapen av problemlösare som tillbringar sina dagar med att fundera, "Tänk om jag kunde bygga något som gör någons dag bara lite bättre?" Är det ärligt talat något coolare än det? +När du lär dig programmera plockar du inte bara upp en ny färdighet – du blir en del av denna otroliga gemenskap av problemlösare som tillbringar sina dagar med att tänka, "Tänk om jag kunde bygga något som gör någons dag lite bättre?" Ärligt talat, finns det något coolare än det? -✅ **Rolig fakta-jakt**: Här är något supercoolt att kolla upp när du har en stund över – vem tror du var världens första programmerare? Jag ger dig en ledtråd: det är kanske inte den du väntar dig! Historien bakom den personen är helt fascinerande och visar att programmering alltid har handlat om kreativ problemlösning och att tänka utanför boxen. +✅ **Rolig fakta-jakt**: Här är något supercoolt att kolla upp när du har en stund över – vem tror du var världens första programmerare? Jag ger dig en ledtråd: det är kanske inte den du förväntar dig! Historien bakom denna person är helt fascinerande och visar att programmering alltid har handlat om kreativ problemlösning och att tänka utanför boxen. -### 🧠 **Check-in: Hur känner du dig?** +### 🧠 **Dags för en check-in: Hur känner du dig?** **Ta en stund att reflektera:** -- Känns idén "att ge instruktioner till datorer" logisk för dig nu? -- Kan du tänka på en vardagssyssla du skulle vilja automatisera med programmering? -- Vilka frågor bubblar upp i ditt huvud om hela det här programmeringsgrejen? +- Känns idén att "ge instruktioner till datorer" som något du förstår nu? +- Kan du tänka dig en daglig uppgift du skulle vilja automatisera med programmering? +- Vilka frågor bubblar upp i ditt sinne om hela detta programmeringsgrej? -> **Kom ihåg**: Det är helt normalt om vissa koncept känns svåra just nu. Att lära sig programmering är som att lära sig ett nytt språk – det tar tid för hjärnan att bygga de där nervbanorna. Du gör det jättebra! +> **Kom ihåg**: Det är helt normalt om vissa koncept känns oklara just nu. Att lära sig programmering är som att lära sig ett nytt språk – det tar tid för hjärnan att bygga de där nervbanorna. Du gör det jättebra! ## Programmeringsspråk är som olika smaker av magi -Okej, det här kommer låta konstigt, men häng med – programmeringsspråk är mycket som olika typer av musik. Tänk så här: du har jazz, som är mjuk och improviserande, rock som är kraftfull och rak-på-sak, klassiskt som är elegant och strukturerat och hip-hop som är kreativt och uttrycksfullt. Varje stil har sin egen stämning, sin egen passionerade fan-gemenskap, och varje är perfekt för olika humör och tillfällen. +Okej, det här kommer låta konstigt, men häng kvar – programmeringsspråk är mycket som olika typer av musik. Tänk efter: du har jazz, som är mjuk och improviserad, rock som är kraftfull och rak på sak, klassisk som är elegant och strukturerad, och hip-hop som är kreativ och uttrycksfull. Varje stil har sin egen stämning, sin egen community av passionerade fans, och varje passar för olika humör och tillfällen. -Programmeringsspråk fungerar precis likadant! Du skulle inte använda samma språk för att skapa ett kul mobilspel som du skulle använda för att bearbeta massiva mängder klimatdata, precis som du inte skulle spela death metal på yogaklassen (tja, på de flesta yogaklasser i alla fall! 😄). +Programmeringsspråken fungerar exakt likadant! Du skulle inte använda samma språk för att bygga ett roligt mobilspel som du använder för att bearbeta massiva mängder klimatdata, precis som du inte spelar death metal på yogaklassen (tja, de flesta yogaklasserna i alla fall! 😄). -Men här är det som alltid fascinerar mig när jag tänker på det: de här språken är som att ha världens mest tålmodiga, briljanta tolk sittande bredvid dig. Du kan uttrycka dina idéer på ett sätt som känns naturligt för din mänskliga hjärna, och de tar hand om all den otroligt komplexa översättningen till 1:or och 0:or som datorer faktiskt förstår. Det är som att ha en vän som är fullständigt tvåspråkig i både "mänsklig kreativitet" och "datorlogik" – och de blir aldrig trötta, behöver aldrig kaffepauser och dömer dig aldrig för att fråga samma fråga två gånger! +Men här är något som alltid förbluffar mig varje gång jag tänker på det: dessa språk är som att ha världens mest tålmodiga, briljanta tolk sittandes bredvid dig. Du kan uttrycka dina idéer på ett sätt som känns naturligt för din mänskliga hjärna, och de sköter allt det otroligt komplexa arbetet med att översätta det till 1:or och 0:or som datorer faktiskt talar. Det är som att ha en vän som är perfekt flytande i både "mänsklig kreativitet" och "datorlogik" – och de blir aldrig trötta, behöver aldrig kaffepauser och dömer dig aldrig för att du frågar samma fråga två gånger! ### Populära programmeringsspråk och deras användningsområden ```mermaid mindmap root((Programmeringsspråk)) - Webbutveckling + Webb utveckling JavaScript Frontend Magi Interaktiva Webbplatser TypeScript JavaScript + Typer - Företagsappar + Företagsapplikationer Data & AI Python Dataanalys @@ -106,7 +106,7 @@ mindmap Företag Swift iOS - Apple-ekosystemet + Apple Ekosystem Kotlin Modern Android Plattformoberoende @@ -123,34 +123,34 @@ mindmap ``` | Språk | Bäst för | Varför det är populärt | |----------|----------|------------------| -| **JavaScript** | Webbprogrammering, användargränssnitt | Körs i webbläsare och driver interaktiva webbplatser | -| **Python** | Data science, automatisering, AI | Lätt att läsa och lära sig, kraftfulla bibliotek | -| **Java** | Företagsapplikationer, Androidappar | Plattformoberoende, robust för stora system | -| **C#** | Windowsapplikationer, spelutveckling | Stark Microsoft-ekosystemsupport | -| **Go** | Molntjänster, backend-system | Snabbt, enkelt, designat för modern datoranvändning | +| **JavaScript** | Webb utveckling, användargränssnitt | Körs i webbläsare och driver interaktiva webbplatser | +| **Python** | Data science, automatisering, AI | Lätt att läsa och lära, kraftfulla bibliotek | +| **Java** | Företagsapplikationer, Android-appar | Plattformoberoende, robust för stora system | +| **C#** | Windows-appar, spelutveckling | Stark Microsoft-ekosystemsupport | +| **Go** | Molntjänster, backend-system | Snabbt, enkelt, designat för modern databehandling | ### Högnivå- vs. lågnivåspråk -Okej, det här var ärligt talat konceptet som knäckte min hjärna när jag först började lära mig, så jag delar gärna analogin som äntligen gjorde att det föll på plats för mig – och jag hoppas verkligen att den hjälper dig också! +Okej, detta var ärligt talat konceptet som knäckte min hjärna när jag först började lära mig, så jag ska dela med mig av analogin som äntligen fick det att klicka för mig – och jag hoppas verkligen att det hjälper dig också! -Föreställ dig att du besöker ett land där du inte talar språket och du desperat behöver hitta närmaste toalett (vi har alla varit där, eller hur? 😅): +Föreställ dig att du besöker ett land där du inte talar språket, och du desperat behöver hitta närmaste toalett (vi har alla varit där, eller hur? 😅): -- **Lågnivåprogrammering** är som att lära sig den lokala dialekten så väl att du kan prata med farmodern som säljer frukt på hörnet med hjälp av kulturella referenser, lokal slang och interna skämt som bara någon som vuxit upp där skulle förstå. Otroligt imponerande och effektivt... om du råkar vara flytande! Men ganska överväldigande när du bara försöker hitta en toalett. +- **Lågnivåprogrammering** är som att lära sig den lokala dialekten så väl att du kan prata med farmodern som säljer frukt på hörnet med hjälp av kulturella referenser, lokala slanguttryck och interna skämt som bara någon som växte upp där skulle förstå. Superimponerande och otroligt effektivt... om du råkar vara flytande! Men ganska överväldigande när du bara försöker hitta en toalett. -- **Högnivåprogrammering** är som att ha den fantastiska lokala vännen som bara förstår dig. Du kan säga "Jag behöver verkligen hitta en toalett" på enkel engelska, och de ta hand om all kulturell översättning och ger dig vägbeskrivningen på ett sätt som din icke-lokala hjärna fattar perfekt. +- **Högnivåprogrammering** är som att ha den där fantastiska lokala vännen som bara förstår dig. Du kan säga "Jag behöver verkligen hitta en toalett" på enkel engelska, och de sköter all kulturell översättning och ger dig vägbeskrivningar på ett sätt som gör perfekt mening för din icke-lokala hjärna. -På programmeringsspråksspråk: -- **Lågnivåspråk** (som Assembly eller C) låter dig ha otroligt detaljerade samtal med datorns faktiska hårdvara, men du behöver tänka som en maskin, vilket är... tja, låt oss säga att det är en ganska stor mental omställning! -- **Högnivåspråk** (som JavaScript, Python eller C#) låter dig tänka som en människa medan de fixar allt maskinspråk bakom kulisserna. Plus att de har fantastiskt välkomnande gemenskaper fulla av människor som minns hur det var att vara ny och som verkligen vill hjälpa till! +I programmeringstermer: +- **Lågnivåspråk** (som Assembly eller C) låter dig ha otroligt detaljerade samtal med datorns faktiska hårdvara, men du måste tänka som en maskin, vilket är... tja, låt oss säga att det är en stor mental omställning! +- **Högnivåspråk** (som JavaScript, Python eller C#) låter dig tänka som en människa medan de sköter all maskinspråk bakom kulisserna. Dessutom har de dessa otroligt välkomnande communityn fulla av människor som minns hur det var att vara ny och verkligen vill hjälpa! -Gissa vilka jag kommer att föreslå att du börjar med? 😉 Högnivåspråk är som att ha stödhjul som du faktiskt aldrig vill ta av eftersom de gör hela upplevelsen så mycket roligare! +Gissa vilka jag kommer att föreslå att du börjar med? 😉 Högnivåspråk är som att ha stödhjul som du aldrig egentligen vill ta bort för de gör hela upplevelsen mycket roligare! ```mermaid flowchart TB - A["👤 Mänskligt Tänkande:
'Jag vill beräkna Fibonacci-tal'"] --> B{Välj Språknivå} + A["👤 Mänskligt Tanke:
'Jag vill beräkna Fibonacci-tal'"] --> B{Välj Språknivå} - B -->|Hög nivå| C["🌟 JavaScript/Python
Enkelt att läsa och skriva"] - B -->|Låg nivå| D["⚙️ Assembly/C
Direkt hårdvarukontroll"] + B -->|Hög-Nivå| C["🌟 JavaScript/Python
Lätt att läsa och skriva"] + B -->|Låg-Nivå| D["⚙️ Assembly/C
Direkt hårdvarukontroll"] C --> E["📝 Skriv: fibonacci(10)"] D --> F["📝 Skriv: mov r0,#00
sub r0,r0,#01"] @@ -158,7 +158,7 @@ flowchart TB E --> G["🤖 Datorförståelse:
Översättaren hanterar komplexiteten"] F --> G - G --> H["💻 Samma resultat:
0, 1, 1, 2, 3, 5, 8, 13..."] + G --> H["💻 Samma Resultat:
0, 1, 1, 2, 3, 5, 8, 13..."] style C fill:#e1f5fe style D fill:#fff3e0 @@ -166,13 +166,13 @@ flowchart TB ``` ### Låt mig visa varför högnivåspråk är så mycket vänligare -Okej, jag ska visa dig något som perfekt visar varför jag blev kär i högnivåspråk, men först – jag behöver att du lovar mig en sak. När du ser det första kodexemplet, få inte panik! Det ska se skrämmande ut. Det är exakt vad jag menar! +Okej, jag ska visa dig något som perfekt visar varför jag blev kär i högnivåspråk, men först – jag behöver att du lovar mig en sak. När du ser det första kodexemplet, panika inte! Det är meningen att det ska se skrämmande ut. Det är precis poängen jag vill göra! -Vi ska titta på samma uppgift skriven i två helt olika stilar. Båda skapar den så kallade Fibonaccisekvensen – det är ett vackert matematiskt mönster där varje tal är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8, 13... (Rolig fakta: du hittar det här mönstret bokstavligen överallt i naturen – solrosfröspiraler, mönster i kottar, till och med hur galaxer formas!) +Vi ska titta på exakt samma uppgift skriven i två helt olika stilar. Båda skapar det som kallas Fibonacci-sekvensen – det är ett vackert matematiskt mönster där varje nummer är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8, 13... (Rolig fakta: du hittar detta mönster bokstavligen överallt i naturen – solrosfröst spiraler, kottemönster, till och med hur galaxer bildas!) -Redo att se skillnaden? Kör vi! +Redo att se skillnaden? Nu kör vi! -**Högnivåspråk (JavaScript) – Mänskligt vänligt:** +**Högnivåspråk (JavaScript) – Människovänligt:** ```javascript // Steg 1: Grundläggande Fibonacci-inställning @@ -184,28 +184,28 @@ console.log('Fibonacci sequence:'); ``` **Det här gör koden:** -- **Deklarerar** en konstant för hur många Fibonacci-tal vi vill generera -- **Initierar** två variabler för att hålla koll på det aktuella och nästa tal i sekvensen -- **Sätter upp** startvärdena (0 och 1) som definierar Fibonacci-mönstret -- **Visar** en rubriktext för att identifiera vår utskrift +- **Deklarera** en konstant för att ange hur många Fibonacci-tal vi vill generera +- **Initiera** två variabler för att hålla koll på det aktuella och nästa tal i sekvensen +- **Sätta upp** startvärdena (0 och 1) som definierar Fibonacci-mönstret +- **Visa** en rubrikmeddelande för att identifiera vår output ```javascript // Steg 2: Generera sekvensen med en loop for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Beräkna nästa nummer i sekvensen + // Beräkna nästa tal i sekvensen const sum = current + next; current = next; next = sum; } ``` -**Bryter ner vad som händer här:** +**Bryt ner vad som händer här:** - **Loopar** igenom varje position i sekvensen med en `for`-loop -- **Visar** varje tal med dess position med hjälp av mallsträngar -- **Beräknar** nästa Fibonacci-tal genom att addera aktuellt och nästa värde -- **Uppdaterar** våra spårningsvariabler för att gå vidare till nästa iteration +- **Visar** varje tal med dess position med hjälp av template literals +- **Beräkna** nästa Fibonacci-tal genom att lägga ihop nuvarande och nästa värde +- **Uppdatera** våra spårningsvariabler för att gå vidare till nästa iteration ```javascript // Steg 3: Modernt funktionellt tillvägagångssätt @@ -219,16 +219,16 @@ const generateFibonacci = (count) => { return sequence; }; -// Exempel på användning +// Användningsexempel const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**I exemplet ovan har vi:** -- **Skapat** en återanvändbar funktion med modern pil-funktionssyntax +**I koden ovan har vi:** +- **Skapat** en återanvändbar funktion med modern arrow function-syntax - **Byggt** en array för att lagra hela sekvensen istället för att visa ett och ett tal -- **Använt** arrayindexering för att beräkna varje nytt tal från tidigare värden -- **Returnerat** hela sekvensen för flexibel användning i andra delar av vårt program +- **Använt** arrayindexering för att räkna ut varje nytt tal från tidigare värden +- **Returnerat** hela sekvensen för flexibel användning i andra delar av programmet **Lågnivåspråk (ARM Assembly) – Datorvänligt:** @@ -257,27 +257,28 @@ back add r0,r1 end ``` -Notera hur JavaScript-versionen läses nästan som engelska instruktioner, medan Assembly-versionen använder kryptiska kommandon som direkt styr datorns processor. Båda uppnår exakt samma uppgift, men högnivåspråket är mycket lättare för människor att förstå, skriva och underhålla. +Notera hur JavaScript-versionen läses nästan som engelska instruktioner, medan Assembly-versionen använder kryptiska kommandon som direkt styr datorns processor. Båda utför samma uppgift, men högnivåspråket är mycket lättare för människor att förstå, skriva och underhålla. -**Viktiga skillnader du kommer att märka:** +**Viktiga skillnader du kommer märka:** - **Läsbarhet**: JavaScript använder beskrivande namn som `fibonacciCount` medan Assembly använder kryptiska etiketter som `r0`, `r1` -- **Kommentarer**: Hög-nivå språk uppmuntrar förklarande kommentarer som gör koden självförklarande -- **Struktur**: JavaScripts logiska flöde matchar hur människor tänker på problem steg för steg -- **Underhåll**: Uppdatering av JavaScript-versionen för olika krav är enkelt och tydligt +- **Kommentarer**: Hög nivå-språk uppmuntrar förklarande kommentarer som gör koden självdokumenterande +- **Struktur**: JavaScripts logiska flöde matchar hur människor tänker steg för steg kring problem +- **Underhåll**: Att uppdatera JavaScript-versionen för olika krav är enkelt och tydligt + +✅ **Om Fibonacci-sekvensen**: Detta helt makalöst vackra mönster av siffror (där varje tal är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8...) dyker upp bokstavligen *överallt* i naturen! Du hittar det i solrosspiraler, kottmönster, hur nautilusskal kröker sig, och till och med i hur trädgrenar växer. Det är ganska häpnadsväckande hur matematik och kod kan hjälpa oss att förstå och återskapa de mönster som naturen använder för att skapa skönhet! -✅ **Om Fibonaccis talföljd**: Detta helt underbara talmönster (där varje nummer är summan av de två föregående: 0, 1, 1, 2, 3, 5, 8...) dyker bokstavligen upp *överallt* i naturen! Du hittar det i solrosspiraler, grankottars mönster, hur nautilusskal böjer sig och till och med i hur trädgrenar växer. Det är ganska häpnadsväckande hur matte och kod kan hjälpa oss förstå och återskapa de mönster som naturen använder för att skapa skönhet! -## Byggstenarna som får magin att hända +## Byggstenarna som gör magin möjlig -Okej, nu när du har sett hur programmeringsspråk ser ut i praktiken, låt oss bryta ner de grundläggande bitarna som bygger upp bokstavligen varje program som någonsin skrivits. Tänk på dessa som de viktiga ingredienserna i ditt favoritrecept – när du förstår vad var och en gör, kommer du kunna läsa och skriva kod i nästan vilket språk som helst! +Okej, nu när du har sett hur programmeringsspråk ser ut i praktiken, låt oss bryta ner de grundläggande delarna som utgör bokstavligen varje program som någonsin har skrivits. Tänk på dessa som de väsentliga ingredienserna i ditt favoritrecept – när du förstår vad varje del gör, kommer du att kunna läsa och skriva kod i nästan vilket språk som helst! -Det här är lite som att lära sig programmeringens grammatik. Kommer du ihåg när du i skolan lärde dig om substantiv, verb och hur man sätter ihop meningar? Programmering har sin egen version av grammatik, och ärligt talat är den mycket mer logisk och förlåtande än engelska grammatik någonsin var! 😄 +Det här är lite som att lära sig programmeringens grammatik. Kommer du ihåg när du i skolan lärde dig om substantiv, verb och hur man sätter ihop meningar? Programmering har sin egen version av grammatik, och ärligt talat är den mycket mer logisk och förlåtande än engelska grammatiken någonsin var! 😄 -### Satser: Steg-för-steg-instruktioner +### Satser: steg-för-steg-instruktioner -Låt oss börja med **satser** – de är som enskilda meningar i en konversation med din dator. Varje sats berättar för datorn att göra en specifik sak, ungefär som att ge anvisningar: ”Sväng vänster här”, ”Stanna vid rött ljus”, ”Parkera på den där platsen”. +Låt oss börja med **satser** – dessa är som individuella meningar i en konversation med din dator. Varje sats säger till datorn att göra en specifik sak, lite som att ge vägbeskrivningar: "Sväng vänster här," "Stanna vid rödljuset," "Parka på den platsen." -Det jag älskar med satser är hur läsbara de brukar vara. Kolla här: +Det jag älskar med satser är hur läsbara de oftast är. Kolla på detta: ```javascript // Grundläggande satser som utför enstaka åtgärder @@ -285,31 +286,31 @@ const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**Här är vad den här koden gör:** -- **Deklarerar** en konstant variabel för att lagra en användares namn -- **Visar** ett hälsningsmeddelande i konsolens utmatning -- **Beräknar** och lagrar resultatet av en matematisk operation + +**Här är vad den här koden gör:** +- **Deklarerar** en konstant variabel för att lagra en användares namn +- **Visar** ett hälsningsmeddelande i konsolens utdata +- **Beräknar** och lagrar resultatet av en matematisk operation ```javascript -// Uttalanden som interagerar med webbsidor +// Utsagor som interagerar med webbsidor document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**Steg för steg, så här händer det:** -- **Modifierar** webbplatsens titel som visas i webbläsarfliken -- **Byter** bakgrundsfärgen på hela sidans kropp -### Variabler: Programmets minnessystem +**Steg för steg, så här händer det:** +- **Modifierar** webbsidans titel som visas i webbläsarfliken +- **Ändrar** bakgrundsfärgen för hela sidans kropp + +### Variabler: ditt programs minnessystem -Okej, **variabler** är ärligt talat ett av mina absoluta favoritkoncept att lära ut eftersom de är så lika saker du redan använder varje dag! +Okej, **variabler** är ärligt talat ett av mina absoluta favoritbegrepp att lära ut eftersom de är så likt sådant du redan använder varje dag! -Tänk på din telefons kontaktlista en sekund. Du memorerar inte allas telefonnummer – istället sparar du ”Mamma”, ”Bästa vän” eller ”Pizzerian som levererar till kl 2 på natten” och låter telefonen minnas de faktiska numren. Variabler fungerar precis på samma sätt! De är som märkta behållare där ditt program kan lagra information och hämta den senare med ett namn som faktiskt är begripligt. +Tänk på din telefons kontaktlista en sekund. Du kan inte memorera allas telefonnummer – istället sparar du ”Mamma”, ”Bästis” eller ”Pizzastället som levererar till 2 på morgonen” och låter telefonen komma ihåg de faktiska numren. Variabler fungerar exakt på samma sätt! De är som märkta behållare där ditt program kan lagra information och hämta den senare med ett namn som faktiskt är begripligt. -Det riktigt coola är: variabler kan förändras medan programmet körs (därav namnet ”variabel” – ser du vad de gjorde där?). Precis som du kan uppdatera kontaktinformationen till pizzerian när du hittar ett ännu bättre ställe, kan variabler uppdateras när ditt program lär sig ny information eller när situationer förändras! +Det som verkligen är coolt: variabler kan ändras medan ditt program körs (därav namnet ”variabel” – ser du vad de gjorde där?). Precis som du kanske uppdaterar pizzaställets kontakt när du hittar någon ännu bättre, kan variabler uppdateras när ditt program lär sig ny information eller när situationer ändras! -Låt mig visa hur otroligt enkelt detta kan vara: +Låt mig visa hur vackert enkelt detta kan vara: ```javascript // Steg 1: Skapa grundläggande variabler @@ -318,12 +319,12 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**Att förstå dessa koncept:** -- **Lagra** oföränderliga värden i `const`-variabler (som webbplatsens namn) -- **Använda** `let` för värden som kan ändras under programmets gång -- **Tilldela** olika datatyper: strängar (text), siffror och booleska värden (true/false) -- **Välja** beskrivande namn som förklarar vad varje variabel innehåller + +**Förstå dessa koncept:** +- **Lagra** oföränderliga värden i `const`-variabler (som sajtens namn) +- **Använda** `let` för värden som kan ändras under programmets gång +- **Tilldela** olika datatyper: strängar (text), nummer och booleaner (sant/falskt) +- **Välja** beskrivande namn som förklarar vad varje variabel innehåller ```javascript // Steg 2: Arbeta med objekt för att gruppera relaterad data @@ -333,46 +334,46 @@ const weatherData = { windSpeed: 12 }; ``` - -**Ovanför har vi:** -- **Skapat** ett objekt för att gruppera relaterad väderinformation -- **Organiserat** flera datadelar under ett variabelnamn -- **Använt** nyckel-värde-par för att märka varje informationsdel tydligt + +**I det ovanstående har vi:** +- **Skapat** ett objekt för att gruppera relaterad väderinformation +- **Organiserat** flera data under ett variabelnamn +- **Använt** nyckel-värdepar för att tydligt märka varje data ```javascript // Steg 3: Använda och uppdatera variabler console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Uppdatera föränderliga variabler +// Uppdatera variabla variabler currentWeather = "cloudy"; temperature = 68; ``` - -**Låt oss förstå varje del:** -- **Visa** information med template literals med `${}`-syntax -- **Hämta** objektets egenskaper med punktnotation (`weatherData.windSpeed`) -- **Uppdatera** variabler deklarerade med `let` för att spegla förändrade förhållanden -- **Kombinera** flera variabler för att skapa meningsfulla meddelanden + +**Låt oss förstå varje del:** +- **Visa** information med mall-strängar med `${}` syntax +- **Åtkomst** till objektets egenskaper via punktnotation (`weatherData.windSpeed`) +- **Uppdatera** variabler deklarerade med `let` för att spegla förändrade förhållanden +- **Kombinera** flera variabler för att skapa meningsfulla meddelanden ```javascript // Steg 4: Modern destrukturering för renare kod const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**Det du behöver veta:** -- **Extrahera** specifika egenskaper från objekt med destructuring assignment -- **Skapa** nya variabler automatiskt med samma namn som objektets nycklar -- **Förenkla** koden genom att undvika upprepande punktnotation -### Kontrollflöde: Lära ditt program att tänka +**Det du behöver veta:** +- **Extrahera** specifika egenskaper från objekt med destrukturering +- **Skapa** nya variabler automatiskt med samma namn som objektets nycklar +- **Förenkla** koden genom att undvika upprepning av punktnotation -Okej, här blir programmering riktigt häpnadsväckande! **Kontrollflöde** handlar i princip om att lära ditt program att fatta smarta beslut, precis som du gör varje dag utan att ens tänka på det. +### Kontrollflöde: lära ditt program att tänka -Föreställ dig detta: i morse gick du säkert igenom något som ”Om det regnar, tar jag med ett paraply. Om det är kallt, tar jag på mig en jacka. Om jag är sen, hoppar jag över frukosten och tar kaffe på vägen.” Din hjärna följer naturligt detta if-then-logik dussintals gånger varje dag! +Okej, här börjar programmering bli helt häpnadsväckande! **Kontrollflöde** är i princip att lära ditt program att fatta smarta beslut, precis som du gör varje dag utan att ens tänka på det. -Det här är vad som får program att kännas intelligenta och levande, istället för att bara följa något tråkigt, förutsägbart manus. De kan faktiskt titta på en situation, utvärdera vad som händer och svara på rätt sätt. Det är som att ge ditt program en hjärna som kan anpassa sig och fatta val! +Föreställ dig detta: i morse gick du säkert igenom något som ”Om det regnar, tar jag med mig ett paraply. Om det är kallt, tar jag på mig en jacka. Om jag är sen, skippar jag frukosten och tar kaffe på vägen.” Din hjärna följer naturligt den här typen av om-så-logik dussintals gånger varje dag! + +Det här är vad som får program att kännas intelligenta och levande istället för bara att följa ett tråkigt, förutsägbart manus. De kan faktiskt titta på en situation, utvärdera vad som händer och svara på rätt sätt. Det är som att ge ditt program en hjärna som kan anpassa sig och göra val! Vill du se hur vackert detta fungerar? Låt mig visa dig: @@ -387,12 +388,12 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**Det här gör den här koden:** -- **Kontrollerar** om användarens ålder uppfyller röstningskravet -- **Kör** olika kodblock baserat på villkorets resultat -- **Beräknar** och visar hur länge det är kvar tills röstberättigande om under 18 -- **Ger** specifik, hjälpsam feedback för varje scenario + +**Det här gör koden:** +- **Kontrollerar** om användarens ålder uppfyller röstningskravet +- **Utför** olika kodblock baserat på villkorets resultat +- **Beräknar** och visar hur länge det är kvar till rösträtt om under 18 +- **Ger** specifik, hjälpsam feedback för varje scenario ```javascript // Steg 2: Flera villkor med logiska operatorer @@ -407,23 +408,23 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**Nedbrytning av vad som händer här:** -- **Kombinerar** flera villkor med `&&` (och) operatorn -- **Skapar** en hierarki av villkor med `else if` för flera scenarion -- **Hantera** alla möjliga fall med en slutgiltig `else`-sats -- **Ger** tydlig, handlingsbar feedback för varje olika situation + +**Så här delas det upp:** +- **Kombinerar** flera villkor med `&&` (och) operatorn +- **Skapar** en hierarki av villkor med `else if` för flera scenarier +- **Hanterar** alla möjliga fall med en slutlig `else` sats +- **Ger** tydlig och användbar feedback för varje unik situation ```javascript -// Steg 3: Koncis villkorssats med ternär operator +// Steg 3: Kortfattad villkor med ternär operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**Det här ska du komma ihåg:** -- **Använd** ternära operatorn (`? :`) för enkla två-vals-villkor -- **Skriv** villkoret först, följt av `?`, sedan sant resultat, sedan `:`, sedan falskt resultat -- **Använd** detta mönster när du behöver tilldela värden baserat på villkor + +**Det här bör du komma ihåg:** +- **Använda** ternära operatorn (`? :`) för enkla två-alternativ villkor +- **Skriv** villkoret först, följt av `?`, sedan sant resultat, `:`, och falskt resultat +- **Använd** detta mönster när du behöver tilldela värden baserat på villkor ```javascript // Steg 4: Hantering av flera specifika fall @@ -445,56 +446,56 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**Den här koden gör följande:** -- **Matchar** variabelvärdet mot flera specifika fall -- **Grupperar** liknande fall tillsammans (veckodagar vs. helger) -- **Kör** rätt kodblock när en matchning hittas -- **Inkluderar** ett `default`-fall för att hantera oväntade värden -- **Använder** `break`-satser för att hindra att koden fortsätter till nästa fall -> 💡 **Verklighetsanalog**: Tänk på kontrollflöde som att ha världens mest tålmodiga GPS som ger dig vägbeskrivningar. Den kan säga ”Om det är trafik på Main Street, ta motorvägen istället. Om byggarbete blockerar motorvägen, försök den natursköna vägen.” Program använder exakt samma typ av villkorlig logik för att reagera smart på olika situationer och alltid ge användarna den bästa möjliga upplevelsen. +**Den här koden gör följande:** +- **Matchar** variabelvärdet mot flera specifika fall +- **Grupperar** liknande fall (vardagar vs helger) +- **Utför** rätt kodblock när en träff hittas +- **Inkluderar** ett `default` fall för oförväntade värden +- **Använder** `break` satser för att förhindra att koden fortsätter till nästa fall + +> 💡 **Verklighetsanalogin**: Tänk på kontrollflöde som världens mest tålmodiga GPS som ger dig vägbeskrivningar. Den kan säga ”Om det är trafik på Main Street, ta istället motorvägen. Om vägarbete blockerar motorvägen, prova den natursköna vägen.” Program använder exakt samma typ av villkorslogik för att svara intelligent på olika situationer och alltid ge användarna bästa möjliga upplevelse. -### 🎯 **Begreppskoll: Behärska byggstenarna** +### 🎯 **Konceptkontroll: Mästare på byggstenarna** -**Låt oss se hur det går med grunderna:** -- Kan du förklara skillnaden mellan en variabel och en sats med egna ord? -- Tänk på ett verkligt scenario där du använder ett if-then-beslut (som vårt röstningsexempel) -- Vad är en sak med programmeringslogik som förvånade dig? +**Låt oss se hur du ligger till med grunderna:** +- Kan du förklara skillnaden mellan en variabel och en sats med egna ord? +- Tänk på ett verkligt scenario där du skulle använda en om-så-beslut (som vårt röstningsexempel) +- Vad är en sak med programmeringslogik som överraskade dig? -**Snabbt självförtroendeboost:** +**Snabb självsäkerhetsboost:** ```mermaid flowchart LR - A["📝 Satser
(Instruktioner)"] --> B["📦 Variabler
(Lagring)"] --> C["🔀 Kontrollflöde
(Beslut)"] --> D["🎉 Fungerande Program!"] + A["📝 Utsagor
(Instruktioner)"] --> B["📦 Variabler
(Lagring)"] --> C["🔀 Kontrollflöde
(Beslut)"] --> D["🎉 Fungerande Program!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **Vad som kommer härnäst**: Vi kommer ha så roligt när vi dyker djupare in i dessa koncept under vår otroliga resa tillsammans! Just nu, fokusera bara på att känna den där spänningen för alla fantastiska möjligheter framför dig. De specifika färdigheterna och teknikerna kommer fastna naturligt när vi övar tillsammans – jag lovar att det här kommer bli så mycket roligare än du kanske förväntar dig! +``` +✅ **Vad som kommer härnäst**: Vi kommer ha en fantastisk tid när vi dyker djupare in i dessa koncept på vår otroliga resa tillsammans! Just nu, fokusera bara på att känna den spänning som finns inför alla otroliga möjligheter som väntar dig. De specifika färdigheterna och teknikerna kommer naturligt när vi övar tillsammans – jag lovar att detta kommer bli mycket roligare än du kanske förväntar dig! -## Verktyg för jobbet +## Verktyg för arbetet -Okej, här får jag ärligt talat sådan pirr i magen att jag knappt kan hålla det inne! 🚀 Vi ska precis prata om de otroliga verktygen som kommer få dig att känna att du just fick nycklarna till ett digitalt rymdskepp. +Okej, här blir jag ärligt talat så uppspelt att jag knappt kan hålla mig! 🚀 Vi ska prata om de otroliga verktyg som kommer få dig att känna att du precis fått nycklarna till ett digitalt rymdskepp. -Du vet hur en kock har de där perfekt balanserade knivarna som känns som en förlängning av deras händer? Eller hur en musiker har den där gitarren som tycks sjunga så fort de rör vid den? Ja, utvecklare har vår egen version av dessa magiska verktyg, och här är vad som kommer få dig att tappa hakan – de flesta är helt gratis! +Vet du hur en kock har de där perfekt balanserade knivarna som känns som en förlängning av deras händer? Eller hur en musiker har den där gitarren som låter sjunga det ögonblick hen rör vid den? Jo, utvecklare har sin egen version av dessa magiska verktyg, och här är något som kommer att blåsa dig av stolen – de flesta av dem är helt gratis! -Jag studsar nästan i stolen när jag tänker på att dela detta med dig eftersom de helt har revolutionerat hur vi bygger mjukvara. Vi pratar om AI-drivna kodassistenter som kan hjälpa dig skriva kod (jag skojar inte!), molnmiljöer där du kan bygga hela applikationer bokstavligen var som helst med Wi-Fi, och felsökningsverktyg så sofistikerade att det är som att ha röntgensyn för dina program. +Jag sitter nästan och hoppar i stolen av tanken på att få dela detta med dig för de har helt revolutionerat hur vi bygger mjukvara. Vi pratar om AI-drivna kodassistenter som kan hjälpa dig skriva din kod (jag skojar inte!), molnmiljöer där du kan bygga hela applikationer bokstavligen var som helst med Wi-Fi, och felsökningsverktyg som är så avancerade att det är som att ha röntgensyn för dina program. -Och här är delen som fortfarande ger mig rysningar: det här är inte ”nybörjarverktyg” som du kommer växa ur. Det är exakt samma professionella verktyg som utvecklare på Google, Netflix och det där indie app-studion du älskar använder just i detta ögonblick. Du kommer känna dig som ett proffs när du använder dem! +Och här kommer delen som fortfarande ger mig rysningar: det här är inte ”nybörjarverktyg” som du växer ifrån. Det är exakt samma professionella verktyg som utvecklare på Google, Netflix och den där indieapp-studion du älskar använder just nu. Du kommer att känna dig som en riktig proffs när du använder dem! ```mermaid graph TD - A["💡 Din Idé"] --> B["⌨️ Kodredigerare
(VS Code)"] - B --> C["🌐 Webbläsarutvecklarverktyg
(Testning & Felsökning)"] + A["💡 Din idé"] --> B["⌨️ Kodredigerare
(VS Code)"] + B --> C["🌐 Webbläsarverktyg
(Testning & Felsökning)"] C --> D["⚡ Kommandorad
(Automatisering & Verktyg)"] - D --> E["📚 Dokumentation
(Inlärning & Referens)"] + D --> E["📚 Dokumentation
(Lärande & Referens)"] E --> F["🚀 Fantastisk Webbapp!"] B -.-> G["🤖 AI-assistent
(GitHub Copilot)"] - C -.-> H["📱 Enhetstestning
(Responsiv Design)"] - D -.-> I["📦 Paketverktyg
(npm, yarn)"] + C -.-> H["📱 Enhetstestning
(Responsiv design)"] + D -.-> I["📦 Paketchefer
(npm, yarn)"] E -.-> J["👥 Gemenskap
(Stack Overflow)"] style A fill:#fff59d @@ -503,59 +504,60 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### Kodredigerare och IDE: Dina nya digitala bästa vänner +``` +### Kodredigerare och IDE: Dina nya digitala bästa vänner -Låt oss prata om kodredigerare – dessa är på riktigt på väg att bli dina nya favoritställen att hänga på! Tänk på dem som ditt personliga kodningssanktuarium där du kommer spendera mest tid med att skapa och förfina dina digitala alster. +Låt oss prata om kodredigerare – de kommer verkligen att bli dina nya favoritställen att hänga på! Tänk på dem som din personliga kodningsfristad där du kommer spendera mestadelen av tiden med att skulptera och förfina dina digitala skapelser. -Men här är vad som är helt magiskt med moderna redigerare: de är inte bara fina textredigerare. De är som att ha den smartaste, mest stödjande kodmentor som sitter bredvid dig dygnet runt. De fångar dina skrivfel innan du ens märker dem, föreslår förbättringar som får dig att se ut som ett geni, hjälper dig förstå vad varje kodbit gör, och några kan till och med förutsäga vad du är på väg att skriva och erbjuda sig att färdigställa dina tankar! +Men det som är helt magiskt med moderna redigerare är att de inte bara är fancy textredigerare. De är som att ha den mest briljanta, stöttande kodningsmentorn sittande precis bredvid dig 24/7. De fångar dina felstavningar innan du ens märker dem, föreslår förbättringar som får dig att se ut som ett geni, hjälper dig att förstå vad varje kodbit gör, och vissa av dem kan till och med förutspå vad du är på väg att skriva och erbjuda sig att slutföra dina tankar! -Jag minns när jag först upptäckte automatisk komplettering – jag kände nästan att jag levde i framtiden. Du börjar skriva något, och editorn säger: ”Hej, tänkte du på den här funktionen som gör exakt vad du behöver?” Det är som att ha en tankeläsare som kodkompis! +Jag minns när jag först upptäckte autokomplettering – det kändes som att jag levde i framtiden. Du börjar skriva något, och din redigerare säger, ”Hej, tänkte du på den här funktionen som gör precis det du behöver?” Det är som att ha en tankeläsare som din kodningskompis! -**Vad gör dessa redigerare så otroliga?** +**Vad gör dessa redigerare så otroliga?** -Moderna kodredigerare erbjuder en imponerande uppsättning funktioner designade för att boosta din produktivitet: +Moderna kodredigerare erbjuder en imponerande uppsättning funktioner som är utformade för att öka din produktivitet: -| Funktion | Vad den gör | Varför det hjälper | -|---------|--------------|--------------| -| **Syntaxmarkering** | Färglägger olika delar av din kod | Gör kod lättare att läsa och hitta fel | -| **Automatisk komplettering** | Föreslår kod medan du skriver | Snabbar upp kodandet och minskar skrivfel | -| **Felsökningsverktyg** | Hjälper dig hitta och fixa fel | Sparar timmar vid felsökning | -| **Tillägg** | Lägger till specialfunktioner | Anpassa din editor efter teknik | -| **AI-assistenter** | Föreslår kod och förklaringar | Påskyndar lärande och produktivitet | +| Funktion | Vad den gör | Varför det hjälper | +|---------|--------------|--------------| +| **Syntaxmarkering** | Färglägger olika delar av din kod | Gör kod lättare att läsa och upptäcka fel | +| **Autokomplettering** | Föreslår kod medan du skriver | Snabbar upp kodning och minskar stavfel | +| **Felsökningsverktyg** | Hjälper dig hitta och fixa fel | Sparar timmar av felsökningstid | +| **Tillägg** | Lägger till specialfunktioner | Anpassa din editor för vilken teknik som helst | +| **AI-assistenter** | Föreslår kod och förklaringar | Påskyndar lärande och produktivitet | -> 🎥 **Videoresurs**: Vill du se dessa verktyg i aktion? Kolla in den här [Tools of the Trade videon](https://youtube.com/watch?v=69WJeXGBdxg) för en omfattande översikt. +> 🎥 **Videoresurs**: Vill du se dessa verktyg i aktion? Kolla in den här [Tools of the Trade-videon](https://youtube.com/watch?v=69WJeXGBdxg) för en omfattande översikt. #### Rekommenderade redigerare för webbutveckling -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) -- Mest populär bland webbutvecklare -- Utmärkt tilläggsekosystem -- Inbyggd terminal och Git-integration -- **Måste-ha-tillägg**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-driven kodförslag - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Samarbete i realtid - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatisk kodformatering - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fångar stavfel i din kod +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) +- Mest populär bland webbutvecklare +- Utmärkt ekosystem av tillägg +- Inbyggd terminal och Git-integration +- **Måste-ha-tillägg**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-drivna kodförslag + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Samarbete i realtid + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatisk kodformatering + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fångar stavfel i koden + +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betald, gratis för studenter) +- Avancerade felsöknings- och testverktyg +- Intelligent kodkomplettering +- Inbyggd versionskontroll -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betald, gratis för studenter) -- Avancerade felsöknings- och testverktyg -- Intelligent kodkomplettering -- Inbyggd versionskontroll +**Molnbaserade IDEer** (Olika priser) +- [GitHub Codespaces](https://github.com/features/codespaces) - Fullt VS Code i din webbläsare +- [Replit](https://replit.com/) - Perfekt för att lära sig och dela kod +- [StackBlitz](https://stackblitz.com/) - Omedelbar fullstack webbutveckling -**Molnbaserade IDEs** (Olika prissättning) -- [GitHub Codespaces](https://github.com/features/codespaces) - Full VS Code i din webbläsare -- [Replit](https://replit.com/) - Perfekt för att lära sig och dela kod -- [StackBlitz](https://stackblitz.com/) - Omedelbar full-stack webb-utveckling +> 💡 **Tips för att komma igång**: Börja med Visual Studio Code – det är gratis, mycket använt i branschen och har en enorm community som skapar hjälptutorials och tillägg. -> 💡 **Kom igång tips**: Börja med Visual Studio Code – det är gratis, välanvänt i branschen och har en enorm community som skapar hjälpsamma tutorials och tillägg. ### Webbläsare: Ditt hemliga utvecklingslaboratorium -Okej, förbered dig på att bli helt uppslukad! Du vet hur du har använt webbläsare för att scrolla genom sociala medier och titta på videos? Tja, det visar sig att de har gömt det här otroliga hemliga utvecklingslaboratoriet hela tiden, bara väntande på att du ska upptäcka det! +Okej, gör dig redo att få ditt sinne fullständigt blåst! Du vet hur du har använt webbläsare för att scrolla sociala medier och titta på videor? Ja, det visar sig att de har gömt det här otroliga hemliga utvecklingslaboratoriet hela tiden, bara väntande på att du ska upptäcka det! -Varje gång du högerklickar på en webbsida och väljer "Inspektera" öppnar du en dold värld av utvecklarverktyg som är ärligt talat kraftfullare än någon dyr programvara jag brukade betala hundratals kronor för. Det är som att upptäcka att ditt vanliga gamla kök har gömt ett professionellt kocklaboratorium bakom en hemlig panel! -Första gången någon visade mig webbläsarens DevTools, spenderade jag typ tre timmar bara på att klicka runt och säga "VÄNTA, KAN DEN GÖRA DET HÄR OCKSÅ?!" Du kan bokstavligen redigera vilken webbplats som helst i realtid, se exakt hur snabbt allt laddas, testa hur din sajt ser ut på olika enheter, och till och med debugga JavaScript som ett proffs. Det är helt hisnande! +Varje gång du högerklickar på en webbsida och väljer "Inspektera element" öppnar du en dold värld av utvecklarverktyg som är ärligt talat mäktigare än några dyra program jag brukade betala hundratals dollar för. Det är som att upptäcka att ditt vanliga kök har dolt ett professionellt kocklaboratorium bakom en hemlig panel! +Första gången någon visade mig webbläsarens DevTools, spenderade jag typ tre timmar bara på att klicka runt och tänka "VÄNTA, KAN DEN GÖRA DET DÄR OCKSÅ?!" Du kan bokstavligen redigera vilken webbplats som helst i realtid, se exakt hur snabbt allt laddas, testa hur din sida ser ut på olika enheter och till och med felsöka JavaScript som en riktig expert. Det är helt otroligt! **Här är varför webbläsare är ditt hemliga vapen:** @@ -565,34 +567,34 @@ När du skapar en webbplats eller webbapplikation behöver du se hur den ser ut Moderna webbläsare inkluderar omfattande utvecklingspaket: -| Verktygskategori | Vad det gör | Exempel på användning | -|------------------|-------------|-----------------------| +| Verktygskategori | Vad det gör | Exempel på användningsområde | +|------------------|-------------|------------------------------| | **Elementinspektör** | Visa och redigera HTML/CSS i realtid | Justera stil för att se omedelbara resultat | -| **Konsol** | Visa felmeddelanden och testa JavaScript | Debugga problem och experimentera med kod | -| **Nätverksmonitor** | Följa hur resurser laddas | Optimera prestanda och laddningstider | -| **Tillgänglighetskontroll** | Testa inkluderande design | Säkerställ att din sajt fungerar för alla användare | +| **Konsol** | Visa felmeddelanden och testa JavaScript | Felsöka problem och experimentera med kod | +| **Nätverksövervakare** | Spåra hur resurser laddas | Optimera prestanda och laddningstider | +| **Tillgänglighetskontroll** | Testa inkluderande design | Säkerställ att din sida fungerar för alla användare | | **Enhetssimulator** | Förhandsgranska på olika skärmstorlekar | Testa responsiv design utan flera enheter | #### Rekommenderade webbläsare för utveckling -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** – Industri-standard för DevTools med omfattande dokumentation -- **[Firefox](https://developer.mozilla.org/docs/Tools)** – Utmärkta verktyg för CSS Grid och tillgänglighet -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** – Byggd på Chromium med Microsofts utvecklarresurser +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industriell standard för DevTools med omfattande dokumentation +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Utmärkta verktyg för CSS Grid och tillgänglighet +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Byggd på Chromium med Microsofts utvecklarresurser -> ⚠️ **Viktig testtips**: Testa alltid dina webbplatser i flera webbläsare! Det som fungerar perfekt i Chrome kan se annorlunda ut i Safari eller Firefox. Professionella utvecklare testar i alla stora webbläsare för att säkerställa konsekventa användarupplevelser. +> ⚠️ **Viktigt testtips**: Testa alltid dina webbplatser i flera webbläsare! Det som fungerar perfekt i Chrome kan se annorlunda ut i Safari eller Firefox. Professionella utvecklare testar i alla större webbläsare för att säkerställa en konsekvent användarupplevelse. -### Kommandoradsverktyg: Din port till utvecklarmagi +### Kommandoradsverktyg: Din väg till utvecklarmagi -Okej, låt oss vara helt ärliga om kommandoraden, för jag vill att du hör det från någon som verkligen förstår. När jag först såg den – bara den här skrämmande svarta skärmen med blinkande text – tänkte jag bokstavligen: "Nej, absolut inte! Det ser ut som något ur en hackarfilm från 80-talet, och jag är definitivt inte smart nog för det här!" 😅 +Okej, låt oss ha ett helt ärligt ögonblick här om kommandoraden, för jag vill att du ska höra detta från någon som verkligen förstår. När jag såg den första gången – bara den där läskiga svarta skärmen med blinkande text – tänkte jag bokstavligen, "Nej, absolut inte! Det här ser ut som något från en hackarfilm på 1980-talet, och jag är definitivt inte tillräckligt smart för det här!" 😅 -Men här är vad jag önskar att någon hade sagt till mig då, och vad jag säger till dig nu: kommandoraden är inte läskig – det är faktiskt som att ha en direkt konversation med din dator. Tänk på det som skillnaden mellan att beställa mat via en fancy app med bilder och menyer (vilket är trevligt och enkelt) jämfört med att gå in på din favoritlokala restaurang där kocken vet precis vad du gillar och kan fixa något perfekt bara genom att du säger "överraska mig med något fantastiskt." +Men här är vad jag önskar att någon hade sagt till mig då, och som jag säger till dig just nu: kommandoraden är inte läskig – det är faktiskt som att ha en direkt konversation med din dator. Tänk på det som skillnaden mellan att beställa mat via en snygg app med bilder och menyer (vilket är trevligt och enkelt) jämfört med att gå in på din favoritlokala restaurang där kocken exakt vet vad du gillar och kan fixa något perfekt bara för att du säger "överraska mig med något fantastiskt." -Kommandoraden är där utvecklare känner sig som riktiga trollkarlar. Du skriver några till synes magiska ord (okej, det är bara kommandon, men de känns magiska!), trycker på enter, och BOOM – du har skapat hela projektstrukturer, installerat kraftfulla verktyg från hela världen, eller distribuerat din app på internet för miljontals att se. När du väl får en första smak av den kraften är det ärligt talat ganska beroendeframkallande! +Kommandoraden är platsen där utvecklare känner sig som riktiga trollkarlar. Du skriver några till synes magiska ord (okej, det är bara kommandon, men de känns magiska!), trycker på enter och BOOM – du har skapat hela projektstrukturer, installerat kraftfulla verktyg från hela världen eller distribuerat din app på internet för miljoner att se. När du får din första smak av den makten är det ärligt talat ganska beroendeframkallande! **Varför kommandoraden kommer bli ditt favoritverktyg:** -Medan grafiska gränssnitt är utmärkta för många uppgifter, utmärker sig kommandoraden i automatisering, precision och hastighet. Många utvecklingsverktyg fungerar primärt via kommandoradsgränssnitt, och att lära sig använda dem effektivt kan dramatiskt öka din produktivitet. +Medan grafiska gränssnitt är bra för många uppgifter, utmärker sig kommandoraden på automatisering, precision och hastighet. Många utvecklingsverktyg fungerar huvudsakligen via kommandoradsgränssnitt, och att lära sig använda dem effektivt kan dramatiskt förbättra din produktivitet. ```bash # Steg 1: Skapa och navigera till projektmappen @@ -601,11 +603,11 @@ cd my-awesome-website ``` **Det här gör koden:** -- **Skapa** en ny katalog som heter "my-awesome-website" för ditt projekt -- **Navigera** in i den nyss skapade katalogen för att börja arbeta +- **Skapar** en ny mapp som heter "my-awesome-website" för ditt projekt +- **Navigerar** in i den nyss skapade mappen för att börja arbeta ```bash -# Steg 2: Initiera projektet med package.json +# Steg 2: Initiera projekt med package.json npm init -y # Installera moderna utvecklingsverktyg @@ -613,11 +615,11 @@ npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Steg för steg händer följande:** -- **Initiera** ett nytt Node.js-projekt med standardinställningar via `npm init -y` -- **Installera** Vite som ett modernt byggverktyg för snabb utveckling och produktionsbyggen -- **Lägg till** Prettier för automatisk kodformatering och ESLint för kodkvalitetskontroller -- **Använd** flaggan `--save-dev` för att markera dessa som endast utvecklingsberoenden +**Steg för steg, så här går det till:** +- **Initierar** ett nytt Node.js-projekt med standardinställningar med `npm init -y` +- **Installerar** Vite som ett modernt byggverktyg för snabb utveckling och produktion +- **Lägger till** Prettier för automatisk kodformatering och ESLint för kvalitetskontroller +- **Använder** flaggan `--save-dev` för att markera dessa som utvecklingsberoenden ```bash # Steg 3: Skapa projektstruktur och filer @@ -630,95 +632,95 @@ npx vite **I ovanstående har vi:** - **Organiserat** vårt projekt genom att skapa separata mappar för källkod och resurser -- **Genererat** en grundläggande HTML-fil med korrekt dokumentstruktur -- **Startat** Vites utvecklingsserver för live-uppdatering och hot module replacement +- **Skapat** en enkel HTML-fil med korrekt dokumentstruktur +- **Startat** Vite utvecklingsserver för live-uppdatering och varm modulbyte #### Viktiga kommandoradsverktyg för webbutveckling | Verktyg | Syfte | Varför du behöver det | -|---------|-------|-----------------------| -| **[Git](https://git-scm.com/)** | Versionskontroll | Spåra ändringar, samarbeta och säkerhetskopiera ditt arbete | -| **[Node.js & npm](https://nodejs.org/)** | JavaScript-runtime & pakethanterare | Köra JavaScript utanför webbläsare, installera moderna utvecklingsverktyg | -| **[Vite](https://vitejs.dev/)** | Byggverktyg & utvecklingsserver | Super-snabb utveckling med hot module replacement | -| **[ESLint](https://eslint.org/)** | Kodkvalitet | Hitta och åtgärda problem i JavaScript automatiskt | -| **[Prettier](https://prettier.io/)** | Kodformatering | Håll din kod konsekvent formaterad och lättläst | +|---------|-------|----------------------| +| **[Git](https://git-scm.com/)** | Versionshantering | Spåra förändringar, samarbeta med andra, säkerhetskopiera ditt arbete | +| **[Node.js & npm](https://nodejs.org/)** | JavaScript-runtime & paket-hantering | Kör JavaScript utanför webbläsare, installera moderna utvecklingsverktyg | +| **[Vite](https://vitejs.dev/)** | Byggverktyg & utvecklingsserver | Lynsnabb utveckling med varm modulbyte | +| **[ESLint](https://eslint.org/)** | Kodkvalitet | Hitta och fixa automatiskt problem i din JavaScript-kod | +| **[Prettier](https://prettier.io/)** | Kodformatering | Håll din kod konsekvent formaterad och läsbar | #### Plattformsspecifika alternativ **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** – Modern och funktionsrik terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 – Kraftfull skriptmiljö -- **[Kommandotolken](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 – Traditionell Windows-kommandorad +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Modern och funktionsrik terminal +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftfull skriptmiljö +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditionell Windows-kommandorad **macOS:** -- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 – Inbyggd terminalapplikation -- **[iTerm2](https://iterm2.com/)** – Förbättrad terminal med avancerade funktioner +- **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Inbyggd terminalapplikation +- **[iTerm2](https://iterm2.com/)** - Förbättrad terminal med avancerade funktioner **Linux:** -- **[Bash](https://www.gnu.org/software/bash/)** 💻 – Standard Linux-skal -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** – Avancerad terminalemulator +- **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux-skal +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Avancerad terminalemulator > 💻 = Förinstallerad i operativsystemet -> 🎯 **Lärandeväg**: Börja med grundläggande kommandon som `cd` (byt katalog), `ls` eller `dir` (lista filer) och `mkdir` (skapa mapp). Öva med moderna arbetsflödeskommandon som `npm install`, `git status` och `code .` (öppnar aktuell katalog i VS Code). När du blir bekväm kommer du naturligt att lära dig mer avancerade kommandon och automatiseringstekniker. +> 🎯 **Inlärningsväg:** Börja med grundläggande kommandon som `cd` (byt mapp), `ls` eller `dir` (lista filer) och `mkdir` (skapa mapp). Öva sedan på moderna arbetsflödeskommandon som `npm install`, `git status` och `code .` (öppnar aktuell mapp i VS Code). När du blir mer bekväm plockar du naturligt upp mer avancerade kommandon och automatiseringstekniker. ### Dokumentation: Din alltid tillgängliga lärarmästare -Okej, låt mig dela en liten hemlighet som kommer få dig att må mycket bättre över att vara nybörjare: även de mest erfarna utvecklarna spenderar en stor del av sin tid på att läsa dokumentation. Och det är inte för att de inte vet vad de gör – det är faktiskt ett tecken på visdom! +Okej, låt mig dela med mig av en liten hemlighet som kommer få dig att känna dig mycket bättre över att vara nybörjare: även de mest erfarna utvecklarna spenderar en stor del av sin tid på att läsa dokumentation. Och det är inte för att de inte vet vad de gör – det är faktiskt ett tecken på visdom! -Tänk på dokumentation som tillgång till världens mest tålmodiga, kunniga lärare som är tillgängliga dygnet runt. Sitter du fast med ett problem klockan 2 på natten? Dokumentationen finns där med en varm virtuell kram och exakt det svar du behöver. Vill du lära dig om en cool ny funktion som alla pratar om? Dokumentationen har din rygg med steg-för-steg-exempel. Försöker du förstå varför något fungerar som det gör? Du gissade rätt – dokumentationen är redo att förklara det på ett sätt som äntligen gör att det klickar! +Tänk på dokumentation som att ha tillgång till världens mest tålmodiga och kunniga lärare som är tillgängliga dygnet runt. Fastnar du i ett problem klockan 2 på natten? Dokumentationen finns där med en varm virtuell kram och exakt det svar du behöver. Vill du lära dig om en cool ny funktion som alla pratar om? Dokumentationen hjälper dig med steg-för-steg-exempel. Försöker du förstå varför något fungerar som det gör? Du gissade rätt – dokumentationen är redo att förklara så att det äntligen klickar! -Här är något som helt förändrade min syn: webbutvecklingsvärlden rör sig otroligt snabbt, och ingen (menar verkligen ingen!) kan allt utantill. Jag har sett seniora utvecklare med 15+ års erfarenhet slå upp grundläggande syntax, och vet du vad? Det är inte pinsamt – det är smart! Det handlar inte om att ha perfekt minne, utan om att veta var man snabbt hittar pålitliga svar och förstå hur man använder dem. +Här är något som helt förändrade mitt perspektiv: webbutvecklingsvärlden rör sig oerhört snabbt och ingen (jag menar verkligen ingen!) håller allt i huvudet. Jag har sett seniora utvecklare med 15+ års erfarenhet slå upp grundläggande syntax, och vet du vad? Det är inte pinsamt – det är smart! Det handlar inte om att ha ett perfekt minne; det handlar om att veta var man snabbt hittar pålitliga svar och förstå hur man tillämpar dem. **Här händer den verkliga magin:** -Professionella utvecklare tillbringar en stor del av sin tid med att läsa dokumentation – inte för att de inte vet vad de gör, utan för att landskapet inom webbutveckling förändras så snabbt att det kräver kontinuerligt lärande. Bra dokumentation hjälper dig förstå inte bara *hur* något används, utan *varför* och *när* det ska användas. +Professionella utvecklare spenderar en betydande del av sin tid på att läsa dokumentation – inte för att de inte vet vad de gör, utan för att webbutvecklingslandskapet förändras så snabbt att det krävs ständig inlärning för att hålla sig uppdaterad. Bra dokumentation hjälper dig att förstå inte bara *hur* man använder något, utan även *varför* och *när* man ska använda det. #### Viktiga dokumentationsresurser **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Guldkällan för dokumentation om webteknik +- Guldkällan för dokumentation om webteknologier - Omfattande guider för HTML, CSS och JavaScript -- Innehåller information om webbläsarkompatibilitet -- Har praktiska exempel och interaktiva demoer +- Inkluderar webbläsarkompatibilitetsinformation +- Praktiska exempel och interaktiva demos **[Web.dev](https://web.dev)** (av Google) -- Moderna bästa praxis för webbutveckling +- Moderna bästa metoder för webbutveckling - Guider för prestandaoptimering - Tillgänglighet och inkluderande designprinciper - Fallstudier från verkliga projekt **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** - Utvecklarresurser för Edge-webbläsaren -- Guider för progressiva webbappar -- Insikter om plattformsoberoende utveckling +- Guider för Progressive Web Apps +- Insikter i plattformsoberoende utveckling **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturerade lärandekurser +- Strukturerade inlärningsplaner - Videokurser från branschexperter -- Praktiska kodningsövningar +- Praktiska kodövningar -> 📚 **Studietips**: Försök inte memorera dokumentationen – lär dig istället navigera effektivt. Bokmärk ofta använda referenser och öva på att använda sökfunktioner för att snabbt hitta specifik information. +> 📚 **Studietips:** Försök inte att memorera dokumentation – lär dig istället att navigera den effektivt. Bokmärk ofta använda referenser och öva på att använda sökfunktioner för att snabbt hitta specifik information. -### 🔧 **Verktygsmästerskap: Vad tilltalar dig mest?** +### 🔧 **Verktygsmästerskap: Vad tilltalar dig?** -**Ta en stund att fundera:** -- Vilket verktyg ser du mest fram emot att testa först? (Det finns inget fel svar!) -- Känns kommandoraden fortfarande skrämmande, eller är du nyfiken? -- Kan du tänka dig att använda webbläsarens DevTools för att kika bakom kulisserna på dina favoritwebbplatser? +**Ta en stund och fundera:** +- Vilket verktyg är du mest sugen på att prova först? (Det finns inget fel svar!) +- Känner du fortfarande att kommandoraden är skrämmande, eller är du nyfiken på den? +- Kan du föreställa dig att använda webbläsarens DevTools för att kika bakom kulisserna på dina favoritwebbplatser? ```mermaid pie title "Utvecklartid som spenderas med verktyg" "Kodredigerare" : 40 "Webbläsartestning" : 25 "Kommandorad" : 15 - "Läser dokumentation" : 15 + "Läsa dokumentation" : 15 "Felsökning" : 5 ``` -> **Rolig insikt**: De flesta utvecklare tillbringar ungefär 40 % av sin tid i sin kodredigerare, men märker hur mycket tid som går åt till testning, lärande och problemlösning. Programmering handlar inte bara om att skriva kod – det handlar om att skapa upplevelser! +> **Rolig insikt**: De flesta utvecklare spenderar ungefär 40% av sin tid i sin kodredigerare, men lägg märke till hur mycket tid som går åt till testning, lärande och problemlösning. Programmering handlar inte bara om att skriva kod – det handlar om att skapa upplevelser! -✅ **Att fundera på**: Här är något intressant att tänka på – hur tror du att verktygen för att bygga webbplatser (utveckling) skiljer sig från verktygen för att designa hur de ser ut (design)? Det är som skillnaden mellan att vara en arkitekt som designar ett vackert hus och en entreprenör som faktiskt bygger det. Båda är avgörande, men behöver olika verktygslådor! Den typen av tänkande hjälper dig verkligen att se helheten av hur webbplatser blir till. +✅ **Tankeväckande**: Här är något intressant att fundera på – hur tror du verktygen för att bygga webbplatser (utveckling) skiljer sig från verktyg för att designa hur de ser ut (design)? Det är som skillnaden mellan en arkitekt som designar ett vackert hus och en entreprenör som faktiskt bygger det. Båda är avgörande, men behöver olika verktygslådor! Den typen av tänkande hjälper dig verkligen att se den större bilden av hur webbplatser blir till. ## GitHub Copilot Agent-utmaning 🚀 @@ -726,7 +728,7 @@ Använd Agent-läget för att slutföra följande utmaning: **Beskrivning:** Utforska funktionerna i en modern kodredigerare eller IDE och visa hur den kan förbättra ditt arbetsflöde som webbutvecklare. -**Uppmaning:** Välj en kodredigerare eller IDE (som Visual Studio Code, WebStorm eller en molnbaserad IDE). Lista tre funktioner eller tillägg som hjälper dig att skriva, debugga eller underhålla kod mer effektivt. Ge för varje en kort förklaring av hur det gynnar ditt arbetsflöde. +**Uppmaning:** Välj en kodredigerare eller IDE (som Visual Studio Code, WebStorm eller en molnbaserad IDE). Lista tre funktioner eller tillägg som hjälper dig att skriva, felsöka eller underhålla kod mer effektivt. Ge till varje en kort förklaring av hur det gynnar ditt arbetsflöde. --- @@ -734,50 +736,50 @@ Använd Agent-läget för att slutföra följande utmaning: **Okej, detektiv, redo för ditt första fall?** -Nu när du har fått den här fantastiska grunden, har jag ett äventyr som kommer hjälpa dig se hur otroligt mångsidig och fascinerande programmeringsvärlden egentligen är. Och lyssna – det handlar inte om att skriva kod än, så ingen press! Tänk dig att du är en detektiv inom programmeringsspråk på ditt allra första spännande fall! +Nu när du har denna fantastiska grund, har jag ett äventyr som ska hjälpa dig att se hur otroligt mångsidig och fascinerande programmeringsvärlden verkligen är. Och lyssna – det här handlar inte om att skriva kod än, så det är ingen press! Tänk på dig själv som en detektiv av programmeringsspråk på ditt allra första spännande fall! -**Din uppgift, om du väljer att acceptera den:** -1. **Bli en språkupptäckare**: Välj tre programmeringsspråk från helt olika världar – kanske ett som bygger webbplatser, ett som skapar mobilappar, och ett som analyserar data för forskare. Hitta exempel på samma enkla uppgift skrivna i varje språk. Jag lovar att du kommer bli helt amazed över hur olika de kan se ut fast de gör exakt samma sak! +**Ditt uppdrag, om du väljer att acceptera det:** +1. **Bli en språkupptäckare**: Välj tre programmeringsspråk från helt olika universum – kanske ett som bygger webbplatser, ett som skapar mobilappar och ett som analyserar data för forskare. Hitta exempel på samma enkla uppgift skrivna i varje språk. Jag lovar, du kommer bli helt amazed över hur olika de kan se ut fast de gör exakt samma sak! -2. **Upptäck deras ursprung**: Vad gör varje språk speciellt? Här är en cool grej – varje programmeringsspråk skapades för att någon tänkte, "Vet du vad? Det måste finnas ett bättre sätt att lösa just det här problemet." Kan du lista ut vilka problem det var? Några av de här historierna är verkligen fascinerande! +2. **Upptäck deras ursprungshistorier**: Vad gör varje språk speciellt? Här är en cool fakta – varje programmeringsspråk skapades för att någon tänkte "Vet du vad? Det måste finnas ett bättre sätt att lösa just det här problemet." Kan du lista ut vilka problem det var? Vissa av historierna är verkligen fascinerande! -3. **Möt communityn**: Kolla hur välkomnande och passionerad varje språk community är. Vissa har miljontals utvecklare som delar kunskap och hjälper varandra, andra är mindre men otroligt sammansvetsade och stödjande. Du kommer älska att se de olika personligheterna i dessa communityn! +3. **Möt gemenskaperna**: Kolla hur välkomnande och passionerade varje språks community är. Vissa har miljontals utvecklare som delar kunskap och hjälper varandra, andra är mindre men otroligt sammansvetsade och stöttande. Du kommer älska att se de olika personligheterna i dessa gemenskaper! -4. **Lyssna på magkänslan**: Vilket språk känns mest tillgängligt för dig just nu? Stressa inte över att göra "det perfekta" valet – lita bara på din magkänsla! Det finns ärligt talat inget fel svar och du kan alltid utforska andra senare. +4. **Följ magkänslan**: Vilket språk känns mest tillgängligt för dig just nu? Stressa inte över att göra det "perfekta" valet – lita på din instinkt! Det finns ärligt talat inget fel svar här, och du kan alltid utforska andra senare. -**Bonusdetektivarbete**: Se om du kan ta reda på vilka stora webbplatser eller appar som är byggda med varje språk. Jag lovar att du kommer bli chockad över att få veta vad som driver Instagram, Netflix eller det där mobilsspelet du inte kan sluta spela! +**Bonusdetektivarbete**: Försök ta reda på vilka stora webbplatser eller appar som är byggda med varje språk. Jag garanterar att du kommer bli förvånad över att lära dig vad som driver Instagram, Netflix eller det där mobil spelet du inte kan sluta spela! -> 💡 **Kom ihåg**: Du försöker inte bli expert i något av dessa språk idag. Du lär bara känna kvarteren innan du bestämmer dig för var du vill slå dig ner. Ta din tid, ha kul och låt nyfikenheten leda dig! +> 💡 **Kom ihåg**: Du försöker inte bli expert på något av dessa språk idag. Du lär bara känna området innan du bestämmer var du vill slå dig ner. Ta din tid, ha kul och låt nyfikenheten leda dig! -## Låt oss fira det du upptäckt! +## Låt oss fira det du har upptäckt! -Holy moly, du har tagit till dig så mycket otrolig information idag! Jag är verkligen peppad på att se hur mycket av denna fantastiska resa som fastnat hos dig. Och kom ihåg – det här är inget test där du måste göra allt perfekt. Det här är mer som en fest för allt häftigt du lärt dig om den fascinerande världen du är på väg att dyka in i! +Herregud, du har fått in så mycket otrolig information idag! Jag är uppriktigt glad att se hur mycket av den här fantastiska resan som fastnat hos dig. Och kom ihåg – det här är inget prov där du måste få allt perfekt. Det är snarare en fest för allt häftigt du har lärt dig om den här fascinerande världen du snart ska dyka ner i! -[Ta efter-lektionen-testet](https://ff-quizzes.netlify.app/web/) -## Review & Självstudier +[Ta quizet efter lektionen](https://ff-quizzes.netlify.app/web/) -**Ta din tid att utforska och ha kul med det!** +## Repetition & Självstudier -Du har täckt mycket idag, och det är något att vara stolt över! Nu kommer den roliga delen – att utforska de ämnen som väckte din nyfikenhet. Kom ihåg, det här är inget läxor – det är ett äventyr! +**Ta din tid att utforska och ha roligt med det!** +Du har täckt mycket idag, och det är något att vara stolt över! Nu kommer den roliga delen – att utforska de ämnen som väckte din nyfikenhet. Kom ihåg, det här är inte läxor – det är ett äventyr! -**Fördjupa dig i det som intresserar dig:** +**Gå djupare in i det som fascinerar dig:** **Prova på programmeringsspråk:** -- Besök de officiella webbplatserna för 2-3 språk som fångade ditt intresse. Varje språk har sin egen personlighet och historia! -- Testa några online kodningsmiljöer som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Var inte rädd för att experimentera – du kan inte förstöra något! -- Läs om hur ditt favoritprogrammeringsspråk kom till. Seriöst, några av dessa ursprungshistorier är fascinerande och hjälper dig att förstå varför språken fungerar som de gör. +- Besök de officiella webbplatserna för 2-3 språk som fångade din uppmärksamhet. Varje språk har sin egen personlighet och historia! +- Testa några online kod-lekplatser som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Var inte rädd för att experimentera – du kan inte förstöra något! +- Läs om hur ditt favoritspråk kom till. Allvarligt talat, vissa av de här ursprungshistorierna är fascinerande och hjälper dig att förstå varför språken fungerar som de gör. **Bli bekväm med dina nya verktyg:** - Ladda ner Visual Studio Code om du inte redan gjort det – det är gratis och du kommer att älska det! -- Spendera några minuter på att bläddra i Extensions-marknaden. Det är som en app-butik för din kodredigerare! -- Öppna din webbläsares utvecklarverktyg och klicka runt. Oroa dig inte för att förstå allt – lär dig bara var saker finns. +- Spendera några minuter med att bläddra i Extensions-marknaden. Det är som en appbutik för din kodredigerare! +- Öppna din webbläsares Developer Tools och klicka runt lite. Oroa dig inte för att förstå allt – lär bara känna vad som finns där. -**Gå med i communityn:** -- Följ några utvecklarcommunities på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringscommunityn är otroligt välkomnande för nybörjare! -- Titta på nybörjarvänliga kodningsvideor på YouTube. Det finns så många fantastiska skapare där ute som minns hur det var att börja. -- Överväg att gå med i lokala meetups eller online-communities. Tro mig, utvecklare älskar att hjälpa nybörjare! +**Gå med i gemenskapen:** +- Följ några utvecklargemenskaper på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringsgemenskapen är otroligt mottaglig för nykomlingar! +- Titta på några nybörjarvänliga kodningsvideor på YouTube. Det finns så många fantastiska skapare där ute som minns hur det var att börja. +- Överväg att gå med i lokala meetups eller online-gemenskaper. Tro mig, utvecklare älskar att hjälpa nybörjare! -> 🎯 **Lyssna, det här vill jag att du ska minnas**: Du förväntas inte bli en kodningsmagiker över en natt! Just nu lär du bara känna denna fantastiska nya värld som du ska bli en del av. Ta din tid, njut av resan, och kom ihåg – varje enda utvecklare du beundrar har en gång suttit precis där du är nu, känt sig exalterad och kanske lite överväldigad. Det är helt normalt, och det betyder att du gör rätt! +> 🎯 **Lyssna, här är vad jag vill att du ska komma ihåg**: Du förväntas inte bli en kodningsmagiker över en natt! Just nu håller du bara på att lära känna den här fantastiska nya världen som du snart ska vara en del av. Ta din tid, njut av resan, och kom ihåg – varje utvecklare du beundrar satt en gång precis där du är nu, kände sig exalterad och kanske lite överväldigad. Det är helt normalt, och det betyder att du gör rätt! @@ -785,48 +787,48 @@ Du har täckt mycket idag, och det är något att vara stolt över! Nu kommer de [Reading the Docs](assignment.md) -> 💡 **En liten puff för din uppgift**: Jag skulle verkligen vilja se dig utforska några verktyg som vi inte har täckt än! Hoppa över redigerare, webbläsare och kommandoradsverktyg som vi redan gått igenom – det finns en hel fantastisk värld av utvecklingsverktyg där ute som bara väntar på att bli upptäckta. Leta efter de som är aktivt underhållna och har livliga, hjälpsamma communities (de brukar ha de bästa guiderna och de mest stödjande människorna när du ofrånkomligt fastnar och behöver en hjälpande hand). +> 💡 **Lite push för din uppgift**: Jag skulle verkligen vilja se dig utforska verktyg vi ännu inte täckt! Hoppa över redigerare, webbläsare och kommandoradsverktyg som vi redan pratat om – det finns en hel fantastisk värld av utvecklingsverktyg där ute som bara väntar på att bli upptäckta. Leta efter sådana som aktivt underhålls och har livliga, hjälpsamma gemenskaper (de brukar ha de bästa guiderna och de mest stöttande människorna när du oundvikligen fastnar och behöver en vänlig hand). --- ## 🚀 Din programmeringsresa tidslinje -### ⚡ **Vad du kan göra de kommande 5 minuterna** -- [ ] Bokmärk 2-3 webbplatser för programmeringsspråk som fångade ditt intresse +### ⚡ **Vad du kan göra de närmaste 5 minuterna** +- [ ] Bokmärk 2-3 webbplatser för programmeringsspråk som fångade din uppmärksamhet - [ ] Ladda ner Visual Studio Code om du inte redan gjort det -- [ ] Öppna din webbläsares DevTools (F12) och klicka runt på någon webbplats -- [ ] Gå med i en programmeringscommunity (Dev.to, Reddit r/webdev, eller Stack Overflow) +- [ ] Öppna din webbläsares DevTools (F12) och klicka runt på en webbplats +- [ ] Gå med i en programmeringsgemenskap (Dev.to, Reddit r/webdev eller Stack Overflow) -### ⏰ **Vad du kan åstadkomma denna timme** -- [ ] Gör post-lektions quiz och reflektera över dina svar -- [ ] Installera GitHub Copilot-tillägget i VS Code -- [ ] Testa ett "Hello World"-exempel i 2 olika programmeringsspråk online -- [ ] Titta på en "En dag i livet av en utvecklare"-video på YouTube -- [ ] Börja ditt detektivarbete om programmeringsspråk (från utmaningen) +### ⏰ **Vad du kan åstadkomma den här timmen** +- [ ] Gör quizzen efter lektionen och reflektera över dina svar +- [ ] Ställ in VS Code med GitHub Copilot-tillägget +- [ ] Prova ett "Hello World"-exempel i 2 olika programmeringsspråk online +- [ ] Titta på en "En dag i en utvecklares liv" video på YouTube +- [ ] Börja din programmeringsspråksdetektivarbete (från utmaningen) ### 📅 **Ditt veckolånga äventyr** -- [ ] Slutför uppgiften och utforska 3 nya utvecklingsverktyg +- [ ] Gör klart uppgiften och utforska 3 nya utvecklingsverktyg - [ ] Följ 5 utvecklare eller programmeringskonton på sociala medier -- [ ] Försök bygga något litet i CodePen eller Replit (till och med "Hello, [Ditt Namn]!") -- [ ] Läs ett blogginlägg av en utvecklare om deras kodningsresa +- [ ] Försök bygga något litet i CodePen eller Replit (även bara "Hello, [Ditt namn]!") +- [ ] Läs ett utvecklarblogginlägg om någons kodningsresa - [ ] Gå med i ett virtuellt meetup eller titta på ett programmeringsföredrag -- [ ] Börja lära dig ditt valda språk med online-handledning +- [ ] Börja lära dig ditt valda språk med online-tutorials -### 🗓️ **Din månadslånga förändring** +### 🗓️ **Din månadslånga förvandling** - [ ] Bygg ditt första lilla projekt (ännu en enkel webbsida räknas!) -- [ ] Bidra till ett open source-projekt (börja med dokumentationsfixar) -- [ ] Mentor någon som precis börjat sin programmeringsresa +- [ ] Bidra till ett open-source-projekt (börja med dokumentationsfixar) +- [ ] Mentorskap någon som precis börjat sin programmeringsresa - [ ] Skapa din utvecklarportfolio-webbplats -- [ ] Koppla ihop med lokala utvecklarcommunities eller studiegrupper +- [ ] Koppla ihop med lokala utvecklargemenskaper eller studiegrupper - [ ] Börja planera din nästa lärandemilstolpe ### 🎯 **Slutlig reflektion** -**Innan du går vidare, ta en stund att fira:** -- Vad är en sak med programmering som fick dig att känna dig exalterad idag? +**Innan du går vidare, ta en stund för att fira:** +- Vad är en sak med programmering som gjorde dig exalterad idag? - Vilket verktyg eller koncept vill du utforska först? -- Hur känner du om att börja denna programmeringsresa? -- Vad är en fråga du skulle vilja ställa en utvecklare just nu? +- Hur känns det att starta denna programmeringsresa? +- Vilken fråga skulle du vilja ställa en utvecklare just nu? ```mermaid journey @@ -834,21 +836,21 @@ journey section Idag Nyfiken: 3: You Överväldigad: 4: You - Exalterad: 5: You + Uppspelt: 5: You section Denna Vecka Utforskar: 4: You - Lär Sig: 5: You - Kopplar Ihop: 4: You + Lär: 5: You + Kopplar ihop: 4: You section Nästa Månad Bygger: 5: You Självsäker: 5: You Hjälper Andra: 5: You ``` -> 🌟 **Kom ihåg**: Varje expert var en gång en nybörjare. Varje seniorutvecklare har känt precis som du gör just nu – exalterad, kanske lite överväldigad, och definitivt nyfiken på vad som är möjligt. Du är i fantastisk sällskap, och denna resa kommer att bli otrolig. Välkommen till den underbara världen av programmering! 🎉 +> 🌟 **Kom ihåg**: Varje expert var en gång en nybörjare. Varje senior utvecklare har känt precis som du gör nu – exalterad, kanske lite överväldigad, och definitivt nyfiken på vad som är möjligt. Du är i fantastiskt sällskap, och den här resan kommer att bli otrolig. Välkommen till den underbara världen av programmering! 🎉 --- **Ansvarsfriskrivning**: -Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var vänlig observera att automatiska översättningar kan innehålla fel eller brister. Originaldokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell humanöversättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning. +Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungsspråk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller felaktiga tolkningar som uppstår från användningen av denna översättning. \ No newline at end of file diff --git a/translations/sv/AGENTS.md b/translations/sv/AGENTS.md index b807c3c2b..d38f056b0 100644 --- a/translations/sv/AGENTS.md +++ b/translations/sv/AGENTS.md @@ -2,36 +2,36 @@ ## Projektöversikt -Detta är ett utbildningsbibliotek för att lära ut grunderna i webbapputveckling för nybörjare. Kursplanen är en omfattande 12-veckors kurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML. +Detta är ett utbildningsprogramsförråd för att lära ut grunderna i webbdesign till nybörjare. Kursplanen är en omfattande 12-veckorskurs utvecklad av Microsoft Cloud Advocates, med 24 praktiska lektioner som täcker JavaScript, CSS och HTML. ### Viktiga komponenter - **Utbildningsinnehåll**: 24 strukturerade lektioner organiserade i projektbaserade moduler -- **Praktiska projekt**: Terrarium, Typ-spel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent -- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (före/efter lektion) -- **Fler språkstöd**: Automatiska översättningar för 50+ språk via GitHub Actions +- **Praktiska projekt**: Terrarium, Typningsspel, Webbläsartillägg, Rymdspel, Bankapp, Kodredigerare och AI-chattassistent +- **Interaktiva quiz**: 48 quiz med 3 frågor vardera (för- och efter lektion) +- **Flerspråkigt stöd**: Automatiska översättningar för 50+ språk via GitHub Actions - **Teknologier**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (för AI-projekt) ### Arkitektur -- Utbildningsbibliotek med lektionbaserad struktur +- Utbildningsförråd med lektionbaserad struktur - Varje lektionsmapp innehåller README, kodexempel och lösningar -- Självständiga projekt i separata kataloger (quiz-app, olika lektionsprojekt) +- Fristående projekt i separata kataloger (quiz-app, olika lektionsprojekt) - Översättningssystem med GitHub Actions (co-op-translator) -- Dokumentation serveras via Docsify och finns som PDF +- Dokumentation serveras via Docsify och finns tillgänglig som PDF ## Installationskommandon -Detta bibliotek är främst för att konsumera utbildningsinnehåll. För att arbeta med specifika projekt: +Detta förråd är främst för konsumtion av utbildningsinnehåll. För arbete med specifika projekt: -### Huvudbibliotekets installation +### Huvudförrådets installation ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git cd Web-Dev-For-Beginners ``` -### Quiz App Setup (Vue 3 + Vite) +### Quiz App installation (Vue 3 + Vite) ```bash cd quiz-app @@ -59,7 +59,7 @@ npm install # Följ webbläsarspecifika instruktioner för att ladda tillägg ``` -### Rymdspelsprojekt +### Rymdspelprojekt ```bash cd 6-space-game/solution @@ -76,45 +76,45 @@ pip install openai python api.py ``` -## Utvecklingsarbetsflöde +## Utvecklingsflöde ### För innehållsbidragare -1. **Forka biblioteket** till ditt GitHub-konto +1. **Fork:a förrådet** till ditt GitHub-konto 2. **Klona din fork** lokalt -3. **Skapa en ny branch** för dina ändringar +3. **Skapa en ny gren** för dina ändringar 4. Gör ändringar i lektionsinnehåll eller kodexempel -5. Testa eventuella kodändringar i relevanta projektmappar -6. Skicka pull requests enligt bidragsriktlinjer +5. Testa eventuella kodändringar i relevanta projektkataloger +6. Skicka in pull requests enligt bidragsriktlinjerna ### För elever -1. Forka eller klona biblioteket -2. Gå igenom lektionsmappar i ordning +1. Fork:a eller klona förrådet +2. Navigera till lektionskataloger i tur och ordning 3. Läs README-filer för varje lektion -4. Slutför för-lektionsquiz på https://ff-quizzes.netlify.app/web/ -5. Arbeta igenom kodexempel i lektionsmappar -6. Slutför uppgifter och utmaningar -7. Gör efter-lektionsquiz +4. Gör för-quiz på https://ff-quizzes.netlify.app/web/ +5. Arbeta igenom kodexempel i lektionsmapparna +6. Genomför uppgifter och utmaningar +7. Avsluta med efter-quiz ### Live-utveckling -- **Dokumentation**: Kör `docsify serve` i root (port 3000) -- **Quiz App**: Kör `npm run dev` i quiz-app-mappen -- **Projekt**: Använd VS Code Live Server-extension för HTML-projekt +- **Dokumentation**: Kör `docsify serve` i rotkatalogen (port 3000) +- **Quiz App**: Kör `npm run dev` i quiz-app-katalogen +- **Projekt**: Använd VS Codes Live Server-förlängning för HTML-projekt - **API-projekt**: Kör `npm start` i respektive API-katalog -## Testningsinstruktioner +## Testinstruktioner -### Quiz App testning +### Testning av Quiz App ```bash cd quiz-app npm run lint # Kontrollera kodstilproblem -npm run build # Verifiera att byggnationen lyckas +npm run build # Verifiera att byggandet lyckas ``` -### Bank API testning +### Testning av Bank API ```bash cd 7-bank-project/api @@ -124,12 +124,12 @@ node server.js # Verifiera att servern startar utan fel ### Allmän testmetod -- Detta är ett utbildningsbibliotek utan omfattande automatiserade tester -- Manuell testning fokuserar på: - - Kodexempel körs utan fel +- Detta är ett utbildningsförråd utan omfattande automatiska tester +- Manuella tester fokuserar på: + - Kodexempel som körs utan fel - Länkar i dokumentationen fungerar korrekt - - Projekt byggs utan problem - - Exempel följer bästa praxis + - Projekten byggs färdigt utan fel + - Exemplen följer bästa praxis ### Kontroll före inskickning @@ -144,7 +144,7 @@ node server.js # Verifiera att servern startar utan fel - Använd modern ES6+ syntax - Följ standard ESLint-konfigurationer i projekten -- Använd meningsfulla variabel- och funktionsnamn för utbildningsklarhet +- Använd meningsfulla variabel- och funktionsnamn för pedagogisk tydlighet - Lägg till kommentarer som förklarar koncept för elever - Formatera med Prettier där det är konfigurerat @@ -158,42 +158,42 @@ node server.js # Verifiera att servern startar utan fel ### Python - PEP 8 stilriktlinjer -- Klara, utbildningsanpassade kodexempel -- Typangivelser där det är hjälpsamt för lärande +- Klara, pedagogiska kodexempel +- Typangivelser där det är hjälpsamt för inlärning ### Markdown-dokumentation -- Tydlig rubrikstruktur -- Kodblock med språkspecifikation +- Klar rubrikhierarki +- Kodblock med språkangivelse - Länkar till ytterligare resurser -- Skärmdumpar och bilder i `images/`-mappar -- Alt-text för bilder för tillgänglighet +- Skärmdumpar och bilder i `images/`-kataloger +- Alternativtext för bilder för tillgänglighet ### Filorganisation -- Lektioner numrerade i ordning (1-getting-started-lessons, 2-js-basics, etc.) +- Lektioner numrerade sekventiellt (1-getting-started-lessons, 2-js-basics, osv) - Varje projekt har `solution/` och ofta `start/` eller `your-work/` kataloger -- Bilder lagras i lektons-specifika `images/`-mappar +- Bilder lagras i lektionsspecifika `images/` mappar - Översättningar i `translations/{language-code}/` struktur -## Bygg och distribution +## Build och Utplacering -### Quiz App distribution (Azure Static Web Apps) +### Quiz App-utplacering (Azure Static Web Apps) -quiz-app är konfigurerad för distribution till Azure Static Web Apps: +Quiz-appen är konfigurerad för utplacering på Azure Static Web Apps: ```bash cd quiz-app -npm run build # Skapar dist/ mapp -# Distribuerar via GitHub Actions-arbetsflöde vid push till main +npm run build # Skapar dist/ mappen +# Distribuerar via GitHub Actions arbetsflöde vid push till main ``` Azure Static Web Apps-konfiguration: -- **App-plats**: `/quiz-app` -- **Utdata-plats**: `dist` +- **Appplats**: `/quiz-app` +- **Utmatningsplats**: `dist` - **Workflow**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### Generering av PDF-dokumentation +### Generering av dokumentations-PDF ```bash npm install # Installera docsify-to-pdf @@ -211,52 +211,52 @@ docsify serve # Servera på localhost:3000 Varje projektkatalog kan ha egen byggprocess: - Vue-projekt: `npm run build` skapar produktionspaket -- Statisk projekt: Inget byggsteg, servera filer direkt +- Statiska projekt: Inget byggsteg, servera filer direkt -## Pull Request-riktlinjer +## Riktlinjer för Pull Requests ### Titelformat -Använd tydliga, beskrivande titlar som anger ändringsområde: +Använd klara, beskrivande titlar som anger ändringsområde: - `[Quiz-app] Lägg till nytt quiz för lektion X` -- `[Lesson-3] Fixar stavfel i terrarium-projekt` +- `[Lesson-3] Rätta stavfel i terrarium-projekt` - `[Translation] Lägg till spansk översättning för lektion 5` - `[Docs] Uppdatera installationsinstruktioner` ### Obligatoriska kontroller -Innan PR skickas in: +Innan PR skickas: 1. **Kodkvalitet**: - - Kör `npm run lint` i berörda projektmappar + - Kör `npm run lint` i berörda projektkataloger - Åtgärda alla lint-varningar och fel 2. **Byggverifiering**: - - Kör `npm run build` om tillämpligt - - Säkerställ att inga byggfel uppstår + - Kör `npm run build` där applicerbart + - Säkerställ inga byggfel -3. **Länkkontroll**: +3. **Länkverifiering**: - Testa alla markdown-länkar - Verifiera att bildreferenser fungerar 4. **Innehållsgranskning**: - Korrekturläs stavning och grammatik - Säkerställ att kodexempel är korrekta och pedagogiska - - Kontrollera att översättningar behåller ursprungligt budskap + - Verifiera att översättningar bevarar ursprunglig betydelse ### Bidragskrav -- Acceptera Microsoft CLA (automatisk kontroll vid första PR) +- Godkänn Microsoft CLA (automatisk kontroll vid första PR) - Följ [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) - Se [CONTRIBUTING.md](./CONTRIBUTING.md) för detaljerade riktlinjer -- Referera ärendenummer i PR-beskrivning vid behov +- Referera ärendenummer i PR-beskrivning vid tillämplighet ### Granskningsprocess - PR granskas av underhållare och community -- Utbildningsklarhet prioriteras +- Pedagogisk tydlighet prioriteras - Kodexempel ska följa aktuella bästa praxis -- Översättningar granskas för korrekthet och kulturell lämplighet +- Översättningar granskas för noggrannhet och kulturrelevans ## Översättningssystem @@ -265,13 +265,13 @@ Innan PR skickas in: - Använder GitHub Actions med co-op-translator workflow - Översätter automatiskt till 50+ språk - Källfiler i huvudkataloger -- Översatta filer i `translations/{language-code}/`-mappar +- Översatta filer i `translations/{language-code}/` kataloger -### Manuella förbättringar av översättning +### Lägga till manuell översättningsförbättring -1. Hitta filen i `translations/{language-code}/` -2. Gör förbättringar samtidigt som struktur bevaras -3. Säkerställ att kodexempel förblir funktionella +1. Hitta fil i `translations/{language-code}/` +2. Gör förbättringar utan att ändra struktur +3. Säkerställ att kodexempel förblir fungerande 4. Testa eventuellt lokaliserat quizinnehåll ### Översättningsmetadata @@ -289,87 +289,87 @@ CO_OP_TRANSLATOR_METADATA: --> ``` -## Felsökning och problemlösning +## Felsökning och Problemlösning ### Vanliga problem **Quiz-appen startar inte**: -- Kontrollera Node.js-version (v14+ rekommenderas) -- Ta bort `node_modules` och `package-lock.json`, kör `npm install` igen -- Kontrollera om porten är upptagen (standard: Vite använder port 5173) +- Kontrollera Node.js version (v14+ rekommenderas) +- Radera `node_modules` och `package-lock.json`, kör `npm install` igen +- Kontrollera portkonflikter (standard: Vite använder port 5173) -**API-server startar inte**: -- Verifiera att Node.js-version är minst (node >=10) -- Kontrollera om port är redan i bruk -- Säkerställ att alla beroenden är installerade med `npm install` +**API-servern startar inte**: +- Kontrollera att Node.js version är tillräcklig (node >=10) +- Kontrollera att porten inte redan används +- Säkerställ alla beroenden installerade med `npm install` **Webbläsartillägg laddas inte**: - Kontrollera att manifest.json är korrekt formaterad -- Kontrollera webbläsarkonsolen för fel -- Följ webbläsarspecifika installationsinstruktioner för tillägg +- Granska webbläsarkonsol för fel +- Följ webbläsarspecifika installationsanvisningar -**Problem med Python-chattprojektet**: -- Kontrollera att OpenAI-paketet är installerat: `pip install openai` -- Verifiera att GITHUB_TOKEN miljövariabel är satt -- Kontrollera GitHub Models åtkomsträttigheter +**Problem med Python-chattprojekt**: +- Säkerställ att OpenAI-paket är installerat: `pip install openai` +- Kontrollera att GITHUB_TOKEN miljövariabel är satt +- Granska GitHub Models åtkomstbehörigheter **Docsify serverar inte dokumentation**: - Installera docsify-cli globalt: `npm install -g docsify-cli` -- Kör från repository root-katalog +- Kör från förrådets rotkatalog - Kontrollera att `docs/_sidebar.md` finns ### Tips för utvecklingsmiljö -- Använd VS Code med Live Server-extension för HTML-projekt -- Installera ESLint och Prettier extensions för konsekvent formatering -- Använd webbläsarens DevTools för att debugga JavaScript +- Använd VS Code med Live Server-förlängning för HTML-projekt +- Installera ESLint och Prettier-förlängningar för konsekvent formatering +- Använd webbläsarens DevTools för JavaScript-felsökning - För Vue-projekt, installera Vue DevTools webbläsartillägg -### Prestandaöverväganden +### Prestandahänsyn -- Stort antal översatta filer (50+ språk) gör att fulla kloner blir stora -- Använd shallow clone om du bara arbetar med innehåll: `git clone --depth 1` -- Exkludera översättningar från sökningar när du arbetar med engelskt innehåll +- Stort antal översatta filer (50+ språk) gör fulla kloner stora +- Använd grundklon om du bara arbetar med innehåll: `git clone --depth 1` +- Exkludera översättningar från sökningar när du jobbar på engelskt innehåll - Byggprocesser kan vara långsamma vid första körning (npm install, Vite build) -## Säkerhetsöverväganden +## Säkerhetshänsyn ### Miljövariabler -- API-nycklar bör aldrig committas till repository +- API-nycklar ska aldrig checkas in i förrådet - Använd `.env`-filer (redan i `.gitignore`) -- Dokumentera erforderliga miljövariabler i projekt-README +- Dokumentera nödvändiga miljövariabler i projektens README-filer ### Python-projekt - Använd virtuella miljöer: `python -m venv venv` - Håll beroenden uppdaterade -- GitHub-tokens bör ha minimala nödvändiga rättigheter +- GitHub-tokens bör ha minimala nödvändiga behörigheter -### GitHub Models-åtkomst +### GitHub Models åtkomst - Personliga åtkomsttokens (PAT) krävs för GitHub Models -- Tokens bör sparas som miljövariabler -- Commita aldrig tokens eller inloggningsuppgifter +- Tokens ska sparas som miljövariabler +- Aldrig checka in tokens eller inloggningsuppgifter ## Ytterligare anteckningar ### Målgrupp -- Helt nybörjare inom webbappar -- Studenter och självlärande +- Kompletta nybörjare inom webbdesign +- Studenter och självstudier - Lärare som använder kursplanen i klassrum -- Innehållet är utformat för tillgänglighet och stegvis kompetensuppbyggnad +- Innehållet är utformat för tillgänglighet och gradvis färdighetsutveckling ### Pedagogisk filosofi - Projektbaserat lärande - Frekventa kunskapskontroller (quiz) -- Praktiska kodövningar -- Exempel från verkliga tillämpningar +- Praktiska kodningsövningar +- Exempel på verkliga tillämpningar - Fokus på grunder innan ramverk -### Underhåll av repository +### Förrådets underhåll - Aktiv community av elever och bidragsgivare - Regelbundna uppdateringar av beroenden och innehåll @@ -378,31 +378,31 @@ CO_OP_TRANSLATOR_METADATA: ### Relaterade resurser -- [Microsoft Learn moduler](https://docs.microsoft.com/learn/) -- [Student Hub resurser](https://docs.microsoft.com/learn/student-hub/) +- [Microsoft Learn-moduler](https://docs.microsoft.com/learn/) +- [Student Hub-resurser](https://docs.microsoft.com/learn/student-hub/) - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) rekommenderas för elever -- Ytterligare kurser: Generativ AI, Data Science, ML, IoT kursplaner finns +- Ytterligare kurser: Generativ AI, Data Science, ML, IoT kursplaner tillgängliga ### Arbeta med specifika projekt -För detaljerade instruktioner om individuell projekt, se README-filer i: -- `quiz-app/README.md` - Vue 3 quiz-app +För detaljerade instruktioner om enskilda projekt, se README-filer i: +- `quiz-app/README.md` - Vue 3 quiz-applikation - `7-bank-project/README.md` - Bankapplikation med autentisering - `5-browser-extension/README.md` - Webbläsartilläggsutveckling -- `6-space-game/README.md` - Canvas-baserat spel -- `9-chat-project/README.md` - AI-chattassistentprojekt +- `6-space-game/README.md` - Canvas-baserat spelutveckling +- `9-chat-project/README.md` - AI chattassistentprojekt ### Monorepo-struktur -Även om detta inte är ett traditionellt monorepo, innehåller detta bibliotek flera oberoende projekt: +Även om det inte är ett traditionellt monorepo innehåller detta förråd flera oberoende projekt: - Varje lektion är självständig -- Projekt delar inga beroenden -- Arbeta med enskilda projekt utan att påverka andra -- Klona hela repot för full utbildningsupplevelse +- Projekten delar inte beroenden +- Arbeta på individuella projekt utan att påverka andra +- Klona hela förrådet för hela kursplanens upplevelse --- -**Ansvarsfriskrivning**: -Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet bör du vara medveten om att automatiska översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungsspråk ska betraktas som den auktoritativa källan. För viktig information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår vid användning av denna översättning. +**Ansvarsfriskrivning**: +Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var vänlig observera att automatiska översättningar kan innehålla fel eller brister. Originaldokumentet på dess ursprungliga språk ska betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning. \ No newline at end of file diff --git a/translations/sv/README.md b/translations/sv/README.md index a568d3c28..c7e2651a8 100644 --- a/translations/sv/README.md +++ b/translations/sv/README.md @@ -12,67 +12,78 @@ # Webb utveckling för nybörjare - En läroplan -Lär dig grunderna i webbutveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Varje av de 24 lektionerna fördjupar sig i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i frågesporter, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbevarande med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag! +Lär dig grunderna i webb utveckling med vår 12-veckors omfattande kurs av Microsoft Cloud Advocates. Var och en av de 24 lektionerna dyker ner i JavaScript, CSS och HTML genom praktiska projekt som terrarier, webbläsartillägg och rymdspel. Delta i quiz, diskussioner och praktiska uppgifter. Förbättra dina färdigheter och optimera din kunskapsbevarande med vår effektiva projektbaserade pedagogik. Börja din kodningsresa idag! Gå med i Azure AI Foundry Discord Community [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Följ dessa steg för att komma igång med dessa resurser: -1. **Forka FÖrrådet**: Klicka [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **Klona FÖrrådet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +Följ dessa steg för att komma igång med att använda dessa resurser: +1. **Forka Repositoryt**: Klicka [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **Klona Repositoryt**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**Gå med i Azure AI Foundry Discord och träffa experter och andra utvecklare**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 Flerspråkigt stöd +### 🌐 Stöd för flera språk -#### Stöds via GitHub Action (Automatiserat och alltid uppdaterat) +#### Stöds via GitHub Action (Automatiserat & Alltid Uppdaterat) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](./README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](../th/README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) -> **Föredrar du att Klona Lokalt?** - -> Detta förråd inkluderar över 50 språköversättningar som betydligt ökar nedladdningsstorleken. För att klona utan översättningar, använd sparsamt utläsning: +> **Föredrar du att klona lokalt?** +> +> Detta repository innehåller över 50 språköversättningar vilket ökar nedladdningsstorleken avsevärt. För att klona utan översättningar, använd sparsamt utcheckning: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> > Detta ger dig allt du behöver för att slutföra kursen med en mycket snabbare nedladdning. -**Om du vill ha ytterligare översättningsspråk stödjs dessa [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**Om du vill ha ytterligare språkstöd finns de listade [här](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) #### 🧑‍🎓 _Är du student?_ -Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och även sätt att få ett gratis certifikat-voucher. Detta är sidan du vill bokmärka och kolla då och då eftersom vi byter ut innehållet varje månad. +Besök [**Student Hub-sidan**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) där du hittar nybörjarresurser, studentpaket och till och med sätt att få ett gratis certifikatvoucher. Detta är sidan du vill bokmärka och kolla in då och då eftersom vi uppdaterar innehåll varje månad. ### 📣 Meddelande - Nya GitHub Copilot Agent-lägesutmaningar att slutföra! -Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med GitHub Copilot och Agent-läge. Om du inte har använt Agent-läge tidigare kan det inte bara generera text utan kan också skapa och redigera filer, köra kommandon med mera. +Ny utmaning tillagd, leta efter "GitHub Copilot Agent Challenge 🚀" i de flesta kapitel. Det är en ny utmaning för dig att slutföra med GitHub Copilot och Agent-läget. Om du inte använt Agent-läget tidigare kan det inte bara generera text, utan även skapa och redigera filer, köra kommandon och mer. -### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_ +### 📣 Meddelande - _Nytt projekt att bygga med Generativ AI_ -Nytt AI Assistant-projekt nyligen tillagt, kolla in det [projekt](./9-chat-project/README.md) +Nytt AI-assistentprojekt just tillagt, kolla in det [projektet](./9-chat-project/README.md) ### 📣 Meddelande - _Ny läroplan_ om Generativ AI för JavaScript har just släppts -Missa inte vår nya läroplan för Generativ AI! +Missa inte vår nya Generativ AI-läroplan! Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att komma igång! ![Background](../../translated_images/sv/background.148a8d43afde5730.webp) - Lektioner som täcker allt från grunder till RAG. -- Interagera med historiska karaktärer med GenAI och vår app. -- Rolig och engagerande berättelse, du kommer att resa i tiden! +- Interagera med historiska karaktärer med GenAI och vår medföljande app. +- Rolig och engagerande berättelse, du kommer att tidsresa! ![character](../../translated_images/sv/character.5c0dd8e067ffd693.webp) -Varje lektion innehåller en uppgift att slutföra, en kunskapskontroll och en utmaning som vägleder dig genom ämnen som: -- Frågeteknik och promptteknik + +Varje lektion inkluderar en uppgift att slutföra, en kunskapskontroll och en utmaning som guidar dig i att lära dig ämnen som: +- Prompting och promptteknik - Text- och bildappsgenerering - Sökappar @@ -82,130 +93,127 @@ Besök [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) för att ## 🌱 Komma igång -> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) om hur du kan använda denna läroplan. Vi skulle uppskatta din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **Lärare**, vi har [inkluderat några förslag](for-teachers.md) på hur man använder denna läroplan. Vi skulle uppskatta din feedback [i vårt diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[Lärande](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med en för-foreläsningsfrågesport och fortsätt med att läsa föreläsningsmaterialet, komplettera de olika aktiviteterna och kontrollera din förståelse med post-foreläsningsfrågesporten. +**[Studenter](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)**, för varje lektion, börja med ett förföreläsningsquiz och fortsätt sedan med att läsa föreläsningsmaterialet, slutföra de olika aktiviteterna och kontrollera din förståelse med efterföreläsningsquizet. -För att förbättra din inlärningsupplevelse, anslut med dina kamrater för att arbeta med projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer finns tillgängliga för att svara på dina frågor. +För att förbättra din lärandeupplevelse, koppla ihop med dina kamrater för att arbeta på projekten tillsammans! Diskussioner uppmuntras i vårt [diskussionsforum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) där vårt team av moderatorer finns tillgängliga för att svara på dina frågor. -För att vidareutbilda dig rekommenderar vi starkt att utforska [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) för ytterligare studiematerial. +För att fördjupa din utbildning rekommenderar vi starkt att utforska [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) för ytterligare studiematerial. ### 📋 Ställa in din miljö -Denna läroplan har en utvecklingsmiljö redo att användas! När du kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad, ingen installation behövs-miljö_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +Denna läroplan har en utvecklingsmiljö redo att användas! När du kommer igång kan du välja att köra läroplanen i en [Codespace](https://github.com/features/codespaces/) (_en webbläsarbaserad miljö utan behov av installation_), eller lokalt på din dator med en textredigerare som [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). -#### Skapa ditt förråd -För att du enkelt ska kunna spara ditt arbete rekommenderas att du skapar din egen kopia av detta förråd. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt förråd i ditt GitHub-konto med en kopia av läroplanen. +#### Skapa ditt repository +För att enkelt spara ditt arbete rekommenderas det att du skapar en egen kopia av detta repository. Du kan göra detta genom att klicka på knappen **Use this template** högst upp på sidan. Detta skapar ett nytt repository i ditt GitHub-konto med en kopia av läroplanen. Följ dessa steg: -1. **Forka FÖrrådet**: Klicka på "Fork"-knappen i det övre högra hörnet på denna sida. -2. **Klona FÖrrådet**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Forka Repositoryt**: Klicka på knappen "Fork" uppe i högra hörnet på denna sida. +2. **Klona Repositoryt**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` #### Köra läroplanen i en Codespace -I din kopia av detta förråd som du skapade, klicka på **Code**-knappen och välj **Open with Codespaces**. Detta skapar en ny Codespace för dig att arbeta i. +I din kopia av detta repository som du skapade, klicka på knappen **Code** och välj **Open with Codespaces**. Detta kommer att skapa en ny Codespace för dig att arbeta i. ![Codespace](../../translated_images/sv/createcodespace.0238bbf4d7a8d955.webp) #### Köra läroplanen lokalt på din dator -För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg](../../1-getting-started-lessons/1-intro-to-programming-languages), guidar dig genom olika alternativ för varje av dessa verktyg så att du kan välja det som passar dig bäst. - -Vårt rekommenderade redigeringsprogram är [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som även har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +För att köra denna läroplan lokalt på din dator behöver du en textredigerare, en webbläsare och ett kommandoradsverktyg. Vår första lektion, [Introduktion till programmeringsspråk och verktyg för yrket](../../1-getting-started-lessons/1-intro-to-programming-languages), guidar dig genom olika alternativ för var och en av dessa verktyg så att du kan välja det som passar dig bäst. - -1. Klona ditt förråd till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL: +Vår rekommendation är att använda [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) som din redigerare, som även har en inbyggd [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon). Du kan ladda ner Visual Studio Code [här](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon). +1. Klona ditt repository till din dator. Du kan göra detta genom att klicka på **Code**-knappen och kopiera URL:en: [CodeSpace](./images/createcodespace.png) - Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, byt ut `` mot URL:en du just kopierade: + + Öppna sedan [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) i [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) och kör följande kommando, där du byter ut `` mot URL:en du just kopierade: ```bash git clone ``` -2. Öppna mappen i Visual Studio Code. Det kan du göra genom att klicka på **File** > **Open Folder** och välja mappen du just klonade. +2. Öppna mappen i Visual Studio Code. Du kan göra detta genom att klicka på **File** > **Open Folder** och välja den mapp du just klonade. - -> Rekommenderade Visual Studio Code-tillägg: +> Rekommenderade tillägg för Visual Studio Code: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor i Visual Studio Code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - för att förhandsgranska HTML-sidor inom Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - för att hjälpa dig skriva kod snabbare -## 📂 Varje lektion inkluderar: +## 📂 Varje lektion innehåller: -- valfri sketchnote +- valfritt skissnotat - valfri kompletterande video -- förberedande quiz före lektionen -- skriftlig lektion -- för projektbaserade lektioner, steg-för-steg guider för hur man bygger projektet +- värmande quiz före lektionen +- skriven lektion +- för projektbaserade lektioner, steg-för-steg-guider för att bygga projektet - kunskapskontroller - en utmaning - kompletterande läsning - uppgift - [quiz efter lektionen](https://ff-quizzes.netlify.app/web/) -> **En notering om quiz**: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/), quiz-appen kan köras lokalt eller distribueras till Azure; följ instruktionerna i mappen `quiz-app`. +> **En notering om quiz**: Alla quiz finns i Quiz-app-mappen, totalt 48 quiz med tre frågor vardera. De finns tillgängliga [här](https://ff-quizzes.netlify.app/web/) och quizappen kan köras lokalt eller distribueras till Azure; följ instruktionerna i `quiz-app`-mappen. ## 🗃️ Lektioner -| | Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare | -| :-: | :----------------------------------------------------: | :------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :-------------------------: | -| 01 | Kom igång | Introduktion till programmering och verktyg | Lär dig de grundläggande principerna bakom de flesta programmeringsspråk och programvara som hjälper professionella utvecklare | [Introduktion till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Kom igång | Grunder i GitHub, inklusive samarbete i team | Hur man använder GitHub i sitt projekt, och hur man samarbetar med andra i en kodbas | [Introduktion till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Kom igång | Tillgänglighet | Lär dig grunderna i webbtillgänglighet | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Grunder | JavaScript-datatyper | Grunderna i JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Grunder | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera applikationens logik | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher | -| 06 | JS Grunder | Beslutsfattande med JS | Lär dig att skapa villkor i din kod med hjälp av beslutsfattandemetoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Grunder | Arrayer och loopar | Arbeta med data genom arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML:en för att skapa ett online-terrarium, med fokus på layout | [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS:en för att styla online-terrarium, med fokus på CSS-grunder, inklusive responsivt webbdesign | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript-closures, DOM-manipulation | Bygg JavaScript för att få terrariet att fungera som ett drag/drop-gränssnitt, med fokus på closures och DOM-manipulation | [JavaScript-closures, DOM-manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig använda tangentbordevenemang för att styra logiken i din JavaScript-app | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skissar de första elementen i en webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bygg ett formulär, anropa en API och lagra variabler lokalt | Bygg JavaScript-komponenterna i din webbläsartillägg för att anropa en API med hjälp av variabler lagrade lokalt | [API:er, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbprestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar | [Bakgrundsuppgifter och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och komposition samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på en skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisionsdetektion | Få element att kollidera och reagera på varandra med hjälp av knapptryckningar och ge en cooldown-funktion för spelets prestanda| [Kollisionsdetektion](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | Poängräkning | Utför matematiska beräkningar baserat på spelets status och prestanda | [Poängräkning](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att rensa tillgångar och återställa variabelvärden | [Avslutsvillkor](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig skapa grunden till en multipages webbplats arkitektur med routing och HTML-mallar | [HTML-mallar och rutter](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygg ett inloggnings- och registreringsformulär | Lär dig om att bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | Sätt att hämta och använda data | Hur data flyter in och ut ur din app, hur man hämtar, lagrar och gör sig av med det | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp i tillståndshantering | Lär dig hur din app behåller tillstånd och hur du hanterar det programmässigt | [Tillståndshantering](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig hur man använder en kodredigerare | [Använd VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | -| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig hur du bygger din egen AI-assistent | [AI Assistentprojekt](./9-chat-project/README.md) | Chris | +| | Projektnamn | Undervisade koncept | Lärandemål | Länkad lektion | Författare | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Kom igång | Introduktion till programmering och verktyg | Lär dig grundläggande principer bakom de flesta programmeringsspråk och om programvara som hjälper professionella utvecklare | [Introduktion till programmeringsspråk och verktyg](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | Kom igång | Grundläggande GitHub, inkluderar arbete i team | Hur du använder GitHub i ditt projekt och samarbetar med andra på en kodbas | [Introduktion till GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | Kom igång | Tillgänglighet | Lär dig grunderna i webbåtkomst | [Grundläggande tillgänglighet](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS-grunder | JavaScript-datatyper | Grunderna i JavaScript-datatyper | [Datatyper](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS-grunder | Funktioner och metoder | Lär dig om funktioner och metoder för att hantera logiken i en applikation | [Funktioner och metoder](./2-js-basics/2-functions-methods/README.md) | Jasmine och Christopher | +| 06 | JS-grunder | Beslutsfattande med JS | Lär dig skapa villkor i din kod med beslutsmetoder | [Beslutsfattande](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS-grunder | Arrayer och loopar | Arbeta med data med arrayer och loopar i JavaScript | [Arrayer och loopar](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML i praktiken | Bygg HTML för att skapa ett online-terrarium, med fokus på layout | [Introduktion till HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS i praktiken | Bygg CSS för att styla online-terrarium, med fokus på grunder i CSS inklusive responsiv design | [Introduktion till CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript closures, DOM-manipulering | Bygg JavaScript för att göra terrariet till en drag-och-släpp-gränssnitt, med fokus på closures och DOM-manipulering | [JavaScript-closures, DOM-manipulering](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | Bygg ett skrivspel | Lär dig använda tangentbords-event för att styra logiken i din JavaScript-app | [Händelsestyrd programmering](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Arbeta med webbläsare | Lär dig hur webbläsare fungerar, deras historia och hur man skapar basen för ett webbläsartillägg | [Om webbläsare](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Skapa ett formulär, anropa en API och lagra variabler i lokal lagring | Bygg JavaScript-element i ditt webbläsartillägg för att anropa en API med variabler lagrade i lokal lagring | [API:er, formulär och lokal lagring](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | Bakgrundsprocesser i webbläsaren, webbsida prestanda | Använd webbläsarens bakgrundsprocesser för att hantera tilläggets ikon; lär dig om webbprestanda och vissa optimeringar för att förbättra | [Bakgrundsprocesser och prestanda](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | Mer avancerad spelutveckling med JavaScript | Lär dig om arv med både klasser och komposition samt Pub/Sub-mönstret, som förberedelse för att bygga ett spel | [Introduktion till avancerad spelutveckling](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | Rita på canvas | Lär dig om Canvas API, som används för att rita element på en skärm | [Rita på canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | Flytta element runt på skärmen | Upptäck hur element kan få rörelse med kartesiska koordinater och Canvas API | [Flytta element runt](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | Kollisiondetektion | Få element att kollidera och reagera på varandra med tangenttryckningar samt skapa en cooldown-funktion för att säkerställa spelets prestanda | [Kollisiondetektion](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | Poängräkning | Utför matematiska beräkningar baserade på spelets status och prestation | [Poängräkning](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | Avsluta och starta om spelet | Lär dig om att avsluta och starta om spelet, inklusive att rensa tillgångar och återställa variabler | [Avslutsvillkor](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | HTML-mallar och rutter i en webbapp | Lär dig skapa skalmallen för en webbplats med flera sidor med routing och HTML-mallar | [HTML-mallar och rutter](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | Bygg ett inloggnings- och registreringsformulär | Lär dig bygga formulär och hantera valideringsrutiner | [Formulär](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | Metoder för att hämta och använda data | Hur data flödar in och ut ur din app, hur man hämtar, lagrar och slänger den | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | Begrepp kring state management | Lär dig hur din app behåller state och hur du hanterar det programmatiskt | [State management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | Arbeta med VScode | Lär dig använda en kodredigerare| [Använd VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 26 | [AI Assistants](./9-chat-project/README.md) | Arbeta med AI | Lär dig bygga din egen AI-assistent | [AI Assistant-projekt](./9-chat-project/README.md) | Chris | ## 🏫 Pedagogik -Vår läroplan är utformad med två viktiga pedagogiska principer i åtanke: +Vårt läroplan är utformat med två viktiga pedagogiska principer i åtanke: * projektbaserat lärande * frekventa quiz -Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktygen och teknikerna som används av dagens webbutvecklare. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, ett virtuellt terrarium, en miljövänlig webbläsartillägg, ett rymd-invaderarspel och en bankapp för företag. I slutet av serien kommer studenter att ha en gedigen förståelse för webbutveckling. +Programmet lär ut grunderna i JavaScript, HTML och CSS, samt de senaste verktyg och tekniker som dagens webbutvecklare använder. Studenter får möjlighet att utveckla praktisk erfarenhet genom att bygga ett skrivspel, virtuellt terrarium, miljövänligt webbläsartillägg, rymdinvasionsspel och en bankapp för företag. I slutet av serien kommer studenter att ha fått en gedigen förståelse för webbutveckling. > 🎓 Du kan ta de första lektionerna i denna läroplan som en [Lärväg](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) på Microsoft Learn! -Genom att säkerställa att innehållet överensstämmer med projekten blir processen mer engagerande för studenterna och konceptens bestående förstärks. Vi skrev också flera grundläggande lektioner i JavaScript för att introducera koncept, tillsammans med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" samlingen av videotutorials, vars några författare bidrog till denna läroplan. - -Dessutom sätter ett lågrisk-quiz före en lektion studentens fokus mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer ytterligare bestående förståelse. Denna läroplan är designad för att vara flexibel och rolig och kan tas i sin helhet eller delvis. Projekten börjar smått och blir successivt mer komplexa vid slutet av 12-veckorscykeln. +Genom att säkerställa att innehållet överensstämmer med projekt blir processen mer engagerande för studenter och behållning av koncept förstärks. Vi har också skrivit flera startlektioner i JavaScript-grunder för att introducera koncept, tillsammans med en video från "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)"-samlingen av videotutorials, där några författare bidragit till denna läroplan. -Medan vi medvetet har undvikit att introducera JavaScript-ramverk för att fokusera på grundläggande färdigheter som webbutvecklare innan ett ramverk används, är ett bra nästa steg efter att ha genomfört denna läroplan att lära sig om Node.js via en annan videosamling: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +Dessutom sätter ett låginsats-quiz före en lektion studentens avsikt mot att lära sig ett ämne, medan ett andra quiz efter lektionen säkerställer vidare retention. Denna läroplan är designad för att vara flexibel och rolig och kan tas helt eller delvis. Projekten startar små och blir successivt mer komplexa under 12-veckorscykeln. -> Besök våra riktlinjer för [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidrag](CONTRIBUTING.md). Vi välkomnar din konstruktiva feedback! +Även om vi med avsikt undvikit att introducera JavaScript-ramverk för att fokusera på de grundläggande färdigheter som behövs som webbutvecklare innan man tar till sig ett ramverk, skulle ett bra nästa steg efter denna läroplan vara att lära sig om Node.js via en annan samling videor: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". +> Besök våra [Uppförandekod](CODE_OF_CONDUCT.md) och [Bidragsgivare](CONTRIBUTING.md) riktlinjer. Vi välkomnar din konstruktiva feedback! ## 🧭 Offlineåtkomst -Du kan köra denna dokumentation offline genom att använda [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala maskin, och sedan i rotmappen av detta repo skriver du `docsify serve`. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`. +Du kan köra denna dokumentation offline med hjälp av [Docsify](https://docsify.js.org/#/). Forka detta repo, [installera Docsify](https://docsify.js.org/#/quickstart) på din lokala dator, och skriv sedan `docsify serve` i rotmappen för detta repo. Webbplatsen kommer att serveras på port 3000 på din localhost: `localhost:3000`. ## 📘 PDF - En PDF med alla lektioner finns [här](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf). ## 🎒 Andra kurser + Vårt team producerar andra kurser! Kolla in: @@ -223,7 +231,7 @@ Vårt team producerar andra kurser! Kolla in: --- -### Generative AI Series +### Generativ AI-serie [![Generative AI for Beginners](https://img.shields.io/badge/Generative%20AI%20for%20Beginners-8B5CF6?style=for-the-badge&labelColor=E5E7EB&color=8B5CF6)](https://github.com/microsoft/generative-ai-for-beginners?WT.mc_id=academic-105485-koreyst) [![Generative AI (.NET)](https://img.shields.io/badge/Generative%20AI%20(.NET)-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA)](https://github.com/microsoft/Generative-AI-for-beginners-dotnet?WT.mc_id=academic-105485-koreyst) [![Generative AI (Java)](https://img.shields.io/badge/Generative%20AI%20(Java)-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC)](https://github.com/microsoft/generative-ai-for-beginners-java?WT.mc_id=academic-105485-koreyst) @@ -231,7 +239,7 @@ Vårt team producerar andra kurser! Kolla in: --- -### Core Learning +### Kärnlärande [![ML for Beginners](https://img.shields.io/badge/ML%20for%20Beginners-22C55E?style=for-the-badge&labelColor=E5E7EB&color=22C55E)](https://aka.ms/ml-beginners?WT.mc_id=academic-105485-koreyst) [![Data Science for Beginners](https://img.shields.io/badge/Data%20Science%20for%20Beginners-84CC16?style=for-the-badge&labelColor=E5E7EB&color=84CC16)](https://aka.ms/datascience-beginners?WT.mc_id=academic-105485-koreyst) [![AI for Beginners](https://img.shields.io/badge/AI%20for%20Beginners-A3E635?style=for-the-badge&labelColor=E5E7EB&color=A3E635)](https://aka.ms/ai-beginners?WT.mc_id=academic-105485-koreyst) @@ -242,7 +250,7 @@ Vårt team producerar andra kurser! Kolla in: --- -### Copilot Series +### Copilot-serie [![Copilot for AI Paired Programming](https://img.shields.io/badge/Copilot%20for%20AI%20Paired%20Programming-FACC15?style=for-the-badge&labelColor=E5E7EB&color=FACC15)](https://aka.ms/GitHubCopilotAI?WT.mc_id=academic-105485-koreyst) [![Copilot for C#/.NET](https://img.shields.io/badge/Copilot%20for%20C%23/.NET-FBBF24?style=for-the-badge&labelColor=E5E7EB&color=FBBF24)](https://github.com/microsoft/mastering-github-copilot-for-dotnet-csharp-developers?WT.mc_id=academic-105485-koreyst) [![Copilot Adventure](https://img.shields.io/badge/Copilot%20Adventure-FDE68A?style=for-the-badge&labelColor=E5E7EB&color=FDE68A)](https://github.com/microsoft/CopilotAdventures?WT.mc_id=academic-105485-koreyst) @@ -250,21 +258,21 @@ Vårt team producerar andra kurser! Kolla in: ## Få hjälp -Om du fastnar eller har några frågor om att bygga AI-appar. Gå med andra studenter och erfarna utvecklare i diskussioner om MCP. Det är en stödjande gemenskap där frågor är välkomna och kunskap delas fritt. +Om du fastnar eller har några frågor om att bygga AI-appar. Gå med andra som lär sig och erfarna utvecklare i diskussioner om MCP. Det är ett stödjande community där frågor är välkomna och kunskap delas fritt. [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -Om du har produktfeedback eller stöter på fel under byggandet, besök: +Om du har produktfeedback eller felaktigheter när du bygger, besök: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## Licens -Detta förråd är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information. +Detta arkiv är licensierat under MIT-licensen. Se filen [LICENSE](../../LICENSE) för mer information. --- -**Ansvarsfriskrivning**: -Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, var god notera att automatiska översättningar kan innehålla fel eller brister. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för några missförstånd eller feltolkningar som uppstår till följd av användningen av denna översättning. +**Ansvarsfriskrivning**: +Detta dokument har översatts med hjälp av AI-översättningstjänsten [Co-op Translator](https://github.com/Azure/co-op-translator). Även om vi strävar efter noggrannhet, vänligen var medveten om att automatiska översättningar kan innehålla fel eller onoggrheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För viktig information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning. \ No newline at end of file diff --git a/translations/th/.co-op-translator.json b/translations/th/.co-op-translator.json index cf8d1d764..7f0d7ac65 100644 --- a/translations/th/.co-op-translator.json +++ b/translations/th/.co-op-translator.json @@ -1,7 +1,7 @@ { "1-getting-started-lessons/1-intro-to-programming-languages/README.md": { - "original_hash": "d45ddcc54eb9232a76d08328b09d792e", - "translation_date": "2026-01-06T22:22:09+00:00", + "original_hash": "bec5e35642176d9e483552bfc82996d8", + "translation_date": "2026-03-06T12:11:30+00:00", "source_file": "1-getting-started-lessons/1-intro-to-programming-languages/README.md", "language_code": "th" }, @@ -493,7 +493,7 @@ }, "AGENTS.md": { "original_hash": "a362efd06d64d4134a0cfe8515a86d34", - "translation_date": "2026-02-06T17:22:44+00:00", + "translation_date": "2026-03-06T12:19:35+00:00", "source_file": "AGENTS.md", "language_code": "th" }, @@ -516,8 +516,8 @@ "language_code": "th" }, "README.md": { - "original_hash": "6d6385fd098088cb2d690fb0a6cdaedc", - "translation_date": "2026-02-06T17:15:05+00:00", + "original_hash": "a2c9eed480687319517c08a6319e5536", + "translation_date": "2026-03-06T12:07:39+00:00", "source_file": "README.md", "language_code": "th" }, diff --git a/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md index bf6e36185..b6ce8f09b 100644 --- a/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/th/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,96 +1,96 @@ -# แนะนำเกี่ยวกับภาษาโปรแกรมมิ่งและเครื่องมือสำหรับนักพัฒนาสมัยใหม่ +# บทนำสู่ภาษาโปรแกรมและเครื่องมือสำหรับนักพัฒนาในยุคปัจจุบัน + +สวัสดีครับ นักพัฒนาในอนาคต! 👋 ขอเล่าอะไรให้ฟังที่ยังทำให้ผมตื่นเต้นได้ทุกวันไหม? คุณกำลังจะได้ค้นพบว่า การเขียนโปรแกรมไม่ได้เป็นแค่เรื่องของคอมพิวเตอร์ – แต่มันคือพลังวิเศษที่แท้จริงที่จะทำให้ไอเดียสุดบ้าคลั่งของคุณกลายเป็นจริง! -สวัสดีครับ นักพัฒนาในอนาคต! 👋 ขอเล่าอะไรที่ยังทำให้ผมตื่นเต้นทุกวันได้ไหม? คุณกำลังจะค้นพบว่าโปรแกรมมิ่งไม่ใช่แค่เรื่องของคอมพิวเตอร์ – แต่มันคือการมีพลังพิเศษจริงๆ ที่จะทำให้ไอเดียที่บ้าคลั่งของคุณกลายเป็นจริง! +คุณเคยเจอช่วงเวลาที่ใช้แอปที่ชอบแล้วทุกอย่างมันลงตัวเป๊ะๆ ไหม? ตอนที่แตะปุ่มแล้วมีอะไรบางอย่างแสนวิเศษเกิดขึ้นจนคุณต้องร้อง "ว้าว พวกเขาทำได้ยังไง?" คนที่เขียนโค้ดสร้างความวิเศษนั้นอาจจะเป็นคนเหมือนคุณ – กำลังนั่งอยู่ในร้านกาแฟที่ชอบตอนตี 2 พร้อมกับกาแฟเอสเปรสโซ่แก้วที่สาม – และนี่แหละที่จะทำให้คุณตกใจ: เมื่อจบบทเรียนนี้ คุณจะไม่เพียงแต่เข้าใจว่าพวกเขาทำแบบนั้นอย่างไร แต่คุณยังจะตื่นเต้นอยากลองทำเองด้วย! -คุณรู้ไหมว่าตอนที่คุณใช้แอปโปรดของคุณและทุกอย่างเกิดขึ้นได้อย่างสมบูรณ์แบบไหม? ตอนที่คุณแตะปุ่มหนึ่งและมีอะไรบางอย่างวิเศษเกิดขึ้นจนคุณต้องร้องว่า "ว้าว พวกเขาทำแบบนี้ได้ยังไง?" คนๆ นั้นเหมือนคุณเลย – อาจนั่งอยู่ในร้านกาแฟโปรดตอนตีสองกับเอสเปรสโซ่แก้วที่สาม – คนๆ นี้เขียนโค้ดที่สร้างความมหัศจรรย์นั้นขึ้นมา และนี่คือสิ่งที่จะทำให้คุณทึ่ง: เมื่อจบบทเรียนนี้ คุณจะไม่เพียงเข้าใจว่าพวกเขาทำแบบนั้นได้อย่างไร แต่คุณยังอยากจะลองเขียนเองด้วย! +ฟังนะ ผมเข้าใจดีว่าการโปรแกรมอาจดูลึกลับและน่ากลัวตอนนี้ ตอนที่ผมเริ่มแรกๆ ผมคิดจริงๆ ว่าต้องเป็นอัจฉริยะคณิตศาสตร์หรือเขียนโค้ดมาตั้งแต่อายุ 5 ขวบ แต่สิ่งที่เปลี่ยนมุมมองผมโดยสิ้นเชิงคือ: การเขียนโปรแกรมเหมือนกับการเรียนรู้การสนทนาในภาษาใหม่ คุณเริ่มต้นที่ "สวัสดี" กับ "ขอบคุณ" แล้วพัฒนาจนสั่งกาแฟได้ ก่อนที่คุณจะรู้ตัว คุณก็พูดคุยปรัชญากันลึกซึ้งแล้ว! แต่ในกรณีนี้ คุณกำลังคุยกับคอมพิวเตอร์ และจริงๆ แล้ว พวกมันเป็นคู่สนทนาที่อดทนที่สุด – ไม่เคยตัดสินความผิดพลาดของคุณและพร้อมลองใหม่เสมอ! -ฟังนะ ผมเข้าใจดีถ้าว่าการเขียนโปรแกรมตอนนี้ดูน่าสยอง ตอนที่ผมเริ่มแรกจริงๆ ผมคิดว่าต้องเป็นอัจฉริยะด้านคณิตศาสตร์หรือเขียนโค้ดมาตั้งแต่ 5 ขวบ แต่สิ่งที่เปลี่ยนความคิดผมไปโดยสิ้นเชิงก็คือ: การเขียนโปรแกรมเหมือนกับการเรียนรู้การสนทนาในภาษาหนึ่งใหม่ คุณเริ่มจาก "สวัสดี" และ "ขอบคุณ" จากนั้นไปสั่งกาแฟ แล้วก่อนที่คุณจะรู้ตัว คุณก็มีการสนทนาลึกซึ้งทางปรัชญา! ต่างกันคือ ในกรณีนี้ คุณกำลังสนทนากับคอมพิวเตอร์ และจริงๆ นะ? พวกเขาเป็นคู่สนทนาที่อดทนที่สุด – ไม่เคยตัดสินข้อผิดพลาดของคุณ และพร้อมจะลองใหม่เสมอ! - -วันนี้ เราจะสำรวจเครื่องมือสุดเจ๋งที่จะทำให้การพัฒนาเว็บสมัยใหม่ไม่เพียงเป็นไปได้ แต่ยังน่าติดใจอย่างจริงจัง ผมกำลังพูดถึงตัวแก้ไขโค้ด, เบราว์เซอร์, และเวิร์กโฟลว์เดียวกับที่นักพัฒนาของ Netflix, Spotify, และสตูดิโอแอปอินดี้ที่คุณชอบใช้ทุกวัน และนี่แหละสิ่งที่จะทำให้คุณพลิ้วไหวดีใจ: เครื่องมือระดับมืออาชีพเหล่านี้ส่วนใหญ่ใช้ฟรีทั้งหมด! +วันนี้ เราจะมาสำรวจเครื่องมือสุดเจ๋งที่ทำให้การพัฒนาเว็บสมัยใหม่ไม่ใช่แค่เรื่องเป็นไปได้ แต่ติดใจได้จริงๆ ผมกำลังพูดถึงตัวแก้ไขโค้ด, เบราว์เซอร์ และเวิร์กโฟลวเดียวกับที่นักพัฒนาที่ Netflix, Spotify และสตูดิโอแอปอินดี้ที่คุณชอบใช้ทุกวัน และนี่คือสิ่งที่จะทำให้คุณกระโดดโลดเต้น: เครื่องมือมืออาชีพระดับสูงและมาตรฐานอุตสาหกรรมส่วนใหญ่ใช้ได้ฟรีเลย! ![Intro Programming](../../../../translated_images/th/webdev101-programming.d6e3f98e61ac4bff.webp) -> สเก็ตช์โน้ตโดย [Tomomi Imura](https://twitter.com/girlie_mac) +> Sketchnote โดย [Tomomi Imura](https://twitter.com/girlie_mac) ```mermaid journey - title การเดินทางโปรแกรมของคุณวันนี้ + title การเดินทางในการเขียนโปรแกรมของคุณในวันนี้ section ค้นพบ - Programming คืออะไร: 5: You + โปรแกรมมิ่งคืออะไร: 5: You ภาษาโปรแกรมมิ่ง: 4: You ภาพรวมเครื่องมือ: 5: You section สำรวจ ตัวแก้ไขโค้ด: 4: You - เบราว์เซอร์ & เครื่องมือพัฒนา: 5: You - บรรทัดคำสั่ง: 3: You + เบราว์เซอร์ & DevTools: 5: You + แถวคำสั่ง: 3: You section ฝึกฝน นักสืบภาษา: 4: You - สำรวจเครื่องมือ: 5: You + การสำรวจเครื่องมือ: 5: You การเชื่อมต่อชุมชน: 5: You ``` -## มาลองดูสิว่าคุณรู้อะไรบ้างแล้ว! +## มาลองดูสิ่งที่คุณรู้กันเถอะ! -ก่อนที่เราจะเริ่มสนุกกัน ผมอยากรู้ – คุณรู้อะไรเกี่ยวกับโลกโปรแกรมมิ่งนี้แล้วบ้าง? และฟังนะ ถ้าคุณกำลังมองคำถามพวกนี้แล้วคิดว่า "ผมไม่รู้อะไรเลยเกี่ยวกับเรื่องนี้" ก็ไม่เป็นไรเลย นั่นแหละคือสิ่งที่สมบูรณ์แบบ! นั่นหมายความว่าคุณอยู่ในที่ที่ถูกต้องแล้ว คิดแบบทดสอบนี้เหมือนการยืดเส้นก่อนออกกำลังกาย – เรากำลังอุ่นเครื่องกล้ามเนื้อสมอง! +ก่อนจะกระโดดเข้าสู่สิ่งสนุกๆ ผมอยากรู้นะ – คุณรู้อะไรเกี่ยวกับโลกการเขียนโปรแกรมนี้บ้าง? และฟังนะ ถ้าคุณดูคำถามพวกนี้แล้วคิดว่า "ผมไม่รู้อะไรเลย" นั่นไม่ใช่แค่โอเค แต่มันสมบูรณ์แบบ! นั่นหมายความว่าคุณอยู่ในที่ที่ถูกต้องที่สุด คิดว่าควิซนี้เหมือนการยืดเหยียดก่อนออกกำลังกาย – เราแค่กำลังอุ่นเครื่องกล้ามเนื้อสมองกัน! -[ทำแบบทดสอบก่อนเรียน](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) +[ทำแบบทดสอบก่อนบทเรียน](https://ff-quizzes.netlify.app/web/) -## การผจญภัยที่เรากำลังจะไปด้วยกัน +## การผจญภัยที่เรากำลังจะได้ออกเดินทางไปด้วยกัน -โอเค ผมตื่นเต้นจริงๆ กับสิ่งที่เราจะสำรวจวันนี้! จริงๆ ผมอยากเห็นหน้าคุณตอนที่บางแนวคิดเคลื่อนไปด้วยกัน นี่คือการเดินทางที่น่าทึ่งที่เราจะร่วมกัน: +โอเค ผมตื่นเต้นจริงๆ กับสิ่งที่เราจะได้สำรวจในวันนี้! จริงๆ ผมอยากเห็นหน้าคุณตอนแนวคิดพวกนี้เริ่มเข้าใจ นี่คือการเดินทางที่น่าทึ่งที่เรากำลังจะร่วมกัน: -- **โปรแกรมมิ่งคืออะไรจริงๆ (และทำไมมันถึงเจ๋งที่สุด!)** – เราจะค้นพบว่าโค้ดคือเวทมนตร์ที่มองไม่เห็นซึ่งขับเคลื่อนทุกอย่างรอบตัวคุณ ตั้งแต่สัญญาณปลุกที่รู้ว่าคือเช้าวันจันทร์ไปจนถึงอัลกอริธึมที่คัดเลือกคำแนะนำ Netflix ได้อย่างแม่นยำ -- **ภาษาโปรแกรมมิ่งและบุคลิกที่น่าทึ่งของพวกมัน** – ลองจินตนาการเข้าไปในงานปาร์ตี้ที่แต่ละคนมีพลังวิเศษและวิธีการแก้ปัญหาที่แตกต่างกันสิ้นเชิง นั่นแหละโลกของภาษาโปรแกรมมิ่ง และคุณจะชอบที่จะได้รู้จักพวกเขา! -- **บล็อกสร้างพื้นฐานที่ทำให้เวทมนตร์ดิจิทัลเกิดขึ้น** – คิดซะว่านี่คือชุด LEGO สร้างสรรค์ขั้นสุดยอด เมื่อคุณเข้าใจว่าส่วนประกอบเหล่านี้รวมกันอย่างไร คุณจะรู้ว่าคุณสามารถสร้างอะไรก็ได้ตามจินตนาการของคุณ -- **เครื่องมือระดับมืออาชีพที่จะทำให้คุณรู้สึกเหมือนได้วางไม้เท้าวิเศษในมือ** – ผมไม่ได้พูดเกินจริง – เครื่องมือเหล่านี้จะทำให้คุณรู้สึกว่าคุณมีพลังพิเศษจริงๆ และส่วนที่เจ๋งที่สุด? พวกมันคือเครื่องมือเดียวกับที่มืออาชีพใช้! +- **โปรแกรมมิ่งคืออะไรจริงๆ (และทำไมมันถึงเจ๋งที่สุด!)** – เราจะค้นพบว่าโค้ดคือเวทมนตร์ที่มองไม่เห็นที่ขับเคลื่อนทุกอย่างรอบตัวคุณ ตั้งแต่สัญญาณเตือนที่รู้ว่ามันคือเช้าวันจันทร์ไปจนถึงอัลกอริทึมที่คัดสรรรายชื่อแนะนำ Netflix ของคุณอย่างแม่นยำ +- **ภาษาโปรแกรมและบุคลิกที่น่าทึ่งของพวกมัน** – จินตนาการว่าคุณเดินเข้าปาร์ตี้ที่แต่ละคนมีพลังวิเศษและวิธีแก้ปัญหาที่แตกต่างกัน นั่นแหละคือโลกของภาษาโปรแกรม และคุณจะต้องชอบที่ได้รู้จักพวกเขา! +- **บล็อกสร้างสรรค์พื้นฐานที่ทำให้เวทมนตร์ดิจิทัลเกิดขึ้น** – คิดว่าสิ่งเหล่านี้คือชุดตัวต่อ LEGO ที่สร้างสรรค์ที่สุด เมื่อคุณเข้าใจว่าชิ้นส่วนเหล่านี้ประกอบกันอย่างไร คุณจะรู้ว่าคุณสามารถสร้างอะไรก็ได้จากจินตนาการของคุณ +- **เครื่องมือมืออาชีพที่จะทำให้คุณรู้สึกเหมือนเพิ่งได้รับไม้คาถาของพ่อมด** – ผมไม่ได้พูดเกินจริง – เครื่องมือพวกนี้จะทำให้คุณรู้สึกเหมือนมีพลังวิเศษจริงๆ และส่วนที่ดีที่สุดคือ? มันคือเครื่องมือเดียวกับที่มือโปรใช้! -> 💡 **นี่นะ**: ไม่ต้องพยายามจำทุกอย่างในวันนี้! ตอนนี้แค่อยากให้คุณรู้สึกถึงประกายความตื่นเต้นในสิ่งที่เป็นไปได้ รายละเอียดจะติดตัวเองอย่างเป็นธรรมชาติเมื่อเราฝึกไปด้วยกัน – นั่นแหละการเรียนรู้ที่แท้จริง! +> 💡 **นี่แหละประเด็นสำคัญ**: อย่าคิดแม้แต่จะจำทุกอย่างในวันนี้เลย! ตอนนี้แค่ให้คุณรู้สึกถึงประกายแห่งความตื่นเต้นว่ามีสิ่งที่เป็นไปได้แค่ไหน รายละเอียดจะติดตามมาเองตามธรรมชาติเมื่อลองทำจริง – นี่แหละคือการเรียนรู้ของแท้! -> คุณสามารถเรียนบทเรียนนี้ได้ที่ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! +> คุณสามารถเรียนบทเรียนนี้ได้ที่ [Microsoft Learn](https://learn.microsoft.com/en-us/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! -## แล้วโปรแกรมมิ่งคือ *อะไร* กันแน่? +## แล้วโปรแกรมมิ่ง *คืออะไร* กันแน่? -โอเค มาตอบคำถามที่มีมูลค่าล้านดอลลาร์: โปรแกรมมิ่งคืออะไรจริงๆ? +ดี เรามาจับคำถามเงินล้าน: โปรแกรมมิ่งคืออะไรจริงๆ? -ผมจะเล่าเรื่องที่เปลี่ยนมุมมองในตัวผมสุดๆ อาทิตย์ที่แล้ว ผมพยายามอธิบายให้แม่ผมใช้รีโมตทีวีสมาร์ทตัวใหม่ เราก็ตลกตัวเองเวลาที่พูดว่า "กดปุ่มแดงนะ แต่ไม่ใช่ปุ่มแดงใหญ่ เป็นปุ่มแดงเล็กด้านซ้าย...ไม่ใช่ซ้ายนี้... โอเค ตอนนี้กดค้างสองวินาที ไม่ใช่หนึ่ง, ไม่ใช่สาม..." คุ้นๆ ไหม? 😅 +ผมจะเล่าเรื่องที่เปลี่ยนวิธีคิดของผมไปเลย เมื่อสัปดาห์ก่อน ผมพยายามอธิบายให้แม่ฟังว่าจะใช้รีโมตทีวีอัจฉริยะเครื่องใหม่ยังไง ผมจับได้ว่ากำลังพูดว่า "กดปุ่มแดง ไม่ใช่ปุ่มแดงใหญ่ ปุ่มแดงเล็กฝั่งซ้าย... ไม่ ฝั่งซ้ายอีกข้าง... โอเค ตอนนี้กดค้างไว้สองวินาที ไม่ใช่หนึ่งหรือสาม..." คุ้นๆ ไหม? 😅 -นั่นแหละโปรแกรมมิ่ง! ศิลปะแห่งการให้คำสั่งอย่างละเอียดทีละขั้นตอนกับสิ่งที่ทรงพลังแต่ต้องการให้บอกแบบชัดเจนเป๊ะๆ ต่างจากอธิบายให้แม่ฟัง (ที่แม่ถามว่า "ปุ่มแดงไหน?") คุณกำลังอธิบายให้คอมพิวเตอร์ซึ่งทำตามที่คุณบอกพอดีเป๊ะ แม้ว่าคุณจะไม่ได้ตั้งใจแบบนั้นก็ตาม +นั่นแหละคือการเขียนโปรแกรม! มันคือศิลปะการให้คำแนะนำอย่างละเอียดทีละขั้นตอนกับสิ่งที่ทรงพลังแต่ต้องอธิบายทุกอย่างให้ชัดเจน เทียบกับการอธิบายให้แม่ฟัง (แม่อาจถามว่า "ปุ่มแดงไหน?") ครั้งนี้คือการอธิบายให้คอมพิวเตอร์ฟัง (ซึ่งทำตามคำสั่งเป๊ะๆ แม้ว่าคำสั่งนั้นจะไม่ตรงกับที่คุณตั้งใจ) -นี่คือสิ่งที่ทำให้ผมทึ่งในตอนเรียนแรก: คอมพิวเตอร์จริงๆ แล้วง่ายมากในระดับแก่น แค่เข้าใจสองอย่างคือ 1 และ 0 นั่นคือ “ใช่” กับ “ไม่ใช่” หรือ “เปิด” กับ “ปิด” เท่านั้น! แต่สิ่งที่น่าสนใจคือ – เราไม่จำเป็นต้องพูดด้วย 1 กับ 0 แบบใน The Matrix นั่นแหละที่ภาษาโปรแกรมมิ่งเข้ามาช่วย พวกมันเหมือนนักแปลที่ดีที่สุดในโลกที่แปลงความคิดคนเป็นภาษาคอมพิวเตอร์ +สิ่งที่ทำให้ผมตะลึงตอนแรกเรียนคือ: คอมพิวเตอร์จริงๆ แล้วง่ายมากในแก่นแท้ มันเข้าใจแค่สองอย่าง – 1 และ 0 ซึ่งก็คือ "ใช่" และ "ไม่ใช่" หรือ "เปิด" กับ "ปิด" เท่านั้น! แต่สิ่งที่เป็นเวทมนตร์คือ – เราไม่ต้องพูดด้วย 1 และ 0 เหมือนใน The Matrix นั่นแหละ ที่มาของ **ภาษาโปรแกรม** ที่คอยแปลภาษามนุษย์ที่เราคิดให้กลายเป็นภาษาคอมพิวเตอร์ -และนี่คือสิ่งที่ยังทำให้ผมตื่นเต้นทุกเช้าที่ตื่นขึ้นมา: ทุกสิ่งที่เป็นดิจิทัลในชีวิตคุณเริ่มต้นจากใครสักคนแบบคุณ อาจนั่งอยู่ในชุดนอนพร้อมกาแฟในมือ กำลังพิมพ์โค้ดบนโน้ตบุ๊ก ตัวกรอง Instagram ที่ทำให้คุณดูไร้ที่ติเหรอ? คนเขียนโค้ดมัน อัลกอริธึมแนะนำเพลงโปรดใหม่ของคุณเหรอ? นักพัฒนาสร้างมัน แอปที่ให้คุณหารบิลอาหารค่ำกับเพื่อนๆ ใช่เลย ใครสักคนคิดว่า "นี่มันน่ารำคาญ ฉันคงแก้ได้" แล้วก็ทำมันสำเร็จ! +และนี่คือสิ่งที่ยังทำให้ผมรู้สึกเย็นวูบทุกเช้าเมื่อผมตื่นขึ้นมา: ทุกสิ่งดิจิทัลในชีวิตคุณเริ่มต้นจากคนที่เหมือนคุณ กำลังนั่งในชุดนอนกับแก้วกาแฟ พิมพ์โค้ดบนแล็ปท็อป ฟิลเตอร์ Instagram ที่ทำให้คุณดูไม่มีที่ติ? คนคนหนึ่งเขียนโค้ดอันนั้น คำแนะนำที่ทำให้คุณเจอเพลงโปรดใหม่? นักพัฒนาเขียนอัลกอริทึมนั้น แอปที่ช่วยแยกบิลมื้อค่ำกับเพื่อน? ใช่เลย ใครสักคนคิดว่า "นี่น่ารำคาญ ฉันน่าจะแก้ได้" แล้วก็ทำจริง! -เมื่อคุณเรียนรู้โปรแกรมมิ่ง คุณไม่ได้แค่เพิ่มทักษะใหม่ – คุณกำลังเป็นส่วนหนึ่งของชุมชนแก้ปัญหาที่ใช้เวลาคิดว่า "ถ้าฉันสร้างอะไรบางอย่างที่ทำให้วันของใครบางคนดีขึ้นนิดหน่อยได้ล่ะ?" จริงๆ มีอะไรเจ๋งกว่านี้ไหม? +เมื่อคุณเรียนรู้โปรแกรมมิ่ง คุณไม่ได้แค่เพิ่มทักษะใหม่ – แต่เป็นส่วนหนึ่งของชุมชนนักแก้ปัญหาสุดวิเศษที่ใช้เวลาทั้งวันคิดว่า "ถ้าฉันสร้างอะไรสักอย่างที่ทำให้วันของใครสักคนดีขึ้นนิดหน่อยได้ล่ะ?" จริงๆ จะมีอะไรเจ๋งกว่านี้ไหม? -✅ **ล่าสมบัติข้อเท็จจริงสนุก**: มีเรื่องน่าสนใจให้ค้นหาตอนที่มีเวลาว่าง – ใครคือโปรแกรมเมอร์คนแรกของโลก? ผมบอกใบ้ให้: อาจไม่ใช่คนที่คุณคาดหวัง! เรื่องราวของคนนี้น่าทึ่งมาก และแสดงให้เห็นว่าโปรแกรมมิ่งคือการแก้ปัญหาอย่างสร้างสรรค์และคิดนอกกรอบเสมอมา +✅ **สนุกกับการค้นหาข้อมูล**: นี่เป็นสิ่งเจ๋งที่ควรค้นหาเมื่อคุณมีเวลาว่าง – คุณคิดว่าใครคือโปรแกรมเมอร์คนแรกของโลก? ผมจะให้คำใบ้: อาจไม่ใช่คนที่คุณคาดคิด! เรื่องราวของคนนี้น่าทึ่งมากและแสดงให้เห็นว่าการเขียนโปรแกรมคือศิลปะแห่งการแก้ปัญหาอย่างสร้างสรรค์และคิดนอกกรอบเสมอมา -### 🧠 **เวลาตรวจสอบ: คุณรู้สึกอย่างไร?** +### 🧠 **เช็คอิน: ตอนนี้คุณรู้สึกยังไง?** -**พักคิดสักครู่:** -- ไอเดียเรื่อง “การสั่งการคอมพิวเตอร์” เข้าใจไหมตอนนี้? -- คิดถึงงานประจำวันที่อยากจะเขียนโปรแกรมช่วยให้ทำอัตโนมัติได้ไหม? -- มีคำถามอะไรลอยขึ้นมาในหัวบ้างเกี่ยวกับเรื่องโปรแกรมมิ่งนี้? +**ขอเวลาสักครู่ไตร่ตรอง:** +- ความคิดเรื่อง "การให้คำสั่งกับคอมพิวเตอร์" เข้าใจไหมตอนนี้? +- คุณนึกถึงงานประจำวันที่อยากอัตโนมัติด้วยโปรแกรมไหม? +- มีคำถามอะไรเด่นชัดในหัวเกี่ยวกับการเขียนโปรแกรมนี้ไหม? -> **จำไว้**: ปกติมากถ้าบางแนวคิดยังดูงงตอนนี้ การเรียนโปรแกรมมิ่งเหมือนเรียนภาษาใหม่ – ต้องใช้เวลาสมองสร้างเส้นทางประสาทใหม่ คุณทำได้ดีมาก! +> **จำไว้ว่า**: ปกติหมดถ้าแนวคิดบางอย่างยังไม่ชัดเจน การเรียนเขียนโปรแกรมเหมือนการเรียนภาษาใหม่ – ต้องใช้เวลาสร้างทางเดินประสาทในสมอง คุณทำได้ดีมาก! -## ภาษาโปรแกรมมิ่งเหมือนรสชาติของเวทมนตร์ที่แตกต่างกัน +## ภาษาโปรแกรมคือรสชาติเวทมนตร์ที่แตกต่างกัน -โอเค มันจะฟังดูแปลกๆ แต่ติดตามผมหน่อย – ภาษาโปรแกรมเหมือนดนตรีหลายแบบอย่างมาก ลองนึกถึง: คุณมีแจ๊ส ที่ลื่นไหลและอิมโพรไวส์, ร็อกที่ทรงพลังและตรงไปตรงมา, คลาสสิกที่สง่างามและมีโครงสร้าง, และฮิปฮอปที่สร้างสรรค์และแสดงออก สไตล์แต่ละอย่างมีอารมณ์ของมันเอง ชุมชนแฟน passionate ของมันเอง และเหมาะกับบรรยากาศและโอกาสที่ต่างกัน +โอเค ฟังดูแปลกนิดหน่อยแต่ขอให้ตามผมไป – ภาษาโปรแกรมเหมือนกับประเภทดนตรีที่แตกต่างกัน ลองนึกถึง: คุณมีแจ๊สที่ลื่นไหลและเล่นสด, ร็อกที่ทรงพลังและตรงไปตรงมา, คลาสสิกที่สง่างามและมีโครงสร้าง และฮิปฮอปที่สร้างสรรค์และแสดงออก สไตล์แต่ละอย่างมีบรรยากาศเป็นของตัวเอง ชุมชนแฟนคลับที่คลั่งไคล้ และเหมาะกับอารมณ์และโอกาสที่แตกต่างกัน -ภาษาโปรแกรมเหมือนกันเป๊ะ! คุณคงไม่ใช้ภาษาเดียวกันเขียนเกมมือถือสนุกๆ กับภาษาใช้คำนวณข้อมูลภูมิอากาศมหาศาล เหมือนไม่มีใครเปิดเดธเมทัลในคลาสโยคะ (เอ่อ ส่วนใหญ่นะ! 😄) +ภาษาโปรแกรมก็เหมือนกัน! คุณไม่ใช้ภาษาเดียวกันสร้างเกมมือถือสนุกๆ กับภาษาที่ใช้ประมวลผลข้อมูลภูมิอากาศจำนวนมาก เหมือนกับคุณไม่เปิดเพลงเดธเมทัลที่คลาสเรียนโยคะ (เอ่อ ส่วนใหญ่ก็ใช่! 😄) -แต่สิ่งที่ทำให้ผมทึ่งทุกครั้งที่คิดถึงคือ: ภาษาพวกนี้เหมือนนักแปลที่อดทนและฉลาดที่สุดในโลกนั่งอยู่ข้างๆ คุณ คุณแสดงความคิดในแบบที่สมองคนรับได้ และพวกมันจัดการแปลงให้เป็น 1 กับ 0 ที่คอมพิวเตอร์เข้าใจได้ มันเหมือนมีเพื่อนที่พูดได้คล่องทั้ง “ความคิดสร้างสรรค์ของมนุษย์” กับ “ตรรกะของคอมพิวเตอร์” – และพวกเขาไม่เคยเหนื่อย ไม่ต้องพักกาแฟ และไม่เคยตัดสินคุณถ้าถามคำถามซ้ำ! +แต่สิ่งที่ทำให้ผมประหลาดใจทุกครั้งที่คิดถึง: ภาษาเหล่านี้เหมือนล่ามที่อดทนและอัจฉริยะที่สุดในโลกนั่งอยู่ข้างๆ คุณ คุณสามารถแสดงความคิดในรูปแบบที่เป็นธรรมชาติกับสมองมนุษย์ และพวกเขาจะจัดการเรื่องซับซ้อนทั้งหมดในการแปลงเป็น 1 และ 0 ที่คอมพิวเตอร์เข้าใจ มันเหมือนมีเพื่อนที่พูดได้คล่องทั้ง "ความสร้างสรรค์มนุษย์" และ "ตรรกะคอมพิวเตอร์" – และเขาไม่เคยเหนื่อย ไม่ต้องพักกาแฟ และไม่เคยดุเวลาคุณถามคำถามเดิมซ้ำ! -### ภาษาโปรแกรมยอดนิยมและการใช้งาน +### ภาษาที่ได้รับความนิยมและการใช้งาน ```mermaid mindmap - root((Programming Languages)) + root((ภาษาการเขียนโปรแกรม)) Web Development JavaScript - เวทมนตร์หน้าเว็บ + Frontend Magic เว็บไซต์เชิงโต้ตอบ TypeScript - JavaScript + ชนิดข้อมูล + JavaScript + Types แอปองค์กร Data & AI Python @@ -106,56 +106,56 @@ mindmap องค์กร Swift iOS - ระบบแอปเปิล + ระบบนิเวศของ Apple Kotlin Android สมัยใหม่ ข้ามแพลตฟอร์ม Systems & Performance C++ เกม - ประสิทธิภาพสูง + ประสิทธิภาพสำคัญ Rust - ความปลอดภัยหน่วยความจำ + ความปลอดภัยของหน่วยความจำ การเขียนโปรแกรมระบบ Go บริการคลาวด์ - แบ็คเอนด์ที่ปรับขนาดได้ + ระบบหลังบ้านที่ปรับขนาดได้ ``` -| Language | เหมาะสำหรับ | ทำไมถึงเป็นที่นิยม | -|----------|--------------|---------------------| -| **JavaScript** | พัฒนาเว็บ, อินเทอร์เฟซผู้ใช้ | รันในเบราว์เซอร์และขับเคลื่อนเว็บไซต์ที่โต้ตอบได้ | -| **Python** | วิทยาศาสตร์ข้อมูล, อัตโนมัติ, ปัญญาประดิษฐ์ | อ่านง่าย เรียนรู้ได้ง่าย มีไลบรารีทรงพลัง | -| **Java** | แอปองค์กร, แอป Android | ข้ามแพลตฟอร์ม แข็งแรงสำหรับระบบขนาดใหญ่ | -| **C#** | แอป Windows, พัฒนาเกม | รองรับดีในระบบนิเวศของ Microsoft | -| **Go** | บริการคลาวด์, ระบบเบื้องหลัง | เร็ว, เรียบง่าย, ออกแบบสำหรับคอมพิวเตอร์สมัยใหม่ | +| ภาษา | เหมาะสำหรับ | ทำไมถึงได้รับความนิยม | +|----------|----------|------------------| +| **JavaScript** | พัฒนาเว็บ, ส่วนติดต่อผู้ใช้ | รันในเบราว์เซอร์และขับเคลื่อนเว็บไซต์โต้ตอบได้ | +| **Python** | วิทยาศาสตร์ข้อมูล, อัตโนมัติ, ปัญญาประดิษฐ์ | อ่านและเรียนรู้ง่าย, มีไลบรารีทรงพลัง | +| **Java** | แอปองค์กร, แอป Android | ใช้งานข้ามแพลตฟอร์ม, แข็งแกร่งสำหรับระบบใหญ่ | +| **C#** | แอป Windows, พัฒนาเกม | ได้รับการสนับสนุนระบบนิเวศของ Microsoft อย่างเข้มแข็ง | +| **Go** | บริการคลาวด์, ระบบแบ็คเอนด์ | เร็ว, เรียบง่าย, ออกแบบสำหรับคอมพิวเตอร์ยุคใหม่ | ### ภาษาเลเวลสูงกับเลเวลต่ำ -โอเค นี่คือแนวคิดที่ทำให้ผมปวดหัวตอนเริ่มเรียนใหม่ๆ มาก ดังนั้นผมจะแบ่งปันอุปมาอุปไมยที่ทำให้ผมเข้าใจในที่สุด – และหวังว่าคุณจะช่วยได้ด้วย! +โอเค นี่คือแนวคิดที่ทำให้ผมปวดหัวสุดตอนเริ่มเรียน ผมจะแบ่งปันเปรียบเทียบที่ทำให้ผมเข้าใจและหวังว่าจะช่วยคุณได้ด้วย! -นึกภาพว่าคุณเดินทางไปประเทศที่ไม่พูดภาษาที่นั่น และต้องการหาห้องน้ำอย่างเร่งด่วน (พวกเราผ่านกันมาแล้วใช่ไหม? 😅): +ลองนึกภาพว่าคุณไปประเทศที่พูดภาษานั้นไม่ได้และต้องหาห้องน้ำด่วน (เราผ่านเรื่องนี้กันมาแล้วใช่ไหม? 😅): -- **โปรแกรมมิ่งเลเวลต่ำ** คือการเรียนภาษาท้องถิ่นดีมากจนคุยกับย่าคนขายผลไม้ตรงหัวมุมได้ ใช้อ้างอิงวัฒนธรรม สแลงท้องถิ่น และมุกภายในที่มีแต่คนโตที่นั่นจะเข้าใจ ประทับใจและมีประสิทธิภาพสูง... ถ้าคุณเป็นผู้คล่องจริงๆ! แต่ก็ค่อนข้างล้นหลามเมื่อต้องแค่หาห้องน้ำ +- **การโปรแกรมระดับต่ำ** เหมือนเรียนภาษาพื้นเมืองจนสามารถคุยกับยายขายผลไม้ตรงมุมถนนโดยใช้ความรู้ทางวัฒนธรรม, สแลงในท้องถิ่น, และมุกลับหัวที่มีเฉพาะคนโตที่นั่นจะเข้าใจ ฟังดูประทับใจและมีประสิทธิภาพมาก...ถ้าคุณพูดภาษานั้นคล่อง! แต่ก็ลำบากเหลือเกินเมื่อแค่อยากหาห้องน้ำ -- **โปรแกรมมิ่งเลเวลสูง** เหมือนมีเพื่อนท้องถิ่นเจ๋งๆ ที่เข้าใจคุณ คุณพูดเป็นภาษาอังกฤษง่ายๆ ว่า "ฉันอยากห้องน้ำ" แล้วเขาจัดการแปลวัฒนธรรมและบอกทางที่สมองคุณรับได้ง่าย +- **การโปรแกรมระดับสูง** เหมือนมีเพื่อนท้องถิ่นที่เข้าใจคุณ คุณบอก "ฉันอยากหาห้องน้ำ" แบบอังกฤษง่ายๆ และเขาจัดการแปลวัฒนธรรมและบอกทางให้ในแบบที่สมองที่ไม่ใช่คนท้องถิ่นเข้าใจได้ดีมาก -ในโลกโปรแกรม: -- **ภาษาระดับต่ำ** (เช่น Assembly หรือ C) ให้คุณสนทนาอย่างละเอียดกับฮาร์ดแวร์คอมพิวเตอร์จริงๆ แต่คุณต้องคิดแบบเครื่องจักร ซึ่ง... บอกเลยว่าต้องใช้ความคิดเปลี่ยนโหมดใหญ่! -- **ภาษาระดับสูง** (เช่น JavaScript, Python, หรือ C#) ให้คุณคิดแบบมนุษย์ขณะที่พวกมันจัดการภาษาเครื่องเบื้องหลัง อีกทั้งมีชุมชนที่ต้อนรับอบอุ่นเต็มไปด้วยคนที่จำได้ว่าการเป็นมือใหม่เป็นอย่างไรและต้องการช่วยจริงใจ! +ในภาษาโปรแกรม: +- **ระดับต่ำ** (เช่น Assembly หรือ C) ให้คุณมีบทสนทนาอย่างละเอียดกับฮาร์ดแวร์คอมพิวเตอร์จริงๆ แต่ต้องคิดเหมือนเครื่องจักร ซึ่ง...บอกเลยเป็นการเปลี่ยนความคิดที่ใหญ่มาก! +- **ระดับสูง** (เช่น JavaScript, Python, หรือ C#) ให้คุณคิดเหมือนมนุษย์ ขณะที่พวกมันจัดการเรื่องภาษาเครื่องที่ซับซ้อนอยู่เบื้องหลัง ยิ่งไปกว่านั้น มีชุมชนต้อนรับที่อบอุ่นเต็มไปด้วยคนที่จำได้ว่ารู้สึกยังไงตอนเริ่มใหม่และอยากช่วยเหลือจริงใจ! -เดาว่าภาษาที่ผมจะแนะนำให้คุณเริ่มใช้คืออะไร? 😉 ภาษาระดับสูงเหมือนมีล้อฝึกขี่จักรยานที่คุณแทบไม่อยากถอดออกเลยเพราะมันทำให้ประสบการณ์มันลื่นไหลและสนุกขึ้นมาก! +เดาไหมว่าภาษาแบบไหนที่ผมจะแนะนำให้เริ่มด้วย? 😉 ภาษาเลเวลสูงเหมือนการใส่ล้อฝึกที่คุณแทบไม่อยากถอดเพราะมันทำให้ประสบการณ์สนุกมากขึ้น! ```mermaid flowchart TB - A["👤 ความคิดของมนุษย์:
'ฉันต้องการคำนวณเลขฟีโบนัชชี'"] --> B{เลือกระดับภาษา} + A["👤 ความคิดของมนุษย์:
'ฉันต้องการคำนวณจำนวนฟีโบนักชี'"] --> B{เลือกระดับภาษา} - B -->|High-Level| C["🌟 JavaScript/Python
ง่ายต่อการอ่านและเขียน"] - B -->|Low-Level| D["⚙️ Assembly/C
ควบคุมฮาร์ดแวร์โดยตรง"] + B -->|ระดับสูง| C["🌟 JavaScript/Python
อ่านและเขียนง่าย"] + B -->|ระดับต่ำ| D["⚙️ Assembly/C
ควบคุมฮาร์ดแวร์โดยตรง"] C --> E["📝 เขียน: fibonacci(10)"] D --> F["📝 เขียน: mov r0,#00
sub r0,r0,#01"] - E --> G["🤖 ความเข้าใจของคอมพิวเตอร์:
ตัวแปลงจัดการความซับซ้อน"] + E --> G["🤖 ความเข้าใจของคอมพิวเตอร์:
ตัวยแปลจัดการความซับซ้อน"] F --> G G --> H["💻 ผลลัพธ์เหมือนกัน:
0, 1, 1, 2, 3, 5, 8, 13..."] @@ -164,18 +164,18 @@ flowchart TB style D fill:#fff3e0 style H fill:#e8f5e8 ``` -### ให้ผมแสดงให้คุณเห็นว่าทำไมภาษาระดับสูงถึงเป็นมิตรกับคุณมากกว่า +### ให้ผมโชว์ให้เห็นว่าทำไมภาษาเลเวลสูงถึงมิตรไมตรีแบบนี้ -โอเค ผมจะโชว์สิ่งนึงที่แสดงให้เห็นชัดว่าทำไมผมถึงรักภาษาระดับสูง แต่ก่อนอื่น – ขอให้คุณสัญญาหน่อยเวลาที่เห็นตัวอย่างโค้ดแรกนี้ อย่าตกใจ! มันต้องดูน่ากลัว นั่นแหละคือจุดที่ผมต้องการ! +โอเค ผมกำลังจะโชว์อะไรบางอย่างที่แสดงได้อย่างชัดเจนว่าทำไมผมถึงหลงรักภาษาเลเวลสูง แต่ก่อนอื่น – ขอให้สัญญาอย่างหนึ่งนะเมื่อเห็นตัวอย่างโค้ดแรก อย่าตกใจ! มันควรดูน่ากลัว นั่นคือประเด็นที่ผมจะสื่อ! -เราจะดูงานเดียวกันผ่านสองสไตล์ที่แตกต่างกันโดยสิ้นเชิง ทั้งคู่สร้างเรียงลำดับฟีโบนัชชี – รูปแบบคณิตศาสตร์สวยงามที่เลขแต่ละตัวคือผลรวมของเลขสองตัวก่อนหน้า: 0, 1, 1, 2, 3, 5, 8, 13... (ข้อเท็จจริงสนุก: คุณจะพบรูปแบบนี้ในธรรมชาติทุกที่ – จากเกลียวเมล็ดดอกทานตะวัน ลวดลายเมล็ดสน ไปจนถึงการก่อตัวของกาแล็กซี่!) +เราจะดูงานเดียวกันเขียนด้วยสองสไตล์ที่ต่างกันสุดขั้ว ทั้งสองโค้ดสร้างสิ่งที่เรียกว่าลำดับฟีโบนักชี – แบบแผนทางคณิตศาสตร์ที่สวยงาม ซึ่งแต่ละเลขเป็นผลบวกของสองตัวก่อนหน้า: 0, 1, 1, 2, 3, 5, 8, 13... (ข้อสนุก: ลายนี้พบได้ทุกที่ในธรรมชาติ – เช่นเกลียวเมล็ดทานตะวัน, ลวดลายเมล็ดสน และแม้แต่การก่อตัวของกาแล็กซี!) -พร้อมดูความแตกต่างแล้ว? ไปกันเลย! +พร้อมดูความแตกต่างแล้วใช่ไหม? ไปกันเลย! -**ภาษาระดับสูง (JavaScript) – เป็นมิตรกับมนุษย์:** +**ภาษาเลเวลสูง (JavaScript) – เป็นมิตรกับคน:** ```javascript -// ขั้นตอนที่ 1: การตั้งค่า Fibonacci เบื้องต้น +// ขั้นตอนที่ 1: การตั้งค่าพื้นฐานของฟีโบนัชชี const fibonacciCount = 10; let current = 0; let next = 1; @@ -184,13 +184,13 @@ console.log('Fibonacci sequence:'); ``` **โค้ดนี้ทำอะไร:** -- **ประกาศ** ค่าคงที่เพื่อกำหนดจำนวนเลขฟีโบนัชชีที่ต้องการสร้าง -- **เริ่มต้น** ตัวแปรสองตัวเพื่อติดตามเลขปัจจุบันและเลขถัดไปในลำดับ -- **ตั้งค่า** ค่าต้นแบบ (0 กับ 1) สำหรับโครงสร้างฟีโบนัชชี -- **แสดง** ข้อความหัวเรื่องเพื่อบอกผลลัพธ์ของเรา +- **ประกาศ** ค่าคงที่เพื่อระบุจำนวนเลขฟีโบนักชีที่ต้องการสร้าง +- **เริ่ม** ตัวแปรสองตัวเพื่อติดตามเลขปัจจุบันและถัดไปในลำดับ +- **ตั้งค่า** ค่าต้น (0 และ 1) ที่ก่อตัวลำดับฟีโบนักชี +- **แสดง** หัวข้อเพื่อระบุผลลัพธ์ ```javascript -// ขั้นตอนที่ 2: สร้างลำดับด้วยการวนรอบ +// ขั้นตอนที่ 2: สร้างลำดับด้วยการใช้ลูป for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); @@ -201,11 +201,11 @@ for (let i = 0; i < fibonacciCount; i++) { } ``` -**อธิบายสิ่งที่เกิดขึ้น:** -- **วนลูป** ผ่านตำแหน่งแต่ละตัวในลำดับโดยใช้ `for` loop -- **แสดง** เลขแต่ละตัวพร้อมตำแหน่งโดยใช้รูปแบบข้อความแม่แบบ -- **คำนวณ** เลขฟีโบนัชชีถัดไปโดยบวกเลขปัจจุบันและถัดไป -- **อัปเดต** ตัวแปรติดตามเพื่อขยับไปลูปถัดไป +**แยกส่วนสิ่งที่เกิดขึ้น:** +- **วนลูป** ผ่านทุกตำแหน่งในลำดับด้วย `for` loop +- **แสดง** แต่ละตัวเลขพร้อมตำแหน่งโดยใช้ template literal +- **คำนวณ** เลขฟีโบนักชีตัวถัดไปโดยบวกค่าในปัจจุบันกับตัวถัดไป +- **อัปเดต** ตัวแปรเพื่อไปยังรอบถัดไป ```javascript // ขั้นตอนที่ 3: วิธีการเชิงฟังก์ชันสมัยใหม่ @@ -224,13 +224,13 @@ const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` -**ในข้างบน เราได้:** -- **สร้าง** ฟังก์ชันที่ใช้ซ้ำได้โดยใช้ไวยากรณ์ arrow function แบบสมัยใหม่ -- **สร้าง** อาร์เรย์เพื่อเก็บลำดับทั้งหมดแทนการแสดงทีละตัว -- **ใช้** ดัชนีอาร์เรย์คำนวณแต่ละตัวใหม่จากค่าก่อนหน้า -- **คืนค่า** ลำดับทั้งหมดเพื่อนำไปใช้ในส่วนอื่นของโปรแกรมได้อย่างยืดหยุ่น +**ในโค้ดด้านบน:** +- **สร้าง** ฟังก์ชันที่ใช้ซ้ำได้ด้วย syntax ลูกศรแบบใหม่ +- **สร้าง** อาร์เรย์เพื่อเก็บลำดับทั้งหมดแทนการแสดงผลทีละตัว +- **ใช้** ดัชนีอาร์เรย์คำนวณเลขใหม่จากค่าก่อนหน้า +- **ส่งคืน** ลำดับทั้งหมดเพื่อการใช้งานยืดหยุ่นในโปรแกรมส่วนอื่น -**ภาษาระดับต่ำ (ARM Assembly) – เป็นมิตรกับคอมพิวเตอร์:** +**ภาษาเลเวลต่ำ (ARM Assembly) – เป็นมิตรกับคอมพิวเตอร์:** ```assembly area ascen,code,readonly @@ -257,59 +257,59 @@ back add r0,r1 end ``` -สังเกตว่ารุ่น JavaScript อ่านเหมือนคำสั่งภาษาอังกฤษ ในขณะที่รุ่น Assembly ใช้คำสั่งลึกลับที่ควบคุมตัวประมวลผลโดยตรง ทั้งสองทำงานเดียวกัน แต่วิธีที่ภาษาระดับสูงทำให้คนเข้าใจ เขียน และดูแลได้ง่ายกว่ามาก +สังเกตว่าเวอร์ชัน JavaScript อ่านเหมือนคำสั่งภาษาอังกฤษ ในขณะที่ Assembly ใช้คำสั่งลึกลับที่ควบคุมโปรเซสเซอร์โดยตรง ทั้งสองอย่างทำงานเหมือนกันเป๊ะ แต่ภาษาเลเวลสูงเข้าใจง่ายกว่าเขียนและบำรุงรักษาสำหรับคนมาก -**ความแตกต่างหลักที่คุณจะเห็น:** -- **ความอ่านง่าย**: JavaScript ใช้ชื่อตัวแปรบอกความหมายเช่น `fibonacciCount` ในขณะที่ Assembly ใช้ป้ายชื่อที่ดูลึกลับเช่น `r0`, `r1` -- **คอมเมนต์**: ภาษาระดับสูงสนับสนุนการเขียนคอมเมนต์อธิบายเพื่อทำให้โค้ดสามารถอธิบายตัวเองได้ -- **โครงสร้าง**: ลำดับตรรกะของ JavaScript สอดคล้องกับวิธีที่คนคิดแก้ปัญหาเป็นขั้นตอน -- **การบำรุงรักษา**: การปรับเวอร์ชัน JavaScript ให้เหมาะกับความต้องการที่แตกต่างเป็นเรื่องง่ายและชัดเจน +**ความแตกต่างหลักที่คุณจะสังเกตเห็น:** +- **ความอ่านง่าย**: JavaScript ใช้ชื่อที่บรรยายความหมายชัดเจนเช่น `fibonacciCount` ขณะที่ Assembly ใช้ป้ายกำกับที่เข้าใจยากอย่าง `r0`, `r1` +- **คอมเมนต์**: ภาษาระดับสูงส่งเสริมให้มีคอมเมนต์ที่อธิบายชัดเจนซึ่งทำให้โค้ดเป็นเอกสารด้วยตัวเอง +- **โครงสร้าง**: โฟลว์เชิงตรรกะของ JavaScript สอดคล้องกับวิธีที่มนุษย์คิดแก้ปัญหาเป็นขั้นตอน +- **การบำรุงรักษา**: การอัพเดตเวอร์ชัน JavaScript สำหรับความต้องการที่ต่างกันเป็นเรื่องง่ายและชัดเจน -✅ **เกี่ยวกับลำดับฟีโบนัชชี**: รูปแบบตัวเลขที่สวยงามสุดยอดนี้ (ที่ตัวเลขแต่ละตัวเท่ากับผลบวกของสองตัวก่อนหน้า: 0, 1, 1, 2, 3, 5, 8...) ปรากฏแทบจะ *ทุกที่* ในธรรมชาติเลย! คุณจะพบในเกลียวของดอกทานตะวัน รูปแบบของต้นสน วิธีเปลือกหอยนอติลุสโค้งงอ และแม้แต่การแตกกิ่งของต้นไม้ มันน่าทึ่งมากที่คณิตศาสตร์และโค้ดช่วยให้เราเข้าใจและสร้า่งซ้ำแบบรูปแบบที่ธรรมชาติเกิดความสวยงามขึ้น! +✅ **เกี่ยวกับลำดับฟีโบนัชชี**: รูปแบบตัวเลขที่งดงามอย่างยิ่งนี้ (ที่แต่ละตัวเท่ากับผลบวกของสองตัวก่อนหน้า: 0, 1, 1, 2, 3, 5, 8...) ปรากฏอยู่ในธรรมชาติแทบจะ *ทุกที่*! คุณจะพบมันในเกลียวในดอกทานตะวัน, ลวดลายในเมล็ดสน, วิธีที่เปลือกหอยนอติลุสโค้ง และแม้แต่ในวิธีที่กิ่งไม้ต้นไม้เติบโต มันช่างน่าทึ่งที่คณิตศาสตร์และโค้ดช่วยให้เราเข้าใจและสร้างรูปแบบที่ธรรมชาติเข้าใจในการสร้างความงาม! -## บล็อกพื้นฐานที่สร้างความมหัศจรรย์ +## องค์ประกอบพื้นฐานที่ทำให้เวทมนตร์เกิดขึ้น -เอาล่ะ ทีนี้คุณได้เห็นว่าภาษาการเขียนโปรแกรมออกมาเป็นอย่างไรแล้ว มาแยกส่วนประกอบพื้นฐานที่เป็นส่วนประกอบของทุกโปรแกรมที่เคยเขียนกัน ดั่งส่วนผสมสำคัญในสูตรโปรดของคุณ — เมื่อคุณเข้าใจแต่ละส่วนแล้ว คุณจะอ่านและเขียนโค้ดได้แทบทุกภาษาเลย! +เอาล่ะ ตอนนี้ที่คุณได้เห็นภาษาการเขียนโปรแกรมทำงานอย่างไร ให้เรามาแยกส่วนประกอบพื้นฐานที่ประกอบขึ้นเป็นโปรแกรมทุกโปรแกรมที่เคยถูกเขียนขึ้น คิดว่าพวกนี้เหมือนส่วนผสมที่จำเป็นในสูตรอาหารที่คุณชอบ — เมื่อคุณเข้าใจว่าทุกส่วนทำอะไร คุณจะอ่านและเขียนโค้ดได้แทบทุกภาษา! -นี่ก็เหมือนการเรียนรู้ไวยากรณ์ของการเขียนโปรแกรม จำตอนที่คุณเรียนเกี่ยวกับคำนาม กริยา และการสร้างประโยคได้ไหม? การเขียนโปรแกรมก็มีไวยากรณ์ของมันเอง และพูดตามตรง มันมีตรรกะมากกว่าและให้อภัยกว่าการไวยากรณ์ภาษาอังกฤษมาก! 😄 +นี่ก็เหมือนกับการเรียนไวยากรณ์ของโปรแกรมมิ่ง จำได้ไหมตอนเรียนที่โรงเรียนพูดถึงคำนาม คำกริยา และวิธีต่อประโยค? การเขียนโปรแกรมก็มีไวยากรณ์ของตัวเอง และบอกเลยว่ามันมีเหตุผลมากกว่าและให้อภัยได้มากกว่าไวยากรณ์ภาษาอังกฤษเยอะ! 😄 -### คำสั่ง: คำแนะนำแบบทีละขั้นตอน +### คำสั่ง: คำแนะนำทีละขั้นตอน -มาเริ่มที่ **คำสั่ง** — เหล่านี้เหมือนประโยคแยกในบทสนทนากับคอมพิวเตอร์ของคุณ คำสั่งแต่ละอันบอกคอมพิวเตอร์ให้ทำสิ่งใดสิ่งหนึ่งเฉพาะ เหมือนให้คำแนะนำ: "เลี้ยวซ้ายตรงนี้," "หยุดที่ไฟแดง," "จอดรถตรงนั้น" +มาเริ่มต้นด้วย **คำสั่ง** – เหมือนประโยคเดียวในการสนทนากับคอมพิวเตอร์ของคุณ คำสั่งแต่ละประโยคบอกคอมพิวเตอร์ให้ทำสิ่งหนึ่งสิ่งที่เฉพาะเจาะจง เหมือนการให้ทิศทาง: "เลี้ยวซ้ายที่นี่," "หยุดที่สัญญาณไฟแดง," "จอดที่จุดนั้น" -สิ่งที่ผมชอบเกี่ยวกับคำสั่งคือความอ่านง่าย ลองดูนี่: +สิ่งที่ฉันชอบเกี่ยวกับคำสั่งคือความอ่านง่ายของมัน ลองดูสิ: ```javascript -// คำสั่งพื้นฐานที่ทำการกระทำเดียว +// คำสั่งพื้นฐานที่ทำงานเพียงอย่างเดียว const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` - -**โค้ดนี้ทำอะไร:** -- **ประกาศ** ตัวแปรคงที่เพื่อเก็บชื่อผู้ใช้ -- **แสดง** ข้อความทักทายออกไปยังคอนโซล -- **คำนวณ** และเก็บผลลัพธ์ของการคำนวณทางคณิตศาสตร์ + +**โค้ดนี้ทำอะไร:** +- **ประกาศ** ตัวแปรคงที่เพื่อเก็บชื่อนักใช้ +- **แสดง** ข้อความทักทายบนคอนโซล +- **คำนวณ** และเก็บผลลัพธ์จากการดำเนินการทางคณิตศาสตร์ ```javascript -// คำสั่งที่โต้ตอบกับหน้าเว็บ +// คำสั่งที่โต้ตอบกับเว็บเพจ document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` - -**ทีละขั้นตอน นี่คือสิ่งที่เกิดขึ้น:** -- **แก้ไข** ชื่อเว็บเพจที่แสดงในแท็บเบราว์เซอร์ -- **เปลี่ยน** สีพื้นหลังของส่วนเนื้อหาทั้งหมด -### ตัวแปร: ระบบความจำของโปรแกรมคุณ +**ทีละขั้นตอน นี่คือสิ่งที่เกิดขึ้น:** +- **แก้ไข** ชื่อเรื่องของเว็บเพจที่แสดงในแท็บเบราว์เซอร์ +- **เปลี่ยนสีพื้นหลัง** ของส่วนเนื้อหาทั้งหมดของหน้าเพจ + +### ตัวแปร: ระบบหน่วยความจำของโปรแกรมคุณ -โอเค, **ตัวแปร** เป็นหนึ่งในแนวคิดที่ผมชอบสอนมากที่สุดเพราะมันเหมือนกับสิ่งที่คุณใช้ทุกวันจริงๆ! +โอเค, **ตัวแปร** เป็นหนึ่งในแนวคิดที่ฉันชอบสอนมากที่สุดเพราะมันเหมือนสิ่งที่คุณใช้ในชีวิตประจำวัน! -ลองคิดถึงสมุดโทรศัพท์ในมือถือคุณชั่วครู่ คุณไม่ได้จดจำหมายเลขทุกคน — แต่บันทึกชื่ออย่าง “แม่,” “เพื่อนสนิท,” หรือ “ร้านพิซซ่าที่ส่งถึงตี 2” และปล่อยให้มือถือจำหมายเลขจริงแทน ตัวแปรก็ทำงานแบบเดียวกัน! เป็นเหมือนภาชนะที่ติดป้ายชื่อซึ่งโปรแกรมของคุณจะเก็บข้อมูลและเรียกใช้ทีหลังด้วยชื่อที่เข้าใจได้ +ลองนึกถึงรายชื่อผู้ติดต่อในโทรศัพท์ของคุณสักครู่ คุณไม่ได้จำหมายเลขโทรศัพท์ของทุกคน — แต่คุณบันทึกชื่อ "แม่," "เพื่อนสนิท," หรือ "ร้านพิซซ่าที่ส่งถึงตี 2" ให้โทรศัพท์จดจำหมายเลขจริง ตัวแปรก็ทำงานเหมือนกัน! มันเหมือนภาชนะมีป้ายชื่อที่โปรแกรมของคุณสามารถเก็บข้อมูลและนำมาใช้ได้โดยใช้ชื่อที่เข้าใจได้จริง -นี่คือสิ่งที่เจ๋งจริงๆ: ตัวแปรสามารถเปลี่ยนแปลงได้ในขณะที่โปรแกรมทำงาน (เพราะชื่อ “ตัวแปร” นั่นแหละ — เข้าใจเจตนาใช่ไหม?). เหมือนที่คุณอาจอัปเดตรายชื่อร้านพิซซ่าเมื่อตัวเลือกใหม่ที่ดีกว่ามา ตัวแปรก็อัปเดตได้เมื่อโปรแกรมเรียนรู้ข้อมูลใหม่หรือเมื่อสถานการณ์เปลี่ยนแปลง! +สิ่งที่เจ๋งที่สุด: ตัวแปรเปลี่ยนค่าได้ระหว่างการทำงานของโปรแกรม (จึงชื่อว่า "ตัวแปร" – ดูสิสิว่าพวกเขาคิดยังไง?) เช่นเดียวกับคุณอาจอัพเดตข้อมูลร้านพิซซ่าเมื่อพบร้านที่ดีกว่า ตัวแปรก็อัพเดตได้ขณะที่โปรแกรมเรียนรู้ข้อมูลใหม่หรือสถานการณ์เปลี่ยน! -ขอให้ผมแสดงให้ดูว่ามันง่ายแค่ไหน: +ให้ฉันแสดงวิธีที่เรียบง่ายอย่างสวยงามนี้: ```javascript // ขั้นตอนที่ 1: การสร้างตัวแปรพื้นฐาน @@ -318,12 +318,12 @@ let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` - -**เข้าใจแนวคิดเหล่านี้:** -- **เก็บ** ค่าที่ไม่เปลี่ยนแปลงในตัวแปร `const` (เช่น ชื่อไซต์) -- **ใช้** `let` สำหรับค่าที่อาจเปลี่ยนแปลงตลอดโปรแกรม -- **กำหนด** ประเภทข้อมูลต่างๆ: สตริง (ข้อความ), ตัวเลข, และบูลีน (จริง/เท็จ) -- **เลือก** ชื่อที่บอกอย่างชัดเจนว่าตัวแปรเก็บอะไร + +**ทำความเข้าใจแนวคิดเหล่านี้:** +- **เก็บ** ค่าที่ไม่เปลี่ยนแปลงในตัวแปร `const` (เช่นชื่อเว็บไซต์) +- **ใช้** `let` สำหรับค่าที่สามารถเปลี่ยนแปลงได้ตลอดโปรแกรม +- **กำหนด** ชนิดข้อมูลต่างๆ: สตริง (ข้อความ), ตัวเลข, และบูลีน (จริง/เท็จ) +- **เลือก** ชื่อที่บรรยายความหมายว่าแต่ละตัวแปรเก็บอะไร ```javascript // ขั้นตอนที่ 2: การทำงานกับอ็อบเจ็กต์เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้องกัน @@ -333,48 +333,48 @@ const weatherData = { windSpeed: 12 }; ``` - -**ในตัวอย่างข้างบน เราได้:** -- **สร้าง** อ็อบเจ็กต์เพื่อรวบรวมข้อมูลเกี่ยวกับสภาพอากาศ -- **จัดการ** ข้อมูลหลายชิ้นภายใต้ชื่อตัวแปรเดียว -- **ใช้** คู่คีย์-ค่าเพื่อระบุข้อมูลแต่ละชิ้นอย่างชัดเจน + +**ในตัวอย่างนี้เราได้:** +- **สร้าง** อ็อบเจกต์เพื่อรวมข้อมูลสภาพอากาศที่เกี่ยวข้องเข้าด้วยกัน +- **จัดระเบียบ** ข้อมูลหลายชิ้นไว้ภายใต้ชื่อตัวแปรเดียว +- **ใช้** คู่คีย์-ค่าเพื่อให้ป้ายชื่อข้อมูลแต่ละส่วนชัดเจน ```javascript -// ขั้นตอนที่ 3: การใช้และการอัปเดตตัวแปร +// ขั้นตอนที่ 3: การใช้และอัปเดตตัวแปร console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// การอัปเดตตัวแปรที่เปลี่ยนแปลงได้ +// การอัปเดตตัวแปรที่สามารถเปลี่ยนแปลงได้ currentWeather = "cloudy"; temperature = 68; ``` - -**มาทำความเข้าใจแต่ละส่วน:** -- **แสดง** ข้อมูลโดยใช้เทมเพลตลิเทอรัลด้วย `${}` -- **เข้าถึง** คุณสมบัติของอ็อบเจ็กต์โดยใช้จุด (`weatherData.windSpeed`) -- **อัปเดต** ตัวแปรที่ประกาศด้วย `let` เพื่อสะท้อนสภาพที่เปลี่ยนไป -- **รวม** ตัวแปรหลายตัวเพื่อสร้างข้อความที่มีความหมาย + +**มาเข้าใจแต่ละส่วนกัน:** +- **แสดง** ข้อมูลโดยใช้เทมเพลตลิเทอรัล `${}` +- **เข้าถึง** คุณสมบัติของอ็อบเจกต์โดยใช้จุด (`weatherData.windSpeed`) +- **อัปเดต** ตัวแปรที่ประกาศด้วย `let` เพื่อสะท้อนสภาพเปลี่ยนแปลง +- **ผสมผสาน** ตัวแปรหลายตัวเพื่อสร้างข้อความที่มีความหมาย ```javascript -// ขั้นตอนที่ 4: การแยกโครงสร้างแบบทันสมัยสำหรับโค้ดที่สะอาดขึ้น +// ขั้นตอนที่ 4: การทำลายโครงสร้างแบบทันสมัยสำหรับโค้ดที่สะอาดขึ้น const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` - -**ที่ควรทราบ:** -- **แยก** คุณสมบัติเฉพาะจากอ็อบเจ็กต์ด้วยการมอบหมายแบบ destructuring -- **สร้าง** ตัวแปรใหม่โดยอัตโนมัติที่มีชื่อเหมือนกับคีย์ของอ็อบเจ็กต์ -- **ทำให้โค้ดง่ายขึ้น** โดยหลีกเลี่ยงการใช้จุดซ้ำๆ -### ควบคุมลำดับโปรแกรม: สอนให้โปรแกรมคิด +**สิ่งที่ต้องรู้:** +- **แยก** คุณสมบัติเฉพาะจากอ็อบเจกต์โดยใช้การมอบหมายแบบแยกส่วน (destructuring assignment) +- **สร้าง** ตัวแปรใหม่โดยอัตโนมัติที่มีชื่อเดียวกับคีย์ของอ็อบเจกต์ +- **ทำให้โค้ดเรียบง่าย** โดยหลีกเลี่ยงการใช้จุดซ้ำๆ + +### การควบคุมโฟลว์: สอนโปรแกรมของคุณให้คิด -โอเค นี่แหละคือจุดที่การเขียนโปรแกรมสุดยอดมาก! **การควบคุมลำดับโปรแกรม** คือการสอนโปรแกรมให้ตัดสินใจอย่างชาญฉลาด เหมือนที่คุณทำทุกวันโดยไม่ต้องคิด +โอเค นี่คือจุดที่การเขียนโปรแกรมเริ่มน่าทึ่งอย่างแท้จริง! **การควบคุมโฟลว์** เป็นการสอนโปรแกรมของคุณให้ตัดสินใจอย่างชาญฉลาด เหมือนกับที่คุณทำทุกวันโดยแทบไม่ต้องคิดเลย -ลองนึกภาพว่าตอนเช้านี้คุณอาจผ่านเหตุการณ์แบบ “ถ้าฝนตกก็จะเอาร่ม ถ้าอากาศหนาวก็ใส่เสื้อแจ็กเก็ต ถ้าฉันสายก็ข้ามอาหารเช้าแล้วซื้อกาแฟระหว่างทาง” สมองคุณติดตามตรรกะ if-then นี้หลายสิบครั้งทุกวัน! +ลองจินตนาการสิ: เช้านี้คุณอาจผ่านกระบวนการตัดสินใจแบบ "ถ้าฝนตก ฉันจะหยิบร่ม ถ้าหนาว ฉันจะใส่เสื้อแจ็คเก็ต ถ้าฉันสาย ฉันจะไม่กินเช้าแล้วไปซื้อกาแฟระหว่างทาง" สมองของคุณทำตามตรรกะ if-then นี้นับสิบครั้งทุกวัน! -นี่คือสิ่งที่ทำให้โปรแกรมดูเหมือนฉลาดและมีชีวิต แทนที่จะทำตามสคริปต์น่าเบื่อที่คาดเดาได้ พวกมันสามารถดูเหตุการณ์ ประเมินสิ่งที่เกิดขึ้น และตอบสนองอย่างเหมาะสม เหมือนกับให้โปรแกรมมีสมองที่ปรับตัวและตัดสินใจได้! +นี่แหละที่ทำให้โปรแกรมรู้สึกฉลาดและมีชีวิตมากกว่าการทำตามสคริปต์ที่น่าเบื่อและเดาได้ พวกมันสามารถดูสถานการณ์ ประเมินสิ่งที่เกิดขึ้น และตอบสนองได้เหมาะสม เหมือนให้โปรแกรมมีสมองที่ปรับตัวและตัดสินใจได้! -อยากเห็นว่ามันทำงานอย่างไร? ให้ผมแสดง: +อยากเห็นว่างดงามแค่ไหน? ให้ฉันโชว์ให้ดู: ```javascript // ขั้นตอนที่ 1: ตรรกะเงื่อนไขพื้นฐาน @@ -387,15 +387,15 @@ if (userAge >= 18) { console.log(`You'll be able to vote in ${yearsToWait} year(s).`); } ``` - -**โค้ดนี้ทำอะไร:** -- **ตรวจสอบ** วัยของผู้ใช้ว่ามีสิทธิ์เลือกตั้งหรือไม่ -- **รัน** บล็อกโค้ดต่างๆ ตามผลลัพธ์ของเงื่อนไข -- **คำนวณ** และแสดงเวลาที่เหลือจนกว่าจะมีสิทธิเลือกตั้งหากอายุต่ำกว่า 18 -- **ให้** คำแนะนำที่เหมาะสมในแต่ละสถานการณ์ + +**โค้ดนี้ทำอะไร:** +- **ตรวจสอบ** ว่าผู้ใช้มีอายุถึงเกณฑ์ลงคะแนนหรือไม่ +- **ดำเนินการ** โค้ดต่างกันตามผลเงื่อนไข +- **คำนวณ** และแสดงเวลาที่เหลือจนกว่าจะมีสิทธิ์ลงคะแนนหากอายุน้อยกว่า 18 +- **ให้** ข้อมูลย้อนกลับที่ชัดเจนและเป็นประโยชน์สำหรับแต่ละสถานการณ์ ```javascript -// ขั้นตอนที่ 2: เงื่อนไขหลายอย่างพร้อมตัวดำเนินการเชิงตรรกะ +// ขั้นตอนที่ 2: เงื่อนไขหลายอย่างด้วยตัวดำเนินการตรรกะ const userAge = 17; const hasPermission = true; @@ -407,23 +407,23 @@ if (userAge >= 18 && hasPermission) { console.log("Sorry, you must be at least 16 years old."); } ``` - -**อธิบายสิ่งที่เกิดขึ้น:** -- **รวม** หลายเงื่อนไขด้วยตัวดำเนินการ `&&` (และ) -- **สร้าง** ลำดับชั้นของเงื่อนไขด้วย `else if` สำหรับหลายสถานการณ์ -- **จัดการ** ทุกกรณีด้วยคำสั่ง `else` สุดท้าย -- **ให้** คำแนะนำชัดเจนและทำได้จริงสำหรับแต่ละสถานการณ์ + +**แยกแยะสิ่งที่เกิดขึ้นที่นี่:** +- **รวม** เงื่อนไขหลายอย่างโดยใช้ตัวดำเนินการ `&&` (และ) +- **สร้าง** ลำดับชั้นของเงื่อนไขโดยใช้ `else if` สำหรับหลายสถานการณ์ +- **จัดการ** ทุกกรณีที่เป็นไปได้ด้วยคำสั่ง `else` สุดท้าย +- **ให้** ข้อมูลย้อนกลับที่ชัดเจนและใช้งานได้สำหรับแต่ละกรณี ```javascript -// ขั้นตอนที่ 3: เงื่อนไขแบบย่อด้วยตัวดำเนินการแบบเทอร์นารี +// ขั้นตอนที่ 3: เงื่อนไขสั้น ๆ ด้วยตัวดำเนินการเทอร์นารี const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` - -**สิ่งที่ควรจำ:** -- **ใช้** ตัวดำเนินการ ternary (`? :`) สำหรับเงื่อนไขสองทางง่ายๆ -- **เขียน** เงื่อนไขก่อน ตามด้วย `?` ผลลัพธ์ถ้าเป็นจริง แล้ว `:` ผลลัพธ์ถ้าเป็นเท็จ -- **ใช้** รูปแบบนี้เมื่อคุณต้องกำหนดค่าตามเงื่อนไข + +**สิ่งที่ต้องจำ:** +- **ใช้** ตัวดำเนินการเทอร์นารี (`? :`) สำหรับเงื่อนไขสองทางแบบง่าย +- **เขียน** เงื่อนไขก่อน ตามด้วย `?` ผลลัพธ์ถ้าเป็นจริง และ `:` ผลลัพธ์ถ้าเป็นเท็จ +- **ใช้** แบบนี้เมื่อต้องกำหนดค่าโดยขึ้นกับเงื่อนไข ```javascript // ขั้นตอนที่ 4: การจัดการกรณีเฉพาะหลายกรณี @@ -445,56 +445,56 @@ switch (dayOfWeek) { console.log("Invalid day of the week"); } ``` - -**โค้ดนี้ทำสิ่งต่อไปนี้:** -- **แมตช์** ค่าของตัวแปรกับหลายกรณีพิเศษ -- **จัดกลุ่ม** กรณีที่คล้ายกัน (วันธรรมดา vs วันสุดสัปดาห์) -- **รัน** บล็อกโค้ดที่เหมาะสมเมื่อพบแมตช์ -- **รวม** กรณี `default` เพื่อจัดการค่าที่ไม่คาดคิด -- **ใช้** คำสั่ง `break` เพื่อป้องกันการรันต่อกรณีถัดไป -> 💡 **ตัวอย่างในชีวิตจริง**: ลองนึกถึงการควบคุมลำดับโปรแกรมเหมือนมี GPS ที่ใจเย็นที่สุดในโลกคอยบอกทาง คุณอาจจะได้ยินว่า "ถ้ารถติดตรงถนนเมน ให้ใช้ทางด่วนแทน ถ้ามีการก่อสร้างกั้นทางด่วน ลองใช้เส้นทางชมวิว" โปรแกรมใช้ตรรกะเงื่อนไขแบบนี้เพื่อตอบสนองอย่างชาญฉลาดในสถานการณ์ต่าง ๆ และให้ประสบการณ์ที่ดีที่สุดแก่ผู้ใช้เสมอ +**โค้ดนี้ทำอะไร:** +- **จับคู่** ค่าตัวแปรกับกรณีเฉพาะหลายกรณี +- **จัดกลุ่ม** กรณีที่เหมือนกัน (วันธรรมดา vs วันหยุดสุดสัปดาห์) +- **ดำเนินการ** โค้ดที่เหมาะสมเมื่อเจอคู่ที่ตรงกัน +- **รวม** กรณี `default` เพื่อจัดการค่าที่ไม่คาดคิด +- **ใช้** คำสั่ง `break` เพื่อหยุดไม่ให้โค้ดยังทำงานต่อในกรณีถัดไป + +> 💡 **ตัวอย่างในชีวิตจริง**: คิดว่าการควบคุมโฟลว์เหมือนกับ GPS ที่ใจเย็นที่สุดในโลกที่ให้คำแนะนำ เช่น "ถ้ามีรถติดบนถนนเมน ให้ขึ้นทางด่วนแทน ถ้ามีการก่อสร้างบล็อกทางด่วน ให้ลองเส้นทางชมวิว" โปรแกรมก็ใช้ตรรกะเงื่อนไขแบบเดียวกันนี้ตอบสนองต่อสถานการณ์ต่างๆ อย่างชาญฉลาดและให้ประสบการณ์ที่ดีที่สุดแก่ผู้ใช้เสมอ -### 🎯 **ตรวจสอบแนวคิด: ความชำนาญบล็อกพื้นฐาน** +### 🎯 **ตรวจสอบความเข้าใจ: ความชำนาญขององค์ประกอบพื้นฐาน** -**มาดูกันว่าคุณเข้าใจพื้นฐานแค่ไหน:** -- คุณอธิบายความแตกต่างระหว่างตัวแปรและคำสั่งด้วยคำพูดของคุณเองได้ไหม? -- ลองคิดเหตุการณ์ในชีวิตจริงที่คุณจะใช้การตัดสินใจแบบ if-then (เหมือนตัวอย่างการเลือกตั้งของเรา) -- มีอะไรหนึ่งอย่างในตรรกะการเขียนโปรแกรมที่ทำให้คุณประหลาดใจไหม? +**มาดูกันว่าคุณเข้าใจพื้นฐานแค่ไหน:** +- คุณอธิบายความแตกต่างระหว่างตัวแปรกับคำสั่งได้ไหม ด้วยคำพูดของคุณเอง? +- ลองนึกสถานการณ์จริงที่คุณจะใช้การตัดสินใจ if-then (เหมือนตัวอย่างการลงคะแนนของเรา) +- มีอะไรเกี่ยวกับตรรกะการเขียนโปรแกรมที่ทำให้คุณประหลาดใจไหม? -**เพิ่มความมั่นใจอย่างรวดเร็ว:** +**เพิ่มความมั่นใจอย่างรวดเร็ว:** ```mermaid flowchart LR - A["📝 คำสั่ง
(คำแนะนำ)"] --> B["📦 ตัวแปร
(การจัดเก็บ)"] --> C["🔀 โฟลว์การควบคุม
(การตัดสินใจ)"] --> D["🎉 โปรแกรมที่ใช้งานได้!"] + A["📝 คำสั่ง
(คำแนะนำ)"] --> B["📦 ตัวแปร
(การเก็บข้อมูล)"] --> C["🔀 การควบคุมลำดับ
(การตัดสินใจ)"] --> D["🎉 โปรแกรมทำงาน!"] style A fill:#ffeb3b style B fill:#4caf50 style C fill:#2196f3 style D fill:#ff4081 -``` -✅ **สิ่งที่จะเกิดขึ้นต่อไป**: เราจะสนุกกันอย่างมากกับการเจาะลึกแนวคิดเหล่านี้ในขั้นตอนต่อไป! ตอนนี้ให้โฟกัสที่ความตื่นเต้นกับความเป็นไปได้มหัศจรรย์ที่รอคุณอยู่ ทักษะและเทคนิคเฉพาะจะซึมซับเข้ามาอย่างเป็นธรรมชาติเมื่อเราฝึกด้วยกัน — รับรองว่านี่จะสนุกกว่าที่คุณคิดเยอะ! +``` +✅ **สิ่งที่จะตามมา**: เรากำลังจะได้สนุกสุดๆ ดำลึกกับแนวคิดเหล่านี้ต่อไปในการเดินทางอันน่าทึ่งนี้ ตอนนี้แค่โฟกัสความตื่นเต้นกับทุกความเป็นไปได้ที่ยอดเยี่ยมข้างหน้า ทักษะและเทคนิคเฉพาะจะติดตัวคุณเองอย่างเป็นธรรมชาติเมื่อเราได้ฝึกฝนร่วมกัน — ฉันสัญญาว่ามันจะสนุกกว่าที่คุณคิดเยอะ! -## เครื่องมือในวงการ +## เครื่องมือแห่งการสร้างสรรค์ -เอาล่ะ ตรงนี้แหละที่ผมตื่นเต้นจนทนไม่ไหว! 🚀 เรากำลังจะพูดถึงเครื่องมือสุดเจ๋งที่จะทำให้คุณรู้สึกเหมือนได้กุญแจยานอวกาศดิจิทัลมาในมือ +โอเค นี่คือจุดที่ฉันตื่นเต้นจนแทบเก็บอารมณ์ไม่อยู่! 🚀 เรากำลังจะพูดถึงเครื่องมือสุดพิเศษที่จะทำให้คุณรู้สึกเหมือนเพิ่งได้รับกุญแจยานอวกาศดิจิทัล -คุณรู้ไหมว่ามือครัวมีมีดที่สมดุลอย่างสมบูรณ์แบบที่เหมือนเป็นส่วนต่อขยายของมือเจ้า หรือมือกีต้าร์มีตัวกีต้าร์ที่เหมือนร้องเพลงทันทีที่สัมผัส? นักพัฒนาก็มีเครื่องมือเวอร์ชันเวทมนตร์แบบนี้ของตัวเอง และนี่คือสิ่งที่จะทำให้คุณตะลึง — เครื่องมือส่วนใหญ่เหล่านี้ฟรีทั้งหมด! +คุณรู้ไหมว่าเชฟมีมีดที่สมดุลอย่างลงตัวเหมือนเป็นส่วนหนึ่งของมือ? หรือมือกีตาร์ที่รู้สึกเหมือนมันร้องเพลงทันทีที่สัมผัส? นักพัฒนามีกลุ่มเครื่องมือวิเศษแบบเดียวกัน และนี่คือสิ่งที่จะทำให้คุณอ้าปากค้าง – ส่วนใหญ่ฟรีทั้งหมด! -ผมแทบจะกระโดดไปมาไปมาในเก้าอี้เพราะตื่นเต้นที่จะแบ่งปันสิ่งเหล่านี้กับคุณ เพราะมันปฏิวัติวิธีที่เราสร้างซอฟต์แวร์เลย เรากำลังพูดถึงผู้ช่วยเขียนโค้ดที่ใช้ AI ที่ช่วยเขียนโค้ดของคุณได้ (ผมไม่ได้ล้อเล่น!), สภาพแวดล้อมบนคลาวด์ที่คุณสามารถสร้างแอปพลิเคชันทั้งตัวได้จากทุกที่ที่มี Wi-Fi และเครื่องมือดีบักที่ซับซ้อนจนเหมือนมีวิสัยทัศน์เอ็กซ์เรย์สำหรับโปรแกรมของคุณ +ฉันกระโดดไปมาในเก้าอี้เพราะอยากแชร์สิ่งพวกนี้กับคุณมาก เพราะมันเปลี่ยนวิธีที่เราสร้างซอฟต์แวร์อย่างสิ้นเชิง เรากำลังพูดถึงผู้ช่วยเขียนโค้ดที่ขับเคลื่อนด้วย AI ที่ช่วยคุณเขียนโค้ด (ไม่ได้ล้อเล่น!), สภาพแวดล้อมคลาวด์ที่คุณสร้างแอปได้จากที่ไหนก็ได้ที่มี Wi-Fi และเครื่องมือดีบั๊กที่ซับซ้อนเหมือนมีสายตาเอกซ์เรย์สำหรับโปรแกรมของคุณ -และนี่คือส่วนที่ยังทำให้ผมรู้สึกตื่นเต้น: เหล่านี้ไม่ใช่ “เครื่องมือสำหรับมือใหม่” ที่คุณจะโตเกินไปแล้วต้องทิ้ง เหล่านี้คือเครื่องมือระดับมืออาชีพเดียวกับที่นักพัฒนาที่ Google, Netflix และสตูดิโอแอพอิสระที่คุณชื่นชอบใช้ในขณะนี้ คุณจะรู้สึกเหมือนเป็นโปรฯ ตัวจริงเมื่อใช้พวกมัน! +และนี่คือส่วนที่ยังทำให้ฉันรู้สึกขนลุก: เครื่องมือเหล่านี้ไม่ใช่ "เครื่องมือสำหรับมือใหม่" ที่คุณจะต้องเลิกใช้ภายหลัง แต่นี่คือเครื่องมือระดับมืออาชีพที่นักพัฒนาที่ Google, Netflix และสตูดิโอแอปอินดี้ที่คุณชื่นชอบใช้กันในเวลานี้ คุณจะรู้สึกเหมือนมือโปรเลยล่ะที่ใช้พวกนี้! ```mermaid graph TD A["💡 ไอเดียของคุณ"] --> B["⌨️ ตัวแก้ไขโค้ด
(VS Code)"] - B --> C["🌐 เครื่องมือพัฒนาเบราว์เซอร์
(ทดสอบ & ดีบัก)"] + B --> C["🌐 เครื่องมือพัฒนาเบราว์เซอร์
(การทดสอบ & ดีบัก)"] C --> D["⚡ บรรทัดคำสั่ง
(อัตโนมัติ & เครื่องมือ)"] - D --> E["📚 เอกสาร
(การเรียนรู้ & อ้างอิง)"] - E --> F["🚀 แอปเว็บสุดเจ๋ง!"] + D --> E["📚 เอกสารประกอบ
(การเรียนรู้ & การอ้างอิง)"] + E --> F["🚀 เว็บแอปที่น่าทึ่ง!"] B -.-> G["🤖 ผู้ช่วย AI
(GitHub Copilot)"] - C -.-> H["📱 การทดสอบอุปกรณ์
(ออกแบบตอบสนอง)"] - D -.-> I["📦 ตัวจัดการแพ็กเกจ
(npm, yarn)"] + C -.-> H["📱 การทดสอบอุปกรณ์
(การออกแบบตอบสนอง)"] + D -.-> I["📦 ตัวจัดการแพ็คเกจ
(npm, yarn)"] E -.-> J["👥 ชุมชน
(Stack Overflow)"] style A fill:#fff59d @@ -503,121 +503,121 @@ graph TD style H fill:#f3e5f5 style I fill:#ffccbc style J fill:#e8eaf6 -``` -### ตัวแก้ไขโค้ดและ IDE: เพื่อนดิจิทัลใหม่ของคุณ +``` +### ตัวแก้ไขโค้ดและ IDEs: เพื่อนดิจิทัลใหม่ของคุณ -มาพูดถึงตัวแก้ไขโค้ดกัน — พวกนี้กำลังจะเป็นสถานที่โปรดที่คุณอยากอยู่! ลองคิดว่าเป็นที่ที่คุณหลบภัยส่วนตัวในการเขียนโค้ดที่คุณจะใช้เวลาส่วนใหญ่สร้างสรรค์และปรับแต่งผลงานดิจิทัลของคุณ +มาพูดถึงตัวแก้ไขโค้ดกัน — เหล่านี้กำลังจะกลายเป็นสถานที่โปรดใหม่ของคุณ! คิดว่ามันเหมือนสำนักเขียนโค้ดส่วนตัวที่คุณจะใช้เวลาส่วนใหญ่สร้างและปรับปรุงผลงานดิจิทัลของคุณ -แต่สิ่งที่น่ามหัศจรรย์เกี่ยวกับตัวแก้ไขสมัยใหม่คือ — พวกมันไม่ใช่แค่โปรแกรมแก้ไขข้อความหรูหรา แต่เหมือนมีโค้ชเขียนโค้ดอัจฉริยะและคอยช่วยเหลืออยู่ข้างๆ คุณตลอด 24 ชั่วโมง 7 วัน พวกมันจับคำพิมพ์ผิดก่อนที่คุณจะรู้สึกตัว เสนอแนะแนวทางที่ทำให้คุณดูเก่ง ช่วยคุณเข้าใจโค้ดทุกบรรทัด และบางตัวแม้จะเดาว่าคุณกำลังจะพิมพ์อะไรและเสนอที่จะเติมความคิดของคุณ! +แต่สิ่งที่วิเศษสุดเกี่ยวกับตัวแก้ไขสมัยใหม่คือมันไม่ใช่แค่ตัวแก้ไขข้อความสวยๆ พวกมันเหมือนมีที่ปรึกษาการเขียนโค้ดที่ฉลาดและสนับสนุนคุณนั่งอยู่ข้างๆ ตลอด 24/7 ตัวแก้ไขจะจับคำพิมพ์ผิดก่อนที่คุณจะรู้ตัว, แนะนำสิ่งที่ทำให้คุณดูฉลาด, ช่วยคุณเข้าใจโค้ดทุกบรรทัด และบางตัวก็ทำนายว่าคุณจะพิมพ์อะไรต่อและเสนอช่วยเติมคำให้! -ผมจำได้เมื่อค้นพบฟีเจอร์เติมโค้ดอัตโนมัติครั้งแรก — รู้สึกเหมือนอยู่ในโลกอนาคต พิมพ์อะไรก็มีตัวแก้ไขบอกว่า “เฮ้ คุณกำลังนึกถึงฟังก์ชันนี้ที่ทำงานแบบที่คุณต้องการหรือเปล่า?” เหมือนมีเพื่อนที่อ่านใจในโค้ด! +ฉันจำได้ว่าตอนค้นพบฟีเจอร์เติมโค้ดอัตโนมัติครั้งแรก — รู้สึกเหมือนอยู่ในอนาคตจริงๆ เริ่มพิมพ์อะไร ตัวแก้ไขก็บอกว่า "เฮ้ คุณกำลังคิดถึงฟังก์ชันนี้ที่ทำสิ่งที่คุณต้องการอยู่หรือเปล่า?" เหมือนมีเพื่อนอ่านใจเป็นเพื่อนเขียนโค้ด! -**อะไรทำให้ตัวแก้ไขเหล่านี้น่าทึ่ง?** +**อะไรทำให้ตัวแก้ไขโค้ดพวกนี้สุดยอด?** -ตัวแก้ไขโค้ดสมัยใหม่มีฟีเจอร์มากมายที่ออกแบบมาเพื่อเพิ่มประสิทธิภาพ: +ตัวแก้ไขโค้ดสมัยใหม่มีฟีเจอร์หลากหลายที่ช่วยเพิ่มประสิทธิภาพของคุณ: -| ฟีเจอร์ | ทำอะไร | ทำไมช่วย | -|---------|---------|----------| -| **เน้นไวยากรณ์** | ลงสีส่วนต่างๆ ของโค้ด | ทำให้โค้ดอ่านง่ายและหาข้อผิดพลาดได้สะดวก | -| **เติมโค้ดอัตโนมัติ** | เสนอคำสั่งโค้ดขณะพิมพ์ | เร่งความเร็วการเขียนโค้ดและลดคำผิด | -| **เครื่องมือดีบัก** | ช่วยหาจุดผิดพลาดและแก้ไข | ประหยัดเวลาหลายชั่วโมงในการตรวจสอบข้อผิดพลาด | -| **ส่วนเสริม** | เพิ่มฟีเจอร์เฉพาะทาง | ปรับแต่งตัวแก้ไขให้เหมาะกับเทคโนโลยีต่างๆ | -| **ผู้ช่วย AI** | เสนอโค้ดและคำอธิบาย | เร่งการเรียนรู้และเพิ่มผลผลิต | +| คุณสมบัติ | ทำอะไร | ช่วยได้อย่างไร | +|---------|--------------|--------------| +| **การเน้นไวยากรณ์** | ลงสีส่วนต่างๆของโค้ด | ทำให้โค้ดอ่านง่ายและเห็นข้อผิดพลาด | +| **เติมโค้ดอัตโนมัติ** | แนะนำโค้ดขณะพิมพ์ | เร่งความเร็วการเขียนโค้ดและลดการพิมพ์ผิด | +| **เครื่องมือดีบั๊ก** | ช่วยค้นหาและแก้ไขข้อผิดพลาด | ประหยัดเวลาการแก้ปัญหาหลายชั่วโมง | +| **ส่วนขยาย** | เพิ่มฟีเจอร์เฉพาะทาง | ปรับแต่งตัวแก้ไขให้เหมาะกับเทคโนโลยีต่างๆ | +| **ผู้ช่วย AI** | แนะนำโค้ดและคำอธิบาย | เร่งการเรียนรู้และเพิ่มผลผลิต | -> 🎥 **แหล่งวิดีโอ**: อยากเห็นเครื่องมือเหล่านี้ทำงานใช่ไหม? ดูวิดีโอ [Tools of the Trade](https://youtube.com/watch?v=69WJeXGBdxg) เพื่อภาพรวมที่ครบถ้วน +> 🎥 **วิดีโอแนะนำ**: อยากเห็นเครื่องมือเหล่านี้ทำงานจริง? ดูวิดีโอ [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) สำหรับภาพรวมโดยละเอียด -#### ตัวแก้ไขแนะนำสำหรับเว็บดีเวลอปเมนต์ +#### ตัวแก้ไขที่แนะนำสำหรับการพัฒนาเว็บ -**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (ฟรี) -- ได้รับความนิยมสูงสุดในหมู่นักพัฒนาเว็บ -- มีระบบส่วนเสริมที่ยอดเยี่ยม -- มีเทอร์มินัลและการรวม Git ในตัว -- **ส่วนเสริมที่ควรมี**: - - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - แนะนำโค้ดด้วย AI - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ทำงานร่วมกันแบบเรียลไทม์ - - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ฟอร์แมตโค้ดอัตโนมัติ - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - ตรวจคำผิดในโค้ด +**[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (ฟรี) +- เป็นที่นิยมที่สุดในหมู่นักพัฒนาเว็บ +- มีระบบส่วนขยายที่ยอดเยี่ยม +- มีเทอร์มินัลและรวม Git ในตัว +- **ส่วนขยายจำเป็น**: + - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - แนะนำโค้ดด้วย AI + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - ทำงานร่วมกันแบบเรียลไทม์ + - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - ฟอร์แมตโค้ดอัตโนมัติ + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - ตรวจจับคำพิมพ์ผิดในโค้ดของคุณ -**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (เสียเงิน, ฟรีสำหรับนักเรียน) -- เครื่องมือ debug และทดสอบขั้นสูง -- เติมโค้ดอัจฉริยะ -- ระบบควบคุมเวอร์ชันในตัว +**[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (เสียเงิน, ฟรีสำหรับนักเรียน) +- เครื่องมือดีบั๊กและทดสอบขั้นสูง +- เติมโค้ดอัจฉริยะ +- รวมระบบควบคุมเวอร์ชันในตัว -**IDE บนคลาวด์** (ราคาหลากหลาย) -- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code เต็มรูปแบบในเบราว์เซอร์ -- [Replit](https://replit.com/) - ดีสำหรับเรียนรู้และแชร์โค้ด -- [StackBlitz](https://stackblitz.com/) - สร้างเว็บแอปเต็มสแตกทันที +**IDEs บนคลาวด์** (ราคาแตกต่างกัน) +- [GitHub Codespaces](https://github.com/features/codespaces) - VS Code เต็มรูปแบบในเบราว์เซอร์คุณ +- [Replit](https://replit.com/) - ดีมากสำหรับเรียนรู้และแชร์โค้ด +- [StackBlitz](https://stackblitz.com/) - พัฒนาเว็บแบบเต็มสแตกทันที -> 💡 **คำแนะนำเริ่มต้น**: เริ่มต้นกับ Visual Studio Code – ฟรี ใช้กันเยอะในวงการ และมีชุมชนขนาดใหญ่ที่สร้างบทเรียนและส่วนเสริมช่วยเหลือ +> 💡 **คำแนะนำสำหรับเริ่มต้น**: เริ่มที่ Visual Studio Code — ฟรี ใช้กันทั่วไปในวงการ และมีชุมชนใหญ่มากที่สร้างคำแนะนำและส่วนขยายช่วยเหลือ -### เว็บเบราว์เซอร์: ห้องทดลองนักพัฒนาลับของคุณ +### เว็บเบราว์เซอร์: ห้องแล็บพัฒนาลับของคุณ -โอเค เตรียมตัวให้ใจสั่นไปกับเรื่องนี้! คุณรู้อยู่แล้วว่าใช้เบราว์เซอร์เพื่อเลื่อนดูโซเชียลและดูวิดีโอ แต่จริงๆ แล้วมันซ่อนห้องทดลองนักพัฒนาลับที่น่าเหลือเชื่อมานานแล้ว รอให้คุณค้นพบ! +โอเค เตรียมตัวให้พร้อมกับความประหลาดใจสุด ๆ! คุณรู้ว่าคุณใช้เบราว์เซอร์เพื่อเลื่อนดูโซเชียลมีเดียและดูวิดีโอใช่ไหม? ปรากฏว่าตลอดเวลาที่ผ่านมา พวกมันซ่อนไปด้วยห้องแล็บพัฒนาที่น่าอัศจรรย์นี้ รอให้คุณค้นพบ! -ทุกครั้งที่คุณคลิกขวาบนหน้าเว็บและเลือก "Inspect Element" คุณกำลังเปิดโลกที่ซ่อนเร้นของเครื่องมือนักพัฒนาซึ่งมีพลังมากกว่าซอฟต์แวร์แพงๆ ที่ผมเคยจ่ายไปหลายร้อยดอลลาร์ มันเหมือนค้นพบว่าครัวธรรมดาของคุณมีห้องทดลองเชฟมืออาชีพซ่อนอยู่หลังแผงลับ! -ครั้งแรกที่ใครสักคนแสดงให้ฉันดู browser DevTools ฉันใช้เวลาประมาณสามชั่วโมงแค่คลิกไปมาแล้วพูดว่า "เดี๋ยวนะ มันทำแบบนั้นได้ด้วยเหรอ?!" คุณสามารถแก้ไขเว็บไซต์ใดก็ได้แบบเรียลไทม์ ดูว่าแต่ละอย่างโหลดเร็วแค่ไหน ทดสอบว่าสไตล์เว็บของคุณเป็นอย่างไรบนอุปกรณ์ต่าง ๆ และแม้แต่ดีบัก JavaScript เหมือนมือโปรจริง ๆ มันน่าทึ่งสุด ๆ เลย! +ทุกครั้งที่คุณคลิกขวาบนหน้าเว็บแล้วเลือก "Inspect Element" คุณกำลังเปิดโลกที่ซ่อนอยู่ของเครื่องมือสำหรับนักพัฒนาที่ทรงพลังกว่าซอฟต์แวร์แพงๆ ที่ฉันเคยจ่ายเป็นร้อยดอลลาร์อย่างมากมาย มันเหมือนกับการค้นพบว่าครัวธรรมดาของคุณซ่อนห้องแล็บเชฟมืออาชีพไว้หลังแผงลับ! +ครั้งแรกที่มีคนสอนฉันเกี่ยวกับ DevTools ของเบราว์เซอร์ ฉันใช้เวลาประมาณสามชั่วโมงแค่คลิกดูไปรอบๆ แล้วก็พูดว่า "รอเดี๋ยว มันทำแบบนี้ได้ด้วยเหรอ?!" คุณสามารถแก้ไขเว็บไซต์ใดๆ ได้ในเวลาจริง เห็นความเร็วการโหลดอย่างชัดเจน ทดลองดูว่าหน้าเว็บของคุณจะเป็นอย่างไรบนอุปกรณ์ต่างๆ และแม้แต่ดีบัก JavaScript เหมือนมือโปรเลย มันน่าทึ่งสุดๆ! -**นี่คือเหตุผลว่าทำไมเบราว์เซอร์ถึงเป็นอาวุธลับของคุณ:** +**นี่คือเหตุผลที่ทำไมเบราว์เซอร์จึงเป็นอาวุธลับของคุณ:** -เมื่อคุณสร้างเว็บไซต์หรือแอปเว็บ คุณจำเป็นต้องเห็นว่ามันดูเป็นอย่างไรและทำงานอย่างไรในโลกจริง เบราว์เซอร์ไม่เพียงแค่แสดงผลงานของคุณ แต่ยังให้ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ การเข้าถึง และปัญหาที่อาจเกิดขึ้นอย่างละเอียด +เมื่อคุณสร้างเว็บไซต์หรือแอปเว็บ คุณต้องเห็นว่ามันดูและทำงานอย่างไรในโลกจริง เบราว์เซอร์ไม่เพียงแสดงผลงานของคุณแต่ยังให้ข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ การเข้าถึง และปัญหาที่อาจเกิดขึ้นได้อย่างละเอียด #### เครื่องมือสำหรับนักพัฒนาเบราว์เซอร์ (DevTools) -เบราว์เซอร์สมัยใหม่มีชุดเครื่องมือพัฒนาอย่างครบถ้วน: +เบราว์เซอร์สมัยใหม่มีชุดพัฒนาแบบครบวงจร: -| หมวดเครื่องมือ | ทำอะไรได้บ้าง | ตัวอย่างการใช้งาน | +| หมวดหมู่เครื่องมือ | การทำงาน | ตัวอย่างการใช้งาน | |---------------|--------------|------------------| -| **เครื่องมือตรวจสอบองค์ประกอบ (Element Inspector)** | ดูและแก้ไข HTML/CSS แบบเรียลไทม์ | ปรับแต่งสไตล์เพื่อดูผลลัพธ์ทันที | -| **คอนโซล (Console)** | ดูข้อความผิดพลาดและทดสอบ JavaScript | ดีบักปัญหาและทดลองโค้ด | -| **ตัวตรวจสอบเครือข่าย (Network Monitor)** | ติดตามการโหลดทรัพยากร | ปรับปรุงประสิทธิภาพและเวลาโหลด | -| **ตัวตรวจสอบการเข้าถึง (Accessibility Checker)** | ทดสอบการออกแบบที่ครอบคลุม | ให้แน่ใจว่าเว็บไซต์ของคุณใช้งานได้สำหรับทุกคน | -| **อุปกรณ์จำลอง (Device Simulator)** | ดูตัวอย่างบนขนาดหน้าจอต่าง ๆ | ทดสอบดีไซน์ตอบสนองโดยไม่ต้องมีอุปกรณ์หลายชิ้น | +| **Element Inspector** | ดูและแก้ไข HTML/CSS แบบเรียลไทม์ | ปรับแต่งสไตล์เพื่อดูผลลัพธ์ทันที | +| **Console** | ดูข้อความแจ้งข้อผิดพลาดและทดสอบ JavaScript | ดีบักปัญหาและทดลองโค้ด | +| **Network Monitor** | ติดตามการโหลดทรัพยากร | ปรับปรุงประสิทธิภาพและเวลาการโหลด | +| **Accessibility Checker** | ทดสอบการออกแบบที่ครอบคลุม | ตรวจสอบว่าไซต์ของคุณใช้งานได้สำหรับทุกคน | +| **Device Simulator** | ดูตัวอย่างบนหน้าจอขนาดต่างๆ | ทดสอบการออกแบบตอบสนองโดยไม่ต้องใช้หลายอุปกรณ์ | -#### เบราว์เซอร์แนะนำสำหรับการพัฒนา +#### เบราว์เซอร์ที่แนะนำสำหรับการพัฒนา -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools มาตรฐานอุตสาหกรรมพร้อมเอกสารครอบคลุม -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - เครื่องมือ CSS Grid และการเข้าถึงที่ยอดเยี่ยม -- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - สร้างบน Chromium พร้อมทรัพยากรสำหรับนักพัฒนาของ Microsoft +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - DevTools มาตรฐานอุตสาหกรรมพร้อมเอกสารอย่างละเอียด +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - เครื่องมือดีมากสำหรับ CSS Grid และการเข้าถึง +- **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - สร้างบน Chromium พร้อมทรัพยากรนักพัฒนาของ Microsoft -> ⚠️ **เคล็ดลับการทดสอบสำคัญ**: ทดสอบเว็บไซต์ของคุณในเบราว์เซอร์หลายตัวเสมอ! สิ่งที่ทำงานได้ดีใน Chrome อาจดูต่างใน Safari หรือ Firefox นักพัฒนามืออาชีพจึงทดสอบในทุกเบราว์เซอร์หลักเพื่อให้ผู้ใช้ได้รับประสบการณ์ที่สอดคล้องกัน +> ⚠️ **คำแนะนำสำคัญในการทดสอบ**: ทดสอบเว็บไซต์ของคุณในเบราว์เซอร์หลายตัวเสมอ! สิ่งที่ทำงานได้อย่างสมบูรณ์ใน Chrome อาจดูแตกต่างใน Safari หรือ Firefox นักพัฒนามืออาชีพทดสอบในทุกเบราว์เซอร์หลักเพื่อให้ประสบการณ์ผู้ใช้สอดคล้องกัน -### เครื่องมือบรรทัดคำสั่ง: ประตูสู่พลังของนักพัฒนา +### เครื่องมือบรรทัดคำสั่ง: ประตูสู่พลังเวทมนตร์ของนักพัฒนา -เอาล่ะ มาพูดตรง ๆ กันหน่อยเกี่ยวกับบรรทัดคำสั่ง เพราะฉันอยากให้คุณได้ยินจากคนที่เข้าใจจริง ๆ ตอนแรกที่ฉันเห็นมัน — แค่หน้าจอดำที่มีข้อความกระพริบ — ฉันคิดในใจว่า "ไม่เอาน่า ไม่มีทาง! มันเหมือนฉากจากหนังแฮกเกอร์ยุค 1980 แล้วฉันก็ไม่ฉลาดพอจะใช้!" 😅 +เอาล่ะ มาช่วงเวลาที่ตรงไปตรงมาสักหน่อยเกี่ยวกับบรรทัดคำสั่ง เพราะฉันอยากให้คุณได้ยินจากคนที่เข้าใจจริงๆ เมื่อฉันเห็นมันครั้งแรก—แค่จอสีดำที่มีข้อความกะพริบ ฉันคิดจริงๆ ว่า "ไม่ล่ะ ไม่มีทาง! มันดูเหมือนฉากในหนังแฮกเกอร์ยุค 1980 แล้วฉันไม่ฉลาดพอแน่ๆ!" 😅 -แต่สิ่งที่ฉันหวังว่ามีคนบอกฉันตอนนั้น และตอนนี้บอกคุณคือ: บรรทัดคำสั่งไม่ได้ดูน่ากลัว — มันเหมือนกับการสนทนาโดยตรงกับคอมพิวเตอร์คุณเลย คิดซะว่ามันเหมือนการสั่งอาหารผ่านแอปหรูที่มีรูปภาพและเมนู (ซึ่งสะดวกและง่าย) เทียบกับการเดินเข้าไปร้านอาหารท้องถิ่นที่เชฟรู้ว่าคุณชอบอะไรและทำเมนูสุดพิเศษให้แค่คุณพูดว่า "เซอร์ไพรส์ด้วยอะไรเจ๋ง ๆ" +แต่สิ่งที่ฉันอยากมีคนบอกฉันตอนนั้น และฉันกำลังบอกคุณตอนนี้: บรรทัดคำสั่งไม่ได้น่ากลัวเลย—มันเหมือนพูดคุยโดยตรงกับคอมพิวเตอร์ของคุณ ลองคิดว่ามันเหมือนความแตกต่างระหว่างสั่งอาหารผ่านแอปที่สวยงามมีรูปและเมนู (ซึ่งง่ายและสะดวก) กับการเดินเข้าไปร้านอาหารท้องถิ่นที่พ่อครัวรู้ว่าคุณชอบอะไรและทำของอร่อยให้คุณแค่พูดว่า "เซอร์ไพรส์ฉันด้วยอะไรเจ๋งๆ" -บรรทัดคำสั่งคือที่ที่นักพัฒนาไปเพื่อรู้สึกเหมือนพ่อมดตัวจริง คุณพิมพ์คำสั่งที่ดูเหมือนเวทมนตร์ (เอาหน่า มันแค่คำสั่ง แต่รู้สึกเหมือนเวทมนตร์!), กด enter แล้ว บูม! — คุณได้สร้างโครงสร้างโปรเจกต์ทั้งหมด ติดตั้งเครื่องมือทรงพลังจากทั่วโลก หรือดีพลอยแอปของคุณไปยังอินเทอร์เน็ตให้ผู้คนนับล้านดูแล้ว เมื่อลองชิมพลังนี้ครั้งแรกแล้ว มันติดใจแน่นอน! +บรรทัดคำสั่งคือที่ๆ นักพัฒนาไปเพื่อรู้สึกเหมือนพ่อมดจริงๆ คุณพิมพ์คำสั่งที่ดูเหมือนเวทมนตร์ (โอเค มันแค่คำสั่ง แต่มันรู้สึกเหมือนเวทมนตร์นั่นแหละ) กด enter แล้ว BOOM — คุณสร้างโครงสร้างโปรเจกต์ทั้งโปรเจกต์ ติดตั้งเครื่องมือทรงพลังจากทั่วโลก หรือดีพลอยแอปของคุณขึ้นอินเทอร์เน็ตให้ผู้คนนับล้านเห็น ทันทีที่คุณได้ลิ้มรสความสามารถนั้น มันติดใจมากจริงๆ! -**ทำไมบรรทัดคำสั่งจะกลายเป็นเครื่องมือโปรดของคุณ:** +**ทำไมบรรทัดคำสั่งถึงกลายเป็นเครื่องมือโปรดของคุณ:** -ในขณะที่ส่วนติดต่อกราฟิกเหมาะกับงานหลายอย่าง บรรทัดคำสั่งเด่นด้านงานอัตโนมัติ ความแม่นยำ และความเร็ว เครื่องมือพัฒนาหลายตัวทำงานผ่าน CLI เป็นหลัก และการรู้วิธีใช้มันอย่างมีประสิทธิภาพสามารถช่วยเพิ่มผลผลิตของคุณได้มาก +แม้ว่าระบบกราฟิกจะดีสำหรับหลายงาน แต่บรรทัดคำสั่งเชี่ยวชาญเรื่องอัตโนมัติ ความแม่นยำ และความเร็ว เครื่องมือพัฒนาหลายตัวทำงานผ่านอินเทอร์เฟซบรรทัดคำสั่งเป็นหลัก และการเรียนรู้ใช้งานอย่างมีประสิทธิภาพจะช่วยเพิ่มผลผลิตของคุณอย่างมาก ```bash -# ขั้นตอนที่ 1: สร้างและไปยังโฟลเดอร์โปรเจกต์ +# ขั้นตอนที่ 1: สร้างและไปที่ไดเรกทอรีโปรเจกต์ mkdir my-awesome-website cd my-awesome-website ``` **โค้ดนี้ทำอะไร:** - **สร้าง** โฟลเดอร์ใหม่ชื่อ "my-awesome-website" สำหรับโปรเจกต์ของคุณ -- **เข้าไปยัง** โฟลเดอร์ที่สร้างขึ้นเพื่อเริ่มทำงาน +- **เปลี่ยนเข้าไปในโฟลเดอร์ที่สร้างขึ้น** เพื่อเริ่มทำงาน ```bash # ขั้นตอนที่ 2: เริ่มต้นโครงการด้วย package.json npm init -y -# ติดตั้งเครื่องมือพัฒนาใหม่ ๆ +# ติดตั้งเครื่องมือพัฒนาที่ทันสมัย npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**ทีละขั้นตอน สิ่งที่เกิดขึ้นคือ:** -- **เริ่มต้น** โปรเจกต์ Node.js ใหม่ด้วยการตั้งค่าเริ่มต้นโดยใช้ `npm init -y` -- **ติดตั้ง** Vite เป็นเครื่องมือ build สมัยใหม่สำหรับการพัฒนาและ build ที่รวดเร็ว +**ทีละขั้นตอน นี่คือสิ่งที่เกิดขึ้น:** +- **เริ่มต้น** โปรเจกต์ Node.js ใหม่โดยใช้การตั้งค่าเริ่มต้นด้วย `npm init -y` +- **ติดตั้ง** Vite เป็นเครื่องมือสร้างสมัยใหม่เพื่อการพัฒนาและสร้างโปรเจกต์อย่างรวดเร็ว - **เพิ่ม** Prettier สำหรับจัดรูปแบบโค้ดอัตโนมัติ และ ESLint สำหรับตรวจสอบคุณภาพโค้ด -- **ใช้** ธง `--save-dev` เพื่อระบุว่าเป็น dependencies เฉพาะสำหรับพัฒนาเท่านั้น +- **ใช้** ธง `--save-dev` เพื่อบ่งชี้ว่าขึ้นอยู่กับสิ่งเหล่านี้เฉพาะในระหว่างพัฒนาเท่านั้น ```bash # ขั้นตอนที่ 3: สร้างโครงสร้างและไฟล์ของโปรเจกต์ @@ -628,204 +628,203 @@ echo 'My Site

Hello Wo npx vite ``` -**ในขั้นตอนข้างบน เราได้:** -- **จัดระเบียบ** โปรเจกต์โดยสร้างโฟลเดอร์แยกสำหรับซอร์สโค้ดและแอสเซ็ต -- **สร้าง** ไฟล์ HTML ขั้นพื้นฐานพร้อมโครงสร้างเอกสารที่ถูกต้อง -- **เริ่ม** เซิร์ฟเวอร์พัฒนา Vite สำหรับการรีโหลดแบบสดและการแทนที่โมดูลร้อน +**ในข้างต้น เราได้:** +- **จัดระเบียบ** โปรเจกต์ของเราโดยสร้างโฟลเดอร์แยกสำหรับซอร์สโค้ดและแอสเซท +- **สร้าง** ไฟล์ HTML พื้นฐานพร้อมโครงสร้างเอกสารที่เหมาะสม +- **เริ่ม** เซิร์ฟเวอร์พัฒนา Vite เพื่อรีโหลดแบบสดและแทนที่โมดูลร้อน -#### เครื่องมือบรรทัดคำสั่งจำเป็นสำหรับการพัฒนาเว็บ +#### เครื่องมือบรรทัดคำสั่งที่จำเป็นสำหรับการพัฒนาเว็บ | เครื่องมือ | จุดประสงค์ | ทำไมคุณต้องใช้ | |------|---------|-----------------| -| **[Git](https://git-scm.com/)** | ควบคุมเวอร์ชัน | ติดตามการเปลี่ยนแปลง, ทำงานร่วมกับผู้อื่น, สำรองงาน | -| **[Node.js & npm](https://nodejs.org/)** | runtime JavaScript & การจัดการแพ็กเกจ | รัน JavaScript นอกเบราว์เซอร์ ติดตั้งเครื่องมือพัฒนาใหม่ ๆ | -| **[Vite](https://vitejs.dev/)** | เครื่องมือ build & เซิร์ฟเวอร์ dev | พัฒนาเร็วมากพร้อมการแทนที่โมดูลร้อน | -| **[ESLint](https://eslint.org/)** | คุณภาพโค้ด | ค้นหาและแก้ปัญหาใน JavaScript โดยอัตโนมัติ | -| **[Prettier](https://prettier.io/)** | การจัดรูปแบบโค้ด | รักษาการจัดรูปแบบโค้ดให้สม่ำเสมอและอ่านง่าย | +| **[Git](https://git-scm.com/)** | ควบคุมเวอร์ชัน | ติดตามการเปลี่ยนแปลง ทำงานร่วมกับผู้อื่น สำรองงาน | +| **[Node.js & npm](https://nodejs.org/)** | รันไทม์ JavaScript & จัดการแพ็กเกจ | รัน JavaScript นอกเบราว์เซอร์ ติดตั้งเครื่องมือพัฒนาสมัยใหม่ | +| **[Vite](https://vitejs.dev/)** | เครื่องมือสร้าง & เซิร์ฟเวอร์พัฒนา | พัฒนาด้วยความเร็วสูงและแทนที่โมดูลร้อน | +| **[ESLint](https://eslint.org/)** | คุณภาพโค้ด | หาและแก้ไขปัญหาใน JavaScript อัตโนมัติ | +| **[Prettier](https://prettier.io/)** | จัดรูปแบบโค้ด | รักษาโค้ดให้มีรูปแบบเดียวกันและอ่านง่าย | #### ตัวเลือกเฉพาะแพลตฟอร์ม **Windows:** -- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - เทอร์มินัลทันสมัย ฟีเจอร์ครบครัน -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - สภาพแวดล้อมสคริปต์ทรงพลัง -- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - บรรทัดคำสั่ง Windows แบบดั้งเดิม +- **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - เทอร์มินัลล่าสุดที่มีฟีเจอร์ครบครัน +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - สภาพแวดล้อมสคริปต์ที่ทรงพลัง +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - บรรทัดคำสั่งแบบดั้งเดิมของ Windows **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - แอปเทอร์มินัลติดเครื่อง -- **[iTerm2](https://iterm2.com/)** - เทอร์มินัลที่ปรับปรุงด้วยฟีเจอร์ขั้นสูง +- **[iTerm2](https://iterm2.com/)** - เทอร์มินัลที่ปรับปรุงพร้อมฟีเจอร์ขั้นสูง **Linux:** - **[Bash](https://www.gnu.org/software/bash/)** 💻 - เชลล์มาตรฐานของ Linux -- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - เทอร์มินัลอีมูเลเตอร์ขั้นสูง +- **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - โปรแกรมจำลองเทอร์มินัลขั้นสูง -> 💻 = ติดตั้งมาแล้วบนระบบปฏิบัติการ +> 💻 = ติดตั้งมาแล้วในระบบปฏิบัติการ -> 🎯 **เส้นทางการเรียนรู้**: เริ่มจากคำสั่งพื้นฐานเช่น `cd` (เปลี่ยนไดเรกทอรี), `ls` หรือ `dir` (แสดงรายการไฟล์), และ `mkdir` (สร้างโฟลเดอร์) ฝึกคำสั่งในเวิร์กโฟลว์สมัยใหม่เช่น `npm install`, `git status` และ `code .` (เปิดไดเรกทอรีปัจจุบันใน VS Code) เมื่อคุณคุ้นเคยแล้ว จะสามารถเรียนรู้คำสั่งขั้นสูงและอัตโนมัติต่าง ๆ ได้ตามธรรมชาติ +> 🎯 **เส้นทางการเรียนรู้**: เริ่มจากคำสั่งพื้นฐานอย่าง `cd` (เปลี่ยนไดเรกทอรี), `ls` หรือ `dir` (แสดงไฟล์), และ `mkdir` (สร้างโฟลเดอร์) ฝึกใช้งานกับคำสั่งในเวิร์กโฟลว์สมัยใหม่อย่าง `npm install`, `git status` และ `code .` (เปิดไดเรกทอรีปัจจุบันใน VS Code) เมื่อคุณคุ้นเคย คุณจะเรียนรู้คำสั่งขั้นสูงและเทคนิคอัตโนมัติได้อย่างเป็นธรรมชาติ -### เอกสารประกอบ: ที่ปรึกษาการเรียนรู้อยู่กับคุณเสมอ +### เอกสารประกอบ: ที่ปรึกษาการเรียนรู้ที่พร้อมใช้งานเสมอ -เอาล่ะ ให้ฉันบอกความลับนิดหน่อยที่จะทำให้คุณรู้สึกดีขึ้นเกี่ยวกับการเริ่มต้น: นักพัฒนามืออาชีพที่มีประสบการณ์มากที่สุดก็ใช้เวลาส่วนใหญ่อ่านเอกสารประกอบ และนั่นไม่ใช่เพราะพวกเขาไม่รู้ว่าทำอะไรอยู่ — แต่มันเป็นเครื่องหมายของความเฉลียวฉลาด! +โอเค ฉันจะบอกความลับเล็กน้อยที่จะทำให้คุณรู้สึกดีขึ้นมากเมื่อเป็นมือใหม่: แม้แต่นักพัฒนาที่มีประสบการณ์มากที่สุดก็ใช้เวลามากมายในการอ่านเอกสาร และไม่ได้เป็นเพราะพวกเขาไม่รู้ว่าจะทำยังไง—แต่เป็นสัญญาณของความฉลาด! -คิดว่าเอกสารประกอบเหมือนการเข้าถึงครูที่อดทนและมีความรู้มากที่สุดในโลก ที่พร้อมช่วยเหลือคุณ 24/7 เจอปัญหาตอนตีสอง? เอกสารก็เหมือนกอดอบอุ่นเสมือนจริงพร้อมคำตอบที่คุณต้องการ ต้องการเรียนรู้ฟีเจอร์ใหม่สุดเจ๋งที่ทุกคนพูดถึง? เอกสารมีตัวอย่างทีละขั้นตอนให้คุณแน่นอน พยายามเข้าใจว่าทำไมสิ่งนั้นถึงทำงานแบบนี้? แน่นอน — เอกสารพร้อมอธิบายในแบบที่คุณเข้าใจได้ในที่สุด! +คิดว่าเอกสารประกอบเหมือนการเข้าถึงครูที่อดทนและเชี่ยวชาญที่สุดในโลกที่พร้อมให้คำปรึกษาตลอด 24 ชั่วโมง ถ้าคุณติดปัญหาเวลาเที่ยงคืนเอกสารก็พร้อมให้คำตอบที่คุณต้องการอย่างอบอุ่น อยากเรียนรู้ฟีเจอร์เจ๋งๆ ที่ทุกคนพูดถึง? เอกสารช่วยคุณด้วยตัวอย่างทีละขั้นตอน กำลังพยายามเข้าใจว่าทำไมสิ่งนั้นจึงทำงานอย่างที่มันเป็น? เอกสารพร้อมอธิบายจนคุณเข้าใจ! -นี่คือสิ่งที่เปลี่ยนมุมมองฉันโดยสิ้นเชิง: โลกการพัฒนาเว็บเคลื่อนไหวรวดเร็วมาก และไม่มีใคร (หมายถึงไม่มีใครจริง ๆ!) จำทุกอย่างในหัวได้ ฉันเคยเห็นนักพัฒนาระดับสูงที่มีประสบการณ์กว่า 15 ปี ต้องค้นหาสัญกรณ์พื้นฐาน และรู้ไหม? นั่นไม่ใช่เรื่องน่าอาย — แต่มันฉลาด! ไม่ใช่เรื่องของความจำที่สมบูรณ์แบบ แต่มันคือการรู้ว่าจะหาคำตอบที่น่าเชื่อถือได้อย่างรวดเร็วและรู้วิธีนำไปใช้ +นี่คือสิ่งที่เปลี่ยนมุมมองฉันอย่างสิ้นเชิง: โลกการพัฒนาเว็บเคลื่อนไหวเร็วมาก และไม่มีใคร (จริงๆ ไม่มีเลย!) จำทุกอย่างได้หมด ฉันเคยเห็นนักพัฒนารุ่นเก๋าที่มีประสบการณ์กว่า 15 ปียังค้นหาสินทรัพย์ไวยากรณ์พื้นฐาน และคุณรู้ไหม? นั่นไม่ใช่เรื่องน่าอาย—นั่นคือความฉลาด! มันไม่ใช่เรื่องของความจำที่สมบูรณ์แบบ แต่เป็นเรื่องรู้ว่าจะไปหาคำตอบที่น่าเชื่อถือได้อย่างรวดเร็วและเข้าใจวิธีใช้มัน -**นี่คือที่ที่เวทมนตร์จริง ๆ เกิดขึ้น:** +**นี่คือที่ที่เวทมนตร์จริงๆ เกิดขึ้น:** -นักพัฒนามืออาชีพใช้เวลาส่วนใหญ่กับการอ่านเอกสาร — ไม่ใช่เพราะไม่รู้ว่าทำอะไร แต่เพราะโลกของการพัฒนาเว็บเปลี่ยนแปลงเร็วมาก การตามให้ทันจึงต้องเรียนรู้อย่างต่อเนื่อง เอกสารที่ดีจะช่วยให้คุณเข้าใจไม่ใช่แค่ *วิธีใช้* แต่ยังรวมถึง *ทำไม* และ *เมื่อไหร่* ที่ควรใช้ +นักพัฒนามืออาชีพใช้เวลาสัดส่วนมากในการอ่านเอกสาร—ไม่ใช่เพราะไม่รู้ว่าจะทำยังไง แต่เป็นเพราะโลกของการพัฒนาเว็บเปลี่ยนแปลงเร็วมาก การก้าวตามให้ทันต้องเรียนรู้อยู่ตลอด เอกสารดีๆ ช่วยให้คุณเข้าใจไม่ใช่แค่ *วิธี* ใช้สิ่งใดสิ่งหนึ่งเท่านั้น แต่รวมถึง *ทำไม* และ *เมื่อไหร่* ที่ควรใช้ด้วย #### แหล่งข้อมูลเอกสารสำคัญ **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- มาตรฐานทองคำสำหรับเอกสารเทคโนโลยีเว็บ -- คู่มือครบถ้วนสำหรับ HTML, CSS, และ JavaScript -- รวมข้อมูลความเข้ากันได้ของเบราว์เซอร์ -- มีตัวอย่างใช้งานจริงและสาธิตแบบโต้ตอบ +- มาตรฐานทองคำของเอกสารเทคโนโลยีเว็บ +- คู่มือครบถ้วนสำหรับ HTML, CSS และ JavaScript +- มีข้อมูลความเข้ากันได้ของเบราว์เซอร์ +- มีตัวอย่างปฏิบัติและเดโมแบบโต้ตอบ **[Web.dev](https://web.dev)** (โดย Google) -- แนวปฏิบัติที่ดีที่สุดของการพัฒนาเว็บสมัยใหม่ -- คู่มือการปรับปรุงประสิทธิภาพ -- หลักการการเข้าถึงและออกแบบเพื่อทุกคน -- กรณีศึกษาจากโปรเจกต์จริง +- แนวทางปฏิบัติที่ดีที่สุดของการพัฒนาเว็บสมัยใหม่ +- คู่มือการเพิ่มประสิทธิภาพ +- หลักการการเข้าถึงและการออกแบบที่ครอบคลุม +- กรณีศึกษาโปรเจกต์จริง **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- ทรัพยากรสำหรับพัฒนาเบราว์เซอร์ Edge -- คู่มือ Progressive Web App -- ข้อมูลเชิงลึกการพัฒนาแบบข้ามแพลตฟอร์ม +- ทรัพยากรสำหรับการพัฒนาเบราว์เซอร์ Edge +- คู่มือ Progressive Web Apps +- บทวิเคราะห์การพัฒนาข้ามแพลตฟอร์ม **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- หลักสูตรการเรียนรู้ที่มีโครงสร้าง -- คอร์สวิดีโอจากผู้เชี่ยวชาญในวงการ +- หลักสูตรเรียงลำดับอย่างมีโครงสร้าง +- วิดีโอคอร์สจากผู้เชี่ยวชาญในอุตสาหกรรม - แบบฝึกหัดเขียนโค้ดแบบลงมือทำ -> 📚 **กลยุทธ์การศึกษา**: อย่าพยายามจำเอกสาร แต่ให้เรียนรู้วิธีการค้นหาอย่างมีประสิทธิภาพ ทำบุ๊กมาร์กเอกสารที่ใช้งานบ่อย และฝึกใช้ฟังก์ชันค้นหาเพื่อหาข้อมูลเฉพาะอย่างรวดเร็ว +> 📚 **กลยุทธ์การศึกษา**: อย่าพยายามจำเอกสารประกอบให้หมด—แต่เรียนรู้วิธีนำทางได้อย่างมีประสิทธิภาพ ทำบุ๊กมาร์กแหล่งที่ใช้บ่อยๆ และฝึกใช้ฟังก์ชันค้นหาเพื่อหาข้อมูลเฉพาะได้อย่างรวดเร็ว -### 🔧 **ทดสอบความชำนาญเครื่องมือ: อะไรที่โดนใจคุณ?** +### 🔧 **ตรวจสอบความชำนาญเครื่องมือ: อะไรที่โดนใจคุณ?** -**ใช้เวลาสักครู่คิด:** -- เครื่องมือชิ้นไหนที่คุณอยากลองใช้เป็นอันดับแรก? (ไม่มีคำตอบผิด!) -- บรรทัดคำสั่งยังดูน่ากลัวอยู่ไหม หรือคุณสนใจอยากลองใช้มัน? -- คุณนึกภาพใช้ browser DevTools แอบดูเบื้องหลังเว็บไซต์โปรดของคุณได้ไหม? +**หยุดคิดสักครู่:** +- เครื่องมือไหนที่คุณตื่นเต้นอยากลองใช้ก่อน? (ไม่ต้องกลัวคำตอบผิด!) +- บรรทัดคำสั่งยังน่ากลัวอยู่ไหม หรือลองอยากสำรวจมันดู? +- คุณลองคิดภาพใช้ DevTools ของเบราว์เซอร์ดูว่าได้เจาะลึกเบื้องหลังเว็บไซต์โปรดของคุณหรือเปล่า? ```mermaid pie title "เวลาที่นักพัฒนาส่วนใหญ่ใช้กับเครื่องมือ" "เครื่องมือแก้ไขโค้ด" : 40 - "ทดสอบผ่านเบราว์เซอร์" : 25 + "การทดสอบเบราว์เซอร์" : 25 "บรรทัดคำสั่ง" : 15 - "อ่านเอกสาร" : 15 - "ดีบัก" : 5 + "การอ่านเอกสาร" : 15 + "การแก้ไขปัญหา" : 5 ``` -> **ข้อมูลน่าสนุก:** นักพัฒนาส่วนใหญ่ใช้เวลาประมาณ 40% อยู่ในตัวแก้ไขโค้ด แต่สังเกตดูว่าเวลาที่เหลือใช้ไปกับการทดสอบ เรียนรู้ และแก้ปัญหา การเขียนโปรแกรมไม่ใช่แค่การเขียนโค้ด – แต่มันคือการสร้างประสบการณ์! +> **ข้อมูลน่าสนุก**: นักพัฒนาส่วนใหญ่ใช้เวลาประมาณ 40% ในการเขียนโค้ด แต่สังเกตดูว่าเวลาส่วนใหญ่หมดไปกับการทดสอบ เรียนรู้ และแก้ไขปัญหา การเขียนโปรแกรมไม่ใช่แค่การเขียนโค้ด—แต่เป็นการสร้างประสบการณ์! -✅ **ข้อคิด**: นี่คือสิ่งที่น่าสนใจให้คิด — คุณคิดว่าเครื่องมือสำหรับสร้างเว็บไซต์ (การพัฒนา) กับเครื่องมือสำหรับออกแบบรูปลักษณ์ (การออกแบบ) จะต่างกันอย่างไร? มันเหมือนความแตกต่างระหว่างสถาปนิกที่ออกแบบบ้านสวย ๆ กับผู้รับเหมาที่สร้างบ้านนั้นจริง ๆ ทั้งคู่สำคัญ แต่ต้องใช้กล่องเครื่องมือคนละแบบ! ความคิดแบบนี้จะช่วยให้คุณเห็นภาพใหญ่ของการทำเว็บไซต์ได้ชัดเจนขึ้น +✅ **อาหารสมอง**: นี่คือสิ่งที่น่าสังเกต—คุณคิดว่าเครื่องมือสำหรับการสร้างเว็บไซต์ (พัฒนา) จะต่างจากเครื่องมือสำหรับการออกแบบหน้าตาอย่างไร? มันเหมือนความต่างระหว่างสถาปนิกที่ออกแบบบ้านสวยๆ กับผู้รับเหมาเจ้าของบูธที่สร้างบ้านจริง ทั้งสองสำคัญ แต่ต้องใช้กล่องเครื่องมือคนละแบบ! วิธีคิดแบบนี้จะช่วยให้คุณเห็นภาพรวมที่ใหญ่ขึ้นของการเกิดขึ้นของเว็บไซต์ -## ท้าทาย GitHub Copilot Agent 🚀 +## ภารกิจ GitHub Copilot Agent 🚀 -ใช้โหมด Agent เพื่อทำภารกิจต่อไปนี้ให้สำเร็จ: +ใช้โหมด Agent เพื่อทำภารกิจต่อไปนี้: -**คำอธิบาย:** สำรวจฟีเจอร์ของ code editor หรือ IDE สมัยใหม่ และแสดงให้เห็นว่ามันช่วยปรับปรุงเวิร์กโฟลว์ของคุณในฐานะนักพัฒนาเว็บได้อย่างไร +**คำอธิบาย:** สำรวจฟีเจอร์ของตัวแก้ไขโค้ดหรือ IDE สมัยใหม่และแสดงให้เห็นว่ามันช่วยปรับปรุงเวิร์กโฟลว์ของคุณในฐานะนักพัฒนาเว็บอย่างไร -**คำชี้แนะ:** เลือก code editor หรือ IDE (เช่น Visual Studio Code, WebStorm หรือ IDE บนคลาวด์) ระบุสามฟีเจอร์หรือส่วนขยายที่ช่วยให้คุณเขียน ดีบัก หรือบำรุงรักษาโค้ดได้อย่างมีประสิทธิภาพ พร้อมคำอธิบายสั้น ๆ ว่ามันช่วยเวิร์กโฟลว์ของคุณอย่างไร +**คำสั่ง:** เลือกตัวแก้ไขโค้ดหรือ IDE (เช่น Visual Studio Code, WebStorm หรือ IDE บนคลาวด์) ระบุสามฟีเจอร์หรือส่วนขยายที่ช่วยให้คุณเขียน ดีบัก หรือดูแลโค้ดได้อย่างมีประสิทธิภาพ พร้อมอธิบายสั้นๆ ว่ามันช่วยคุณอย่างไรบ้าง --- -## 🚀 ท้าทาย +## 🚀 ภารกิจ -**เอาล่ะ นักสืบ พร้อมสำหรับคดีแรกไหม?** +**เอาล่ะ นักสืบ พร้อมสำหรับคดีแรกของคุณหรือยัง?** -ตอนนี้คุณมีพื้นฐานเจ๋ง ๆ นี้แล้ว ฉันมีการผจญภัยที่จะช่วยให้คุณเห็นว่าโลกของการเขียนโปรแกรมนั้นมีความหลากหลายและน่าหลงใหลแค่ไหน และฟังนะ — นี่ไม่ใช่เรื่องการเขียนโค้ดยังไม่ต้องเครียด! นึกว่าคุณเป็นนักสืบภาษาโปรแกรมในการสืบสวนคดีแรกสุดที่น่าตื่นเต้น! +ตอนนี้ที่คุณมีพื้นฐานเจ๋งๆ แล้ว ฉันมีการผจญภัยที่จะช่วยให้คุณเห็นว่ามีความหลากหลายและน่าสนใจในโลกของโปรแกรมมิ่งมากแค่ไหน และฟังนะ—นี่ไม่ใช่การเขียนโค้ดเลย ดังนั้นไม่ต้องเครียด! ให้คิดว่าคุณเป็นนักสืบภาษาการเขียนโปรแกรมในคดีที่น่าตื่นเต้นครั้งแรกของคุณ! -**ภารกิจของคุณ ถ้าคุณยอมรับ:** -1. **กลายเป็นนักสำรวจภาษา**: เลือกภาษาโปรแกรมสามภาษา จากโลกที่แตกต่างกันอย่างสิ้นเชิง — อาจเป็นหนึ่งที่สร้างเว็บไซต์ หนึ่งที่ทำแอปมือถือ และหนึ่งที่คำนวณข้อมูลสำหรับนักวิทยาศาสตร์ หาตัวอย่างการทำงานเดียวกันในแต่ละภาษา ฉันสัญญาคุณจะทึ่งกับความแตกต่างขณะที่ผลลัพธ์เหมือนกัน! -2. **ค้นหาต้นกำเนิด**: อะไรที่ทำให้แต่ละภาษามีเอกลักษณ์? นี่คือข้อเท็จจริงเจ๋ง ๆ — ทุกภาษาโปรแกรมถูกสร้างขึ้นเพราะใครสักคนคิดว่า "เราน่าจะมีวิธีที่ดีกว่านี้ในการแก้ปัญหานี้" คุณพอจะหาปัญหาเหล่านั้นได้ไหม? บางเรื่องราวน่าสนใจมาก! -3. **พบกับชุมชน**: ดูว่าชุมชนของแต่ละภาษาต้อนรับอย่างไรและมีความกระตือรือร้นแค่ไหน บางภาษามีนักพัฒนาหลายล้านคนแชร์ความรู้และช่วยเหลือกัน บางที่เล็กแต่แน่นแฟ้นและเกื้อหนุนกัน คุณจะชอบเห็นบุคลิกของชุมชนเหล่านี้! -4. **ตามความรู้สึก**: ภาษาไหนที่คุณรู้สึกว่าน่าเข้าถึงที่สุดตอนนี้? อย่ากดดันกับการเลือกที่ "ถูกต้องที่สุด" — ฟังสัญชาตญาณของคุณ! ไม่มีคำตอบผิด และคุณสามารถสำรวจภาษาอื่น ๆ ได้ภายหลังเสมอ +**ภารกิจของคุณ หากคุณยอมรับ:** +1. **เป็นนักสำรวจภาษา**: เลือกภาษาการเขียนโปรแกรมสามภาษาจากจักรวาลที่แตกต่างกันสิ้นเชิง — อาจเป็นภาษาเว็บไซต์ ภาษาแอปมือถือ และภาษาสำหรับประมวลผลข้อมูลวิทยาศาสตร์ หาตัวอย่างงานง่ายๆ เดียวกันในแต่ละภาษา รับรองว่าคุณจะต้องทึ่งกับความแตกต่างของแต่ละภาษาในขณะที่ทำงานเดียวกันได้! +2. **ค้นหาเรื่องราวต้นกำเนิด**: อะไรที่ทำให้แต่ละภาษาโดดเด่น? ข้อเท็จจริงเจ๋งๆ คือ ภาษาการเขียนโปรแกรมทุกภาษาถูกสร้างขึ้นเพราะใครบางคนคิดว่า "ต้องมีวิธีที่ดีกว่าในการแก้ปัญหานี้" คุณสามารถหาปัญหาเหล่านั้นได้หรือเปล่า? บางเรื่องราวน่าทึ่งมาก! +3. **รู้จักชุมชน**: ดูว่าชุมชนของแต่ละภาษาต้อนรับและมีความหลงใหลแค่ไหน บางภาษามีผู้พัฒนานับล้านแบ่งปันความรู้และช่วยเหลือกัน บางภาษามีขนาดเล็กแต่ใกล้ชิดและสนับสนุนกันอย่างดี คุณจะชอบเห็นลักษณะนิสัยที่แตกต่างกันของชุมชนเหล่านี้! +4. **เชื่อสัญชาตญาณตัวเอง**: ภาษาไหนที่รู้สึกเข้าถึงง่ายที่สุดตอนนี้? อย่ากังวลเรื่องเลือกให้ถูกต้อง—แค่ฟังเสียงหัวใจคุณ! ไม่มีคำตอบผิด และคุณสามารถสำรวจภาษาอื่นได้ในภายหลัง -**งานนักสืบพิเศษ:** ลองค้นหาว่าเว็บไซต์หรือแอปใหญ่ ๆ ตัวไหนสร้างด้วยภาษาอะไรบ้าง รับรองว่าคุณจะประหลาดใจกับสิ่งที่ขับเคลื่อน Instagram, Netflix หรือเกมมือถือที่คุณเล่นไม่หยุด! +**งานนักสืบพิเศษ:** ลองค้นหาว่าเว็บไซต์หรือแอปดังๆ ตัวไหนสร้างด้วยภาษาแต่ละภาษา ฉันรับประกันว่าคุณจะรู้สึกตกใจเมื่อรู้ว่า Instagram, Netflix หรือเกมมือถือที่คุณติดเล่นนั้นทำด้วยอะไร! -> 💡 **จำไว้:** วันนี้คุณไม่ต้องเป็นผู้เชี่ยวชาญในภาษาไหนเลย แค่ทำความรู้จักกับละแวกนั้นก่อนตัดสินใจว่าจะตั้งแคมป์ที่ไหน ใช้เวลาสนุกกับมันและปล่อยให้ความอยากรู้นำทางคุณ! +> 💡 **จำไว้:** วันนี้คุณไม่ได้พยายามเป็นผู้เชี่ยวชาญภาษาใดๆ คุณแค่ทำความรู้จักย่านที่ตัวเองจะไปตั้งรกราก หยุดพัก สนุกกับมัน และปล่อยให้ความอยากรู้อยากเห็นพาคุณไป! -## มาเฉลิมฉลองสิ่งที่คุณค้นพบกันเถอะ! +## มาฉลองสิ่งที่คุณค้นพบกันเถอะ! -ว้าวว คุณดูดซับข้อมูลเจ๋ง ๆ ไปเยอะมาก! ฉันตื่นเต้นจริง ๆ ที่เห็นว่าการเดินทางสุดยอดนี้ติดตัวคุณไปมากแค่ไหน และจำไว้ — นี่ไม่ใช่การทดสอบที่คุณต้องทำให้สมบูรณ์แบบ แต่มันคือการเฉลิมฉลองสิ่งเจ๋ง ๆ ที่คุณได้เรียนรู้เกี่ยวกับโลกที่น่าหลงใหลนี้ที่คุณกำลังจะเข้าไปดำน้ำ! +โอ้โห คุณดูดซับข้อมูลอันน่าทึ่งมากมายวันนี้! ฉันตื่นเต้นจริงๆ ที่จะเห็นว่าคุณจดจำอะไรจากการเดินทางที่สุดยอดนี้ได้บ้าง และจำไว้ว่านี่ไม่ใช่การสอบที่คุณต้องตอบถูกทุกข้อ แต่มันคือการฉลองสิ่งเจ๋งๆ ที่คุณได้เรียนรู้เกี่ยวกับโลกที่น่าหลงใหลนี้ที่คุณกำลังจะดำดิ่งเข้าไป! [ทำแบบทดสอบหลังบทเรียน](https://ff-quizzes.netlify.app/web/) -## Review & Self Study -**ใช้เวลาของคุณสำรวจและสนุกกับมัน!** +## ทบทวน & ศึกษาด้วยตนเอง -คุณได้ผ่านสิ่งต่างๆ มามากมายในวันนี้ และนั่นคือสิ่งที่ควรภูมิใจ! ตอนนี้ถึงเวลาที่สนุก – การสำรวจหัวข้อที่จุดประกายความอยากรู้ของคุณ จำไว้ว่านี่ไม่ใช่การบ้าน – นี่คือการผจญภัย! +**ใช้เวลาของคุณสำรวจและสนุกกับมัน!** +คุณได้เรียนรู้มากมายในวันนี้ และนั่นคือสิ่งที่ควรภูมิใจ! ตอนนี้มาถึงส่วนที่สนุก – การสำรวจหัวข้อที่จุดประกายความอยากรู้อยากเห็นของคุณ จำไว้ว่านี่ไม่ใช่การบ้าน – แต่เป็นการผจญภัย! -**ดำดิ่งลึกลงไปในสิ่งที่คุณรู้สึกตื่นเต้น:** +**เจาะลึกสิ่งที่ทำให้คุณตื่นเต้น:** -**ลองใช้ภาษาการเขียนโปรแกรมด้วยตัวเอง:** -- เยี่ยมชมเว็บไซต์อย่างเป็นทางการของภาษาที่ดึงดูดความสนใจของคุณ 2-3 ภาษา แต่ละภาษาแสดงบุคลิกและเรื่องราวของตัวเอง! -- ลองใช้สนามเด็กเล่นเขียนโค้ดออนไลน์อย่าง [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), หรือ [Replit](https://replit.com/) อย่ากลัวที่จะทดลอง – คุณทำอะไรพังไม่ได้หรอก! -- อ่านเรื่องราวว่าภาษาที่คุณชื่นชอบเกิดขึ้นมาได้อย่างไร จริงจังนะ บางเรื่องราวต้นกำเนิดเหล่านี้น่าสนใจมากและจะช่วยให้คุณเข้าใจว่าทำไมภาษาเหล่านั้นถึงทำงานในลักษณะนั้น +**ลองลงมือทำกับภาษาการเขียนโปรแกรม:** +- เยี่ยมชมเว็บไซต์อย่างเป็นทางการของภาษา 2-3 ภาษา ที่ดึงดูดความสนใจคุณ แต่ละภาษามีบุคลิกและเรื่องราวของตัวเอง! +- ลองใช้พื้นที่ทดลองเขียนโค้ดออนไลน์อย่าง [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), หรือ [Replit](https://replit.com/) อย่ากลัวที่จะทดลอง – คุณไม่สามารถทำอะไรพังได้! +- อ่านเกี่ยวกับที่มาของภาษาที่คุณชอบ จริงจังนะ บางเรื่องราวที่มาเป็นเรื่องน่าสนใจมาก และจะช่วยให้คุณเข้าใจว่าทำไมภาษาเหล่านั้นถึงทำงานในแบบที่มันเป็น **ทำความคุ้นเคยกับเครื่องมือใหม่ของคุณ:** -- ดาวน์โหลด Visual Studio Code ถ้าคุณยังไม่มี – มันฟรีและคุณจะชอบมันแน่นอน! -- ใช้เวลาสักครู่ดูตลาดส่วนขยาย มันเหมือนกับร้านแอปสำหรับโปรแกรมแก้ไขโค้ดของคุณ! -- เปิด Developer Tools ของเบราว์เซอร์และคลิกเล่นไปมา ไม่ต้องกังวลว่าจะเข้าใจทุกอย่าง – แค่ทำความรู้จักกับสิ่งที่มีอยู่นั่นแหละ +- ดาวน์โหลด Visual Studio Code หากคุณยังไม่ได้ทำ – มันฟรี และคุณจะชอบมัน! +- ใช้เวลาสักครู่ท่องดูตลาด Extensions มันเหมือนกับร้านแอปสำหรับเครื่องมือเขียนโค้ดของคุณ! +- เปิด Developer Tools ในเบราว์เซอร์ของคุณและลองคลิกดูอย่างรอบๆ อย่ากังวลกับการเข้าใจทุกอย่าง – แค่ทำความคุ้นเคยกับสิ่งที่มีอยู่ -**เข้าร่วมชุมชน:** -- ติดตามชุมชนนักพัฒนาบางกลุ่มที่ [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), หรือ [GitHub](https://github.com/) ชุมชนนักเขียนโปรแกรมต้อนรับผู้เริ่มต้นอย่างอบอุ่นมาก! -- ดูวิดีโอสอนเขียนโปรแกรมสำหรับผู้เริ่มต้นบน YouTube มีครีเอเตอร์เก่งๆ มากมายที่รู้ว่าการเริ่มต้นเป็นอย่างไร -- พิจารณาเข้าร่วมกลุ่มพบปะในพื้นที่หรือชุมชนออนไลน์ เชื่อฉันเถอะ นักพัฒนาชอบช่วยเหลือผู้เริ่มต้น! +**เข้าร่วมกับชุมชน:** +- ติดตามชุมชนนักพัฒนาบน [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), หรือ [GitHub](https://github.com/) ชุมชนนักเขียนโปรแกรมต้อนรับผู้เริ่มต้นอย่างอบอุ่นมาก! +- ดูวิดีโอสอนโค้ดสำหรับผู้เริ่มต้นบน YouTube มีครีเอเตอร์ยอดเยี่ยมมากมายที่จำได้ว่าการเริ่มต้นเป็นอย่างไร +- ลองเข้าร่วมกลุ่มพบปะท้องถิ่นหรือชุมชนออนไลน์ เชื่อเถอะ นักพัฒนาชอบช่วยคนใหม่! -> 🎯 **ฟังนะ นี่คือสิ่งที่ฉันอยากให้คุณจำไว้**: คุณไม่จำเป็นต้องกลายเป็นนักเขียนโปรแกรมอัจฉริยะในวันเดียว! ตอนนี้คุณแค่กำลังทำความรู้จักกับโลกใหม่อันน่าทึ่งที่คุณกำลังจะเป็นส่วนหนึ่ง ใช้เวลาของคุณ สนุกกับการเดินทาง และจำไว้ – นักพัฒนาทุกคนที่คุณชื่นชมนั่งอยู่ในจุดที่คุณอยู่ตอนนี้ เคยรู้สึกตื่นเต้นและ บางทีอาจจะรู้สึกเหนื่อยหน่อยๆ นั่นเป็นเรื่องปกติอย่างสมบูรณ์ และหมายความว่าคุณกำลังทำถูกต้อง! +> 🎯 **ฟังนะ นี่คือสิ่งที่ฉันต้องการให้คุณจำไว้**: คุณไม่จำเป็นต้องกลายเป็นจอมเวทโค้ดดิ้งในคืนเดียว! ตอนนี้ คุณแค่กำลังรู้จักโลกที่น่าทึ่งใบนี้ที่คุณกำลังจะเป็นส่วนหนึ่งใช้เวลาของคุณ เพลิดเพลินกับการเดินทาง และจำไว้ – นักพัฒนาทุกคนที่คุณชื่นชมก็เคยนั่งอยู่ที่จุดเดียวกับคุณในตอนนี้ รู้สึกตื่นเต้นและอาจจะรู้สึกท่วมท้นบ้าง นั่นเป็นเรื่องปกติ และหมายความว่าคุณทำถูกแล้ว! -## Assignment +## การบ้าน [Reading the Docs](assignment.md) -> 💡 **แรงจูงใจเล็กๆ สำหรับงานของคุณ**: ฉันอยากเห็นคุณสำรวจเครื่องมือต่างๆ ที่เราไม่ได้พูดถึง! ข้ามโปรแกรมแก้ไข เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่งที่เราได้พูดถึงไปแล้ว – ยังมีจักรวาลอันน่าทึ่งของเครื่องมือพัฒนาที่รอให้คุณค้นพบ มองหาเครื่องมือที่ได้รับการดูแลอย่างต่อเนื่องและมีชุมชนที่กระตือรือร้นและช่วยเหลือดี (พวกนี้มักจะมีบทเรียนที่ดีที่สุดและคนที่ช่วยเหลืออย่างเป็นมิตรเมื่อคุณติดปัญหาและต้องการมือช่วย) - +> 💡 **คำแนะนำเล็กน้อยสำหรับการบ้านของคุณ**: ฉันอยากเห็นคุณสำรวจเครื่องมือใหม่ที่เราไม่ได้พูดถึง! ข้ามไปจากตัวแก้ไข โบราว์เซอร์ และเครื่องมือบรรทัดคำสั่งที่เราคุยกันไปแล้ว – มีจักรวาลของเครื่องมือพัฒนาที่ยอดเยี่ยมอีกมากมายรอคุณค้นพบ มองหาเครื่องมือที่ยังได้รับการดูแลอย่างต่อเนื่องและมีชุมชนที่แข็งแรงและช่วยเหลือดี (ซึ่งมักจะมีบทเรียนที่ดีที่สุดและคนให้การสนับสนุนมากที่สุดเวลาคุณติดขัดและต้องการความช่วยเหลือจากเพื่อน) --- -## 🚀 Your Programming Journey Timeline +## 🚀 ไทม์ไลน์การเดินทางเขียนโปรแกรมของคุณ -### ⚡ **สิ่งที่คุณทำได้ใน 5 นาทีข้างหน้า** -- [ ] บุ๊กมาร์กเว็บไซต์ภาษาการเขียนโปรแกรม 2-3 ภาษา ที่ดึงดูดใจคุณ -- [ ] ดาวน์โหลด Visual Studio Code ถ้าคุณยังไม่มี -- [ ] เปิด DevTools ของเบราว์เซอร์ (F12) แล้วคลิกเล่นในเว็บไซต์ใดก็ได้ -- [ ] เข้าร่วมชุมชนนักพัฒนาหนึ่งแห่ง (Dev.to, Reddit r/webdev, หรือ Stack Overflow) +### ⚡ **สิ่งที่คุณสามารถทำใน 5 นาทีถัดไป** +- [ ] บุ๊กมาร์กเว็บไซต์ของภาษาการเขียนโปรแกรม 2-3 ภาษา ที่ดึงดูดความสนใจคุณ +- [ ] ดาวน์โหลด Visual Studio Code หากคุณยังไม่ได้ทำ +- [ ] เปิด Developer Tools ในเบราว์เซอร์ของคุณ (F12) แล้วคลิกดูในเว็บไซต์ใดก็ได้ +- [ ] เข้าร่วมชุมชนนักพัฒนาหนึ่งแห่ง (Dev.to, Reddit r/webdev หรือ Stack Overflow) -### ⏰ **สิ่งที่คุณทำสำเร็จได้ภายในชั่วโมงนี้** -- [ ] ทำแบบทดสอบหลังบทเรียนเสร็จและทบทวนคำตอบของคุณ -- [ ] ตั้งค่า VS Code กับส่วนขยาย GitHub Copilot -- [ ] ลองเขียนโค้ด “Hello World” ในภาษาโปรแกรม 2 ภาษาออนไลน์ -- [ ] ดูวิดีโอ “Day in the Life of a Developer” บน YouTube -- [ ] เริ่มงานสืบสวนภาษาการเขียนโปรแกรมของคุณ (จากความท้าทาย) +### ⏰ **สิ่งที่คุณสามารถทำได้ในชั่วโมงนี้** +- [ ] ทำแบบทดสอบหลังเรียนให้ครบและทบทวนคำตอบของคุณ +- [ ] ตั้งค่า VS Code พร้อมกับส่วนขยาย GitHub Copilot +- [ ] ทดลองเขียน "Hello World" เป็นตัวอย่างในภาษาโปรแกรมสองภาษาแบบออนไลน์ +- [ ] ดูวิดีโอ "Day in the Life of a Developer" บน YouTube +- [ ] เริ่มทำงานนักสืบภาษาการเขียนโปรแกรมของคุณ (จากท้าทาย) ### 📅 **การผจญภัยตลอดสัปดาห์ของคุณ** -- [ ] ทำงานบ้านให้เสร็จและสำรวจเครื่องมือพัฒนาใหม่ 3 ตัว -- [ ] ติดตามนักพัฒนาหรือบัญชีการเขียนโปรแกรม 5 คนบนโซเชียลมีเดีย -- [ ] ลองสร้างอะไรเล็กๆ ใน CodePen หรือ Replit (แม้แต่แค่ “Hello, [Your Name]!”) -- [ ] อ่านบล็อกนักพัฒนาเกี่ยวกับการเดินทางของใครสักคน -- [ ] เข้าร่วมการพบปะเสมือนหรือดูการบรรยายเรื่องการเขียนโปรแกรม -- [ ] เริ่มเรียนภาษาที่คุณเลือกด้วยบทเรียนออนไลน์ - -### 🗓️ **การเปลี่ยนแปลงตลอดหนึ่งเดือนของคุณ** -- [ ] สร้างโปรเจกต์ขนาดเล็กชิ้นแรกของคุณ (แม้แต่เว็บเพจง่ายๆ ก็ได้!) -- [ ] มีส่วนร่วมกับโครงการโอเพนซอร์ส (เริ่มจากแก้ไขเอกสาร) -- [ ] ให้คำปรึกษาใครสักคนที่เพิ่งเริ่มการเดินทางเขียนโปรแกรม +- [ ] ทำการบ้านให้เสร็จและสำรวจเครื่องมือพัฒนาใหม่ 3 ตัว +- [ ] ติดตามนักพัฒนาหรือบัญชีโปรแกรมอย่างน้อย 5 คนในโซเชียลมีเดีย +- [ ] ลองสร้างสิ่งเล็กๆ ใน CodePen หรือ Replit (แม้แต่แค่ "Hello, [Your Name]!") +- [ ] อ่านบทความบล็อกนักพัฒนาคนหนึ่งเกี่ยวกับการเดินทางเขียนโค้ดของเขา +- [ ] เข้าร่วมการพบปะเสมือนจริงหรือชมการพูดคุยเรื่องโปรแกรมมิ่ง +- [ ] เริ่มเรียนรู้ภาษาที่เลือกด้วยบทเรียนออนไลน์ + +### 🗓️ **การเปลี่ยนแปลงตลอดเดือนของคุณ** +- [ ] สร้างโปรเจกต์เล็กๆ แรกของคุณ (แม้แต่หน้าเว็บง่ายๆ ก็ถือว่าได้!) +- [ ] ร่วมส่งเสริมโครงการโอเพนซอร์ส (เริ่มจากการแก้ไขเอกสาร) +- [ ] ให้คำปรึกษาคนที่เพิ่งเริ่มเดินทางโปรแกรมมิ่ง - [ ] สร้างเว็บไซต์พอร์ตโฟลิโอของนักพัฒนาของคุณ -- [ ] ติดต่อกับชุมชนนักพัฒนาในพื้นที่หรือกลุ่มศึกษา -- [ ] เริ่มวางแผนเป้าหมายการเรียนรู้ครั้งถัดไปของคุณ +- [ ] เชื่อมต่อกับชุมชนนักพัฒนาในพื้นที่หรือกลุ่มศึกษาด้วยกัน +- [ ] เริ่มวางแผนเป้าหมายการเรียนรู้ครั้งต่อไป -### 🎯 **การสะท้อนความคิดเห็นขั้นสุดท้าย** +### 🎯 **การตรวจสอบและสะท้อนความคิดครั้งสุดท้าย** -**ก่อนที่คุณจะไปต่อ ให้หยุดฉลองสักครู่:** -- สิ่งใดเกี่ยวกับการเขียนโปรแกรมที่ทำให้คุณตื่นเต้นวันนี้? -- อะไรคือเครื่องมือหรือแนวคิดที่คุณอยากสำรวจก่อน? -- คุณรู้สึกอย่างไรกับการเริ่มต้นการเดินทางเขียนโปรแกรมนี้? -- มีคำถามใดที่คุณอยากถามนักพัฒนาในตอนนี้? +**ก่อนที่คุณจะก้าวต่อไป ขอให้หยุดพักฉลองสักครู่:** +- มีสิ่งใดเกี่ยวกับการเขียนโปรแกรมที่ทำให้คุณตื่นเต้นในวันนี้? +- เครื่องมือหรือแนวคิดใดที่คุณต้องการสำรวจเป็นอันดับแรก? +- คุณรู้สึกอย่างไรเกี่ยวกับการเริ่มต้นการเดินทางเขียนโปรแกรมนี้? +- มีคำถามอะไรที่อยากถามนักพัฒนาตอนนี้ไหม? ```mermaid journey @@ -843,11 +842,11 @@ journey Confident: 5: You Helping Others: 5: You ``` -> 🌟 **จำไว้**: ผู้เชี่ยวชาญทุกคนเคยเป็นผู้เริ่มต้น นักพัฒนาระดับอาวุโสทุกคนเคยรู้สึกเหมือนคุณในตอนนี้ – ตื่นเต้น บางทีอาจจะรู้สึกท่วมท้น และแน่นอนว่ามีความอยากรู้อยากเห็นเกี่ยวกับสิ่งที่เป็นไปได้ คุณอยู่ในบริษัทที่ยอดเยี่ยม และการเดินทางนี้จะน่าทึ่งมาก ยินดีต้อนรับสู่โลกมหัศจรรย์ของการเขียนโปรแกรม! 🎉 +> 🌟 **จำไว้ว่า**: ผู้เชี่ยวชาญทุกคนเคยเป็นผู้เริ่มต้น นักพัฒนาที่อาวุโสทุกคนเคยรู้สึกเหมือนกับคุณในตอนนี้ – ตื่นเต้น บางทีอาจรู้สึกท่วมท้นเล็กน้อย และแน่นอนว่าสงสัยว่าเป็นไปได้แค่ไหน คุณอยู่ในบริษัทที่ยอดเยี่ยม และการเดินทางนี้จะน่าทึ่งมาก ยินดีต้อนรับสู่โลกอันน่ามหัศจรรย์ของการเขียนโปรแกรม! 🎉 --- **ข้อจำกัดความรับผิดชอบ**: -เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้การแปลมีความถูกต้อง โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อนได้ เอกสารต้นฉบับในภาษาต้นทางควรถูกพิจารณาเป็นแหล่งข้อมูลที่น่าเชื่อถือ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้การแปลโดยนักแปลมืออาชีพ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ +เอกสารฉบับนี้ได้รับการแปลโดยใช้บริการแปลภาษาด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นทางควรถูกพิจารณาเป็นแหล่งข้อมูลหลัก สำหรับข้อมูลที่สำคัญ ควรใช้บริการแปลโดยผู้เชี่ยวชาญที่เป็นมนุษย์ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความผิดที่เกิดจากการใช้การแปลนี้ \ No newline at end of file diff --git a/translations/th/AGENTS.md b/translations/th/AGENTS.md index a5e5b0cbc..3d205db23 100644 --- a/translations/th/AGENTS.md +++ b/translations/th/AGENTS.md @@ -2,29 +2,29 @@ ## ภาพรวมโครงการ -นี่คือคลังหลักสูตรการศึกษาเพื่อสอนพื้นฐานการพัฒนาเว็บให้กับผู้เริ่มต้น หลักสูตรนี้เป็นคอร์สที่ครอบคลุม 12 สัปดาห์ พัฒนาโดย Microsoft Cloud Advocates ซึ่งประกอบด้วยบทเรียนเชิงปฏิบัติ 24 บทที่ครอบคลุม JavaScript, CSS และ HTML +นี่คือที่เก็บหลักสูตรการศึกษาสำหรับการสอนพื้นฐานการพัฒนาเว็บสำหรับผู้เริ่มต้น หลักสูตรนี้เป็นหลักสูตรครบวงจร 12 สัปดาห์ที่พัฒนาโดย Microsoft Cloud Advocates โดยมีบทเรียนเชิงปฏิบัติทั้งหมด 24 บทเรียน ครอบคลุม JavaScript, CSS และ HTML -### ส่วนประกอบสำคัญ +### ส่วนประกอบหลัก -- **เนื้อหาการศึกษา**: บทเรียน 24 บทจัดโครงสร้างเป็นโมดูลที่อิงโครงการ -- **โครงการเชิงปฏิบัติ**: Terrarium, เกมพิมพ์, ส่วนขยายเบราว์เซอร์, เกมอวกาศ, แอพธนาคาร, ตัวแก้ไขโค้ด และผู้ช่วยแชท AI -- **แบบทดสอบเชิงโต้ตอบ**: แบบทดสอบ 48 ชุด แต่ละชุดมี 3 คำถาม (ประเมินก่อน/หลังบทเรียน) -- **รองรับหลายภาษา**: การแปลอัตโนมัติสำหรับ 50+ ภาษา ผ่าน GitHub Actions -- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโครงการ AI) +- **เนื้อหาการศึกษา**: บทเรียนที่จัดเป็นโครงสร้างจำนวน 24 บทเรียนแบ่งเป็นโมดูลตามโปรเจกต์ +- **โปรเจกต์เชิงปฏิบัติ**: Terrarium, Typing Game, Browser Extension, Space Game, Banking App, Code Editor และ AI Chat Assistant +- **แบบทดสอบแบบโต้ตอบ**: แบบทดสอบ 48 ชุด แต่ละชุดมี 3 คำถาม (ก่อน/หลังบทเรียน) +- **รองรับหลายภาษา**: การแปลอัตโนมัติสำหรับมากกว่า 50 ภาษา ผ่าน GitHub Actions +- **เทคโนโลยี**: HTML, CSS, JavaScript, Vue.js 3, Vite, Node.js, Express, Python (สำหรับโปรเจกต์ AI) ### สถาปัตยกรรม -- คลังการศึกษาที่มีโครงสร้างแบบเน้นบทเรียน -- โฟลเดอร์บทเรียนแต่ละบทประกอบด้วย README, ตัวอย่างโค้ด และคำตอบ -- โครงการแยกเดี่ยวในไดเรกทอรีแยกต่างหาก (quiz-app, โครงการบทเรียนต่างๆ) -- ระบบแปลด้วย GitHub Actions (co-op-translator) -- เอกสารให้บริการผ่าน Docsify และมีให้ในรูปแบบ PDF +- ที่เก็บการศึกษาที่มีโครงสร้างตามบทเรียน +- โฟลเดอร์บทเรียนแต่ละอันมี README, ตัวอย่างโค้ด และคำตอบ +- โปรเจกต์แบบสแตนด์อโลนในไดเรกทอรีแยกต่างหาก (quiz-app, โปรเจกต์บทเรียนต่างๆ) +- ระบบแปลโดยใช้ GitHub Actions (co-op-translator) +- เอกสารถูกให้บริการผ่าน Docsify และสามารถดาวน์โหลดเป็น PDF ได้ -## คำสั่งติดตั้ง +## คำสั่งการตั้งค่า -คลังนี้เน้นสำหรับการบริโภคเนื้อหาการศึกษาหลัก สำหรับการทำงานกับโครงการเฉพาะ: +ที่เก็บนี้เน้นสำหรับการบริโภคเนื้อหาการศึกษาเป็นหลัก สำหรับการทำงานกับโปรเจกต์เฉพาะ: -### การตั้งค่าคลังหลัก +### การตั้งค่าหลักของที่เก็บ ```bash git clone https://github.com/microsoft/Web-Dev-For-Beginners.git @@ -36,8 +36,8 @@ cd Web-Dev-For-Beginners ```bash cd quiz-app npm install -npm run dev # เริ่มเซิร์ฟเวอร์สำหรับพัฒนา -npm run build # สร้างสำหรับโปรดักชัน +npm run dev # เริ่มเซิร์ฟเวอร์พัฒนา +npm run build # สร้างสำหรับการผลิต npm run lint # รัน ESLint ``` @@ -46,20 +46,20 @@ npm run lint # รัน ESLint ```bash cd 7-bank-project/api npm install -npm start # เริ่มต้นเซิร์ฟเวอร์ API +npm start # เริ่มเซิร์ฟเวอร์ API npm run lint # รัน ESLint -npm run format # จัดรูปแบบด้วย Prettier +npm run format # ฟอร์แมตด้วย Prettier ``` -### โครงการส่วนขยายเบราว์เซอร์ +### โปรเจกต์ Browser Extension ```bash cd 5-browser-extension/solution npm install -# ปฏิบัติตามคำแนะนำการโหลดส่วนขยายเฉพาะเบราว์เซอร์ +# ปฏิบัติตามคำแนะนำการโหลดส่วนขยายเฉพาะของเบราว์เซอร์ ``` -### โครงการเกมอวกาศ +### โปรเจกต์ Space Game ```bash cd 6-space-game/solution @@ -67,7 +67,7 @@ npm install # เปิดไฟล์ index.html ในเบราว์เซอร์หรือใช้ Live Server ``` -### โครงการแชท (Python Backend) +### โปรเจกต์ Chat (Python Backend) ```bash cd 9-chat-project/solution/backend/python @@ -78,31 +78,31 @@ python api.py ## กระบวนการพัฒนา -### สำหรับผู้ร่วมสร้างเนื้อหา +### สำหรับผู้ที่มีส่วนร่วมเนื้อหา -1. **Fork คลังไปยังบัญชี GitHub ของคุณ** -2. **โคลน Fork ของคุณลงเครื่อง** +1. **Fork ที่เก็บนี้** ไปยังบัญชี GitHub ของคุณ +2. **Clone fork ของคุณ** มาที่เครื่องของคุณ 3. **สร้างสาขาใหม่** สำหรับการเปลี่ยนแปลงของคุณ -4. แก้ไขเนื้อหาหรือโค้ดตัวอย่างในบทเรียน -5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโครงการที่เกี่ยวข้อง -6. ส่งคำร้อง pull request ตามแนวทางการร่วมมือ +4. แก้ไขเนื้อหาบทเรียนหรือโค้ดตัวอย่าง +5. ทดสอบการเปลี่ยนแปลงโค้ดในไดเรกทอรีโปรเจกต์ที่เกี่ยวข้อง +6. ส่ง pull request ตามแนวทางการมีส่วนร่วม ### สำหรับผู้เรียน -1. Fork หรือโคลนคลัง -2. ไปยังไดเรกทอรีบทเรียนตามลำดับ +1. Fork หรือ clone ที่เก็บนี้ +2. เข้าไปในไดเรกทอรีบทเรียนทีละบท 3. อ่านไฟล์ README ของแต่ละบทเรียน -4. ทำแบบทดสอบก่อนบทเรียนที่ https://ff-quizzes.netlify.app/web/ +4. ทำแบบทดสอบก่อนเรียนที่ https://ff-quizzes.netlify.app/web/ 5. ทำงานผ่านตัวอย่างโค้ดในโฟลเดอร์บทเรียน -6. ทำแบบฝึกหัดและความท้าทายให้ครบถ้วน -7. เข้าทำแบบทดสอบหลังบทเรียน +6. ทำแบบฝึกหัดและความท้าทายต่างๆ +7. ทำแบบทดสอบหลังเรียน ### การพัฒนาแบบสด -- **เอกสาร**: รัน `docsify serve` ในโฟลเดอร์หลัก (พอร์ต 3000) -- **Quiz App**: รัน `npm run dev` ในโฟลเดอร์ quiz-app -- **โครงการ**: ใช้ส่วนขยาย Live Server ของ VS Code สำหรับโครงการ HTML -- **โครงการ API**: รัน `npm start` ในไดเรกทอรี API ที่เกี่ยวข้อง +- **เอกสาร**: รัน `docsify serve` ในโฟลเดอร์ราก (พอร์ต 3000) +- **Quiz App**: รัน `npm run dev` ในไดเรกทอรี quiz-app +- **โปรเจกต์**: ใช้ส่วนขยาย Live Server ของ VS Code สำหรับโปรเจกต์ HTML +- **โปรเจกต์ API**: รัน `npm start` ในไดเรกทอรี API ที่เกี่ยวข้อง ## คำแนะนำการทดสอบ @@ -110,8 +110,8 @@ python api.py ```bash cd quiz-app -npm run lint # ตรวจสอบปัญหาสไตล์โค้ด -npm run build # ยืนยันการสร้างสำเร็จ +npm run lint # ตรวจสอบปัญหาเกี่ยวกับรูปแบบโค้ด +npm run build # ยืนยันการสร้างที่สำเร็จ ``` ### การทดสอบ Bank API @@ -119,164 +119,162 @@ npm run build # ยืนยันการสร้างสำเร็ ```bash cd 7-bank-project/api npm run lint # ตรวจสอบปัญหาสไตล์โค้ด -node server.js # ตรวจสอบว่าเซิร์ฟเวอร์เริ่มต้นโดยไม่มีข้อผิดพลาด +node server.js # ตรวจสอบว่าเซิร์ฟเวอร์เริ่มต้นโดยไม่มีข้อผิดพลาดไหม ``` ### แนวทางการทดสอบทั่วไป -- นี่คือคลังเพื่อการศึกษาไม่มีการทดสอบอัตโนมัติอย่างครอบคลุม +- นี่คือที่เก็บเอกสารการศึกษาที่ไม่มีการทดสอบอัตโนมัติครอบคลุม - การทดสอบด้วยตนเองเน้นที่: - ตัวอย่างโค้ดรันได้โดยไม่มีข้อผิดพลาด - - ลิงก์ในเอกสารทำงานถูกต้อง - - การสร้างโครงการสำเร็จลุล่วง - - ตัวอย่างปฏิบัติตามแนวปฏิบัติที่ดีที่สุด + - ลิงก์ในเอกสารทำงานได้ถูกต้อง + - การสร้างโปรเจกต์สำเร็จ + - ตัวอย่างเป็นไปตามแนวทางปฏิบัติที่ดีที่สุด ### การตรวจสอบก่อนส่ง -- รัน `npm run lint` ในโฟลเดอร์ที่มี package.json -- ตรวจสอบว่าลิงก์ markdown ถูกต้อง +- รัน `npm run lint` ในไดเรกทอรีที่มี package.json +- ตรวจสอบลิงก์ markdown ให้ถูกต้อง - ทดสอบตัวอย่างโค้ดในเบราว์เซอร์หรือ Node.js -- ตรวจสอบว่าแปลภาษายังคงรักษาโครงสร้างอย่างถูกต้อง +- ตรวจสอบว่าแปลภาษายังคงโครงสร้างถูกต้อง ## แนวทางการเขียนโค้ด ### JavaScript - ใช้ไวยากรณ์ ES6+ สมัยใหม่ -- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานที่ระบุในโครงการ -- ใช้ชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความชัดเจนทางการศึกษา +- ปฏิบัติตามการตั้งค่า ESLint มาตรฐานที่ให้ไว้ในโปรเจกต์ +- ใช้ชื่อตัวแปรและฟังก์ชันที่มีความหมายเพื่อความชัดเจนในการศึกษา - เพิ่มคอมเมนต์อธิบายแนวคิดสำหรับผู้เรียน -- จัดรูปแบบโดยใช้ Prettier เมื่อมีการตั้งค่า +- จัดรูปแบบด้วย Prettier เมื่อกำหนดไว้ ### HTML/CSS -- องค์ประกอบ HTML5 เชิงความหมาย +- ใช้ HTML5 อย่างมีความหมาย - หลักการออกแบบตอบสนอง -- การตั้งชื่อชั้นเรียนที่ชัดเจน -- คอมเมนต์เพื่ออธิบายเทคนิค CSS สำหรับผู้เรียน +- การตั้งชื่อคลาสที่ชัดเจน +- คอมเมนต์อธิบายเทคนิค CSS สำหรับผู้เรียน ### Python -- ปฏิบัติตามมาตรฐานสไตล์ PEP 8 -- ตัวอย่างโค้ดที่ชัดเจนและใช้เพื่อการศึกษา -- ใช้ type hints เมื่อต้องช่วยการเรียนรู้ +- ปฏิบัติตามแนวทางสไตล์ PEP 8 +- ตัวอย่างโค้ดที่ชัดเจนและเน้นการศึกษา +- ใช้ type hints เมื่อช่วยให้เรียนรู้ได้ดีขึ้น ### เอกสาร Markdown -- โครงสร้างหัวข้อชัดเจน -- บล็อกโค้ดพร้อมระบุภาษา +- โครงสร้างหัวข้อที่ชัดเจน +- บล็อกโค้ดระบุภาษา - ลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม -- ภาพหน้าจอและรูปในโฟลเดอร์ `images/` +- รูปภาพและสกรีนช็อตในไดเรกทอรี `images/` - ข้อความ alt สำหรับภาพเพื่อการเข้าถึง ### การจัดระเบียบไฟล์ -- บทเรียนลำดับหมายเลข (1-getting-started-lessons, 2-js-basics, ฯลฯ) -- โครงการแต่ละโครงการมีโฟลเดอร์ `solution/` และบ่อยครั้งมี `start/` หรือ `your-work/` -- รูปภาพเก็บในโฟลเดอร์ `images/` เฉพาะบทเรียน -- แปลภาษาในโครงสร้าง `translations/{language-code}/` +- บทเรียนเรียงลำดับหมายเลขต่อเนื่อง (เช่น 1-getting-started-lessons, 2-js-basics) +- โปรเจกต์แต่ละชิ้นมีไดเรกทอรี `solution/` และมักมี `start/` หรือ `your-work/` +- รูปภาพเก็บไว้ในโฟลเดอร์ `images/` เฉพาะบทเรียน +- แปลภาษาจัดเก็บในโครงสร้าง `translations/{language-code}/` -## การสร้างและการปรับใช้ +## การสร้างและปรับใช้ ### การปรับใช้ Quiz App (Azure Static Web Apps) -quiz-app ถูกกำหนดค่าสำหรับการปรับใช้ผ่าน Azure Static Web Apps: +quiz-app ถูกตั้งค่าสำหรับการปรับใช้บน Azure Static Web Apps: ```bash cd quiz-app npm run build # สร้างโฟลเดอร์ dist/ -# ทำการดีพลอยผ่านเวิร์กโฟลว์ GitHub Actions เมื่อมีการ push ไปที่ main +# นำส่งผ่านเวิร์กโฟลว์ GitHub Actions เมื่อมีการ push ไปที่ main ``` -การกำหนดค่า Azure Static Web Apps: +การตั้งค่า Azure Static Web Apps: - **ตำแหน่งแอป**: `/quiz-app` - **ตำแหน่งผลลัพธ์**: `dist` -- **ขั้นตอนงาน**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` +- **เวิร์กโฟลว์**: `.github/workflows/azure-static-web-apps-ashy-river-0debb7803.yml` -### การสร้างไฟล์ PDF จากเอกสาร +### การสร้าง PDF เอกสาร ```bash npm install # ติดตั้ง docsify-to-pdf -npm run convert # สร้างไฟล์ PDF จาก docs +npm run convert # สร้าง PDF จากเอกสาร ``` ### เอกสาร Docsify ```bash npm install -g docsify-cli # ติดตั้ง Docsify ทั่วระบบ -docsify serve # ให้บริการบน localhost:3000 +docsify serve # ให้บริการที่ localhost:3000 ``` -### การสร้างโครงการเฉพาะ +### การสร้างโปรเจกต์เฉพาะ -แต่ละไดเรกทอรีโครงการอาจมีขั้นตอนการสร้างของตัวเอง: -- โครงการ Vue: `npm run build` เพื่อสร้าง bundle สำหรับโปรดักชัน -- โครงการสแตติก: ไม่มีขั้นตอนการสร้าง บริการไฟล์โดยตรง +แต่ละโปรเจกต์อาจมีขั้นตอนการสร้างของตัวเอง: +- โปรเจกต์ Vue: `npm run build` สร้าง bundle สำหรับโปรดักชัน +- โปรเจกต์สแตติก: ไม่มีขั้นตอนสร้าง เสิร์ฟไฟล์โดยตรง ## แนวทางการส่ง Pull Request -### รูปแบบชื่อเรื่อง +### รูปแบบชื่อหัวข้อ -ใช้ชื่อเรื่องที่ชัดเจนและบอกบริเวณการเปลี่ยนแปลง: -- `[Quiz-app] เพิ่มแบบทดสอบใหม่สำหรับบทเรียน X` -- `[Lesson-3] แก้ไขคำผิดในโครงการ terrarium` -- `[Translation] เพิ่มการแปลภาษาสเปนสำหรับบทเรียน 5` +ใช้ชื่อหัวข้อที่ชัดเจนและบ่งบอกพื้นที่การเปลี่ยนแปลง: +- `[Quiz-app] เพิ่มแบบทดสอบใหม่สำหรับบทเรียนที่ X` +- `[Lesson-3] แก้ไขคำผิดในโปรเจกต์ terrarium` +- `[Translation] เพิ่มการแปลภาษาสเปนสำหรับบทเรียนที่ 5` - `[Docs] ปรับปรุงคำแนะนำการตั้งค่า` -### การตรวจสอบที่จำเป็น - -ก่อนส่ง PR: +### การตรวจสอบที่ต้องทำก่อนส่ง 1. **คุณภาพโค้ด**: - - รัน `npm run lint` ในโฟลเดอร์โครงการที่ได้รับผลกระทบ + - รัน `npm run lint` ในไดเรกทอรีโปรเจกต์ที่ได้รับผลกระทบ - แก้ไขข้อผิดพลาดและคำเตือนทั้งหมด 2. **การตรวจสอบการสร้าง**: - - รัน `npm run build` หากใช้งานได้ - - ตรวจสอบว่าไม่มีข้อผิดพลาดในการสร้าง + - รัน `npm run build` หากมี + - แน่ใจว่าไม่มีข้อผิดพลาดการสร้าง 3. **การตรวจสอบลิงก์**: - ทดสอบลิงก์ markdown ทั้งหมด - - ยืนยันการอ้างอิงรูปภาพทำงานถูกต้อง + - ตรวจสอบการอ้างอิงรูปภาพให้ถูกต้อง 4. **การตรวจสอบเนื้อหา**: - - ตรวจทานการสะกดและไวยากรณ์ - - ตรวจสอบว่าตัวอย่างโค้ดถูกต้องและเหมาะสมกับการศึกษา - - ยืนยันว่าการแปลรักษาความหมายเดิม + - ตรวจทานคำสะกดและไวยากรณ์ + - ตรวจสอบว่าโค้ดตัวอย่างถูกต้องและเน้นการศึกษา + - ตรวจสอบการแปลว่ายังคงความหมายเดิม -### ข้อกำหนดการร่วมมือ +### ข้อกำหนดการมีส่วนร่วม -- ตกลงยอมรับ Microsoft CLA (ตรวจสอบอัตโนมัติใน PR แรก) +- ยอมรับข้อตกลง Microsoft CLA (ตรวจสอบอัตโนมัติใน PR แรก) - ปฏิบัติตาม [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) -- ดู [CONTRIBUTING.md](./CONTRIBUTING.md) สำหรับแนวทางรายละเอียด -- อ้างอิงหมายเลข issue ในคำอธิบาย PR หากเกี่ยวข้อง +- ดูรายละเอียดใน [CONTRIBUTING.md](./CONTRIBUTING.md) +- อ้างเลขที่ issue ในคำอธิบาย PR ถ้ามี ### กระบวนการตรวจสอบ -- PR ได้รับการตรวจโดยผู้ดูแลและชุมชน +- PR จะถูกตรวจสอบโดยผู้ดูแลและชุมชน - ให้ความสำคัญกับความชัดเจนทางการศึกษา -- ตัวอย่างโค้ดต้องเป็นไปตามแนวทางปฏิบัติที่ดีที่สุดปัจจุบัน -- การแปลได้รับการตรวจสอบเพื่อความถูกต้องและเหมาะสมทางวัฒนธรรม +- ตัวอย่างโค้ดควรปฏิบัติตามแนวทางปัจจุบัน +- ตรวจสอบการแปลในแง่ความถูกต้องและเหมาะสมทางวัฒนธรรม ## ระบบแปลภาษา ### การแปลอัตโนมัติ -- ใช้ GitHub Actions กับ workflow co-op-translator -- แปลเป็น 50+ ภาษาโดยอัตโนมัติ -- ไฟล์ต้นทางในไดเรกทอรีหลัก -- ไฟล์แปลในโครงสร้าง `translations/{language-code}/` +- ใช้ GitHub Actions พร้อม workflow co-op-translator +- แปลอัตโนมัติไปยังมากกว่า 50 ภาษา +- ไฟล์ต้นทางอยู่ในไดเรกทอรีหลัก +- ไฟล์แปลอยู่ในโครงสร้าง `translations/{language-code}/` ### การเพิ่มการแปลด้วยตนเอง 1. ค้นหาไฟล์ใน `translations/{language-code}/` -2. ปรับปรุงโดยรักษาโครงสร้างไว้ -3. ตรวจสอบให้ตัวอย่างโค้ดยังคงทำงานได้ -4. ทดสอบเนื้อหาแบบทดสอบในท้องถิ่นถ้ามี +2. แก้ไขปรับปรุงพร้อมรักษาโครงสร้างเดิม +3. ตรวจสอบให้ตัวอย่างโค้ดยังใช้งานได้ +4. ทดสอบเนื้อหาแบบทดสอบท้องถิ่น -### เมตาดาต้าแปลภาษา +### เมตาดาต้าการแปล -ไฟล์แปลจะมีหัวข้อเมตาดาต้าดังนี้: +ไฟล์ที่แปลมีเมตาดาต้าหัวข้อ: ```markdown -**ข้อจำกัดความรับผิดชอบ**: -เอกสารฉบับนี้ได้รับการแปลโดยใช้บริการแปลด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะพยายามให้ความถูกต้องสูงสุด แต่โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นทางถือเป็นแหล่งข้อมูลที่น่าเชื่อถือที่สุด สำหรับข้อมูลที่มีความสำคัญ ควรใช้บริการแปลโดยมนุษย์ผู้เชี่ยวชาญ เราไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดใด ๆ ที่เกิดจากการใช้การแปลนี้ +**ข้อจำกัดความรับผิดชอบ**: เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษาอัตโนมัติ [Co-op Translator](https://github.com/Azure/co-op-translator) แม้เราจะมุ่งมั่นเพื่อความถูกต้อง แต่โปรดทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อน เอกสารต้นฉบับในภาษาต้นทางควรถูกพิจารณาเป็นแหล่งข้อมูลที่เชื่อถือได้ สำหรับข้อมูลที่สำคัญ ขอแนะนำให้ใช้บริการแปลโดยมืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดจากการใช้การแปลนี้ \ No newline at end of file diff --git a/translations/th/README.md b/translations/th/README.md index 7010e77cc..554e5a402 100644 --- a/translations/th/README.md +++ b/translations/th/README.md @@ -12,200 +12,210 @@ # การพัฒนาเว็บสำหรับผู้เริ่มต้น - หลักสูตร -เรียนรู้พื้นฐานของการพัฒนาเว็บกับหลักสูตรครอบคลุม 12 สัปดาห์ของเราโดย Microsoft Cloud Advocates แต่ละบทเรียนทั้ง 24 บทเรียนจะเจาะลึก JavaScript, CSS, และ HTML ผ่านโปรเจกต์ปฏิบัติ เช่น เทอร์ราเรียม, ส่วนขยายเบราว์เซอร์ และเกมอวกาศ พร้อมส่วนร่วมกับแบบทดสอบ, การสนทนา และงานปฏิบัติ พัฒนาทักษะและเพิ่มประสิทธิภาพการเก็บความรู้ของคุณด้วยวิธีการสอนผ่านโปรเจกต์ที่ได้ผล เริ่มต้นเส้นทางการเขียนโค้ดของคุณวันนี้! +เรียนรู้พื้นฐานของการพัฒนาเว็บด้วยคอร์ส 12 สัปดาห์แบบครบวงจรโดย Microsoft Cloud Advocates แต่ละบทเรียน 24 บท จะเจาะลึก JavaScript, CSS และ HTML ผ่านโครงการทำมือเช่น เทอร์ราเรียม, ส่วนขยายเบราว์เซอร์ และเกมอวกาศ มีส่วนร่วมกับแบบทดสอบ, การสนทนา และงานปฏิบัติ เพิ่มพูนทักษะของคุณและเพิ่มประสิทธิภาพในการจดจำความรู้ด้วยวิธีการสอนที่มุ่งเน้นโครงการ เริ่มต้นเส้นทางการเขียนโค้ดของคุณวันนี้! -เข้าร่วมชุมชน Discord Azure AI Foundry +เข้าร่วมชุมชน Azure AI Foundry Discord [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -ทำตามขั้นตอนเหล่านี้เพื่อเริ่มใช้ทรัพยากรเหล่านี้: -1. **Fork ที่เก็บ**: คลิก [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) -2. **โคลนที่เก็บ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +ทำตามขั้นตอนเหล่านี้เพื่อเริ่มต้นใช้ทรัพยากรเหล่านี้: +1. **ForkRepository**: คลิก [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-beginners.svg?style=social&label=Fork)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/fork) +2. **CloneRepository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` 3. [**เข้าร่วม Azure AI Foundry Discord และพบปะผู้เชี่ยวชาญและนักพัฒนาร่วมกัน**](https://discord.com/invite/ByRwuEEgH4) -### 🌐 การสนับสนุนหลายภาษา +### 🌐 รองรับหลายภาษา -#### สนับสนุนผ่าน GitHub Action (อัตโนมัติ & อัปเดตเสมอ) +#### รองรับผ่าน GitHub Action (ทำงานอัตโนมัติ & เป็นปัจจุบันเสมอ) [Arabic](../ar/README.md) | [Bengali](../bn/README.md) | [Bulgarian](../bg/README.md) | [Burmese (Myanmar)](../my/README.md) | [Chinese (Simplified)](../zh-CN/README.md) | [Chinese (Traditional, Hong Kong)](../zh-HK/README.md) | [Chinese (Traditional, Macau)](../zh-MO/README.md) | [Chinese (Traditional, Taiwan)](../zh-TW/README.md) | [Croatian](../hr/README.md) | [Czech](../cs/README.md) | [Danish](../da/README.md) | [Dutch](../nl/README.md) | [Estonian](../et/README.md) | [Finnish](../fi/README.md) | [French](../fr/README.md) | [German](../de/README.md) | [Greek](../el/README.md) | [Hebrew](../he/README.md) | [Hindi](../hi/README.md) | [Hungarian](../hu/README.md) | [Indonesian](../id/README.md) | [Italian](../it/README.md) | [Japanese](../ja/README.md) | [Kannada](../kn/README.md) | [Korean](../ko/README.md) | [Lithuanian](../lt/README.md) | [Malay](../ms/README.md) | [Malayalam](../ml/README.md) | [Marathi](../mr/README.md) | [Nepali](../ne/README.md) | [Nigerian Pidgin](../pcm/README.md) | [Norwegian](../no/README.md) | [Persian (Farsi)](../fa/README.md) | [Polish](../pl/README.md) | [Portuguese (Brazil)](../pt-BR/README.md) | [Portuguese (Portugal)](../pt-PT/README.md) | [Punjabi (Gurmukhi)](../pa/README.md) | [Romanian](../ro/README.md) | [Russian](../ru/README.md) | [Serbian (Cyrillic)](../sr/README.md) | [Slovak](../sk/README.md) | [Slovenian](../sl/README.md) | [Spanish](../es/README.md) | [Swahili](../sw/README.md) | [Swedish](../sv/README.md) | [Tagalog (Filipino)](../tl/README.md) | [Tamil](../ta/README.md) | [Telugu](../te/README.md) | [Thai](./README.md) | [Turkish](../tr/README.md) | [Ukrainian](../uk/README.md) | [Urdu](../ur/README.md) | [Vietnamese](../vi/README.md) > **ต้องการโคลนแบบโลคัล?** - -> ที่เก็บนี้มีการแปลมากกว่า 50 ภาษา ซึ่งจะเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่มีการแปล ให้ใช้ sparse checkout: +> +> คลังนี้มีการแปลภาษามากกว่า 50 ภาษา ซึ่งเพิ่มขนาดการดาวน์โหลดอย่างมาก หากต้องการโคลนโดยไม่รวมการแปล ให้ใช้ sparse checkout: +> +> **Bash / macOS / Linux:** > ```bash > git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git > cd Web-Dev-For-Beginners > git sparse-checkout set --no-cone '/*' '!translations' '!translated_images' > ``` -> ซึ่งจะให้คุณทุกอย่างที่จำเป็นสำหรับหลักสูตรด้วยการดาวน์โหลดที่รวดเร็วขึ้นมาก +> +> **CMD (Windows):** +> ```cmd +> git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git +> cd Web-Dev-For-Beginners +> git sparse-checkout set --no-cone "/*" "!translations" "!translated_images" +> ``` +> +> นี้จะให้คุณทุกอย่างที่จำเป็นสำหรับการทำคอร์สด้วยความเร็วดาวน์โหลดที่เร็วขึ้นมาก -**ถ้าคุณต้องการให้เพิ่มการสนับสนุนภาษาแปลอื่น ๆ รายการภาษาที่สนับสนุนอยู่ [ที่นี่](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** +**หากคุณต้องการให้รองรับภาษาการแปลเพิ่มเติม ติดตามได้ที่ [นี่](https://github.com/Azure/co-op-translator/blob/main/getting_started/supported-languages.md)** [![Open in Visual Studio Code](https://img.shields.io/static/v1?logo=visualstudiocode&label=&message=Open%20in%20Visual%20Studio%20Code&labelColor=2c2c32&color=007acc&logoColor=007acc)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) -#### 🧑‍🎓 _คุณเป็นนักเรียนหรือไม่?_ +#### 🧑‍🎓 _คุณเป็นนักเรียนใช่ไหม?_ -เยี่ยมชม [**หน้า Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ซึ่งคุณจะพบทรัพยากรสำหรับผู้เริ่มต้น, ชุดนักเรียน และวิธีรับบัตรกำนัลประกาศนียบัตรฟรี นี่คือหน้าที่คุณควรกดบุ๊กมาร์กและตรวจสอบเป็นระยะเนื่องจากเราจะเปลี่ยนเนื้อหาทุกเดือน +เยี่ยมชม [**หน้า Student Hub**](https://docs.microsoft.com/learn/student-hub/?WT.mc_id=academic-77807-sagibbon) ที่จะมีแหล่งข้อมูลสำหรับผู้เริ่มต้น ชุดนักเรียน และวิธีการรับบัตรกำนัลใบประกาศนียบัตรฟรี หน้าเว็บนี้คือหน้าที่คุณควรบันทึกไว้และตรวจสอบเป็นระยะเพราะเราจะเปลี่ยนเนื้อหาทุกเดือน -### 📣 ประกาศ - ความท้าทายโหมด GitHub Copilot Agent ใหม่ให้ทำ! +### 📣 ประกาศ - ความท้าทายแบบ GitHub Copilot Agent โหมดใหม่เพื่อทำให้เสร็จ! -เพิ่มความท้าทายใหม่ ให้ค้นหา "GitHub Copilot Agent Challenge 🚀" ในบทส่วนใหญ่ เป็นความท้าทายใหม่สำหรับคุณในการใช้ GitHub Copilot และโหมด Agent หากคุณไม่เคยใช้โหมด Agent มาก่อน โหมดนี้สามารถไม่เพียงแค่สร้างข้อความแต่ยังสามารถสร้างและแก้ไขไฟล์, รันคำสั่ง และอื่น ๆ +เพิ่มความท้าทายใหม่ ค้นหา "GitHub Copilot Agent Challenge 🚀" ในเกือบทุกบท นี่คือความท้าทายใหม่สำหรับคุณในการทำให้เสร็จโดยใช้ GitHub Copilot และโหมด Agent หากคุณไม่เคยใช้โหมด Agent มาก่อน มันสามารถไม่เพียงแต่สร้างข้อความ แต่ยังสร้างและแก้ไขไฟล์ รันคำสั่ง และอื่น ๆ ได้ -### 📣 ประกาศ - _โปรเจกต์ใหม่ที่สร้างโดย Generative AI_ +### 📣 ประกาศ - _โครงการใหม่ที่ใช้ Generative AI_ -เพิ่มโปรเจกต์ AI Assistant ใหม่เพิ่งเพิ่มเข้ามา ลองดูได้ที่ [โปรเจกต์](./9-chat-project/README.md) +เพิ่มโครงการผู้ช่วย AI ใหม่ ตรวจสอบได้ที่ [project](./9-chat-project/README.md) -### 📣 ประกาศ - _หลักสูตรใหม่_ สำหรับ Generative AI สำหรับ JavaScript เพิ่งเปิดตัว +### 📣 ประกาศ - _หลักสูตรใหม่_ เกี่ยวกับ Generative AI สำหรับ JavaScript เพิ่งปล่อยออกมา -อย่าพลาดหลักสูตร Generative AI ใหม่ของเรา! +อย่าพลาดหลักสูตรใหม่ของเราใน Generative AI! เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น! ![Background](../../translated_images/th/background.148a8d43afde5730.webp) -- บทเรียนครอบคลุมทุกอย่างตั้งแต่พื้นฐานจนถึง RAG -- โต้ตอบกับตัวละครประวัติศาสตร์โดยใช้ GenAI และแอปคู่ของเรา -- เนื้อเรื่องสนุกและน่าติดตาม คุณจะได้เดินทางข้ามเวลา! +- บทเรียนครอบคลุมตั้งแต่พื้นฐานถึง RAG +- มีปฏิสัมพันธ์กับตัวละครในประวัติศาสตร์โดยใช้ GenAI และแอปคู่หูของเรา +- เรื่องราวสนุกสนานและน่าติดตาม คุณจะได้เดินทางข้ามเวลา! ![character](../../translated_images/th/character.5c0dd8e067ffd693.webp) - -แต่ละบทเรียนประกอบด้วยงานที่ต้องทำ, การตรวจสอบความรู้ และความท้าทายเพื่อแนะนำการเรียนรู้หัวข้อต่าง ๆ เช่น: -- การตั้งค่าและออกแบบ prompt -- การสร้างแอปข้อความและรูปภาพ +แต่ละบทเรียนมีการมอบหมายงานให้ทำ การตรวจเช็คความรู้ และความท้าทายเพื่อแนะนำการเรียนรู้หัวข้อต่าง ๆ เช่น: +- การเขียนพรอมต์และการออกแบบพรอมต์ +- การสร้างแอปข้อความและภาพ - แอปค้นหา เยี่ยมชม [https://aka.ms/genai-js-course](https://aka.ms/genai-js-course) เพื่อเริ่มต้น! -## 🌱 การเริ่มต้นใช้งาน +## 🌱 การเริ่มต้น -> **ครูผู้สอน** เราได้ [รวมคำแนะนำ](for-teachers.md) เกี่ยวกับวิธีใช้หลักสูตรนี้ เราต้องการรับคำติชมจากคุณ [ในฟอรัมอภิปรายของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! +> **สำหรับครูผู้สอน** เรามี [คำแนะนำบางส่วน](for-teachers.md) เกี่ยวกับวิธีใช้หลักสูตรนี้ เราต้องการรับฟังความคิดเห็นของคุณ [ในฟอรัมสนทนาของเรา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! -**[ผู้เรียน](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** สำหรับแต่ละบทเรียน เริ่มด้วยแบบทดสอบก่อนบรรยาย แล้วอ่านเนื้อหาบรรยาย, ทำกิจกรรมต่าง ๆ และตรวจสอบความเข้าใจด้วยแบบทดสอบหลังบรรยาย +**[ผู้เรียน](https://aka.ms/student-page/?WT.mc_id=academic-77807-sagibbon)** สำหรับแต่ละบทเรียน เริ่มด้วยแบบทดสอบก่อนบรรยาย จากนั้นอ่านเนื้อหาบทเรียน ทำกิจกรรมต่าง ๆ และตรวจสอบความเข้าใจด้วยแบบทดสอบหลังบรรยาย -เพื่อเพิ่มประสบการณ์การเรียนรู้ของคุณ เชื่อมต่อกับเพื่อนร่วมชั้นเพื่อทำโปรเจกต์ร่วมกัน! เราส่งเสริมการสนทนาใน [ฟอรัมอภิปราย](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ซึ่งทีมผู้ดูแลของเราจะพร้อมตอบคำถามของคุณ +เพื่อเพิ่มประสบการณ์การเรียนรู้ของคุณ ให้เชื่อมต่อกับเพื่อนร่วมชั้นเพื่อทำโครงการด้วยกัน! การสนทนาได้รับการสนับสนุนใน [ฟอรัมสนทนา](https://github.com/microsoft/Web-Dev-For-Beginners/discussions) ที่ซึ่งทีมผู้ควบคุมของเราจะพร้อมตอบคำถามของคุณ -เพื่อการศึกษาต่อเนื่อง เราขอแนะนำให้สำรวจ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) สำหรับเนื้อหาเพิ่มเติม +เพื่อเสริมความรู้ของคุณ เราขอแนะนำอย่างยิ่งให้สำรวจ [Microsoft Learn](https://learn.microsoft.com/users/wirelesslife/collections/p1ddcy5jwy0jkm?WT.mc_id=academic-77807-sagibbon) สำหรับวัสดุการศึกษาเพิ่มเติม ### 📋 การตั้งค่าสภาพแวดล้อมของคุณ -หลักสูตรนี้มีสภาพแวดล้อมสำหรับการพัฒนาพร้อมให้ใช้งาน! เมื่อต้องการเริ่มต้น คุณสามารถเลือกใช้หลักสูตรนี้ใน [Codespace](https://github.com/features/codespaces/) (_สภาพแวดล้อมบนเบราว์เซอร์โดยไม่ต้องติดตั้ง_) หรือในเครื่องของคุณโดยใช้โปรแกรมแก้ไขข้อความ เช่น [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) +หลักสูตรนี้มีสภาพแวดล้อมการพัฒนาพร้อมใช้งาน! เมื่อเริ่มต้น คุณสามารถเลือกที่จะรันหลักสูตรใน [Codespace](https://github.com/features/codespaces/) (_สภาพแวดล้อมผ่านเบราว์เซอร์ที่ไม่ต้องติดตั้งใด ๆ_) หรือรันบนคอมพิวเตอร์ของคุณโดยใช้ตัวแก้ไขข้อความเช่น [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) -#### สร้างที่เก็บของคุณ -เพื่อความสะดวกในการบันทึกงานของคุณ ควรสร้างสำเนาของที่เก็บนี้โดยคลิกปุ่ม **Use this template** ที่ด้านบนของหน้าเพื่อสร้างที่เก็บใหม่ในบัญชี GitHub ของคุณที่มีสำเนาหลักสูตรนี้ +#### สร้าง repository ของคุณ +เพื่อให้คุณบันทึกงานของคุณได้ง่าย ขอแนะนำให้คุณสร้างสำเนาของ repository นี้โดยคลิกปุ่ม **Use this template** ที่ด้านบนของหน้า ซึ่งจะสร้าง repository ใหม่ในบัญชี GitHub ของคุณโดยมีสำเนาหลักสูตรนี้ ทำตามขั้นตอนเหล่านี้: -1. **Fork ที่เก็บ**: คลิกที่ปุ่ม "Fork" ที่มุมบนขวาของหน้านี้ -2. **โคลนที่เก็บ**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` +1. **Fork Repository**: คลิกปุ่ม "Fork" ที่มุมขวาบนของหน้านี้ +2. **Clone Repository**: `git clone https://github.com/microsoft/Web-Dev-For-Beginners.git` -#### การใช้งานหลักสูตรใน Codespace +#### รันหลักสูตรใน Codespace -ในสำเนาที่เก็บของคุณที่สร้างไว้ คลิกปุ่ม **Code** และเลือก **Open with Codespaces** ขั้นตอนนี้จะสร้าง Codespace ใหม่ให้คุณทำงานได้ +ในสำเนาของ repository ที่คุณสร้าง คลิกปุ่ม **Code** และเลือก **Open with Codespaces** ซึ่งจะสร้าง Codespace ใหม่ให้คุณทำงาน ![Codespace](../../translated_images/th/createcodespace.0238bbf4d7a8d955.webp) -#### การใช้งานหลักสูตรในเครื่องของคุณ - -ในการรันหลักสูตรนี้บนเครื่องของคุณ คุณจะต้องมีโปรแกรมแก้ไขข้อความ, เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา [แนะนำภาษาโปรแกรมและเครื่องมือ](../../1-getting-started-lessons/1-intro-to-programming-languages) จะนำทางคุณเลือกเครื่องมือที่เหมาะสม - -เราขอแนะนำให้ใช้ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) ซึ่งมี [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ในตัว คุณสามารถดาวน์โหลด Visual Studio Code [ที่นี่](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) +#### รันหลักสูตรบนคอมพิวเตอร์ของคุณเอง +การรันหลักสูตรนี้บนคอมพิวเตอร์ของคุณ คุณจะต้องมีตัวแก้ไขข้อความ, เบราว์เซอร์ และเครื่องมือบรรทัดคำสั่ง บทเรียนแรกของเรา, [บทนำสู่ภาษาโปรแกรมและเครื่องมือ](../../1-getting-started-lessons/1-intro-to-programming-languages), จะแนะนำตัวเลือกต่าง ๆ สำหรับเครื่องมือเหล่านี้เพื่อให้คุณเลือกใช้ที่เหมาะสมกับคุณ -1. โคลนที่เก็บของคุณลงบนเครื่องของคุณได้โดยคลิกที่ปุ่ม **Code** และคัดลอก URL: +คำแนะนำของเราคือให้ใช้ [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) เป็นตัวแก้ไขของคุณ ซึ่งมี [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ในตัว คุณสามารถดาวน์โหลด Visual Studio Code ได้ที่นี่ [here](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) +1. โคลนที่เก็บของคุณไปยังคอมพิวเตอร์ของคุณ คุณสามารถทำได้โดยการคลิกปุ่ม **Code** และคัดลอก URL: [CodeSpace](./images/createcodespace.png) -จากนั้น เปิด [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ภายใน [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) และรันคำสั่งต่อไปนี้ โดยแทนที่ `` ด้วย URL ที่คุณเพิ่งคัดลอกมา: + + จากนั้น เปิด [Terminal](https://code.visualstudio.com/docs/terminal/basics/?WT.mc_id=academic-77807-sagibbon) ภายใน [Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon) และรันคำสั่งต่อไปนี้ โดยแทนที่ `` ด้วย URL ที่คุณเพิ่งคัดลอกมา: ```bash git clone ``` -2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยคลิกที่ **File** > **Open Folder** และเลือกโฟลเดอร์ที่คุณเพิ่งโคลนมา +2. เปิดโฟลเดอร์ใน Visual Studio Code คุณสามารถทำได้โดยการคลิก **File** > **Open Folder** และเลือกโฟลเดอร์ที่คุณเพิ่งโคลนมา -> ส่วนขยายของ Visual Studio Code ที่แนะนำ: +> ส่วนขยายที่แนะนำสำหรับ Visual Studio Code: > -> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - เพื่อดูตัวอย่างหน้า HTML ภายใน Visual Studio Code +> * [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&WT.mc_id=academic-77807-sagibbon) - เพื่อแสดงตัวอย่างหน้า HTML ภายใน Visual Studio Code > * [Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot&WT.mc_id=academic-77807-sagibbon) - เพื่อช่วยให้คุณเขียนโค้ดได้เร็วขึ้น ## 📂 แต่ละบทเรียนประกอบด้วย: -- สเก็ตช์โน้ตเสริม (ถ้ามี) -- วิดีโอเสริม (ถ้ามี) -- แบบทดสอบก่อนเรียน -- บทเรียนเขียน -- สำหรับบทเรียนที่เป็นแบบโครงการ มีคำแนะนำทีละขั้นตอนในการสร้างโครงการ +- สมุดสเก็ตช์ตัวเลือกเสริม +- วิดีโอเสริมหากต้องการ +- แบบทดสอบทบทวก่อนบทเรียน +- บทเรียนที่เขียนไว้ +- สำหรับบทเรียนที่เป็นโครงงาน มีคำแนะนำทีละขั้นตอนเกี่ยวกับวิธีการสร้างโครงงาน - การตรวจสอบความรู้ - ความท้าทาย -- การอ่านเสริม +- การอ่านเพิ่มเติมเสริม - การบ้าน -- [แบบทดสอบหลังเรียน](https://ff-quizzes.netlify.app/web/) +- [แบบทดสอบหลังบทเรียน](https://ff-quizzes.netlify.app/web/) -> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app รวม 48 แบบทดสอบ แต่ละแบบมีสามคำถาม คุณสามารถเข้าถึงได้ที่ [นี่](https://ff-quizzes.netlify.app/web/) แอปแบบทดสอบสามารถรันแบบออฟไลน์หรือเผยแพร่บน Azure ได้; โปรดปฏิบัติตามคำแนะนำในโฟลเดอร์ `quiz-app` +> **หมายเหตุเกี่ยวกับแบบทดสอบ**: แบบทดสอบทั้งหมดอยู่ในโฟลเดอร์ Quiz-app มีแบบทดสอบทั้งหมด 48 ชุด ชุดละสามคำถาม คุณสามารถเข้าถึงได้ที่ [นี่](https://ff-quizzes.netlify.app/web/) ซึ่งแอปแบบทดสอบสามารถรันแบบออฟไลน์หรือปรับใช้บน Azure ได้; ทำตามคำแนะนำในโฟลเดอร์ `quiz-app` ## 🗃️ บทเรียน -| | ชื่อโปรเจค | แนวคิดที่สอน | เป้าหมายการเรียนรู้ | บทเรียนที่เชื่อมโยง | ผู้เขียน | +| | ชื่อโครงการ | แนวคิดที่สอน | วัตถุประสงค์การเรียนรู้ | บทเรียนที่ลิงก์ | ผู้เขียน | | :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | -| 01 | Getting Started | บทนำสู่การเขียนโปรแกรมและเครื่องมือที่ใช้ในการทำงาน | เรียนรู้พื้นฐานของภาษาการเขียนโปรแกรมส่วนใหญ่และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้อย่างมีประสิทธิภาพ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | -| 02 | Getting Started | พื้นฐานของ GitHub รวมถึงการทำงานเป็นทีม | วิธีใช้ GitHub ในโปรเจคของคุณ วิธีการทำงานร่วมกับผู้อื่นบนฐานโค้ดเดียวกัน | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | -| 03 | Getting Started | การเข้าถึง | เรียนรู้พื้นฐานของการเข้าถึงเว็บ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | -| 04 | JS Basics | ประเภทข้อมูลใน JavaScript | พื้นฐานของประเภทข้อมูลใน JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | -| 05 | JS Basics | ฟังก์ชันและเมธอด | เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการการไหลของตรรกะในแอปพลิเคชัน | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | -| 06 | JS Basics | การตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีตัดสินใจ | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | -| 07 | JS Basics | อาเรย์และลูป | ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | -| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้างเทอร์ราเรียมออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | -| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS ในการปฏิบัติ | สร้าง CSS เพื่อจัดแต่งเทอร์ราเรียมออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | -| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, การจัดการ DOM | สร้าง JavaScript เพื่อให้เทอร์ราเรียมทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้นที่ closures และการจัดการ DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | -| 11 | [Typing Game](./4-typing-game/solution/README.md) | สร้างเกมพิมพ์ดีด | เรียนรู้วิธีใช้เหตุการณ์แป้นพิมพ์เพื่อควบคุมตรรกะของแอป JavaScript ของคุณ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | -| 12 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การทำงานกับเว็บเบราว์เซอร์ | เรียนรู้วิธีการทำงานของเบราว์เซอร์ ประวัติศาสตร์ และวิธีสร้างส่วนแรกของส่วนขยายเบราว์เซอร์ | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | -| 13 | [Green Browser Extension](./5-browser-extension/solution/README.md) | การสร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage | สร้างองค์ประกอบ JavaScript ของส่วนขยายเบราว์เซอร์ของคุณเพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | -| 14 | [Green Browser Extension](./5-browser-extension/solution/README.md) | กระบวนการพื้นหลังในเบราว์เซอร์, ประสิทธิภาพเว็บ | ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนของส่วนขยาย; ศึกษาเกี่ยวกับประสิทธิภาพเว็บและการปรับแต่งบางอย่างเพื่อทำให้ | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | -| 15 | [Space Game](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงเพิ่มเติมด้วย JavaScript | เรียนรู้เกี่ยวกับการสืบทอดโดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | -| 16 | [Space Game](./6-space-game/solution/README.md) | การวาดบน canvas | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้สำหรับวาดองค์ประกอบบนหน้าจอ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | -| 17 | [Space Game](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบบนหน้าจอ | ค้นพบว่าองค์ประกอบสามารถเคลื่อนที่โดยใช้พิกัดคาร์ทีเซียนและ Canvas API ได้อย่างไร | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | -| 18 | [Space Game](./6-space-game/solution/README.md) | การตรวจจับการชน | ทำให้องค์ประกอบชนกันและตอบสนองต่อกันโดยใช้การกดปุ่ม แถมมีฟังก์ชัน cooldown เพื่อรักษาประสิทธิภาพของเกม | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | -| 19 | [Space Game](./6-space-game/solution/README.md) | การเก็บคะแนน | ทำการคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | -| 20 | [Space Game](./6-space-game/solution/README.md) | การจบและเริ่มเกมใหม่ | เรียนรู้เกี่ยวกับการจบเกมและการเริ่มใหม่ รวมถึงการทำความสะอาดแอสเซทและรีเซ็ตค่าตัวแปร | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | -| 21 | [Banking App](./7-bank-project/solution/README.md) | แม่แบบ HTML และเส้นทางในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างของเว็บไซต์หลายหน้าโดยใช้ routing และแม่แบบ HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | -| 22 | [Banking App](./7-bank-project/solution/README.md) | สร้างฟอร์มเข้าสู่ระบบและลงทะเบียน | เรียนรู้เกี่ยวกับการสร้างฟอร์มและการจัดการการตรวจสอบความถูกต้อง | [Forms](./7-bank-project/2-forms/README.md) | Yohan | -| 23 | [Banking App](./7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีที่ข้อมูลไหลเข้าและออกจากแอปของคุณ วิธีการดึงข้อมูล เก็บ และกำจัดข้อมูล | [Data](./7-bank-project/3-data/README.md) | Yohan | -| 24 | [Banking App](./7-bank-project/solution/README.md) | แนวคิดการจัดการสถานะ | เรียนรู้ว่าแอปของคุณเก็บสถานะอย่างไรและวิธีการจัดการมันอย่างเป็นโปรแกรม | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | -| 25 | [Browser/VScode Code](../../8-code-editor) | การทำงานกับ VScode | เรียนรู้วิธีการใช้ตัวแก้ไขโค้ด| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | +| 01 | เริ่มต้นใช้งาน | บทนำสู่การเขียนโปรแกรมและเครื่องมือในงานพัฒนา | เรียนรู้พื้นฐานเบื้องต้นที่อยู่เบื้องหลังภาษาการเขียนโปรแกรมส่วนใหญ่ และเกี่ยวกับซอฟต์แวร์ที่ช่วยให้นักพัฒนามืออาชีพทำงานได้ | [Intro to Programming Languages and Tools of the Trade](./1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine | +| 02 | เริ่มต้นใช้งาน | พื้นฐาน GitHub รวมถึงการทำงานเป็นทีม | วิธีการใช้ GitHub ในโครงการของคุณ วิธีการร่วมมือกับผู้อื่นในฐานข้อมูลโค้ด | [Intro to GitHub](./1-getting-started-lessons/2-github-basics/README.md) | Floor | +| 03 | เริ่มต้นใช้งาน | การเข้าถึง | เรียนรู้พื้นฐานการเข้าถึงเว็บ | [Accessibility Fundamentals](./1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | JS เบื้องต้น | ประเภทข้อมูลใน JavaScript | พื้นฐานของประเภทข้อมูลใน JavaScript | [Data Types](./2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | JS เบื้องต้น | ฟังก์ชันและเมธอด | เรียนรู้เกี่ยวกับฟังก์ชันและเมธอดเพื่อจัดการลอจิกของแอปพลิเคชัน | [Functions and Methods](./2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | JS เบื้องต้น | การตัดสินใจด้วย JS | เรียนรู้วิธีสร้างเงื่อนไขในโค้ดของคุณโดยใช้วิธีการตัดสินใจ | [Making Decisions](./2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | JS เบื้องต้น | อาร์เรย์และลูป | ทำงานกับข้อมูลโดยใช้ arrays และ loops ใน JavaScript | [Arrays and Loops](./2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Terrarium](./3-terrarium/solution/README.md) | HTML ในการปฏิบัติ | สร้าง HTML เพื่อสร้าง Terrarium ออนไลน์ โดยเน้นการสร้างเลย์เอาต์ | [Introduction to HTML](./3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Terrarium](./3-terrarium/solution/README.md) | CSS ในการปฏิบัติ | สร้าง CSS เพื่อจัดสไตล์ Terrarium ออนไลน์ โดยเน้นพื้นฐานของ CSS รวมถึงการทำให้หน้าเว็บตอบสนอง | [Introduction to CSS](./3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Terrarium](./3-terrarium/solution/README.md) | JavaScript Closures, การจัดการ DOM | สร้าง JavaScript เพื่อให้ Terrarium ทำงานเป็นอินเทอร์เฟซลากและวาง โดยเน้นที่ closures และการจัดการ DOM | [JavaScript Closures, DOM manipulation](./3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | [Typing Game](./4-typing-game/solution/README.md) | สร้างเกมพิมพ์ | เรียนรู้วิธีใช้เหตุการณ์คีย์บอร์ดเพื่อควบคุมลอจิกของแอป JavaScript ของคุณ | [Event-Driven Programming](./4-typing-game/typing-game/README.md) | Christopher | +| 12 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | การทำงานกับเบราว์เซอร์ | เรียนรู้ว่าเบราว์เซอร์ทำงานอย่างไร ประวัติ และวิธีเริ่มต้นส่วนขยายเบราว์เซอร์ | [About Browsers](./5-browser-extension/1-about-browsers/README.md) | Jen | +| 13 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | สร้างฟอร์ม เรียก API และเก็บตัวแปรใน local storage | สร้างส่วนขยายเบราว์เซอร์ของคุณโดยใช้ JavaScript เพื่อเรียก API โดยใช้ตัวแปรที่เก็บใน local storage | [APIs, Forms, and Local Storage](./5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen | +| 14 | [ส่วนขยายเบราว์เซอร์สีเขียว](./5-browser-extension/solution/README.md) | กระบวนการพื้นหลังในเบราว์เซอร์และประสิทธิภาพเว็บ | ใช้กระบวนการพื้นหลังของเบราว์เซอร์เพื่อจัดการไอคอนส่วนขยาย เรียนรู้เกี่ยวกับประสิทธิภาพเว็บและการปรับปรุงบางอย่างเพื่อทำให้ดีขึ้น | [Background Tasks and Performance](./5-browser-extension/3-background-tasks-and-performance/README.md) | Jen | +| 15 | [Space Game](./6-space-game/solution/README.md) | การพัฒนาเกมขั้นสูงด้วย JavaScript | เรียนรู้เกี่ยวกับ Inheritance โดยใช้ทั้ง Classes และ Composition และรูปแบบ Pub/Sub เพื่อเตรียมพร้อมสำหรับการสร้างเกม | [Introduction to Advanced Game Development](./6-space-game/1-introduction/README.md) | Chris | +| 16 | [Space Game](./6-space-game/solution/README.md) | การวาดบน canvas | เรียนรู้เกี่ยวกับ Canvas API ที่ใช้ในการวาดองค์ประกอบบนหน้าจอ | [Drawing to Canvas](./6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Space Game](./6-space-game/solution/README.md) | การเคลื่อนย้ายองค์ประกอบรอบจอ | ค้นพบว่าสิ่งต่าง ๆ สามารถเคลื่อนไหวโดยใช้พิกัดคาร์ทีเซียนและ Canvas API ได้อย่างไร | [Moving Elements Around](./6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Space Game](./6-space-game/solution/README.md) | การตรวจจับการชน | ทำให้องค์ประกอบชนและตอบสนองต่อกันโดยใช้การกดปุ่ม keypress พร้อมกับฟังก์ชัน cooldown เพื่อประสิทธิภาพของเกม | [Collision Detection](./6-space-game/4-collision-detection/README.md) | Chris | +| 19 | [Space Game](./6-space-game/solution/README.md) | การเก็บคะแนน | ทำการคำนวณทางคณิตศาสตร์ตามสถานะและประสิทธิภาพของเกม | [Keeping Score](./6-space-game/5-keeping-score/README.md) | Chris | +| 20 | [Space Game](./6-space-game/solution/README.md) | การจบและเริ่มเกมใหม่ | เรียนรู้เกี่ยวกับการจบเกมและเริ่มเกมใหม่ รวมถึงการทำความสะอาดทรัพยากรและรีเซ็ตค่าตัวแปร | [The Ending Condition](./6-space-game/6-end-condition/README.md) | Chris | +| 21 | [Banking App](./7-bank-project/solution/README.md) | เทมเพลต HTML และการกำหนดเส้นทางในเว็บแอป | เรียนรู้วิธีสร้างโครงสร้างเว็บไซต์หลายหน้าโดยใช้ routing และเทมเพลต HTML | [HTML Templates and Routes](./7-bank-project/1-template-route/README.md) | Yohan | +| 22 | [Banking App](./7-bank-project/solution/README.md) | สร้างฟอร์มล็อกอินและลงทะเบียน | เรียนรู้เกี่ยวกับการสร้างฟอร์มและการจัดการการตรวจสอบความถูกต้อง | [Forms](./7-bank-project/2-forms/README.md) | Yohan | +| 23 | [Banking App](./7-bank-project/solution/README.md) | วิธีการดึงและใช้ข้อมูล | วิธีการไหลของข้อมูลเข้าและออกจากแอปของคุณ วิธีดึงข้อมูล เก็บข้อมูล และจัดการข้อมูล | [Data](./7-bank-project/3-data/README.md) | Yohan | +| 24 | [Banking App](./7-bank-project/solution/README.md) | แนวคิดการจัดการสถานะ | เรียนรู้วิธีที่แอปของคุณเก็บสถานะและวิธีจัดการสถานะเหล่านั้นโดยใช้โปรแกรม | [State Management](./7-bank-project/4-state-management/README.md) | Yohan | +| 25 | [Browser/VScode Code](../../8-code-editor) | การทำงานกับ VScode | เรียนรู้วิธีใช้โปรแกรมแก้ไขโค้ด| [Use VScode Code Editor](./8-code-editor/1-using-a-code-editor/README.md) | Chris | | 26 | [AI Assistants](./9-chat-project/README.md) | การทำงานกับ AI | เรียนรู้วิธีสร้างผู้ช่วย AI ของคุณเอง | [AI Assistant project](./9-chat-project/README.md) | Chris | -## 🏫 วิธีการสอน +## 🏫 การสอน + +หลักสูตรของเราได้รับการออกแบบโดยมีหลักการทางการสอนสองประการสำคัญ: +* การเรียนรู้โดยใช้โครงงานเป็นฐาน +* การทำแบบทดสอบบ่อยครั้ง -หลักสูตรของเราออกแบบโดยมีหลักการทางการสอนสองประการสำคัญ: -* การเรียนรู้ผ่านโครงการ -* แบบทดสอบบ่อยครั้ง +โปรแกรมสอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บในปัจจุบันใช้ นักเรียนจะมีโอกาสสร้างประสบการณ์ปฏิบัติผ่านการสร้างเกมพิมพ์คีย์, Terrarium เสมือนจริง, ส่วนขยายเบราว์เซอร์ที่เป็นมิตรกับสิ่งแวดล้อม, เกมสไตล์ space-invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบชุดบทเรียน นักเรียนจะมีความเข้าใจที่ดีเกี่ยวกับการพัฒนาเว็บ -โปรแกรมสอนพื้นฐานของ JavaScript, HTML และ CSS รวมถึงเครื่องมือและเทคนิคล่าสุดที่นักพัฒนาเว็บสมัยใหม่ใช้ นักเรียนจะมีโอกาสได้รับประสบการณ์ปฏิบัติจริงโดยการสร้างเกมพิมพ์ดีด เทอร์ราเรียมเสมือน ส่วนขยายเบราว์เซอร์สีเขียว เกมอวกาศสไตล์ space-invader และแอปธนาคารสำหรับธุรกิจ เมื่อจบซีรีส์นี้ นักเรียนจะมีความเข้าใจแท้จริงเกี่ยวกับการพัฒนาเว็บ +> 🎓 คุณสามารถเรียนบทเรียนแรก ๆ ในหลักสูตรนี้เป็น [เส้นทางการเรียนรู้](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) บน Microsoft Learn! -> 🎓 คุณสามารถเรียนบทเรียนแรก ๆ ของหลักสูตรนี้ในรูปแบบ [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101/?WT.mc_id=academic-77807-sagibbon) บน Microsoft Learn! +โดยการทำให้เนื้อหาสอดคล้องกับโครงงาน กระบวนการเรียนรู้จะน่าสนใจขึ้นสำหรับนักเรียนและการจดจำแนวคิดจะดีขึ้น เราได้เขียนบทเรียนเริ่มต้นหลายบทเกี่ยวกับพื้นฐาน JavaScript เพื่อแนะนำแนวคิด พร้อมกับวิดีโอจากชุด "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ชุดวิดีโอสอนซึ่งผู้เขียนบางท่านมีส่วนร่วมในการจัดทำหลักสูตรนี้ -ด้วยการทำให้เนื้อหาสอดคล้องกับโครงการ ขั้นตอนการเรียนการสอนจึงน่าสนใจขึ้นสำหรับนักเรียนและช่วยเพิ่มการจดจำแนวคิด เราเขียนบทเรียนเริ่มต้นหลายบทเกี่ยวกับพื้นฐานของ JavaScript เพื่อแนะนำแนวคิด พร้อมกับวิดีโอจากชุด "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)" ซึ่งมีผู้เขียนบางท่านมีส่วนร่วมในการสร้างหลักสูตรนี้ +นอกจากนี้ แบบทดสอบที่ความกดดันต่ำก่อนเข้าชั้นเรียนจะช่วยให้นักเรียนตั้งใจเรียนหัวข้อ และแบบทดสอบที่สองหลังเข้าชั้นเรียนช่วยเสริมสร้างการจดจำ หลักสูตรนี้ถูกออกแบบมาให้ยืดหยุ่นและสนุก และสามารถเรียนได้ทั้งหมดหรือบางส่วน โครงงานเริ่มเล็กและซับซ้อนมากขึ้นเรื่อย ๆ เมื่อเข้าสู่สัปดาห์ที่ 12 -นอกจากนี้ แบบทดสอบความเสี่ยงต่ำก่อนเข้าเรียนช่วยตั้งความมุ่งมั่นของนักเรียนต่อการเรียนรู้หัวข้อ ในขณะที่แบบทดสอบที่สองหลังเรียนช่วยรักษาการจดจำ เนื้อหาหลักสูตรนี้ออกแบบมาให้ยืดหยุ่นและสนุกสนาน สามารถเรียนครบหรือบางส่วนก็ได้ โครงการเริ่มต้นเล็ก ๆ และมีความซับซ้อนเพิ่มขึ้นเรื่อย ๆ ภายใน 12 สัปดาห์ +ในขณะที่เราได้ตั้งใจหลีกเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อมุ่งเน้นทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนที่จะใช้เฟรมเวิร์ก ขั้นตอนถัดไปที่ดีในการเรียนรู้หลักสูตรนี้คือการเรียนรู้เกี่ยวกับ Node.js ผ่านชุดวิดีโออีกชุดหนึ่ง: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)". -แม้เราจะจงใจหลีกเลี่ยงการแนะนำเฟรมเวิร์ก JavaScript เพื่อเน้นที่ทักษะพื้นฐานที่จำเป็นสำหรับนักพัฒนาเว็บก่อนจะใช้เฟรมเวิร์ก ขั้นตอนถัดไปที่ดีหลังจบหลักสูตรนี้คือการเรียนรู้ Node.js ผ่านชุดวิดีโออื่น: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)" +> เยี่ยมชม [Code of Conduct](CODE_OF_CONDUCT.md) และแนวทาง [การมีส่วนร่วม](CONTRIBUTING.md) ของเรา เรายินดีรับข้อเสนอแนะเชิงสร้างสรรค์จากคุณ! -> เยี่ยมชม [Code of Conduct](CODE_OF_CONDUCT.md) และแนวทาง [Contributing](CONTRIBUTING.md) ของเรา เรายินดีรับฟังความคิดเห็นในการพัฒนาของคุณ! ## 🧭 การเข้าถึงแบบออฟไลน์ -คุณสามารถรันเอกสารนี้แบบออฟไลน์โดยใช้ [Docsify](https://docsify.js.org/#/) โคลน repo นี้ ติดตั้ง Docsify บนเครื่องของคุณ แล้วในโฟลเดอร์หลักของ repo ให้พิมพ์ `docsify serve` เว็บไซต์จะถูกให้บริการผ่านพอร์ต 3000 บน localhost ของคุณ: `localhost:3000` +คุณสามารถรันเอกสารนี้แบบออฟไลน์ได้โดยใช้ [Docsify](https://docsify.js.org/#/). Fork รีโปนี้, [ติดตั้ง Docsify](https://docsify.js.org/#/quickstart) บนเครื่องของคุณ จากนั้นในโฟลเดอร์หลักของรีโปนี้ ให้พิมพ์ `docsify serve`. เว็บไซต์จะถูกให้บริการบนพอร์ต 3000 ที่ localhost ของคุณ: `localhost:3000`. ## 📘 PDF +PDF ของบทเรียนทั้งหมดสามารถดูได้ที่ [นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) + -คุณสามารถดาวน์โหลด PDF ของบทเรียนทั้งหมดได้ที่ [นี่](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) +## 🎒 หลักสูตรอื่นๆ -## 🎒 หลักสูตรอื่น ๆ -ทีมของเราผลิตคอร์สอื่นๆ อีก! ลองดู: +ทีมงานของเราผลิตหลักสูตรอื่นๆ อีก! ลองดูที่: ### LangChain @@ -249,21 +259,21 @@ ## การขอความช่วยเหลือ -ถ้าคุณติดปัญหาหรือมีคำถามใดๆ เกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนและนักพัฒนาที่มีประสบการณ์ในการสนทนาเกี่ยวกับ MCP นี่คือชุมชนที่ให้กำลังใจ ที่ซึ่งคำถามเป็นที่ต้อนรับและความรู้ถูกแบ่งปันอย่างเสรี +หากคุณติดขัดหรือมีคำถามเกี่ยวกับการสร้างแอป AI เข้าร่วมกับผู้เรียนคนอื่นๆ และนักพัฒนาที่มีประสบการณ์ในการอภิปรายเกี่ยวกับ MCP นี่คือชุมชนที่สนับสนุนซึ่งเปิดรับคำถามและแบ่งปันความรู้กันอย่างเสรี [![Microsoft Foundry Discord](https://dcbadge.limes.pink/api/server/nTYy5BXMWG)](https://discord.gg/nTYy5BXMWG) -ถ้าคุณมีความคิดเห็นเกี่ยวกับผลิตภัณฑ์หรือพบข้อผิดพลาดในขณะสร้างโปรเจกต์ เยี่ยมชม: +หากคุณมีคำติชมเกี่ยวกับผลิตภัณฑ์หรือพบข้อผิดพลาดระหว่างการสร้าง ให้เยี่ยมชม: [![Microsoft Foundry Developer Forum](https://img.shields.io/badge/GitHub-Microsoft_Foundry_Developer_Forum-blue?style=for-the-badge&logo=github&color=000000&logoColor=fff)](https://aka.ms/foundry/forum) ## ใบอนุญาต -ที่เก็บนี้ได้รับอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม. +ที่เก็บนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT ดูไฟล์ [LICENSE](../../LICENSE) สำหรับข้อมูลเพิ่มเติม --- -**ข้อจำกัดความรับผิดชอบ**: -เอกสารนี้ได้รับการแปลโดยใช้บริการแปลด้วย AI [Co-op Translator](https://github.com/Azure/co-op-translator) แม้ว่าเราจะพยายามให้ความถูกต้องสูงสุด โปรดทราบว่าการแปลอัตโนมัติอาจมีข้อผิดพลาดหรือความไม่ถูกต้อง เอกสารต้นฉบับในภาษาต้นฉบับควรถือเป็นแหล่งข้อมูลที่ถูกต้องและน่าเชื่อถือ สำหรับข้อมูลที่สำคัญ ควรใช้บริการแปลโดยมนุษย์ผู้เชี่ยวชาญ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดใด ๆ ที่เกิดจากการใช้การแปลนี้ +**ข้อจำกัดความรับผิดชอบ**: +เอกสารนี้ได้รับการแปลโดยใช้บริการแปลภาษา AI [Co-op Translator](https://github.com/Azure/co-op-translator) ถึงแม้เราจะพยายามรักษาความถูกต้อง แต่กรุณาทราบว่าการแปลโดยอัตโนมัติอาจมีข้อผิดพลาดหรือความคลาดเคลื่อน เอกสารต้นฉบับในภาษาดั้งเดิมถือเป็นแหล่งข้อมูลที่เชื่อถือได้ หากเป็นข้อมูลสำคัญ ขอแนะนำให้ใช้บริการแปลโดยมนุษย์มืออาชีพ เราจะไม่รับผิดชอบต่อความเข้าใจผิดหรือการตีความที่ผิดพลาดที่เกิดขึ้นจากการใช้การแปลนี้ \ No newline at end of file