Διαδικτυακό μάθημα JavaScript. Επαγγελματική ανάπτυξη διεπαφών ιστού - δωρεάν μάθημα από την HTML Academy, εκπαίδευση 9 εβδομάδων, ημερομηνία 15 Οκτωβρίου 2023.

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

Πώς λειτουργεί το μάθημα; Οργανωτικά θέματα.

Σχέδιο εργασίας στο μάθημα.
Ανασκόπηση έργων.
Ποιοτικά κριτήρια.

Γλώσσα JavaScript

Προδιαγραφή ECMAScript.
Τι δίνει το πρόγραμμα περιήγησης JavaScript;

Βασικά JavaScript.

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

Εργαλεία.

Συντάκτες κώδικα.
Linters.
Διακομιστής ανάπτυξης.

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

Μεταβλητές.

Περιοχές ορατότητας.

Δηλώσεις υπό όρους.

Τριαδικός χειριστής.
Διακόπτης χειριστή πολλαπλών επιλογών.

Κύκλοι.

Εκμαγείο.

Λειτουργίες.

Λειτουργίες βέλους.
Προεπιλεγμένες παράμετροι συνάρτησης.

παραμέτρους ανάπαυσης.

Ανύψωση μεταβλητών και συναρτήσεων.

Εισαγωγή στο DevTools (εργαλεία προγραμματιστών).

Ενότητα 3 Αντικείμενα και Πίνακες
Τμήμα χωρίς ζωντανό

Θα εξοικειωθείτε με πολύπλοκους τύπους δεδομένων: πίνακες και αντικείμενα. Μάθετε να τα δημιουργείτε και να τα διαχειρίζεστε.

Πολύπλοκοι τύποι δεδομένων.

Πίνακες.

Βασικές μέθοδοι πίνακα.

Αντικείμενα.

Επανακλήσεις (λειτουργίες επανάκλησης).

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

Καταστροφή.

διάδοση σύνταξης.

Ενσωματωμένα αντικείμενα και οι μέθοδοι τους.

Σειρά.
Αριθμός.
Boolean.
Ημερομηνία.
Μαθηματικά.

Χειριστής νέος.

Ενσωματωμένες λειτουργίες JavaScript.

Λειτουργικό πλαίσιο.

Η λέξη κλειδί είναι αυτή.
Απώλεια περιβάλλοντος.

DevTools. Χρήση της Κονσόλας.

Ενότητα 5 Οργάνωση Κώδικα
Ας δούμε την έννοια των πεδίων. Ας συζητήσουμε την αρχή DRY (μην επαναλαμβάνεστε) και πώς να τη χρησιμοποιήσετε για να γράψετε λιγότερο κώδικα και να κάνετε περισσότερα. Ας μάθουμε τι είναι οι ενότητες και πώς να «σπάσουμε» τον κώδικα σε αυτές. Τι είναι ένα σημείο εισόδου;

Περιοχές ορατότητας.

Παγκόσμια εμβέλεια παραθύρου.
Κλείσιμο

Αρθρωτότητα.

Επαναχρησιμοποίηση κώδικα, αρχή DRY.
Η έννοια της ενότητας.
Σημείο εισόδου.
Ενότητες ECMAScript, σύνταξη εισαγωγής και εξαγωγής.

DevTools: εντοπισμός σφαλμάτων κώδικα χρησιμοποιώντας Πηγές.

Ενότητα 6 DOM και συμβάντα
Τμήμα χωρίς ζωντανό

Θα εξοικειωθείτε με το μοντέλο αντικειμένου εγγράφου. Μοντέλο αντικειμένου εγγράφου ή DOM). Σκεφτείτε πώς να περιγράψετε τις αντιδράσεις σε ενέργειες χρήστη: εισαγωγή κειμένου, κλικ σε ορισμένα στοιχεία, κύλιση κ.λπ.

Δέντρο DOM.

Το έγγραφο είναι η ρίζα των πάντων.
Δομή δέντρου DOM.
Αναζήτηση στοιχείων σε μια σελίδα.
Διαχείριση ιδιοτήτων στοιχείων.

Πρότυπα και δεδομένα.

Γεγονότα στη σελίδα.

Χειριστές συμβάντων.

Ενότητα 7 Χειρισμός DOM
Ας προσπαθήσουμε να δημιουργήσουμε, να διαγράψουμε, να μετακινήσουμε και να χειριστούμε στοιχεία DOM. Χρησιμοποιώντας πρότυπα, θα σχεδιάσουμε τα δεδομένα που δημιουργήθηκαν νωρίτερα.

Διαχείριση δέντρων DOM.

Διαχείριση χαρακτηριστικών στοιχείων DOM.
Κινούμενα στοιχεία στο δέντρο DOM.

Προσεγγίσεις για τη δημιουργία στοιχείων DOM.

Δημιουργία αντικειμένων DOM.
Διαχείριση σήμανσης: προσάρτηση, προσάρτηση, εισαγωγήΠροκειμένου HTML, innerHTML, Περιεχόμενο κειμένου.

Πρότυπο.

Πρότυπο συμβολοσειρών (συμβολοσειρές προτύπου).
Ειδική ετικέτα

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

Εκδηλώσεις.

Αντικείμενο συμβάντος, διαχείριση συμβάντων: preventDefault και stopPropagation.
Φάσεις εκδήλωσης και αντιπροσωπεία.
Συμβάντα πληκτρολογίου και προσβασιμότητα.

Βρόχος συμβάντος.

Επικύρωση φόρμας.

Το Pristine είναι μια βιβλιοθήκη επικύρωσης φόρμας.

Επικύρωση με χρήση κανονικών εκφράσεων.

DevTools: Δυνατότητες στοιχείων (επιθεωρητής) για εργασία με το DOM και συμβάντα.

Ενότητα 9 Εξωτερικά API και βιβλιοθήκες τρίτων
Ας δούμε πώς να μην «γράψετε το δικό σας ποδήλατο», αλλά να χρησιμοποιήσετε ξανά την εμπειρία και τον κώδικα κάποιου άλλου. Ας εξοικειωθούμε με την έννοια της διεπαφής λογισμικού. Διασύνδεση προγραμματισμού εφαρμογών ή API), εξετάστε το API των βιβλιοθηκών JavaScript τρίτων και το JavaScript API των υπηρεσιών χαρτών. Ας ρίξουμε μια γρήγορη ματιά στα API που παρέχει το πρόγραμμα περιήγησης στους προγραμματιστές.

Έννοια του API.

Υπηρεσίες χαρτών και το JavaScript API τους.

OpenStreetMap.
Φυλλάδιο.

Βιβλιοθήκες τρίτων.

Γιατί χρειάζονται οι βιβλιοθήκες;
Πώς να συνδεθείτε σε ένα έργο.
noUiSlider.

Επισκόπηση API προγράμματος περιήγησης.

Ενότητα 10 Δίκτυο
Τμήμα χωρίς ζωντανό

Θα δείτε μόνοι σας το πρωτόκολλο HTTP και τη μορφή δεδομένων JSON. Σκεφτείτε πώς αλλάζει η αλληλεπίδραση του χρήστη με τον ιστότοπο κατά τη χρήση του δικτύου και τι μπορεί να πάει στραβά.

Πρωτόκολλο HTTP και μορφές δεδομένων.

JSON.

Χειρισμός Εξαίρεσης.

προσπάθησε να πιάσεις.

Εργαλεία για εργασία με αιτήματα δικτύου.

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

Ασύγχρονη.

setTimeout και setInterval.
Υπόσχεση.

Εργασία με το δίκτυο.

ανάκτηση για να επικοινωνήσετε με τον διακομιστή.
Χειρισμός σφαλμάτων σε αιτήματα.

DevTools: εργασία με αιτήματα δικτύου στο Δίκτυο.

Πρώτη εβδομάδα άμυνας
Ολοκλήρωση εργασιών στο έργο και προετοιμασία για την τελική άμυνα.

Ενότητα 12 Ανατροφοδότηση και βελτιστοποίηση
Βελτιστοποιούμε την εργασία με δεδομένα και συμβάντα στον ιστότοπό μας. Εφαρμόζουμε σαφείς και φιλικές προς το χρήστη σχόλια διεπαφής.

Προηγμένη εργασία με πίνακες.

Ταξινόμηση.
Διήθηση.

Βελτιστοποιήσεις απόδοσης.

Πτώση πλαισίων - στραγγαλισμός.
Εξάλειψη αναπήδησης - αναπήδησης.

API αρχείου.

URL.createObjectURL().
FileReader.

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

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

Ενότητα 13 Τελικό
Ας συνοψίσουμε το μάθημα και, στη συνέχεια, ας συζητήσουμε τα χαρακτηριστικά της JavaScript που μπορεί να χρειαστεί να συναντήσετε στην εργασία σας. Η έννοια του κώδικα παλαιού τύπου και τι να κάνουμε με αυτόν, με τον κώδικα. Ας ρίξουμε μια γρήγορη ματιά στα προηγμένα εργαλεία προγραμματιστών front-end, ώστε να καταλάβετε πού να πάτε στη συνέχεια.

Ειδική JavaScript.

Αυστηρή λειτουργία 'χρήση αυστηρής'.
Προαιρετικά ερωτηματικά.

Κωδικός παλαιού τύπου.

jQuery.
var και λειτουργικό εύρος.
XMLHttpRequest.

Λειτουργίες κατασκευαστή.

Πρωτότυπα.

Προηγμένα εργαλεία.

Webpack.

Transpilers και polyfills.

Βαβυλωνία.

Τέταρτη εβδομάδα άμυνας
Πραγματοποίηση τελικών επεξεργασιών και λήψη τελικού βαθμού.