[Powered by Google Translate] [Εβδομάδα 9, Συνέχεια] [David J. Malan - Πανεπιστήμιο του Χάρβαρντ] [Αυτό είναι CS50. - CS50.TV] 

Αυτό είναι CS50. Αυτό είναι το τέλος της εβδομάδας 9. Σας ευχαριστώ πολύ. Τέλος. Εβδομάδα 9. Το πήρα. Σήμερα συνεχίζουμε τη συζήτησή μας σχετικά με τον προγραμματισμό web με το βλέμμα στραμμένο προς το τελικό σχέδιο, όχι επειδή έχετε να κάνετε κάτι web-based για την τελική έργα, αλλά επειδή είτε για τελική έργα ή μετά CS50 αυτό είναι σίγουρα η κατεύθυνση προς την οποία σύγχρονο λογισμικό πρόκειται. Και όμως δεν είναι πραγματικά ένα εύκολο πράγμα. Στην πραγματικότητα, ένα από τα δυσκολότερα πράγματα που πρέπει να κάνετε είναι η πτυχή του σχεδιασμού. 

Για παράδειγμα, από το σχεδιασμό εννοούμε πάρει όντως τη διεπαφή χρήστη ή η εμπειρία του χρήστη δεξιά. Τολμώ να πω - και ξέρουμε από μια πρόσφατη σειρά πρόβλημα όταν μερικοί από εσάς προβλήθηκε κολικόπονος σας σχετικά με κάποιο κομμάτι του λογισμικού ή το υλικό που σας εξοργίζει, είτε στην πανεπιστημιούπολη ή απενεργοποίηση - υπάρχει πολλές περιοχές έξω εκεί, υπάρχει μια πολύ υλικό εκεί έξω, ότι το είδος του είναι χάλια. Αλλά η πραγματικότητα είναι ότι κάνει τα πράγματα που είναι εύκολο στη χρήση ακόμη ισχυρό είναι, ωστόσο, είναι μια πολύ δύσκολη πρόκληση. Έτσι για σήμερα ζήτησα από τον Ιωσήφ και τον Tommy να έρθεις μαζί μου εδώ έτσι ώστε να μπορούμε να έχουμε μια συνομιλία, τόσο σχετικά με το σχεδιασμό και τι είδους διαδικασίες της σκέψης θα πρέπει να αρχίσει να περάσει από το κεφάλι σας όταν σχεδιάζετε τελικά τα έργα σας, τις μελλοντικές σας προσπάθειες. Και στη συνέχεια, με τη βοήθεια του Tommy θα εξετάσουμε μερικές από τις λεπτομέρειες της υλοποίησης. Πώς μπορεί να έχετε κάποιο όραμα σε χαρτί ή στο μυαλό σας ότι μπορείτε στη συνέχεια να εκτελέσει programmatically χρησιμοποιώντας κάποια από τις τεχνολογίες και τις τεχνικές που έχουμε μόλις άρχισαν να μιλούν για, δηλαδή JavaScript και κάτι ακόμη νεότερος, δηλαδή AJAX, JavaScript ασύγχρονη. Αυτό σας επιτρέπει να δημιουργήσετε όλες τις πιο δυναμικές της διεπαφής χρήστη από γοητευτικός όλο και περισσότερα δεδομένα σταδιακά από ένα διακομιστή. Έτσι, θα δούμε ορισμένες από αυτές, καθώς και αποσπάσματα σήμερα. Ως μέρος, αν σας ενδιαφέρει σε συγκέντρωση στην επιστήμη των υπολογιστών minoring ή στην επιστήμη των υπολογιστών, γνωρίζουμε ότι αυτήν την Παρασκευή το μεσημέρι σε Maxwell Dworkin 221 θα υπάρχει εκδήλωση πίτσα όπου μπορείτε να μάθετε λίγο περισσότερα για την επιστήμη των υπολογιστών. Στο δρόμο έξω από την πόρτα σας σήμερα θα είστε σε θέση να πάρει μια ανεπίσημη οδηγός για CS στο Χάρβαρντ. Θα το βάλετε στα δοχεία απορριμμάτων έξω στο ύψος της μέσης έτσι ώστε αν θέλετε να αρπάξει αυτό και να μάθουν λίγο περισσότερα για την CS, που θα είναι εκεί για σας, όπως ήταν στην εβδομάδα 0. Επίσης, αν θα θέλατε να ενωθούν μαζί μας για μεσημεριανό γεύμα CS50 αυτή την Παρασκευή στις 1:15 μ.μ., κατευθυνθείτε προς cs50.net/lunch. Χωρίς άλλη καθυστέρηση, σας δίνω τη διδασκαλία τους συναδέλφους Joseph Ong. Γεια σας. [Χειροκροτήματα] Ευχαριστώ. Την πρώτη φορά που έμαθα για το σχεδιασμό ήταν σε μια κατηγορία που ονομάζεται εδώ CS179. 

Ο καθηγητής κατά τη στιγμή μας είπε την ιστορία για άλλη καθηγητής ο οποίος είχε πάει σε ένα ξενοδοχείο και χρησιμοποίησε τις στρόφιγγες. Μπορεί κάποιος να μου πει ποια είναι τα 2 κουμπιά στην αριστερή και δεξιά κάνει; [Φοιτητής] Ζεστό και κρύο. >> Ζεστό και κρύο. Καλή. Αυτό που περιμένουν κανονικά, έτσι δεν είναι; Αυτό καθηγητής μετά τη χρήση του βρύση θέλει να κάνει ένα ντους, και προχωρεί για να χρησιμοποιήσετε αυτό. Σκέφτεται την αριστερή και η δεξιά πλευρά είναι για ζεστό και κρύο, έτσι δεν είναι; Αλλά μπορεί κάποιος να μου πει ποια είναι αυτά πραγματικά να κάνουμε; Οποιαδήποτε χέρια; [Ακούγεται ανταπόκριση των φοιτητών] >> Μια πρόταση είναι; [Ακούγεται ανταπόκριση των φοιτητών] Θερμοκρασία >>; Έτσι, ένας από αυτούς ελέγχει τη θερμοκρασία και τα άλλα στοιχεία ελέγχου; >> [Φοιτητής] Η πίεση του νερού. Η πίεση του νερού. Καλή. Αυτό καθηγητής μπαίνει σε αυτό και, νομίζοντας ότι ελέγχουν ζεστό και κρύο, μετατρέπει το σωστό, που νομίζει ότι είναι για το ζεστό, σε όλη τη διαδρομή μέχρι επειδή θέλει να λάβουν ένα ζεστό ντους. Λοιπόν, αυτά δεν ταιριάζουν πραγματικά, έτσι παίρνει αυτό δεν είναι πολύ διασκεδαστική εμπειρία να είναι σε ένα κρύο ντους, και όλοι γνωρίζουμε τι αισθάνεται. Αυτό είναι ένα παράδειγμα ενός ελαττώματος σχεδιασμού. Τι εννοώ με αυτό είναι η προσδοκία του από τη βρύση δεν ταιριάζει με αυτό που βγήκε από το ντους, το οποίο είναι το είδος του ατυχές για αυτόν. Έτσι, αυτό είναι ένα παράδειγμα ενός ελαττώματος σχεδιασμού που συμβαίνει στην πραγματική ζωή. Αλλά βλέπουμε όλα τα είδη των άλλων, καθώς αυτά. Είμαστε πιθανόν να μην τους οπαδούς του συστήματος MBTA. Πρόκειται για ένα σύστημα μετρό στο Λονδίνο πραγματικότητα, η οποία λέει, "Αυτό το κουμπί δεν είναι σε χρήση." Γιατί είναι ακόμα εκεί; Γιατί ακόμη και φροντίδα; Όταν ήμουν παιδί, είναι η τεχνολογία καταλαβαίνω ένα στο σπίτι, κάθε φορά που ο υπολογιστής θα συντριβή, η μαμά μου θα έρθει σε μένα, δείχνοντάς μου την οθόνη και με ρωτούσαν τι συνέβη. 

Ακόμα δεν ξέρω τι σημαίνει αυτό. [Γέλια] Τι; [Γέλια] Μερικές φορές αισθανόμαστε σαν προγραμματιστές λογισμικού είναι ακριβώς συρτή μας. Καθώς οι χρήστες είμαστε όπως, "Τι συμβαίνει; Κάποιος να μας πει." Αυτό όλοι έρχεται κάτω σε ένα θέμα του σχεδιασμού. Σχεδιασμός, όπως μπορούμε να δούμε, δεν είναι καθαρά για την αισθητική, δεν είναι για το πώς φαίνονται τα πράγματα. Βλέπουμε εδώ ότι αυτό το μικρό pop-up εδώ φαίνεται πραγματικά πολύ ωραία. Έχει μια σκιά πτώση στο παρασκήνιο, δεν έχει σύνορα ακτίνες συμβαίνει. Είναι το είδος του αρκετά. Δεν είναι πολύ καλά σχεδιασμένο, γιατί δεν είναι πολύ φιλικό προς το χρήστη. Αυτή η μικρή pop-up που έρχεται δεν πραγματικά να μου δώσει οποιαδήποτε πληροφορία σχετικά με το τι συμβαίνει, δεν μου πεις τίποτα καθώς ο χρήστης σχετικά με το πώς να ανακτήσει από το σφάλμα. Θέλουμε να σκεφτούμε τα πράγματα ότι ο σχεδιασμός δεν είναι. Κατ 'αρχάς, δεν είναι αισθητική. Είναι, επίσης, δεν γέμιση app σας με τους τόνους των περιττών λειτουργικότητα. Αν είστε ένα ταϊλανδέζικο εστιατόριο, τότε μάλλον δεν θέλουν να είναι ένα οδοντίατρο την ίδια στιγμή. Και με Facebook Ερωτήσεις, όχι ότι πολλοί άνθρωποι που χρησιμοποιούνται και δεν ήταν πραγματικά στον πυρήνα του ό, τι έχτιζαν. Και γι 'αυτό είναι καλό να σκεφτούμε όχι τόσο για την ποσότητα των πραγμάτων ότι είστε σε θέση να την αίτησή σας, αλλά η ποιότητα και πώς θέλετε να κάνετε αυτή την εμπειρία χρήστη καλύτερα με πραγματικά βελτίωση μετά από αυτό που έχετε ήδη. 

Με λίγα λόγια, ο σχεδιασμός μας λέει τι πρέπει να οικοδομήσουμε. Για παράδειγμα, αν χτίζουμε κάτι που ας ψάξει τα πράγματα, όπως το Google, για παράδειγμα, θα πρέπει να κάνουμε τα πράγματα με έναν τρόπο που απαιτεί από το χρήστη να λαμβάνει πολλά κλικ για να φτάσετε στο τι θέλουν, ή θα πρέπει να το κάνουμε με έναν τρόπο, για παράδειγμα, με το Google Instant ή autocomplete η οποία μας επιτρέπει να πάρετε τα αποτελέσματα μας πιο γρήγορα; Μηχανικών περιλαμβάνει, όπως ο Tommy θα σας δείξει, στην πραγματικότητα το κτίριο. Υπάρχουν πολλά είδη του σχεδιασμού. Για παράδειγμα, εάν είστε οικοδόμηση κάτι να αναπτύξετε κάτι σε μια χώρα του Τρίτου Κόσμου όπου δεν υπάρχει ηλεκτρικό ρεύμα ή πολύ ότι πολύ την τεχνολογία, θα πρέπει να σχεδιάσουν ό, τι χτίζετε με τρόπο που να δίνει εύκολα πρόσβαση στους ανθρώπους εκεί. Αλλά τι είδους άλλες αποφάσεις του σχεδιασμού θα μπορούσε να υπάρχει ή θα μπορούσε να συμμετέχει σε κάτι τέτοιο; Ναι. Βλέπω ένα χέρι. [Ακούγεται ανταπόκριση των φοιτητών] Δικαίωμα >>. Ακριβώς. Η προσβασιμότητα είναι ένα πράγμα. Πολλοί άνθρωποι δεν σκέφτονται, "Τι γίνεται με τους χρήστες μου;" όπως και τα άκρα του φάσματος δύο. Έχω χρήστες που μπορεί να έχουν ειδικές ανάγκες που δεν σκέφτομαι και το μόνο που σκέφτομαι για το σχεδιασμό για το γενικό χρήστη. Το Διαδίκτυο είναι προσβάσιμο από όλους στις μέρες μας, και εγώ θα πρέπει να το σχεδιασμό για αυτούς τους ανθρώπους, καθώς και. Τι είδους από άλλες αποφάσεις του σχεδιασμού μπορεί να σας κάνει; Ναι. >> [Φοιτητής] Κόστος. Κόστος. Πολύ καλό. Ένα άλλο πράγμα που θα μπορούσαμε να βασίζουν τις αποφάσεις μας σχετικά με το σχεδιασμό είναι το κόστος. Αν είστε επιχείρηση, θέλετε να οικοδομήσουμε κάτι που δεν παίρνει πολύ το κόστος για την παραγωγή αλλά μπορεί να πωλήσει σε ιδιαίτερα υψηλό κόστος ή μπορεί να μας πάρει κάποιο κέρδος. 

Αυτά είναι όλα τα διαφορετικά είδη του σχεδιασμού, αλλά όταν χτίζουμε κάτι στο Διαδίκτυο ή όταν χτίζουμε κάτι που κατά πάσα πιθανότητα δεν κοστίζει τόσο πολύ να δημιουργηθεί τώρα, όπως εφαρμογές του Διαδικτύου - δεν χρειάζεται να ρίξει πολλά κεφάλαια σε αυτό για να κάνει κάτι που λειτουργεί πραγματικά - τι είμαστε περισσότερο ανησυχούν για είναι η εμπειρία του χρήστη. Καλούμε αυτόν τον χρήστη επίκεντρο του σχεδιασμού. Ουσιαστικά αυτό που επικεντρωμένος στο χρήστη σχεδιασμός περιλαμβάνει βάζοντας τον εαυτό σας είναι στα παπούτσια των χρηστών σας. Αν κάποιος υπογράφει επάνω για αυτό που είμαι οικοδόμηση, που έχουν προφανώς έρχονται σε συγκεκριμένη εφαρμογή μου με ένα στόχο στο μυαλό, με μια εργασία που θέλετε να ολοκληρώσετε. Και η δουλειά σας είναι όχι μόνο να τους βοηθήσει να ολοκληρώσει αυτό το έργο αλλά να τους βοηθήσει να ολοκληρώσει αυτό το έργο με τρόπο που να είναι αποτελεσματική, διαισθητικό, και, όπως είπε κάποιο πρόσωπο εκεί, προσβάσιμα. Τι σημαίνει απόδοσης; Αποδοτικότητα σημαίνει πόσο γρήγορα χρήστη μου ολοκληρώσει την αποστολή που μου περιβάλλον. Έχει λάβει πολλά κλικ για να πάρετε από το ένα μέρος στο άλλο; Είναι κουραστικό; Μήπως πρέπει να εκτελέσετε πολλές επαναλαμβανόμενες εργασίες; Θέλουμε να κάνουμε αυτή τη διαδικασία όσο το δυνατόν αποτελεσματικότερη έτσι ώστε να μην χρειάζεται να κάνουν αυτά τα είδη των πραγμάτων. Όσο για intuitiveness, δηλαδή, για παράδειγμα, εάν ένας χρήστης αναζητά διεπαφή μου, είναι εύκολο για αυτούς να πάρουν από τόπο σε τόπο; Είναι εύκολο για αυτούς να καταλάβω τι πρέπει να κάνετε κλικ στο interface μου προκειμένου να επιτευχθεί ο στόχος ή εργασία που θέλουν να επιτύχουν; 

Και τέλος, ως ένα άτομο είπε εκεί πέρα, η προσβασιμότητα είναι πολύ σημαντικό. [Αρσενικό ομιλητή] Έρχεται με την προσβασιμότητα για τα πράγματα όπως το όραμα, όπως το πώς μπορώ να σχεδιάσουν πραγματικά κάτι για κάποιον ο οποίος είναι τυφλός; Αχ. Για τους ανθρώπους που δεν μπορούν να δουν καθόλου, έχουμε κάτι που ονομάζεται αναγνώστες οθόνης. Αυτό που πρέπει να κάνουμε είναι θα πρέπει να κατασκευάσετε την ιστοσελίδα σας με έναν τρόπο ότι, για παράδειγμα, συγκεκριμένες τεχνολογίες αυτό που λέμε - Υπάρχουν πολλά πράγματα τώρα. Νομίζω ότι υπάρχουν προγράμματα ανάγνωσης οθόνης που ονομάζεται JAWS. Πολλά από αυτά τα πράγματα βασίζονται σε αυτό που αποκαλούμε κανόνες περιοχή προκειμένου να αναγιγνώσκονται στο χρήστη αυτό που είναι παρούσα στην σελίδα. Για εκείνους τους ανθρώπους που δεν μπορούν να δουν, θα πρέπει να βεβαιωθείτε ότι αυτά τα προγράμματα ανάγνωσης οθόνης μπορεί πραγματικά να πάρει το περιεχόμενο της σελίδας και μπορεί να δείξει πραγματικά τους χρήστες σας, αν δεν μπορείτε να δείτε, τουλάχιστον μπορείτε να καταλάβετε ακόμα το περιεχόμενο της σελίδας. Ναι. Εντάξει. Αρκετά μιλάμε για καλό σχεδιασμό. Ας μιλήσουμε για κακό σχεδιασμό. Αυτά είναι πράγματα που δεν πρέπει να κάνετε. Μπορεί κάποιος να μου πει για τις εμπειρίες τους με Craigslist και τι νομίζετε ότι δεν είναι τόσο μεγάλος για αυτό το σχέδιο; Ναι. >> [Φοιτητής] Νομίζω ότι υπάρχουν πάρα πολλές λέξεις σε μια περιοχή. Πάρα πολλές λέξεις, έτσι δεν είναι; Εντελώς συντριπτική. Θα έρθει σε αυτή τη σελίδα και είστε χαιρετίστηκε με ένα σωρό πράγματα εδώ αυτό δεν θα μπορούσε ακόμη και να σας πειράζει. Για παράδειγμα, ζείτε σε ένα κράτος που δεν αρχίζουν με το γράμμα. Ας πούμε ότι ζείτε στο Τέξας ή κάτι τέτοιο. 

Θα πρέπει να μετακινηθείτε προς τα κάτω στη σελίδα για να πάρει στη θέση που βρίσκονται. Είμαι από τη Βοστώνη, οπότε επιτρέψτε μου να δούμε στη Μασαχουσέτη. Πού είναι Μασαχουσέτη; Ω, είναι ακριβώς εδώ. Ω, είναι Βοστώνη. Εντάξει. Ας ρίξουμε μια ματιά στη Βοστώνη. [Γέλια] Αρκετά μεγάλη, έτσι δεν είναι; Awkward πράγματα εκεί πέρα. [Γέλια] Ας πούμε ότι ψάχνω κάπου για να ζήσουν. Πόσοι άνθρωποι έχουν πράγματι χρησιμοποιηθεί Craigslist; Τόνοι από εσάς. Υπάρχουν αρκετά κακές τρόποι για να εξετάσουμε αυτό το θέμα, αλλά ας ρίξουμε μια ματιά σε αυτό. Ποια είναι η διαφορά μεταξύ img και pic; Μπορεί κάποιος να μου πει; Πραγματικά υπάρχει καμία διαφορά. Σημαίνουν ακριβώς το ίδιο πράγμα, αλλά έχουν διαφορετικές ετικέτες για τους για κάποιο λόγο. Αν κάνω κλικ στο Έχει εικόνας, δεν συμβαίνει τίποτα στη σελίδα. Εγώ πραγματικά πρέπει να κάνετε κλικ πάλι Αναζήτηση για να συμβεί κάτι. Τι θα μπορούσε να είναι μια καλύτερη σχεδιαστική απόφαση που θα μπορούσε να γίνει εκεί; Αν είμαι κάνοντας κλικ σε αυτό το φίλτρο, εγώ κατά πάσα πιθανότητα θέλετε να φιλτράρετε από τη συγκεκριμένη δράση ή ότι η συγκεκριμένη κατηγορία. Έτσι, αντί να χρειάζεται να πατήσετε αναζήτηση και πάλι, θα μπορούσα απλά αυτόματα κάνει το φιλτράρισμα είδος του στυλ του Google, όπου το κάνουν αμέσως. [Malan] Αλλά μην αποτελεί, όπως έχουμε δει μέχρι στιγμής θα πρέπει να υποβληθεί σωματικά πατώντας Enter ή τουλάχιστον το πάτημα ενός κουμπιού; Όπως έχετε δει μέχρι τώρα, που έχετε να κάνετε κλικ στο Υποβολή για να κάνουν αυτά τα πράγματα. 

Αλλά, όπως ο Tommy θα σας δείξει σε ένα δεύτερο, στην πραγματικότητα υπάρχουν τρόποι για σας έτσι ώστε όταν κάνετε κλικ σε αυτό το πράγμα μπορεί να στείλει αυτόματα αυτό που λέμε μια αίτηση AJAX και να πάρετε πίσω τα δεδομένα και να φιλτράρετε τα αποτελέσματά σας αμέσως. Υπάρχουν τόνοι από τα πράγματα που είναι λάθος με αυτό το interface. [Malan] Μπορείτε να ψάξετε για το Cambridge; Υπάρχει κάτι ελαφρώς ανώμαλη εδώ, όπου μπορείτε νοιάζονται για Κέιμπριτζ ακόμη και παίρνετε Westford, Spring Hill, West Newton και τα παρόμοια. Μάλλον δεν είναι ιδανική. Μάλλον δεν >> ιδανικό. Πώς μπορεί να είμαι σε θέση να κάνουν την εμπειρία του χρήστη καλύτερη σε αυτή τη συγκεκριμένη σελίδα; Ναι. >> [Φοιτητής] Οδηγίες. Εντάξει. Οδηγίες σε ποιο είδος της αίσθησης; [Φοιτητής] Για παράδειγμα, ένα πράγμα για πρώτη φορά οι χρήστες που δεν γνωρίζουν καν τι είναι Craigslist ή δεν ξέρετε τι είστε υποτίθεται ότι πρέπει να κάνει. Δεξιά. Έτσι, εξηγώντας τι Craigslist είναι σε αυτή τη σελίδα είναι σημαντική. Μπορούμε να πούμε τι πραγματικά τους χρήστες αυτής της σελίδας είναι πραγματικά για. Αν είμαι επισκέπτονται μόνο αυτό, βλέπω ένα σωρό θέσεις. Εγώ δεν ξέρω καν τι σημαίνουν. Αλλά το πιο σημαντικό, απλά βλέπει αυτό το περιβάλλον, θυμάμαι είχα να μετακινηθείτε προς τα κάτω ένα σωρό πράγματα για να βρείτε μια συγκεκριμένη κοινότητα ότι πραγματικά νοιαζόταν για το θέμα αυτό. Τι είναι ένας γρηγορότερος τρόπος θα μπορούσα να το κάνουμε αυτό; Ναι. [Φοιτητής] Χωρίστε τα σε περιοχές ανατολικά, δυτικά. Εντάξει >>. Θα μπορούσα να τους χωρίζουν σε περισσότερες κατηγορίες, που θα μπορούσε να με βοηθήσει να καθορίσει ταχύτερη πώς να πάρει τη συγκεκριμένη θέση. [Φοιτητής] Βάλτε ένα drop-down λίστα. Δικαίωμα >>. Εντάξει. Θα μπορούσα να χρησιμοποιήσω ένα drop-down μενού, γιατί έχουμε ένα σταθερό σύνολο των πραγμάτων και θα μπορούσαμε να τους δείξουμε σε ένα μενού drop-down. Με αυτόν τον τρόπο δεν καταλαμβάνουν τόσο πολύ χώρο στην οθόνη. Αλλά ακόμα καλύτερο από αυτό, τι μπορούμε να κάνουμε; Ναι. >> [Ακούγεται ανταπόκριση των φοιτητών] >> Μπορείτε να πείτε ότι και πάλι; >> [Φοιτητής] πλαίσιο αναζήτησης. Ναι, ένα πλαίσιο αναζήτησης. Αυτό είναι μεγάλη. Αυτό που μπορούμε να κάνουμε είναι πραγματικά αν κοιτάξουμε πίσω στο διαφάνειες, πλαίσιο αναζήτησης. Autocomplete. Πολύ εύκολος τρόπος για να αναζητήσετε μέσα από τα αποτελέσματα που ξέρετε ότι είναι σε ένα σύνολο. Αν αρχίσετε να πληκτρολογείτε BO, απλά δείξτε μου όλα τα αποτελέσματα που έχουν BO μέσα από αυτά. Με αυτόν τον τρόπο θα μπορεί πολύ εύκολα να βρείτε το συγκεκριμένο που θέλω να πάω να αντί να χρειάζεται να μετακινηθείτε μέσα από αυτό το πραγματικά μεγάλο κατάλογο. 

Αυτά είναι όλα τα είδη των πραγματικά προσιτοί καρποί ότι κάποιος που εφαρμόζει Craigslist μπορεί πραγματικά να κάνει για να κάνουν την εμπειρία στο δικτυακό τόπο πολύ καλύτερα για συγκεκριμένο χρήστη τους. Εντάξει. Αρκετά μιλάμε για κακές ιστοσελίδες. Ας μιλήσουμε για το Facebook. Όταν το Facebook βγήκε, και ιδιαίτερα φωτογραφίες στο Facebook, υπήρχαν πολλές άλλες υπηρεσίες κατά το χρόνο που θα μπορούσαν να κάνουν ακριβώς τα ίδια πράγματα. Θα μπορούσαν να οργανώσετε τις φωτογραφίες σας σε άλμπουμ. Τι θα μπορούσατε να κάνετε είναι να μπορείτε να τις οργανώσετε σε ομάδες, καθώς και. Θα μπορούσατε να τους οργανώσει κατά ημερομηνία. Θα μπορούσατε να κάνετε όλα αυτά τα συγκεκριμένα πράγματα. Αλλά Ξέρει κανείς τι έκανε στο Facebook φωτογραφίες εκραγεί τη στιγμή που κυκλοφόρησε; Ναι. >> [Φοιτητής] Ετικέτες. Ετικέτες >>. Ακριβώς. Έχουμε εδώ Milo, ο οποίος είναι ο σκύλος μασκότ μας με την μπαντάνα CS50. Μπορείτε να δείτε ότι έχουμε αυτή τη δυνατότητα tagging στη μέση. Και τι έκανε στο Facebook φωτογραφίες τόσο ενδιαφέρον από την άποψη της χρηστικότητας είναι ότι πραγματικά επέτρεψε στους ανθρώπους μέσω αυτού να αναμείξει τους φίλους τους στις φωτογραφίες τους. Για το Facebook, καθώς η ιστοσελίδα τους είναι ιδιαίτερα κοινωνικά, είναι για την οικοδόμηση αυτού του είδους κοινωνική ατμόσφαιρα. Αυτό βελτίωσε την εμπειρία των φωτογραφιών πολύ περισσότερο επειδή θα μπορούσε πραγματικά να αρχίσουμε να λέμε, "Αυτές είναι συνδέσεις μεταξύ των ανθρώπων, και αυτοί είναι οι φωτογραφίες για τους ανθρώπους που πραγματικά νοιάζονται για. " Μέρος του είναι επίσης είδος ναρκισσισμού. Οι άνθρωποι ήθελαν να με ετικέτα σε φωτογραφίες και τέτοια πράγματα. Αν και αυτό δεν είναι απαραίτητα ένα καλό ανθρώπινο χαρακτηριστικό, την ίδια στιγμή που είναι με βάση τις καλές αποφάσεις για το σχεδιασμό επειδή οι άνθρωποι πραγματικά νοιάζονται για τα πράγματα όπως αυτό. Έτσι, αυτό είναι φωτογραφίες στο Facebook. 

Αλλά ας μιλήσουμε Facebook γενικότερα. Είμαι βέβαιος ότι πολλοί άνθρωποι εδώ έχουν απόψεις για το Facebook, και οι δύο καλές αποφάσεις για το σχεδιασμό και κακές αποφάσεις σχεδιασμού. Ας διέξοδο ή να είναι ευτυχισμένος. Έλα. Ξέρω ότι όλοι σας χρησιμοποιούν το Facebook. Κάποιος πρέπει να έχει κάτι κακό να πει ή κάτι καλό να πει για αυτό. Ναι. [Φοιτητής] Στην Επικαιρότητα Feed υπάρχουν πολλά πράγματα που δεν ενδιαφέρονται πραγματικά για. Η ροή ειδήσεων έχει δείξει πολλά πράγματα που ίσως δεν νοιάζονται για. Έχετε φίλους στο Facebook οι οποίοι δεν έχουν συναντηθεί για 2 ή 3 χρόνια και βλέπετε τα αποτελέσματα τα νέα τους μέχρι βρεθώ σε ζωοτροφές ειδήσεις σας και δεν ενδιαφέρονται πραγματικά γι 'αυτό. Το Facebook έχει γίνει πραγματικά μια προσπάθεια να κάνουν αυτό το καλύτερο, και που έχουν πραγματικά προσπάθησαν να πιέσουν σχετικά αποτελέσματα στην κορυφή της τροφοδοσίας ειδήσεων από τα τέλη έτσι ώστε να δείτε πραγματικά τα πράγματα από φίλους που έχουν σχέση με σας ή τους στενούς φίλους σας. Οτιδήποτε άλλο; Ναι. [Ακούγεται ανταπόκριση των φοιτητών] >> Μπορείτε να πείτε ότι και πάλι; [Φοιτητής] Οι διαφημίσεις είναι σχετικά διακριτικές. >> Με ποια έννοια; [Ακούγεται ανταπόκριση των φοιτητών] Δεν έχουν φως στην οθόνη, όπως και πανό. Εντάξει. Αυτό είναι καλό. Αν θυμάστε το Διαδίκτυο από τη δεκαετία του '90 - >> [Malan] ήμουν εκεί. >> Ήταν εκεί. [Γέλια] Ίσως να θυμάστε αναβοσβήνει υπόβαθρα GIFs, sparkly πράγματα, GeoCities είδος στυλ των πραγμάτων. Αυτό δεν είναι πραγματικά ένα παράδειγμα ενός καλού σχεδιασμού γιατί είναι πραγματικά αποσπούν την προσοχή από το περιεχόμενο. Ο δικτυακός τόπος του Γέιλ τέχνης που χρησιμοποιείται για να έχουν κινούμενες εικόνες GIF ως φόντο τους και εσείς δεν θα μπορούσε να διαβάσει τίποτα στη σελίδα, αλλά υποθέτω ότι κάποιος πραγματικά να μιλήσει τους και τώρα είναι λίγο διαφορετική. [Malan] Είναι πολύ καλύτερα τώρα. >> Είναι πολύ καλύτερα τώρα, όπως μπορείτε να δείτε. >> [Malan] Α, ναι. Ακριβώς μεγάλη, ακριβώς - Ναι. Εντάξει. 

Μέρος της είναι, επίσης, κάνει τη σελίδα σας πιθανώς πολύ μινιμαλιστικό και πολύ κατανοητή έτσι τα πράγματα σχετικά με τη ροή σελίδα με έναν τρόπο που είναι πολύ λογικό και δεν παίρνει με τον τρόπο του άλλου. Τι είδους από άλλα πράγματα είναι καλά για το Facebook ή κακό για το Facebook; Ας ρίξουμε μια συνομιλία του σχεδιασμού εδώ. Αχ. Πού; Ναι. [Φοιτητής] Το νέο σύστημα Timeline σας δίνει τη δυνατότητα να αναζητήσετε το προφίλ του ατόμου για το παρελθόν τους. Ooh, Timeline. Timeline είναι ένα μεγάλο πράγμα, διότι σας επιτρέπει να κοτσάνι τους φίλους σας πίσω όταν ήταν στο γυμνάσιο. Timeline είναι καλό, γιατί σας επιτρέπει να φιλτράρετε με περιεχόμενο πολύ πιο γρήγορα, σας επιτρέπει να βρείτε τα πράγματα που διαφορετικά θα είχαν λάβει μια πραγματικά πολύ χρόνο για να βρουν μόλις κύλιση προς τα πάνω και προς τα κάτω, επάνω, επάνω, επάνω, επάνω, επάνω, σαν να πηγαίνει πίσω στο χρόνο. Στη συνέχεια, όμως, υπάρχει επίσης ένα είδος μειονέκτημα σε ότι αφορά την εμπειρία του χρήστη. Τι θα μπορούσε να είναι; Μεγάλη λέξη που αρχίζει με P-R. >> [Φοιτητής] Προστασίας Προσωπικών Δεδομένων. >> Προστασίας Προσωπικών Δεδομένων, έτσι δεν είναι; Προστασία προσωπικών δεδομένων είναι ένα τεράστιο ζήτημα εμπειρία του χρήστη. Αυτό είναι ένα από τα πράγματα που μου αρέσει περισσότερο για το Facebook σήμερα. [Γέλια] [Malan] Όπως κάνω τώρα. David δεν είχε συνειδητοποιήσει αυτό πραγματικά συνέβη μέχρι χθες. Έτσι, τώρα ξέρει ότι κάθε φορά που τον συνομιλήσετε ξέρω ότι είναι ήδη με αγνοεί. [Malan] Το περίεργο ήταν μέρος ήμουν αγνοώντας τον στην πραγματικότητα, και δεν ήξερα ήξερε ήμουν να τον αγνοεί. [Γέλια] Η ιδιωτικότητα είναι ένα τεράστιο θέμα. Μπορεί κανείς εδώ να μου πει τι μπορεί να είναι κακό για την προστασία της ιδιωτικής ζωής στο Facebook εκτός από το γεγονός ότι κάνει τέτοια πράγματα; Τι είναι ιδιαίτερα δύσκολο να γίνει με σεβασμό της ιδιωτικής ζωής στο Facebook; Αυτό το είδος του είναι ο κορυφαίος ερώτηση. Ναι. >> [Φοιτητής] Απόκρυψη φωτογραφίες σας από ορισμένους ανθρώπους. Δεξιά. Ακριβώς, για να κρύψει τις φωτογραφίες σας από ορισμένους ανθρώπους. Έχουν αυτό το μικρό, μικρό κουμπί στην πάνω δεξιά που σας επιτρέπει να αλλάξετε την ιδιωτική ζωή του μια φωτογραφία. Οι επιλογές της ιδιωτικής ζωής τους ποικίλλει σημαντικά μεταξύ των διαφόρων ειδών των μενού. 

Έχουν πάρει πολύ καλύτερα γι 'αυτό πρόσφατα, αλλά χρησιμοποιείται για να είναι η περίπτωση ότι κάθε φορά που ήθελαν να εμποδίσουν τους φίλους σας από το να βλέπουν φωτογραφίες, θα πρέπει να περάσουν από μια πολύ περίπλοκη διαδικασία 5-βήμα, όπως είναι, επιτρέψτε μου κλικ σε αυτό το σύνδεσμο, τώρα επιτρέψτε μου και πάλι κλικ, επιτρέψτε μου και πάλι κλικ, επιτρέψτε μου να καθορίσετε ποια άνθρωποι δεν μπορούν να δουν τις φωτογραφίες μου. Αυτό δεν είναι ιδιαίτερα καλή από την πλευρά του Facebook γιατί τόσα πολλά για την εμπειρία του χρήστη είναι στην πραγματικότητα δίνοντάς τους την ελευθερία να ελέγχουν ό, τι οι άνθρωποι μπορούν να δουν. Καλούμε αυτόν τον έλεγχο και την ελευθερία των χρηστών. Αν δεν είστε αφήσει οι χρήστες σας ότι με έναν τρόπο που να είναι αποτελεσματική και διαισθητική, τότε εμπειρία του χρήστη σας δεν είναι πραγματικά τόσο μεγάλη σε όλα.  Θα σας παιδιά ήθελα να πω κάτι για το Facebook; Πώς μπορώ να το απενεργοποιήσω; [Ong] Δεν μπορείτε να την απενεργοποιήσετε, και αυτό είναι ένα τεράστιο ελάττωμα χρηστικότητα από την πλευρά του Facebook. Αυτό το χαρακτηριστικό - που πραγματικά κοίταξε σε αυτό χθες - είναι είτε ότι δεν μπορείτε να το κάνετε ή να είναι θαμμένος κάπου πολύ, πολύ βαθιά στις εσοχές του Facebook, γιατί δεν μπορώ να καταλάβω πώς να απενεργοποιήσετε αυτήν τη λειτουργία σε όλα. [Malan] Αλλά μερικές φορές αυτές οι αποφάσεις δεν είναι προφανής επειδή εσείς μας έχετε δώσει πολλές χρήσιμες πληροφορίες για διάφορες εφαρμογές CS50 και ιστοσελίδες ότι η πορεία χρησιμοποιεί. Εμείς δεν έχουν εφαρμόσει όλα αυτά τα αιτήματα και τις προτάσεις. 

Μέρος αυτό είναι για να πάρει τόσα πολλά αιτήματα ότι είναι μια συνάρτηση του χρόνου, αλλά μερικές φορές κάνουμε απλά μια συνειδητή απόφαση, όπως, "Σας ευχαριστώ για την πρόταση, αλλά διαφωνούμε." Τόσο πώς μπορείτε πραγματικά να αποφασίσει τι πρέπει να κάνετε αν οι χρήστες σας νομίζετε ότι πρέπει να κάνετε κάτι ακόμα και αν δεν είναι απαραίτητο; Είναι μια λεπτή ισορροπία ανάμεσα στην πραγματικότητα να ακούτε τι λένε οι χρήστες σας και έχει πραγματικά κάποιο είδος της γραμμής που λέτε, "Εμείς δεν πρόκειται να κάνουμε ό, τι λένε αυτοί οι χρήστες." Και κυρίως, νομίζω ότι υπήρχε ένα απόσπασμα από τον Henry Ford, που συνοψίζει την μέχρι αρκετά καλά. "Αν είχα ρωτήσει τους ανθρώπους τι ήθελαν, θα είχαν είπαν ότι ήθελαν γρηγορότερα άλογα." Μπορεί κανείς να ταξινομήσετε δώσουμε έμφαση, εκτός από ό, τι ότι πραγματικά σημαίνει απόσπασμα; Δεν είναι μόνο ότι οι χρήστες ξέρουν τι θέλουν, αλλά είναι περισσότερο ότι - [Φοιτητής] Δεν ξέρω τι είναι δυνατόν. Εν μέρει δεν ξέρουν τι είναι δυνατόν. Tease ότι εκτός λίγο περισσότερο. Τι εννοείτε με αυτό; [Ακούγεται ανταπόκριση των φοιτητών] Αυτό είναι καλό. Αυτό που νομίζω ότι προσπαθούμε να πούμε εδώ είναι ότι οι άνθρωποι ξέρουν τι θέλουν. Θέλουν γρηγορότερα άλογα. Αυτό που πραγματικά θέλουν είναι η δυνατότητα να κινηθεί πιο γρήγορα, αλλά δεν ξέρουν πραγματικά το μέσο με το οποίο για να επιτευχθεί αυτό. Όταν έρθει στους χρήστες σας και τους χρήστες σας να σας πω κάτι και να σας πω, «Θέλουμε αυτά τα χαρακτηριστικά και αυτά τα χαρακτηριστικά και αυτά τα χαρακτηριστικά," δεν θέλετε να σκεφτείτε κατ 'ανάγκην, "Επιτρέψτε μου να προχωρήσει "Και να εφαρμόσουν αυτό που ρητά λένε," αλλά τι θέλετε να σκεφτούμε είναι, "Τι είδους ιδέες μπορώ να πάρω από αυτό;" Τι πραγματικά θέλουν; 

Και από εκεί ό, τι μπορείτε να κάνετε είναι να σχεδιάσει κάτι που ικανοποιεί τα αιτήματα αυτά αλλά όχι κατ 'ανάγκη με τον τρόπο που ο χρήστης αναμένει ότι θα ικανοποιηθεί. Έτσι, για κάτι σαν τελικός έργα, σε πολύ πραγματικούς όρους, τι είναι ένα χρήσιμο ευρετική όταν πρόκειται να κάνει κάτι καλύτερο, ειδικά αν ο σχεδιαστής έχει αυτή την αλαζονεία γι 'αυτόν το οποίο μπορείτε είδους ξέρετε τι είναι καλύτερο, μπορείτε να πάρετε είσοδο από τους χρήστες σας, αλλά πώς μπορείτε πραγματικά να πάει για να πάρει ότι η ανατροφοδότηση; Στην τελική έργα, πολύ συγκεκριμένα, τι παράγει τα βέλτιστα αποτελέσματα εδώ; Τι παράγει τα βέλτιστα αποτελέσματα - και θα πάω πάνω από αυτό σε ένα δεύτερο - είναι η διαδικασία της ανάπτυξης και στη συνέχεια τον έλεγχο και στη συνέχεια την επανάληψη. Τι εννοώ με δοκιμή είναι συνήθως όταν σχεδιάζετε κάτι νομίζετε ότι είναι αρκετά καλή, όπως, «Είμαι τόσο μεγάλο σχεδιαστή. Όλοι πρόκειται να αγαπούν αυτό." Και τότε το βάλετε εκεί έξω και οι άνθρωποι πραγματικά δεν αρέσει για κάποιο λόγο. Τι έχετε να κάνετε είναι να έχετε να πάρετε τα μέρη των πραγμάτων που οι άνθρωποι κάνουν σαν και αναδιοργανώσουμε τα πράγματα που οι άνθρωποι δεν τους αρέσει. Ακούγεται σαν μια πολύ προφανής διαδικασία, αλλά αυτή η διαδικασία συνεχώς επανάληψη πάνω από ό, τι έχετε ήδη κατασκευαστεί είναι μια διαδικασία που σας βοηθά να όχι μόνο βελτιώσετε τις ικανότητές του σχεδιασμού σας, αλλά και σας βοηθά να βελτιώσετε το σχεδιασμό έτσι ώστε οι άνθρωποι να εκτιμήσουν πραγματικά το προϊόν σας, ακόμη περισσότερο από ό, τι έκαναν πριν. 

Θα πάω σε πιο συγκεκριμένα παραδείγματα για το τι μπορείτε να κάνετε στην πραγματικότητα. Ως ένα είδος τελευταίο παράδειγμα ενός προϊόντος, ας ρίξουμε μια ματιά στο καγιάκ. ΚΑΓΙΑΚ όταν βγήκε ήταν πολύ, πολύ δημοφιλής. Μπορεί κανείς να μαντέψει γιατί; Ποια είναι τα είδη των πραγμάτων που σας αρέσει γι 'αυτό, αν έχετε χρησιμοποιήσει ή ποια είναι τα είδη των πραγμάτων που δεν σας αρέσουν; Ναι. >> [Ακούγεται ανταπόκριση των φοιτητών] >> Εντάξει. Αυτό είναι μέρος του έχει αφήσει ο χρήστης να έχει ένα ερώτημα που είναι πιο επεκτατική από μια πολύ περιοριστική, όπως, "Θα πρέπει να επιλέξετε την ημερομηνία έναρξης σας "Και θα πρέπει να επιλέξετε την ημερομηνία λήξης." Στην πραγματικότητα, σας επιτρέπει να είναι ευέλικτο γι 'αυτό και σας δίνει όλες τις πτήσεις στην εν λόγω περιοχή. Οτιδήποτε άλλο; [Φοιτητής] Αυτά περιλαμβάνουν τα τέλη στην τιμή. Κάνουν περιλαμβάνουν τις αμοιβές των τιμών. Οι φόροι και τα πράγματα πραγματικά να πάω κατευθείαν σε αυτή την τιμή στην επάνω αριστερή έτσι δεν είστε παρασυρθείτε ώστε να σκέφτεται ότι είστε πραγματικά πληρώνουν για μια πτήση 240 δολάρια όταν είναι πραγματικά $ 330. Οτιδήποτε άλλο; Ναι. [Ακούγεται ανταπόκριση των φοιτητών] Δεν είμαι σίγουρος εάν πραγματικά σας επιτρέπουν να το κάνουμε αυτό. Μπορεί να κάνω λάθος. Αυτό θα μπορούσε να είναι ένα ενδιαφέρον πράγμα, αν θέλετε να βάλετε περισσότερο βάρος σε συγκεκριμένα φίλτρα έτσι ώστε να ωθεί τα αποτελέσματα που σχετίζονται με αυτό το φίλτρο προς την κορυφή. Αλλά μπορεί κάποιος να μου πει τι είναι τόσο ειδικό σχετικά με αυτό αριστερή πλευρά; Πώς παραδοσιακά αναζητήσετε μια πτήση σε μια υπηρεσία παροχής Internet πριν από αυτό; 

Ναι. >> [Ακούγεται ανταπόκριση των φοιτητών] >> Μπορείτε να πείτε ότι - [Φοιτητής] Κάθε αεροπορική εταιρεία. Ναι >>. Κάθε αεροπορική εταιρεία έχει τη δική του ιστοσελίδα. Αυτό εδραιώνει τα πράγματα. Και; [Φοιτητής] Ξέρεις ακριβώς τι ώρα φεύγεις. Ξέρεις ακριβώς τι ώρα φεύγεις, αλλά σχετίζονται με τα φίλτρα ειδικότερα. Επιτρέψτε μου να σηκώσει ΚΑΓΙΑΚ. Θεέ μου, pop-ups. Κακή εμπειρία του χρήστη. Τι συμβαίνει όταν μετακινήσετε αυτό το ρυθμιστικό; [Φοιτητής] Αυτόματες ενημερώσεις. >> [Ong] Αυτόματες ενημερώσεις. Αυτό είναι κάτι που είναι πολύ σημαντικό. Πριν από αυτό, κάθε φορά που ήθελε να αναζητήσετε μια πτήση, θα έπρεπε να βάλει στη θέση εισόδου σας, την τοποθεσία σας έξοδο, πατήστε το πλήκτρο αναζήτησης, θα επεξεργάζεται και δείχνουν ότι τα αποτελέσματά σας. Αν θέλετε να αλλάξετε το ερώτημά σας, θα πρέπει να πατήσετε δύο φορές πίσω, εισέλθει σε ένα νέο ερώτημα από το μηδέν, και στη συνέχεια να το κάνουμε ξανά και ξανά. Το συμπαθητικό πράγμα για κάτι τέτοιο είναι ότι χρησιμοποιεί ένα πολύ [ακατάληπτο] πράγμα στη μέση. Κάθε φορά που κάνουμε κάτι τέτοιο, θα πυροβολεί από ένα αίτημα και επιστρέφει όλα τα αποτελέσματα αμέσως. Αυτού του είδους η άμεση ανατροφοδότηση είναι κάτι που έκανε δημοφιλές ΚΑΓΙΑΚ γιατί είναι πολύ εύκολο για μένα να αλλάξει μόνο ερώτημα μου και να καταλάβω τα πράγματα που είναι γύρω από ένα συγκεκριμένο εύρος χωρίς να χρειάζεται να πάει μπροστά και πίσω, εμπρός και πίσω, εμπρός και πίσω. Έτσι, αυτά είναι όλα τα είδη των πραγμάτων που θέλετε να σκεφτείτε όταν είστε σχεδιασμό ιστοσελίδας σας. Πώς μπορώ να το καθιστούν πολύ αποδοτικό για τους χρήστες μου να περάσει ό, τι εργάζεστε και να πάρει την τελική στόχο τους το συντομότερο δυνατόν; [Malan] Και στο σημείο Ιωσήφ νωρίτερα σχετικά με τους χρήστες δεν είναι απαραίτητο να γνωρίζουν τι θέλουν, με βάση αυτά που εσείς τώρα ξέρετε για HTML και έχετε πλαίσια ελέγχου, κουμπιά επιλογής, επιλέξτε μενού, πεδία εισαγωγής και τα παρόμοια, πώς θα εφαρμόσουν την έννοια του να πάρει μια ώρα έναρξης για μια πτήση; 

Ποια από αυτές τις διαφόρων μηχανισμών UI θα χρησιμοποιήσετε; Αν γνωρίζετε ακριβώς το ποσό της HTML που διδάχθηκε πριν και ξέρετε οι είσοδοι είναι κουμπιά επιλογής, πλαίσια ελέγχου, drop-down, και στη θέση εισόδου, τι θα φυσική επιλογή σας ήταν για να πάρει τις ημερομηνίες; [Φοιτητής] εισόδου. Είσοδος >>. Ή ίσως ακόμη και ένα drop-down με όλες τις ημερομηνίες, έτσι δεν είναι; Έτσι, με πιο περίπλοκους μηχανισμούς UI, όπως αυτό στην αριστερή πλευρά που μπορείτε να εφαρμόσετε, μπορείτε να κάνετε αυτή τη διαδικασία πολύ πιο έξυπνο με ένα ρυθμιστικό επειδή ο χρόνος είναι συνεχής, και οι άνθρωποι συνήθως δεν σκέφτονται από την άποψη της διακριτά τμήματα. Εντάξει. Τελευταία πράγμα. Δέκα heuristics χρηστικότητα. Όλα τα πράγματα που μίλησε για πιθανώς εμπίπτουν σε μία από αυτές τις κατηγορίες. Αν πάτε σε αυτόν τον σύνδεσμο, που οι ιστοσελίδες θα αναρτηθούν στο διαδίκτυο, θα είστε πραγματικά να είναι σε θέση, όπως εσείς το σχεδιασμό ιστοσελίδα σας, κρατήστε αυτά τα heuristics στο μυαλό και οι κανόνες του αντίχειρα. Για τα σχέδια σας, τι σας προτείνω να το κάνετε με σκοπό το σχεδιασμό app σας καλύτερα είναι να κάνουμε πρωτοτύπων χαρτί πρώτα. Όταν σκέφτεστε για την αίτησή σας, πολύ γρήγορα σκιαγραφήσει τι θέλετε να μοιάζουν με και βεβαιωθείτε ότι όλα τα κουτιά τοποθετημένα με τέτοιο τρόπο που είναι πολύ διαισθητική για το χρήστη να χρησιμοποιήσει και δείχνουν ακόμα και τα πρωτότυπα χαρτί στους φίλους σας και να αρχίσετε ομάδες εστίασης. Μόλις πάρει 2 ή 3 άτομα μαζί και να τους ζητήσει απλά να πατήσετε σε αυτά τα πρωτότυπα χαρτί, και να τους δείξουμε νέες οθόνες για να δουν αν πραγματικά καταλαβαίνουν τι συμβαίνει. 

Τι θέλετε να κάνετε είναι να τους δώσουμε ένα έργο, το βασικό κίνητρο του έργο, και απλά να τους δώσουμε το app και να τους αφήσουμε να το χρησιμοποιήσετε. Να μην τους δώσουμε οδηγίες πέρα ​​από αυτό. Θέλετε πραγματικά να τους αφήσουμε να αλληλεπιδρούν με το app σας με έναν τρόπο που σας επιτρέπει να δείτε πώς θα το χρησιμοποιήσετε αν δεν στέκεται δίπλα τους. Και αυτό είναι πολύ σημαντικό. Αυτό θα σας δώσει πολλές ιδέες ώστε να είναι άνθρωποι που να πάρει γύρω από συγκεκριμένα πράγματα με έναν τρόπο που δεν είχα την πρόθεση να; Είναι αυτοί που χρησιμοποιούν ιδιαίτερα οι μηχανισμοί UI στην οθόνη με έναν τρόπο που είναι το είδος του Hacky; Δεν είχα την πρόθεση τους να το κάνουν με αυτόν τον τρόπο. Και μόλις τελειώσετε με αυτό, ό, τι θέλετε να κάνετε; Βράχια του σχεδιασμού σας, έτσι δεν είναι; Τι θέλετε να κάνετε είναι να θέλετε να αναπτύξετε και στη συνέχεια, κάντε αυτή τη διαδικασία ξανά από την αρχή. Έτσι, το δείχνουν στους φίλους στιγμή που θα έχετε αναπτύξει, να το δοκιμάσετε, την ανάπτυξη, τη δοκιμή, την ανάπτυξη, τη δοκιμή, επαναλήψεις, και επάνω και προς τα εμπρός. Design είναι μια επαναληπτική διαδικασία πολύ προς αυτή την κατεύθυνση. Μπορείτε πραγματικά να χτίσει κάτι και στη συνέχεια να συνειδητοποιήσουν τα πράγματα γι 'αυτό ότι δεν έχετε συνειδητοποιήσει πριν και να πάει πίσω και να βελτιωθεί από αυτό. Τώρα, ως προς το μέρος της ανάπτυξης, αυτό είναι ό, τι ο Tommy πρόκειται να σας δείξει μετά το διάλειμμα και πώς θα μπορούσε να είναι σε θέση να εφαρμόσει κάτι σαν αυτόματη συμπλήρωση με έναν τρόπο που είναι αρκετά απλή. [Malan] Όπως Tommy στήνει εδώ, μια ερώτηση τότε. Πολλές από τις πρώτες ιστοσελίδες - και όταν ο Ιωσήφ είπε στυλ της δεκαετίας του 1990 δικτυακού τόπου, ήταν υλοποιήσεις όπου αν θέλετε να επιλέξετε μια ώρα έναρξης και μια ώρα λήξης, ειλικρινά, πίσω στην ημέρα, ακόμη και σε ορισμένες ιστοσελίδες σήμερα, ο τρόπος που το κάνουμε αυτό είναι να επιλέξετε μια ώρα από το drop-down, επιλέγετε λεπτά από το drop-down, ίσως μπορείτε να επιλέξετε ΠΜ, ΜΜ, και στη συνέχεια να το κάνεις αυτό 3 φορές. Και έτσι με 6 κλικ και ίσως κάποια κύλιση χρήστης μπορεί να σας προσφέρει πραγματικά κάποια ημερομηνία ή / και χρονικό εύρος με αυτή την έννοια. 

Έτσι, σίγουρα υποβέλτιστη ακόμη και μέχρι στιγμής έχουμε δει δεν εκφραστικές δυνατότητες σε οποιαδήποτε από τις γλώσσες που είδαμε να κάνει κάτι πιο σέξι όπως αυτό το ρυθμιστικό του χρόνου έναρξης και ώρα λήξης. Αλλά αν νομίζετε ότι πίσω με την εβδομάδα 0, όταν μιλήσαμε για Scratch, και εκεί δεν υπήρχαν widgets που έκανε ακριβώς ορισμένα πράγματα. Μπορείτε πραγματικά είχε μόνο αυτά τα βασικά, όπως βρόχους και τις προϋποθέσεις και τα παρόμοια. Έτσι, το είδος ακριβώς σκέφτεται πολύ αφηρημένα τώρα, ανεξάρτητα από τα στοιχεία της HTML, τι πραγματικά συμβαίνει με κάτι σαν αυτό το χρόνο έναρξης και λήξης ρυθμιστικό του χρόνου; Όταν μετακινήστε το ποντίκι μου και κάνω κλικ σε αυτό το μικρό σύμβολο καρότο στο αριστερό και αρχίστε να τραβάτε, προγραμματισμού, τι είναι αυτό που θέλετε να είναι σε θέση να εφαρμόσει για να συμβεί αυτό; Τι ερωτήσεις, τι Boolean εκφράσεις θέλετε να είναι σε θέση να ζητήσει; Τι πραγματικά συμβαίνει; Sammy; [Φοιτητής] Πού είναι η θέση του δρομέα; Καλή >>. Όπου είναι η θέση του δρομέα; Αυτό ήταν κάτι που χρειαζόμασταν για να εκφράσουμε πίσω στο Scratch, αν ήταν με βάση τη θέση ή ακόμη και το χρώμα ή τα παρόμοια. Ίσως να θυμάστε πάντα τόσο εν συντομία τη Δευτέρα υπήρχαν όλα αυτά τα πράγματα που ονομάζονται γεγονότα στον κόσμο του Web, και έτσι υπάρχει πράγματα όπως onclick και onkeypress και onkeyup και onmouseover και onMouseOut. Έτσι συνειδητοποιούμε ότι ακόμη και αυτά τα πράγματα που έχουμε ήδη λάβει ως δεδομένο στο Web με sites όπως το Facebook και το Gmail, ακόμα κι αν δεν έχετε ιδέα πώς θα εφαρμοστούν ενδεχομένως ότι επειδή δεν υπάρχει τίποτα σαν αυτό, ακόμη και σε διάλεξη Πρόβλημα ή Set 7, συνειδητοποιούν ότι με αυτές ακριβώς τις ίδιες βασικές αρχές, HTTP και με τις παραμέτρους και GET και POST, με τις βασικές HTML εισόδους που έχουμε εξετάσει μέχρι στιγμής και σε μια στιγμή με τις προγραμματικές μηχανισμούς που του Tommy για να εισαγάγει μπορείτε να αρχίσετε να εκφράσουν τον εαυτό σας ακριβώς όπως κάνατε στην εβδομάδα 0 με πολύ διαισθητικά μεταφορά και απόθεση. 

Έτσι, με ότι είπε, Tommy MacWilliam και κάποια νέα κομμάτια του παζλ για μας για Web. Εντάξει. Το όνομά μου είναι ο Tommy και είμαι πρόκειται να μιλάμε για το JavaScript. Ακριβώς μια αποκήρυξη: Είμαι της γνώμης ότι το JavaScript είναι η καλύτερη γλώσσα προγραμματισμού σε όλο ολόκληρο τον κόσμο. Υπάρχουν πολλοί άνθρωποι που διαφωνούν μαζί μου, αλλά αυτό είναι απλά εκπληκτικό. Μόλις επιστρέψετε στο C, αν έχετε να γράψετε C για άλλη κατηγορία ή κάποιες άλλες γλώσσες, είναι ακριβώς πραγματικά απογοητευτικό σε όλες τις χαμηλού επιπέδου λεπτομέρειες θα πρέπει να κολλήσουμε μέσα Έτσι, εάν είστε πάντα αίσθημα θλίψης για το πώς ενοχλητικό C είναι να γράψει, πήγαινε πίσω, γράφουν κάποια JavaScript. Είναι νιρβάνα. Θα αισθανθείτε πολύ καλύτερα για την κακή ημέρα σας. Ένα μεγάλο μέρος της μαγείας του JavaScript προέρχεται από την ικανότητά του να χειριστεί τα πράγματα που είναι ήδη στη σελίδα. Όταν γράψαμε ένα PHP script μας, που εκτελέστηκαν στο διακομιστή, και τελικά ότι η PHP script έξοδο πιθανώς κάποια HTML. Ότι η HTML εστάλη στον πελάτη, και στη συνέχεια, αυτό ήταν. Αν η PHP ήθελε να προσθέσετε ένα κουμπί σε μια σελίδα, για παράδειγμα, δεν μπορεί πραγματικά να το κάνουμε αυτό. Θα πρέπει να καταστεί ένα εντελώς νέο αρχείο HTML και να στείλει ότι στο πρόγραμμα περιήγησης. Με JavaScript γνωρίζουμε ότι μπορούμε να ενημερώσει τα πράγματα ενώ είναι ήδη στη σελίδα, και γι 'αυτό μπορούμε να παρέχουμε πολύ πιο άμεση ανατροφοδότηση, η οποία θα βελτιώσει πραγματικά την εμπειρία του χρήστη στην ιστοσελίδα μας. Απλά μια γρήγορη ανακεφαλαίωση του επιλογείς JavaScript. Γνωρίζουμε ότι όταν κατεβάσετε μια σελίδα HTML, η οποία πρόκειται να εκπροσωπηθεί στο DOM. 

Το DOM είναι να θυμάστε ακριβώς αυτό το μεγάλο δέντρο όπου τα στοιχεία που αφορούν σε αυτό το μεγάλο ιεραρχία. Όταν δουλεύαμε με βάσεις δεδομένων σε PSET 7, ένα από τα πρώτα πράγματα που χρειάζεται να ξέρετε πώς να το κάνουμε ήταν ερωτήματα στη βάση δεδομένων. Έχουμε αυτό το μεγάλο τραπέζι των χρηστών, και μερικές φορές θέλουμε απλώς να πούμε, "Θέλω μόνο μερικά από αυτούς τους χρήστες που ταιριάζουν με κάποια κατάσταση." Ομοίως, όταν έχουμε το DOM χρειαζόμαστε κάποιο τρόπο επερωτήσεις αυτό. Χρειαζόμαστε κάποιο τρόπο του λέγοντας, «Θέλω όλα τα κουμπιά που μοιάζουν με αυτό "Ή όλες τις εικόνες στη σελίδα." Και αυτές οι επιλογείς μας επιτρέπουν να το κάνουμε αυτό. Έτσι απλά μια γρήγορη ανακεφαλαίωση. Αυτή η πρώτη εδώ, αυτό # υποβάλει, τι είναι ότι θα επιλέξετε; Θυμάται κανείς; [Ακούγεται ανταπόκριση των φοιτητών] >> Ναι, ακριβώς. Αυτό πρόκειται να επιλέξετε ένα στοιχείο στη σελίδα που έχει ένα αναγνωριστικό του υποβάλει. Και, έτσι ώστε hash tag λέει ότι αυτό επιλογέα πρόκειται να συνεργαστεί με ταυτότητες. Τι θα λέγατε για το δεύτερο, αυτό. Κέντρο, τι θα επιλέξετε ότι; Ναι. >> [Φοιτητής] Class. Ακριβώς >>. Αυτό είναι τώρα πρόκειται να επιλέξετε ανά κατηγορία. Η διαφορά μεταξύ ταυτότητας και την κατηγορία εδώ είναι γενικά το ID πρέπει να είναι μοναδικό μέσα σε οποιοδήποτε χώρο ψάχνετε πάνω. Έτσι, αν ψάχνατε για μια ολόκληρη ιστοσελίδα, που πραγματικά θα πρέπει να έχουν μόνο 1 στοιχείο με την ταυτότητα ορισμένων, οπότε σε αυτή την περίπτωση να υποβάλει. Με τις τάξεις, από την άλλη πλευρά, μπορούμε να έχουμε περισσότερα από 1 στοιχείου στην ίδια σελίδα με την ίδια τάξη. Αυτό θα μπορούσε να είναι χρήσιμο για λέγοντας ότι θέλετε να επιλέξετε όλα όσα επικεντρώνεται στην σελίδα και όχι μόνο 1 πράγμα. 

Και τέλος, αυτό το τελευταίο εδώ είναι λίγο πιο περίπλοκη, αλλά τι είναι αυτή η μετάβαση να επιλέξετε από το DOM; [Ακούγεται ανταπόκριση των φοιτητών] >> Τι είναι αυτό; [Φοιτητής] Ό, τι είναι μια ετικέτα. >> Έχουμε 2 μέρη εδώ. Το δεύτερο μέρος θα πω ότι θέλετε να επιλέξετε αυτές τις ετικέτες με μια ετικέτα της εισόδου, έτσι ώστε κάθε στοιχείο που είναι μια ετικέτα εισόδου. Αλλά δεν θέλω να επιλέξετε μόνο το σύνολο των εισροών επειδή κάτι σαν ένα κουμπί submit θα μπορούσε να είναι μια είσοδος και κάτι σαν ένα κουτί κειμένου θα μπορούσε να είναι μια είσοδος. Έτσι, με αυτές τις αγκύλες λέω θέλω μόνο να επιλεγούν εκείνα τα στοιχεία που είναι του τύπου κειμένου. Κάπου στην ετικέτα HTML μου έχω ένα χαρακτηριστικό που ονομάζεται τύπος, και η τιμή του εν λόγω χαρακτηριστικού πρέπει να είναι κείμενο. Πώς, λοιπόν, για το πρώτο μέρος εδώ; Η πρώτη λέξη του επιλογέα είναι μορφή τότε έχω ένα διάστημα και στη συνέχεια, αυτό το μέρος εισαγωγής. Τι σημαίνει ότι κάνει, βάζοντας τη μορφή μπροστά του; Αυτό θα περιορίσει ουσιαστικά το ερώτημα μας. Θα μπορούσε να είναι η περίπτωση που έχουμε κάποια εισόδους στη σελίδα που δεν είναι απόγονοι του μορφή. Αυτό θα κάνει είναι αυτό, θα πω ότι το μόνο που θέλουν οι ετικέτες εισόδου που έχουν κάπου πάνω τους κάποιο στοιχείο μητρική μορφή. Και έτσι με αυτόν τον τρόπο μπορούμε να κάνουμε αυτές τις πιο ιεραρχικά ερωτήματα γι 'αυτό δεν πρέπει απλώς να επιλέξετε ό, τι ταιριάζει ένα συγκεκριμένο επιλογέα. Μπορούμε να το είδος των ορίων του πεδίου εφαρμογής της εν λόγω ερώτημα για κάτι άλλο. Έτσι, τώρα που γνωρίζουμε πώς να επιλέξετε τα στοιχεία στη σελίδα, Ας μιλήσουμε λίγο για AJAX. AJAX είναι ένα ακόμη πολύ μοντέρνα αρκτικόλεξο που ξεχωρίζει για Asynchronous JavaScript και XML. Συμβαίνει ότι η XML είναι μερικά μόνο τρόπος για να εκπροσωπεί τα δεδομένα. 

Αυτό το είδος του έχασε δημοτικότητα πρόσφατα, έτσι ώστε το Χ στο AJAX δεν χρησιμοποιείται όλη την ώρα. Βασικά, αυτό που AJAX μας επιτρέπει να κάνετε είναι να κάνετε αιτήσεις HTTP από το πλαίσιο της JavaScript. Όταν είμαστε στο web browser μας και είμαστε πλοήγηση γύρω από τις σελίδες μας και κάντε κλικ σε ένα σύνδεσμο, τι browser μας πρόκειται να κάνετε είναι να κάνετε μια αίτηση HTTP σε ό, τι κάνουμε κλικ σύνδεσμο. Αλλά αυτό δεν είναι πάντα ιδανικό, διότι αν αυτή είναι η περίπτωση, τότε όπως ο Δαβίδ έλεγε, πρέπει πάντα να κάνουν οι χρήστες κάνουν κλικ σε ένα κουμπί Υποβολή ή κάντε κλικ σε ένα σύνδεσμο προκειμένου να κάνουν οτιδήποτε συμβεί αυτό πρόκειται να περιλαμβάνει μια αίτηση HTTP. Έτσι, με AJAX μπορούμε να κάνουμε αυτά τα αιτήματα εκ μέρους της JavaScript. Αυτό σημαίνει ότι κάθε φορά που ο χρήστης αλληλεπιδρά με τη σελίδα ή οτιδήποτε συμβαίνει, μπορούμε να κάνουμε πραγματικά μια προγραμματική αίτηση σε κάποιο άλλο αρχείο PHP στην ιστοσελίδα μας ή οτιδήποτε άλλο και να ανακτήσετε τα δεδομένα ότι αυτό το αρχείο φτύσει. Ας ρίξουμε μια ματιά σε ένα παράδειγμα του AJAX. Αυτό είναι CS50 Οικονομικών σελίδα μας με τις οποίες ελπίζουμε ότι μερικοί από μας είναι εξοικειωμένοι. Αν κοιτάξουμε την HTML αυτής της σελίδας, βλέπουμε εδώ ότι έχω προσθέσει κάποια πράγματα, μία από τις οποίες έχω δώσει αυτή τη μορφή ένα αναγνωριστικό. Έχω πει id = "μορφή-απόσπασμα". Έχω κάνει αυτό μόνο και μόνο επειδή πρόκειται να κάνουν αυτό το λίγο πιο εύκολο να επιλέξετε από το DOM αφού μπορώ να κάνω μόνο ένα πολύ απλό ερώτημα. Αυτό που θέλω να κάνω εδώ είναι που θέλω να διορθώσετε κάποιο πρόβλημα με CS50 Οικονομικών. Έτσι, αν πάμε να finance.cs50.net, κάθε φορά που θέλετε να πάρετε μια προσφορά, θα πρέπει να κάνετε κλικ σε αυτό το κουμπί Get Quote, και ότι το κουμπί Get Quote μου παίρνει στη συνέχεια σε μια άλλη ολόκληρη τη σελίδα. Και αν θέλω ένα άλλο απόσπασμα, πρέπει να χτυπήσει το πίσω κουμπί και στη συνέχεια να το πληκτρολογήσετε, Παίρνω ένα απόσπασμα, και χτύπησα το κουμπί Πίσω. Αυτό δεν είναι πραγματικά η καλύτερη εμπειρία του χρήστη. Ποιος θα χρησιμοποιήσει πραγματικά το χώρο, εάν είναι ότι αργεί να πάρει τιμές των μετοχών; Έτσι, αυτό που θέλουμε να κάνουμε με AJAX είναι καταργήσετε αυτό το βήμα να πάω σε μια ξεχωριστή σελίδα για να δείτε τα αποτελέσματα. 

Αυτό που πραγματικά ζητά μόνο ότι είναι πολύ μικρή τιμή, και αυτό είναι μόνο μια πολύ μικρή ποσότητα των δεδομένων. Έτσι δεν υπάρχει καμία ανάγκη για μένα να πάω μια άλλη ολόκληρη σελίδα HTML, κατεβάσετε μια ολόκληρη νέα παρτίδα HTML, ίσως κάποια κατεβάσετε περισσότερες φωτογραφίες, κάποια άλλα αρχεία CSS μόνο για μένα να απαντήσω στην πολύ απλή ερώτηση από το πόσο κάνει το κόστος αποθεμάτων. Με AJAX μπορούμε να κάνουμε αυτό πολύ πιο εύκολη. Βλέπουμε εδώ κάτω που είμαι σύνδεση σε ένα αρχείο JavaScript που ονομάζεται quote.js. Ας πραγματικά να ανοίξει το αρχείο. Όχι. Υπάρχει Όλα τα αρχεία JavaScript μου πρόκειται να βρίσκεται σε μορφή HTML έτσι ώστε το πρόγραμμα περιήγησης στο Web μπορεί να έχει πρόσβαση. Στη συνέχεια έχουμε ένα ξεχωριστό κατάλογο εδώ για JavaScript, και τώρα εδώ είναι quote.js. Στην κορυφή αυτού του αρχείου αυτό εδώ λέει ότι θέλω να περιμένω για ολόκληρη τη σελίδα για να φορτωθεί πριν προσπαθώ να κάνω τίποτα. Γιατί είναι ότι χρειάζεται; Αποδεικνύεται ότι το επόμενο πράγμα που θα πάω να κάνω εδώ είναι αρχίσει να ψάχνει για ένα στοιχείο που ταιριάζει με κάποια επιλογέα. Εάν αυτή η JavaScript είναι πάντα εκτελούνται πριν από αυτό το στοιχείο έχει τοποθετηθεί στη σελίδα, τότε τα πάντα προσπαθώ να κάνω δεν πρόκειται να λειτουργήσει επειδή Πάω να προσπαθήσω να επιλέξετε κάτι που δεν υπάρχει ακόμα. Έτσι, αυτή η γραμμή επάνω στην κορυφή λέει θέλω να περιμένετε μέχρι τα πάντα είναι φορτωμένα έτσι είμαστε εγγυάται ότι όλα τα στοιχεία που ψάχνω είναι στην πραγματικότητα στη σελίδα. Αυτό το σύμβολο του δολαρίου εδώ σημαίνει ότι είμαι με τη χρήση της βιβλιοθήκης ονομάζεται jQuery. Αυτή η βιβλιοθήκη jQuery μας επιτρέπει να χρησιμοποιήσετε αυτά τα επιλογείς που μόλις κοίταξε. Λέγοντας $ συνέχεια περνώντας ως επιχείρημα αυτό το # έντυπο-απόσπασμα, Είμαι τώρα επιλέγοντας αυτή τη μορφή που πήρε μόνο μια ματιά. Τώρα έχω μια αναπαράσταση αυτής της μορφής στη μνήμη κάποιο τρόπο. 

Σε αυτό το αντικείμενο τώρα, αυτή η αναπαράσταση της μορφής, Είμαι χρησιμοποιώντας τώρα μια λειτουργία που ονομάζεται για. Τι κάνει αυτή η λειτουργία είναι ότι πρόκειται να επισυνάψετε ένα πρόγραμμα χειρισμού συμβάντων. Το γεγονός ότι θα πάμε για να ακούσετε είναι το γεγονός submit. Έτσι, όταν Εισάγετε ο χρήστης κάνει κλικ στο κουμπί Υποβολή που ή πρέσες, αυτό το γεγονός πρόκειται να φωτιά. Με συνδέοντας σε αυτό, μπορώ να παρακάμψετε τώρα την προεπιλεγμένη συμπεριφορά του μορφή. Χωρίς αυτή τη JavaScript, η φόρμα θα υποβάλει ανεξαρτήτως PHP αρχείο χρησιμοποιήσαμε στο εν λόγω χαρακτηριστικό δράση. Αλλά αντ 'αυτού, είμαι τώρα λέει, περίμενε, περίμενε, περίμενε, δεν θέλω πραγματικά να το κάνουμε αυτό. Θέλω αυτό να συμβεί πριν πάτε και να προσπαθήσουμε να υποβάλει κάποιο αρχείο PHP. Τώρα τι θέλω να κάνω; Σε αυτό το σημείο θέλω να χρησιμοποιήσω AJAX με κάποιο τρόπο να φορτώσει σε αυτό που η τιμή της μετοχής είναι. Το πρώτο πράγμα που πρέπει να ξέρετε είναι τι απόθεμα ο χρήστης ψάχνει. Για να γίνει αυτό θα πάω να χρησιμοποιήσετε ένα άλλο επιλογέα. Αυτή είναι η τρίτη επιλογέας κοιτάξαμε πριν. Αυτό λέει ότι θέλω να ξεκινήσω αυτό το στοιχείο της φόρμας με ένα αναγνωριστικό της μορφή-απόσπασμα. Στη συνέχεια, κάπου στο εσωτερικό του εντύπου θα πρέπει να υπάρχει ένα στοιχείο εισόδου που έχει το όνομα του συμβόλου. Αν κοιτάξουμε πίσω στο HTML μας, είδαμε ότι είχαμε μια είσοδο [όνομα = σύμβολο]. Αυτό σημαίνει ότι αυτό πρόκειται να επιλέξετε αυτό το πλαίσιο κειμένου που ο χρήστης πληκτρολογεί σε. Αυτό είναι ωραίο. Έχουμε το πλαίσιο κειμένου. Τώρα απλά πρέπει να ξέρετε τι είναι μέσα από αυτό. Για να το κάνουμε αυτό μπορούμε να καλέσετε τη μέθοδο αυτή εδώ, αυτό. Val, και αυτό λέει ξέρω τι πλαίσιο κειμένου που έχετε. Θέλω να μου πείτε τι είναι ο χρήστης πληκτρολογήσει σε αυτό το πλαίσιο κειμένου. Τώρα έχουμε μια σειρά που ονομάζεται σύμβολο που είναι ίσο με ό, τι ο χρήστης πληκτρολογήσει μέσα Αυτό είναι ωραίο. Μπορούμε να χρησιμοποιήσουμε αυτό το αλφαριθμητικό τώρα να κάνει το αίτημά μας. Πρόκειται για μια νέα λειτουργία εδώ, αυτό το $, εκτός είμαστε δεν πρόκειται πλέον να επιλέξετε στοιχεία, θα πάμε να ζητούν μια διαφορετική λειτουργία που είναι που μας παρέχεται από jQuery. Αυτή η λειτουργία AJAX είναι το τι πραγματικά πρόκειται να κάνουν αυτό το αίτημα HTTP. Γι 'αυτό και πρέπει να πω ότι μερικά πράγματα. Το πρώτο πράγμα που πρέπει να πούμε αυτή τη λειτουργία είναι όπου θέλω το αίτημα να πάει. Κάπου στο έργο μου έχω αυτό το αρχείο μέσα από την HTML κατάλογο με το όνομα quote.php. Μπορώ να αποκτήσετε πρόσβαση σε αυτό το αρχείο, είδαμε, ακριβώς όπως αυτό, αν πάω στο localhost / quote.php. 

Θέλω JavaScript μου να κάνω μια αίτηση σε αυτή τη σελίδα. Τι τύπος της αίτησης τώρα; Είδαμε πριν ότι η μορφή έχει αυτή τη μέθοδο = "post" χαρακτηριστικό, και αυτό σημαίνει ότι πρόκειται να κάνει μια αίτηση POST, γι 'αυτό δεν πρόκειται να βάλει τίποτα στο URL, αντί αίτηση GET, η οποία θα ήταν απλά να απολυθούν αν προσεγγιστεί μόνο τη σελίδα με το πρόγραμμα περιήγησης στο Web, για παράδειγμα. Τώρα έχουμε πει θέλω να κάνω μια αίτηση POST HTTP σε μια σελίδα που βρίσκεται στο quote.php. Όταν υποβάλετε το έντυπο, να θυμάστε ότι μπορεί να έχει πρόσβαση στα στοιχεία εισόδου στο εσωτερικό του εντύπου με την μεταβλητή $ _POST. Μέχρι τώρα στην ιστορία δεν έχουμε στην πραγματικότητα έστειλε μαζί όλα τα δεδομένα ακόμα. Έχουμε μόλις είπα είμαστε μια αίτηση AJAX και εδώ είναι ο τύπος της αίτησης που κάνουμε. Τώρα πρέπει να στείλει στην πραγματικότητα κάποια δεδομένα στη σελίδα. Για να το κάνουμε αυτό μπορούμε να χρησιμοποιήσουμε αυτή την ιδιότητα που ονομάζεται δεδομένων. Η αξία του ακινήτου είναι στην πραγματικότητα ένα associative array. Ο λόγος για αυτό είναι ότι μας επιτρέπει να στείλουμε κάτι περισσότερο από 1 κομμάτι των δεδομένων. Γι 'αυτό έχουμε αυτά τα άγκιστρα εδώ φωλιάζουν μέσα από αυτές τις άλλες αγκύλες. Τα πλήκτρα σε αυτές συνειρμική συστοιχίες πρόκειται να είναι το ίδιο πράγμα εκείνες όνομα αποδίδει σε στοιχεία της φόρμας μας. Αυτό σημαίνει ότι αν στείλω μαζί με το σύμβολο του κλειδιού, αυτό σημαίνει PHP σελίδα μου μπορούν να έχουν πρόσβαση αυτά τα δεδομένα με $ _POST [σύμβολο] ακριβώς όπως κάναμε πριν, όταν ήμασταν υποβολή μιας φόρμας. Και τώρα τα πραγματικά δεδομένα που θέλουμε να στείλουμε πρόκειται να είναι το εσωτερικό αξία αυτής της associative array. 

Εμείς αυτό το κείμενο αποθηκεύεται σε μια μεταβλητή που ονομάζεται σύμβολο, και έτσι θα στείλουμε μαζί τώρα ένα βασικό σύμβολο της και η αξία του ό, τι ο χρήστης πληκτρολογήσει μέσα Τώρα έχουμε κάνει αυτό το αίτημα HTTP, PHP αρχείο μας έχει εκτελεστεί, και πρόκειται να στείλει κάποια δεδομένα τώρα πίσω στον πελάτη που έκανε ακριβώς αυτό το αίτημα. Τώρα πρέπει να ανταποκριθεί σε ό, τι ο διακομιστής μας είπε. Για να το κάνουμε αυτό έχουμε αυτή την τελευταία ιδιότητα που ονομάζεται εδώ επιτυχία. Η αξία αυτού του κλειδί της επιτυχίας είναι πραγματικά πρόκειται να είναι μια λειτουργία, και αυτό είναι ένα από τα πραγματικά δροσερά πράγματα που μπορείτε να κάνετε με το JavaScript. Όχι μόνο μπορείτε να έχετε ints ή συστοιχίες ως εσωτερικό αξία ενός associative array, μπορούμε να έχουμε επίσης μια λειτουργία. Έτσι, λέγοντας επιτυχία, αυτό είναι το κλειδί μου. Η άνω και κάτω τελεία εδώ λέει ότι έρχεται η αξία, και τώρα η αξία αυτή είναι στην πραγματικότητα μια λειτουργία. Γι 'αυτό και δεν χρειάζεται να δώσει σε αυτό μια λειτουργία όνομα per se. Μπορούμε να πούμε ότι αυτό πρόκειται να είναι κάποια λειτουργία. Είναι πρόκειται να λάβει 1 επιχείρημα. Το επιχείρημα για αυτή τη λειτουργία θα είναι ό, τι ο διακομιστής μας έστειλε πίσω από το αίτημα. Ακριβώς όπως όταν το πρόγραμμα περιήγησης μας κάνει μια αίτηση, ο server στέλνει κάτι πίσω και το πρόγραμμα περιήγησης εμφανίζει, στο πλαίσιο του AJAX κάναμε απλά μια αίτηση, ο διακομιστής έστειλε κάτι πίσω, και τώρα έχουμε ότι εκπροσωπήθηκαν ως ένα string. Με την σειρά μου θα ήθελα να εμφανίσει ότι στη σελίδα. Για να γίνει αυτό θα πάω να έχει ένα τελευταίο επιλογέα. Θέλω να επιλέξετε το στοιχείο με την τιμή ID. Αυτό είναι απλώς ένα άδειο div ότι έχω δημιουργήσει στη σελίδα, και θέλω να ρυθμίσετε τα περιεχόμενα αυτού του div να είναι ό, τι ο διακομιστής μας έστειλε πίσω. Έχω πραγματικά τροποποιημένο quote.php λίγο. 

Αντί να καθιστούν καλώντας και καθιστώντας κάποια σελίδα, quote.php τώρα απλά πρόκειται να εκτυπώσετε την αξία του αποθέματος ως συμβολοσειρά. Έτσι, εάν επρόκειτο να επισκεφθεί πραγματικά την σελίδα, θα δείτε ότι μόνο μικρό σειρά από ό, τι η τιμή της μετοχής είναι. Ένα τελευταίο πράγμα που πρέπει να κάνουμε εδώ είναι απλά βεβαιωθείτε ότι αυτή η συνάρτηση επιστρέφει false. Τι λέει αυτό είναι ότι αν είμαι μέσα από ένα πρόγραμμα χειρισμού συμβάντων και ότι χειρισμού συμβάντων επιστρέφει ψευδείς αντί να επιστρέψει αλήθεια, αυτό σημαίνει ότι δεν θέλω την αρχική εκδήλωση στη φωτιά. Σε αυτή την περίπτωση, αν δεν είχαμε κανένα JavaScript και θα υποβάλει έντυπο, πρόγραμμα περιήγησης στο Web μας πρόκειται να πει, «Πάω να στείλει τα δεδομένα μαζί," και πρόκειται να σας στείλει σε μια άλλη σελίδα. Επειδή είμαστε χρησιμοποιώντας AJAX τώρα, δεν υπάρχει καμία ανάγκη να στείλει το χρήστη σε μια άλλη σελίδα. Είμαστε ακριβώς πρόκειται να εμφανιστούν τα αποτελέσματα δυναμικά στην ίδια σελίδα. Εμείς πραγματικά δεν θέλουν να πάνε οπουδήποτε, και θέλω να μείνω στην ίδια σελίδα. Έτσι, με την επιστροφή ψευδείς, εξασφαλίζουμε ότι η φόρμα δεν το κάνει αυτό για εμάς. Ας ρίξουμε μια ματιά σε ό, τι αυτό φαίνεται πραγματικά σαν. Απόσπασμα σελίδα μας φαίνεται το ίδιο. Επιτρέψτε μου να τραβήξει μέχρι τον επιθεωρητή εδώ κάτω, έτσι μπορούμε να δούμε τι συμβαίνει. Κάντε λίγο λιγότερο τεράστια. Να θυμάστε, αν ανοίξουμε την καρτέλα Network, αυτό είναι όπου μπορούμε να δούμε όλα τα αιτήματα HTTP που συμβαίνουν στη σελίδα. 

Για ένα σύμβολο επιτρέψτε μου να πληκτρολογήσετε AAPL και κάντε κλικ στο Get Quote. Τώρα είδαμε ότι η μετοχή της Apple κοστίζει κάποια αριθμός των δολαρίων μόλις εμφανίστηκε στη σελίδα, αλλά η διεύθυνση URL δεν άλλαξε καθόλου. Στην πραγματικότητα, εδώ είναι το HTTP αίτημα που μόλις έκανε. Κάναμε μια αίτηση POST για quote.php. Αυτό είναι λογικό. Αυτό είναι ό, τι ο διακομιστής μας έστειλε πίσω. Δεν είναι πλέον αυτό το γιγάντιο HTML έγγραφο με τις εικόνες και τα πράγματα όπως ότι, είναι απλά μια γραμμή κειμένου, και στη συνέχεια θα εμφανίζεται μόνο η γραμμή του κειμένου. Αν πάμε πίσω στις κεφαλίδες και να δούμε τι πραγματικά έστειλε μέσα από αυτό το αίτημα HTTP, μπορούμε να δούμε ότι εδώ κάτω στείλαμε μαζί με το σύμβολο του κλειδιού και αξίας AAPL, το οποίο είναι αυτό που ο χρήστης πληκτρολογήσει μέσα Αυτό είναι ωραίο, αλλά είναι ακόμα λίγο ενοχλητικό. Έχω ακόμα να κάνετε κλικ σε αυτό το κουμπί για να πάρετε την τιμή μιας μετοχής. Είμαστε πολυάσχολοι άνθρωποι και δεν έχουμε το χρόνο να κάνετε κλικ σε κουμπιά. Η Google πραγματοποίησε αυτή λίγο πριν από λίγο καιρό, όταν θα εφαρμοστεί το Google Instant. Τι Google Instant δεν είναι όπως εσείς πληκτρολογείτε ξεκινά ακριβώς την εμφάνιση των αποτελεσμάτων για εσάς έτσι δεν έχετε να ανησυχείτε για ακόμη κλικ Αναζήτηση. Στην πραγματικότητα, μια ιστορία διασκεδαστική που σχετίζονται με αυτό. Μόλις Google Instant βγήκε, οι άνθρωποι ήταν σαν, "Πω πω, αυτό είναι σούπερ εκπληκτικό." "Αυτό είναι τόσο δροσερό." Και ένας μαθητής κάτω στο Στάνφορντ ο οποίος ήταν 19 κατά το χρόνο έκανε αυτήν την τοποθεσία που ονομάζεται YouTube Instant. Όλα Άμεση YouTube δεν είναι να αναζητήσετε αποτελεσματικά το YouTube αμέσως. Έτσι, αντί να χρειάζεται να πάει στο YouTube.com και πατήστε Αναζήτηση, όταν αρχίσετε να πληκτρολογείτε στο YouTube Άμεση κάτι σαν CS50, θα μπορούσαμε να δούμε εδώ ότι αυτό είναι που προσπαθούν να σε μια αργή σύνδεση στο Internet συμπληρώσετε τα αποτελέσματα αυτά ζουν. Για να το κάνουμε αυτό μπορούμε να κάνουμε πραγματικά μια πολύ απλή τροποποίηση quote.js αρχείο μας. Αυτή τη στιγμή είμαστε συνδέοντας αυτό το γεγονός, όταν η υποβολή της φόρμας. Δεν θέλουν πραγματικά να κάνει ο χρήστης υποστηρίζουν ότι η μορφή πια, οπότε ας φωτιά αντί αυτό το γεγονός κάθε φορά που ο χρήστης πατήσει ένα πλήκτρο. Για να το κάνουμε αυτό ας πρώτα να αλλάξετε την εκδήλωση από υποβάλλει KeyUp. Αυτό σημαίνει ότι αντί να περιμένει για το έντυπο για την υποβολή, κάθε φορά που πιέζεται το πλήκτρο, κάτι που πρόκειται να συμβεί. Κανείς πλέον δεν έχει νόημα να αποδίδουν αυτό το γεγονός KeyUp σε ολόκληρη μορφή. Είμαστε πραγματικά νοιάζονται μόνο για το πλαίσιο αναζήτησης. 

Για να επιλέξετε ότι τώρα, μπορούμε να αλλάξουμε αυτό να είναι, αντί μορφή-απόσπασμα, μορφή-απόσπασμα και θα έχουμε μία είσοδο (τύπου = κείμενο) ή θα μπορούσαμε να πούμε (όνομα = σύμβολο) - ό, τι θέλουμε. Τώρα υπάρχει ένα τελευταίο πράγμα που πρέπει να κάνουμε. Θυμηθείτε εδώ κάτω όταν είπαμε την επιστροφή ψευδή είπαμε δεν θέλουμε αυτό το γεγονός αθέτησης στη φωτιά. Όμως, αυτό ακριβώς συμβαίνει, έτσι ώστε αν απενεργοποιήσετε ότι τώρα, ό, τι πληκτρολογείτε δεν πρόκειται να εμφανιστούν στο πρόγραμμα περιήγησης πια διότι αυτό θα ήταν η προεπιλεγμένη συμπεριφορά του πληκτρολογώντας σε ένα πλαίσιο κειμένου. Δεν θέλουμε να παρακάμψετε ότι, οπότε ας καταστρέψει αυτή η επιστροφή ψευδείς. Εάν αποθηκεύσετε αυτό και επαναλάβετε τη φόρτωση της σελίδας, τώρα όταν αρχίσετε να πληκτρολογείτε AAPL θα δείτε ότι η τιμή της μετοχής στο κάτω μέρος εδώ ολοκληρώνει αυτόματα. Έτσι, εδώ είναι CS50 Άμεση Οικονομικών. Στην πραγματικότητα είναι μια διασκεδαστική ιστορία για το YouTube Instant ότι είναι φοιτητής ακριβώς το είδος του έγραψε ως ένα έργο 1-νύχτα, και την επόμενη μέρα του προσφέρθηκε μια εργασία από το YouTube Διευθύνων Σύμβουλος. Έτσι, τόσο απλό, που CS50 φοιτητές, τελικά τα έργα σας μπορεί να σας πάρει μια εργασία στο YouTube. Κάτι τέτοιο είναι μια πραγματικά δροσερή ιδέα για ένα τελικό σχέδιο, έτσι δεν είναι; Είχαμε κάποια υπάρχουσα λειτουργικότητα που θέλουμε να εντάξουμε με. Θα βελτιώσει την εμπειρία του χρήστη λίγο, και ξαφνικά κάτι αναζήτηση στο YouTube Instant θα μπορούσε να είναι πολύ πιο εύκολο από την αναζήτηση για αυτό στο κανονικό YouTube. Έτσι, αυτό είναι AJAX με λίγα λόγια. 

Στα παραδείγματα που δείχνουν Ιωσήφ, είδαμε πολλά Συμπληρώνει αυτόματα, Συμπληρώνει αυτόματα και αυτά είναι πραγματικά, πραγματικά βολικό, επειδή δεν έχουμε να θυμόμαστε - Για παράδειγμα, αν δεν θυμάστε την τιμή της μετοχής της Apple και εμείς απλά ξέρω ότι είναι κάτι αα, όχι μόνο να μου λέει, "Ένα μερίδιο του αυτό το πράγμα κοστίζει τόσα πολλά χρήματα», Είχα το είδος του αρέσει να ξέρω τι αποθέματα αρχίζουν με αα. Μπορούμε να το κάνουμε αυτό πολύ όμορφα με τη βιβλιοθήκη Bootstrap που είναι ήδη συμπεριληφθεί μέσα από CS50 Οικονομικών. Εάν έρχεστε εδώ στην ετικέτα JavaScript και μετακινηθείτε προς τα κάτω για να Typeahead, αυτό είναι μόνο ένα ωραίο plugin που κάποιος έχει ήδη έγραψε για εμάς, και μπορούμε να χρησιμοποιήσουμε εύκολα τη λειτουργικότητα του σαν αυτό. I δακτυλογραφημένα σε Α και εδώ είναι μια λίστα με ορισμένα κράτη που αρχίζουν με Α. Ας πούμε ότι πιστεύω ότι αυτό είναι πραγματικά δροσερό και ήρθε η ώρα για μένα να συμπεριλάβει στη σελίδα μου. Αποδεικνύεται ότι αυτό είναι πραγματικά, πραγματικά απλή. Ας πηδούν πάνω από εδώ για να quote3.js. Αρχείο μου φαίνεται λίγο διαφορετικό. Εδώ κάτω όλοι AJAX τα πράγματά μου είναι η ίδια. Θέλω να φορτώσει τα στοιχεία για τα αποθέματα, χωρίς να χρειάζεται να μεταβείτε σε άλλη σελίδα. Αλλά τώρα θέλω να χρησιμοποιήσω αυτό το plugin. Η τεκμηρίωση Bootstrap έχει μεγάλη παραδείγματα για το πώς ακριβώς μπορώ να το κάνουμε αυτό. Θέλω να πω, "Εδώ είναι η είσοδος που θέλω να autocomplete για" και Πάω να καλέσετε τη λειτουργία αυτή ονομάζεται typeahead, και ότι πρόκειται να χειριστεί όλα τα Typeahead πράγματα για μας. Θα προετοιμάσει τη λίστα, θα κάνει όλα φιλτράρισμα μας. Το μόνο πράγμα που χρειάζεται να γνωρίζετε είναι τα δεδομένα είμαστε σε autocompleting. Έτσι βρήκα αυτό το κλειδί, απλά διαβάζοντας την τεκμηρίωση και κοιτάζοντας τα παραδείγματα. Αν μου δώσετε ένα κλειδί της πηγής, η τιμή αυτού του κλειδιού είναι μερικά μόνο σειρά από πράγματα που θέλω να autocomplete για. Η μεταβλητή αυτή προήλθε από άλλο αρχείο. Έχω ανοίξει symbols.js. 

Αυτό symbols.js είναι ακριβώς αυτό πραγματικά, πραγματικά μεγάλη ποικιλία που περιέχει χορδές όλων αυτών των συμβόλων μετοχών από το NASDAQ. Αν θέλω να πηδήσει πίσω στο HTML, έτσι jharvard, vhosts, globalhost, html, πρότυπα, quote_form. Από που λέγεται τώρα quote3.js, επιτρέψτε μου να αλλάξετε το αρχείο JavaScript είμαι και εδώ. Τώρα έχω quote3.js, έτσι είμαι πρόκειται να φορτώσει σε αυτό το ξεχωριστό αρχείο JavaScript, αυτός που έχει αυτό το Bootstrap autocomplete. Τώρα, όταν θα επιστρέψετε στο πρόγραμμα περιήγησης, επαναλάβετε τη φόρτωση της σελίδας, και αρχίζω την πληκτρολόγηση αα, υπάρχει αυτόματης συμπλήρωσης μου. Και ήταν πραγματικά τόσο απλό. Είχα 1 γραμμή κώδικα που μόλις είπε, «Εδώ είναι τα πράγματα που θέλω να autocomplete για" και ξαφνικά έχω αυτό το πραγματικά πολύ ωραία λειτουργικότητα με όχι ένα σωρό προσπάθεια σε όλα. Όπως είστε ανάπτυξη ιστοσελίδων και ιδιαίτερα την μπροστινή πλευρά τέλος των πραγμάτων, θα πάμε να βρούμε αυτό συμβαίνει πολύ. Υπάρχουν πολλά, πολλά, πολλά πραγματικά δροσερό δωρεάν βιβλιοθήκες εκεί έξω που καθιστούν εξαιρετικά εύκολο να κάνουμε τα πράγματα όπως αυτό. Μπορεί κανείς να σκεφτεί για τυχόν μειονεκτήματα των autocompleting απλά σε αυτή τη μεγάλη λίστα των συμβόλων; Τι θα μπορούσε να είναι κάτι που δεν είναι το καλύτερο με αυτή την προσέγγιση; Ναι. >> [Φοιτητής] ώρα, αν έχετε μια μεγάλη [δεν ακούγεται] Ναι. Αυτή τη στιγμή είμαστε λήψη αυτού του αρχείου JavaScript τεράστια και υπάρχει πολλή των συμβόλων. Και έτσι, αν έχουμε έναν τόνο πράγματα, αυτό θα μπορούσε να αυξήσει το είδος του την καθυστέρηση της όχι μόνο την αναζήτηση αλλά η λήψη επίσης το πραγματικό αρχείο. Μεγάλη. Οτιδήποτε άλλο; Αυτή τη στιγμή δεν υπάρχει καμία πραγματική αίσθηση του ενδιαφέρον. Αν πληκτρολογήσετε ένα Α, οι εταιρίες που εμφανίζονται εδώ μπορεί να μην είναι οι πιο δημοφιλείς εταιρείες που αρχίζουν με Α. 

Πριν πάρω την Apple, μπορεί να πάρει λίγο περισσότερο χαρακτήρες για να βρείτε αυτό που ψάχνω. Αυτό αυτόματης συμπλήρωσης δεν έχει αυτή την αίσθηση του ενδιαφέρον. Είναι ακριβώς πρόκειται να πει, "Ό, τι ταιριάζει Πάω να εμφανιστεί." Αντί γι 'αυτό, θα ήθελα με κάποιο τρόπο να ενσωματώσει κάποια σημασία σε αναζητήσεις μου. Αν πάω εδώ στο Yahoo! Οικονομικών, finance.yahoo.com, Αν προσπαθήσετε να εισαγάγετε ένα σύμβολο στη σελίδα Yahoo! Οικονομικών και αρχίζω να πληκτρολογείτε goog, έχω αυτό το ωραίο λίστα των πραγμάτων. Σαφώς, αυτό μοιάζει με το Yahoo! Finance κάνει κάτι πιο έξυπνο εδώ. Έχουν κάποια σχέση και έχουν επίσης πρόσθετες πληροφορίες όπως και το όνομα του αποθέματος. Αυτό είναι κάτι που δεν μπορώ πραγματικά να πάρει με μόλις μου λίστα απόθεμα των συμβόλων. Θέλω αυτό και έτσι είμαι πρόκειται να το πάρει. Για να το κάνουμε αυτό ας κάνουμε μερικά πράγματα. Πρώτα ας ανοίξει τον επιθεωρητή σε αυτή τη σελίδα γιατί είδαμε ότι αυτή η σελίδα δεν είναι επαναφόρτωση σε όλα, γι 'αυτό είναι με τη χρήση AJAX πιθανώς με κάποιο τρόπο να τη φόρτωση των δεδομένων του. Μπορούμε να μάθουμε τι δεδομένα θα είναι φόρτωση. Αν κάνω κλικ σε αυτήν την καρτέλα Network, αυτά πρόκειται να είναι όλα τα αιτήματα που αρχίζουν να απολυθούν. Τώρα, αν θα πληκτρολογήσετε στο goo, μπορούμε να δούμε ότι πήρα ακριβώς ένα νέο αίτημα HTTP. Αυτό είναι πιθανώς όταν τα δεδομένα που προέρχονται από. Σίγουρα αρκετά, αν κοιτάζω αυτό το URL, το οποίο είναι λίγο περίεργο όνομα, μπορούμε να δούμε ότι αυτό είναι ακριβώς όπου το Yahoo στέλνει μακριά από τα δεδομένα του. 

Έχω δημιουργήσει ένα ξεχωριστό αρχείο που ονομάζεται suggest.php που είναι πολύ παρόμοια στο πνεύμα με την λειτουργία αναζήτησης. Είναι βασικά πρόκειται να κάνει ένα ερώτημα στο URL της Yahoo, να πάρει πίσω κάποια δεδομένα, και να το στείλετε πίσω σε μένα. Τώρα, αντί να χρησιμοποιούν αυτό το μεγάλο, τεράστιο κατάλογο των συμβόλων, Μπορώ να χρησιμοποιήσω ωραία πράγματα σημασία της Yahoo, και δεν έχω για να κατεβάσετε το αρχείο ότι η μαζική JavaScript. Είμαι μόνο πρόκειται να γκρεμίσει τα πραγματικά σχετικές σύμβολα μετοχών. Ας άλμα σε αυτό. Έτσι, html, js. Είμαστε τώρα σε quote4. Τώρα είμαστε πλέον με αυτή τη μεγάλη λίστα των αρχείων JavaScript. Αλλά υπάρχει ένα μικρό είδος του προβλήματος του σχεδιασμού εδώ. Έχουμε πει ότι η Α AJAX είναι ασύγχρονη. Αυτό σημαίνει ότι όταν κάνω μια αίτηση AJAX, έτσι ακριβώς εδώ στη γραμμή 8, αυτό είναι όπου AJAX αίτημά μου είναι πραγματικά φωτιά. Ας πούμε τώρα έχω κάποιο κώδικα εδώ κάτω που πρόκειται να κάνουμε κάποια πράγματα όπως προειδοποιεί το χρήστη ή να αλλάξει κάτι στη σελίδα. Αυτό δεν πρόκειται να συμβεί είναι το πρόγραμμα περιήγησης δεν πρόκειται να περιμένει για αυτό το αίτημα να συνεχίσει πριν έρθουν προς τα κάτω και να χτυπήσει αυτή τη γραμμή. Αυτό είναι το ασύγχρονο μέρος. Είναι πρόκειται να κάνει το αίτημα αυτό και λένε, "Όταν τελειώσετε, "Έλα πίσω και να καλέσει τη λειτουργία αυτή που σας είπα να καλέσετε στο εσωτερικό της επιτυχίας." Αυτό σημαίνει πως δεν μπορούμε απλά να κατεβάσετε όλα τα αποθέματα των προτέρων. Πρέπει να κάνουμε την αίτηση και περιμένετε για κάτι για να έρθει πίσω. Αυτό σημαίνει ότι πριν, θα μπορούσε να πει απλά Bootstrap, "Εδώ είναι η λίστα των πραγμάτων που θέλετε να autocomplete για". Δεν μπορούμε πλέον να το κάνουμε αυτό πια, γιατί δεν ξέρουμε αυτό που θέλουμε πραγματικά να autocomplete για. Ευτυχώς, Bootstrap σκεφτεί αυτό, διότι αυτά είναι έξυπνα παιδιά εκεί πέρα, και που πραγματικά μας έδωσαν έναν άλλο τρόπο για να φορτώσετε αυτό το Typeahead plugin. Πριν, η τιμή αυτής της ιδιότητας πηγή ήταν ακριβώς αυτή η μεγάλη ποικιλία των πραγμάτων για να autocomplete για. 

Τώρα, το ακίνητο πηγή είναι στην πραγματικότητα μια λειτουργία, και ο σκοπός αυτής της λειτουργίας είναι να καταλάβουμε ποια είναι τα πράγματα για την αυτόματη συμπλήρωση. Ο τρόπος που πρόκειται να καταλάβω είναι ότι πρόκειται να ζητήσει από το Yahoo! Finance ποια είναι τα καλύτερα πράγματα για την αυτόματη συμπλήρωση. Για να γίνει αυτό θα πάω να κάνω μια πολύ παρόμοιο αίτημα AJAX. Πάω να ζητήσει αυτή τη σελίδα σε suggest.php. Θέλω να στείλω μαζί με τα σύμβολα ακόμη. Και τώρα η επιτυχία μου, η τεκμηρίωση Bootstrap μου είπε ότι για να συμπληρώσετε τον κατάλογο των πραγμάτων, το μόνο που χρειάζεται να κάνετε είναι να περάσει σε αυτή την σειρά τώρα στη λειτουργία επανάκλησης. Αλλά περιμένετε ένα λεπτό. Αν αυτό υποτίθεται ότι είναι ένας πίνακας και AJAX είναι με την αποστολή πίσω κείμενο, πώς είναι αυτό δυνατό; Αυτό εισάγει ένα νέο τρόπο ανταλλαγής δεδομένων που ονομάζεται JSON. Σε αυτή την περίπτωση δεν είμαστε απλά στέλνοντας ένα απλό πίσω συμβολοσειρά κειμένου. Τώρα έχουμε να κάνουμε με αυτό το πιο πολύπλοκο κατάλογο των συμβόλων αποθεμάτων. Αυτά τα σύμβολα απόθεμα μπορεί επίσης να περιλαμβάνει πράγματα όπως το όνομα της εταιρείας ή τις τρέχουσες τιμές. Απλά χρησιμοποιώντας μια μεγάλη μακρά σειρά που δεν έχει μορφοποιηθεί σε οποιοδήποτε προβλέψιμο τρόπο Δεν πρόκειται να είναι ο καλύτερος τρόπος για να πάρετε αυτά τα δεδομένα από τον server της Yahoo για μένα με έναν τρόπο που μπορεί εύκολα να καταλάβει. JSON είναι μια τεχνολογία που εκμεταλλεύεται τις δυνατότητες του πώς θα δημιουργήσουμε associative arrays σε JavaScript. Αυτό μοιάζει πολύ με ένα associative array JavaScript, και στην πραγματικότητα, αυτό είναι επειδή είναι. JSON σημαίνει Object Notation JavaScript. Αυτό είναι βασικά μια μορφή που συμφωνήθηκε για τη μεταφορά δεδομένων εμπρός και πίσω. Εδώ αυτό το αντικείμενο JSON JSON ή αυτό associative array είναι να μου στείλει κάποια δεδομένα για μια σειρά μαθημάτων. 

Τα κλειδιά αυτού του πίνακα είναι τα πράγματα όπως βέβαια που έχει μια αξία του CS50, και κάτω εδώ μπορούμε να δούμε ότι μπορώ να έχω μια τιμή που είναι ένας πίνακας. Δεν έχω να κάνω τα πράγματα όπως αναλύσει χορδές και να αναζητήσουν κόμματα και να κάνουμε τρελά πράγματα όπως αυτό. Επειδή αυτό έχει δηλωθεί σε αυτή τη μορφή JSON, JavaScript και jQuery έχουν ήδη λειτουργίες να μετατρέψετε ένα string που μοιάζει με αυτό το JSON σε πραγματικό JavaScript associative array ότι μπορούμε να εργαστούμε με. Κάτι που είναι τόσο απλό όσο λέγοντας ότι δεν είναι αυτό το αρχείο, suggest.php, να μου στείλει πίσω απλά μια συμβολοσειρά κειμένου, αλλά ξέρω ότι πρόκειται να μου στέλνει πίσω JSON. Αυτό σημαίνει ότι η JSON μπορεί να μετατραπεί σε ένα associative array JavaScript. Και έτσι jQuery, θα ήθελα να το κάνουμε αυτό για μένα. Αυτό σημαίνει ότι αυτή η παράμετρος απόκρισης εδώ, αυτό δεν είναι πλέον μόνο ένα string. Επειδή έχουμε πει jQuery που έρχεται εδώ κάποια JSON, jQuery θα είναι αρκετά έξυπνος για να πει, "Θα ήθελα JSON;" "Πάω να μετατρέψει ότι σε associative array για σένα." Ας ρίξουμε μια ματιά στην πραγματικότητα στην καρτέλα Δίκτυο φορά έχουμε quote4.js. Θα αλλάξει αυτό και επαναλάβετε τη φόρτωση της σελίδας. Τώρα είμαι πρόκειται να πληκτρολογήσετε ένα-ένα και πάλι. Έχω κάνει ένα ζευγάρι ζητά να suggest.php, αλλά τώρα αυτή η απάντηση, και όχι μόνο το string, είναι JSON. Έτσι έχω μια σγουρή αγκύλη λέει, "Εδώ έρχεται ένα associative array." 

Το πρώτο και μοναδικό κλειδί αυτής της associative array ονομάζεται σύμβολα, και τότε εδώ είναι ένας πίνακας όλων των σχετικών συμβόλων έρχονται τώρα από το Yahoo! Finance, όχι από την γιγαντιαία λίστα. Αυτό είναι το πώς μπορώ να συμπληρώσετε απλά αυτό το autocomplete plugin με ορισμένα στοιχεία που δεν έρχεται από ένα τοπικό αρχείο που είναι ήδη προκαθορισμένο αλλά από κάτι άλλο. Αποδεικνύεται ότι μπορούμε να πάρουμε πραγματικά πλεονέκτημα μιας τεχνολογίας που ονομάζεται JSONP, JSON ή με επένδυση, που θα εξαλείψει αυτό το suggest.php μεσάζων. Αλλά αντί να το κάνουμε αυτό, ας ρίξουμε μια ματιά, αντί στο πώς μπορεί να βελτιώσει ακόμη περισσότερο αυτή. Μου αρέσει πολύ Typeahead Bootstrap του. Είναι πραγματικά ωραίο. Αλλά είμαστε καλοί στο να πάρει το JavaScript και θέλουμε να το είδος αυτό κάνουμε μόνοι μας, ίσως ρίξτε μια ματιά σε αυτό το plugin θα μπορούσε να κάνει. Ας μην χρησιμοποιήσετε αυτό το πράγμα Typeahead, και ας προσπαθήσουμε να κάνουμε αυτή την λίστα με τις προτεινόμενες μετοχές τους εαυτούς μας. Εδώ στην quote6.php θα πάμε για να ξεκινήσει με τον ίδιο τρόπο. Κάθε φορά που κάποιος πληκτρολογεί κάτι, θέλουμε να κάνουμε μια αίτηση AJAX. Αυτό είναι παρόμοιο με το αρχικό μας CS50 Άμεση Οικονομικών. Αντί να κάνει μια αίτηση για quote.php, είμαστε τώρα κάνει μια αίτηση για το ίδιο αρχείο όπως και πριν, αυτό suggest.php, το οποίο είναι ακριβώς πρόκειται να τραβήξει δεδομένα από το Yahoo! Finance. 

Και πάλι, εμείς περιμένουμε ακόμα JSON, αλλά τώρα από το Typeahead δεν κάνει αυτό για μας, πρέπει επίσης να στείλουν μαζί την τιμή που βρίσκεται στο εσωτερικό του τρέχοντος πλαισίου κειμένου. Τώρα ξέρουμε τι να ζητήσει από το Yahoo! Finance για, και έτσι τώρα εδώ είναι η λειτουργία που θέλουμε να εκτελέσει μια φορά το αίτημα ολοκληρώνει. Δεν έχουμε το plugin για να κάνει τον κατάλογο για μας, τόσο εδώ είναι όπου είμαστε πραγματικά πρόκειται να οικοδομήσουμε μια λίστα με προτάσεις. Για να γίνει αυτό, όπως και σε PHP έχουμε συνεχόμενα αυτές τις μεγάλες χορδές της HTML τότε τα τυπωμένα, μπορούμε να κάνουμε το ίδιο ακριβώς πράγμα σε JavaScript. Πρώτα θα πάμε για να ξεκινήσει αυτή την σειρά που ονομάζεται προτάσεις, και αυτή η σειρά είναι ακριβώς πρόκειται να περιέχουν κάποια HTML. Θέλουμε να είναι μια λίστα με τα πράγματα, έτσι θα πάμε για να ξεκινήσει με αυτήν την ετικέτα λίστα, και τώρα θα πάμε να επαναλάβει πάνω από όλα τα σύμβολα που είχαν επιστραφεί πίσω σε μας. Θυμηθείτε, επειδή έχουμε πει datatype: «json», αυτό δεν είναι ένα string. Αυτό είναι ήδη μια σειρά για εμάς. Αυτό είναι πραγματικά δροσερό. Μπορούμε απλά να πούμε, "θέλω να προσθέσετε ένα στοιχείο της λίστας." Θα το θέσω μέσα σε ένα στοιχείο σε μια πλευρά του ότι, θα δώσει μια κατηγορία από τις προτάσεις, ώστε να γνωρίζουμε τι είναι, και τώρα εδώ είναι το σύμβολο που πήραμε πίσω από το Yahoo! Finance. 

Αφού έχουμε δημιουργήσει ένα στοιχείο για κάθε ένα από τα σύμβολα που έχουμε πάρει πίσω, θέλουμε απλώς να κλείσει τη λίστα. Έτσι τώρα προτάσεις αντιπροσωπεύει αυτό το μικρό κομμάτι HTML που όταν τεθεί σε μια σελίδα πρόκειται να είναι ο κατάλογος των πραγμάτων που ψάχνουμε. Τώρα ας βάλουμε πραγματικά ότι στη σελίδα. Για να γίνει αυτό που έχω δημιουργήσει πραγματικά ένα άλλο άδειο div και έχω δώσει ένα αναγνωριστικό της προτάσεις. Μοιάζει πολύ με θέτουμε το περιεχόμενο του div που θα εμφανιστεί η τιμή των στοιχείων για τα αποθέματα, τώρα απλά θέλετε να ρυθμίσετε τα περιεχόμενα αυτού του div με ό, τι αυτή η συμβολοσειρά είναι που περιέχει αυτά τα σύμβολα. Με τη χρήση αυτής της μεθόδου HTML, αυτή η μεταβλητή προτάσεις, αυτή η σειρά, είναι μια σειρά από HTML. Θέλω να λάβουν την HTML και να το βάλετε στο εσωτερικό του div που ονομάζεται προτάσεις. Έχουμε επισυνάπτονται ακριβώς κάτι για το DOM τώρα. Έχουμε προσθέσει κάποια νέα στοιχεία στο DOM ότι μπορούμε τώρα να εμφανίζεται στη σελίδα. Ας δούμε τι μοιάζει αυτό. Αν φορτώσει σε quote6 και τώρα ερχόμαστε πίσω, τώρα όταν αρχίσετε να πληκτρολογείτε AAPL, δεν έχουμε πλέον ότι η Bootstrap autocomplete, αλλά τώρα έχουμε τον κατάλογο αυτό που εμείς οι ίδιοι γίνονται. Αυτό είναι λίγο πιο άσχημο μπιτ από το Typeahead Μπουτστράπ, για παράδειγμα, αλλά αυτό δεν μας επιτρέπει να κάνουμε κάτι άλλο. Όταν ψάχναμε σε αυτό το plugin Bootstrap, είδαμε ότι όταν συμπληρώθηκε αυτόματα, ένα από τα autocomplete τιμών ήταν AAPL. Αυτό μπορεί να μην είναι τόσο χρήσιμο. Ως χρήστης, εγώ μπορεί να μην αναγνωρίζω αμέσως όλα τα σύμβολα μετοχών. Τι είμαι μάλλον πιο πιθανό να αναγνωρίσει είναι πραγματικά ονόματα της εταιρείας. Έτσι, δεν θα ήταν πολύ χρήσιμο αν αντί να πει AAPL αυτό είπε κάτι σαν την Apple Inc Επειδή έχουμε έλασης εαυτούς μας αυτό, μπορούμε πραγματικά να κάνουμε αυτό εύκολα. Ας ανοίξει το τελευταίο αρχείο απόσπασμα μας εδώ, έτσι quote7. 

Το ίδιο πράγμα. Έχω δημιουργήσει ακριβώς ένα άλλο αρχείο PHP που θα επιστρέψει σε μας περισσότερο από ό, τι ακριβώς τα σύμβολα. Επίσης, θα μας δώσει πίσω τα ονόματα της εταιρείας. Και έτσι κάνουμε το ίδιο πράγμα. Είμαστε μια αίτηση AJAX. Μόλις η αίτηση έχει ολοκληρωθεί, θα πάμε για να εκτελέσετε αυτή τη λειτουργία εδώ, και αυτή η λειτουργία πρόκειται να δημιουργηθεί μια μεγάλη σειρά από στοιχεία. Αλλά η διαφορά εδώ είναι ότι η αξία αυτών των καταλόγων δεν είναι πλέον μόνο το σύμβολο, είναι τώρα το όνομα. Έτσι, έχουμε ένα μικρό πρόβλημα. Όταν χρησιμοποιούμε αναζήτηση μας, θα πρέπει με κάποιο τρόπο να περάσει αυτό το σύμβολο. Δεν μπορεί να περάσει κάτι σαν αναζήτησης της Microsoft Corporation. Πρέπει να περάσει το MSFT. Όταν γράφουμε HTML, έχουμε πολλά ωραία ενσωματωμένα χαρακτηριστικά. Μια Α θα μπορούσε να σχετίζεται με αυτό ένα href ή μια κατηγορία. Αλλά αυτό που πραγματικά χρειαζόμαστε τώρα είναι για κάθε ένα από αυτούς τους συνδέσμους να έχουν ένα σύμβολο αποθέματος που συνδέονται με αυτό. Δεν υπάρχει ενσωματωμένο σε HTML χαρακτηριστικό για σύμβολο μετοχής, αλλά ευτυχώς, HTML5, μας επιτρέπει να δημιουργήσετε τα δικά μας χαρακτηριστικά να είναι ό, τι θέλουμε. Λέγοντας δεδομένα-σύμβολο, έχω εισήγαγε ένα νέο χαρακτηριστικό εγώ το όνομα του οποίου μόλις που αποτελείται, και αυτό είναι εντάξει, γιατί το προλόγισε με αυτά τα δεδομένα. Εμείς πάμε για να αποθηκεύσετε στο εσωτερικό του υπάρχει το σύμβολο από το απόθεμα τώρα. Αυτό σημαίνει ότι ακόμα κι αν είμαστε εμφανίζει την αξία του ονόματος της εταιρείας στο εσωτερικό της αυτόματης συμπλήρωσης μας, είμαστε ακόμα θυμόμαστε το σύμβολο που συνεργάζεται με κάθε επιχείρηση. Ο τρόπος που το κάνουμε αυτό είναι μέσα από αυτό το ίδιο το στοιχείο. Έτσι, αυτό σημαίνει ότι πρέπει να κάνουμε ένα ακόμη αλλαγή. Όταν κάνετε κλικ τώρα, πρέπει να λάβουμε πραγματικά πλεονέκτημα του χαρακτηριστικού συμβόλου όχι μόνο την αξία της. Αν back up, δίνουμε ένα πρόγραμμα χειρισμού συμβάντων σε προτάσεις. Κάθε φορά που μία από αυτές τις προτάσεις είναι τώρα κλικ, θέλω να κάνω κάτι. Αυτό που θέλω να κάνετε είναι να αλλάξετε την τιμή της εν λόγω πλαίσιο εισαγωγής. Τώρα θέλω να ορίσετε την ίδια λειτουργία val. 

Έτσι, χωρίς επιχειρήματα αυτή η λειτουργία val επιστρέφει σε εσάς ό, τι είναι ήδη στο πλαίσιο κειμένου, αλλά αν του δώσετε μια συμβολοσειρά, πρόκειται να λάβει αυτό το αλφαριθμητικό και το βάζουμε στο πλαίσιο κειμένου. Είμαι επιλέγοντας το πλαίσιο κειμένου της με τον ίδιο τρόπο. Το όνομά του είναι μέσα στο σύμβολο της μορφή-απόσπασμα. Τώρα είμαι αποστολή την αξία του χαρακτηριστικού-σύμβολο. Αυτό το πράγμα εδώ είναι νέα, αυτό $ (αυτό). Αυτό αναφέρεται είναι το στοιχείο που κάνει κλικ. Μπορούμε να δούμε ότι εδώ δεν είμαστε επισυνάπτοντας ένα συμβάν κλικ σε κάθε στοιχείο με μία κατηγορία υπόδειξη μεμονωμένα. Αντίθετα, είμαστε πλησιάζει αυτό το λίγο διαφορετικά. Αντί να λέμε κάθε φορά που κάτι μέσα από αυτό το div προτάσεις, το οποίο είναι ακριβώς θυμηθείτε το δοχείο για την εν λόγω κατάλογο, αν κάτι μέσα από αυτό το div πατηθεί και έχει μια τάξη πρόταση, Θέλω αυτό το γεγονός στη φωτιά. Βασικά τι σημαίνει αυτό που μπορούμε να κάνουμε είναι να μπορούμε να επαναχρησιμοποιούν το ίδιο χειρισμού συμβάντων για όλα τα πράγματα στη λίστα. Γι 'αυτό και δεν χρειάζεται να έχουν ένα πρόγραμμα χειρισμού συμβάντων για το πρώτο στοιχείο και ένα διαφορετικό χειρισμού συμβάντων για το δεύτερο στοιχείο. Μπορούμε να πούμε όχι, «θέλω το ίδιο χειρισμού συμβάντων για να ισχύουν για πάντα στη λίστα μου." Αλλά εμείς πρέπει με κάποιο τρόπο να γνωρίζουν ποιο είναι το στοιχείο που έγινε κλικ. Αυτό το "αυτό" λέξη-κλειδί αντιπροσωπεύει ακριβώς αυτό. Αυτό είναι το αντικείμενο που μόλις πατηθεί από τον χρήστη. Αν χτύπησα μόλις στο 3ο σύνδεση, αυτό αντιπροσωπεύει το στοιχείο του τρίτου συνδέσμου, πράγμα που σημαίνει ότι μπορώ να πάρω το χαρακτηριστικό του, δεδομένων-σύμβολο, που ξέρουμε πρέπει να περιέχει το σύμβολο που είναι συνδεδεμένες με την εταιρεία που μόλις κλικ. Αν άλμα πίσω στη σελίδα μας χρηματοδότηση, μπορούμε τώρα να δούμε ότι τη στιγμή που θα αρχίσετε να πληκτρολογείτε κάτι σαν MSFT, είμαστε πλέον να πάρει μόνο τα σύμβολα μετοχών, παίρνουμε τώρα τις πραγματικές εταιρείες. Αλλά όταν κάνω κλικ σε μία από αυτές τις εταιρείες, μπορούμε να δούμε ότι είμαστε πραγματικά οίκηση δεν το πλαίσιο κειμένου με το όνομα της εταιρείας αλλά με ό, τι είχε αποθηκευθεί στο εσωτερικό αυτών των χαρακτηριστικών στοιχείων. Και έτσι αν πραγματικά επιθεωρήσει ένα από αυτά τα στοιχεία από το δεξί κλικ και κάνοντας κλικ στην επιλογή Έλεγχος Element, μπορούμε πραγματικά να δούμε τι μοιάζει αυτό. 

Θυμηθείτε ότι αυτό είναι κάτι που έχουμε δημιουργήσει στο εσωτερικό του ότι για βρόχο όταν ήμασταν δημιουργία ότι η σειρά της HTML. Μπορούμε να δούμε εδώ ότι αυτά τα δεδομένα-σύμβολο έχει την αξία του MSFT, η οποία είναι μεγάλη. Αυτό είναι ό, τι περιμέναμε. Αυτό είναι το σύμβολο και αυτό είναι το πώς πήραμε την αξία που απαιτούνται για τη χρήση μέσα από αυτό το πλαίσιο κειμένου. Αυτό είναι αρκετό για τη μορφή απόσπασμα επειδή αυτό είναι το είδος της βαρετό. Ας κάνω μόνο μερικές γρήγορες βελτιώσεις στη σελίδα του χαρτοφυλακίου μας. Αν έχετε χρησιμοποιήσει CS50 Οικονομικών για λίγο και να αρχίσουν να αγοράζουν και να πωλούν πολλά από τα αποθέματα, τελικά ο πίνακας αυτός πρόκειται να πάρει αρκετά μεγάλο, και θα πάμε να θέλουν μια ταινία μετοχών, φυσικά. Όταν το τραπέζι είναι πραγματικά, πραγματικά μεγάλη, θα μπορούσε να είναι χρήσιμο για το χρήστη να προσπαθήσει να ψάξει πάνω. Μέσα από το πλαίσιο αναζήτησης αν αρχίσετε να πληκτρολογείτε κάτι σαν Disney και ψάχνει για Mickey Mouse απόθεμα μου, μπορούμε να δούμε ότι ο πίνακας είναι τώρα φιλτράρισμα με βάση αυτό που μόλις πληκτρολογήσατε μέσα Αυτή η λειτουργία μοιάζει εξαιρετικά περίπλοκη, αλλά είναι πραγματικά πολύ εύκολο με jQuery και JavaScript. Αυτό το αρχείο περιλαμβάνει portfolio.php ένα αρχείο JavaScript που ονομάζεται portfolio.js. Ας ρίξουμε μια ματιά σε αυτό. Έτσι, html, js, χαρτοφυλάκιο. Εδώ είναι όπου κάνουμε ότι ψάχνοντας στο τραπέζι. Το πρώτο πράγμα που πρέπει να κάνετε είναι να συνδέσετε ένα πρόγραμμα χειρισμού συμβάντων σε αυτό το πλαίσιο κειμένου γιατί ξέρουμε ότι θέλουμε λειτουργία φιλτραρίσματος μας στη φωτιά κάθε φορά που ο χρήστης πατήσει κάτι, γιατί δεν έχουμε χρόνο για τα κουμπιά αναζήτησης. Το πρώτο πράγμα που πρέπει να κάνουμε είναι να καταλάβω τι ο χρήστης ψάχνει για, ακριβώς όπως κάναμε πριν. Αυτό κλειδί αναφέρεται στην τρέχουσα στοιχείου ο χρήστης αλληλεπιδρά με. 

Επειδή ο χρήστης αλληλεπιδρά με το πλαίσιο αναζήτησης, $ Αυτό αποτελεί το πλαίσιο αναζήτησης, this.val έτσι μας δίνει ό, τι είναι μέσα από το πλαίσιο αναζήτησης, ο χρήστης αυτή τη στιγμή πληκτρολογώντας. Έτσι, τώρα αυτό που θέλουμε να κάνουμε είναι να θέλουμε να επαναλάβει σε όλες τις γραμμές εσωτερικό του πίνακα μας. Για να επιλέξετε όλες τις γραμμές στο τραπέζι μας, ότι έδωσα ένα αναγνωριστικό πίνακα του χαρτοφυλακίου πίνακα, και κάθε γραμμή αντιπροσωπεύεται από ένα στοιχείο TR, έτσι αυτό επιλογέα πρόκειται να επιστρέψει σε μένα μια μεγάλη σειρά του συνόλου των γραμμών στο τραπέζι μου. Τώρα θέλω να επαναλάβει ότι πάνω πίνακα. Θα μπορούσα να σας για ένα βρόχο, αλλά παρέχει πραγματικά jQuery μας το ωραίο λειτουργία που ονομάζεται "το καθένα". Τι κάνει το καθένα είναι το καθένα παίρνει ένα όρισμα, και ότι το επιχείρημα αυτό είναι μια λειτουργία. Τι πρόκειται να κάνουμε είναι να πρόκειται να εφαρμόσει αυτή τη λειτουργία σε κάθε στοιχείο μέσα από αυτή τη λίστα. Η λειτουργία αυτή παίρνει ένα επιχείρημα που είναι e, και όταν αυτή η λειτουργία εκτελείται, αυτό το e πρόκειται να αντικατασταθεί με την πρώτη σειρά, τότε η δεύτερη σειρά, και στη συνέχεια, η τρίτη σειρά. Με αυτόν τον τρόπο, αυτό είναι το ίδιο πράγμα με ένα τρέξιμο για βρόχο και στη συνέχεια υπολογίζει το τρέχον στοιχείο με βάση το εσωτερικό δείκτη σας για βρόχο. Σε κάθε επανάληψη, για καθένα από αυτά τα στοιχεία στον πίνακα, Θέλω να ελέγξετε αν το κείμενο του στοιχείου - το κείμενο του κυττάρου στο εσωτερικό της γραμμής - ταιριάζει με ό, τι ψάχνω για. Αυτό το μεγάλο μακρά σειρά των εντολών είναι το πώς θα μπορούσα να το κάνουμε αυτό. Πρώτον, και πάλι, αυτό αναφέρεται πλέον σε - γιατί είναι μέσα από μια νέα λειτουργία - αυτή είναι τώρα η τρέχουσα γραμμή στον πίνακα. Θέλω να πάρω την τρέχουσα γραμμή του πίνακα, και θέλω να πάρω όλα του τα παιδιά του. Θυμηθείτε, η DOM είναι ένα ιεραρχικό δέντρο, πράγμα που σημαίνει ότι τα στοιχεία έχουν ένα αριθμό των παιδιών. 

Αυτό. Λειτουργία τα παιδιά πρόκειται να επιστρέψει σε μένα πίσω μια σειρά από όλα τα στοιχεία που είναι τα παιδιά της, σε αυτήν την περίπτωση, μια σειρά στον πίνακα. Αυτό είναι απλά τα κύτταρα στο εσωτερικό της γραμμής. Απλά θέλω να αναζητήσετε πάνω από το πρώτο κύτταρο. Αυτό. Πρώτη λειτουργία λέει να μου δώσει το πρώτο στοιχείο στην εν λόγω σειρά. Στη συνέχεια, η λειτουργία κείμενο λέει φέρε μου ακριβώς τι είναι μέσα από αυτό το κελί από τότε που θέλετε να αναζητήσετε πάνω από αυτό το κείμενο. Τέλος, ας το μετατρέψει σε πεζά, έτσι μπορούμε να κάνουμε το κείμενο με πεζά ή κεφαλαία ερωτήματα. Τέλος, θέλουμε να δούμε αν αυτή η σειρά μέσα από ένα πίνακα περιέχει τη συμβολοσειρά που αναζητάτε. Η λειτουργία JavaScript σε indexOf κάνει ακριβώς αυτό. Δεν μας λέει αν ή όχι αυτή η συμβολοσειρά περιέχει ένα άλλο string. Αν είναι αλήθεια ότι το κελί περιέχει ό, τι ψάχνω για, τότε θα θέλετε να βεβαιωθείτε ότι είναι φαίνεται. Η μέθοδος show θα πει, "Εμφάνιση στοιχείο." Εάν αυτό δεν συμβαίνει, τότε αυτό σημαίνει ότι ό, τι ψάχνω για να μην περιέχεται μέσα σε αυτή τη γραμμή, και γι 'αυτό θέλω να κρύψει είναι από τον χρήστη. Αυτό επιτυγχάνει αυτό το όμορφο αποτέλεσμα φιλτραρίσματος, όπου πλέον βλέπουμε ολόκληρο τον πίνακα. Αν σας ενδιαφέρει το πώς να κάνει αυτό το ticker, καθώς, θα δημοσιεύσετε την πηγή σε απευθείας σύνδεση. Αλλά είναι πραγματικά απλή. JQuery έχει φοβερό μεθόδους για αυτά τα κινούμενα σχέδια και το χειρισμό ιδιότητες CSS. Έτσι, αυτό είναι για μένα. 

Τι βρίσκεται λοιπόν μπροστά; Όπως θα δείτε σε λίγες μέρες, η τελική πρόταση έργων οφείλεται. Η τελική πρόταση έργα θα σας κάνω μερικές ερωτήσεις, αλλά μεταξύ τους θα είναι τρεις ορόσημα - μία "καλή" ορόσημο, ένα ορόσημο μια καλύτερη, μια και ένα καλύτερο. Η ιδέα είναι πραγματικά να σας βοηθήσει να ρυθμίσετε τις προσδοκίες παιδιά σας έτσι ώστε ελάχιστα θα είστε ευχαριστημένοι με την απόδοση του τελικού σχεδίου σας και θα είναι "καλό" βαθμό που σας απασχολεί. Στη συνέχεια, όμως προς το συμφέρον του να πάρει να φτάσετε μόνο λίγο σε κάτι καλύτερο ή κάτι καλύτερο, θα επίσης να ταξινομήσετε του να σας ωθήσει προς την κατεύθυνση ότι, όπως καλά. Το CS50 Hack-a-thon, εν τω μεταξύ, είναι σε λίγες εβδομάδες. Συνήθως, κάνουμε αυτό με βάση την κλήρωση βάση λόγω του ενδιαφέροντος, αλλά οι πιθανότητες είναι ότι θα πάρει μερικές εκατοντάδες από εμάς σε λεωφορεία από την πλατεία του Χάρβαρντ κάτω για να Kendall Square, όπου η Microsoft έχει μια όμορφη εγκατάσταση εύστοχα αποκαλείται "NERD" - Νέα Αγγλία το Κέντρο Έρευνας και Ανάπτυξης. Θα φτάσετε εκεί γύρω 20:00 Θα έχουμε κάποια τρόφιμα. Περίπου μία το πρωί θα έχουμε λίγο περισσότερο φαγητό. Γύρω στις 5 π.μ. Αν είστε ακόμα ξύπνιοι θα το κεφάλι πάνω σε IHOP ή να πάρετε πίσω στην πανεπιστημιούπολη. Ο στόχος δεν είναι να βουτήξει στην τελική έργα μαζί με τους συμμαθητές του και το προσωπικό. Στη συνέχεια, λίγες μέρες αργότερα είναι η CS50 Fair, το οποίο είναι πραγματικά γραφτό να γίνει μια ευκαιρία για σας παιδιά να προβάλουν τη δουλειά σας και τα επιτεύγματα για το εξάμηνο ενώ τρίβει τους ώμους με το άλλο και να πάρει μια αίσθηση για το τι έκανε ο καθένας. Με αυτόν εν λόγω, θα ήθελα να ευχαριστήσω τον Tommy και στον Ιωσήφ, και εμείς θα σας δούμε τη Δευτέρα.  [Χειροκροτήματα]