>> Εντάξει.
Έτσι, JavaScript.
Σχεδόν ο καθένας σε αυτό το δωμάτιο έχει πιθανώς κάποιο βαθμό
άνεσης με το κατά πόσον ήταν τρόπος πίσω όταν στην SC50
ή είναι η προσωπική έργα διαδίκτυο ή ακόμα και
αν κάνατε ένα κομμάτι από αυτό με αυτό το παρελθόν PHP βάση του έργου,
αλλά για το μεγαλύτερο μέρος, πολλοί από εσάς,
ακόμη και αν έχετε κάποια άνεση
με JavaScript ίσως δεν έχουν ληφθεί
δεδομένο πως η γλώσσας λειτουργεί και τι συμβαίνει
από κάτω από την κουκούλα και τι θα πάμε να προσπαθήσουμε
να κάνουμε σήμερα είναι φλούδα πίσω κάποιες από τις τεχνικές στιβάδων
τι JavaScript είναι, πώς διαφέρει από μια γλώσσα
όπως PHP, πώς μπορεί να χρησιμοποιούνται όχι μόνο την πλευρά του πελάτη
αλλά επίσης πλευρά του server και στη συνέχεια να επικεντρωθούν πολύ συγκεκριμένα
σε αυτό το πλαίσιο, δεν παρατηρήσετε JS το οποίο είναι ουσιαστικά ένα χρόνο λειτουργίας,
ένα πρόγραμμα με το οποίο μπορείτε μπορεί να εκτελέσει κώδικα JavaScript,
πλευρά του server και γίνεται ολοένα και πιο δημοφιλής είδος
από την ίδια αυτή ανάστημα ημέρες του ίσως Ruby και PHP
και Python και θα δείτε
ότι έχει κάποια αρκετά ισχυρά χαρακτηριστικά μέσω κάποιων
του ενσωματωμένου στη γλώσσα κατασκευάσματα.
Αλλά πρώτα, μερικές από τις εύκολες πράγματα απλά για να σας υπενθυμίσω
για το πώς η γλώσσα λειτουργεί και αν έχετε πρόβλημα να δει κανέναν
του παρόντος, απλά κραυγή έξω και εμείς θα προσαρμοστεί.
Έτσι, ένα, όπως στην PHP υπάρχει καμία ιδέα μιας κύριας λειτουργίας,
μόλις αρχίσετε να γράφετε κώδικα
και μπορείτε να το σκοπό αυτό ερμηνεύουν πάνω προς τα κάτω.
Στο πλαίσιο ενός προγράμματος περιήγησης
ή στην πλευρά του server κάτι θα δούμε μερικά παραδείγματα
σε λίγο.
Προϋποθέσεις, συντακτικά ισοδύναμη με την PHP, καθώς και C,
C + + και κάποιες άλλες γλώσσες έτσι απλά για να σας δώσει μια αίσθηση
για το πώς θα μπορούσαμε να δομήσει,
υπάρχει μόνο ένας κανονικός κατάσταση.
Boolean εκφράσεις, ακριβώς το ίδιο συντακτικά όπως έχετε δει
στα ίδια αυτά άλλων γλωσσών, τόσο για oring
και για τον τερματισμό πράγματα μαζί.
JavaScript έχει διακόπτες, μοιάζει πολύ με PHP και άλλων do
και δεν είστε περιορίζεται, όπως Ο προς αναπόσπαστο αρχέτυπα
σαν χαρακτήρες και ints μπορεί πραγματικά κάνουν τους άλλους τύπους των αξιών.
Loops. Έτσι, αυτό είναι ακριβώς το ίδιο
και ίσως μια ντουζίνα γλώσσες, ενώ βρόχους, κάνει, ενώ βρόχους
και, στη συνέχεια, αυτό το τέχνασμα εδώ.
Έτσι, αυτό είναι το είδος της γνωστή ως γρήγορη καταμέτρηση
και είναι ένας πολύ έξυπνος τρόπος σαν μόνο στην PHP να κάνει
για κάθε FU ως bar μπορείτε ομοίως,
σε ένα αντικείμενο JavaScript, όπου το αντικείμενο είναι το όνομα
της μεταβλητής εδώ, ας πούμε, var i στο αντικείμενο και για κάθε επανάληψη
αυτού του βρόχου, i είναι πρόκειται να είναι ένα
από τα κλειδιά από αυτό το αντικείμενο.
Έτσι, εάν έχετε ένα αντικείμενο για μια σπουδαστών, και ένας μαθητής έχει ένα αναγνωριστικό
και ένα όνομα και ένα σπίτι, επαναληπτικά θα πάρω
της αξίας της ταυτότητας και το όνομα και σπίτι και μπορείτε γι δείκτη
σε αντικείμενο, όπως κι αν είναι έναν array με αγκύλη
σημειογραφία για να πάρετε την τιμή του κλειδιού ID ή το όνομα
ή το σπίτι και ούτω καθεξής.
Και σε αντίθεση με τις κοινές υπόθεση, JavaScript αντικείμενα,
ιδιότητες δεν είναι αναγκαστικά εγγυημένη για να είναι
με την ίδια σειρά, αυτό είναι επίσης αλήθεια για PHP, ώστε να μην αναλάβει
ότι τα πράγματα θα παραμείνουν με την ίδια σειρά
ότι βάζετε αυτές τις βασικές ζεύγη αξία σε ένα αντικείμενο.
Τι θα λέγατε για πίνακες;
Υπάρχουν δύο τρόποι να το γράψετε συντακτικά
αλλά αυτό είναι ίσως το πιο κοινή τώρα απλά χρησιμοποιώντας πλατεία
βραχίονα σημειογραφία.
Έτσι, αυτό είναι μια μεταβλητή σε καλέσετε τους αριθμούς που περιέχουν σειρά
έξι ακέραιοι εκεί, εδώ είναι ένα απλό string
και να παρατηρήσετε τι είναι απούσα από αυτά τα παραδείγματα,
τι είναι JavaScript προφανώς λείπει.
Ναι. Έτσι, δεν υπάρχει καμία έννοια πληκτρολόγησης, σίγουρα δεν
στο πλαίσιο αυτό εδώ, αλλά Αυτό είναι πράγματι ένα string.
Έτσι, JavaScript έχει είδη και ότι ήταν πράγματι μια συστοιχία
που είναι ο ίδιος ένας τύπος και καθένα από τα στοιχεία
στην εν λόγω συστοιχία ήταν τύπου αριθμό, όπως τους αποκαλεί JavaScript.
Έτσι, είναι μια χαλαρά δακτυλογραφημένο γλώσσα και θα δούμε
ότι το JavaScript όπως PHP έχει έναν χειριστή ταυτότητας
και άλλους μηχανισμούς πράγματι τον έλεγχο αυτό το είδος
από κάποια μεταβλητή είναι τόσο για τον έλεγχο σφαλμάτων
και για άλλες εφαρμογές.
Και εδώ είναι ένα αντικείμενο του δείγματος περιέχει μόνο ένα αναγνωριστικό και ένα όνομα.
Και τώρα, παρατηρούμε ότι είμαστε χρησιμοποιώντας σγουρά σημειογραφία βραχίονα,
το βαθούλωμα και το λευκό χώρος είναι το είδος της νόημα
και αυτό δηλώνει μια μεταβλητή του οποίου το όνομα είναι Rob
και του οποίου η ταυτότητα είναι 1 και η Τύπος ημερομηνία είναι εδώ τον αριθμό μας
και κορδόνι αντίστοιχα.
Και στη συνέχεια αυτό είναι κάτι διαφορετικό
αν έχετε κάνει ποτέ τίποτα με τον Άγιαξ αυτές τις μέρες;
Πιθανώς χρησιμοποιούνται ένα αντικείμενο σαν αυτό
αλλά αυτό που αξίζει να σημειωθεί εδώ;
Τι είναι συντακτικά ποτέ τόσο διαφορετικό, απλά ένα ζευγάρι
πράγματα μεταξύ αυτού του παραδείγματος το οποίο είναι ομολογουμένως μικρότερη
και αυτό το μεγαλύτερο παράδειγμα.
Έτσι, για πρώτη φορά στην απλή γλώσσα όρος, τι είναι αυτό;
Τι είναι ο τύπος της προσωπικό θα λέγατε;
Εντάξει, είναι μια σειρά, Είναι μια σειρά από τι;
>> Αντικείμενα.
>> Εντάξει, είναι μια σειρά από αντικείμενα.
Και τώρα, εστιάζονται σε ένα μόνο - οποιαδήποτε από αυτά τα αντικείμενα,
τι είναι διαφορετικό ανάμεσα σε αυτό και αυτό;
>> Τα πλήκτρα είναι χορδές.
Ναι >>. Έτσι, το πλήκτρα είναι χορδές,
και τα πλήκτρα είναι πράγματι χορδές και στις δύο περιπτώσεις
και αυτό είναι το είδος της Ηλίθιο
κατά τη γνώμη μου ιστορική σχεδιασμό απόφαση κάθε φορά που χρησιμοποιείτε
JSON, JavaScript Object Notation,
το οποίο είναι κατ 'ουσίαν μια μορφή μεταφοράς
για την αποστολή δεδομένων τυπικά σε όλο το δίκτυο
μεταξύ του πελάτη και του διακομιστή, θα πρέπει να θυμάστε
ότι αυτό δεν είναι πραγματικά έγκυρο JSON και αυτό είναι ένα
αυτών FYIs αν ποτέ χτυπάτε το κεφάλι σας στον τοίχο
για αρκετά λεπτά για κανέναν καλό λόγο αυτό, δεν είναι έγκυρο JSON
επειδή τα πλήκτρα είναι στην πραγματικότητα δεν αναφέρεται.
JSON απαιτεί βλακωδώς ότι τα κλειδιά να αναφέρεται όχι μόνο,
αλλά ότι είναι διπλά εισηγμένες, μονά εισαγωγικά δεν αρκούν.
Έτσι, ανόητο μικρό πράγμα και περισσότερο από ένα γεγονός διασκέδασης
για τους σκοπούς του σήμερα, αλλά αυτό εγώ θα ισχύει JavaScript
δεν είναι μόνο - η αντίστροφο δεν ισχύει.
Εντάξει.
Έτσι, θα δούμε πολλά περισσότερο από αυτό.
Εντάξει.
Έτσι, αυτό είναι JavaScript συντακτικά πιθανώς αρκετά
οικείο, κάποιος από εσάς που έχουν δεν έχει χρησιμοποιηθεί ποτέ πριν JavaScript
Δεν είναι ένα τεράστιο άλμα από την PHP ή πλέον κάθε διαδικαστική γλώσσα
ότι μπορεί να έχετε χρησιμοποιήσει.
Έτσι, σήμερα θα επικεντρωθεί στην τις ενδιαφέρουσες πτυχές
της JavaScript ιδιαίτερα στο πλαίσιο χωρίς JS
αλλά όχι αποκλειστικά επειδή μέχρι τώρα έχετε ίσως,
αν χρησιμοποιηθεί Javascript, χρησιμοποίησε μέσα από ένα πρόγραμμα περιήγησης.
Έτσι, δεν JS είναι ένα περιβάλλον τότε σε λίγο πρόκειται
να μας επιτρέψει να έχουν πρόσβαση σε JavaScript κώδικα πελάτη -
πλευρά του server, αλλά πρώτα, ας ρίξουμε μια ματιά
σε κάτι που είναι λίγο περισσότερο την πλευρά του πελάτη.
Έτσι, έχω πάει και σε αυτό είναι συνδέονται στην ιστοσελίδα μαθήματα,
αν θέλετε να παίξετε μαζί, υπάρχουν δύο υποκαταλόγους
στη σημερινή Zip της ονομάζεται καρφιά πηγή zip στην ιστοσελίδα
και αυτά είναι μόνο ένα μερικά παραδείγματα αναπολώντας
πράγματα που μπορεί να έχετε δει πριν και εγώ το είδος της κατασκευής τους
από την πιο απλή έως ελαφρώς πιο περίπλοκο να πειράζω
μερικά από τα χαρακτηριστικά της JavaScript.
Έτσι, ας πάμε μπροστά και να λαμβάνει μια ματιά για παράδειγμα σε αυτό.
Έτσι, δυστυχώς, η ετικέτα αναλαμπή ήταν σκοτώσει πριν από αρκετά χρόνια
όπως ο τρόπος να έχεις πιο όμορφη και πιο όμορφη
και η ετικέτα αναλαμπή ήταν κυριολεκτικά ελεύθερο βραχίονα αναβοσβήνει κλείσιμο παρένθεσης
και το είδος δεν πια μαζί μας.
Όμως, μπορούμε ακόμα να αναστήσει η ιδέα μιας ετικέτας με ακριβώς το είδος
σκέψης σχετικά με αυτό λογικά, πώς θα πάτε
για την παραγωγή κάτι σαν αυτό αναβοσβήνει διαισθητικά;
Υποθέτοντας ξέρετε λίγο κομμάτι της JavaScript και CSS ή
σε αυτό το σημείο, είναι OK, αν δεν το κάνουν.
>> Ορίστε ένα χρόνο έξω και να κρύψει τότε μετά θα το tag
έξω και να εμφανιστεί ξανά.
>> Ναι, τέλεια.
Αυτό είναι το είδος του προγραμματισμού 101,
πώς θα επιτευχθεί μια οπτικό αποτέλεσμα όπως αυτό;
Λοιπόν, εσείς με κάποιο τρόπο πρέπει να δείξει κάτι
και στη συνέχεια να κρύψει κάτι, δείχνουν κάτι, κρύβουν κάτι
και όπως προτείνει ο Jonathan χρησιμοποιώντας κάποιο είδος του χρόνου,
κάποιου είδους πρόγραμμα που μπορείτε να κάνετε αυτό κατ 'επανάληψη χωρίς να χρειάζεται
να χρησιμοποιήσει ένα βρόχο ή κάτι τέτοιο.
Έτσι, επιτρέψτε μου να πάω σε αναλαμπή-0.html
και επιτρέψτε μου να συρρικνωθεί η γραμματοσειρά λίγο
έτσι ώστε περισσότερα από αυτό ταιριάζει.
Και ας ρίξουμε μια ματιά σε ό, τι συμβαίνει εδώ.
Έτσι, πρώτα από όλα, παρατηρήσετε ότι το σώμα
αυτής της σελίδας είναι εξαιρετικά απλή, στο εσωτερικό του σώματος
της σελίδας είναι απλά ένα div.
Έχω δώσει αυθαίρετα ένα αναγνωριστικό του χαιρετισμού
και ότι θα μπορούσε να είναι οτιδήποτε, εφ 'όσον είναι μοναδική
και στη συνέχεια απλά να έχουν κάποια απλό κείμενο, hello world.
Έτσι, αν τώρα μετακινηθείτε προς τα επάνω, παρατηρήσετε κάποια αφράτα styling.
Έτσι, λέω, απότομη χαιρετισμό, το οποίο όπως γνωρίζετε
σε CSS ακριβώς σημαίνει μοναδικά τον προσδιορισμό του στοιχείου
με μια ιδέα του χαιρετισμό,
μέγεθος γραμματοσειράς πρόκειται αυθαίρετα είναι αυτό, το περιθώριο και την ευθυγράμμιση του κειμένου.
Έτσι, πληκτικός αισθητικές λεπτομέρειες
στο κέντρο περίπου του κειμένου.
Έτσι, το ενδιαφέρον κομμάτι είναι στο σενάριο tag εδώ
το οποίο τυχαίνει να βάλει μέσα της κεφαλής της σελίδας.
Έτσι, we'll - μπορείτε να το κάνετε αυτό σε οποιοδήποτε αριθμό τρόπων
και θα δούμε μερικά επαναλήψεις αυτού του ίδιου προγράμματος
αλλά ας αρχίσουμε από την αρχή.
Έτσι, έχω κηρυχθεί λειτουργία που ονομάζεται αναλαμπή
και προφανώς χρησιμοποιεί αυτό ενσωματωμένη μέθοδο που ονομάζεται DOM
getElementById το οποίο είναι ίσως μία από τις πιο ισχυρές μεθόδους
ότι μπορείτε να πάρετε από το κουτί με JavaScript που αναζητούν
"Χαιρετισμό" δεν πρέπει να είναι διπλά εισαγωγικά, όπως ήταν
σε HTML είναι είτε είναι μια χαρά τόσο καιρό
όπως είστε στυλιστικά συνεπή αυτές τις μέρες τολμώ να πω
πολλοί άνθρωποι χρησιμοποιούν Java, μονά εισαγωγικά σε JavaScript,
διπλά εισαγωγικά σε HTML, αλλά δεν έχει τόση σημασία
εφ 'όσον είστε συνεπείς.
Έτσι, εδώ αν δεν είστε εξοικειωμένοι, μπορείτε πραγματικά να έχετε πρόσβαση
με CSS JavaScript ιδιότητες για τα στοιχεία.
Έτσι, παρατηρούμε ότι έχω δηλώνεται μια μεταβλητή που ονομάζεται div
και αποθηκεύονται στο εσωτερικό αυτής της μεταβλητής,
μια αναφορά σε ό, τι το στοιχείο DOM είναι.
Έτσι, αν νομίζετε ότι πίσω στο CS50 ή οποιαδήποτε κατηγορία στην οποία νομίζατε
σχετικά με τις δομές δέντρων και DOM, Document Object Model,
αυτό είναι απλώς μια αναφορά σε ένα κόμβο σε ένα δέντρο,
που αντιπροσωπεύει αυτή τη σελίδα
και αν div.style.visibility ιδιοκτησίας ισούται, ισούται, ισούται,
κρυφό, τότε απλά θέλουν μια εναλλαγή που
όπως πρότεινε ο Jonathan αλλιώς θέλω
για εναλλαγή πάνω στο κρυφό.
Τώρα, όπως και στο πλάι, γιατί ισούται με το τριπλό εκεί;
Ή τι είναι αυτό σε σχέση με διπλό ίσον;
>> Αυστηρή ισοδύναμο.
>> Συγγνώμη.
>> Αυστηρή ισοδύναμο.
Έτσι, είναι στους φορείς ταυτότητας
όπου με δεν είστε έλεγχο μόνον η τιμή της μεταβλητής
ως ίσο, ίσο αίσθηση αλλά και το είδος του.
Έτσι, ακόμα κι αν δεν έχουμε ορίζεται ως εδώ όλα τα δεδομένα
τύπων για τυχόν μεταβλητές στο αυτό ή οποιαδήποτε από τις διαφάνειες,
υπάρχει ένας τύπος που σχετίζεται με κορδόνι που κρύβεται
με αυτή την τιμή, κρυφά και αυτό είναι φυσικά εγχόρδων.
Έτσι, στην περίπτωση αυτή, Δεν έχει τόση σημασία
επειδή δεν υπάρχει κανένας τρόπος ότι θα πάμε να συγχέει ένα string
της «κρυμμένα» με κάποια άλλη αξία
αλλά αυτό είναι συχνά μια καλή συνήθεια θα έλεγα να πάρει
σε χρησιμοποιώντας την ίση, ίσα,
σύμβολο της ισότητας είναι γενικά ένα καλό πράγμα.
Θα κάνουν τον κωδικό σας πιο ισχυρή τόσο σε PHP, αλλά
και JavaScript επειδή θα τρέξει
σε σποραδικά γωνία των οποίων η αξία μπορεί να είναι μηδενική
ότι είστε ο έλεγχος για και μηδέν μπορεί να συγχέονται με ψευδή
ή θα μπορούσε να υπάρχει και, όπως σε PHP,
Javascript πάρα πολύ μπορεί να έχει πολλαπλές ψευδώς αξιών, όπου από το μηδέν
και ψευδή και άκυρη και απροσδιόριστο μπορεί να επιλύσει όλα τα έμμεσα
σε false.
Αλλά αν είστε πραγματικά θέλουν για να ελέγξετε για συγκεκριμένη τιμή
σαν το μηδέν, ο αριθμός, ή ψευδείς το Boolean, τότε έχετε
να χρησιμοποιήσετε αυτόν τον τελεστή ταυτότητας.
Έτσι, θα μπορούσε να συμβεί για να πάρει σε ούτως ή άλλως, ακόμη και αν εδώ,
Είναι το είδος της νόημα γιατί ξέρουμε ότι τον έλεγχο
για μια τιμή συμβολοσειράς και είναι δεν πρόκειται να είναι οτιδήποτε άλλο.
Έτσι, εδώ είναι η μαγεία, στη συνέχεια, αν μετακινηθείτε προς τα κάτω σε αυτή τη γραμμή εδώ,
προφανώς, χτισμένο στο αντικείμενο παράθυρο
και αυτό είναι ένα χαρακτηριστικό της ένα πρόγραμμα περιήγησης θα μπορούσαν να έχουν πρόσβαση
σε αυτό το σούπερ παγκόσμια αντικείμενο που ονομάζεται Παράθυρο,
μέσα που είναι κάποιες λειτουργίες,
εάν κομμάτι του οποίου έχει οριστεί το διάστημα
και παίρνει προφανώς τι είδους επιχειρήματα;
Ναι.
>> Κλήση Λειτουργία και ένα χρόνο.
Καλή >>. Έτσι, μια λειτουργία καλέσετε και ένα χρόνο
και έτσι μια ιδιαίτερα αναφορά σε μια λειτουργία,
ένας δείκτης σε μια συνάρτηση κατά μία έννοια
και ότι η λειτουργία ότι πρόκειται
για να εκτελεστεί κάθε αριθμό χιλιοστοδευτερόλεπτα και σε αυτή την περίπτωση,
είναι κάθε 500 χιλιοστά του δευτερολέπτου.
Έτσι, είναι ένας τρόπος για να παρακινήσει αποτελεσματικά και άπειρο βρόχο
χωρίς τη χρήση επανάληψης, αλλά αντί να λέει JavaScript
στον κινητήρα στο εσωτερικό του προγράμματος περιήγησης
να το κάνετε αυτό κάθε 500 χιλιοστά του δευτερολέπτου ή είναι κοντά
έως 500 χιλιοστά του δευτερολέπτου, καθώς μπορεί,
αποδεικνύεται ότι κάτω από το καπό,
υπάρχει αυτό που ονομάζεται ένα γεγονός βρόχο και θα επανέλθουμε σε αυτό
στο πλαίσιο του κόμβου JS ότι ακριβώς συνεχώς το είδος
κάθεται εκεί, γυρίζοντας, αναμονή για την εργασία που πρέπει να γίνουν
και μόλις το συνειδητοποιούν,
500 χιλιοστά του δευτερολέπτου που έχουν περάσει αναλαμπή θα πάρει κάλεσε ξανά
και ξανά και ξανά είναι μαζί με κάθε άλλη εργασία
που χρειάζεται για να γίνει.
Έτσι, αυτό που μπορούμε να βελτιώσουμε εδώ;
Λοιπόν, επιτρέψτε μου να ανοίξει up αναλαμπή-1.html
και αποδεικνύουν την αναλαμπή-1.html
ως αισθητικά απόλυτα ταυτόσημες.
Λοιπόν, τι μπορούμε να βελτιώσουμε εδώ;
Λοιπόν, παρατηρούμε ότι ήταν το είδος των άχρηστων
να ορίσουμε μια συνάρτηση που ονομάζεται Blink γιατί πόσες
σε πόσα μέρη έκανα καλέσετε τη λειτουργία αναλαμπή;
>> Μόνο μια φορά.
>> Έτσι, ένα.
Έτσι, δεν ήταν κακή, σε πραγματικότητα είναι μάλλον αρκετά
ευθεία προς τα εμπρός.
I ορίζεται μια αναλαμπή λειτουργία, I καλέσετε μια αναλαμπή συνάρτηση με τον τρόπο
αυτής της παραμέτρου, αλλά τεχνικά,
δεν υπήρχε λόγος αυτό και ένα κοινό πρότυπο
σε JavaScript είναι πραγματικά κάνουν χρήση των λειτουργιών λάμδα
όπως ίσως θυμάστε από 51 ή ανώνυμα λειτουργίες
όπου κι αν δεν χρειάζεστε ένα όνομα για μια συνάρτηση,
αν είστε μόνο το αποκαλούν σίγουρα σε ένα μέρος,
γιατί ενοχλεί να γεμίζετε τον κωδικό σας, σύγχυση στο μυαλό τους προγραμματιστές
και το όνομά σας χώρο πραγματικά με σύμβολα
ότι δεν έχετε πραγματικά Πρέπει να νοιάζονται για.
Και έτσι, σε αυτή την έκδοση εδώ,
παρατηρήσετε ότι είμαι καλώντας window.SetInterval άμεσα
στην κορυφή του μου script tag τότε που περνάω
σε μια ανώνυμη συνάρτηση ότι δεν παίρνει ορίσματα
και αυτό είναι απολύτως πρόστιμο και στη συνέχεια το σώμα
αυτής της λειτουργίας φαίνεται είναι πανομοιότυπο με αυτό που ήταν πριν από
και το μόνο συντακτικές διαφορά τώρα είναι
εδώ κάτω, δίπλα στο 500.
Κλείνω το σώμα της συνάρτησης
και στη συνέχεια λέω εκτελέσει το προηγούμενο κώδικα,
ανά 500 χιλιοστά του δευτερολέπτου.
Έτσι, πολύ οριακή μεταβολή
αλλά ένα βήμα προς αυτό που είναι ίσως μια πιο κομψή
εφαρμογή της παρούσας.
Έτσι, ας ρίξουμε αυτό το ένα εντείνει περαιτέρω αν εγώ τώρα πάω
σε ριπή δύο, θα είστε δείτε μια κοινή βιβλιοθήκη,
το αποτέλεσμα της οποίας πρόκειται
να είναι εντελώς ασήμαντο αισθητικά, αλλά αν πάμε
στην έκδοση δύο εδώ, ανακοίνωση ότι στην κορυφή του κεφαλιού μου,
Έχω συμπεριληφθεί η τελευταία έκδοση του JQuery.
Και στη συνέχεια, εδώ κάτω, Απλά καθαρίζονται
μέχρι τον κώδικα λίγο, είναι δεν πρόκειται να είναι ένα διασκεδαστικό κόσμο
να συνεχίσουν να χρησιμοποιούν μητρική λειτουργίες DOM
και το είδος των πρώτων JavaScript.
Στην πραγματικότητα, JQuery όπως ίσως γνωρίζετε έχει γίνει τόσο δημοφιλές
ότι οι περισσότεροι άνθρωποι απλά σύγκρουση με jQuery JavaScript
αλλά πραγματικά μόνο ένα δείπνο χρήσιμη βιβλιοθήκη γραπτή
από έναν συνάδελφο που ονομάζεται John Resig και από άλλους
που έχουν κάνει μόνο ένα πολλά βαρετά πράγματα
σε JavaScript ευκολότερη και πιο περιεκτική.
Έτσι, σε αυτή την περίπτωση εδώ τι συμβαίνει;
Έτσι, έχω αυτή την εμφάνιση της το σύμβολο του δολαρίου, περισσότερα για αυτό
ακριβώς σε μια στιγμή, στη συνέχεια, αυτό είναι ένας επιλογέας CSS.
Έτσι, είναι πολύ παρόμοια σε πνεύμα σε ό, τι έκανα πριν,
αλλά αυτή τη φορά, είμαι κυριολεκτικά χρησιμοποιώντας το hash ετικέτα
για να υποδείξει ένα μοναδικό αναγνωριστικό που ονομάζεται χαιρετισμό
και, στη συνέχεια, προφανώς . Css είναι μια μέθοδος που χτίστηκε
για να ανεξαρτήτως αντικειμένου είναι ότι μόλις δημιουργήσατε
και είμαι ελέγχοντας την τιμή του κλειδιού ορατότητας.
Και αν η αξία της εν λόγω κλειδί ισούται, ισούται, ισούται, κρυμμένο,
τότε θα πάω για να το ενεργοποιήσετε και να Πάω να το αλλάξετε αυτή τη φορά
χρησιμοποιώντας την ίδια μέθοδο το οποίο προφανώς είναι υπερφορτωμένο
υπό την έννοια ότι έχει δύο διαφορετικές υπογραφές,
ένα με ένα επιχείρημα και ένα με δύο επιχειρήματα,
η δεύτερη εκ των οποίων είναι ο ρυθμιστής,
η πρώτη των οποίων είναι ένας κτήτορας να το πω έτσι.
Και αν και περίεργη και αν έπαιρνα στην πραγματικότητα ποτέ δεν κοίταξε αυτό,
αν πάμε να ελπίζουμε jquery.css το κορυφαίο χτύπημα είναι πράγματι αυτό
και μπορείτε να δείτε μια πιο επίσημη εξήγηση
ότι μπορούμε απλά να χρησιμοποιήσετε αυτό, . Css με το όνομα ακινήτων
και στη συνέχεια ο ρυθμιστής είναι dot CSS
με ένα όνομα ιδιότητας και μία τιμή.
Έτσι, οριακά καθαρότερο, αλλά παρατηρήσετε το είδος του σχεδίου εδώ
με κάθε επανάληψη του παρόντος κώδικα,
είμαστε είδος καθιστώντας αυστηρότεροι και τα αυστηρότερα και οι αυστηρότεροι
και να πω υπάρχουν καλύτερα σχέδια
δεδομένου ότι είμαστε με κάποιον άλλου τον κώδικα που είναι εξαλειφθεί
μερικές από την πολυπλοκότητα.
Έτσι, τώρα ας κάνουν αυτό ακόμα πιο απλή.
Και στην πραγματικότητα, αν μπορώ να αφαιρέσω όλα τα αποσπάσματα θα δείτε ακριβώς όλα τα
σχόλιο θα δείτε πώς απλά αυτό έχει πάρει.
Η μόνη διαφορά εδώ βέβαια είναι
ότι είμαι χρησιμοποιώντας μια άρθρωση μέθοδος η οποία έρχεται επίσης ενσωματωμένο
για να jQuery και αυτό είναι ακριβώς
επειδή κάποιος άλλος έγραψε τον κώδικα
που εναλλάσσει στην πραγματικότητα η ρύθμιση ορατότητας
οποιουδήποτε στοιχείου DOM ότι μπορείτε να το στείλετε.
Έτσι, όλο και καλύτερα.
Και έτσι, αυτό είναι ένα πρότυπο,
ακόμα κι αν αυτό είναι ένα δείπνο απλό παράδειγμα και το είδος
ηλίθια καθαρό αποτέλεσμα που είναι ένα αναβοσβήνει κομμάτι του κειμένου,
Είναι αυτό το είδος της σκέψης διαδικασία που θα πρέπει να σκεφτείτε -
να σκεφτόμαστε όχι αναγκαστικά η πρώτη πολύ
παθητική γραπτώς κάτι για το επικείμενο σχέδιο
αλλά σίγουρα όπως θα επαναλάβει με το σύμβουλό σας ή μαζί μου
και συναντήσεις της ομάδας σας ή απλά να αναθεωρήσει τους συμπαίκτες κωδικό σας
για σύσφιξη τα πράγματα, έτσι δεν είναι;
Μετά από όλα, είναι λιγότερο -
a λιγότερες γραμμές κώδικα μπορείτε τελικά να
στη θεωρία, οι λιγότερα σφάλματα σας είναι πιθανό να καλέσει
επειδή υπάρχουν απλά λιγότερο κώδικα να χαλάσουν με.
Εντάξει.
Έτσι, ένα ζευγάρι των φαστ φουντ.
Λάμδα λειτουργίες, ανώνυμες λειτουργίες,
πολλές από τις οποίες έχουμε ξαναδεί
και, στη συνέχεια, μόλις σύσφιξης τα πράγματα με μια βιβλιοθήκη
όπως jQuery σε αυτό συγκεκριμένη περίπτωση.
Εντάξει.
Οποιεσδήποτε ερωτήσεις;
Ας κάνουμε ένα άλλο πτυχής του πελάτη εδώ,
σε μορφή μηδέν έχουμε αυτό το καθαρό αποτέλεσμα.
Σούπερ απλή μορφή και προφανώς αν προσπαθώ να κάνετε κλικ εδώ για εγγραφή,
Αρχικά μου λέει είσαι καταχωρηθεί, επίσης, δεν είναι πραγματικά.
Λοιπόν, γιατί συμβαίνει αυτό;
Λοιπόν, εδώ είναι μορφή-0.html πολύ μικρό κώδικα,
Δεν JavaScript απολύτως και είναι εντελώς ένα ψεύτικο είδος
της μορφή, επειδή η δράση τιμή είναι registered.html
που σημαίνει ότι δεν έχει σημασία τι Τύπου Ι σε αυτή τη μορφή,
όπου είναι αυτό πρόκειται να να σταλούν στο διακομιστή;
Ναι. Έτσι, για να registered.html η οποία είναι σαφώς ένα αρχείο HTML
το οποίο είναι, ως εκ τούτου στατική αρχείο το οποίο δεν διαθέτει τα μέσα
από τη λήψη εισόδου του χρήστη υποθέτοντας δεν υπάρχει κώδικα JavaScript
ενσωματωμένο σε αυτό που είναι ψάχνει στο URL
έτσι αυτό είναι εντελώς μια NOOP και ότι τίποτα δεν πρόκειται να συμβεί
με δεδομένα που υποβλήθηκαν, αλλά μπορείτε να δείτε τη δομή
από μια αρκετά απλή μορφή HTML5
ότι έχει μερικά κωδικό πρόσβασης, λίγοι τύποι εισόδου.
Οπότε, ας πραγματικότητα τώρα προσθέσετε κάποια έλεγχος σφαλμάτων
και να δούμε πώς θα μπορούσαμε να βελτίωση της κατάστασης αυτής.
Έτσι, εδώ είναι το είδος της μια φτωχή τον τρόπο ο άνθρωπος των εκτελεστικών αυτού
και αυτό είναι το είδος της μια δυσάρεστο κομμάτι του κώδικα.
Έτσι, πρώτα ας κύλισης στο κάτω μέρος
για να δούμε τι είναι η ίδια και τι είναι διαφορετικό.
Το μόνο πράγμα διαφορετικό τώρα μεταξύ αυτού
και η προηγούμενη έκδοση είναι ότι έχω δώσει τη μορφή και το ID
«καταγραφή» θα μπορούσε έχει γίνει ό, τι θέλω
αλλά εννοείται του να είναι μοναδικά αναγνωρίζεται ακόμα και αυτό δεν είναι
απολύτως αναγκαία, διότι αν μια Η σελίδα έχει μόνον ένα έντυπο σίγουρα θα
θα μπορούσε να το βρείτε με ένα από τα μεθόδους επιλογής jQuery του.
Αλλά αυτός ο τρόπος κάνει ακριβώς το πιο ντετερμινιστική.
Έτσι, αν πάω τώρα στο script μου ετικέτα, παρατηρήστε τα ακόλουθα,
ισούται window.onload μια ανώνυμη συνάρτηση.
Έτσι, τι είναι αυτό το κάνει;
Έτσι, ίσως θυμάστε ότι σε προγραμματισμού client-side -
Javascript μάλλον σελίδες HTML Οι διάφορες εκδηλώσεις που συνδέονται
με στοιχεία, κάνοντας κλικ και την υποβολή και την εστίαση
και το θόλωμα και άλλα τέτοια γεγονότα που θα μπορούσε να συμβεί
ως χρήστης τυπικά αλληλεπιδρά με τη σελίδα,
window.onload κάνει ό, τι λέει.
Την παράθυρα ολόκληρο φόρτωσης
έτσι μόλις όλες οι εικόνες έχουν κατεβάσει μια φορά όλα τα αρχεία που έχουν
έχουν κατεβάσει και μία φορά η σελίδα έχει φορτωθεί,
κάνει τον παρακάτω κώδικα, και παρατηρήσετε αν στραφούν προς τα κάτω
αυτής της μεθόδου, παρατηρούμε ότι δεν υπάρχουν παρένθεση
μετά το άγκιστρο το οποίο είναι να πούμε
ότι δεν είμαι εκτέλεσης η λειτουργία αυτή εδώ τώρα,
το πρόγραμμα περιήγησης πρόκειται να εκτελέσει για μένα, όταν έχει καθοριστεί
ότι η σελίδα έχει φορτωθεί.
Έτσι, ας δούμε τι έχουμε κάνει,
document.getElementById εγγραφή
έτσι ώστε να μου δίνει μόνο μια αναφορά στον κόμβο
στο δέντρο που είναι της έχει ένα αναγνωριστικό της εγγραφής.
Και τώρα, πάω να εγγραφείτε άλλη χειρισμού συμβάντων
κάνοντας form.onsubmit παίρνει αυτή η ανώνυμη συνάρτηση
πράγμα που σημαίνει την ακόλουθη κωδικός θα πρέπει να εκτελέσει κάθε φορά
ότι η μορφή έχει υποβληθεί.
Τώρα, τα περισσότερα από αυτά είναι απλά είδος βαρετό λογικής.
Έτσι, αν η αξία των πεδίο e-mail με τη μορφή είναι
"Τίποτα" τότε θα πρέπει να παρέχουν τη διεύθυνση ηλεκτρονικού ταχυδρομείου σας,
σας φωνάζω στο χρήστη με μια ειδοποιεί και στη συνέχεια να επιστρέψει false.
Και τότε έχω μια σωρό άλλους ελέγχους,
οι έλεγχοι για τον κωδικό πρόσβασης,
οι έλεγχοι, εάν η κωδικοί πρόσβασης είναι το ίδιο,
οι έλεγχοι, εάν η συμφωνία πλαίσιο ελέγχου είναι επιλεγμένο ή όχι
και εγώ απλά φωνάζεις ο χρήστης αν υπάρχουν
των δοκιμών αυτών που πράγματι αποτύχει.
Και ναι, εδώ είναι ένα παράδειγμα, ακόμη και αν και είναι λίγο σκηνοθετημένη
εδώ το γεγονός ότι είμαι με τη χρήση ισούται, ισούται, ισούται,
σημαίνει ότι ο χρήστης δεν μπορεί να προσπαθήσει να με ξεγελάσεις
πληκτρολογώντας σε ποια τιμή.
Ή μάλλον είμαι πραγματικά έλεγχο για την παρουσία
για την κενή συμβολοσειρά, ο χρήστης Δεν έχει πληκτρολογήσει τίποτα ακόμα.
Εάν ο χρήστης πληκτρολογήσει κυριολεκτικά μηδέν,
"Μηδέν" δυνητικά θα μπορούσε να είναι συγχέεται με το κενό string.
Και λέω ότι είναι το είδος ανούσια εδώ
γιατί προφανώς ακόμη μηδέν Δεν είναι μια διεύθυνση email.
Αλλά αν αυτό ήταν μια πιο γενικό πεδίο σαν ένα πεδίο κειμένου
ή ένα όνομα ή μια περιγραφή ή κάτι που θέλετε να εκτιμούν για
και δεν είναι κατ 'ανάγκην συντακτικά έχουν
να είναι μια διεύθυνση ηλεκτρονικού ταχυδρομείου, ο χρήστης θα μπορούσε να πληκτρολογήσετε κάτι σαν το μηδέν
και πάλι την περίπτωση γωνία, αλλά αυτό είναι γιατί συνήθως τον έλεγχο των τύπων είναι
ένα χρήσιμο πράγμα.
Είσαι πραγματικά ο έλεγχος για ο χρήστης έχει πληκτρολογήσει τίποτα
σε αυτό το πεδίο.
Λοιπόν, τι θα συμβεί αν κανένα των εν λόγω δοκιμές αποτύχουν, καλά,
επιστροφή αλήθεια μέσα από ένα πρόγραμμα χειρισμού συμβάντων
όπως onsubmit σημαίνει απλά ας η αρχική συμπεριφορά πραγματικότητα
διαδίδονται και επομένως η μορφή θα πάρει υποβληθεί.
Και γι 'αυτό, όταν τελικά κλικ στην επιλογή Υποβολή πριν πήρα
έως και register.html αν το κάνω αυτό τώρα, ανακοίνωση,
Παίρνω φώναξε σε αν δεν το κάνω μια διεύθυνση ηλεκτρονικού ταχυδρομείου
και μπορώ να πληκτρολογήσετε malan@harvard.edu,
κατακόκκινο [φωνητική], βυσσινί, επιλέγοντας το πλαίσιο,
και τώρα εγγραφή και μου λέει, και πάλι,
είστε εγγεγραμμένος ή δεν είναι πραγματικά.
Εντάξει.
Οπότε, ας καθαρίσει αυτό επάνω ακριβώς λίγο και στη συνέχεια μετάβαση
στο νέο νεότερα πλευρά του server πράγματα.
Έτσι, αν πάω στη μορφή-2.html, παρατηρήσετε μερικά πράγματα.
Έτσι, το ένα, έφερα jQuery πίσω στο μίγμα
οπότε εκεί είναι και πάλι αυτό το σύμβολο του δολαρίου
και τώρα είμαι με τη χρήση κάποιες μέθοδοι jQuery.
Έτσι, πρώτον, τι είναι αυτό για το σύμβολο του δολαρίου που είναι
τόσο ιδιαίτερο εδώ;
Ποιο είναι το σύμβολο του δολαρίου με κορδόνια κατά το μεγαλύτερο μέρος οποιουδήποτε κώδικα jQuery;
Ναι.
[ΑΚΟΥΓΕΤΑΙ Παρατήρηση]
OK. Έτσι, η λειτουργία σύμβολο του δολαρίου περνά από το DOM ψάχνει
για κάτι με αυτό επιλογέας CSS.
Έτσι, αλήθεια, αλλά σχεδόν πάρα πολύ ακριβή.
Αυτό είναι ό, τι συμβαίνει όταν περνάτε σε ένα string
όπως στην προκειμένη περίπτωση, αλλά δεν το κάνετε πάντα πρέπει να περάσει σε μια σειρά.
Στην πραγματικότητα, η συγκεκριμένη περίπτωση, η ίδια η πρώτη γραμμή εδώ είναι αυτό δεν είναι ένα
Επιλογέας CSS, που περνάω σε μια συνάρτηση λάμδα.
Έτσι, γενικότερα - έτσι, καλή απάντηση, αλλά πάρα πολύ ακριβή.
Γενικότερα, τι είναι σύμβολο του δολαρίου αντιπροσωπεύουν;
>> Just jQuery.
Ναι >>. Έτσι, απλά jQuery ή είναι απλώς μια λειτουργία
ότι ορισμένες τύπος χρόνια πριν έγραψε και άλλα άτομα έχουν
ενισχύεται από το ότι κυριολεκτικά από προεπιλογή ονομάζεται -
ουπς, ονομάζεται jQuery.
Απλά - αποδεικνύεται έξω σε αντίθεση με πολλά
του δολαρίου νοηματική γλώσσα είναι μια απολύτως έγκυρη σύμβολο για να χρησιμοποιήσετε
στο όνομα μιας μεταβλητής, ενώ
σε PHP σύμβολο του δολαρίου έχει προφανώς ιδιαίτερη σημασία
αλλά JavaScript, όπως στην ορισμένες γλώσσες, το σύμβολο του δολαρίου
και υπογραμμίζουν και άλλα τέτοια ειδικούς χαρακτήρες εντελώς legit
να χρησιμοποιήσετε στο δικό σας σύμβολο ονόματα για τις μεταβλητές.
Έτσι, κάποιος μόλις αποφάσισε ότι, ξέρετε τι;
Είναι πρόκειται να είναι αρκετά κουραστική
να κάνει όλο τον κόσμο πληκτρολογήστε jQuery όλη την ώρα,
επιτρέψτε μου είδος φυτέψει ένα συμμετοχής στο έδαφος και να πω,
"Αυτή η βιβλιοθήκη θα χρησιμοποιήστε το σύμβολο του δολαρίου. "
Και στην πραγματικότητα, αυτό δεν αυξάνουν τον κίνδυνο
ότι κάποιος άλλος με αυθάδεια πρόκειται να χρησιμοποιήσει το σύμβολο του δολαρίου
για τη βιβλιοθήκη του, αλλά υπάρχουν τρόποι για να ασφαλίσουν το είδος της
ότι όταν χρησιμοποιείτε το δολάριο υπογράψουν χαρτογραφεί σε jQuery
επειδή μπορείτε να ελέγξετε εάν είναι ήδη εκχωρηθεί
σε κάτι άλλο ουσιαστικά.
Εντάξει.
Έτσι, αυτό είναι το μόνο που είναι, δεν υπάρχει μαγεία.
Είναι απλά μια σέξι αναζητούν κομμάτι της σύνταξης που είναι ωραία
και γρήγορο και εύκολο να τύπου.
Οπότε, τι συμβαίνει όταν πληκτρολογήστε το σύμβολο του δολαρίου ανοιχτό paren
και, στη συνέχεια, μια ανώνυμη συνάρτηση.
Λοιπόν, αποδεικνύεται ότι αυτό είναι πραγματικά σημειογραφία στενογραφία
για dot έγγραφο έτοιμο ανοιχτό paren.
Έτσι, όπως παρατήρησε η Cynthia νωρίτερα έχουμε ήδη βρει ένα
περίπτωση γωνία.
Αν έχετε μόλις περάσει η συνάρτηση λάμδα,
η επίδραση του δολαρίου σημάδι είναι λίγο διαφορετική.
Στην πραγματικότητα, αυτό που πραγματικά συμβαίνει είναι ότι είναι ισοδύναμο με αυτό,
περνώντας σε μια αναφορά η παγκόσμια αντικειμένου εγγράφου
ότι είναι παγκόσμια ακριβώς όπως το αντικείμενο παράθυρο είναι
που σας δίνει κάποια ειδικές λειτουργίες
που επηρεάζει ολόκληρη τη σελίδα ή το πρόγραμμα περιήγησης και το μετατρέπει
από το έγγραφο αυτό, όταν μπορείτε να το τυλίξετε με jQuery,
jQuery αντιλαμβάνεται κατ 'ουσίαν, Ω, αυτό είναι μια αναφορά
για το εν λόγω ειδικό αντικείμενο του εγγράφου,
Επιτρέψτε μου τώρα να καταχωρήσετε ένα χειρισμού συμβάντων που ονομάζεται έτοιμο
η οποία δεν είναι η μητρική JavaScript ή DOM σχετίζονται.
Ready είναι μια jQuery πράγμα που λέει
όταν η σελίδα έχει φορτωθεί όλα τα στοιχεία HTML
αλλά όχι απαραίτητα φορτωθεί, όλα τα CSS και εικόνες
και JavaScript αρχεία και flash αρχεία και τους ομοίους.
Έτσι, είναι ένα βήμα πριν από την το φορτίο τότε προχωρήστε
και να εκτελέσει τα ακόλουθα.
Και η άνω πλευρά της, χρησιμοποιώντας για έτοιμα τα μέσα είναι ότι μπορείτε να, ξέρετε,
ότι όλα τα στοιχεία DOM σε σας,
όλα τα μονοσήμαντα τα πράγματα με ταυτότητες, υπάρχουν ακόμη
Εάν η σελίδα, το περιεχόμενό του εξακολουθούν φόρτωση και εκφόρτωση
και έχετε κάποια σπασμένα εικονίδια για μια στιγμή
ή λευκή σελίδα στο παρασκήνιο.
Ναι.
>> Τι θα συνέβαινε αν [δεν ακούγεται];
>> Τέλειο παράδειγμα, ένα τέλειο θέμα.
Έτσι, ας δούμε αν μπορούμε να προσομοίωση αυτή τη στιγμή.
Έτσι, επιτρέψτε μου να πάει μπροστά και να διαγράψετε αυτό δύο γραμμές εδώ και στη συνέχεια
χωρίς να ενδιαφέρεται για να καθορίσει το εσοχή, επιτρέψτε μου να προχωρήσει
και να διαγράψετε αυτό εδώ κάτω - ουπς, αυτό εδώ κάτω.
Και τώρα, επιτρέψτε μου να πάω πάνω στο σελίδα, πηγαίνετε στο έντυπο-2.html και τον τύπο
Εγγραφή, τίποτα δεν φάνηκε να συμβεί, ας πούμε, γιατί ήταν ότι,
ας προχωρήσει και να ανοίξει up επιθεωρητής του Chrome,
ανοίξει την κονσόλα μόνο για να δούμε αν συμβεί κάτι εδώ, τώρα,
εγγραφή, ακόμα τίποτα.
Έτσι, ο κώδικας είναι συντακτικά πρόστιμο
οπότε δεν βλέπω καμία κόκκινο μηνύματα λάθους,
αλλά αυτό που με σαφήνεια Δεν συμβαίνει;
Κανένας από τον κωδικό μου είναι σωστή, δεν λειτουργεί έτσι ώστε κανένας
των κωδικών μου φαίνεται να είναι εκτέλεσης, οπότε γιατί να είναι αυτό;
Λοιπόν, JavaScript και browsers γενικότερα να εκτελέσει το
το περιεχόμενο μιας ιστοσελίδας, κορυφή προς τα κάτω, αριστερά προς τα δεξιά.
Και το πρόβλημα είναι ότι, επειδή η κορυφή
της σελίδας HTML έχει στη συνέχεια το κεφάλι τότε το σενάριο, τότε ένα άλλο σενάριο,
Αυτό πρόκειται να πάρει εκτελεστεί πριν από αυτό που είναι ακόμη έτοιμη,
ή ακόμη υπάρχει στο δέντρο απεικόνιση της σελίδας.
Η ίδια μορφή, ούτε καν η σώμα υπάρχει σε αυτό το σημείο.
Έτσι, jQuery είναι αρκετά έξυπνος με τον έλεγχο των σφαλμάτων που είναι
ότι, αν δεν υπάρχει στοιχείο με το μοναδικό αναγνωριστικό της εγγραφής,
δεν πρόκειται να ξεμπλέξουμε σε σας
και απλά να προκαλέσει κάποια κονσόλα σφάλματα και να σπάσει ολόκληρη τη σελίδα,
πρόκειται να αγνοούν σιωπηλά σας, αλλά ο λόγος που κανένας
του αυτός ο κώδικας εκτελεί ποτέ είναι
επειδή, όταν έχετε εγγεγραμμένων αυτό υποβάλλει χειριστή,
δεν υπήρχε κανένα στοιχείο να αποδίδουν.
Έτσι, αυτό είναι το είδος της μια μη op εκεί.
Έτσι, διευκρινίζοντας αντ 'αυτού, περιμένετε μέχρι την ηλικία έχει φορτωθεί
αν κάναμε την window.onload πράγμα που είναι ένα είδος
από το παλιό σχολείο τρόπος για να γίνει αυτό ή η πιο σέξι τρόπο jQuery
όπως αυτό, μπορούμε να πει να περιμένει έως ότου όλα
από αυτά τα tags HTML έχουν έχουν αναλυθεί έτσι ώστε ακόμη
αν οι εικόνες δεν έχουν φορτωθεί, σε τουλάχιστον αυτός ο κόμβος είναι πάνω στο δέντρο,
JQuery τότε μπορεί να διασφαλίσει ότι τα πάντα είναι εκεί.
Ναι.
[ΑΚΟΥΓΕΤΑΙ Παρατήρηση]
Ναι, καλά, ναι, απολύτως.
Έτσι, η άλλη λύση για την αυτό, αν δεν χρησιμοποιήσετε αυτό το
ή δεν θυμάμαι ότι αυτό υπήρχε,
θα μπορούσε να κινηθεί απολύτως όλα αυτά προς τον πυθμένα
της ιστοσελίδας, μέσα από το το σώμα, αλλά ακόμα κάτω από τη φόρμα
και ότι επίσης θα λύσει αυτό το πρόβλημα.
Είναι απλά τυπικά θεωρείται κακή πρακτική.
Είναι λίγο ακατάστατο και ατημέλητη ειδικά
αν έχετε κρατήσει τα πάντα παρεμβολών στο κάτω μέρος της σελίδας,
ειδικά όταν κρατώ τα πράγματα απλά με την τοποθέτηση όλων
του κωδικού μου μέσα της σελίδας HTML
όταν βέβαια μπορείς σίγουρα να πάρει στη συνήθεια
του factoring έξω σε ξεχωριστό αρχείο
σε ποιο σημείο είναι απλά ωραίο
να συγκεντρώσει το αρχεία στο κεφάλι.
Εκτός εάν υπάρχει μια τιμή που πληρώνετε
βάζοντας JavaScript άλλα περιουσιακά στοιχεία, όπως αρχεία CSS
στο κεφάλι της σελίδας, τι είναι ένας κίνδυνος που θα τρέξει;
>> Βραδύτερη φόρτωση της σελίδας.
>> Βραδύτερη φόρτωσης της σελίδας, γιατί;
>> Επειδή προσπαθούμε να φορτώσει όλες τις βιβλιοθήκες
πριν [δεν ακούγεται].
Ακριβώς επειδή >> browsers διαβάστε την κορυφή προς τα κάτω κώδικα,
αριστερά προς τα δεξιά αν το Google analytics είναι αργή
ή το jQuery CDN είναι αργή ή το Facebook API είναι αργή
και αυτό το αρχείο κολλάει μόνο δυνητικά, ανάλογα
για το πώς θα φορτωθεί το αρχείο, η ολόκληρη τη σελίδα θα μπορούσε να φαίνεται να κολλήσει.
Και αν δείτε αυτό πολύ ειλικρινά
σε ιστοσελίδες που έχουν πολλά διαφημίσεις χαμηλής ποιότητας
σε αυτά, είμαστε μόνο μια αργή ή ήπιε ιστοσελίδα θα μπορούσε να κολλήσει μια σελίδα
για κάποιο αόριστο αριθμός των δευτερολέπτων
μέχρι που τελικά το πρόγραμμα περιήγησης ελπίζουμε φορές έξω σε ότι
και στη συνέχεια σας δείχνει το υπόλοιπο της σελίδας.
Έτσι, αν έχετε χρησιμοποιήσει ποτέ, όπως το Facebook, όπως το κουμπί,
στην ιστοσελίδα σας, επιτρέψτε μου να να δω αν μπορώ να το βρείτε
χωρίς να χρειάζεται να συνδεθείτε εδώ.
Έτσι, αν πάτε να το Όπως το κουμπί του Facebook
και κάντε κλικ σε ένα κωδικό πάρει, γαμώτο,
Ας δούμε αν μπορούμε βρείτε το παράδειγμα,
σίγουρα κάποιος είχε αναρτηθεί αυτό.
[Παύση]
Θα παραιτηθεί σε λίγες δευτερόλεπτα, αν δεν βλέπουμε αυτό.
Facebook ασύγχρονη - OK.
Έτσι, αυτό είναι ο κώδικας και αν που έχουν αλλάξει πρόσφατα
ότι το Facebook στην πραγματικότητα συνιστά να χρησιμοποιείτε
να φορτώσει τη βιβλιοθήκη τους και στην πραγματικότητα προτείνει
ότι έχετε θέσει αυτό το σώμα της σελίδας σας.
Έτσι, το Facebook σας συμβουλεύει δημιουργήσει ένα είδος ηλίθιο DIV
που έχει ακριβώς μοναδικό αναγνωριστικό, όπως αυτό, τότε έχουν μια ετικέτα script
και όλη αυτή η πολυπλοκότητα ουσιαστικά κάνει τα ακόλουθα
και δεν χρησιμοποιούν κανένα JQuery επειδή δεν θέλουν
να αναλάβει οποιαδήποτε άλλη εξαρτήσεις,
επιτρέψτε μου να το μετακινήσω πάνω από ακριβώς ένα κομμάτι.
Έτσι, παρατηρούμε ότι έχουν μια ανώνυμη συνάρτηση εδώ,
περισσότερα για αυτό σε λίγο,
που στη συνέχεια χρησιμοποιήστε document.createElement,
από όπου και αν δημιουργεί ένα στοιχείο DOM, αυτό είναι σαν malloc να το πω έτσι
όπου η ετικέτα είναι του τύπου script, είναι στη συνέχεια προσδιορίζοντας
ότι το χαρακτηριστικό async της εν λόγω ετικέτας θα
για να είναι αληθινό, τότε προχωρήστε και να καταλάβω ποια είναι η διεύθυνση URL
από το Facebook JavaScript θα πρέπει να είναι
και αυτό είναι μόνο η φανταχτερό τρόπο
του ελέγχου θα πρέπει να να είναι HGP ή HDPS.
Και τελικά, θα παρατηρήστε τι κάνει το Facebook,
παίρνουν τον κόμβο DOM που έχει ένα αναγνωριστικό του Facebook ρίζα
το οποίο είναι ό, τι είπαν μπορείτε να βάλετε μέσα στη σελίδα
και στη συνέχεια να προσθέσετε το παιδί έτσι ώστε το αποτέλεσμα όλων αυτών είναι
να είδος ένεση δυναμικά μια νέα ετικέτα script στη σελίδα σας
ως παιδί του DIV που σας εισαχθεί εκεί, έτσι ώστε το υπόλοιπο
από τη φόρτωση της σελίδας ευτυχώς
και, στη συνέχεια, αυτός ο κώδικας πράγματι φορτώνεται ασύγχρονα.
Έτσι, κατ 'ουσίαν, μετά την Πράγματι και εγώ αναβολή αναφορά
της ανώνυμη συνάρτηση,
τι είναι αυτό το funky σύνταξη αναφέρεται εδώ
όταν έχω όχι μόνο τη λειτουργία ανοίξει paren, κοντά paren
και, στη συνέχεια, άγκιστρα, γιατί τα ανοικτά paren εδώ
και στη συνέχεια η ανοιχτή κοντά, πολύ κοντά Paren εκεί, τι είναι αυτό που κάνεις;
>> [Αθόρυβος] και καθορίζοντας και στη συνέχεια την εκτέλεση;
>> Ακριβώς, αυτό είναι η κατάρτιση ενός λειτουργία η οποία είναι ανώνυμη
αλλά απλώς να οριστεί μια συνάρτηση,
Φυσικά δεν εκτελεί μια λειτουργία μέχρι να το καλέσετε
με βάση το όνομα, αλλά φυσικά αυτό είναι μια ανώνυμη συνάρτηση
έτσι δεν μπορείτε να καλέσετε με βάση το όνομα, αλλά μπορείτε να
σε εκτέλεση JavaScript ένας ανώνυμη συνάρτηση μόνο
εμφωλεύοντας το όλο θέμα σε παρένθεση, όπως έχουμε κάνει
με αυτό το paren και αυτό Paren εδώ και στη συνέχεια ένα στερέωσης
έως το τέλος της συνάρτησης ανοιχτή paren, κοντά paren,
αν δεν θέλετε να δώσετε κανένα επιχείρημα.
Αλλά αυτό φαίνεται κάπως ανόητο,
όπως το γιατί αυτό το πρόσθετο συντακτική πολυπλοκότητα
ότι οι περισσότεροι άνθρωποι δεν φαίνεται να αναγνωρίσει, ποια είναι η αξία
περιτυλίγματος εκείνων τρεις γραμμές κώδικα
σε μια ανώνυμη συνάρτηση με αυτόν τον τρόπο.
Ναι.
>> Για να αποφευχθεί η αντικατάσταση ενός πολύτιμη η [δεν ακούγεται].
>> Ακριβώς, για να αποφευχθεί αντικατάσταση μιας μεταβλητής
στην υπάρχουσα σελίδα, έτσι δεν είναι;
Facebook είναι κάπως αυθάδεια αποφάσισε,
από όπου και αν πρόκειται να χρησιμοποιήσετε το μεταβλητή Ε, είναι πολύ πιθανό
ότι εσείς ή κάποιος χρησιμοποιώντας το Facebook, όπως το κουμπί
ή ό, τι άλλες κοινωνικές βύσμα
σε μια μεταβλητή έχει κάπου που ονομάζεται E. Έτσι,
εμφωλεύοντας όλα του κώδικά τους μέσα
αυτής ανώνυμη συνάρτηση, που ουσιαστικά έχουν το δικό τους πεδίο εφαρμογής
ότι δεν υπάρχει κίνδυνος να πειράζουν τυχόν υπάρχουσες μεταβλητές.
Έτσι, αυτό είναι πάρα πολύ στην πραγματικότητα ένα πολύ κοινό παράδειγμα,
ειδικά όταν γράφετε μια βιβλιοθήκη κώδικα
ή όταν εσείς δεν κάνετε θέλετε να γεμίσετε το χώρο όνομά σας
με άλλες μεταβλητές που θέλετε η τιμή για να ζήσουν
και πεθαίνουν μόλις βγείτε ότι το μπλοκ του κώδικα,
αυτό είναι ένα ωραίο τεχνική σε JavaScript.
Εντάξει.
Έτσι, στη συνέχεια πίσω με αυτό το παράδειγμα εδώ, όλοι έχουμε κάνει στο τέλος
με αυτό το παράδειγμα είναι μόλις καθαριστεί ο κώδικας.
Έτσι, έχεις ακόμα μια ολόκληρη δέσμη των διακοπτών, ένα σωρό
των συνθηκών, αλλά παρατηρήσετε ένα κομμάτι της σύνταξης,
Αυτό έχει πρόσβαση στον κόμβο DOM με το μοναδικό αναγνωριστικό εγγραφής,
τα μέσα χώρο να φανεί τώρα απόγονος αυτού του κόμβου,
βρείτε αν είναι του τύπου εισόδου και, στη συνέχεια, ακόμη και
αν δεν το έχετε δει αυτό πριν, ίσως γνωρίζετε
ότι αυτό σημαίνει απλά βρείτε με την ετικέτα εισόδου,
τα στοιχεία εισόδου που έχει ένα χαρακτηριστικό όνομα με αξία
του ηλεκτρονικού ταχυδρομείου, και στη συνέχεια αφήστε Θέλω να κύμα το χέρι μου σε μερικά
από τα υπόλοιπα δεν είναι όλα αυτά τόνωση
αλλά πραγματικά ακριβώς σύνταξη jQuery για τις ίδιες πράξεις.
Εντάξει.
Αλλά αυτό δεν είναι τόσο σημαντικό εδώ είναι η πλευρά του προγράμματος περιήγησης πράγματα
αλλά μάλλον το γεγονός ότι έχουμε είχε καθαρότερο και καθαρότερο τρόπους
με την ουσιαστική διάθεση ότι το έργο κώδικα.
Εντάξει.
Οποιεσδήποτε ερωτήσεις;
[ΑΚΟΥΓΕΤΑΙ Παρατήρηση]
OK. Τώρα το μέρος διασκέδασης.
Έτσι, Node.js Γιατί;
Ποιος νοιάζεται;
Τι ξέρεις για το σήμερα;
Node.js, γιατί;
Henry [υποτίθεται ορθογραφία].
[ΑΚΟΥΓΕΤΑΙ Παρατήρηση]
Επαναφοράς μπαταρίας;
Τι - αυτό είναι ένα τέλεια κρεμάστρα γκρεμό
για το δεύτερο εξάμηνο του σήμερα.
Γιατί δεν πάμε και να ένα διάλειμμα 5 λεπτά εδώ,
υπάρχει ένα μισό καραμέλα μηχάνημα εκεί, αν θα
σαν κάποια καραμέλα χωρίς βάζοντας το ένα τέταρτο μέσα