1
00:00:00,000 --> 00:00:02,700
[Powered by Google Translate] [Εβδομάδα 9, Συνέχεια]

2
00:00:02,700 --> 00:00:05,160
[David J. Malan - Πανεπιστήμιο του Χάρβαρντ]

3
00:00:05,160 --> 00:00:07,020
[Αυτό είναι CS50. - CS50.TV]

4
00:00:07,940 --> 00:00:13,340
>> Αυτό είναι CS50. Αυτό είναι το τέλος της εβδομάδας 9. Σας ευχαριστώ πολύ.

5
00:00:13,340 --> 00:00:15,310
Τέλος. Εβδομάδα 9. Το πήρα.

6
00:00:15,310 --> 00:00:18,590
Σήμερα συνεχίζουμε τη συζήτησή μας σχετικά με τον προγραμματισμό web

7
00:00:18,590 --> 00:00:21,660
με το βλέμμα στραμμένο προς το τελικό σχέδιο, όχι επειδή έχετε να κάνετε κάτι web-based

8
00:00:21,660 --> 00:00:25,610
για την τελική έργα, αλλά επειδή είτε για τελική έργα ή μετά CS50

9
00:00:25,610 --> 00:00:29,000
αυτό είναι σίγουρα η κατεύθυνση προς την οποία σύγχρονο λογισμικό πρόκειται.

10
00:00:29,000 --> 00:00:31,770
Και όμως δεν είναι πραγματικά ένα εύκολο πράγμα.

11
00:00:31,770 --> 00:00:35,040
Στην πραγματικότητα, ένα από τα δυσκολότερα πράγματα που πρέπει να κάνετε είναι η πτυχή του σχεδιασμού.

12
00:00:35,040 --> 00:00:38,600
>> Για παράδειγμα, από το σχεδιασμό εννοούμε πάρει όντως τη διεπαφή χρήστη

13
00:00:38,600 --> 00:00:40,420
ή η εμπειρία του χρήστη δεξιά.

14
00:00:40,420 --> 00:00:43,200
Τολμώ να πω - και ξέρουμε από μια πρόσφατη σειρά πρόβλημα

15
00:00:43,200 --> 00:00:45,960
όταν μερικοί από εσάς προβλήθηκε κολικόπονος σας σχετικά με κάποιο κομμάτι του λογισμικού

16
00:00:45,960 --> 00:00:49,000
ή το υλικό που σας εξοργίζει, είτε στην πανεπιστημιούπολη ή απενεργοποίηση -

17
00:00:49,000 --> 00:00:51,930
υπάρχει πολλές περιοχές έξω εκεί, υπάρχει μια πολύ υλικό εκεί έξω,

18
00:00:51,930 --> 00:00:53,900
ότι το είδος του είναι χάλια.

19
00:00:53,900 --> 00:00:58,730
Αλλά η πραγματικότητα είναι ότι κάνει τα πράγματα που είναι εύκολο στη χρήση ακόμη ισχυρό είναι, ωστόσο,

20
00:00:58,730 --> 00:01:00,550
είναι μια πολύ δύσκολη πρόκληση.

21
00:01:00,550 --> 00:01:03,680
Έτσι για σήμερα ζήτησα από τον Ιωσήφ και τον Tommy να έρθεις μαζί μου εδώ

22
00:01:03,680 --> 00:01:06,680
έτσι ώστε να μπορούμε να έχουμε μια συνομιλία, τόσο σχετικά με το σχεδιασμό

23
00:01:06,680 --> 00:01:09,090
και τι είδους διαδικασίες της σκέψης θα πρέπει να αρχίσει να περάσει από το κεφάλι σας

24
00:01:09,090 --> 00:01:12,040
όταν σχεδιάζετε τελικά τα έργα σας, τις μελλοντικές σας προσπάθειες.

25
00:01:12,040 --> 00:01:15,040
Και στη συνέχεια, με τη βοήθεια του Tommy θα εξετάσουμε μερικές από τις λεπτομέρειες της υλοποίησης.

26
00:01:15,040 --> 00:01:18,440
Πώς μπορεί να έχετε κάποιο όραμα σε χαρτί ή στο μυαλό σας

27
00:01:18,440 --> 00:01:20,760
ότι μπορείτε στη συνέχεια να εκτελέσει programmatically

28
00:01:20,760 --> 00:01:24,030
χρησιμοποιώντας κάποια από τις τεχνολογίες και τις τεχνικές που έχουμε μόλις άρχισαν να μιλούν για,

29
00:01:24,030 --> 00:01:29,080
δηλαδή JavaScript και κάτι ακόμη νεότερος, δηλαδή AJAX, JavaScript ασύγχρονη.

30
00:01:29,080 --> 00:01:32,950
Αυτό σας επιτρέπει να δημιουργήσετε όλες τις πιο δυναμικές της διεπαφής χρήστη

31
00:01:32,950 --> 00:01:35,780
από γοητευτικός όλο και περισσότερα δεδομένα σταδιακά από ένα διακομιστή.

32
00:01:35,780 --> 00:01:38,560
Έτσι, θα δούμε ορισμένες από αυτές, καθώς και αποσπάσματα σήμερα.

33
00:01:38,560 --> 00:01:41,800
Ως μέρος, αν σας ενδιαφέρει σε συγκέντρωση στην επιστήμη των υπολογιστών

34
00:01:41,800 --> 00:01:45,010
minoring ή στην επιστήμη των υπολογιστών, γνωρίζουμε ότι αυτήν την Παρασκευή το μεσημέρι

35
00:01:45,010 --> 00:01:48,750
σε Maxwell Dworkin 221 θα υπάρχει εκδήλωση πίτσα

36
00:01:48,750 --> 00:01:50,780
όπου μπορείτε να μάθετε λίγο περισσότερα για την επιστήμη των υπολογιστών.

37
00:01:50,780 --> 00:01:54,860
Στο δρόμο έξω από την πόρτα σας σήμερα θα είστε σε θέση να πάρει μια ανεπίσημη οδηγός για CS στο Χάρβαρντ.

38
00:01:54,860 --> 00:01:57,290
Θα το βάλετε στα δοχεία απορριμμάτων έξω στο ύψος της μέσης

39
00:01:57,290 --> 00:01:59,750
έτσι ώστε αν θέλετε να αρπάξει αυτό και να μάθουν λίγο περισσότερα για την CS,

40
00:01:59,750 --> 00:02:02,480
που θα είναι εκεί για σας, όπως ήταν στην εβδομάδα 0.

41
00:02:02,480 --> 00:02:06,500
Επίσης, αν θα θέλατε να ενωθούν μαζί μας για μεσημεριανό γεύμα CS50 αυτή την Παρασκευή στις 1:15 μ.μ.,

42
00:02:06,500 --> 00:02:09,800
κατευθυνθείτε προς cs50.net/lunch.

43
00:02:09,800 --> 00:02:13,260
Χωρίς άλλη καθυστέρηση, σας δίνω τη διδασκαλία τους συναδέλφους Joseph Ong.

44
00:02:13,260 --> 00:02:19,190
Γεια σας. [Χειροκροτήματα]

45
00:02:19,190 --> 00:02:20,770
Ευχαριστώ.

46
00:02:20,770 --> 00:02:24,780
Την πρώτη φορά που έμαθα για το σχεδιασμό ήταν σε μια κατηγορία που ονομάζεται εδώ CS179.

47
00:02:24,780 --> 00:02:28,040
>> Ο καθηγητής κατά τη στιγμή μας είπε την ιστορία για άλλη καθηγητής

48
00:02:28,040 --> 00:02:31,640
ο οποίος είχε πάει σε ένα ξενοδοχείο και χρησιμοποίησε τις στρόφιγγες.

49
00:02:31,640 --> 00:02:35,630
Μπορεί κάποιος να μου πει ποια είναι τα 2 κουμπιά στην αριστερή και δεξιά κάνει;

50
00:02:35,630 --> 00:02:39,080
[Φοιτητής] Ζεστό και κρύο. >> Ζεστό και κρύο. Καλή.

51
00:02:39,080 --> 00:02:41,430
Αυτό που περιμένουν κανονικά, έτσι δεν είναι;

52
00:02:41,430 --> 00:02:46,960
Αυτό καθηγητής μετά τη χρήση του βρύση θέλει να κάνει ένα ντους, και προχωρεί για να χρησιμοποιήσετε αυτό.

53
00:02:46,960 --> 00:02:51,310
Σκέφτεται την αριστερή και η δεξιά πλευρά είναι για ζεστό και κρύο, έτσι δεν είναι;

54
00:02:51,310 --> 00:02:55,470
Αλλά μπορεί κάποιος να μου πει ποια είναι αυτά πραγματικά να κάνουμε;

55
00:02:55,470 --> 00:02:58,060
Οποιαδήποτε χέρια;

56
00:02:58,060 --> 00:03:01,740
[Ακούγεται ανταπόκριση των φοιτητών] >> Μια πρόταση είναι;

57
00:03:01,740 --> 00:03:05,860
[Ακούγεται ανταπόκριση των φοιτητών] Θερμοκρασία >>;

58
00:03:05,860 --> 00:03:10,460
Έτσι, ένας από αυτούς ελέγχει τη θερμοκρασία και τα άλλα στοιχεία ελέγχου; >> [Φοιτητής] Η πίεση του νερού.

59
00:03:10,460 --> 00:03:12,350
Η πίεση του νερού. Καλή.

60
00:03:12,350 --> 00:03:15,100
Αυτό καθηγητής μπαίνει σε αυτό και, νομίζοντας ότι ελέγχουν ζεστό και κρύο,

61
00:03:15,100 --> 00:03:21,470
μετατρέπει το σωστό, που νομίζει ότι είναι για το ζεστό, σε όλη τη διαδρομή μέχρι

62
00:03:21,470 --> 00:03:23,560
επειδή θέλει να λάβουν ένα ζεστό ντους.

63
00:03:23,560 --> 00:03:28,100
Λοιπόν, αυτά δεν ταιριάζουν πραγματικά, έτσι παίρνει αυτό δεν είναι πολύ διασκεδαστική εμπειρία

64
00:03:28,100 --> 00:03:31,110
να είναι σε ένα κρύο ντους, και όλοι γνωρίζουμε τι αισθάνεται.

65
00:03:31,110 --> 00:03:33,620
Αυτό είναι ένα παράδειγμα ενός ελαττώματος σχεδιασμού.

66
00:03:33,620 --> 00:03:37,040
Τι εννοώ με αυτό είναι η προσδοκία του από τη βρύση

67
00:03:37,040 --> 00:03:39,420
δεν ταιριάζει με αυτό που βγήκε από το ντους,

68
00:03:39,420 --> 00:03:41,780
το οποίο είναι το είδος του ατυχές για αυτόν.

69
00:03:41,780 --> 00:03:44,990
Έτσι, αυτό είναι ένα παράδειγμα ενός ελαττώματος σχεδιασμού που συμβαίνει στην πραγματική ζωή.

70
00:03:44,990 --> 00:03:48,020
Αλλά βλέπουμε όλα τα είδη των άλλων, καθώς αυτά.

71
00:03:48,020 --> 00:03:50,390
Είμαστε πιθανόν να μην τους οπαδούς του συστήματος MBTA.

72
00:03:50,390 --> 00:03:55,560
Πρόκειται για ένα σύστημα μετρό στο Λονδίνο πραγματικότητα, η οποία λέει, "Αυτό το κουμπί δεν είναι σε χρήση."

73
00:03:55,560 --> 00:04:00,220
Γιατί είναι ακόμα εκεί; Γιατί ακόμη και φροντίδα;

74
00:04:00,220 --> 00:04:02,810
Όταν ήμουν παιδί, είναι η τεχνολογία καταλαβαίνω ένα στο σπίτι,

75
00:04:02,810 --> 00:04:05,050
κάθε φορά που ο υπολογιστής θα συντριβή, η μαμά μου θα έρθει σε μένα,

76
00:04:05,050 --> 00:04:07,060
δείχνοντάς μου την οθόνη και με ρωτούσαν τι συνέβη.

77
00:04:07,060 --> 00:04:09,210
>> Ακόμα δεν ξέρω τι σημαίνει αυτό.

78
00:04:11,890 --> 00:04:14,700
[Γέλια] Τι;

79
00:04:16,950 --> 00:04:18,019
[Γέλια]

80
00:04:18,720 --> 00:04:23,050
Μερικές φορές αισθανόμαστε σαν προγραμματιστές λογισμικού είναι ακριβώς συρτή μας.

81
00:04:23,050 --> 00:04:28,460
Καθώς οι χρήστες είμαστε όπως, "Τι συμβαίνει; Κάποιος να μας πει."

82
00:04:28,460 --> 00:04:32,140
Αυτό όλοι έρχεται κάτω σε ένα θέμα του σχεδιασμού.

83
00:04:32,140 --> 00:04:34,650
Σχεδιασμός, όπως μπορούμε να δούμε, δεν είναι καθαρά για την αισθητική,

84
00:04:34,650 --> 00:04:37,230
δεν είναι για το πώς φαίνονται τα πράγματα.

85
00:04:37,230 --> 00:04:41,720
Βλέπουμε εδώ ότι αυτό το μικρό pop-up εδώ φαίνεται πραγματικά πολύ ωραία.

86
00:04:41,720 --> 00:04:45,290
Έχει μια σκιά πτώση στο παρασκήνιο, δεν έχει σύνορα ακτίνες συμβαίνει.

87
00:04:45,290 --> 00:04:47,550
Είναι το είδος του αρκετά.

88
00:04:47,550 --> 00:04:51,480
Δεν είναι πολύ καλά σχεδιασμένο, γιατί δεν είναι πολύ φιλικό προς το χρήστη.

89
00:04:51,480 --> 00:04:54,920
Αυτή η μικρή pop-up που έρχεται δεν πραγματικά να μου δώσει οποιαδήποτε πληροφορία

90
00:04:54,920 --> 00:04:58,450
σχετικά με το τι συμβαίνει, δεν μου πεις τίποτα καθώς ο χρήστης

91
00:04:58,450 --> 00:05:01,400
σχετικά με το πώς να ανακτήσει από το σφάλμα.

92
00:05:01,400 --> 00:05:05,190
Θέλουμε να σκεφτούμε τα πράγματα ότι ο σχεδιασμός δεν είναι.

93
00:05:05,190 --> 00:05:06,670
Κατ 'αρχάς, δεν είναι αισθητική.

94
00:05:06,670 --> 00:05:10,800
Είναι, επίσης, δεν γέμιση app σας με τους τόνους των περιττών λειτουργικότητα.

95
00:05:10,800 --> 00:05:14,890
Αν είστε ένα ταϊλανδέζικο εστιατόριο, τότε μάλλον δεν θέλουν να είναι ένα οδοντίατρο την ίδια στιγμή.

96
00:05:14,890 --> 00:05:17,720
Και με Facebook Ερωτήσεις, όχι ότι πολλοί άνθρωποι που χρησιμοποιούνται

97
00:05:17,720 --> 00:05:21,130
και δεν ήταν πραγματικά στον πυρήνα του ό, τι έχτιζαν.

98
00:05:21,130 --> 00:05:24,200
Και γι 'αυτό είναι καλό να σκεφτούμε όχι τόσο για την ποσότητα των πραγμάτων

99
00:05:24,200 --> 00:05:26,390
ότι είστε σε θέση να την αίτησή σας, αλλά η ποιότητα

100
00:05:26,390 --> 00:05:28,910
και πώς θέλετε να κάνετε αυτή την εμπειρία χρήστη καλύτερα

101
00:05:28,910 --> 00:05:32,540
με πραγματικά βελτίωση μετά από αυτό που έχετε ήδη.

102
00:05:32,540 --> 00:05:37,040
>> Με λίγα λόγια, ο σχεδιασμός μας λέει τι πρέπει να οικοδομήσουμε.

103
00:05:37,040 --> 00:05:41,950
Για παράδειγμα, αν χτίζουμε κάτι που ας ψάξει τα πράγματα,

104
00:05:41,950 --> 00:05:45,970
όπως το Google, για παράδειγμα, θα πρέπει να κάνουμε τα πράγματα με έναν τρόπο

105
00:05:45,970 --> 00:05:48,950
που απαιτεί από το χρήστη να λαμβάνει πολλά κλικ για να φτάσετε στο τι θέλουν,

106
00:05:48,950 --> 00:05:52,580
ή θα πρέπει να το κάνουμε με έναν τρόπο, για παράδειγμα, με το Google Instant ή autocomplete

107
00:05:52,580 --> 00:05:54,970
η οποία μας επιτρέπει να πάρετε τα αποτελέσματα μας πιο γρήγορα;

108
00:05:54,970 --> 00:05:58,740
Μηχανικών περιλαμβάνει, όπως ο Tommy θα σας δείξει, στην πραγματικότητα το κτίριο.

109
00:05:58,740 --> 00:06:01,890
Υπάρχουν πολλά είδη του σχεδιασμού.

110
00:06:01,890 --> 00:06:06,070
Για παράδειγμα, εάν είστε οικοδόμηση κάτι να αναπτύξετε κάτι

111
00:06:06,070 --> 00:06:09,770
σε μια χώρα του Τρίτου Κόσμου όπου δεν υπάρχει ηλεκτρικό ρεύμα ή πολύ ότι πολύ την τεχνολογία,

112
00:06:09,770 --> 00:06:11,440
θα πρέπει να σχεδιάσουν ό, τι χτίζετε

113
00:06:11,440 --> 00:06:14,210
με τρόπο που να δίνει εύκολα πρόσβαση στους ανθρώπους εκεί.

114
00:06:14,210 --> 00:06:18,290
Αλλά τι είδους άλλες αποφάσεις του σχεδιασμού θα μπορούσε να υπάρχει

115
00:06:18,290 --> 00:06:21,850
ή θα μπορούσε να συμμετέχει σε κάτι τέτοιο;

116
00:06:23,690 --> 00:06:25,660
Ναι. Βλέπω ένα χέρι.

117
00:06:25,660 --> 00:06:37,200
[Ακούγεται ανταπόκριση των φοιτητών] Δικαίωμα >>. Ακριβώς. Η προσβασιμότητα είναι ένα πράγμα.

118
00:06:37,200 --> 00:06:40,870
Πολλοί άνθρωποι δεν σκέφτονται, "Τι γίνεται με τους χρήστες μου;"

119
00:06:40,870 --> 00:06:43,160
όπως και τα άκρα του φάσματος δύο.

120
00:06:43,160 --> 00:06:47,770
Έχω χρήστες που μπορεί να έχουν ειδικές ανάγκες που δεν σκέφτομαι

121
00:06:47,770 --> 00:06:50,590
και το μόνο που σκέφτομαι για το σχεδιασμό για το γενικό χρήστη.

122
00:06:50,590 --> 00:06:52,630
Το Διαδίκτυο είναι προσβάσιμο από όλους στις μέρες μας,

123
00:06:52,630 --> 00:06:54,870
και εγώ θα πρέπει να το σχεδιασμό για αυτούς τους ανθρώπους, καθώς και.

124
00:06:54,870 --> 00:06:58,620
Τι είδους από άλλες αποφάσεις του σχεδιασμού μπορεί να σας κάνει;

125
00:06:58,620 --> 00:07:00,690
Ναι. >> [Φοιτητής] Κόστος.

126
00:07:00,690 --> 00:07:02,680
Κόστος. Πολύ καλό.

127
00:07:02,680 --> 00:07:08,060
Ένα άλλο πράγμα που θα μπορούσαμε να βασίζουν τις αποφάσεις μας σχετικά με το σχεδιασμό είναι το κόστος.

128
00:07:08,060 --> 00:07:13,130
Αν είστε επιχείρηση, θέλετε να οικοδομήσουμε κάτι που δεν παίρνει πολύ το κόστος για την παραγωγή

129
00:07:13,130 --> 00:07:17,720
αλλά μπορεί να πωλήσει σε ιδιαίτερα υψηλό κόστος ή μπορεί να μας πάρει κάποιο κέρδος.

130
00:07:17,720 --> 00:07:21,540
>> Αυτά είναι όλα τα διαφορετικά είδη του σχεδιασμού, αλλά όταν χτίζουμε κάτι στο Διαδίκτυο

131
00:07:21,540 --> 00:07:25,120
ή όταν χτίζουμε κάτι που κατά πάσα πιθανότητα δεν κοστίζει τόσο πολύ να δημιουργηθεί τώρα,

132
00:07:25,120 --> 00:07:28,630
όπως εφαρμογές του Διαδικτύου - δεν χρειάζεται να ρίξει πολλά κεφάλαια σε αυτό

133
00:07:28,630 --> 00:07:30,900
για να κάνει κάτι που λειτουργεί πραγματικά -

134
00:07:30,900 --> 00:07:33,490
τι είμαστε περισσότερο ανησυχούν για είναι η εμπειρία του χρήστη.

135
00:07:33,490 --> 00:07:36,390
Καλούμε αυτόν τον χρήστη επίκεντρο του σχεδιασμού.

136
00:07:36,390 --> 00:07:41,550
Ουσιαστικά αυτό που επικεντρωμένος στο χρήστη σχεδιασμός περιλαμβάνει βάζοντας τον εαυτό σας είναι στα παπούτσια των χρηστών σας.

137
00:07:41,550 --> 00:07:44,870
Αν κάποιος υπογράφει επάνω για αυτό που είμαι οικοδόμηση,

138
00:07:44,870 --> 00:07:48,250
που έχουν προφανώς έρχονται σε συγκεκριμένη εφαρμογή μου με ένα στόχο στο μυαλό,

139
00:07:48,250 --> 00:07:50,280
με μια εργασία που θέλετε να ολοκληρώσετε.

140
00:07:50,280 --> 00:07:53,650
Και η δουλειά σας είναι όχι μόνο να τους βοηθήσει να ολοκληρώσει αυτό το έργο

141
00:07:53,650 --> 00:07:57,930
αλλά να τους βοηθήσει να ολοκληρώσει αυτό το έργο με τρόπο που να είναι αποτελεσματική, διαισθητικό,

142
00:07:57,930 --> 00:08:01,900
και, όπως είπε κάποιο πρόσωπο εκεί, προσβάσιμα.

143
00:08:01,900 --> 00:08:03,750
Τι σημαίνει απόδοσης;

144
00:08:03,750 --> 00:08:08,050
Αποδοτικότητα σημαίνει πόσο γρήγορα χρήστη μου ολοκληρώσει την αποστολή που μου περιβάλλον.

145
00:08:08,050 --> 00:08:11,650
Έχει λάβει πολλά κλικ για να πάρετε από το ένα μέρος στο άλλο;

146
00:08:11,650 --> 00:08:14,630
Είναι κουραστικό; Μήπως πρέπει να εκτελέσετε πολλές επαναλαμβανόμενες εργασίες;

147
00:08:14,630 --> 00:08:17,140
Θέλουμε να κάνουμε αυτή τη διαδικασία όσο το δυνατόν αποτελεσματικότερη

148
00:08:17,140 --> 00:08:20,070
έτσι ώστε να μην χρειάζεται να κάνουν αυτά τα είδη των πραγμάτων.

149
00:08:20,070 --> 00:08:24,230
Όσο για intuitiveness, δηλαδή, για παράδειγμα, εάν ένας χρήστης αναζητά διεπαφή μου,

150
00:08:24,230 --> 00:08:27,240
είναι εύκολο για αυτούς να πάρουν από τόπο σε τόπο;

151
00:08:27,240 --> 00:08:30,390
Είναι εύκολο για αυτούς να καταλάβω τι πρέπει να κάνετε κλικ στο interface μου

152
00:08:30,390 --> 00:08:33,770
προκειμένου να επιτευχθεί ο στόχος ή εργασία που θέλουν να επιτύχουν;

153
00:08:33,770 --> 00:08:37,520
>> Και τέλος, ως ένα άτομο είπε εκεί πέρα, η προσβασιμότητα είναι πολύ σημαντικό.

154
00:08:37,520 --> 00:08:39,640
[Αρσενικό ομιλητή] Έρχεται με την προσβασιμότητα για τα πράγματα όπως το όραμα,

155
00:08:39,640 --> 00:08:42,740
όπως το πώς μπορώ να σχεδιάσουν πραγματικά κάτι για κάποιον ο οποίος είναι τυφλός;

156
00:08:42,740 --> 00:08:46,460
Αχ. Για τους ανθρώπους που δεν μπορούν να δουν καθόλου, έχουμε κάτι που ονομάζεται αναγνώστες οθόνης.

157
00:08:46,460 --> 00:08:49,070
Αυτό που πρέπει να κάνουμε είναι θα πρέπει να κατασκευάσετε την ιστοσελίδα σας με έναν τρόπο

158
00:08:49,070 --> 00:08:52,020
ότι, για παράδειγμα, συγκεκριμένες τεχνολογίες αυτό που λέμε -

159
00:08:52,020 --> 00:08:53,590
Υπάρχουν πολλά πράγματα τώρα.

160
00:08:53,590 --> 00:08:55,660
Νομίζω ότι υπάρχουν προγράμματα ανάγνωσης οθόνης που ονομάζεται JAWS.

161
00:08:55,660 --> 00:08:58,410
Πολλά από αυτά τα πράγματα βασίζονται σε αυτό που αποκαλούμε κανόνες περιοχή

162
00:08:58,410 --> 00:09:02,010
προκειμένου να αναγιγνώσκονται στο χρήστη αυτό που είναι παρούσα στην σελίδα.

163
00:09:02,010 --> 00:09:05,480
Για εκείνους τους ανθρώπους που δεν μπορούν να δουν, θα πρέπει να βεβαιωθείτε ότι αυτά τα προγράμματα ανάγνωσης οθόνης

164
00:09:05,480 --> 00:09:09,130
μπορεί πραγματικά να πάρει το περιεχόμενο της σελίδας και μπορεί να δείξει πραγματικά τους χρήστες σας,

165
00:09:09,130 --> 00:09:13,630
αν δεν μπορείτε να δείτε, τουλάχιστον μπορείτε να καταλάβετε ακόμα το περιεχόμενο της σελίδας.

166
00:09:13,630 --> 00:09:16,190
Ναι. Εντάξει.

167
00:09:16,190 --> 00:09:23,410
Αρκετά μιλάμε για καλό σχεδιασμό. Ας μιλήσουμε για κακό σχεδιασμό.

168
00:09:23,410 --> 00:09:25,220
Αυτά είναι πράγματα που δεν πρέπει να κάνετε.

169
00:09:25,220 --> 00:09:27,890
Μπορεί κάποιος να μου πει για τις εμπειρίες τους με Craigslist

170
00:09:27,890 --> 00:09:32,190
και τι νομίζετε ότι δεν είναι τόσο μεγάλος για αυτό το σχέδιο;

171
00:09:33,690 --> 00:09:36,430
Ναι. >> [Φοιτητής] Νομίζω ότι υπάρχουν πάρα πολλές λέξεις σε μια περιοχή.

172
00:09:36,430 --> 00:09:39,350
Πάρα πολλές λέξεις, έτσι δεν είναι; Εντελώς συντριπτική.

173
00:09:39,350 --> 00:09:42,400
Θα έρθει σε αυτή τη σελίδα και είστε χαιρετίστηκε με ένα σωρό πράγματα εδώ

174
00:09:42,400 --> 00:09:43,860
αυτό δεν θα μπορούσε ακόμη και να σας πειράζει.

175
00:09:43,860 --> 00:09:47,010
Για παράδειγμα, ζείτε σε ένα κράτος που δεν αρχίζουν με το γράμμα.

176
00:09:47,010 --> 00:09:48,690
Ας πούμε ότι ζείτε στο Τέξας ή κάτι τέτοιο.

177
00:09:48,690 --> 00:09:53,790
>> Θα πρέπει να μετακινηθείτε προς τα κάτω στη σελίδα για να πάρει στη θέση που βρίσκονται.

178
00:09:53,790 --> 00:10:00,320
Είμαι από τη Βοστώνη, οπότε επιτρέψτε μου να δούμε στη Μασαχουσέτη. Πού είναι Μασαχουσέτη;

179
00:10:00,320 --> 00:10:03,270
Ω, είναι ακριβώς εδώ. Ω, είναι Βοστώνη. Εντάξει.

180
00:10:03,270 --> 00:10:09,070
Ας ρίξουμε μια ματιά στη Βοστώνη. [Γέλια]

181
00:10:09,070 --> 00:10:12,250
Αρκετά μεγάλη, έτσι δεν είναι;

182
00:10:12,250 --> 00:10:16,400
Awkward πράγματα εκεί πέρα. [Γέλια]

183
00:10:17,320 --> 00:10:19,470
Ας πούμε ότι ψάχνω κάπου για να ζήσουν.

184
00:10:19,470 --> 00:10:24,130
Πόσοι άνθρωποι έχουν πράγματι χρησιμοποιηθεί Craigslist; Τόνοι από εσάς.

185
00:10:24,130 --> 00:10:30,960
Υπάρχουν αρκετά κακές τρόποι για να εξετάσουμε αυτό το θέμα, αλλά ας ρίξουμε μια ματιά σε αυτό.

186
00:10:35,130 --> 00:10:38,970
Ποια είναι η διαφορά μεταξύ img και pic; Μπορεί κάποιος να μου πει;

187
00:10:41,350 --> 00:10:42,830
Πραγματικά υπάρχει καμία διαφορά.

188
00:10:42,830 --> 00:10:47,710
Σημαίνουν ακριβώς το ίδιο πράγμα, αλλά έχουν διαφορετικές ετικέτες για τους για κάποιο λόγο.

189
00:10:48,980 --> 00:10:53,560
Αν κάνω κλικ στο Έχει εικόνας, δεν συμβαίνει τίποτα στη σελίδα.

190
00:10:53,560 --> 00:10:57,490
Εγώ πραγματικά πρέπει να κάνετε κλικ πάλι Αναζήτηση για να συμβεί κάτι.

191
00:10:57,490 --> 00:11:02,430
Τι θα μπορούσε να είναι μια καλύτερη σχεδιαστική απόφαση που θα μπορούσε να γίνει εκεί;

192
00:11:03,820 --> 00:11:08,030
Αν είμαι κάνοντας κλικ σε αυτό το φίλτρο, εγώ κατά πάσα πιθανότητα θέλετε να φιλτράρετε από τη συγκεκριμένη δράση

193
00:11:08,030 --> 00:11:09,970
ή ότι η συγκεκριμένη κατηγορία.

194
00:11:09,970 --> 00:11:14,450
Έτσι, αντί να χρειάζεται να πατήσετε αναζήτηση και πάλι, θα μπορούσα απλά αυτόματα κάνει το φιλτράρισμα

195
00:11:14,450 --> 00:11:17,060
είδος του στυλ του Google, όπου το κάνουν αμέσως.

196
00:11:17,060 --> 00:11:20,440
[Malan] Αλλά μην αποτελεί, όπως έχουμε δει μέχρι στιγμής θα πρέπει να υποβληθεί σωματικά

197
00:11:20,440 --> 00:11:23,170
πατώντας Enter ή τουλάχιστον το πάτημα ενός κουμπιού;

198
00:11:23,170 --> 00:11:26,830
Όπως έχετε δει μέχρι τώρα, που έχετε να κάνετε κλικ στο Υποβολή για να κάνουν αυτά τα πράγματα.

199
00:11:26,830 --> 00:11:30,090
>> Αλλά, όπως ο Tommy θα σας δείξει σε ένα δεύτερο, στην πραγματικότητα υπάρχουν τρόποι για σας

200
00:11:30,090 --> 00:11:33,010
έτσι ώστε όταν κάνετε κλικ σε αυτό το πράγμα μπορεί να στείλει αυτόματα

201
00:11:33,010 --> 00:11:38,840
αυτό που λέμε μια αίτηση AJAX και να πάρετε πίσω τα δεδομένα και να φιλτράρετε τα αποτελέσματά σας αμέσως.

202
00:11:38,840 --> 00:11:41,340
Υπάρχουν τόνοι από τα πράγματα που είναι λάθος με αυτό το interface.

203
00:11:41,340 --> 00:11:43,530
[Malan] Μπορείτε να ψάξετε για το Cambridge;

204
00:11:43,530 --> 00:11:47,030
Υπάρχει κάτι ελαφρώς ανώμαλη εδώ, όπου μπορείτε νοιάζονται για Κέιμπριτζ

205
00:11:47,030 --> 00:11:54,790
ακόμη και παίρνετε Westford, Spring Hill, West Newton και τα παρόμοια.

206
00:11:54,790 --> 00:11:57,930
Μάλλον δεν είναι ιδανική. Μάλλον δεν >> ιδανικό.

207
00:11:57,930 --> 00:12:03,900
Πώς μπορεί να είμαι σε θέση να κάνουν την εμπειρία του χρήστη καλύτερη σε αυτή τη συγκεκριμένη σελίδα;

208
00:12:03,900 --> 00:12:07,340
Ναι. >> [Φοιτητής] Οδηγίες.

209
00:12:07,340 --> 00:12:09,500
Εντάξει. Οδηγίες σε ποιο είδος της αίσθησης;

210
00:12:09,500 --> 00:12:14,630
[Φοιτητής] Για παράδειγμα, ένα πράγμα για πρώτη φορά οι χρήστες που δεν γνωρίζουν καν τι είναι Craigslist

211
00:12:14,630 --> 00:12:17,320
ή δεν ξέρετε τι είστε υποτίθεται ότι πρέπει να κάνει.

212
00:12:17,320 --> 00:12:20,150
Δεξιά. Έτσι, εξηγώντας τι Craigslist είναι σε αυτή τη σελίδα είναι σημαντική.

213
00:12:20,150 --> 00:12:23,490
Μπορούμε να πούμε τι πραγματικά τους χρήστες αυτής της σελίδας είναι πραγματικά για.

214
00:12:23,490 --> 00:12:27,090
Αν είμαι επισκέπτονται μόνο αυτό, βλέπω ένα σωρό θέσεις. Εγώ δεν ξέρω καν τι σημαίνουν.

215
00:12:27,090 --> 00:12:29,730
Αλλά το πιο σημαντικό, απλά βλέπει αυτό το περιβάλλον,

216
00:12:29,730 --> 00:12:35,530
θυμάμαι είχα να μετακινηθείτε προς τα κάτω ένα σωρό πράγματα για να βρείτε μια συγκεκριμένη κοινότητα

217
00:12:35,530 --> 00:12:37,560
ότι πραγματικά νοιαζόταν για το θέμα αυτό.

218
00:12:37,560 --> 00:12:39,820
Τι είναι ένας γρηγορότερος τρόπος θα μπορούσα να το κάνουμε αυτό; Ναι.

219
00:12:39,820 --> 00:12:43,290
[Φοιτητής] Χωρίστε τα σε περιοχές ανατολικά, δυτικά. Εντάξει >>.

220
00:12:43,290 --> 00:12:47,460
Θα μπορούσα να τους χωρίζουν σε περισσότερες κατηγορίες, που θα μπορούσε να με βοηθήσει να καθορίσει ταχύτερη

221
00:12:47,460 --> 00:12:49,820
πώς να πάρει τη συγκεκριμένη θέση.

222
00:12:49,820 --> 00:12:54,510
[Φοιτητής] Βάλτε ένα drop-down λίστα. Δικαίωμα >>. Εντάξει.

223
00:12:54,510 --> 00:12:58,240
Θα μπορούσα να χρησιμοποιήσω ένα drop-down μενού, γιατί έχουμε ένα σταθερό σύνολο των πραγμάτων

224
00:12:58,240 --> 00:13:00,100
και θα μπορούσαμε να τους δείξουμε σε ένα μενού drop-down.

225
00:13:00,100 --> 00:13:02,240
Με αυτόν τον τρόπο δεν καταλαμβάνουν τόσο πολύ χώρο στην οθόνη.

226
00:13:02,240 --> 00:13:05,630
Αλλά ακόμα καλύτερο από αυτό, τι μπορούμε να κάνουμε;

227
00:13:05,630 --> 00:13:09,220
Ναι. >> [Ακούγεται ανταπόκριση των φοιτητών] >> Μπορείτε να πείτε ότι και πάλι; >> [Φοιτητής] πλαίσιο αναζήτησης.

228
00:13:09,220 --> 00:13:11,260
Ναι, ένα πλαίσιο αναζήτησης. Αυτό είναι μεγάλη.

229
00:13:11,260 --> 00:13:16,430
Αυτό που μπορούμε να κάνουμε είναι πραγματικά αν κοιτάξουμε πίσω στο διαφάνειες, πλαίσιο αναζήτησης.

230
00:13:16,430 --> 00:13:21,520
Autocomplete. Πολύ εύκολος τρόπος για να αναζητήσετε μέσα από τα αποτελέσματα που ξέρετε ότι είναι σε ένα σύνολο.

231
00:13:21,520 --> 00:13:25,980
Αν αρχίσετε να πληκτρολογείτε BO, απλά δείξτε μου όλα τα αποτελέσματα που έχουν BO μέσα από αυτά.

232
00:13:25,980 --> 00:13:29,030
Με αυτόν τον τρόπο θα μπορεί πολύ εύκολα να βρείτε το συγκεκριμένο που θέλω να πάω να

233
00:13:29,030 --> 00:13:32,390
αντί να χρειάζεται να μετακινηθείτε μέσα από αυτό το πραγματικά μεγάλο κατάλογο.

234
00:13:32,390 --> 00:13:37,450
>> Αυτά είναι όλα τα είδη των πραγματικά προσιτοί καρποί ότι κάποιος που εφαρμόζει Craigslist

235
00:13:37,450 --> 00:13:42,500
μπορεί πραγματικά να κάνει για να κάνουν την εμπειρία στο δικτυακό τόπο πολύ καλύτερα για συγκεκριμένο χρήστη τους.

236
00:13:42,500 --> 00:13:46,370
Εντάξει. Αρκετά μιλάμε για κακές ιστοσελίδες.

237
00:13:46,370 --> 00:13:49,410
Ας μιλήσουμε για το Facebook.

238
00:13:50,880 --> 00:13:54,390
Όταν το Facebook βγήκε, και ιδιαίτερα φωτογραφίες στο Facebook,

239
00:13:54,390 --> 00:13:57,870
υπήρχαν πολλές άλλες υπηρεσίες κατά το χρόνο που θα μπορούσαν να κάνουν ακριβώς τα ίδια πράγματα.

240
00:13:57,870 --> 00:14:00,740
Θα μπορούσαν να οργανώσετε τις φωτογραφίες σας σε άλμπουμ.

241
00:14:00,740 --> 00:14:03,360
Τι θα μπορούσατε να κάνετε είναι να μπορείτε να τις οργανώσετε σε ομάδες, καθώς και.

242
00:14:03,360 --> 00:14:06,070
Θα μπορούσατε να τους οργανώσει κατά ημερομηνία. Θα μπορούσατε να κάνετε όλα αυτά τα συγκεκριμένα πράγματα.

243
00:14:06,070 --> 00:14:11,710
Αλλά Ξέρει κανείς τι έκανε στο Facebook φωτογραφίες εκραγεί τη στιγμή που κυκλοφόρησε;

244
00:14:11,710 --> 00:14:15,080
Ναι. >> [Φοιτητής] Ετικέτες. Ετικέτες >>. Ακριβώς.

245
00:14:15,080 --> 00:14:21,300
Έχουμε εδώ Milo, ο οποίος είναι ο σκύλος μασκότ μας με την μπαντάνα CS50.

246
00:14:21,300 --> 00:14:24,810
Μπορείτε να δείτε ότι έχουμε αυτή τη δυνατότητα tagging στη μέση.

247
00:14:24,810 --> 00:14:28,240
Και τι έκανε στο Facebook φωτογραφίες τόσο ενδιαφέρον από την άποψη της χρηστικότητας

248
00:14:28,240 --> 00:14:34,130
είναι ότι πραγματικά επέτρεψε στους ανθρώπους μέσω αυτού να αναμείξει τους φίλους τους στις φωτογραφίες τους.

249
00:14:34,130 --> 00:14:37,680
Για το Facebook, καθώς η ιστοσελίδα τους είναι ιδιαίτερα κοινωνικά,

250
00:14:37,680 --> 00:14:40,750
είναι για την οικοδόμηση αυτού του είδους κοινωνική ατμόσφαιρα.

251
00:14:40,750 --> 00:14:42,620
Αυτό βελτίωσε την εμπειρία των φωτογραφιών πολύ περισσότερο

252
00:14:42,620 --> 00:14:46,390
επειδή θα μπορούσε πραγματικά να αρχίσουμε να λέμε, "Αυτές είναι συνδέσεις μεταξύ των ανθρώπων,

253
00:14:46,390 --> 00:14:49,220
και αυτοί είναι οι φωτογραφίες για τους ανθρώπους που πραγματικά νοιάζονται για. "

254
00:14:49,220 --> 00:14:52,200
Μέρος του είναι επίσης είδος ναρκισσισμού.

255
00:14:52,200 --> 00:14:54,980
Οι άνθρωποι ήθελαν να με ετικέτα σε φωτογραφίες και τέτοια πράγματα.

256
00:14:54,980 --> 00:14:58,510
Αν και αυτό δεν είναι απαραίτητα ένα καλό ανθρώπινο χαρακτηριστικό,

257
00:14:58,510 --> 00:15:01,910
την ίδια στιγμή που είναι με βάση τις καλές αποφάσεις για το σχεδιασμό

258
00:15:01,910 --> 00:15:04,860
επειδή οι άνθρωποι πραγματικά νοιάζονται για τα πράγματα όπως αυτό.

259
00:15:04,860 --> 00:15:07,190
Έτσι, αυτό είναι φωτογραφίες στο Facebook.

260
00:15:07,190 --> 00:15:09,800
>> Αλλά ας μιλήσουμε Facebook γενικότερα.

261
00:15:09,800 --> 00:15:13,400
Είμαι βέβαιος ότι πολλοί άνθρωποι εδώ έχουν απόψεις για το Facebook,

262
00:15:13,400 --> 00:15:16,430
και οι δύο καλές αποφάσεις για το σχεδιασμό και κακές αποφάσεις σχεδιασμού.

263
00:15:16,430 --> 00:15:20,270
Ας διέξοδο ή να είναι ευτυχισμένος.

264
00:15:23,480 --> 00:15:26,450
Έλα. Ξέρω ότι όλοι σας χρησιμοποιούν το Facebook.

265
00:15:26,450 --> 00:15:30,970
Κάποιος πρέπει να έχει κάτι κακό να πει ή κάτι καλό να πει για αυτό. Ναι.

266
00:15:30,970 --> 00:15:35,060
[Φοιτητής] Στην Επικαιρότητα Feed υπάρχουν πολλά πράγματα που δεν ενδιαφέρονται πραγματικά για.

267
00:15:35,060 --> 00:15:37,740
Η ροή ειδήσεων έχει δείξει πολλά πράγματα που ίσως δεν νοιάζονται για.

268
00:15:37,740 --> 00:15:41,660
Έχετε φίλους στο Facebook οι οποίοι δεν έχουν συναντηθεί για 2 ή 3 χρόνια

269
00:15:41,660 --> 00:15:43,860
και βλέπετε τα αποτελέσματα τα νέα τους μέχρι βρεθώ σε ζωοτροφές ειδήσεις σας

270
00:15:43,860 --> 00:15:45,870
και δεν ενδιαφέρονται πραγματικά γι 'αυτό.

271
00:15:45,870 --> 00:15:48,700
Το Facebook έχει γίνει πραγματικά μια προσπάθεια να κάνουν αυτό το καλύτερο,

272
00:15:48,700 --> 00:15:53,150
και που έχουν πραγματικά προσπάθησαν να πιέσουν σχετικά αποτελέσματα στην κορυφή της τροφοδοσίας ειδήσεων από τα τέλη

273
00:15:53,150 --> 00:15:58,300
έτσι ώστε να δείτε πραγματικά τα πράγματα από φίλους που έχουν σχέση με σας ή τους στενούς φίλους σας.

274
00:15:58,300 --> 00:16:01,110
Οτιδήποτε άλλο; Ναι.

275
00:16:01,110 --> 00:16:06,400
[Ακούγεται ανταπόκριση των φοιτητών] >> Μπορείτε να πείτε ότι και πάλι;

276
00:16:06,400 --> 00:16:10,140
[Φοιτητής] Οι διαφημίσεις είναι σχετικά διακριτικές. >> Με ποια έννοια;

277
00:16:10,140 --> 00:16:16,370
[Ακούγεται ανταπόκριση των φοιτητών] Δεν έχουν φως στην οθόνη, όπως και πανό.

278
00:16:16,370 --> 00:16:17,760
Εντάξει. Αυτό είναι καλό.

279
00:16:17,760 --> 00:16:25,030
Αν θυμάστε το Διαδίκτυο από τη δεκαετία του '90 - >> [Malan] ήμουν εκεί. >> Ήταν εκεί. [Γέλια]

280
00:16:25,030 --> 00:16:29,210
Ίσως να θυμάστε αναβοσβήνει υπόβαθρα GIFs, sparkly πράγματα,

281
00:16:29,210 --> 00:16:31,570
GeoCities είδος στυλ των πραγμάτων.

282
00:16:31,570 --> 00:16:34,080
Αυτό δεν είναι πραγματικά ένα παράδειγμα ενός καλού σχεδιασμού

283
00:16:34,080 --> 00:16:36,690
γιατί είναι πραγματικά αποσπούν την προσοχή από το περιεχόμενο.

284
00:16:36,690 --> 00:16:39,590
Ο δικτυακός τόπος του Γέιλ τέχνης που χρησιμοποιείται για να έχουν κινούμενες εικόνες GIF ως φόντο τους

285
00:16:39,590 --> 00:16:41,800
και εσείς δεν θα μπορούσε να διαβάσει τίποτα στη σελίδα,

286
00:16:41,800 --> 00:16:44,870
αλλά υποθέτω ότι κάποιος πραγματικά να μιλήσει τους και τώρα είναι λίγο διαφορετική.

287
00:16:44,870 --> 00:16:48,940
[Malan] Είναι πολύ καλύτερα τώρα. >> Είναι πολύ καλύτερα τώρα, όπως μπορείτε να δείτε. >> [Malan] Α, ναι.

288
00:16:48,940 --> 00:16:56,020
Ακριβώς μεγάλη, ακριβώς - Ναι. Εντάξει.

289
00:16:56,020 --> 00:17:00,560
>> Μέρος της είναι, επίσης, κάνει τη σελίδα σας πιθανώς πολύ μινιμαλιστικό και πολύ κατανοητή

290
00:17:00,560 --> 00:17:05,690
έτσι τα πράγματα σχετικά με τη ροή σελίδα με έναν τρόπο που είναι πολύ λογικό και δεν παίρνει με τον τρόπο του άλλου.

291
00:17:05,690 --> 00:17:11,849
Τι είδους από άλλα πράγματα είναι καλά για το Facebook ή κακό για το Facebook;

292
00:17:11,849 --> 00:17:15,730
Ας ρίξουμε μια συνομιλία του σχεδιασμού εδώ.

293
00:17:19,470 --> 00:17:21,339
Αχ. Πού; Ναι.

294
00:17:21,339 --> 00:17:25,640
[Φοιτητής] Το νέο σύστημα Timeline σας δίνει τη δυνατότητα να αναζητήσετε το προφίλ του ατόμου για το παρελθόν τους.

295
00:17:25,640 --> 00:17:28,119
Ooh, Timeline.

296
00:17:28,119 --> 00:17:30,280
Timeline είναι ένα μεγάλο πράγμα, διότι σας επιτρέπει να κοτσάνι τους φίλους σας

297
00:17:30,280 --> 00:17:33,300
πίσω όταν ήταν στο γυμνάσιο.

298
00:17:35,160 --> 00:17:38,060
Timeline είναι καλό, γιατί σας επιτρέπει να φιλτράρετε με περιεχόμενο πολύ πιο γρήγορα,

299
00:17:38,060 --> 00:17:41,500
σας επιτρέπει να βρείτε τα πράγματα που διαφορετικά θα είχαν λάβει μια πραγματικά πολύ χρόνο για να βρουν

300
00:17:41,500 --> 00:17:45,840
μόλις κύλιση προς τα πάνω και προς τα κάτω, επάνω, επάνω, επάνω, επάνω, επάνω, σαν να πηγαίνει πίσω στο χρόνο.

301
00:17:45,840 --> 00:17:48,910
Στη συνέχεια, όμως, υπάρχει επίσης ένα είδος μειονέκτημα σε ότι αφορά την εμπειρία του χρήστη.

302
00:17:48,910 --> 00:17:51,190
Τι θα μπορούσε να είναι;

303
00:17:51,190 --> 00:17:56,780
Μεγάλη λέξη που αρχίζει με P-R. >> [Φοιτητής] Προστασίας Προσωπικών Δεδομένων. >> Προστασίας Προσωπικών Δεδομένων, έτσι δεν είναι;

304
00:17:56,780 --> 00:17:59,970
Προστασία προσωπικών δεδομένων είναι ένα τεράστιο ζήτημα εμπειρία του χρήστη.

305
00:17:59,970 --> 00:18:07,190
Αυτό είναι ένα από τα πράγματα που μου αρέσει περισσότερο για το Facebook σήμερα. [Γέλια]

306
00:18:07,190 --> 00:18:09,000
[Malan] Όπως κάνω τώρα.

307
00:18:09,000 --> 00:18:11,380
David δεν είχε συνειδητοποιήσει αυτό πραγματικά συνέβη μέχρι χθες.

308
00:18:11,380 --> 00:18:14,560
Έτσι, τώρα ξέρει ότι κάθε φορά που τον συνομιλήσετε ξέρω ότι είναι ήδη με αγνοεί.

309
00:18:14,560 --> 00:18:16,880
[Malan] Το περίεργο ήταν μέρος ήμουν αγνοώντας τον στην πραγματικότητα,

310
00:18:16,880 --> 00:18:21,040
και δεν ήξερα ήξερε ήμουν να τον αγνοεί. [Γέλια]

311
00:18:21,040 --> 00:18:24,030
Η ιδιωτικότητα είναι ένα τεράστιο θέμα.

312
00:18:24,030 --> 00:18:28,670
Μπορεί κανείς εδώ να μου πει τι μπορεί να είναι κακό για την προστασία της ιδιωτικής ζωής στο Facebook

313
00:18:28,670 --> 00:18:32,270
εκτός από το γεγονός ότι κάνει τέτοια πράγματα;

314
00:18:32,270 --> 00:18:37,240
Τι είναι ιδιαίτερα δύσκολο να γίνει με σεβασμό της ιδιωτικής ζωής στο Facebook;

315
00:18:37,240 --> 00:18:40,340
Αυτό το είδος του είναι ο κορυφαίος ερώτηση.

316
00:18:41,680 --> 00:18:43,930
Ναι. >> [Φοιτητής] Απόκρυψη φωτογραφίες σας από ορισμένους ανθρώπους.

317
00:18:43,930 --> 00:18:46,170
Δεξιά. Ακριβώς, για να κρύψει τις φωτογραφίες σας από ορισμένους ανθρώπους.

318
00:18:46,170 --> 00:18:51,290
Έχουν αυτό το μικρό, μικρό κουμπί στην πάνω δεξιά που σας επιτρέπει να αλλάξετε την ιδιωτική ζωή του μια φωτογραφία.

319
00:18:51,290 --> 00:18:56,360
Οι επιλογές της ιδιωτικής ζωής τους ποικίλλει σημαντικά μεταξύ των διαφόρων ειδών των μενού.

320
00:18:56,360 --> 00:18:59,510
>> Έχουν πάρει πολύ καλύτερα γι 'αυτό πρόσφατα, αλλά χρησιμοποιείται για να είναι η περίπτωση

321
00:18:59,510 --> 00:19:04,870
ότι κάθε φορά που ήθελαν να εμποδίσουν τους φίλους σας από το να βλέπουν φωτογραφίες,

322
00:19:04,870 --> 00:19:08,280
θα πρέπει να περάσουν από μια πολύ περίπλοκη διαδικασία 5-βήμα, όπως είναι,

323
00:19:08,280 --> 00:19:11,150
επιτρέψτε μου κλικ σε αυτό το σύνδεσμο, τώρα επιτρέψτε μου και πάλι κλικ, επιτρέψτε μου και πάλι κλικ,

324
00:19:11,150 --> 00:19:13,420
επιτρέψτε μου να καθορίσετε ποια άνθρωποι δεν μπορούν να δουν τις φωτογραφίες μου.

325
00:19:13,420 --> 00:19:17,250
Αυτό δεν είναι ιδιαίτερα καλή από την πλευρά του Facebook

326
00:19:17,250 --> 00:19:20,530
γιατί τόσα πολλά για την εμπειρία του χρήστη είναι στην πραγματικότητα δίνοντάς τους την ελευθερία

327
00:19:20,530 --> 00:19:22,460
να ελέγχουν ό, τι οι άνθρωποι μπορούν να δουν.

328
00:19:22,460 --> 00:19:25,550
Καλούμε αυτόν τον έλεγχο και την ελευθερία των χρηστών.

329
00:19:25,550 --> 00:19:31,090
Αν δεν είστε αφήσει οι χρήστες σας ότι με έναν τρόπο που να είναι αποτελεσματική και διαισθητική,

330
00:19:31,090 --> 00:19:34,570
τότε εμπειρία του χρήστη σας δεν είναι πραγματικά τόσο μεγάλη σε όλα.

331
00:19:34,570 --> 00:19:38,200
 Θα σας παιδιά ήθελα να πω κάτι για το Facebook;

332
00:19:38,700 --> 00:19:41,420
Πώς μπορώ να το απενεργοποιήσω;

333
00:19:41,420 --> 00:19:46,290
[Ong] Δεν μπορείτε να την απενεργοποιήσετε, και αυτό είναι ένα τεράστιο ελάττωμα χρηστικότητα από την πλευρά του Facebook.

334
00:19:46,290 --> 00:19:49,410
Αυτό το χαρακτηριστικό - που πραγματικά κοίταξε σε αυτό χθες -

335
00:19:49,410 --> 00:19:53,940
είναι είτε ότι δεν μπορείτε να το κάνετε ή να είναι θαμμένος κάπου πολύ, πολύ βαθιά

336
00:19:53,940 --> 00:19:58,050
στις εσοχές του Facebook, γιατί δεν μπορώ να καταλάβω πώς να απενεργοποιήσετε αυτήν τη λειτουργία σε όλα.

337
00:19:58,050 --> 00:20:00,400
[Malan] Αλλά μερικές φορές αυτές οι αποφάσεις δεν είναι προφανής

338
00:20:00,400 --> 00:20:03,890
επειδή εσείς μας έχετε δώσει πολλές χρήσιμες πληροφορίες για διάφορες εφαρμογές CS50

339
00:20:03,890 --> 00:20:05,710
και ιστοσελίδες ότι η πορεία χρησιμοποιεί.

340
00:20:05,710 --> 00:20:10,260
Εμείς δεν έχουν εφαρμόσει όλα αυτά τα αιτήματα και τις προτάσεις.

341
00:20:10,260 --> 00:20:14,550
>> Μέρος αυτό είναι για να πάρει τόσα πολλά αιτήματα ότι είναι μια συνάρτηση του χρόνου,

342
00:20:14,550 --> 00:20:17,070
αλλά μερικές φορές κάνουμε απλά μια συνειδητή απόφαση, όπως,

343
00:20:17,070 --> 00:20:19,830
"Σας ευχαριστώ για την πρόταση, αλλά διαφωνούμε."

344
00:20:19,830 --> 00:20:24,350
Τόσο πώς μπορείτε πραγματικά να αποφασίσει τι πρέπει να κάνετε αν οι χρήστες σας νομίζετε ότι πρέπει να κάνετε κάτι

345
00:20:24,350 --> 00:20:28,110
ακόμα και αν δεν είναι απαραίτητο;

346
00:20:28,110 --> 00:20:32,360
Είναι μια λεπτή ισορροπία ανάμεσα στην πραγματικότητα να ακούτε τι λένε οι χρήστες σας

347
00:20:32,360 --> 00:20:35,840
και έχει πραγματικά κάποιο είδος της γραμμής που λέτε,

348
00:20:35,840 --> 00:20:37,750
"Εμείς δεν πρόκειται να κάνουμε ό, τι λένε αυτοί οι χρήστες."

349
00:20:37,750 --> 00:20:42,520
Και κυρίως, νομίζω ότι υπήρχε ένα απόσπασμα από τον Henry Ford, που συνοψίζει την μέχρι αρκετά καλά.

350
00:20:42,520 --> 00:20:47,130
"Αν είχα ρωτήσει τους ανθρώπους τι ήθελαν, θα είχαν είπαν ότι ήθελαν γρηγορότερα άλογα."

351
00:20:47,130 --> 00:20:51,840
Μπορεί κανείς να ταξινομήσετε δώσουμε έμφαση, εκτός από ό, τι ότι πραγματικά σημαίνει απόσπασμα;

352
00:20:51,840 --> 00:20:56,060
Δεν είναι μόνο ότι οι χρήστες ξέρουν τι θέλουν,

353
00:20:56,060 --> 00:20:59,180
αλλά είναι περισσότερο ότι -

354
00:20:59,180 --> 00:21:02,720
[Φοιτητής] Δεν ξέρω τι είναι δυνατόν.

355
00:21:02,720 --> 00:21:06,140
Εν μέρει δεν ξέρουν τι είναι δυνατόν.

356
00:21:07,880 --> 00:21:11,440
Tease ότι εκτός λίγο περισσότερο. Τι εννοείτε με αυτό;

357
00:21:11,440 --> 00:21:21,340
[Ακούγεται ανταπόκριση των φοιτητών]

358
00:21:21,340 --> 00:21:25,770
Αυτό είναι καλό. Αυτό που νομίζω ότι προσπαθούμε να πούμε εδώ είναι ότι οι άνθρωποι ξέρουν τι θέλουν.

359
00:21:25,770 --> 00:21:28,050
Θέλουν γρηγορότερα άλογα.

360
00:21:28,050 --> 00:21:29,840
Αυτό που πραγματικά θέλουν είναι η δυνατότητα να κινηθεί πιο γρήγορα,

361
00:21:29,840 --> 00:21:32,310
αλλά δεν ξέρουν πραγματικά το μέσο με το οποίο για να επιτευχθεί αυτό.

362
00:21:32,310 --> 00:21:36,330
Όταν έρθει στους χρήστες σας και τους χρήστες σας να σας πω κάτι

363
00:21:36,330 --> 00:21:39,700
και να σας πω, «Θέλουμε αυτά τα χαρακτηριστικά και αυτά τα χαρακτηριστικά και αυτά τα χαρακτηριστικά,"

364
00:21:39,700 --> 00:21:42,650
δεν θέλετε να σκεφτείτε κατ 'ανάγκην, "Επιτρέψτε μου να προχωρήσει

365
00:21:42,650 --> 00:21:44,720
"Και να εφαρμόσουν αυτό που ρητά λένε,"

366
00:21:44,720 --> 00:21:48,610
αλλά τι θέλετε να σκεφτούμε είναι, "Τι είδους ιδέες μπορώ να πάρω από αυτό;"

367
00:21:48,610 --> 00:21:50,450
Τι πραγματικά θέλουν;

368
00:21:50,450 --> 00:21:55,560
>> Και από εκεί ό, τι μπορείτε να κάνετε είναι να σχεδιάσει κάτι που ικανοποιεί τα αιτήματα αυτά

369
00:21:55,560 --> 00:22:00,340
αλλά όχι κατ 'ανάγκη με τον τρόπο που ο χρήστης αναμένει ότι θα ικανοποιηθεί.

370
00:22:00,340 --> 00:22:03,830
Έτσι, για κάτι σαν τελικός έργα, σε πολύ πραγματικούς όρους,

371
00:22:03,830 --> 00:22:07,900
τι είναι ένα χρήσιμο ευρετική όταν πρόκειται να κάνει κάτι καλύτερο,

372
00:22:07,900 --> 00:22:10,630
ειδικά αν ο σχεδιαστής έχει αυτή την αλαζονεία γι 'αυτόν

373
00:22:10,630 --> 00:22:14,360
το οποίο μπορείτε είδους ξέρετε τι είναι καλύτερο, μπορείτε να πάρετε είσοδο από τους χρήστες σας,

374
00:22:14,360 --> 00:22:16,580
αλλά πώς μπορείτε πραγματικά να πάει για να πάρει ότι η ανατροφοδότηση;

375
00:22:16,580 --> 00:22:21,610
Στην τελική έργα, πολύ συγκεκριμένα, τι παράγει τα βέλτιστα αποτελέσματα εδώ;

376
00:22:21,610 --> 00:22:25,030
Τι παράγει τα βέλτιστα αποτελέσματα - και θα πάω πάνω από αυτό σε ένα δεύτερο -

377
00:22:25,030 --> 00:22:29,190
είναι η διαδικασία της ανάπτυξης και στη συνέχεια τον έλεγχο και στη συνέχεια την επανάληψη.

378
00:22:29,190 --> 00:22:32,020
Τι εννοώ με δοκιμή είναι συνήθως όταν σχεδιάζετε κάτι

379
00:22:32,020 --> 00:22:36,970
νομίζετε ότι είναι αρκετά καλή, όπως, «Είμαι τόσο μεγάλο σχεδιαστή. Όλοι πρόκειται να αγαπούν αυτό."

380
00:22:36,970 --> 00:22:41,600
Και τότε το βάλετε εκεί έξω και οι άνθρωποι πραγματικά δεν αρέσει για κάποιο λόγο.

381
00:22:41,600 --> 00:22:46,820
Τι έχετε να κάνετε είναι να έχετε να πάρετε τα μέρη των πραγμάτων που οι άνθρωποι κάνουν σαν

382
00:22:46,820 --> 00:22:49,180
και αναδιοργανώσουμε τα πράγματα που οι άνθρωποι δεν τους αρέσει.

383
00:22:49,180 --> 00:22:53,080
Ακούγεται σαν μια πολύ προφανής διαδικασία, αλλά αυτή η διαδικασία συνεχώς επανάληψη

384
00:22:53,080 --> 00:22:55,980
πάνω από ό, τι έχετε ήδη κατασκευαστεί είναι μια διαδικασία που σας βοηθά να

385
00:22:55,980 --> 00:22:59,730
όχι μόνο βελτιώσετε τις ικανότητές του σχεδιασμού σας, αλλά και σας βοηθά να βελτιώσετε το σχεδιασμό

386
00:22:59,730 --> 00:23:03,790
έτσι ώστε οι άνθρωποι να εκτιμήσουν πραγματικά το προϊόν σας, ακόμη περισσότερο από ό, τι έκαναν πριν.

387
00:23:03,790 --> 00:23:07,390
>> Θα πάω σε πιο συγκεκριμένα παραδείγματα για το τι μπορείτε να κάνετε στην πραγματικότητα.

388
00:23:07,390 --> 00:23:11,390
Ως ένα είδος τελευταίο παράδειγμα ενός προϊόντος, ας ρίξουμε μια ματιά στο καγιάκ.

389
00:23:11,390 --> 00:23:14,970
ΚΑΓΙΑΚ όταν βγήκε ήταν πολύ, πολύ δημοφιλής.

390
00:23:14,970 --> 00:23:18,760
Μπορεί κανείς να μαντέψει γιατί;

391
00:23:18,760 --> 00:23:20,950
Ποια είναι τα είδη των πραγμάτων που σας αρέσει γι 'αυτό, αν έχετε χρησιμοποιήσει

392
00:23:20,950 --> 00:23:23,990
ή ποια είναι τα είδη των πραγμάτων που δεν σας αρέσουν;

393
00:23:23,990 --> 00:23:31,590
Ναι. >> [Ακούγεται ανταπόκριση των φοιτητών] >> Εντάξει.

394
00:23:31,590 --> 00:23:34,730
Αυτό είναι μέρος του έχει αφήσει ο χρήστης να έχει ένα ερώτημα που είναι πιο επεκτατική

395
00:23:34,730 --> 00:23:38,150
από μια πολύ περιοριστική, όπως, "Θα πρέπει να επιλέξετε την ημερομηνία έναρξης σας

396
00:23:38,150 --> 00:23:39,810
"Και θα πρέπει να επιλέξετε την ημερομηνία λήξης."

397
00:23:39,810 --> 00:23:44,910
Στην πραγματικότητα, σας επιτρέπει να είναι ευέλικτο γι 'αυτό και σας δίνει όλες τις πτήσεις στην εν λόγω περιοχή.

398
00:23:44,910 --> 00:23:46,730
Οτιδήποτε άλλο;

399
00:23:46,730 --> 00:23:50,530
[Φοιτητής] Αυτά περιλαμβάνουν τα τέλη στην τιμή.

400
00:23:50,530 --> 00:23:53,330
Κάνουν περιλαμβάνουν τις αμοιβές των τιμών.

401
00:23:53,330 --> 00:23:56,720
Οι φόροι και τα πράγματα πραγματικά να πάω κατευθείαν σε αυτή την τιμή στην επάνω αριστερή

402
00:23:56,720 --> 00:24:00,710
έτσι δεν είστε παρασυρθείτε ώστε να σκέφτεται ότι είστε πραγματικά πληρώνουν για μια πτήση 240 δολάρια

403
00:24:00,710 --> 00:24:03,280
όταν είναι πραγματικά $ 330.

404
00:24:03,280 --> 00:24:06,200
Οτιδήποτε άλλο; Ναι.

405
00:24:06,200 --> 00:24:10,140
[Ακούγεται ανταπόκριση των φοιτητών]

406
00:24:10,140 --> 00:24:14,610
Δεν είμαι σίγουρος εάν πραγματικά σας επιτρέπουν να το κάνουμε αυτό.

407
00:24:14,610 --> 00:24:18,310
Μπορεί να κάνω λάθος.

408
00:24:18,310 --> 00:24:23,360
Αυτό θα μπορούσε να είναι ένα ενδιαφέρον πράγμα, αν θέλετε να βάλετε περισσότερο βάρος σε συγκεκριμένα φίλτρα

409
00:24:23,360 --> 00:24:27,000
έτσι ώστε να ωθεί τα αποτελέσματα που σχετίζονται με αυτό το φίλτρο προς την κορυφή.

410
00:24:27,000 --> 00:24:31,920
Αλλά μπορεί κάποιος να μου πει τι είναι τόσο ειδικό σχετικά με αυτό αριστερή πλευρά;

411
00:24:31,920 --> 00:24:39,540
Πώς παραδοσιακά αναζητήσετε μια πτήση σε μια υπηρεσία παροχής Internet πριν από αυτό;

412
00:24:41,600 --> 00:24:44,650
>> Ναι. >> [Ακούγεται ανταπόκριση των φοιτητών] >> Μπορείτε να πείτε ότι -

413
00:24:44,650 --> 00:24:47,530
[Φοιτητής] Κάθε αεροπορική εταιρεία. Ναι >>. Κάθε αεροπορική εταιρεία έχει τη δική του ιστοσελίδα.

414
00:24:47,530 --> 00:24:50,110
Αυτό εδραιώνει τα πράγματα. Και;

415
00:24:50,110 --> 00:24:52,190
[Φοιτητής] Ξέρεις ακριβώς τι ώρα φεύγεις.

416
00:24:52,190 --> 00:24:54,460
Ξέρεις ακριβώς τι ώρα φεύγεις,

417
00:24:54,460 --> 00:24:59,380
αλλά σχετίζονται με τα φίλτρα ειδικότερα.

418
00:25:00,710 --> 00:25:03,540
Επιτρέψτε μου να σηκώσει ΚΑΓΙΑΚ.

419
00:25:11,490 --> 00:25:14,020
Θεέ μου, pop-ups. Κακή εμπειρία του χρήστη.

420
00:25:14,020 --> 00:25:17,230
Τι συμβαίνει όταν μετακινήσετε αυτό το ρυθμιστικό;

421
00:25:17,230 --> 00:25:21,010
[Φοιτητής] Αυτόματες ενημερώσεις. >> [Ong] Αυτόματες ενημερώσεις.

422
00:25:21,010 --> 00:25:23,440
Αυτό είναι κάτι που είναι πολύ σημαντικό.

423
00:25:23,440 --> 00:25:25,380
Πριν από αυτό, κάθε φορά που ήθελε να αναζητήσετε μια πτήση,

424
00:25:25,380 --> 00:25:28,410
θα έπρεπε να βάλει στη θέση εισόδου σας, την τοποθεσία σας έξοδο, πατήστε το πλήκτρο αναζήτησης,

425
00:25:28,410 --> 00:25:31,190
θα επεξεργάζεται και δείχνουν ότι τα αποτελέσματά σας.

426
00:25:31,190 --> 00:25:34,120
Αν θέλετε να αλλάξετε το ερώτημά σας, θα πρέπει να πατήσετε δύο φορές πίσω,

427
00:25:34,120 --> 00:25:39,770
εισέλθει σε ένα νέο ερώτημα από το μηδέν, και στη συνέχεια να το κάνουμε ξανά και ξανά.

428
00:25:39,770 --> 00:25:43,910
Το συμπαθητικό πράγμα για κάτι τέτοιο είναι ότι χρησιμοποιεί ένα πολύ [ακατάληπτο] πράγμα στη μέση.

429
00:25:43,910 --> 00:25:46,230
Κάθε φορά που κάνουμε κάτι τέτοιο, θα πυροβολεί από ένα αίτημα

430
00:25:46,230 --> 00:25:48,420
και επιστρέφει όλα τα αποτελέσματα αμέσως.

431
00:25:48,420 --> 00:25:51,680
Αυτού του είδους η άμεση ανατροφοδότηση είναι κάτι που έκανε δημοφιλές ΚΑΓΙΑΚ

432
00:25:51,680 --> 00:25:55,910
γιατί είναι πολύ εύκολο για μένα να αλλάξει μόνο ερώτημα μου

433
00:25:55,910 --> 00:25:58,890
και να καταλάβω τα πράγματα που είναι γύρω από ένα συγκεκριμένο εύρος

434
00:25:58,890 --> 00:26:01,950
χωρίς να χρειάζεται να πάει μπροστά και πίσω, εμπρός και πίσω, εμπρός και πίσω.

435
00:26:01,950 --> 00:26:05,200
Έτσι, αυτά είναι όλα τα είδη των πραγμάτων που θέλετε να σκεφτείτε όταν είστε σχεδιασμό ιστοσελίδας σας.

436
00:26:05,200 --> 00:26:08,930
Πώς μπορώ να το καθιστούν πολύ αποδοτικό για τους χρήστες μου να περάσει ό, τι εργάζεστε

437
00:26:08,930 --> 00:26:13,010
και να πάρει την τελική στόχο τους το συντομότερο δυνατόν;

438
00:26:13,010 --> 00:26:16,430
[Malan] Και στο σημείο Ιωσήφ νωρίτερα σχετικά με τους χρήστες δεν είναι απαραίτητο να γνωρίζουν τι θέλουν,

439
00:26:16,430 --> 00:26:18,640
με βάση αυτά που εσείς τώρα ξέρετε για HTML

440
00:26:18,640 --> 00:26:22,780
και έχετε πλαίσια ελέγχου, κουμπιά επιλογής, επιλέξτε μενού, πεδία εισαγωγής και τα παρόμοια,

441
00:26:22,780 --> 00:26:26,140
πώς θα εφαρμόσουν την έννοια του να πάρει μια ώρα έναρξης για μια πτήση;

442
00:26:26,140 --> 00:26:30,030
>> Ποια από αυτές τις διαφόρων μηχανισμών UI θα χρησιμοποιήσετε;

443
00:26:30,030 --> 00:26:34,100
Αν γνωρίζετε ακριβώς το ποσό της HTML που διδάχθηκε πριν

444
00:26:34,100 --> 00:26:39,070
και ξέρετε οι είσοδοι είναι κουμπιά επιλογής, πλαίσια ελέγχου, drop-down, και στη θέση εισόδου,

445
00:26:39,070 --> 00:26:43,320
τι θα φυσική επιλογή σας ήταν για να πάρει τις ημερομηνίες;

446
00:26:43,320 --> 00:26:48,670
[Φοιτητής] εισόδου. Είσοδος >>. Ή ίσως ακόμη και ένα drop-down με όλες τις ημερομηνίες, έτσι δεν είναι;

447
00:26:48,670 --> 00:26:53,170
Έτσι, με πιο περίπλοκους μηχανισμούς UI, όπως αυτό στην αριστερή πλευρά που μπορείτε να εφαρμόσετε,

448
00:26:53,170 --> 00:26:55,500
μπορείτε να κάνετε αυτή τη διαδικασία πολύ πιο έξυπνο με ένα ρυθμιστικό

449
00:26:55,500 --> 00:27:01,020
επειδή ο χρόνος είναι συνεχής, και οι άνθρωποι συνήθως δεν σκέφτονται από την άποψη της διακριτά τμήματα.

450
00:27:01,020 --> 00:27:04,950
Εντάξει. Τελευταία πράγμα.

451
00:27:04,950 --> 00:27:07,370
Δέκα heuristics χρηστικότητα.

452
00:27:07,370 --> 00:27:10,820
Όλα τα πράγματα που μίλησε για πιθανώς εμπίπτουν σε μία από αυτές τις κατηγορίες.

453
00:27:10,820 --> 00:27:14,420
Αν πάτε σε αυτόν τον σύνδεσμο, που οι ιστοσελίδες θα αναρτηθούν στο διαδίκτυο,

454
00:27:14,420 --> 00:27:18,900
θα είστε πραγματικά να είναι σε θέση, όπως εσείς το σχεδιασμό ιστοσελίδα σας, κρατήστε αυτά τα heuristics στο μυαλό

455
00:27:18,900 --> 00:27:21,330
και οι κανόνες του αντίχειρα.

456
00:27:21,330 --> 00:27:26,610
Για τα σχέδια σας, τι σας προτείνω να το κάνετε με σκοπό το σχεδιασμό app σας καλύτερα

457
00:27:26,610 --> 00:27:28,850
είναι να κάνουμε πρωτοτύπων χαρτί πρώτα.

458
00:27:28,850 --> 00:27:32,150
Όταν σκέφτεστε για την αίτησή σας, πολύ γρήγορα σκιαγραφήσει τι θέλετε να μοιάζουν με

459
00:27:32,150 --> 00:27:36,230
και βεβαιωθείτε ότι όλα τα κουτιά τοποθετημένα με τέτοιο τρόπο που είναι πολύ διαισθητική για το χρήστη να χρησιμοποιήσει

460
00:27:36,230 --> 00:27:39,820
και δείχνουν ακόμα και τα πρωτότυπα χαρτί στους φίλους σας και να αρχίσετε ομάδες εστίασης.

461
00:27:39,820 --> 00:27:44,230
Μόλις πάρει 2 ή 3 άτομα μαζί και να τους ζητήσει απλά να πατήσετε σε αυτά τα πρωτότυπα χαρτί,

462
00:27:44,230 --> 00:27:47,650
και να τους δείξουμε νέες οθόνες για να δουν αν πραγματικά καταλαβαίνουν τι συμβαίνει.

463
00:27:47,650 --> 00:27:50,680
>> Τι θέλετε να κάνετε είναι να τους δώσουμε ένα έργο, το βασικό κίνητρο του έργο,

464
00:27:50,680 --> 00:27:53,270
και απλά να τους δώσουμε το app και να τους αφήσουμε να το χρησιμοποιήσετε.

465
00:27:53,270 --> 00:27:56,530
Να μην τους δώσουμε οδηγίες πέρα ​​από αυτό.

466
00:27:56,530 --> 00:28:00,920
Θέλετε πραγματικά να τους αφήσουμε να αλληλεπιδρούν με το app σας με έναν τρόπο που σας επιτρέπει να δείτε

467
00:28:00,920 --> 00:28:03,870
πώς θα το χρησιμοποιήσετε αν δεν στέκεται δίπλα τους.

468
00:28:03,870 --> 00:28:05,250
Και αυτό είναι πολύ σημαντικό.

469
00:28:05,250 --> 00:28:08,780
Αυτό θα σας δώσει πολλές ιδέες ώστε να είναι άνθρωποι που να πάρει γύρω από συγκεκριμένα πράγματα

470
00:28:08,780 --> 00:28:10,560
με έναν τρόπο που δεν είχα την πρόθεση να;

471
00:28:10,560 --> 00:28:14,680
Είναι αυτοί που χρησιμοποιούν ιδιαίτερα οι μηχανισμοί UI στην οθόνη

472
00:28:14,680 --> 00:28:17,490
με έναν τρόπο που είναι το είδος του Hacky;

473
00:28:17,490 --> 00:28:22,020
Δεν είχα την πρόθεση τους να το κάνουν με αυτόν τον τρόπο.

474
00:28:22,020 --> 00:28:23,940
Και μόλις τελειώσετε με αυτό, ό, τι θέλετε να κάνετε;

475
00:28:23,940 --> 00:28:26,010
Βράχια του σχεδιασμού σας, έτσι δεν είναι;

476
00:28:26,010 --> 00:28:29,600
Τι θέλετε να κάνετε είναι να θέλετε να αναπτύξετε και στη συνέχεια, κάντε αυτή τη διαδικασία ξανά από την αρχή.

477
00:28:29,600 --> 00:28:32,110
Έτσι, το δείχνουν στους φίλους στιγμή που θα έχετε αναπτύξει, να το δοκιμάσετε,

478
00:28:32,110 --> 00:28:36,630
την ανάπτυξη, τη δοκιμή, την ανάπτυξη, τη δοκιμή, επαναλήψεις, και επάνω και προς τα εμπρός.

479
00:28:36,630 --> 00:28:39,720
Design είναι μια επαναληπτική διαδικασία πολύ προς αυτή την κατεύθυνση.

480
00:28:39,720 --> 00:28:43,280
Μπορείτε πραγματικά να χτίσει κάτι και στη συνέχεια να συνειδητοποιήσουν τα πράγματα γι 'αυτό

481
00:28:43,280 --> 00:28:46,520
ότι δεν έχετε συνειδητοποιήσει πριν και να πάει πίσω και να βελτιωθεί από αυτό.

482
00:28:46,520 --> 00:28:50,890
Τώρα, ως προς το μέρος της ανάπτυξης, αυτό είναι ό, τι ο Tommy πρόκειται να σας δείξει μετά το διάλειμμα

483
00:28:50,890 --> 00:28:53,220
και πώς θα μπορούσε να είναι σε θέση να εφαρμόσει κάτι σαν αυτόματη συμπλήρωση

484
00:28:53,220 --> 00:28:56,610
με έναν τρόπο που είναι αρκετά απλή.

485
00:28:57,440 --> 00:28:59,550
[Malan] Όπως Tommy στήνει εδώ, μια ερώτηση τότε.

486
00:28:59,550 --> 00:29:03,780
Πολλές από τις πρώτες ιστοσελίδες - και όταν ο Ιωσήφ είπε στυλ της δεκαετίας του 1990 δικτυακού τόπου,

487
00:29:03,780 --> 00:29:07,640
ήταν υλοποιήσεις όπου αν θέλετε να επιλέξετε μια ώρα έναρξης και μια ώρα λήξης,

488
00:29:07,640 --> 00:29:10,380
ειλικρινά, πίσω στην ημέρα, ακόμη και σε ορισμένες ιστοσελίδες σήμερα,

489
00:29:10,380 --> 00:29:13,220
ο τρόπος που το κάνουμε αυτό είναι να επιλέξετε μια ώρα από το drop-down,

490
00:29:13,220 --> 00:29:15,910
επιλέγετε λεπτά από το drop-down, ίσως μπορείτε να επιλέξετε ΠΜ, ΜΜ,

491
00:29:15,910 --> 00:29:17,440
και στη συνέχεια να το κάνεις αυτό 3 φορές.

492
00:29:17,440 --> 00:29:19,920
Και έτσι με 6 κλικ και ίσως κάποια κύλιση

493
00:29:19,920 --> 00:29:24,000
χρήστης μπορεί να σας προσφέρει πραγματικά κάποια ημερομηνία ή / και χρονικό εύρος με αυτή την έννοια.

494
00:29:24,000 --> 00:29:27,920
>> Έτσι, σίγουρα υποβέλτιστη ακόμη και μέχρι στιγμής έχουμε δει δεν εκφραστικές δυνατότητες

495
00:29:27,920 --> 00:29:30,330
σε οποιαδήποτε από τις γλώσσες που είδαμε να κάνει κάτι πιο σέξι

496
00:29:30,330 --> 00:29:32,620
όπως αυτό το ρυθμιστικό του χρόνου έναρξης και ώρα λήξης.

497
00:29:32,620 --> 00:29:36,290
Αλλά αν νομίζετε ότι πίσω με την εβδομάδα 0, όταν μιλήσαμε για Scratch,

498
00:29:36,290 --> 00:29:39,080
και εκεί δεν υπήρχαν widgets που έκανε ακριβώς ορισμένα πράγματα.

499
00:29:39,080 --> 00:29:42,700
Μπορείτε πραγματικά είχε μόνο αυτά τα βασικά, όπως βρόχους και τις προϋποθέσεις και τα παρόμοια.

500
00:29:42,700 --> 00:29:46,910
Έτσι, το είδος ακριβώς σκέφτεται πολύ αφηρημένα τώρα, ανεξάρτητα από τα στοιχεία της HTML,

501
00:29:46,910 --> 00:29:51,260
τι πραγματικά συμβαίνει με κάτι σαν αυτό το χρόνο έναρξης και λήξης ρυθμιστικό του χρόνου;

502
00:29:51,260 --> 00:29:54,960
Όταν μετακινήστε το ποντίκι μου και κάνω κλικ σε αυτό το μικρό σύμβολο καρότο στο αριστερό

503
00:29:54,960 --> 00:29:59,220
και αρχίστε να τραβάτε, προγραμματισμού, τι είναι αυτό που θέλετε να είναι σε θέση να εφαρμόσει

504
00:29:59,220 --> 00:30:01,000
για να συμβεί αυτό;

505
00:30:01,000 --> 00:30:04,920
Τι ερωτήσεις, τι Boolean εκφράσεις θέλετε να είναι σε θέση να ζητήσει;

506
00:30:04,920 --> 00:30:06,930
Τι πραγματικά συμβαίνει; Sammy;

507
00:30:06,930 --> 00:30:10,080
[Φοιτητής] Πού είναι η θέση του δρομέα; Καλή >>. Όπου είναι η θέση του δρομέα;

508
00:30:10,080 --> 00:30:11,970
Αυτό ήταν κάτι που χρειαζόμασταν για να εκφράσουμε πίσω στο Scratch,

509
00:30:11,970 --> 00:30:14,690
αν ήταν με βάση τη θέση ή ακόμη και το χρώμα ή τα παρόμοια.

510
00:30:14,690 --> 00:30:18,410
Ίσως να θυμάστε πάντα τόσο εν συντομία τη Δευτέρα υπήρχαν όλα αυτά τα πράγματα που ονομάζονται γεγονότα

511
00:30:18,410 --> 00:30:22,370
στον κόσμο του Web, και έτσι υπάρχει πράγματα όπως onclick και onkeypress

512
00:30:22,370 --> 00:30:25,960
και onkeyup και onmouseover και onMouseOut.

513
00:30:25,960 --> 00:30:29,130
Έτσι συνειδητοποιούμε ότι ακόμη και αυτά τα πράγματα που έχουμε ήδη λάβει ως δεδομένο στο Web

514
00:30:29,130 --> 00:30:32,190
με sites όπως το Facebook και το Gmail, ακόμα κι αν δεν έχετε ιδέα

515
00:30:32,190 --> 00:30:34,890
πώς θα εφαρμοστούν ενδεχομένως ότι επειδή δεν υπάρχει τίποτα σαν αυτό, ακόμη και σε διάλεξη

516
00:30:34,890 --> 00:30:38,570
Πρόβλημα ή Set 7, συνειδητοποιούν ότι με αυτές ακριβώς τις ίδιες βασικές αρχές,

517
00:30:38,570 --> 00:30:41,090
HTTP και με τις παραμέτρους και GET και POST,

518
00:30:41,090 --> 00:30:44,010
με τις βασικές HTML εισόδους που έχουμε εξετάσει μέχρι στιγμής

519
00:30:44,010 --> 00:30:47,690
και σε μια στιγμή με τις προγραμματικές μηχανισμούς που του Tommy για να εισαγάγει

520
00:30:47,690 --> 00:30:51,300
μπορείτε να αρχίσετε να εκφράσουν τον εαυτό σας ακριβώς όπως κάνατε στην εβδομάδα 0

521
00:30:51,300 --> 00:30:53,800
με πολύ διαισθητικά μεταφορά και απόθεση.

522
00:30:53,800 --> 00:30:58,950
>> Έτσι, με ότι είπε, Tommy MacWilliam και κάποια νέα κομμάτια του παζλ για μας για Web.

523
00:30:58,950 --> 00:31:03,450
Εντάξει. Το όνομά μου είναι ο Tommy και είμαι πρόκειται να μιλάμε για το JavaScript.

524
00:31:03,450 --> 00:31:07,150
Ακριβώς μια αποκήρυξη: Είμαι της γνώμης ότι το JavaScript είναι η καλύτερη γλώσσα προγραμματισμού

525
00:31:07,150 --> 00:31:09,010
σε όλο ολόκληρο τον κόσμο.

526
00:31:09,010 --> 00:31:11,940
Υπάρχουν πολλοί άνθρωποι που διαφωνούν μαζί μου, αλλά αυτό είναι απλά εκπληκτικό.

527
00:31:11,940 --> 00:31:16,330
Μόλις επιστρέψετε στο C, αν έχετε να γράψετε C για άλλη κατηγορία ή κάποιες άλλες γλώσσες,

528
00:31:16,330 --> 00:31:19,780
είναι ακριβώς πραγματικά απογοητευτικό σε όλες τις χαμηλού επιπέδου λεπτομέρειες θα πρέπει να κολλήσουμε μέσα

529
00:31:19,780 --> 00:31:23,050
Έτσι, εάν είστε πάντα αίσθημα θλίψης για το πώς ενοχλητικό C είναι να γράψει,

530
00:31:23,050 --> 00:31:25,130
πήγαινε πίσω, γράφουν κάποια JavaScript. Είναι νιρβάνα.

531
00:31:25,130 --> 00:31:27,980
Θα αισθανθείτε πολύ καλύτερα για την κακή ημέρα σας.

532
00:31:27,980 --> 00:31:31,900
Ένα μεγάλο μέρος της μαγείας του JavaScript προέρχεται από την ικανότητά του να χειριστεί τα πράγματα

533
00:31:31,900 --> 00:31:33,730
που είναι ήδη στη σελίδα.

534
00:31:33,730 --> 00:31:38,520
Όταν γράψαμε ένα PHP script μας, που εκτελέστηκαν στο διακομιστή,

535
00:31:38,520 --> 00:31:42,270
και τελικά ότι η PHP script έξοδο πιθανώς κάποια HTML.

536
00:31:42,270 --> 00:31:45,860
Ότι η HTML εστάλη στον πελάτη, και στη συνέχεια, αυτό ήταν.

537
00:31:45,860 --> 00:31:50,180
Αν η PHP ήθελε να προσθέσετε ένα κουμπί σε μια σελίδα, για παράδειγμα, δεν μπορεί πραγματικά να το κάνουμε αυτό.

538
00:31:50,180 --> 00:31:54,350
Θα πρέπει να καταστεί ένα εντελώς νέο αρχείο HTML και να στείλει ότι στο πρόγραμμα περιήγησης.

539
00:31:54,350 --> 00:31:57,840
Με JavaScript γνωρίζουμε ότι μπορούμε να ενημερώσει τα πράγματα ενώ είναι ήδη στη σελίδα,

540
00:31:57,840 --> 00:32:00,840
και γι 'αυτό μπορούμε να παρέχουμε πολύ πιο άμεση ανατροφοδότηση,

541
00:32:00,840 --> 00:32:06,150
η οποία θα βελτιώσει πραγματικά την εμπειρία του χρήστη στην ιστοσελίδα μας.

542
00:32:06,150 --> 00:32:09,330
Απλά μια γρήγορη ανακεφαλαίωση του επιλογείς JavaScript.

543
00:32:09,330 --> 00:32:11,590
Γνωρίζουμε ότι όταν κατεβάσετε μια σελίδα HTML,

544
00:32:11,590 --> 00:32:13,890
η οποία πρόκειται να εκπροσωπηθεί στο DOM.

545
00:32:13,890 --> 00:32:19,340
>> Το DOM είναι να θυμάστε ακριβώς αυτό το μεγάλο δέντρο όπου τα στοιχεία που αφορούν σε αυτό το μεγάλο ιεραρχία.

546
00:32:19,340 --> 00:32:21,810
Όταν δουλεύαμε με βάσεις δεδομένων σε PSET 7,

547
00:32:21,810 --> 00:32:26,280
ένα από τα πρώτα πράγματα που χρειάζεται να ξέρετε πώς να το κάνουμε ήταν ερωτήματα στη βάση δεδομένων.

548
00:32:26,280 --> 00:32:29,060
Έχουμε αυτό το μεγάλο τραπέζι των χρηστών, και μερικές φορές θέλουμε απλώς να πούμε,

549
00:32:29,060 --> 00:32:33,260
"Θέλω μόνο μερικά από αυτούς τους χρήστες που ταιριάζουν με κάποια κατάσταση."

550
00:32:33,260 --> 00:32:36,020
Ομοίως, όταν έχουμε το DOM χρειαζόμαστε κάποιο τρόπο επερωτήσεις αυτό.

551
00:32:36,020 --> 00:32:39,490
Χρειαζόμαστε κάποιο τρόπο του λέγοντας, «Θέλω όλα τα κουμπιά που μοιάζουν με αυτό

552
00:32:39,490 --> 00:32:41,860
"Ή όλες τις εικόνες στη σελίδα."

553
00:32:41,860 --> 00:32:44,330
Και αυτές οι επιλογείς μας επιτρέπουν να το κάνουμε αυτό.

554
00:32:44,330 --> 00:32:45,690
Έτσι απλά μια γρήγορη ανακεφαλαίωση.

555
00:32:45,690 --> 00:32:50,770
Αυτή η πρώτη εδώ, αυτό # υποβάλει, τι είναι ότι θα επιλέξετε; Θυμάται κανείς;

556
00:32:50,770 --> 00:32:54,880
[Ακούγεται ανταπόκριση των φοιτητών] >> Ναι, ακριβώς.

557
00:32:54,880 --> 00:32:59,510
Αυτό πρόκειται να επιλέξετε ένα στοιχείο στη σελίδα που έχει ένα αναγνωριστικό του υποβάλει.

558
00:32:59,510 --> 00:33:03,470
Και, έτσι ώστε hash tag λέει ότι αυτό επιλογέα πρόκειται να συνεργαστεί με ταυτότητες.

559
00:33:03,470 --> 00:33:07,630
Τι θα λέγατε για το δεύτερο, αυτό. Κέντρο, τι θα επιλέξετε ότι;

560
00:33:11,360 --> 00:33:15,180
Ναι. >> [Φοιτητής] Class. Ακριβώς >>. Αυτό είναι τώρα πρόκειται να επιλέξετε ανά κατηγορία.

561
00:33:15,180 --> 00:33:18,840
Η διαφορά μεταξύ ταυτότητας και την κατηγορία εδώ είναι γενικά το ID πρέπει να είναι μοναδικό

562
00:33:18,840 --> 00:33:20,820
μέσα σε οποιοδήποτε χώρο ψάχνετε πάνω.

563
00:33:20,820 --> 00:33:23,080
Έτσι, αν ψάχνατε για μια ολόκληρη ιστοσελίδα,

564
00:33:23,080 --> 00:33:27,740
που πραγματικά θα πρέπει να έχουν μόνο 1 στοιχείο με την ταυτότητα ορισμένων, οπότε σε αυτή την περίπτωση να υποβάλει.

565
00:33:27,740 --> 00:33:31,330
Με τις τάξεις, από την άλλη πλευρά, μπορούμε να έχουμε περισσότερα από 1 στοιχείου στην ίδια σελίδα

566
00:33:31,330 --> 00:33:33,130
με την ίδια τάξη.

567
00:33:33,130 --> 00:33:36,580
Αυτό θα μπορούσε να είναι χρήσιμο για λέγοντας ότι θέλετε να επιλέξετε όλα όσα επικεντρώνεται στην σελίδα

568
00:33:36,580 --> 00:33:38,450
και όχι μόνο 1 πράγμα.

569
00:33:38,450 --> 00:33:40,310
>> Και τέλος, αυτό το τελευταίο εδώ είναι λίγο πιο περίπλοκη,

570
00:33:40,310 --> 00:33:43,890
αλλά τι είναι αυτή η μετάβαση να επιλέξετε από το DOM;

571
00:33:46,650 --> 00:33:48,810
[Ακούγεται ανταπόκριση των φοιτητών] >> Τι είναι αυτό;

572
00:33:48,810 --> 00:33:53,250
[Φοιτητής] Ό, τι είναι μια ετικέτα. >> Έχουμε 2 μέρη εδώ.

573
00:33:53,250 --> 00:33:58,070
Το δεύτερο μέρος θα πω ότι θέλετε να επιλέξετε αυτές τις ετικέτες με μια ετικέτα της εισόδου,

574
00:33:58,070 --> 00:34:00,730
έτσι ώστε κάθε στοιχείο που είναι μια ετικέτα εισόδου.

575
00:34:00,730 --> 00:34:03,080
Αλλά δεν θέλω να επιλέξετε μόνο το σύνολο των εισροών

576
00:34:03,080 --> 00:34:05,170
επειδή κάτι σαν ένα κουμπί submit θα μπορούσε να είναι μια είσοδος

577
00:34:05,170 --> 00:34:08,409
και κάτι σαν ένα κουτί κειμένου θα μπορούσε να είναι μια είσοδος.

578
00:34:08,409 --> 00:34:11,909
Έτσι, με αυτές τις αγκύλες λέω θέλω μόνο να επιλεγούν εκείνα τα στοιχεία

579
00:34:11,909 --> 00:34:14,110
που είναι του τύπου κειμένου.

580
00:34:14,110 --> 00:34:17,400
Κάπου στην ετικέτα HTML μου έχω ένα χαρακτηριστικό που ονομάζεται τύπος,

581
00:34:17,400 --> 00:34:19,750
και η τιμή του εν λόγω χαρακτηριστικού πρέπει να είναι κείμενο.

582
00:34:19,750 --> 00:34:21,340
Πώς, λοιπόν, για το πρώτο μέρος εδώ;

583
00:34:21,340 --> 00:34:25,489
Η πρώτη λέξη του επιλογέα είναι μορφή τότε έχω ένα διάστημα και στη συνέχεια, αυτό το μέρος εισαγωγής.

584
00:34:25,489 --> 00:34:29,620
Τι σημαίνει ότι κάνει, βάζοντας τη μορφή μπροστά του;

585
00:34:33,409 --> 00:34:35,860
Αυτό θα περιορίσει ουσιαστικά το ερώτημα μας.

586
00:34:35,860 --> 00:34:38,510
Θα μπορούσε να είναι η περίπτωση που έχουμε κάποια εισόδους στη σελίδα

587
00:34:38,510 --> 00:34:41,080
που δεν είναι απόγονοι του μορφή.

588
00:34:41,080 --> 00:34:46,150
Αυτό θα κάνει είναι αυτό, θα πω ότι το μόνο που θέλουν οι ετικέτες εισόδου που έχουν κάπου πάνω τους

589
00:34:46,150 --> 00:34:49,030
κάποιο στοιχείο μητρική μορφή.

590
00:34:49,030 --> 00:34:52,100
Και έτσι με αυτόν τον τρόπο μπορούμε να κάνουμε αυτές τις πιο ιεραρχικά ερωτήματα

591
00:34:52,100 --> 00:34:55,000
γι 'αυτό δεν πρέπει απλώς να επιλέξετε ό, τι ταιριάζει ένα συγκεκριμένο επιλογέα.

592
00:34:55,000 --> 00:35:00,760
Μπορούμε να το είδος των ορίων του πεδίου εφαρμογής της εν λόγω ερώτημα για κάτι άλλο.

593
00:35:00,760 --> 00:35:04,000
Έτσι, τώρα που γνωρίζουμε πώς να επιλέξετε τα στοιχεία στη σελίδα,

594
00:35:04,000 --> 00:35:06,780
Ας μιλήσουμε λίγο για AJAX.

595
00:35:06,780 --> 00:35:12,270
AJAX είναι ένα ακόμη πολύ μοντέρνα αρκτικόλεξο που ξεχωρίζει για Asynchronous JavaScript και XML.

596
00:35:12,270 --> 00:35:15,640
Συμβαίνει ότι η XML είναι μερικά μόνο τρόπος για να εκπροσωπεί τα δεδομένα.

597
00:35:15,640 --> 00:35:20,920
>> Αυτό το είδος του έχασε δημοτικότητα πρόσφατα, έτσι ώστε το Χ στο AJAX δεν χρησιμοποιείται όλη την ώρα.

598
00:35:20,920 --> 00:35:26,220
Βασικά, αυτό που AJAX μας επιτρέπει να κάνετε είναι να κάνετε αιτήσεις HTTP

599
00:35:26,220 --> 00:35:28,620
από το πλαίσιο της JavaScript.

600
00:35:28,620 --> 00:35:32,310
Όταν είμαστε στο web browser μας και είμαστε πλοήγηση γύρω από τις σελίδες μας και κάντε κλικ σε ένα σύνδεσμο,

601
00:35:32,310 --> 00:35:37,790
τι browser μας πρόκειται να κάνετε είναι να κάνετε μια αίτηση HTTP σε ό, τι κάνουμε κλικ σύνδεσμο.

602
00:35:37,790 --> 00:35:41,670
Αλλά αυτό δεν είναι πάντα ιδανικό, διότι αν αυτή είναι η περίπτωση, τότε όπως ο Δαβίδ έλεγε,

603
00:35:41,670 --> 00:35:45,220
πρέπει πάντα να κάνουν οι χρήστες κάνουν κλικ σε ένα κουμπί Υποβολή ή κάντε κλικ σε ένα σύνδεσμο

604
00:35:45,220 --> 00:35:50,380
προκειμένου να κάνουν οτιδήποτε συμβεί αυτό πρόκειται να περιλαμβάνει μια αίτηση HTTP.

605
00:35:50,380 --> 00:35:54,160
Έτσι, με AJAX μπορούμε να κάνουμε αυτά τα αιτήματα εκ μέρους της JavaScript.

606
00:35:54,160 --> 00:35:57,020
Αυτό σημαίνει ότι κάθε φορά που ο χρήστης αλληλεπιδρά με τη σελίδα ή οτιδήποτε συμβαίνει,

607
00:35:57,020 --> 00:36:01,780
μπορούμε να κάνουμε πραγματικά μια προγραμματική αίτηση σε κάποιο άλλο αρχείο PHP στην ιστοσελίδα μας

608
00:36:01,780 --> 00:36:06,280
ή οτιδήποτε άλλο και να ανακτήσετε τα δεδομένα ότι αυτό το αρχείο φτύσει.

609
00:36:06,280 --> 00:36:09,860
Ας ρίξουμε μια ματιά σε ένα παράδειγμα του AJAX.

610
00:36:09,860 --> 00:36:16,140
Αυτό είναι CS50 Οικονομικών σελίδα μας με τις οποίες ελπίζουμε ότι μερικοί από μας είναι εξοικειωμένοι.

611
00:36:16,140 --> 00:36:21,790
Αν κοιτάξουμε την HTML αυτής της σελίδας, βλέπουμε εδώ ότι έχω προσθέσει κάποια πράγματα,

612
00:36:21,790 --> 00:36:23,820
μία από τις οποίες έχω δώσει αυτή τη μορφή ένα αναγνωριστικό.

613
00:36:23,820 --> 00:36:26,480
Έχω πει id = "μορφή-απόσπασμα".

614
00:36:26,480 --> 00:36:31,910
Έχω κάνει αυτό μόνο και μόνο επειδή πρόκειται να κάνουν αυτό το λίγο πιο εύκολο να επιλέξετε από το DOM

615
00:36:31,910 --> 00:36:35,090
αφού μπορώ να κάνω μόνο ένα πολύ απλό ερώτημα.

616
00:36:35,090 --> 00:36:38,960
Αυτό που θέλω να κάνω εδώ είναι που θέλω να διορθώσετε κάποιο πρόβλημα με CS50 Οικονομικών.

617
00:36:38,960 --> 00:36:41,550
Έτσι, αν πάμε να finance.cs50.net,

618
00:36:41,550 --> 00:36:45,700
κάθε φορά που θέλετε να πάρετε μια προσφορά, θα πρέπει να κάνετε κλικ σε αυτό το κουμπί Get Quote,

619
00:36:45,700 --> 00:36:48,960
και ότι το κουμπί Get Quote μου παίρνει στη συνέχεια σε μια άλλη ολόκληρη τη σελίδα.

620
00:36:48,960 --> 00:36:52,400
Και αν θέλω ένα άλλο απόσπασμα, πρέπει να χτυπήσει το πίσω κουμπί και στη συνέχεια να το πληκτρολογήσετε,

621
00:36:52,400 --> 00:36:54,480
Παίρνω ένα απόσπασμα, και χτύπησα το κουμπί Πίσω.

622
00:36:54,480 --> 00:36:56,840
Αυτό δεν είναι πραγματικά η καλύτερη εμπειρία του χρήστη.

623
00:36:56,840 --> 00:37:01,570
Ποιος θα χρησιμοποιήσει πραγματικά το χώρο, εάν είναι ότι αργεί να πάρει τιμές των μετοχών;

624
00:37:01,570 --> 00:37:05,630
Έτσι, αυτό που θέλουμε να κάνουμε με AJAX είναι καταργήσετε αυτό το βήμα να πάω σε μια ξεχωριστή σελίδα

625
00:37:05,630 --> 00:37:08,410
για να δείτε τα αποτελέσματα.

626
00:37:08,410 --> 00:37:11,240
>> Αυτό που πραγματικά ζητά μόνο ότι είναι πολύ μικρή τιμή,

627
00:37:11,240 --> 00:37:14,240
και αυτό είναι μόνο μια πολύ μικρή ποσότητα των δεδομένων.

628
00:37:14,240 --> 00:37:17,400
Έτσι δεν υπάρχει καμία ανάγκη για μένα να πάω μια άλλη ολόκληρη σελίδα HTML,

629
00:37:17,400 --> 00:37:20,670
κατεβάσετε μια ολόκληρη νέα παρτίδα HTML, ίσως κάποια κατεβάσετε περισσότερες φωτογραφίες,

630
00:37:20,670 --> 00:37:24,410
κάποια άλλα αρχεία CSS μόνο για μένα να απαντήσω στην πολύ απλή ερώτηση

631
00:37:24,410 --> 00:37:27,810
από το πόσο κάνει το κόστος αποθεμάτων.

632
00:37:27,810 --> 00:37:31,000
Με AJAX μπορούμε να κάνουμε αυτό πολύ πιο εύκολη.

633
00:37:31,000 --> 00:37:36,400
Βλέπουμε εδώ κάτω που είμαι σύνδεση σε ένα αρχείο JavaScript που ονομάζεται quote.js.

634
00:37:36,400 --> 00:37:40,140
Ας πραγματικά να ανοίξει το αρχείο. Όχι. Υπάρχει

635
00:37:42,610 --> 00:37:45,860
Όλα τα αρχεία JavaScript μου πρόκειται να βρίσκεται σε μορφή HTML

636
00:37:45,860 --> 00:37:47,630
έτσι ώστε το πρόγραμμα περιήγησης στο Web μπορεί να έχει πρόσβαση.

637
00:37:47,630 --> 00:37:50,330
Στη συνέχεια έχουμε ένα ξεχωριστό κατάλογο εδώ για JavaScript,

638
00:37:50,330 --> 00:37:54,340
και τώρα εδώ είναι quote.js.

639
00:37:54,340 --> 00:38:00,930
Στην κορυφή αυτού του αρχείου αυτό εδώ λέει ότι θέλω να περιμένω για ολόκληρη τη σελίδα για να φορτωθεί

640
00:38:00,930 --> 00:38:04,830
πριν προσπαθώ να κάνω τίποτα. Γιατί είναι ότι χρειάζεται;

641
00:38:04,830 --> 00:38:08,650
Αποδεικνύεται ότι το επόμενο πράγμα που θα πάω να κάνω εδώ είναι αρχίσει να ψάχνει για ένα στοιχείο

642
00:38:08,650 --> 00:38:10,810
που ταιριάζει με κάποια επιλογέα.

643
00:38:10,810 --> 00:38:15,600
Εάν αυτή η JavaScript είναι πάντα εκτελούνται πριν από αυτό το στοιχείο έχει τοποθετηθεί στη σελίδα,

644
00:38:15,600 --> 00:38:17,820
τότε τα πάντα προσπαθώ να κάνω δεν πρόκειται να λειτουργήσει

645
00:38:17,820 --> 00:38:20,580
επειδή Πάω να προσπαθήσω να επιλέξετε κάτι που δεν υπάρχει ακόμα.

646
00:38:20,580 --> 00:38:23,780
Έτσι, αυτή η γραμμή επάνω στην κορυφή λέει θέλω να περιμένετε μέχρι τα πάντα είναι φορτωμένα

647
00:38:23,780 --> 00:38:28,030
έτσι είμαστε εγγυάται ότι όλα τα στοιχεία που ψάχνω είναι στην πραγματικότητα στη σελίδα.

648
00:38:29,730 --> 00:38:34,310
Αυτό το σύμβολο του δολαρίου εδώ σημαίνει ότι είμαι με τη χρήση της βιβλιοθήκης ονομάζεται jQuery.

649
00:38:34,310 --> 00:38:38,570
Αυτή η βιβλιοθήκη jQuery μας επιτρέπει να χρησιμοποιήσετε αυτά τα επιλογείς που μόλις κοίταξε.

650
00:38:38,570 --> 00:38:44,010
Λέγοντας $ συνέχεια περνώντας ως επιχείρημα αυτό το # έντυπο-απόσπασμα,

651
00:38:44,010 --> 00:38:47,910
Είμαι τώρα επιλέγοντας αυτή τη μορφή που πήρε μόνο μια ματιά.

652
00:38:47,910 --> 00:38:52,290
Τώρα έχω μια αναπαράσταση αυτής της μορφής στη μνήμη κάποιο τρόπο.

653
00:38:52,290 --> 00:38:56,760
>> Σε αυτό το αντικείμενο τώρα, αυτή η αναπαράσταση της μορφής,

654
00:38:56,760 --> 00:38:58,890
Είμαι χρησιμοποιώντας τώρα μια λειτουργία που ονομάζεται για.

655
00:38:58,890 --> 00:39:02,710
Τι κάνει αυτή η λειτουργία είναι ότι πρόκειται να επισυνάψετε ένα πρόγραμμα χειρισμού συμβάντων.

656
00:39:02,710 --> 00:39:06,310
Το γεγονός ότι θα πάμε για να ακούσετε είναι το γεγονός submit.

657
00:39:06,310 --> 00:39:08,890
Έτσι, όταν Εισάγετε ο χρήστης κάνει κλικ στο κουμπί Υποβολή που ή πρέσες,

658
00:39:08,890 --> 00:39:11,730
αυτό το γεγονός πρόκειται να φωτιά.

659
00:39:11,730 --> 00:39:16,390
Με συνδέοντας σε αυτό, μπορώ να παρακάμψετε τώρα την προεπιλεγμένη συμπεριφορά του μορφή.

660
00:39:16,390 --> 00:39:19,770
Χωρίς αυτή τη JavaScript, η φόρμα θα υποβάλει ανεξαρτήτως PHP αρχείο

661
00:39:19,770 --> 00:39:22,110
χρησιμοποιήσαμε στο εν λόγω χαρακτηριστικό δράση.

662
00:39:22,110 --> 00:39:25,440
Αλλά αντ 'αυτού, είμαι τώρα λέει, περίμενε, περίμενε, περίμενε, δεν θέλω πραγματικά να το κάνουμε αυτό.

663
00:39:25,440 --> 00:39:31,140
Θέλω αυτό να συμβεί πριν πάτε και να προσπαθήσουμε να υποβάλει κάποιο αρχείο PHP.

664
00:39:31,140 --> 00:39:32,870
Τώρα τι θέλω να κάνω;

665
00:39:32,870 --> 00:39:39,270
Σε αυτό το σημείο θέλω να χρησιμοποιήσω AJAX με κάποιο τρόπο να φορτώσει σε αυτό που η τιμή της μετοχής είναι.

666
00:39:39,270 --> 00:39:44,170
Το πρώτο πράγμα που πρέπει να ξέρετε είναι τι απόθεμα ο χρήστης ψάχνει.

667
00:39:44,170 --> 00:39:46,760
Για να γίνει αυτό θα πάω να χρησιμοποιήσετε ένα άλλο επιλογέα.

668
00:39:46,760 --> 00:39:49,020
Αυτή είναι η τρίτη επιλογέας κοιτάξαμε πριν.

669
00:39:49,020 --> 00:39:54,460
Αυτό λέει ότι θέλω να ξεκινήσω αυτό το στοιχείο της φόρμας με ένα αναγνωριστικό της μορφή-απόσπασμα.

670
00:39:54,460 --> 00:39:58,440
Στη συνέχεια, κάπου στο εσωτερικό του εντύπου θα πρέπει να υπάρχει ένα στοιχείο εισόδου

671
00:39:58,440 --> 00:40:01,270
που έχει το όνομα του συμβόλου.

672
00:40:01,270 --> 00:40:05,460
Αν κοιτάξουμε πίσω στο HTML μας, είδαμε ότι είχαμε μια είσοδο [όνομα = σύμβολο].

673
00:40:05,460 --> 00:40:12,380
Αυτό σημαίνει ότι αυτό πρόκειται να επιλέξετε αυτό το πλαίσιο κειμένου που ο χρήστης πληκτρολογεί σε.

674
00:40:12,380 --> 00:40:13,870
Αυτό είναι ωραίο. Έχουμε το πλαίσιο κειμένου.

675
00:40:13,870 --> 00:40:17,360
Τώρα απλά πρέπει να ξέρετε τι είναι μέσα από αυτό.

676
00:40:17,360 --> 00:40:20,290
Για να το κάνουμε αυτό μπορούμε να καλέσετε τη μέθοδο αυτή εδώ, αυτό. Val,

677
00:40:20,290 --> 00:40:23,240
και αυτό λέει ξέρω τι πλαίσιο κειμένου που έχετε.

678
00:40:23,240 --> 00:40:28,160
Θέλω να μου πείτε τι είναι ο χρήστης πληκτρολογήσει σε αυτό το πλαίσιο κειμένου.

679
00:40:28,160 --> 00:40:34,440
Τώρα έχουμε μια σειρά που ονομάζεται σύμβολο που είναι ίσο με ό, τι ο χρήστης πληκτρολογήσει μέσα

680
00:40:34,440 --> 00:40:39,820
Αυτό είναι ωραίο. Μπορούμε να χρησιμοποιήσουμε αυτό το αλφαριθμητικό τώρα να κάνει το αίτημά μας.

681
00:40:39,820 --> 00:40:42,450
Πρόκειται για μια νέα λειτουργία εδώ, αυτό το $,

682
00:40:42,450 --> 00:40:44,900
εκτός είμαστε δεν πρόκειται πλέον να επιλέξετε στοιχεία,

683
00:40:44,900 --> 00:40:48,910
θα πάμε να ζητούν μια διαφορετική λειτουργία που είναι που μας παρέχεται από jQuery.

684
00:40:48,910 --> 00:40:54,810
Αυτή η λειτουργία AJAX είναι το τι πραγματικά πρόκειται να κάνουν αυτό το αίτημα HTTP.

685
00:40:54,810 --> 00:40:57,000
Γι 'αυτό και πρέπει να πω ότι μερικά πράγματα.

686
00:40:57,000 --> 00:41:01,410
Το πρώτο πράγμα που πρέπει να πούμε αυτή τη λειτουργία είναι όπου θέλω το αίτημα να πάει.

687
00:41:01,410 --> 00:41:08,910
Κάπου στο έργο μου έχω αυτό το αρχείο μέσα από την HTML κατάλογο με το όνομα quote.php.

688
00:41:08,910 --> 00:41:15,150
Μπορώ να αποκτήσετε πρόσβαση σε αυτό το αρχείο, είδαμε, ακριβώς όπως αυτό, αν πάω στο localhost / quote.php.

689
00:41:15,150 --> 00:41:20,450
>> Θέλω JavaScript μου να κάνω μια αίτηση σε αυτή τη σελίδα.

690
00:41:20,450 --> 00:41:22,920
Τι τύπος της αίτησης τώρα;

691
00:41:22,920 --> 00:41:27,210
Είδαμε πριν ότι η μορφή έχει αυτή τη μέθοδο = "post" χαρακτηριστικό,

692
00:41:27,210 --> 00:41:29,270
και αυτό σημαίνει ότι πρόκειται να κάνει μια αίτηση POST,

693
00:41:29,270 --> 00:41:32,630
γι 'αυτό δεν πρόκειται να βάλει τίποτα στο URL, αντί αίτηση GET,

694
00:41:32,630 --> 00:41:36,860
η οποία θα ήταν απλά να απολυθούν αν προσεγγιστεί μόνο τη σελίδα με το πρόγραμμα περιήγησης στο Web, για παράδειγμα.

695
00:41:36,860 --> 00:41:41,260
Τώρα έχουμε πει θέλω να κάνω μια αίτηση POST HTTP

696
00:41:41,260 --> 00:41:44,840
σε μια σελίδα που βρίσκεται στο quote.php.

697
00:41:44,840 --> 00:41:51,490
Όταν υποβάλετε το έντυπο, να θυμάστε ότι μπορεί να έχει πρόσβαση στα στοιχεία εισόδου στο εσωτερικό του εντύπου

698
00:41:51,490 --> 00:41:54,430
με την μεταβλητή $ _POST.

699
00:41:54,430 --> 00:41:58,710
Μέχρι τώρα στην ιστορία δεν έχουμε στην πραγματικότητα έστειλε μαζί όλα τα δεδομένα ακόμα.

700
00:41:58,710 --> 00:42:00,640
Έχουμε μόλις είπα είμαστε μια αίτηση AJAX

701
00:42:00,640 --> 00:42:03,200
και εδώ είναι ο τύπος της αίτησης που κάνουμε.

702
00:42:03,200 --> 00:42:07,090
Τώρα πρέπει να στείλει στην πραγματικότητα κάποια δεδομένα στη σελίδα.

703
00:42:07,090 --> 00:42:10,930
Για να το κάνουμε αυτό μπορούμε να χρησιμοποιήσουμε αυτή την ιδιότητα που ονομάζεται δεδομένων.

704
00:42:10,930 --> 00:42:14,950
Η αξία του ακινήτου είναι στην πραγματικότητα ένα associative array.

705
00:42:14,950 --> 00:42:19,390
Ο λόγος για αυτό είναι ότι μας επιτρέπει να στείλουμε κάτι περισσότερο από 1 κομμάτι των δεδομένων.

706
00:42:19,390 --> 00:42:24,750
Γι 'αυτό έχουμε αυτά τα άγκιστρα εδώ φωλιάζουν μέσα από αυτές τις άλλες αγκύλες.

707
00:42:24,750 --> 00:42:29,680
Τα πλήκτρα σε αυτές συνειρμική συστοιχίες πρόκειται να είναι το ίδιο πράγμα

708
00:42:29,680 --> 00:42:32,630
εκείνες όνομα αποδίδει σε στοιχεία της φόρμας μας.

709
00:42:32,630 --> 00:42:35,740
Αυτό σημαίνει ότι αν στείλω μαζί με το σύμβολο του κλειδιού,

710
00:42:35,740 --> 00:42:41,870
αυτό σημαίνει PHP σελίδα μου μπορούν να έχουν πρόσβαση αυτά τα δεδομένα με $ _POST [σύμβολο]

711
00:42:41,870 --> 00:42:44,640
ακριβώς όπως κάναμε πριν, όταν ήμασταν υποβολή μιας φόρμας.

712
00:42:44,640 --> 00:42:47,090
Και τώρα τα πραγματικά δεδομένα που θέλουμε να στείλουμε

713
00:42:47,090 --> 00:42:50,790
πρόκειται να είναι το εσωτερικό αξία αυτής της associative array.

714
00:42:50,790 --> 00:42:54,070
>> Εμείς αυτό το κείμενο αποθηκεύεται σε μια μεταβλητή που ονομάζεται σύμβολο,

715
00:42:54,070 --> 00:42:57,380
και έτσι θα στείλουμε μαζί τώρα ένα βασικό σύμβολο της

716
00:42:57,380 --> 00:43:01,380
και η αξία του ό, τι ο χρήστης πληκτρολογήσει μέσα

717
00:43:01,380 --> 00:43:06,270
Τώρα έχουμε κάνει αυτό το αίτημα HTTP, PHP αρχείο μας έχει εκτελεστεί,

718
00:43:06,270 --> 00:43:11,480
και πρόκειται να στείλει κάποια δεδομένα τώρα πίσω στον πελάτη που έκανε ακριβώς αυτό το αίτημα.

719
00:43:11,480 --> 00:43:15,220
Τώρα πρέπει να ανταποκριθεί σε ό, τι ο διακομιστής μας είπε.

720
00:43:15,220 --> 00:43:20,180
Για να το κάνουμε αυτό έχουμε αυτή την τελευταία ιδιότητα που ονομάζεται εδώ επιτυχία.

721
00:43:20,180 --> 00:43:24,240
Η αξία αυτού του κλειδί της επιτυχίας είναι πραγματικά πρόκειται να είναι μια λειτουργία,

722
00:43:24,240 --> 00:43:26,910
και αυτό είναι ένα από τα πραγματικά δροσερά πράγματα που μπορείτε να κάνετε με το JavaScript.

723
00:43:26,910 --> 00:43:31,720
Όχι μόνο μπορείτε να έχετε ints ή συστοιχίες ως εσωτερικό αξία ενός associative array,

724
00:43:31,720 --> 00:43:34,170
μπορούμε να έχουμε επίσης μια λειτουργία.

725
00:43:34,170 --> 00:43:36,380
Έτσι, λέγοντας επιτυχία, αυτό είναι το κλειδί μου.

726
00:43:36,380 --> 00:43:38,830
Η άνω και κάτω τελεία εδώ λέει ότι έρχεται η αξία,

727
00:43:38,830 --> 00:43:41,810
και τώρα η αξία αυτή είναι στην πραγματικότητα μια λειτουργία.

728
00:43:41,810 --> 00:43:44,460
Γι 'αυτό και δεν χρειάζεται να δώσει σε αυτό μια λειτουργία όνομα per se.

729
00:43:44,460 --> 00:43:48,820
Μπορούμε να πούμε ότι αυτό πρόκειται να είναι κάποια λειτουργία. Είναι πρόκειται να λάβει 1 επιχείρημα.

730
00:43:48,820 --> 00:43:51,190
Το επιχείρημα για αυτή τη λειτουργία θα είναι

731
00:43:51,190 --> 00:43:54,460
ό, τι ο διακομιστής μας έστειλε πίσω από το αίτημα.

732
00:43:54,460 --> 00:43:57,750
Ακριβώς όπως όταν το πρόγραμμα περιήγησης μας κάνει μια αίτηση, ο server στέλνει κάτι πίσω

733
00:43:57,750 --> 00:43:59,060
και το πρόγραμμα περιήγησης εμφανίζει,

734
00:43:59,060 --> 00:44:03,030
στο πλαίσιο του AJAX κάναμε απλά μια αίτηση, ο διακομιστής έστειλε κάτι πίσω,

735
00:44:03,030 --> 00:44:07,110
και τώρα έχουμε ότι εκπροσωπήθηκαν ως ένα string.

736
00:44:07,110 --> 00:44:11,280
Με την σειρά μου θα ήθελα να εμφανίσει ότι στη σελίδα.

737
00:44:11,280 --> 00:44:14,040
Για να γίνει αυτό θα πάω να έχει ένα τελευταίο επιλογέα.

738
00:44:14,040 --> 00:44:17,570
Θέλω να επιλέξετε το στοιχείο με την τιμή ID.

739
00:44:17,570 --> 00:44:20,710
Αυτό είναι απλώς ένα άδειο div ότι έχω δημιουργήσει στη σελίδα,

740
00:44:20,710 --> 00:44:26,640
και θέλω να ρυθμίσετε τα περιεχόμενα αυτού του div να είναι ό, τι ο διακομιστής μας έστειλε πίσω.

741
00:44:26,640 --> 00:44:30,280
Έχω πραγματικά τροποποιημένο quote.php λίγο.

742
00:44:30,280 --> 00:44:33,460
>> Αντί να καθιστούν καλώντας και καθιστώντας κάποια σελίδα,

743
00:44:33,460 --> 00:44:38,100
quote.php τώρα απλά πρόκειται να εκτυπώσετε την αξία του αποθέματος ως συμβολοσειρά.

744
00:44:38,100 --> 00:44:41,880
Έτσι, εάν επρόκειτο να επισκεφθεί πραγματικά την σελίδα, θα δείτε ότι μόνο μικρό σειρά

745
00:44:41,880 --> 00:44:45,030
από ό, τι η τιμή της μετοχής είναι.

746
00:44:45,030 --> 00:44:50,170
Ένα τελευταίο πράγμα που πρέπει να κάνουμε εδώ είναι απλά βεβαιωθείτε ότι αυτή η συνάρτηση επιστρέφει false.

747
00:44:50,170 --> 00:44:53,560
Τι λέει αυτό είναι ότι αν είμαι μέσα από ένα πρόγραμμα χειρισμού συμβάντων

748
00:44:53,560 --> 00:44:57,300
και ότι χειρισμού συμβάντων επιστρέφει ψευδείς αντί να επιστρέψει αλήθεια,

749
00:44:57,300 --> 00:45:01,510
αυτό σημαίνει ότι δεν θέλω την αρχική εκδήλωση στη φωτιά.

750
00:45:01,510 --> 00:45:05,270
Σε αυτή την περίπτωση, αν δεν είχαμε κανένα JavaScript και θα υποβάλει έντυπο,

751
00:45:05,270 --> 00:45:08,280
πρόγραμμα περιήγησης στο Web μας πρόκειται να πει, «Πάω να στείλει τα δεδομένα μαζί,"

752
00:45:08,280 --> 00:45:10,130
και πρόκειται να σας στείλει σε μια άλλη σελίδα.

753
00:45:10,130 --> 00:45:14,360
Επειδή είμαστε χρησιμοποιώντας AJAX τώρα, δεν υπάρχει καμία ανάγκη να στείλει το χρήστη σε μια άλλη σελίδα.

754
00:45:14,360 --> 00:45:17,920
Είμαστε ακριβώς πρόκειται να εμφανιστούν τα αποτελέσματα δυναμικά στην ίδια σελίδα.

755
00:45:17,920 --> 00:45:21,460
Εμείς πραγματικά δεν θέλουν να πάνε οπουδήποτε, και θέλω να μείνω στην ίδια σελίδα.

756
00:45:21,460 --> 00:45:27,060
Έτσι, με την επιστροφή ψευδείς, εξασφαλίζουμε ότι η φόρμα δεν το κάνει αυτό για εμάς.

757
00:45:27,060 --> 00:45:31,170
Ας ρίξουμε μια ματιά σε ό, τι αυτό φαίνεται πραγματικά σαν.

758
00:45:31,170 --> 00:45:34,180
Απόσπασμα σελίδα μας φαίνεται το ίδιο.

759
00:45:34,180 --> 00:45:37,240
Επιτρέψτε μου να τραβήξει μέχρι τον επιθεωρητή εδώ κάτω, έτσι μπορούμε να δούμε τι συμβαίνει.

760
00:45:37,240 --> 00:45:40,270
Κάντε λίγο λιγότερο τεράστια.

761
00:45:40,270 --> 00:45:44,590
Να θυμάστε, αν ανοίξουμε την καρτέλα Network, αυτό είναι όπου μπορούμε να δούμε όλα τα αιτήματα HTTP

762
00:45:44,590 --> 00:45:47,570
που συμβαίνουν στη σελίδα.

763
00:45:47,570 --> 00:45:52,890
>> Για ένα σύμβολο επιτρέψτε μου να πληκτρολογήσετε AAPL και κάντε κλικ στο Get Quote.

764
00:45:52,890 --> 00:45:56,720
Τώρα είδαμε ότι η μετοχή της Apple κοστίζει κάποια αριθμός των δολαρίων

765
00:45:56,720 --> 00:46:00,410
μόλις εμφανίστηκε στη σελίδα, αλλά η διεύθυνση URL δεν άλλαξε καθόλου.

766
00:46:00,410 --> 00:46:04,570
Στην πραγματικότητα, εδώ είναι το HTTP αίτημα που μόλις έκανε.

767
00:46:04,570 --> 00:46:09,980
Κάναμε μια αίτηση POST για quote.php. Αυτό είναι λογικό.

768
00:46:09,980 --> 00:46:12,800
Αυτό είναι ό, τι ο διακομιστής μας έστειλε πίσω.

769
00:46:12,800 --> 00:46:16,320
Δεν είναι πλέον αυτό το γιγάντιο HTML έγγραφο με τις εικόνες και τα πράγματα όπως ότι,

770
00:46:16,320 --> 00:46:20,920
είναι απλά μια γραμμή κειμένου, και στη συνέχεια θα εμφανίζεται μόνο η γραμμή του κειμένου.

771
00:46:20,920 --> 00:46:26,290
Αν πάμε πίσω στις κεφαλίδες και να δούμε τι πραγματικά έστειλε μέσα από αυτό το αίτημα HTTP,

772
00:46:26,290 --> 00:46:33,950
μπορούμε να δούμε ότι εδώ κάτω στείλαμε μαζί με το σύμβολο του κλειδιού και αξίας AAPL,

773
00:46:33,950 --> 00:46:36,430
το οποίο είναι αυτό που ο χρήστης πληκτρολογήσει μέσα

774
00:46:36,430 --> 00:46:39,230
Αυτό είναι ωραίο, αλλά είναι ακόμα λίγο ενοχλητικό.

775
00:46:39,230 --> 00:46:42,490
Έχω ακόμα να κάνετε κλικ σε αυτό το κουμπί για να πάρετε την τιμή μιας μετοχής.

776
00:46:42,490 --> 00:46:45,880
Είμαστε πολυάσχολοι άνθρωποι και δεν έχουμε το χρόνο να κάνετε κλικ σε κουμπιά.

777
00:46:45,880 --> 00:46:49,910
Η Google πραγματοποίησε αυτή λίγο πριν από λίγο καιρό, όταν θα εφαρμοστεί το Google Instant.

778
00:46:49,910 --> 00:46:53,590
Τι Google Instant δεν είναι όπως εσείς πληκτρολογείτε ξεκινά ακριβώς την εμφάνιση των αποτελεσμάτων για εσάς

779
00:46:53,590 --> 00:46:56,520
έτσι δεν έχετε να ανησυχείτε για ακόμη κλικ Αναζήτηση.

780
00:46:56,520 --> 00:46:58,730
Στην πραγματικότητα, μια ιστορία διασκεδαστική που σχετίζονται με αυτό.

781
00:46:58,730 --> 00:47:01,100
Μόλις Google Instant βγήκε, οι άνθρωποι ήταν σαν, "Πω πω, αυτό είναι σούπερ εκπληκτικό."

782
00:47:01,100 --> 00:47:02,540
"Αυτό είναι τόσο δροσερό."

783
00:47:02,540 --> 00:47:05,950
Και ένας μαθητής κάτω στο Στάνφορντ ο οποίος ήταν 19 κατά το χρόνο

784
00:47:05,950 --> 00:47:09,000
έκανε αυτήν την τοποθεσία που ονομάζεται YouTube Instant.

785
00:47:09,000 --> 00:47:13,170
Όλα Άμεση YouTube δεν είναι να αναζητήσετε αποτελεσματικά το YouTube αμέσως.

786
00:47:13,170 --> 00:47:17,020
Έτσι, αντί να χρειάζεται να πάει στο YouTube.com και πατήστε Αναζήτηση,

787
00:47:17,020 --> 00:47:21,650
όταν αρχίσετε να πληκτρολογείτε στο YouTube Άμεση κάτι σαν CS50,

788
00:47:21,650 --> 00:47:25,320
θα μπορούσαμε να δούμε εδώ ότι αυτό είναι που προσπαθούν να σε μια αργή σύνδεση στο Internet

789
00:47:25,320 --> 00:47:28,500
συμπληρώσετε τα αποτελέσματα αυτά ζουν.

790
00:47:28,500 --> 00:47:35,590
Για να το κάνουμε αυτό μπορούμε να κάνουμε πραγματικά μια πολύ απλή τροποποίηση quote.js αρχείο μας.

791
00:47:35,590 --> 00:47:40,900
Αυτή τη στιγμή είμαστε συνδέοντας αυτό το γεγονός, όταν η υποβολή της φόρμας.

792
00:47:40,900 --> 00:47:43,760
Δεν θέλουν πραγματικά να κάνει ο χρήστης υποστηρίζουν ότι η μορφή πια,

793
00:47:43,760 --> 00:47:48,570
οπότε ας φωτιά αντί αυτό το γεγονός κάθε φορά που ο χρήστης πατήσει ένα πλήκτρο.

794
00:47:48,570 --> 00:47:53,200
Για να το κάνουμε αυτό ας πρώτα να αλλάξετε την εκδήλωση από υποβάλλει KeyUp.

795
00:47:53,200 --> 00:47:55,740
Αυτό σημαίνει ότι αντί να περιμένει για το έντυπο για την υποβολή,

796
00:47:55,740 --> 00:47:58,490
κάθε φορά που πιέζεται το πλήκτρο, κάτι που πρόκειται να συμβεί.

797
00:47:58,490 --> 00:48:02,030
Κανείς πλέον δεν έχει νόημα να αποδίδουν αυτό το γεγονός KeyUp σε ολόκληρη μορφή.

798
00:48:02,030 --> 00:48:05,080
Είμαστε πραγματικά νοιάζονται μόνο για το πλαίσιο αναζήτησης.

799
00:48:05,080 --> 00:48:09,320
>> Για να επιλέξετε ότι τώρα, μπορούμε να αλλάξουμε αυτό να είναι, αντί μορφή-απόσπασμα,

800
00:48:09,320 --> 00:48:14,220
μορφή-απόσπασμα και θα έχουμε μία είσοδο (τύπου = κείμενο) ή θα μπορούσαμε να πούμε (όνομα = σύμβολο) -

801
00:48:14,220 --> 00:48:16,420
ό, τι θέλουμε.

802
00:48:16,420 --> 00:48:18,650
Τώρα υπάρχει ένα τελευταίο πράγμα που πρέπει να κάνουμε.

803
00:48:18,650 --> 00:48:21,190
Θυμηθείτε εδώ κάτω όταν είπαμε την επιστροφή ψευδή

804
00:48:21,190 --> 00:48:24,370
είπαμε δεν θέλουμε αυτό το γεγονός αθέτησης στη φωτιά.

805
00:48:24,370 --> 00:48:26,390
Όμως, αυτό ακριβώς συμβαίνει, έτσι ώστε αν απενεργοποιήσετε ότι τώρα,

806
00:48:26,390 --> 00:48:29,660
ό, τι πληκτρολογείτε δεν πρόκειται να εμφανιστούν στο πρόγραμμα περιήγησης πια

807
00:48:29,660 --> 00:48:33,000
διότι αυτό θα ήταν η προεπιλεγμένη συμπεριφορά του πληκτρολογώντας σε ένα πλαίσιο κειμένου.

808
00:48:33,000 --> 00:48:38,660
Δεν θέλουμε να παρακάμψετε ότι, οπότε ας καταστρέψει αυτή η επιστροφή ψευδείς.

809
00:48:38,660 --> 00:48:44,800
Εάν αποθηκεύσετε αυτό και επαναλάβετε τη φόρτωση της σελίδας, τώρα όταν αρχίσετε να πληκτρολογείτε AAPL

810
00:48:44,800 --> 00:48:50,160
θα δείτε ότι η τιμή της μετοχής στο κάτω μέρος εδώ ολοκληρώνει αυτόματα.

811
00:48:50,160 --> 00:48:53,150
Έτσι, εδώ είναι CS50 Άμεση Οικονομικών.

812
00:48:53,150 --> 00:48:55,860
Στην πραγματικότητα είναι μια διασκεδαστική ιστορία για το YouTube Instant

813
00:48:55,860 --> 00:48:59,420
ότι είναι φοιτητής ακριβώς το είδος του έγραψε ως ένα έργο 1-νύχτα,

814
00:48:59,420 --> 00:49:03,800
και την επόμενη μέρα του προσφέρθηκε μια εργασία από το YouTube Διευθύνων Σύμβουλος.

815
00:49:03,800 --> 00:49:10,610
Έτσι, τόσο απλό, που CS50 φοιτητές, τελικά τα έργα σας μπορεί να σας πάρει μια εργασία στο YouTube.

816
00:49:10,610 --> 00:49:14,720
Κάτι τέτοιο είναι μια πραγματικά δροσερή ιδέα για ένα τελικό σχέδιο, έτσι δεν είναι;

817
00:49:14,720 --> 00:49:18,170
Είχαμε κάποια υπάρχουσα λειτουργικότητα που θέλουμε να εντάξουμε με.

818
00:49:18,170 --> 00:49:20,330
Θα βελτιώσει την εμπειρία του χρήστη λίγο,

819
00:49:20,330 --> 00:49:24,340
και ξαφνικά κάτι αναζήτηση στο YouTube Instant θα μπορούσε να είναι πολύ πιο εύκολο

820
00:49:24,340 --> 00:49:27,290
από την αναζήτηση για αυτό στο κανονικό YouTube.

821
00:49:27,290 --> 00:49:30,790
Έτσι, αυτό είναι AJAX με λίγα λόγια.

822
00:49:30,790 --> 00:49:34,860
>> Στα παραδείγματα που δείχνουν Ιωσήφ, είδαμε πολλά Συμπληρώνει αυτόματα,

823
00:49:34,860 --> 00:49:39,250
Συμπληρώνει αυτόματα και αυτά είναι πραγματικά, πραγματικά βολικό, επειδή δεν έχουμε να θυμόμαστε -

824
00:49:39,250 --> 00:49:41,770
Για παράδειγμα, αν δεν θυμάστε την τιμή της μετοχής της Apple

825
00:49:41,770 --> 00:49:45,110
και εμείς απλά ξέρω ότι είναι κάτι αα, όχι μόνο να μου λέει,

826
00:49:45,110 --> 00:49:48,740
"Ένα μερίδιο του αυτό το πράγμα κοστίζει τόσα πολλά χρήματα»,

827
00:49:48,740 --> 00:49:52,540
Είχα το είδος του αρέσει να ξέρω τι αποθέματα αρχίζουν με αα.

828
00:49:52,540 --> 00:49:58,340
Μπορούμε να το κάνουμε αυτό πολύ όμορφα με τη βιβλιοθήκη Bootstrap που είναι ήδη συμπεριληφθεί

829
00:49:58,340 --> 00:50:01,380
μέσα από CS50 Οικονομικών.

830
00:50:01,380 --> 00:50:09,390
Εάν έρχεστε εδώ στην ετικέτα JavaScript και μετακινηθείτε προς τα κάτω για να Typeahead,

831
00:50:09,390 --> 00:50:13,730
αυτό είναι μόνο ένα ωραίο plugin που κάποιος έχει ήδη έγραψε για εμάς,

832
00:50:13,730 --> 00:50:16,980
και μπορούμε να χρησιμοποιήσουμε εύκολα τη λειτουργικότητα του σαν αυτό.

833
00:50:16,980 --> 00:50:21,410
I δακτυλογραφημένα σε Α και εδώ είναι μια λίστα με ορισμένα κράτη που αρχίζουν με Α.

834
00:50:21,410 --> 00:50:25,360
Ας πούμε ότι πιστεύω ότι αυτό είναι πραγματικά δροσερό και ήρθε η ώρα για μένα να συμπεριλάβει στη σελίδα μου.

835
00:50:25,360 --> 00:50:28,300
Αποδεικνύεται ότι αυτό είναι πραγματικά, πραγματικά απλή.

836
00:50:28,300 --> 00:50:32,810
Ας πηδούν πάνω από εδώ για να quote3.js.

837
00:50:34,890 --> 00:50:37,380
Αρχείο μου φαίνεται λίγο διαφορετικό.

838
00:50:37,380 --> 00:50:39,700
Εδώ κάτω όλοι AJAX τα πράγματά μου είναι η ίδια.

839
00:50:39,700 --> 00:50:43,170
Θέλω να φορτώσει τα στοιχεία για τα αποθέματα, χωρίς να χρειάζεται να μεταβείτε σε άλλη σελίδα.

840
00:50:43,170 --> 00:50:46,220
Αλλά τώρα θέλω να χρησιμοποιήσω αυτό το plugin.

841
00:50:46,220 --> 00:50:51,020
Η τεκμηρίωση Bootstrap έχει μεγάλη παραδείγματα για το πώς ακριβώς μπορώ να το κάνουμε αυτό.

842
00:50:51,020 --> 00:50:54,350
Θέλω να πω, "Εδώ είναι η είσοδος που θέλω να autocomplete για"

843
00:50:54,350 --> 00:50:56,640
και Πάω να καλέσετε τη λειτουργία αυτή ονομάζεται typeahead,

844
00:50:56,640 --> 00:50:59,730
και ότι πρόκειται να χειριστεί όλα τα Typeahead πράγματα για μας.

845
00:50:59,730 --> 00:51:02,090
Θα προετοιμάσει τη λίστα, θα κάνει όλα φιλτράρισμα μας.

846
00:51:02,090 --> 00:51:06,680
Το μόνο πράγμα που χρειάζεται να γνωρίζετε είναι τα δεδομένα είμαστε σε autocompleting.

847
00:51:06,680 --> 00:51:10,480
Έτσι βρήκα αυτό το κλειδί, απλά διαβάζοντας την τεκμηρίωση και κοιτάζοντας τα παραδείγματα.

848
00:51:10,480 --> 00:51:14,150
Αν μου δώσετε ένα κλειδί της πηγής, η τιμή αυτού του κλειδιού

849
00:51:14,150 --> 00:51:17,770
είναι μερικά μόνο σειρά από πράγματα που θέλω να autocomplete για.

850
00:51:17,770 --> 00:51:20,180
Η μεταβλητή αυτή προήλθε από άλλο αρχείο.

851
00:51:20,180 --> 00:51:23,400
Έχω ανοίξει symbols.js.

852
00:51:23,400 --> 00:51:27,980
>> Αυτό symbols.js είναι ακριβώς αυτό πραγματικά, πραγματικά μεγάλη ποικιλία που περιέχει χορδές

853
00:51:27,980 --> 00:51:32,080
όλων αυτών των συμβόλων μετοχών από το NASDAQ.

854
00:51:32,080 --> 00:51:42,190
Αν θέλω να πηδήσει πίσω στο HTML, έτσι jharvard, vhosts, globalhost, html, πρότυπα,

855
00:51:42,190 --> 00:51:45,820
quote_form.

856
00:51:45,820 --> 00:51:50,910
Από που λέγεται τώρα quote3.js, επιτρέψτε μου να αλλάξετε το αρχείο JavaScript είμαι και εδώ.

857
00:51:50,910 --> 00:51:55,110
Τώρα έχω quote3.js, έτσι είμαι πρόκειται να φορτώσει σε αυτό το ξεχωριστό αρχείο JavaScript,

858
00:51:55,110 --> 00:51:57,910
αυτός που έχει αυτό το Bootstrap autocomplete.

859
00:51:57,910 --> 00:52:04,430
Τώρα, όταν θα επιστρέψετε στο πρόγραμμα περιήγησης, επαναλάβετε τη φόρτωση της σελίδας, και αρχίζω την πληκτρολόγηση αα,

860
00:52:04,430 --> 00:52:06,880
υπάρχει αυτόματης συμπλήρωσης μου. Και ήταν πραγματικά τόσο απλό.

861
00:52:06,880 --> 00:52:11,400
Είχα 1 γραμμή κώδικα που μόλις είπε, «Εδώ είναι τα πράγματα που θέλω να autocomplete για"

862
00:52:11,400 --> 00:52:16,590
και ξαφνικά έχω αυτό το πραγματικά πολύ ωραία λειτουργικότητα με όχι ένα σωρό προσπάθεια σε όλα.

863
00:52:16,590 --> 00:52:19,810
Όπως είστε ανάπτυξη ιστοσελίδων και ιδιαίτερα την μπροστινή πλευρά τέλος των πραγμάτων,

864
00:52:19,810 --> 00:52:21,840
θα πάμε να βρούμε αυτό συμβαίνει πολύ.

865
00:52:21,840 --> 00:52:25,700
Υπάρχουν πολλά, πολλά, πολλά πραγματικά δροσερό δωρεάν βιβλιοθήκες εκεί έξω

866
00:52:25,700 --> 00:52:30,190
που καθιστούν εξαιρετικά εύκολο να κάνουμε τα πράγματα όπως αυτό.

867
00:52:30,190 --> 00:52:37,230
Μπορεί κανείς να σκεφτεί για τυχόν μειονεκτήματα των autocompleting απλά σε αυτή τη μεγάλη λίστα των συμβόλων;

868
00:52:37,230 --> 00:52:41,580
Τι θα μπορούσε να είναι κάτι που δεν είναι το καλύτερο με αυτή την προσέγγιση;

869
00:52:42,790 --> 00:52:45,960
Ναι. >> [Φοιτητής] ώρα, αν έχετε μια μεγάλη [δεν ακούγεται]

870
00:52:45,960 --> 00:52:50,420
Ναι. Αυτή τη στιγμή είμαστε λήψη αυτού του αρχείου JavaScript τεράστια και υπάρχει πολλή των συμβόλων.

871
00:52:50,420 --> 00:52:54,360
Και έτσι, αν έχουμε έναν τόνο πράγματα, αυτό θα μπορούσε να αυξήσει το είδος του την καθυστέρηση της όχι μόνο την αναζήτηση

872
00:52:54,360 --> 00:52:56,600
αλλά η λήψη επίσης το πραγματικό αρχείο.

873
00:52:56,600 --> 00:52:58,670
Μεγάλη. Οτιδήποτε άλλο;

874
00:53:01,950 --> 00:53:05,280
Αυτή τη στιγμή δεν υπάρχει καμία πραγματική αίσθηση του ενδιαφέρον.

875
00:53:05,280 --> 00:53:08,190
Αν πληκτρολογήσετε ένα Α, οι εταιρίες που εμφανίζονται εδώ

876
00:53:08,190 --> 00:53:11,220
μπορεί να μην είναι οι πιο δημοφιλείς εταιρείες που αρχίζουν με Α.

877
00:53:11,220 --> 00:53:17,130
>> Πριν πάρω την Apple, μπορεί να πάρει λίγο περισσότερο χαρακτήρες για να βρείτε αυτό που ψάχνω.

878
00:53:17,130 --> 00:53:20,420
Αυτό αυτόματης συμπλήρωσης δεν έχει αυτή την αίσθηση του ενδιαφέρον.

879
00:53:20,420 --> 00:53:24,400
Είναι ακριβώς πρόκειται να πει, "Ό, τι ταιριάζει Πάω να εμφανιστεί."

880
00:53:24,400 --> 00:53:30,510
Αντί γι 'αυτό, θα ήθελα με κάποιο τρόπο να ενσωματώσει κάποια σημασία σε αναζητήσεις μου.

881
00:53:30,510 --> 00:53:36,440
Αν πάω εδώ στο Yahoo! Οικονομικών, finance.yahoo.com,

882
00:53:36,440 --> 00:53:42,100
Αν προσπαθήσετε να εισαγάγετε ένα σύμβολο στη σελίδα Yahoo! Οικονομικών

883
00:53:42,100 --> 00:53:52,310
και αρχίζω να πληκτρολογείτε goog, έχω αυτό το ωραίο λίστα των πραγμάτων.

884
00:53:52,310 --> 00:53:57,100
Σαφώς, αυτό μοιάζει με το Yahoo! Finance κάνει κάτι πιο έξυπνο εδώ.

885
00:53:57,100 --> 00:53:59,790
Έχουν κάποια σχέση και έχουν επίσης πρόσθετες πληροφορίες

886
00:53:59,790 --> 00:54:01,430
όπως και το όνομα του αποθέματος.

887
00:54:01,430 --> 00:54:05,850
Αυτό είναι κάτι που δεν μπορώ πραγματικά να πάρει με μόλις μου λίστα απόθεμα των συμβόλων.

888
00:54:05,850 --> 00:54:09,520
Θέλω αυτό και έτσι είμαι πρόκειται να το πάρει.

889
00:54:09,520 --> 00:54:11,790
Για να το κάνουμε αυτό ας κάνουμε μερικά πράγματα.

890
00:54:11,790 --> 00:54:15,580
Πρώτα ας ανοίξει τον επιθεωρητή σε αυτή τη σελίδα

891
00:54:15,580 --> 00:54:18,100
γιατί είδαμε ότι αυτή η σελίδα δεν είναι επαναφόρτωση σε όλα,

892
00:54:18,100 --> 00:54:21,960
γι 'αυτό είναι με τη χρήση AJAX πιθανώς με κάποιο τρόπο να τη φόρτωση των δεδομένων του.

893
00:54:21,960 --> 00:54:23,920
Μπορούμε να μάθουμε τι δεδομένα θα είναι φόρτωση.

894
00:54:23,920 --> 00:54:28,390
Αν κάνω κλικ σε αυτήν την καρτέλα Network, αυτά πρόκειται να είναι όλα τα αιτήματα που αρχίζουν να απολυθούν.

895
00:54:28,390 --> 00:54:34,020
Τώρα, αν θα πληκτρολογήσετε στο goo, μπορούμε να δούμε ότι πήρα ακριβώς ένα νέο αίτημα HTTP.

896
00:54:34,020 --> 00:54:37,490
Αυτό είναι πιθανώς όταν τα δεδομένα που προέρχονται από.

897
00:54:37,490 --> 00:54:41,990
Σίγουρα αρκετά, αν κοιτάζω αυτό το URL, το οποίο είναι λίγο περίεργο όνομα,

898
00:54:41,990 --> 00:54:46,930
μπορούμε να δούμε ότι αυτό είναι ακριβώς όπου το Yahoo στέλνει μακριά από τα δεδομένα του.

899
00:54:46,930 --> 00:54:53,400
>> Έχω δημιουργήσει ένα ξεχωριστό αρχείο που ονομάζεται suggest.php που είναι πολύ παρόμοια στο πνεύμα με την λειτουργία αναζήτησης.

900
00:54:53,400 --> 00:54:57,730
Είναι βασικά πρόκειται να κάνει ένα ερώτημα στο URL της Yahoo, να πάρει πίσω κάποια δεδομένα,

901
00:54:57,730 --> 00:54:59,750
και να το στείλετε πίσω σε μένα.

902
00:54:59,750 --> 00:55:02,570
Τώρα, αντί να χρησιμοποιούν αυτό το μεγάλο, τεράστιο κατάλογο των συμβόλων,

903
00:55:02,570 --> 00:55:05,280
Μπορώ να χρησιμοποιήσω ωραία πράγματα σημασία της Yahoo,

904
00:55:05,280 --> 00:55:08,150
και δεν έχω για να κατεβάσετε το αρχείο ότι η μαζική JavaScript.

905
00:55:08,150 --> 00:55:12,040
Είμαι μόνο πρόκειται να γκρεμίσει τα πραγματικά σχετικές σύμβολα μετοχών.

906
00:55:12,040 --> 00:55:13,960
Ας άλμα σε αυτό.

907
00:55:13,960 --> 00:55:17,360
Έτσι, html, js. Είμαστε τώρα σε quote4.

908
00:55:17,360 --> 00:55:22,120
Τώρα είμαστε πλέον με αυτή τη μεγάλη λίστα των αρχείων JavaScript.

909
00:55:22,120 --> 00:55:24,430
Αλλά υπάρχει ένα μικρό είδος του προβλήματος του σχεδιασμού εδώ.

910
00:55:24,430 --> 00:55:28,200
Έχουμε πει ότι η Α AJAX είναι ασύγχρονη.

911
00:55:28,200 --> 00:55:31,000
Αυτό σημαίνει ότι όταν κάνω μια αίτηση AJAX,

912
00:55:31,000 --> 00:55:36,490
έτσι ακριβώς εδώ στη γραμμή 8, αυτό είναι όπου AJAX αίτημά μου είναι πραγματικά φωτιά.

913
00:55:36,490 --> 00:55:40,370
Ας πούμε τώρα έχω κάποιο κώδικα εδώ κάτω που πρόκειται να κάνουμε κάποια πράγματα

914
00:55:40,370 --> 00:55:43,930
όπως προειδοποιεί το χρήστη ή να αλλάξει κάτι στη σελίδα.

915
00:55:43,930 --> 00:55:49,830
Αυτό δεν πρόκειται να συμβεί είναι το πρόγραμμα περιήγησης δεν πρόκειται να περιμένει για αυτό το αίτημα να συνεχίσει

916
00:55:49,830 --> 00:55:53,480
πριν έρθουν προς τα κάτω και να χτυπήσει αυτή τη γραμμή.

917
00:55:53,480 --> 00:55:55,900
Αυτό είναι το ασύγχρονο μέρος.

918
00:55:55,900 --> 00:55:58,400
Είναι πρόκειται να κάνει το αίτημα αυτό και λένε, "Όταν τελειώσετε,

919
00:55:58,400 --> 00:56:03,080
"Έλα πίσω και να καλέσει τη λειτουργία αυτή που σας είπα να καλέσετε στο εσωτερικό της επιτυχίας."

920
00:56:03,080 --> 00:56:07,300
Αυτό σημαίνει πως δεν μπορούμε απλά να κατεβάσετε όλα τα αποθέματα των προτέρων.

921
00:56:07,300 --> 00:56:10,300
Πρέπει να κάνουμε την αίτηση και περιμένετε για κάτι για να έρθει πίσω.

922
00:56:10,300 --> 00:56:13,330
Αυτό σημαίνει ότι πριν, θα μπορούσε να πει απλά Bootstrap,

923
00:56:13,330 --> 00:56:15,580
"Εδώ είναι η λίστα των πραγμάτων που θέλετε να autocomplete για".

924
00:56:15,580 --> 00:56:18,950
Δεν μπορούμε πλέον να το κάνουμε αυτό πια, γιατί δεν ξέρουμε

925
00:56:18,950 --> 00:56:21,780
αυτό που θέλουμε πραγματικά να autocomplete για.

926
00:56:21,780 --> 00:56:25,190
Ευτυχώς, Bootstrap σκεφτεί αυτό, διότι αυτά είναι έξυπνα παιδιά εκεί πέρα,

927
00:56:25,190 --> 00:56:30,160
και που πραγματικά μας έδωσαν έναν άλλο τρόπο για να φορτώσετε αυτό το Typeahead plugin.

928
00:56:30,160 --> 00:56:35,630
Πριν, η τιμή αυτής της ιδιότητας πηγή ήταν ακριβώς αυτή η μεγάλη ποικιλία των πραγμάτων για να autocomplete για.

929
00:56:35,630 --> 00:56:39,580
>> Τώρα, το ακίνητο πηγή είναι στην πραγματικότητα μια λειτουργία,

930
00:56:39,580 --> 00:56:44,580
και ο σκοπός αυτής της λειτουργίας είναι να καταλάβουμε ποια είναι τα πράγματα για την αυτόματη συμπλήρωση.

931
00:56:44,580 --> 00:56:48,730
Ο τρόπος που πρόκειται να καταλάβω είναι ότι πρόκειται να ζητήσει από το Yahoo! Finance

932
00:56:48,730 --> 00:56:51,750
ποια είναι τα καλύτερα πράγματα για την αυτόματη συμπλήρωση.

933
00:56:51,750 --> 00:56:54,500
Για να γίνει αυτό θα πάω να κάνω μια πολύ παρόμοιο αίτημα AJAX.

934
00:56:54,500 --> 00:56:59,010
Πάω να ζητήσει αυτή τη σελίδα σε suggest.php.

935
00:56:59,010 --> 00:57:01,360
Θέλω να στείλω μαζί με τα σύμβολα ακόμη.

936
00:57:01,360 --> 00:57:05,570
Και τώρα η επιτυχία μου, η τεκμηρίωση Bootstrap μου είπε

937
00:57:05,570 --> 00:57:09,130
ότι για να συμπληρώσετε τον κατάλογο των πραγμάτων,

938
00:57:09,130 --> 00:57:14,370
το μόνο που χρειάζεται να κάνετε είναι να περάσει σε αυτή την σειρά τώρα στη λειτουργία επανάκλησης.

939
00:57:14,370 --> 00:57:15,660
Αλλά περιμένετε ένα λεπτό.

940
00:57:15,660 --> 00:57:20,240
Αν αυτό υποτίθεται ότι είναι ένας πίνακας και AJAX είναι με την αποστολή πίσω κείμενο,

941
00:57:20,240 --> 00:57:22,720
πώς είναι αυτό δυνατό;

942
00:57:22,720 --> 00:57:27,910
Αυτό εισάγει ένα νέο τρόπο ανταλλαγής δεδομένων που ονομάζεται JSON.

943
00:57:27,910 --> 00:57:33,000
Σε αυτή την περίπτωση δεν είμαστε απλά στέλνοντας ένα απλό πίσω συμβολοσειρά κειμένου.

944
00:57:33,000 --> 00:57:37,670
Τώρα έχουμε να κάνουμε με αυτό το πιο πολύπλοκο κατάλογο των συμβόλων αποθεμάτων.

945
00:57:37,670 --> 00:57:41,730
Αυτά τα σύμβολα απόθεμα μπορεί επίσης να περιλαμβάνει πράγματα όπως το όνομα της εταιρείας ή τις τρέχουσες τιμές.

946
00:57:41,730 --> 00:57:47,550
Απλά χρησιμοποιώντας μια μεγάλη μακρά σειρά που δεν έχει μορφοποιηθεί σε οποιοδήποτε προβλέψιμο τρόπο

947
00:57:47,550 --> 00:57:51,970
Δεν πρόκειται να είναι ο καλύτερος τρόπος για να πάρετε αυτά τα δεδομένα από τον server της Yahoo για μένα

948
00:57:51,970 --> 00:57:54,540
με έναν τρόπο που μπορεί εύκολα να καταλάβει.

949
00:57:54,540 --> 00:58:01,280
JSON είναι μια τεχνολογία που εκμεταλλεύεται τις δυνατότητες του πώς θα δημιουργήσουμε associative arrays σε JavaScript.

950
00:58:01,280 --> 00:58:04,510
Αυτό μοιάζει πολύ με ένα associative array JavaScript,

951
00:58:04,510 --> 00:58:06,600
και στην πραγματικότητα, αυτό είναι επειδή είναι.

952
00:58:06,600 --> 00:58:09,710
JSON σημαίνει Object Notation JavaScript.

953
00:58:09,710 --> 00:58:15,020
Αυτό είναι βασικά μια μορφή που συμφωνήθηκε για τη μεταφορά δεδομένων εμπρός και πίσω.

954
00:58:15,020 --> 00:58:18,280
Εδώ αυτό το αντικείμενο JSON JSON ή αυτό associative array

955
00:58:18,280 --> 00:58:21,010
είναι να μου στείλει κάποια δεδομένα για μια σειρά μαθημάτων.

956
00:58:21,010 --> 00:58:25,110
>> Τα κλειδιά αυτού του πίνακα είναι τα πράγματα όπως βέβαια που έχει μια αξία του CS50,

957
00:58:25,110 --> 00:58:29,140
και κάτω εδώ μπορούμε να δούμε ότι μπορώ να έχω μια τιμή που είναι ένας πίνακας.

958
00:58:29,140 --> 00:58:32,730
Δεν έχω να κάνω τα πράγματα όπως αναλύσει χορδές και να αναζητήσουν κόμματα

959
00:58:32,730 --> 00:58:35,330
και να κάνουμε τρελά πράγματα όπως αυτό.

960
00:58:35,330 --> 00:58:38,820
Επειδή αυτό έχει δηλωθεί σε αυτή τη μορφή JSON,

961
00:58:38,820 --> 00:58:43,510
JavaScript και jQuery έχουν ήδη λειτουργίες να μετατρέψετε ένα string

962
00:58:43,510 --> 00:58:48,140
που μοιάζει με αυτό το JSON σε πραγματικό JavaScript associative array

963
00:58:48,140 --> 00:58:50,440
ότι μπορούμε να εργαστούμε με.

964
00:58:50,440 --> 00:58:56,660
Κάτι που είναι τόσο απλό όσο λέγοντας ότι δεν είναι αυτό το αρχείο, suggest.php,

965
00:58:56,660 --> 00:58:59,040
να μου στείλει πίσω απλά μια συμβολοσειρά κειμένου,

966
00:58:59,040 --> 00:59:01,950
αλλά ξέρω ότι πρόκειται να μου στέλνει πίσω JSON.

967
00:59:01,950 --> 00:59:06,760
Αυτό σημαίνει ότι η JSON μπορεί να μετατραπεί σε ένα associative array JavaScript.

968
00:59:06,760 --> 00:59:10,830
Και έτσι jQuery, θα ήθελα να το κάνουμε αυτό για μένα.

969
00:59:10,830 --> 00:59:13,990
Αυτό σημαίνει ότι αυτή η παράμετρος απόκρισης εδώ,

970
00:59:13,990 --> 00:59:16,070
αυτό δεν είναι πλέον μόνο ένα string.

971
00:59:16,070 --> 00:59:19,860
Επειδή έχουμε πει jQuery που έρχεται εδώ κάποια JSON,

972
00:59:19,860 --> 00:59:22,950
jQuery θα είναι αρκετά έξυπνος για να πει, "Θα ήθελα JSON;"

973
00:59:22,950 --> 00:59:26,890
"Πάω να μετατρέψει ότι σε associative array για σένα."

974
00:59:26,890 --> 00:59:32,100
Ας ρίξουμε μια ματιά στην πραγματικότητα στην καρτέλα Δίκτυο φορά έχουμε quote4.js.

975
00:59:32,100 --> 00:59:35,400
Θα αλλάξει αυτό και επαναλάβετε τη φόρτωση της σελίδας.

976
00:59:37,150 --> 00:59:41,250
Τώρα είμαι πρόκειται να πληκτρολογήσετε ένα-ένα και πάλι.

977
00:59:41,250 --> 00:59:45,600
Έχω κάνει ένα ζευγάρι ζητά να suggest.php, αλλά τώρα αυτή η απάντηση,

978
00:59:45,600 --> 00:59:48,670
και όχι μόνο το string, είναι JSON.

979
00:59:48,670 --> 00:59:52,580
Έτσι έχω μια σγουρή αγκύλη λέει, "Εδώ έρχεται ένα associative array."

980
00:59:52,580 --> 00:59:56,830
>> Το πρώτο και μοναδικό κλειδί αυτής της associative array ονομάζεται σύμβολα,

981
00:59:56,830 --> 01:00:00,240
και τότε εδώ είναι ένας πίνακας όλων των σχετικών συμβόλων

982
01:00:00,240 --> 01:00:04,820
έρχονται τώρα από το Yahoo! Finance, όχι από την γιγαντιαία λίστα.

983
01:00:06,110 --> 01:00:10,630
Αυτό είναι το πώς μπορώ να συμπληρώσετε απλά αυτό το autocomplete plugin

984
01:00:10,630 --> 01:00:14,280
με ορισμένα στοιχεία που δεν έρχεται από ένα τοπικό αρχείο που είναι ήδη προκαθορισμένο

985
01:00:14,280 --> 01:00:17,490
αλλά από κάτι άλλο.

986
01:00:17,490 --> 01:00:21,160
Αποδεικνύεται ότι μπορούμε να πάρουμε πραγματικά πλεονέκτημα μιας τεχνολογίας που ονομάζεται JSONP,

987
01:00:21,160 --> 01:00:27,420
JSON ή με επένδυση, που θα εξαλείψει αυτό το suggest.php μεσάζων.

988
01:00:27,420 --> 01:00:34,010
Αλλά αντί να το κάνουμε αυτό, ας ρίξουμε μια ματιά, αντί στο πώς μπορεί να βελτιώσει ακόμη περισσότερο αυτή.

989
01:00:34,010 --> 01:00:36,040
Μου αρέσει πολύ Typeahead Bootstrap του. Είναι πραγματικά ωραίο.

990
01:00:36,040 --> 01:00:39,570
Αλλά είμαστε καλοί στο να πάρει το JavaScript και θέλουμε να το είδος αυτό κάνουμε μόνοι μας,

991
01:00:39,570 --> 01:00:43,870
ίσως ρίξτε μια ματιά σε αυτό το plugin θα μπορούσε να κάνει.

992
01:00:43,870 --> 01:00:46,500
Ας μην χρησιμοποιήσετε αυτό το πράγμα Typeahead,

993
01:00:46,500 --> 01:00:50,550
και ας προσπαθήσουμε να κάνουμε αυτή την λίστα με τις προτεινόμενες μετοχές τους εαυτούς μας.

994
01:00:50,550 --> 01:00:53,790
Εδώ στην quote6.php θα πάμε για να ξεκινήσει με τον ίδιο τρόπο.

995
01:00:53,790 --> 01:00:58,050
Κάθε φορά που κάποιος πληκτρολογεί κάτι, θέλουμε να κάνουμε μια αίτηση AJAX.

996
01:00:58,050 --> 01:01:01,590
Αυτό είναι παρόμοιο με το αρχικό μας CS50 Άμεση Οικονομικών.

997
01:01:01,590 --> 01:01:05,020
Αντί να κάνει μια αίτηση για quote.php,

998
01:01:05,020 --> 01:01:08,530
είμαστε τώρα κάνει μια αίτηση για το ίδιο αρχείο όπως και πριν, αυτό suggest.php,

999
01:01:08,530 --> 01:01:12,460
το οποίο είναι ακριβώς πρόκειται να τραβήξει δεδομένα από το Yahoo! Finance.

1000
01:01:12,460 --> 01:01:19,480
>> Και πάλι, εμείς περιμένουμε ακόμα JSON, αλλά τώρα από το Typeahead δεν κάνει αυτό για μας,

1001
01:01:19,480 --> 01:01:24,850
πρέπει επίσης να στείλουν μαζί την τιμή που βρίσκεται στο εσωτερικό του τρέχοντος πλαισίου κειμένου.

1002
01:01:24,850 --> 01:01:28,120
Τώρα ξέρουμε τι να ζητήσει από το Yahoo! Finance για,

1003
01:01:28,120 --> 01:01:34,160
και έτσι τώρα εδώ είναι η λειτουργία που θέλουμε να εκτελέσει μια φορά το αίτημα ολοκληρώνει.

1004
01:01:34,160 --> 01:01:36,520
Δεν έχουμε το plugin για να κάνει τον κατάλογο για μας,

1005
01:01:36,520 --> 01:01:40,630
τόσο εδώ είναι όπου είμαστε πραγματικά πρόκειται να οικοδομήσουμε μια λίστα με προτάσεις.

1006
01:01:40,630 --> 01:01:44,850
Για να γίνει αυτό, όπως και σε PHP έχουμε συνεχόμενα αυτές τις μεγάλες χορδές της HTML

1007
01:01:44,850 --> 01:01:48,170
τότε τα τυπωμένα, μπορούμε να κάνουμε το ίδιο ακριβώς πράγμα σε JavaScript.

1008
01:01:48,170 --> 01:01:51,850
Πρώτα θα πάμε για να ξεκινήσει αυτή την σειρά που ονομάζεται προτάσεις,

1009
01:01:51,850 --> 01:01:54,590
και αυτή η σειρά είναι ακριβώς πρόκειται να περιέχουν κάποια HTML.

1010
01:01:54,590 --> 01:01:58,320
Θέλουμε να είναι μια λίστα με τα πράγματα, έτσι θα πάμε για να ξεκινήσει με αυτήν την ετικέτα λίστα,

1011
01:01:58,320 --> 01:02:03,340
και τώρα θα πάμε να επαναλάβει πάνω από όλα τα σύμβολα που είχαν επιστραφεί πίσω σε μας.

1012
01:02:03,340 --> 01:02:06,500
Θυμηθείτε, επειδή έχουμε πει datatype: «json», αυτό δεν είναι ένα string.

1013
01:02:06,500 --> 01:02:09,500
Αυτό είναι ήδη μια σειρά για εμάς. Αυτό είναι πραγματικά δροσερό.

1014
01:02:09,500 --> 01:02:13,790
Μπορούμε απλά να πούμε, "θέλω να προσθέσετε ένα στοιχείο της λίστας."

1015
01:02:13,790 --> 01:02:16,000
Θα το θέσω μέσα σε ένα στοιχείο σε μια πλευρά του ότι,

1016
01:02:16,000 --> 01:02:19,030
θα δώσει μια κατηγορία από τις προτάσεις, ώστε να γνωρίζουμε τι είναι,

1017
01:02:19,030 --> 01:02:23,880
και τώρα εδώ είναι το σύμβολο που πήραμε πίσω από το Yahoo! Finance.

1018
01:02:23,880 --> 01:02:27,230
>> Αφού έχουμε δημιουργήσει ένα στοιχείο για κάθε ένα από τα σύμβολα που έχουμε πάρει πίσω,

1019
01:02:27,230 --> 01:02:30,100
θέλουμε απλώς να κλείσει τη λίστα.

1020
01:02:30,100 --> 01:02:33,040
Έτσι τώρα προτάσεις αντιπροσωπεύει αυτό το μικρό κομμάτι HTML

1021
01:02:33,040 --> 01:02:37,860
που όταν τεθεί σε μια σελίδα πρόκειται να είναι ο κατάλογος των πραγμάτων που ψάχνουμε.

1022
01:02:37,860 --> 01:02:41,070
Τώρα ας βάλουμε πραγματικά ότι στη σελίδα.

1023
01:02:41,070 --> 01:02:46,390
Για να γίνει αυτό που έχω δημιουργήσει πραγματικά ένα άλλο άδειο div και έχω δώσει ένα αναγνωριστικό της προτάσεις.

1024
01:02:46,390 --> 01:02:52,520
Μοιάζει πολύ με θέτουμε το περιεχόμενο του div που θα εμφανιστεί η τιμή των στοιχείων για τα αποθέματα,

1025
01:02:52,520 --> 01:02:58,600
τώρα απλά θέλετε να ρυθμίσετε τα περιεχόμενα αυτού του div με ό, τι αυτή η συμβολοσειρά είναι

1026
01:02:58,600 --> 01:03:00,290
που περιέχει αυτά τα σύμβολα.

1027
01:03:00,290 --> 01:03:07,650
Με τη χρήση αυτής της μεθόδου HTML, αυτή η μεταβλητή προτάσεις, αυτή η σειρά, είναι μια σειρά από HTML.

1028
01:03:07,650 --> 01:03:13,490
Θέλω να λάβουν την HTML και να το βάλετε στο εσωτερικό του div που ονομάζεται προτάσεις.

1029
01:03:13,490 --> 01:03:15,680
Έχουμε επισυνάπτονται ακριβώς κάτι για το DOM τώρα.

1030
01:03:15,680 --> 01:03:20,360
Έχουμε προσθέσει κάποια νέα στοιχεία στο DOM ότι μπορούμε τώρα να εμφανίζεται στη σελίδα.

1031
01:03:20,360 --> 01:03:22,540
Ας δούμε τι μοιάζει αυτό.

1032
01:03:22,540 --> 01:03:29,110
Αν φορτώσει σε quote6 και τώρα ερχόμαστε πίσω,

1033
01:03:29,110 --> 01:03:34,480
τώρα όταν αρχίσετε να πληκτρολογείτε AAPL, δεν έχουμε πλέον ότι η Bootstrap autocomplete,

1034
01:03:34,480 --> 01:03:38,470
αλλά τώρα έχουμε τον κατάλογο αυτό που εμείς οι ίδιοι γίνονται.

1035
01:03:38,470 --> 01:03:43,230
Αυτό είναι λίγο πιο άσχημο μπιτ από το Typeahead Μπουτστράπ, για παράδειγμα,

1036
01:03:43,230 --> 01:03:45,580
αλλά αυτό δεν μας επιτρέπει να κάνουμε κάτι άλλο.

1037
01:03:45,580 --> 01:03:48,660
Όταν ψάχναμε σε αυτό το plugin Bootstrap,

1038
01:03:48,660 --> 01:03:52,590
είδαμε ότι όταν συμπληρώθηκε αυτόματα, ένα από τα autocomplete τιμών ήταν AAPL.

1039
01:03:52,590 --> 01:03:54,820
Αυτό μπορεί να μην είναι τόσο χρήσιμο.

1040
01:03:54,820 --> 01:03:59,100
Ως χρήστης, εγώ μπορεί να μην αναγνωρίζω αμέσως όλα τα σύμβολα μετοχών.

1041
01:03:59,100 --> 01:04:02,370
Τι είμαι μάλλον πιο πιθανό να αναγνωρίσει είναι πραγματικά ονόματα της εταιρείας.

1042
01:04:02,370 --> 01:04:05,310
Έτσι, δεν θα ήταν πολύ χρήσιμο αν αντί να πει AAPL

1043
01:04:05,310 --> 01:04:07,970
αυτό είπε κάτι σαν την Apple Inc

1044
01:04:07,970 --> 01:04:12,240
Επειδή έχουμε έλασης εαυτούς μας αυτό, μπορούμε πραγματικά να κάνουμε αυτό εύκολα.

1045
01:04:12,240 --> 01:04:17,630
Ας ανοίξει το τελευταίο αρχείο απόσπασμα μας εδώ, έτσι quote7.

1046
01:04:17,630 --> 01:04:23,200
>> Το ίδιο πράγμα. Έχω δημιουργήσει ακριβώς ένα άλλο αρχείο PHP που θα επιστρέψει σε μας περισσότερο από ό, τι ακριβώς τα σύμβολα.

1047
01:04:23,200 --> 01:04:25,550
Επίσης, θα μας δώσει πίσω τα ονόματα της εταιρείας.

1048
01:04:25,550 --> 01:04:28,150
Και έτσι κάνουμε το ίδιο πράγμα. Είμαστε μια αίτηση AJAX.

1049
01:04:28,150 --> 01:04:32,370
Μόλις η αίτηση έχει ολοκληρωθεί, θα πάμε για να εκτελέσετε αυτή τη λειτουργία εδώ,

1050
01:04:32,370 --> 01:04:36,520
και αυτή η λειτουργία πρόκειται να δημιουργηθεί μια μεγάλη σειρά από στοιχεία.

1051
01:04:36,520 --> 01:04:39,520
Αλλά η διαφορά εδώ είναι ότι η αξία αυτών των καταλόγων δεν είναι πλέον μόνο το σύμβολο,

1052
01:04:39,520 --> 01:04:45,370
είναι τώρα το όνομα.

1053
01:04:45,370 --> 01:04:47,070
Έτσι, έχουμε ένα μικρό πρόβλημα.

1054
01:04:47,070 --> 01:04:51,590
Όταν χρησιμοποιούμε αναζήτηση μας, θα πρέπει με κάποιο τρόπο να περάσει αυτό το σύμβολο.

1055
01:04:51,590 --> 01:04:54,950
Δεν μπορεί να περάσει κάτι σαν αναζήτησης της Microsoft Corporation.

1056
01:04:54,950 --> 01:04:57,900
Πρέπει να περάσει το MSFT.

1057
01:04:57,900 --> 01:05:01,640
Όταν γράφουμε HTML, έχουμε πολλά ωραία ενσωματωμένα χαρακτηριστικά.

1058
01:05:01,640 --> 01:05:05,440
Μια Α θα μπορούσε να σχετίζεται με αυτό ένα href ή μια κατηγορία.

1059
01:05:05,440 --> 01:05:08,230
Αλλά αυτό που πραγματικά χρειαζόμαστε τώρα είναι για κάθε ένα από αυτούς τους συνδέσμους

1060
01:05:08,230 --> 01:05:11,120
να έχουν ένα σύμβολο αποθέματος που συνδέονται με αυτό.

1061
01:05:11,120 --> 01:05:14,240
Δεν υπάρχει ενσωματωμένο σε HTML χαρακτηριστικό για σύμβολο μετοχής,

1062
01:05:14,240 --> 01:05:21,010
αλλά ευτυχώς, HTML5, μας επιτρέπει να δημιουργήσετε τα δικά μας χαρακτηριστικά να είναι ό, τι θέλουμε.

1063
01:05:21,010 --> 01:05:24,620
Λέγοντας δεδομένα-σύμβολο, έχω εισήγαγε ένα νέο χαρακτηριστικό

1064
01:05:24,620 --> 01:05:29,350
εγώ το όνομα του οποίου μόλις που αποτελείται, και αυτό είναι εντάξει, γιατί το προλόγισε με αυτά τα δεδομένα.

1065
01:05:29,350 --> 01:05:34,270
Εμείς πάμε για να αποθηκεύσετε στο εσωτερικό του υπάρχει το σύμβολο από το απόθεμα τώρα.

1066
01:05:34,270 --> 01:05:39,590
Αυτό σημαίνει ότι ακόμα κι αν είμαστε εμφανίζει την αξία του ονόματος της εταιρείας

1067
01:05:39,590 --> 01:05:43,380
στο εσωτερικό της αυτόματης συμπλήρωσης μας, είμαστε ακόμα θυμόμαστε το σύμβολο

1068
01:05:43,380 --> 01:05:47,110
που συνεργάζεται με κάθε επιχείρηση.

1069
01:05:47,110 --> 01:05:50,350
Ο τρόπος που το κάνουμε αυτό είναι μέσα από αυτό το ίδιο το στοιχείο.

1070
01:05:50,350 --> 01:05:52,930
Έτσι, αυτό σημαίνει ότι πρέπει να κάνουμε ένα ακόμη αλλαγή.

1071
01:05:52,930 --> 01:05:57,090
Όταν κάνετε κλικ τώρα, πρέπει να λάβουμε πραγματικά πλεονέκτημα του χαρακτηριστικού συμβόλου

1072
01:05:57,090 --> 01:06:00,220
όχι μόνο την αξία της.

1073
01:06:00,220 --> 01:06:05,010
Αν back up, δίνουμε ένα πρόγραμμα χειρισμού συμβάντων σε προτάσεις.

1074
01:06:05,010 --> 01:06:09,280
Κάθε φορά που μία από αυτές τις προτάσεις είναι τώρα κλικ, θέλω να κάνω κάτι.

1075
01:06:09,280 --> 01:06:13,160
Αυτό που θέλω να κάνετε είναι να αλλάξετε την τιμή της εν λόγω πλαίσιο εισαγωγής.

1076
01:06:13,160 --> 01:06:16,100
Τώρα θέλω να ορίσετε την ίδια λειτουργία val.

1077
01:06:16,100 --> 01:06:21,060
>> Έτσι, χωρίς επιχειρήματα αυτή η λειτουργία val επιστρέφει σε εσάς ό, τι είναι ήδη στο πλαίσιο κειμένου,

1078
01:06:21,060 --> 01:06:27,070
αλλά αν του δώσετε μια συμβολοσειρά, πρόκειται να λάβει αυτό το αλφαριθμητικό και το βάζουμε στο πλαίσιο κειμένου.

1079
01:06:27,070 --> 01:06:28,980
Είμαι επιλέγοντας το πλαίσιο κειμένου της με τον ίδιο τρόπο.

1080
01:06:28,980 --> 01:06:31,230
Το όνομά του είναι μέσα στο σύμβολο της μορφή-απόσπασμα.

1081
01:06:31,230 --> 01:06:37,540
Τώρα είμαι αποστολή την αξία του χαρακτηριστικού-σύμβολο.

1082
01:06:37,540 --> 01:06:41,560
Αυτό το πράγμα εδώ είναι νέα, αυτό $ (αυτό).

1083
01:06:41,560 --> 01:06:46,850
Αυτό αναφέρεται είναι το στοιχείο που κάνει κλικ.

1084
01:06:46,850 --> 01:06:50,880
Μπορούμε να δούμε ότι εδώ δεν είμαστε επισυνάπτοντας ένα συμβάν κλικ

1085
01:06:50,880 --> 01:06:54,690
σε κάθε στοιχείο με μία κατηγορία υπόδειξη μεμονωμένα.

1086
01:06:54,690 --> 01:06:57,140
Αντίθετα, είμαστε πλησιάζει αυτό το λίγο διαφορετικά.

1087
01:06:57,140 --> 01:07:01,700
Αντί να λέμε κάθε φορά που κάτι μέσα από αυτό το div προτάσεις,

1088
01:07:01,700 --> 01:07:04,080
το οποίο είναι ακριβώς θυμηθείτε το δοχείο για την εν λόγω κατάλογο,

1089
01:07:04,080 --> 01:07:10,150
αν κάτι μέσα από αυτό το div πατηθεί και έχει μια τάξη πρόταση,

1090
01:07:10,150 --> 01:07:13,000
Θέλω αυτό το γεγονός στη φωτιά.

1091
01:07:13,000 --> 01:07:17,490
Βασικά τι σημαίνει αυτό που μπορούμε να κάνουμε είναι να μπορούμε να επαναχρησιμοποιούν το ίδιο χειρισμού συμβάντων

1092
01:07:17,490 --> 01:07:20,000
για όλα τα πράγματα στη λίστα.

1093
01:07:20,000 --> 01:07:22,080
Γι 'αυτό και δεν χρειάζεται να έχουν ένα πρόγραμμα χειρισμού συμβάντων για το πρώτο στοιχείο

1094
01:07:22,080 --> 01:07:24,550
και ένα διαφορετικό χειρισμού συμβάντων για το δεύτερο στοιχείο.

1095
01:07:24,550 --> 01:07:29,880
Μπορούμε να πούμε όχι, «θέλω το ίδιο χειρισμού συμβάντων για να ισχύουν για πάντα στη λίστα μου."

1096
01:07:29,880 --> 01:07:34,420
Αλλά εμείς πρέπει με κάποιο τρόπο να γνωρίζουν ποιο είναι το στοιχείο που έγινε κλικ.

1097
01:07:34,420 --> 01:07:38,450
Αυτό το "αυτό" λέξη-κλειδί αντιπροσωπεύει ακριβώς αυτό.

1098
01:07:38,450 --> 01:07:42,360
Αυτό είναι το αντικείμενο που μόλις πατηθεί από τον χρήστη.

1099
01:07:42,360 --> 01:07:47,680
Αν χτύπησα μόλις στο 3ο σύνδεση, αυτό αντιπροσωπεύει το στοιχείο του τρίτου συνδέσμου,

1100
01:07:47,680 --> 01:07:51,670
πράγμα που σημαίνει ότι μπορώ να πάρω το χαρακτηριστικό του, δεδομένων-σύμβολο,

1101
01:07:51,670 --> 01:07:57,760
που ξέρουμε πρέπει να περιέχει το σύμβολο που είναι συνδεδεμένες με την εταιρεία που μόλις κλικ.

1102
01:07:57,760 --> 01:08:04,550
Αν άλμα πίσω στη σελίδα μας χρηματοδότηση,

1103
01:08:04,550 --> 01:08:08,580
μπορούμε τώρα να δούμε ότι τη στιγμή που θα αρχίσετε να πληκτρολογείτε κάτι σαν MSFT,

1104
01:08:08,580 --> 01:08:11,220
είμαστε πλέον να πάρει μόνο τα σύμβολα μετοχών,

1105
01:08:11,220 --> 01:08:13,720
παίρνουμε τώρα τις πραγματικές εταιρείες.

1106
01:08:13,720 --> 01:08:20,410
Αλλά όταν κάνω κλικ σε μία από αυτές τις εταιρείες,

1107
01:08:20,410 --> 01:08:25,180
μπορούμε να δούμε ότι είμαστε πραγματικά οίκηση δεν το πλαίσιο κειμένου με το όνομα της εταιρείας

1108
01:08:25,180 --> 01:08:29,850
αλλά με ό, τι είχε αποθηκευθεί στο εσωτερικό αυτών των χαρακτηριστικών στοιχείων.

1109
01:08:29,850 --> 01:08:32,880
Και έτσι αν πραγματικά επιθεωρήσει ένα από αυτά τα στοιχεία από το δεξί κλικ

1110
01:08:32,880 --> 01:08:36,200
και κάνοντας κλικ στην επιλογή Έλεγχος Element, μπορούμε πραγματικά να δούμε τι μοιάζει αυτό.

1111
01:08:36,200 --> 01:08:40,290
>> Θυμηθείτε ότι αυτό είναι κάτι που έχουμε δημιουργήσει στο εσωτερικό του ότι για βρόχο

1112
01:08:40,290 --> 01:08:42,649
όταν ήμασταν δημιουργία ότι η σειρά της HTML.

1113
01:08:42,649 --> 01:08:47,870
Μπορούμε να δούμε εδώ ότι αυτά τα δεδομένα-σύμβολο έχει την αξία του MSFT, η οποία είναι μεγάλη.

1114
01:08:47,870 --> 01:08:49,189
Αυτό είναι ό, τι περιμέναμε.

1115
01:08:49,189 --> 01:08:53,170
Αυτό είναι το σύμβολο και αυτό είναι το πώς πήραμε την αξία που απαιτούνται για τη χρήση

1116
01:08:53,170 --> 01:08:56,140
μέσα από αυτό το πλαίσιο κειμένου.

1117
01:08:56,140 --> 01:08:58,850
Αυτό είναι αρκετό για τη μορφή απόσπασμα επειδή αυτό είναι το είδος της βαρετό.

1118
01:08:58,850 --> 01:09:02,990
Ας κάνω μόνο μερικές γρήγορες βελτιώσεις στη σελίδα του χαρτοφυλακίου μας.

1119
01:09:02,990 --> 01:09:08,109
Αν έχετε χρησιμοποιήσει CS50 Οικονομικών για λίγο και να αρχίσουν να αγοράζουν και να πωλούν πολλά από τα αποθέματα,

1120
01:09:08,109 --> 01:09:11,300
τελικά ο πίνακας αυτός πρόκειται να πάρει αρκετά μεγάλο,

1121
01:09:11,300 --> 01:09:13,850
και θα πάμε να θέλουν μια ταινία μετοχών, φυσικά.

1122
01:09:13,850 --> 01:09:20,350
Όταν το τραπέζι είναι πραγματικά, πραγματικά μεγάλη, θα μπορούσε να είναι χρήσιμο για το χρήστη να προσπαθήσει να ψάξει πάνω.

1123
01:09:20,350 --> 01:09:23,290
Μέσα από το πλαίσιο αναζήτησης αν αρχίσετε να πληκτρολογείτε κάτι σαν Disney

1124
01:09:23,290 --> 01:09:26,359
και ψάχνει για Mickey Mouse απόθεμα μου, μπορούμε να δούμε ότι ο πίνακας είναι τώρα φιλτράρισμα

1125
01:09:26,359 --> 01:09:28,189
με βάση αυτό που μόλις πληκτρολογήσατε μέσα

1126
01:09:28,189 --> 01:09:31,640
Αυτή η λειτουργία μοιάζει εξαιρετικά περίπλοκη, αλλά είναι πραγματικά πολύ εύκολο

1127
01:09:31,640 --> 01:09:33,859
με jQuery και JavaScript.

1128
01:09:33,859 --> 01:09:39,189
Αυτό το αρχείο περιλαμβάνει portfolio.php ένα αρχείο JavaScript που ονομάζεται portfolio.js.

1129
01:09:39,189 --> 01:09:41,130
Ας ρίξουμε μια ματιά σε αυτό.

1130
01:09:41,130 --> 01:09:44,890
Έτσι, html, js, χαρτοφυλάκιο.

1131
01:09:44,890 --> 01:09:49,210
Εδώ είναι όπου κάνουμε ότι ψάχνοντας στο τραπέζι.

1132
01:09:49,210 --> 01:09:52,750
Το πρώτο πράγμα που πρέπει να κάνετε είναι να συνδέσετε ένα πρόγραμμα χειρισμού συμβάντων σε αυτό το πλαίσιο κειμένου

1133
01:09:52,750 --> 01:09:55,760
γιατί ξέρουμε ότι θέλουμε λειτουργία φιλτραρίσματος μας στη φωτιά

1134
01:09:55,760 --> 01:09:59,800
κάθε φορά που ο χρήστης πατήσει κάτι, γιατί δεν έχουμε χρόνο για τα κουμπιά αναζήτησης.

1135
01:09:59,800 --> 01:10:03,000
Το πρώτο πράγμα που πρέπει να κάνουμε είναι να καταλάβω τι ο χρήστης ψάχνει για,

1136
01:10:03,000 --> 01:10:04,780
ακριβώς όπως κάναμε πριν.

1137
01:10:04,780 --> 01:10:11,320
Αυτό κλειδί αναφέρεται στην τρέχουσα στοιχείου ο χρήστης αλληλεπιδρά με.

1138
01:10:11,320 --> 01:10:14,070
>> Επειδή ο χρήστης αλληλεπιδρά με το πλαίσιο αναζήτησης,

1139
01:10:14,070 --> 01:10:17,020
$ Αυτό αποτελεί το πλαίσιο αναζήτησης,

1140
01:10:17,020 --> 01:10:21,820
this.val έτσι μας δίνει ό, τι είναι μέσα από το πλαίσιο αναζήτησης, ο χρήστης αυτή τη στιγμή πληκτρολογώντας.

1141
01:10:22,810 --> 01:10:27,320
Έτσι, τώρα αυτό που θέλουμε να κάνουμε είναι να θέλουμε να επαναλάβει σε όλες τις γραμμές

1142
01:10:27,320 --> 01:10:29,240
εσωτερικό του πίνακα μας.

1143
01:10:29,240 --> 01:10:35,630
Για να επιλέξετε όλες τις γραμμές στο τραπέζι μας, ότι έδωσα ένα αναγνωριστικό πίνακα του χαρτοφυλακίου πίνακα,

1144
01:10:35,630 --> 01:10:39,060
και κάθε γραμμή αντιπροσωπεύεται από ένα στοιχείο TR,

1145
01:10:39,060 --> 01:10:42,080
έτσι αυτό επιλογέα πρόκειται να επιστρέψει σε μένα μια μεγάλη σειρά

1146
01:10:42,080 --> 01:10:44,370
του συνόλου των γραμμών στο τραπέζι μου.

1147
01:10:44,370 --> 01:10:47,010
Τώρα θέλω να επαναλάβει ότι πάνω πίνακα.

1148
01:10:47,010 --> 01:10:52,390
Θα μπορούσα να σας για ένα βρόχο, αλλά παρέχει πραγματικά jQuery μας το ωραίο λειτουργία που ονομάζεται "το καθένα".

1149
01:10:52,390 --> 01:10:55,220
Τι κάνει το καθένα είναι το καθένα παίρνει ένα όρισμα,

1150
01:10:55,220 --> 01:10:57,090
και ότι το επιχείρημα αυτό είναι μια λειτουργία.

1151
01:10:57,090 --> 01:11:02,760
Τι πρόκειται να κάνουμε είναι να πρόκειται να εφαρμόσει αυτή τη λειτουργία σε κάθε στοιχείο μέσα από αυτή τη λίστα.

1152
01:11:02,760 --> 01:11:05,550
Η λειτουργία αυτή παίρνει ένα επιχείρημα που είναι e,

1153
01:11:05,550 --> 01:11:10,090
και όταν αυτή η λειτουργία εκτελείται, αυτό το e πρόκειται να αντικατασταθεί με την πρώτη σειρά,

1154
01:11:10,090 --> 01:11:12,070
τότε η δεύτερη σειρά, και στη συνέχεια, η τρίτη σειρά.

1155
01:11:12,070 --> 01:11:15,150
Με αυτόν τον τρόπο, αυτό είναι το ίδιο πράγμα με ένα τρέξιμο για βρόχο

1156
01:11:15,150 --> 01:11:21,360
και στη συνέχεια υπολογίζει το τρέχον στοιχείο με βάση το εσωτερικό δείκτη σας για βρόχο.

1157
01:11:21,360 --> 01:11:24,750
Σε κάθε επανάληψη, για καθένα από αυτά τα στοιχεία στον πίνακα,

1158
01:11:24,750 --> 01:11:30,560
Θέλω να ελέγξετε αν το κείμενο του στοιχείου - το κείμενο του κυττάρου στο εσωτερικό της γραμμής -

1159
01:11:30,560 --> 01:11:33,130
ταιριάζει με ό, τι ψάχνω για.

1160
01:11:33,130 --> 01:11:36,390
Αυτό το μεγάλο μακρά σειρά των εντολών είναι το πώς θα μπορούσα να το κάνουμε αυτό.

1161
01:11:36,390 --> 01:11:40,900
Πρώτον, και πάλι, αυτό αναφέρεται πλέον σε - γιατί είναι μέσα από μια νέα λειτουργία -

1162
01:11:40,900 --> 01:11:45,020
αυτή είναι τώρα η τρέχουσα γραμμή στον πίνακα.

1163
01:11:45,020 --> 01:11:47,340
Θέλω να πάρω την τρέχουσα γραμμή του πίνακα,

1164
01:11:47,340 --> 01:11:49,950
και θέλω να πάρω όλα του τα παιδιά του.

1165
01:11:49,950 --> 01:11:51,940
Θυμηθείτε, η DOM είναι ένα ιεραρχικό δέντρο,

1166
01:11:51,940 --> 01:11:54,200
πράγμα που σημαίνει ότι τα στοιχεία έχουν ένα αριθμό των παιδιών.

1167
01:11:54,200 --> 01:12:00,180
>> Αυτό. Λειτουργία τα παιδιά πρόκειται να επιστρέψει σε μένα πίσω μια σειρά από όλα τα στοιχεία

1168
01:12:00,180 --> 01:12:03,240
που είναι τα παιδιά της, σε αυτήν την περίπτωση, μια σειρά στον πίνακα.

1169
01:12:03,240 --> 01:12:07,150
Αυτό είναι απλά τα κύτταρα στο εσωτερικό της γραμμής.

1170
01:12:07,150 --> 01:12:09,230
Απλά θέλω να αναζητήσετε πάνω από το πρώτο κύτταρο.

1171
01:12:09,230 --> 01:12:13,090
Αυτό. Πρώτη λειτουργία λέει να μου δώσει το πρώτο στοιχείο στην εν λόγω σειρά.

1172
01:12:13,090 --> 01:12:17,070
Στη συνέχεια, η λειτουργία κείμενο λέει φέρε μου ακριβώς τι είναι μέσα από αυτό το κελί

1173
01:12:17,070 --> 01:12:19,530
από τότε που θέλετε να αναζητήσετε πάνω από αυτό το κείμενο.

1174
01:12:19,530 --> 01:12:21,040
Τέλος, ας το μετατρέψει σε πεζά,

1175
01:12:21,040 --> 01:12:23,940
έτσι μπορούμε να κάνουμε το κείμενο με πεζά ή κεφαλαία ερωτήματα.

1176
01:12:23,940 --> 01:12:29,990
Τέλος, θέλουμε να δούμε αν αυτή η σειρά μέσα από ένα πίνακα περιέχει τη συμβολοσειρά που αναζητάτε.

1177
01:12:29,990 --> 01:12:32,980
Η λειτουργία JavaScript σε indexOf κάνει ακριβώς αυτό.

1178
01:12:32,980 --> 01:12:37,060
Δεν μας λέει αν ή όχι αυτή η συμβολοσειρά περιέχει ένα άλλο string.

1179
01:12:37,060 --> 01:12:40,150
Αν είναι αλήθεια ότι το κελί περιέχει ό, τι ψάχνω για,

1180
01:12:40,150 --> 01:12:42,140
τότε θα θέλετε να βεβαιωθείτε ότι είναι φαίνεται.

1181
01:12:42,140 --> 01:12:45,330
Η μέθοδος show θα πει, "Εμφάνιση στοιχείο."

1182
01:12:45,330 --> 01:12:50,350
Εάν αυτό δεν συμβαίνει, τότε αυτό σημαίνει ότι ό, τι ψάχνω για να μην περιέχεται

1183
01:12:50,350 --> 01:12:53,550
μέσα σε αυτή τη γραμμή, και γι 'αυτό θέλω να κρύψει είναι από τον χρήστη.

1184
01:12:53,550 --> 01:12:59,240
Αυτό επιτυγχάνει αυτό το όμορφο αποτέλεσμα φιλτραρίσματος, όπου πλέον βλέπουμε ολόκληρο τον πίνακα.

1185
01:12:59,240 --> 01:13:01,480
Αν σας ενδιαφέρει το πώς να κάνει αυτό το ticker, καθώς,

1186
01:13:01,480 --> 01:13:04,180
θα δημοσιεύσετε την πηγή σε απευθείας σύνδεση. Αλλά είναι πραγματικά απλή.

1187
01:13:04,180 --> 01:13:09,860
JQuery έχει φοβερό μεθόδους για αυτά τα κινούμενα σχέδια και το χειρισμό ιδιότητες CSS.

1188
01:13:09,860 --> 01:13:11,020
Έτσι, αυτό είναι για μένα.

1189
01:13:11,020 --> 01:13:15,560
>> Τι βρίσκεται λοιπόν μπροστά; Όπως θα δείτε σε λίγες μέρες, η τελική πρόταση έργων οφείλεται.

1190
01:13:15,560 --> 01:13:17,730
Η τελική πρόταση έργα θα σας κάνω μερικές ερωτήσεις,

1191
01:13:17,730 --> 01:13:19,420
αλλά μεταξύ τους θα είναι τρεις ορόσημα -

1192
01:13:19,420 --> 01:13:22,840
μία "καλή" ορόσημο, ένα ορόσημο μια καλύτερη, μια και ένα καλύτερο.

1193
01:13:22,840 --> 01:13:25,870
Η ιδέα είναι πραγματικά να σας βοηθήσει να ρυθμίσετε τις προσδοκίες παιδιά σας

1194
01:13:25,870 --> 01:13:29,160
έτσι ώστε ελάχιστα θα είστε ευχαριστημένοι με την απόδοση του τελικού σχεδίου σας

1195
01:13:29,160 --> 01:13:32,060
και θα είναι "καλό" βαθμό που σας απασχολεί.

1196
01:13:32,060 --> 01:13:34,540
Στη συνέχεια, όμως προς το συμφέρον του να πάρει να φτάσετε μόνο λίγο σε κάτι καλύτερο

1197
01:13:34,540 --> 01:13:37,680
ή κάτι καλύτερο, θα επίσης να ταξινομήσετε του να σας ωθήσει προς την κατεύθυνση ότι, όπως καλά.

1198
01:13:37,680 --> 01:13:40,660
Το CS50 Hack-a-thon, εν τω μεταξύ, είναι σε λίγες εβδομάδες.

1199
01:13:40,660 --> 01:13:44,340
Συνήθως, κάνουμε αυτό με βάση την κλήρωση βάση λόγω του ενδιαφέροντος,

1200
01:13:44,340 --> 01:13:47,680
αλλά οι πιθανότητες είναι ότι θα πάρει μερικές εκατοντάδες από εμάς σε λεωφορεία από την πλατεία του Χάρβαρντ

1201
01:13:47,680 --> 01:13:51,540
κάτω για να Kendall Square, όπου η Microsoft έχει μια όμορφη εγκατάσταση εύστοχα αποκαλείται "NERD" -

1202
01:13:51,540 --> 01:13:53,830
Νέα Αγγλία το Κέντρο Έρευνας και Ανάπτυξης.

1203
01:13:53,830 --> 01:13:56,380
Θα φτάσετε εκεί γύρω 20:00 Θα έχουμε κάποια τρόφιμα.

1204
01:13:56,380 --> 01:13:58,160
Περίπου μία το πρωί θα έχουμε λίγο περισσότερο φαγητό.

1205
01:13:58,160 --> 01:14:02,150
Γύρω στις 5 π.μ. Αν είστε ακόμα ξύπνιοι θα το κεφάλι πάνω σε IHOP ή να πάρετε πίσω στην πανεπιστημιούπολη.

1206
01:14:02,150 --> 01:14:04,380
Ο στόχος δεν είναι να βουτήξει στην τελική έργα

1207
01:14:04,380 --> 01:14:06,190
μαζί με τους συμμαθητές του και το προσωπικό.

1208
01:14:06,190 --> 01:14:08,280
Στη συνέχεια, λίγες μέρες αργότερα είναι η CS50 Fair,

1209
01:14:08,280 --> 01:14:10,990
το οποίο είναι πραγματικά γραφτό να γίνει μια ευκαιρία για σας παιδιά να προβάλουν τη δουλειά σας

1210
01:14:10,990 --> 01:14:12,700
και τα επιτεύγματα για το εξάμηνο

1211
01:14:12,700 --> 01:14:15,610
ενώ τρίβει τους ώμους με το άλλο και να πάρει μια αίσθηση για το τι έκανε ο καθένας.

1212
01:14:15,610 --> 01:14:17,850
Με αυτόν εν λόγω, θα ήθελα να ευχαριστήσω τον Tommy και στον Ιωσήφ,

1213
01:14:17,850 --> 01:14:19,960
και εμείς θα σας δούμε τη Δευτέρα.

1214
01:14:19,960 --> 01:14:24,070
 [Χειροκροτήματα]