1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Σεμινάριο] [Πλαίσια JavaScript: γιατί και πώς;]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Πανεπιστήμιο του Χάρβαρντ]

3
00:00:04,000 --> 00:00:06,960
[Αυτό είναι CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Γεια σας. Καλώς ήρθατε στο σεμινάριο JavaScript Πλαίσια.

5
00:00:10,630 --> 00:00:14,910
Το όνομά μου είναι ο Kevin, και σήμερα είμαι πρόκειται να μιλάμε για JavaScript πλαισίων,

6
00:00:14,910 --> 00:00:20,400
και ο στόχος του σεμιναρίου αυτού είναι να μην φτάσετε στο, ας πούμε, κυριαρχήσει ένα συγκεκριμένο πλαίσιο per se

7
00:00:20,400 --> 00:00:23,810
αλλά για να σας δώσει μια γενική εισαγωγή σε ένα ζευγάρι των πλαισίων

8
00:00:23,810 --> 00:00:27,150
και να δείξει γιατί θα μπορούσε ποτέ να θέλετε να χρησιμοποιήσετε ένα πλαίσιο.

9
00:00:27,150 --> 00:00:31,060
>> Πριν το κάνω αυτό, θα παρέχει ένα μικρό ιστορικό σε JavaScript,

10
00:00:31,060 --> 00:00:33,750
και στη συνέχεια θα το πάρετε από εκεί.

11
00:00:33,750 --> 00:00:36,270
Εμείς πάμε για να ξεκινήσει με την εφαρμογή ενός-να κάνουμε λίστα.

12
00:00:36,270 --> 00:00:39,330
Εδώ είναι λίστα εργασιών μας για σήμερα.

13
00:00:39,330 --> 00:00:41,990
Είναι κάπως αστείο. Πρέπει να εφαρμόσει ένα-να κάνουμε λίστα στο JavaScript.

14
00:00:41,990 --> 00:00:45,110
Αυτό είναι ό, τι πρόκειται να μοιάσει, έτσι ώστε να είναι ο πρώτος μας στόχος.

15
00:00:45,110 --> 00:00:47,160
Εμείς δεν πρόκειται να χρησιμοποιήσετε ένα πλαίσιο για να το κάνουμε αυτό.

16
00:00:47,160 --> 00:00:51,930
Εμείς πάμε για να κώδικα JavaScript και να πάρει την-να κάνουμε λίστα για να εργαστούν.

17
00:00:51,930 --> 00:00:54,370
Στη συνέχεια, θα πάμε να βελτιώσει το σχεδιασμό χωρίς τη χρήση ενός πλαισίου.

18
00:00:54,370 --> 00:00:57,190
Εμείς πάμε για να συζητήσουμε διάφορα πράγματα που μπορούμε να κάνουμε μόνο με JavaScript και μόνο

19
00:00:57,190 --> 00:01:00,650
να κάνουν την δική μας-να κάνουμε λίστα λίγο πιο καλά σχεδιασμένη.

20
00:01:00,650 --> 00:01:02,490
Στη συνέχεια, θα πάμε να ρίξει σε κάποια jQuery,

21
00:01:02,490 --> 00:01:05,030
και στη συνέχεια θα πάμε να δούμε τον ίδιο-να κάνουμε λίστα,

22
00:01:05,030 --> 00:01:07,170
μόλις εφαρμοστεί σε διαφορετικά πλαίσια, και θα συζητήσουμε

23
00:01:07,170 --> 00:01:09,280
 τα υπέρ και τα κατά μήκος του τρόπου.

24
00:01:09,280 --> 00:01:12,040
>> Ας αρχίσει η εφαρμογή ότι για την-να κάνουμε λίστα.

25
00:01:12,040 --> 00:01:14,270
Ας πούμε ότι μας δίνεται αυτό το HTML.

26
00:01:14,270 --> 00:01:16,620
Πάω να κάνουν αυτό το λίγο μικρότερο.

27
00:01:16,620 --> 00:01:19,300
Όπως μπορείτε να δείτε, έχω μια μικρή επικεφαλίδα που λέει Todo

28
00:01:19,300 --> 00:01:21,740
και ένα μικρό κουτί, όπου μπορώ να εισάγετε μια περιγραφή ενός todo

29
00:01:21,740 --> 00:01:26,990
και στη συνέχεια ένα νέο κουμπί στοιχείο, οπότε ας προσπαθήσουμε να εισέλθει σε μια νέα todo σε αυτή τη λίστα.

30
00:01:26,990 --> 00:01:31,000
Δώστε ένα JavaScript σεμινάριο πλαίσια,

31
00:01:31,000 --> 00:01:33,090
και είμαι να χτυπήσει νέο στοιχείο.

32
00:01:33,090 --> 00:01:35,730
Παίρνω αυτή την ειδοποίηση JavaScript που λέει εφαρμόσει μου.

33
00:01:35,730 --> 00:01:37,560
Έχουμε να την εφαρμόσουν.

34
00:01:37,560 --> 00:01:41,490
Ας ελέγξτε τον κώδικα για αυτό, τόσο το HTML και το JavaScript.

35
00:01:41,490 --> 00:01:43,260
Εδώ είναι HTML μας.

36
00:01:43,260 --> 00:01:45,500
Όπως μπορείτε να δείτε εδώ, εδώ είναι λίγο header μας Todos.

37
00:01:45,500 --> 00:01:47,620
Αυτό ήταν τολμηρό πράγμα στην κορυφή,

38
00:01:47,620 --> 00:01:50,690
και στη συνέχεια να έχουμε το πλαίσιο εισόδου με το σύμβολο κράτησης θέσης,

39
00:01:50,690 --> 00:01:59,460
και στη συνέχεια να υπάρχει ένα ορισμένο χαρακτηριστικό αυτού του κουμπιού που καλεί αυτή addTodo λειτουργία.

40
00:01:59,460 --> 00:02:05,460
Θέλει κανείς να μαντέψει τι σε κλικ σημαίνει;

41
00:02:05,460 --> 00:02:07,390
[Φοιτητής ακούγεται απάντηση]

42
00:02:07,390 --> 00:02:09,289
Καλό, το με κλικ είναι το είδος του σαν ένα γεγονός,

43
00:02:09,289 --> 00:02:12,120
όπως κλικ με το ποντίκι είναι απλώς ένα γεγονός, και τι κάνουμε

44
00:02:12,120 --> 00:02:16,890
Είναι είμαστε δένοντας την περίπτωση κάνετε κλικ σε αυτό το κουμπί για να εκτελέσετε αυτή τη λειτουργία.

45
00:02:16,890 --> 00:02:21,700
AddTodo είναι αυτό το πρόγραμμα χειρισμού συμβάντων για να κάνουν κλικ σε αυτό το κουμπί.

46
00:02:21,700 --> 00:02:25,010
>> Όπως μπορείτε να δείτε, όταν κάνω κλικ στο νέο κουμπί στοιχείο

47
00:02:25,010 --> 00:02:29,940
η σε εκδήλωση κλικ παίρνει φωτιά, και αυτή η λειτουργία παίρνει ονομάζεται.

48
00:02:29,940 --> 00:02:33,170
Ας ρίξουμε μια ματιά σε λειτουργία.

49
00:02:33,170 --> 00:02:36,260
Όπως μπορείτε να δείτε, εδώ είναι του κώδικα JavaScript μου μέχρι τώρα.

50
00:02:36,260 --> 00:02:41,280
Αυτό που έχω στην κορυφή είναι μια παγκόσμια δομή δεδομένων για να κάνουμε λίστα μου.

51
00:02:41,280 --> 00:02:44,060
Μοιάζει με μια σειρά. Είναι απλά μια κενή σειρά.

52
00:02:44,060 --> 00:02:47,100
Και τότε έχω την addTodo λειτουργία που είδαμε νωρίτερα,

53
00:02:47,100 --> 00:02:50,740
και το μόνο γραμμή κώδικα εκεί είναι η ειδοποίηση.

54
00:02:50,740 --> 00:02:55,730
Είναι προειδοποιεί την εφαρμογή μου, και τότε έχω 2 εργασίες στο χέρι.

55
00:02:55,730 --> 00:02:58,790
Δεν έχω να προσθέσω το todo στη γενική αυτή δομή δεδομένων,

56
00:02:58,790 --> 00:03:01,860
και στη συνέχεια Θέλω να επιστήσω την-να κάνουμε λίστα.

57
00:03:01,860 --> 00:03:06,360
Τίποτα δεν υπερβολικά φανταχτερό ακριβώς ακόμα, αλλά JavaScript μπορεί να είναι εξοικειωμένοι με,

58
00:03:06,360 --> 00:03:12,370
έτσι είμαι πρόκειται να πάω αργά και να επανεξετάσει τις βασικές αρχές της JavaScript με αυτόν τον τρόπο.

59
00:03:12,370 --> 00:03:15,490
>> Ας δώσει σε αυτό έναν πυροβολισμό.

60
00:03:15,490 --> 00:03:21,130
Ας πούμε ότι ο χρήστης εισάγει κάτι σε αυτό το πλαίσιο.

61
00:03:21,130 --> 00:03:23,360
Έχω πληκτρολογήσει κάτι εδώ, το κείμενο.

62
00:03:23,360 --> 00:03:27,620
Πώς μπορώ να ταξινομήσω πρόσβασης που κειμένου μέσω JavaScript;

63
00:03:27,620 --> 00:03:32,500
Να θυμάστε ότι η JavaScript, ένα από τα θεμελιώδη χαρακτηριστικά του είναι ότι μας δίνει

64
00:03:32,500 --> 00:03:34,670
Αυτό προγραμματική πρόσβαση στο DOM.

65
00:03:34,670 --> 00:03:40,670
Μας επιτρέπει πρόσβαση στα στοιχεία και τις περιουσίες τους αυτής της πραγματικής HTML.

66
00:03:40,670 --> 00:03:43,430
Ο τρόπος που το κάνουμε αυτό με γυμνά κόκαλα JavaScript

67
00:03:43,430 --> 00:03:51,360
Είναι μπορούμε να χρησιμοποιήσουμε στην πραγματικότητα μια λειτουργία σε JavaScript που ονομάζεται getElementByID.

68
00:03:51,360 --> 00:03:55,140
Θέλω να αποθηκεύσετε το κείμενο που είναι δακτυλογραφημένες εκεί σε κάποια μεταβλητή,

69
00:03:55,140 --> 00:03:58,350
έτσι Πάω να πω μια νέα μεταβλητή που ονομάζεται new_todo,

70
00:03:58,350 --> 00:04:01,980
και είμαι πρόκειται να πάρει αυτό το στοιχείο.

71
00:04:01,980 --> 00:04:06,330
Αυτή είναι μια λειτουργία,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Και τώρα είμαι πάρει ένα στοιχείο από την ταυτότητα, γι 'αυτό χρειάζεται το αναγνωριστικό αυτού του πλαισίου κειμένου,

73
00:04:11,580 --> 00:04:15,860
έτσι έχω δώσει το new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
Αυτό είναι το πώς είμαι πρόκειται να πάρει ένα στοιχείο.

75
00:04:18,399 --> 00:04:23,880
Αυτό είναι το επιχείρημά μου σε αυτή τη λειτουργία, για να καθορίσετε ποια ταυτότητα για να πάρει.

76
00:04:23,880 --> 00:04:28,110
Και έτσι αυτό είναι ένα στοιχείο HTML, και έχει ιδιότητες.

77
00:04:28,110 --> 00:04:30,650
Έχετε δει αυτά. Είναι χαρακτηριστικά.

78
00:04:30,650 --> 00:04:37,090
Το χαρακτηριστικό του στοιχείου κειμένου που αποθηκεύει την είσοδο του χρήστη ονομάζεται αξία.

79
00:04:37,090 --> 00:04:40,860
Έσωσα την αξία του εν λόγω πλαισίου κειμένου τώρα σε αυτή τη μεταβλητή που ονομάζεται new_todo.

80
00:04:40,860 --> 00:04:45,040
Τώρα έχω πρόσβαση μέσω προγραμματισμού σε αυτή τη μεταβλητή, η οποία είναι είδος δροσερό

81
00:04:45,040 --> 00:04:49,200
γιατί τώρα τι μπορώ να κάνω είναι να το προσθέσετε σε-να κάνουμε λίστα μου.

82
00:04:49,200 --> 00:04:52,870
>> Ο τρόπος που θα το κάνετε αυτό σε JavaScript και μην ανησυχείτε αν δεν είστε εξοικειωμένοι με αυτό,

83
00:04:52,870 --> 00:04:57,010
αλλά ακριβώς συμβαίνει μέσα από αυτό είναι todos.push

84
00:04:57,010 --> 00:05:00,130
γιατί αυτό είναι το όνομα της παγκόσμιας δομής δεδομένων μου εδώ,

85
00:05:00,130 --> 00:05:04,450
και Πάω να πιέσει new_todo.

86
00:05:04,450 --> 00:05:09,120
Αυτό είναι μεγάλη, διότι τώρα έχω προσθέσει στη JavaScript μου

87
00:05:09,120 --> 00:05:11,280
εκπροσώπηση του-να κάνουμε λίστα.

88
00:05:11,280 --> 00:05:15,170
Αλλά τώρα πώς μπορώ να το πάρει πίσω στο HTML;

89
00:05:15,170 --> 00:05:18,560
Πρέπει να βρούμε έναν τρόπο να ταξινομήσετε του σπρώξτε πίσω.

90
00:05:18,560 --> 00:05:21,830
Με άλλα λόγια, το είδος πρέπει να επιστήσει.

91
00:05:21,830 --> 00:05:26,060
Τι θα πάμε να κάνουμε είναι να πάμε να επιστήσει την to-do λίστα.

92
00:05:26,060 --> 00:05:29,270
Θα πρέπει να ενημερώσετε άλλους HTML σε αυτή τη σελίδα,

93
00:05:29,270 --> 00:05:32,040
και όπως μπορείτε να δείτε, έχω αφήσει αυτό το μικρό δοχείο εδώ,

94
00:05:32,040 --> 00:05:36,840
Αυτό το διαχωριστικό της σελίδας του οποίου ID είναι todos,

95
00:05:36,840 --> 00:05:40,870
και είμαι πρόκειται να θέσει την-να κάνουμε λίστα εκεί.

96
00:05:40,870 --> 00:05:47,240
Πρώτα θα πάω να το καθαρίσει έξω γιατί, ας πούμε, υπήρχε ένα παλιό-να κάνουμε λίστα εκεί.

97
00:05:47,240 --> 00:05:49,560
Παίρνω αυτό το στοιχείο από την ταυτότητα και πάλι,

98
00:05:49,560 --> 00:05:54,530
και είμαι πρόσβαση στο εσωτερικό HTML αυτού του στοιχείου,

99
00:05:54,530 --> 00:05:58,010
και θα πάω να καθαρίσει αυτό.

100
00:05:58,010 --> 00:06:05,510
Αν αφήσουμε αυτόν τον κώδικα όπως είναι, θα βλέπαμε ένα κενό τίποτα εκεί,

101
00:06:05,510 --> 00:06:10,410
και τώρα θέλω να ξεκινήσω καθιστώντας νέων-να κάνουμε λίστα μου.

102
00:06:10,410 --> 00:06:12,870
Είμαι βασικά πρόκειται να σκουπίσει έξω-να κάνουμε λίστα μου.

103
00:06:12,870 --> 00:06:18,180
>> Τώρα η εσωτερική HTML εσωτερικό του div todos είναι απολύτως σαφές,

104
00:06:18,180 --> 00:06:20,060
και τώρα πρέπει να αρχίσουμε να προσθέτουμε λίστα μου.

105
00:06:20,060 --> 00:06:23,890
Το πρώτο πράγμα που θέλω να προσθέσω είναι πίσω η unordered tag λίστα,

106
00:06:23,890 --> 00:06:33,890
το οποίο σημαίνει ουσιαστικά ότι αυτή είναι η αρχή μιας μη διατεταγμένη λίστα.

107
00:06:33,890 --> 00:06:39,770
Τώρα, για κάθε στοιχείο σε Todos σειρά μου θέλω να την εκτυπώσετε στο εσωτερικό της HTML.

108
00:06:39,770 --> 00:06:43,710
Θέλω να το προσθέσετε στο στο κάτω μέρος του καταλόγου αυτού.

109
00:06:43,710 --> 00:06:49,040
Ακριβώς όπως και στη C, μπορώ να χρησιμοποιήσω ένα for loop, και είμαι πρόκειται να ξεκινήσει στην αρχή της λίστας μου

110
00:06:49,040 --> 00:06:54,140
στο στοιχείο 0, και είμαι πρόκειται να πάει σε όλη τη διαδρομή προς το μήκος της λίστας.

111
00:06:54,140 --> 00:07:01,100
Μπορούμε πραγματικά να πάρετε το μήκος ενός πίνακα σε JavaScript χρησιμοποιώντας την ιδιότητα μήκους.

112
00:07:01,100 --> 00:07:03,420
Βασικά είμαι πρόκειται να κάνει κάτι παρόμοιο στο εσωτερικό της εδώ

113
00:07:03,420 --> 00:07:05,600
να εκτυπώσετε αυτό το στοιχείο.

114
00:07:05,600 --> 00:07:12,970
Θα μπορούν να έχουν πρόσβαση και πάλι το div todos, η εσωτερική HTML ιδιοκτησία του αυτό,

115
00:07:12,970 --> 00:07:17,560
και πάω να προσθέσω σε αυτό το νέο στοιχείο της λίστας, και ότι πρόκειται να περιβάλλονται από

116
00:07:17,560 --> 00:07:25,390
Αυτή η ετικέτα li, και Πάω να ενώσετε με τον φορέα εκμετάλλευσης +,

117
00:07:25,390 --> 00:07:28,040
και αυτό είναι το i-οστό στοιχείο της todos σειρά μου,

118
00:07:28,040 --> 00:07:32,380
και στη συνέχεια θα πάω να κλείσει την ετικέτα.

119
00:07:32,380 --> 00:07:36,240
Τώρα, για κάθε στοιχείο που θα προσθέσετε μια νέα καταχώριση στη λίστα.

120
00:07:36,240 --> 00:07:48,700
Και τότε το μόνο που πραγματικά χρειάζεται να κάνετε είναι να κλείσουμε την ετικέτα.

121
00:07:48,700 --> 00:07:52,820
Απλά πρέπει να κλείσει off που επιτυγχάνεται με την εντολή tag λίστα.

122
00:07:52,820 --> 00:07:55,490
>> Μήπως μπορείτε να πάρετε μια ιδέα για το πώς λειτουργεί;

123
00:07:55,490 --> 00:07:57,700
Αυτό ανοίγει ολόκληρη τη λίστα.

124
00:07:57,700 --> 00:08:01,080
Αυτό προσθέτει μεμονωμένα στοιχεία από τη λίστα todos στον κατάλογο,

125
00:08:01,080 --> 00:08:05,470
και στη συνέχεια, που κλείνει ολόκληρη τη λίστα, και αυτό είναι addTodo λειτουργία μου.

126
00:08:05,470 --> 00:08:09,590
Εγώ βασικά να ξεκινήσει από το να πάρει το todo από το πλαίσιο κειμένου.

127
00:08:09,590 --> 00:08:18,950
Ήθελα να προσθέσω ότι στην παράταξη todos, και στη συνέχεια εκ νέου καταστήσει την-να κάνουμε λίστα.

128
00:08:18,950 --> 00:08:21,520
Τώρα μπορώ να προσθέσω στοιχεία στην λίστα μου.

129
00:08:21,520 --> 00:08:24,620
Αυτό είναι το είδος της διέγερσης, διότι σε λίγες γραμμές κώδικα

130
00:08:24,620 --> 00:08:28,240
έχουμε κάνει ουσιαστικά ένα-να κάνουμε λίστα, όπου μπορούμε να προσθέσουμε στοιχεία.

131
00:08:28,240 --> 00:08:30,050
Great.

132
00:08:30,050 --> 00:08:34,480
Αυτό είναι το είδος της μια βασική εισαγωγή στις JavaScript.

133
00:08:34,480 --> 00:08:36,179
Μην ανησυχείτε πάρα πολύ για τη σύνταξη για τώρα,

134
00:08:36,179 --> 00:08:38,130
Αλλά σκεφτείτε για αυτό εννοιολογικά.

135
00:08:38,130 --> 00:08:40,539
Είχαμε κάποια HTML.

136
00:08:40,539 --> 00:08:45,310
Είχαμε ένα πλαίσιο κειμένου στη σελίδα που ουσιαστικά επέτρεψε στους χρήστες να εισάγετε ένα-να κάνουμε αντικείμενο για να προσθέσετε.

137
00:08:45,310 --> 00:08:49,210
Και στη συνέχεια θα χρησιμοποιηθούν JavaScript για να φέρω ότι todo από το πλαίσιο κειμένου.

138
00:08:49,210 --> 00:08:52,830
Εμείς αποθηκεύονται ότι μέσα σε μια συστοιχία JavaScript, τα οποία είναι βασικά όπως

139
00:08:52,830 --> 00:08:56,010
προγραμματική εκπροσώπησή μας από ότι για την-να κάνουμε λίστα,

140
00:08:56,010 --> 00:08:59,060
και στη συνέχεια θα το εκτυπώσει.

141
00:08:59,060 --> 00:09:02,690
Αυτό είναι todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Αυτό είναι το είδος της δροσερό, αλλά πώς μπορούμε να πάρουμε αυτό το περισσότερο;

143
00:09:07,620 --> 00:09:11,350
Λοιπόν, όπως μπορείτε να δείτε, αυτό δεν είναι σαν ένα πλήρες-να κάνουμε λίστα.

144
00:09:11,350 --> 00:09:15,100
Για παράδειγμα, δεν μπορώ να επισημάνετε κάποιο από αυτά τα στοιχεία ως ελλιπής,

145
00:09:15,100 --> 00:09:19,920
όπως και αν ήθελα να reprioritize τα στοιχεία ή να διαγράψετε στοιχεία.

146
00:09:19,920 --> 00:09:23,150
Αυτό είναι εντάξει, αλλά μπορούμε να πάρουμε αυτό περαιτέρω.

147
00:09:23,150 --> 00:09:29,280
Είμαι δεν πρόκειται να μιλήσω πάρα πολύ για την προσθήκη επιπλέον χαρακτηριστικά,

148
00:09:29,280 --> 00:09:32,800
αλλά θα μπορούσαμε να πάρουμε ότι περαιτέρω.

149
00:09:32,800 --> 00:09:35,970
Ας μιλήσουμε για την προσθήκη ενός ακόμη χαρακτηριστικό σε αυτό-να κάνουμε λίστα,

150
00:09:35,970 --> 00:09:40,370
η οποία πρόκειται να είναι σε θέση να ελέγξει ένα άτομο-για να κάνουμε το στοιχείο

151
00:09:40,370 --> 00:09:44,780
και έχουν να διαγραφεί, οπότε ουσιαστικά λέγοντας ότι έχω κάνει αυτό.

152
00:09:44,780 --> 00:09:50,240
Ας δούμε λίγο κώδικα που θα μπορούσε να το επιτύχει αυτό.

153
00:09:50,240 --> 00:09:52,740
Ανακοίνωση για ό, τι έχω κάνει στην κορυφή είναι Έχω προσθέσει

154
00:09:52,740 --> 00:09:57,620
μια νέα παγκόσμια σειρά που ονομάζεται πλήρης.

155
00:09:57,620 --> 00:10:02,890
Είμαι χρησιμοποιώντας βασικά αυτό για να αποθηκεύσετε το αν τα στοιχεία σχετικά με την-να κάνουμε λίστα

156
00:10:02,890 --> 00:10:06,560
είναι πλήρεις ή όχι.

157
00:10:06,560 --> 00:10:08,470
Αυτός είναι ένας τρόπος για να γίνει αυτό.

158
00:10:08,470 --> 00:10:13,750
Αν κοιτάζω την εφαρμογή του παρόντος, η οθόνη,

159
00:10:13,750 --> 00:10:21,120
βασικά αν εισάγετε ένα todo και πατάω το κουμπί εναλλαγής

160
00:10:21,120 --> 00:10:25,040
διασχίζει έξω, έτσι ώστε κάθε στοιχείο στη λίστα αυτή έχει είτε ένα πλήρες

161
00:10:25,040 --> 00:10:31,050
ή ελλιπή κατάσταση, και είμαι χρησιμοποιώντας μια άλλη σειρά να εκπροσωπεί αυτό.

162
00:10:31,050 --> 00:10:33,730
>> Βασικά για κάθε todo στην εν λόγω διάταξη todos

163
00:10:33,730 --> 00:10:37,110
υπάρχει ένα στοιχείο στην πλήρη πίνακα που ουσιαστικά δείχνει

164
00:10:37,110 --> 00:10:39,060
αν αυτό είναι πλήρεις ή όχι.

165
00:10:39,060 --> 00:10:41,640
Είχα να κάνει πολύ ελάχιστες αλλαγές σε αυτόν τον κώδικα,

166
00:10:41,640 --> 00:10:44,470
τόσο εδώ είναι addTodo λειτουργία μας.

167
00:10:44,470 --> 00:10:48,530
Παρατηρήστε ότι εδώ είμαι να πιέζει επί της σειράς,

168
00:10:48,530 --> 00:10:51,300
και τότε είμαι πιέζει ένα 0 στην εν λόγω πλήρη σειρά,

169
00:10:51,300 --> 00:10:57,090
ουσιαστικά παράλληλα με την νέα ώθηση todo να πω

170
00:10:57,090 --> 00:11:00,430
Είμαι προσθέτοντας αυτό το στοιχείο, και, σε συνδυασμό με την τιμή αυτή,

171
00:11:00,430 --> 00:11:02,810
πράγμα που σημαίνει ότι είναι ατελής.

172
00:11:02,810 --> 00:11:04,970
Και τότε είμαι επαναχάραξη του-να κάνουμε λίστα.

173
00:11:04,970 --> 00:11:09,220
Τώρα, παρατηρούμε έχω προσθέσει αυτό το drawTodoList λειτουργία.

174
00:11:09,220 --> 00:11:11,760
Αυτό παίρνει πολλή κώδικα που είχαμε πριν,

175
00:11:11,760 --> 00:11:15,320
ουσιαστικά ανοίγει το κουτί και στη συνέχεια αντλεί το νέο-να κάνουμε λίστα.

176
00:11:15,320 --> 00:11:19,620
Αλλά παρατηρήσετε ότι μέσα σ 'αυτό για το βρόχο κάνουμε λίγο περισσότερο τώρα.

177
00:11:19,620 --> 00:11:25,000
Είμαστε ουσιαστικά ελέγχουν εάν το στοιχείο που αντιστοιχεί στον i todo εδώ

178
00:11:25,000 --> 00:11:30,220
είναι πλήρης, και είμαστε συμπεριφέρεται διαφορετικά σε αυτές τις 2 περιπτώσεις.

179
00:11:30,220 --> 00:11:32,790
Αν είναι πλήρης, είμαστε προσθέτοντας αυτήν την ετικέτα del,

180
00:11:32,790 --> 00:11:35,360
το οποίο είναι ουσιαστικά ο τρόπος που μπορείτε να πάρετε εκείνη την απεργία μέσω της επίδρασής

181
00:11:35,360 --> 00:11:38,190
διέλευση από την-να κάνουμε λίστα, εάν είναι πλήρης,

182
00:11:38,190 --> 00:11:42,200
και αν δεν είναι, δεν είμαστε αυτό, συμπεριλαμβανομένων.

183
00:11:42,200 --> 00:11:45,030
Και έτσι αυτό το είδος της φροντίζει για αυτό,

184
00:11:45,030 --> 00:11:49,140
>> και αυτός είναι ένας τρόπος για να επιτευχθεί αυτό.

185
00:11:49,140 --> 00:11:53,420
Και στη συνέχεια παρατηρήσετε όταν ο χρήστης κάνει κλικ σε ένα από αυτά

186
00:11:53,420 --> 00:11:56,780
θα αλλάξετε την κατάσταση ολοκλήρωσης του.

187
00:11:56,780 --> 00:12:02,170
Όταν ο χρήστης κάνει κλικ, θα αντιστραφεί αν είναι ήδη ολοκληρωθεί ή όχι,

188
00:12:02,170 --> 00:12:04,540
και στη συνέχεια θα το ανασχηματισμού.

189
00:12:04,540 --> 00:12:06,190
Αυτό το είδος των έργων.

190
00:12:06,190 --> 00:12:09,860
Έχουμε αυτές τις λειτουργίες που εκτελούν τα καθήκοντά τους,

191
00:12:09,860 --> 00:12:11,730
και αυτό είναι εντάξει.

192
00:12:11,730 --> 00:12:14,110
Υπάρχει κάτι που θα μπορούσαμε να κάνουμε καλύτερα για αυτό, αν υπάρχει;

193
00:12:14,110 --> 00:12:18,700
Ανακοίνωση έχουμε αυτά τα 2 παγκόσμια συστοιχίες.

194
00:12:18,700 --> 00:12:23,550
Αν αυτό ήταν C, και είχαμε 2 συστοιχίες ότι το είδος των εκπροσωπούμενων

195
00:12:23,550 --> 00:12:25,800
δεδομένα που είδος που σχετίζονται με κάποιο τρόπο

196
00:12:25,800 --> 00:12:30,140
τι θα χρησιμοποιήσετε σε C να συνδυάσει αυτά τα 2 πεδία

197
00:12:30,140 --> 00:12:35,420
σε κάτι που συμπυκνώνει δύο κομμάτια των πληροφοριών;

198
00:12:35,420 --> 00:12:37,600
Ο καθένας θέλει να κάνει μια πρόταση;

199
00:12:37,600 --> 00:12:39,450
[Φοιτητής ακούγεται απάντηση]

200
00:12:39,450 --> 00:12:42,340
>> Ακριβώς, έτσι θα μπορούσαμε να χρησιμοποιήσουμε κάποιο είδος struct,

201
00:12:42,340 --> 00:12:44,960
Και αν νομίζετε ότι πίσω, ας πούμε, το chipset 3,

202
00:12:44,960 --> 00:12:47,350
θυμάστε είχαμε λεξικό, και στη συνέχεια είχαμε το αν η λέξη

203
00:12:47,350 --> 00:12:50,230
στο λεξικό, και όλες οι πληροφορίες ήταν μαζί

204
00:12:50,230 --> 00:12:52,420
εσωτερικό του κάποια δομή δεδομένων.

205
00:12:52,420 --> 00:12:56,390
Ένα πράγμα που μπορώ να κάνω με αυτόν τον κωδικό για να αποφύγουν αυτά τα 2 διαφορετικές συστοιχίες

206
00:12:56,390 --> 00:13:01,760
για παρόμοια κομμάτια των πληροφοριών είναι μπορώ να τα συνδυάσετε σε ένα αντικείμενο JavaScript.

207
00:13:01,760 --> 00:13:07,150
Ας ρίξουμε μια ματιά σε αυτό.

208
00:13:07,150 --> 00:13:11,740
Ανακοίνωση Έχω μόνο μια συστοιχία στην κορυφή τώρα

209
00:13:11,740 --> 00:13:17,650
και τι έχω κάνει είναι-και αυτό είναι ακριβώς το JavaScript σύνταξη για το είδος της

210
00:13:17,650 --> 00:13:21,350
δημιουργώντας μια κυριολεκτική εκδοχή ενός αντικειμένου,

211
00:13:21,350 --> 00:13:24,670
και να παρατηρήσετε ότι υπάρχουν 2 ιδιότητες, έτσι έχουμε την todo,

212
00:13:24,670 --> 00:13:29,660
και αυτό είναι που φυλάσσεται μαζί με το αν είναι πλήρης ή ελλιπής.

213
00:13:29,660 --> 00:13:31,000
Αυτό είναι πολύ παρόμοιο κώδικα.

214
00:13:31,000 --> 00:13:35,310
Είμαστε χρησιμοποιώντας τα αντικείμενα JavaScript.

215
00:13:35,310 --> 00:13:38,600
Αυτό το είδος της βελτιώνει τα πράγματα.

216
00:13:38,600 --> 00:13:43,850
Όπως και τώρα, όλοι αυτοί οι τομείς των σχετικών πληροφοριών παραμένουν μαζί.

217
00:13:43,850 --> 00:13:46,410
Όταν πάμε να το εκτυπώσετε, μπορούμε να έχουμε πρόσβαση τα πεδία.

218
00:13:46,410 --> 00:13:49,060
>> Ανακοίνωση για το πώς κάνουμε todos [i]. Πλήρης

219
00:13:49,060 --> 00:13:52,880
αντί του ελέγχου της πλήρους συστοιχίας χωριστά,

220
00:13:52,880 --> 00:13:56,560
και να παρατηρήσετε όταν θέλουμε να πάρετε την-να κάνουμε εγχόρδων είμαστε πάρει την-να κάνουμε ιδιοκτησίας

221
00:13:56,560 --> 00:13:58,750
του εν λόγω todo, έτσι αυτό το είδος της νόημα, διότι

222
00:13:58,750 --> 00:14:01,660
κάθε στοιχείο έχει αυτές τις εγγενείς ιδιότητες γι 'αυτό.

223
00:14:01,660 --> 00:14:05,650
Έχει μια todo, και έχει αν είναι πλήρης ή όχι.

224
00:14:05,650 --> 00:14:11,540
Όχι πάρα πολλές αλλαγές υπάρχουν λειτουργικά, προστέθηκε μόλις λίγο περισσότερο στον κώδικα.

225
00:14:11,540 --> 00:14:13,430
Αυτό είναι μια βελτίωση σε κάποια μέτωπα, έτσι δεν είναι;

226
00:14:13,430 --> 00:14:16,030
Θέλω να πω, θα υπολογιστεί από το σχεδιασμό λίγο.

227
00:14:16,030 --> 00:14:20,350
Τώρα έχουμε τα αντικείμενα να ενσωματώσει ουσιαστικά αυτά τα δεδομένα.

228
00:14:20,350 --> 00:14:27,130
Υπάρχει κάτι περισσότερο που μπορούμε να κάνουμε από εδώ και από την άποψη της JavaScript εκεί;

229
00:14:27,130 --> 00:14:31,810
Όπως ειδοποίηση ότι αυτός ο κώδικας εδώ

230
00:14:31,810 --> 00:14:34,760
για να πάρει την εσωτερική HTML μιας div

231
00:14:34,760 --> 00:14:40,520
είναι ένα μικρό, υποθέτω, πολύ.

232
00:14:40,520 --> 00:14:45,100
Υπάρχει document.getElementById ("todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Ένα πράγμα που μπορούμε να κάνουμε για να κάνει αυτός ο κώδικας δούμε λίγο πιο φιλικό

234
00:14:48,400 --> 00:14:51,450
γι 'αυτό δεν θα πρέπει να συνεχίσετε την κύλιση αριστερά και δεξιά, εμπρός και πίσω,

235
00:14:51,450 --> 00:14:58,480
είναι ότι θα μπορούσε να χρησιμοποιήσει μια βιβλιοθήκη όπως jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Ας ελέγξει έξω Σεμινάριο 2,

237
00:15:02,710 --> 00:15:05,880
και αυτό είναι το ίδιο κώδικα, αλλά αυτό γίνεται με jQuery.

238
00:15:05,880 --> 00:15:08,790
Μπορεί να μην είναι πολύ εξοικειωμένοι με jQuery,

239
00:15:08,790 --> 00:15:11,510
αλλά απλά να ξέρετε ότι jQuery είναι ένα είδος βιβλιοθήκης για JavaScript

240
00:15:11,510 --> 00:15:15,910
που το καθιστά ευκολότερο να κάνουμε τα πράγματα όπως τα στοιχεία ατομική πρόσβαση του DOM.

241
00:15:15,910 --> 00:15:21,280
Εδώ αντί να λέει document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Μπορώ να χρησιμοποιήσω το πολύ δρόμο καθαρότερο jQuery,

243
00:15:25,210 --> 00:15:28,490
το οποίο είναι απλά να χρησιμοποιήσετε επιλογείς.

244
00:15:28,490 --> 00:15:31,300
Όπως μπορείτε να δείτε, αυτός ο κώδικας δεν πάρετε μια μικρή σκούπα,

245
00:15:31,300 --> 00:15:35,770
πολύ παρόμοια λειτουργικά, αλλά αυτή είναι η ιδέα.

246
00:15:35,770 --> 00:15:37,980
Έχουμε δει μια-δυο πράγματα μέχρι στιγμής,

247
00:15:37,980 --> 00:15:42,010
έτσι αρχίσαμε με μόλις πρώτες εφαρμογή JavaScript.

248
00:15:42,010 --> 00:15:45,370
Προσθέσαμε νέα χαρακτηριστικά και έδειξε πώς μπορούμε να τη βελτιώσουμε με

249
00:15:45,370 --> 00:15:49,090
ακριβώς αυτό που έχουμε στο JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Πιστεύει κανείς να δει τις δυσκολίες με αυτό το σχέδιο;

251
00:15:53,300 --> 00:16:01,090
Δηλαδή, υποθέτω-ή όχι κατ 'ανάγκη τις δυσκολίες, αλλά ας πούμε

252
00:16:01,090 --> 00:16:04,830
δεν είχαμε κάνει-να κάνουμε λίστα έργων, και αύριο θα αποφασιστεί

253
00:16:04,830 --> 00:16:10,320
θέλαμε να κάνουμε έναν κατάλογο παντοπωλείων ή ένα έργο λίστα με ψώνια.

254
00:16:10,320 --> 00:16:14,150
Πολλά από αυτά τα χαρακτηριστικά είναι πολύ παρόμοια.

255
00:16:14,150 --> 00:16:19,080
Πολλά από τα πράγματα που θέλουμε να βγούμε από JavaScript είναι πολύ συχνές,

256
00:16:19,080 --> 00:16:23,820
και αυτό υπογραμμίζει την ανάγκη για κάποιο είδος του τρόπου

257
00:16:23,820 --> 00:16:25,670
κάνει αυτό πιο εύκολο να κάνει.

258
00:16:25,670 --> 00:16:30,400
Έπρεπε να δημιουργήσει όλες αυτές τις HTML πρόσβασης, όλη αυτή η πρόσβαση DOM,

259
00:16:30,400 --> 00:16:35,530
σαν να είμαι πρόκειται να εκπροσωπήσει την-να κάνουμε λίστα με αυτό το μοντέλο.

260
00:16:35,530 --> 00:16:39,130
Και παρατηρήσετε είμαι υπεύθυνος, ως ο κύριος του έργου JavaScript

261
00:16:39,130 --> 00:16:42,890
για τη διατήρηση της HTML και JavaScript που έχω σε συγχρονισμό.

262
00:16:42,890 --> 00:16:48,040
Τίποτα δεν γίνονται αυτόματα ότι το JavaScript εκπροσώπηση

263
00:16:48,040 --> 00:16:51,590
ή την-να κάνουμε λίστα να βγει έξω για HTML.

264
00:16:51,590 --> 00:16:54,000
Τίποτα δεν επιβάλλεται ότι εκτός από μένα.

265
00:16:54,000 --> 00:16:56,880
Έπρεπε να γράψω την κλήρωση-να κάνουμε τη λειτουργία λίστας.

266
00:16:56,880 --> 00:17:01,650
Και αυτό δεν μπορεί να είναι-εννοώ, είναι λογικό να το κάνουμε αυτό,

267
00:17:01,650 --> 00:17:03,670
αλλά μπορεί να είναι κουραστικό μερικές φορές.

268
00:17:03,670 --> 00:17:08,190
Εάν έχετε ένα μεγαλύτερο έργο, που θα μπορούσε να είναι δύσκολη.

269
00:17:08,190 --> 00:17:10,720
>> Πλαίσια, ένας από τους σκοπούς των πλαισίων

270
00:17:10,720 --> 00:17:14,060
είναι να απλοποιήσει αυτή τη διαδικασία και το είδος παράγοντας από τους

271
00:17:14,060 --> 00:17:16,950
αυτά τα κοινά-Υποθέτω ότι θα μπορούσαμε να πούμε-το σχεδιασμό μοντέλων

272
00:17:16,950 --> 00:17:20,700
ότι οι άνθρωποι έχουν γενικά κάποιο είδος του τρόπου παρουσίασης δεδομένων,

273
00:17:20,700 --> 00:17:25,599
αν αυτό είναι μια λίστα φίλων, είτε αυτό είναι πληροφορίες χάρτη

274
00:17:25,599 --> 00:17:27,280
ή κάτι ή ένα-να κάνουμε λίστα.

275
00:17:27,280 --> 00:17:30,660
Μερικοί άνθρωποι έχουν γενικά έναν τρόπο παρουσίαση των πληροφοριών,

276
00:17:30,660 --> 00:17:33,650
και γενικά πρέπει να κρατήσει αυτό το είδος πληροφοριών σε συγχρονισμό

277
00:17:33,650 --> 00:17:36,520
ανάμεσα σε αυτό που βλέπει ο χρήστης σε κάποιο είδος του άποψη,

278
00:17:36,520 --> 00:17:39,850
μιλώντας από την άποψη της, όπως το ελεγκτή άποψη μοντέλο που είδατε στη διάλεξη,

279
00:17:39,850 --> 00:17:45,400
και στη συνέχεια το μοντέλο, το οποίο στην περίπτωση αυτή είναι αυτή η συστοιχία JavaScript.

280
00:17:45,400 --> 00:17:49,020
Πλαίσια μας δώσει έναν τρόπο να λύσει αυτό το πρόβλημα.

281
00:17:49,020 --> 00:17:53,080
Τώρα, ας ρίξουμε μια ματιά στην εφαρμογή του παρόντος-να κάνουμε λίστα

282
00:17:53,080 --> 00:18:02,360
σε ένα πλαίσιο που ονομάζεται angularjs.

283
00:18:02,360 --> 00:18:04,650
Αυτό είναι. Ανακοίνωση για να χωράει σε μια διαφάνεια.

284
00:18:04,650 --> 00:18:07,330
Δεν έχω να μετακινηθείτε προς τα αριστερά και δεξιά.

285
00:18:07,330 --> 00:18:10,460
Αυτό είναι πιθανόν να μην είναι ένας καλός λόγος για να συστήσει τη χρήση ενός πλαισίου,

286
00:18:10,460 --> 00:18:20,120
αλλά ειδοποίηση είμαι πρόσβαση ποτέ μεμονωμένα στοιχεία HTML εδώ;

287
00:18:20,120 --> 00:18:22,400
Είμαι πάντα πηγαίνει στο DOM;

288
00:18:22,400 --> 00:18:26,120
Πιστεύετε ότι θα υπάρξουν document.getElementById ή κάτι τέτοιο;

289
00:18:26,120 --> 00:18:29,870
Όχι, αυτό είναι φύγει.

290
00:18:29,870 --> 00:18:35,590
>> Γωνιακή μας βοηθά να κρατήσει το DOM και JavaScript εκπροσώπησή μας από κάτι

291
00:18:35,590 --> 00:18:40,430
το είδος της σε συγχρονισμό, οπότε αν δεν είναι στο αρχείο js,

292
00:18:40,430 --> 00:18:46,790
αν δεν υπάρχει τρόπος προγραμματισμού πάρει σε όλους ότι το περιεχόμενο HTML

293
00:18:46,790 --> 00:18:51,800
από το JavaScript πώς θα διατηρώντας αυτό σε συγχρονισμό;

294
00:18:51,800 --> 00:18:58,160
Αν δεν είναι στο αρχείο. Js, που πήρε να είναι σε μορφή HTML, έτσι δεν είναι;

295
00:18:58,160 --> 00:19:01,910
Αυτή είναι η νέα έκδοση του HTML αρχείου,

296
00:19:01,910 --> 00:19:04,660
και να παρατηρήσετε έχουμε προσθέσει πολλά εδώ.

297
00:19:04,660 --> 00:19:11,110
Παρατηρήσετε ότι υπάρχουν αυτά τα νέα χαρακτηριστικά που λένε ng-κλικ και ng-επαναλαμβάνω.

298
00:19:11,110 --> 00:19:15,650
Προσέγγιση Γωνιακή για την επίλυση αυτού του προβλήματος των δυσκολιών στο σχεδιασμό

299
00:19:15,650 --> 00:19:19,130
είναι ουσιαστικά κάνει HTML πολύ πιο ισχυρό.

300
00:19:19,130 --> 00:19:24,420
Γωνιακή είναι ένας τρόπος που σας επιτρέπει να κάνετε HTML κάπως πιο εκφραστική.

301
00:19:24,420 --> 00:19:30,520
Για παράδειγμα, μπορώ να πω ότι θα πάω να δέσει ή να δεσμεύσει αυτό το πλαίσιο κειμένου

302
00:19:30,520 --> 00:19:35,080
σε μια μεταβλητή μέσα σε γωνιακή κώδικα JavaScript μου.

303
00:19:35,080 --> 00:19:37,030
Αυτό ng-μοντέλο κάνει ακριβώς αυτό.

304
00:19:37,030 --> 00:19:41,550
Που ουσιαστικά λέει ότι το στοιχείο στο εσωτερικό της αυτό το πλαίσιο κειμένου,

305
00:19:41,550 --> 00:19:45,000
απλά συνδέουν αυτό με τη μεταβλητή new_todo_description

306
00:19:45,000 --> 00:19:47,870
στο πλαίσιο του κώδικα JavaScript.

307
00:19:47,870 --> 00:19:51,600
Αυτό είναι πολύ ισχυρό, γιατί δεν θα πρέπει ρητά να πάει στο

308
00:19:51,600 --> 00:19:53,310
το DOM για να πάρετε τις πληροφορίες.

309
00:19:53,310 --> 00:19:56,250
Δεν έχω να πω document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Δεν χρειάζεται να χρησιμοποιήσετε jQueries όπως η πρόσβαση DOM.

311
00:19:58,750 --> 00:20:03,280
Μπορώ να το συνδέσει με μια μεταβλητή, και στη συνέχεια, όταν μπορώ να αλλάξω αυτή τη μεταβλητή

312
00:20:03,280 --> 00:20:07,400
εντός JavaScript είναι διατηρούνται σε συγχρονισμό με την HTML,

313
00:20:07,400 --> 00:20:11,640
έτσι ώστε να απλοποιεί τη διαδικασία να πρέπει να πάει μπροστά και πίσω μεταξύ των δύο.

314
00:20:11,640 --> 00:20:18,260
Μήπως αυτό έχει νόημα;

315
00:20:18,260 --> 00:20:22,060
>> Και παρατηρήσετε δεν υπάρχει HTML κωδικό πρόσβασης.

316
00:20:22,060 --> 00:20:27,760
Έχουμε μόλις έκανε HTML πιο ισχυρό,

317
00:20:27,760 --> 00:20:32,070
και τώρα, για παράδειγμα, μπορούμε να κάνουμε τα πράγματα όπως αυτό,

318
00:20:32,070 --> 00:20:38,610
όπως όταν κάνετε κλικ σε αυτό, καλέστε αυτή τη λειτουργία εντός του πεδίου εφαρμογής της todos.js,

319
00:20:38,610 --> 00:20:43,410
και θα μπορούσαμε να το κάνουμε αυτό πριν, αλλά υπάρχουν και άλλα πράγματα, όπως αυτό ng-μοντέλο,

320
00:20:43,410 --> 00:20:47,020
και να παρατηρήσετε αυτό ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Τι νομίζεις ότι κάνει;

322
00:20:51,520 --> 00:20:54,390
Εδώ είναι μη διατεταγμένη λίστα μας από πριν.

323
00:20:54,390 --> 00:20:56,470
Έχουμε τις ul ετικέτες,

324
00:20:56,470 --> 00:21:03,710
αλλά είμαι καθιστώντας ποτέ τον εν λόγω κατάλογο στο εσωτερικό του κώδικα JavaScript;

325
00:21:03,710 --> 00:21:09,280
Δεν είμαι ποτέ καθιστά ρητά τον εν λόγω κατάλογο.

326
00:21:09,280 --> 00:21:11,580
Πώς λειτουργεί αυτό;

327
00:21:11,580 --> 00:21:16,410
Λοιπόν, η γωνιακή τρόπο επιτυγχάνει αυτό είναι αυτό ονομάζεται ένας επαναλήπτης.

328
00:21:16,410 --> 00:21:22,760
Βασικά, αυτό λέει ότι θέλω να εκτυπώσετε το HTML

329
00:21:22,760 --> 00:21:26,240
για κάθε εσωτερικό todo των Todos σειρά μου.

330
00:21:26,240 --> 00:21:31,850
Μέσα από todos.jr υπάρχει μια σειρά todos εδώ,

331
00:21:31,850 --> 00:21:37,910
και αυτό θα σας πει γωνιακή go μέσω αυτής της διάταξης, καθώς και για κάθε στοιχείο που βλέπετε

332
00:21:37,910 --> 00:21:41,390
Θέλω να εκτυπώσετε το HTML.

333
00:21:41,390 --> 00:21:44,620
Αυτό είναι το είδος της φοβερό, επειδή μπορώ ακριβώς να το κάνετε αυτό

334
00:21:44,620 --> 00:21:47,760
χωρίς να χρειάζεται να γράψετε ένα for loop,

335
00:21:47,760 --> 00:21:52,250
η οποία για ένα-να κάνουμε λίστα που ήταν μόνο 30 γραμμές κώδικα

336
00:21:52,250 --> 00:21:54,700
μπορεί να μην είναι το πιο ευεργετικό πράγμα,

337
00:21:54,700 --> 00:22:01,240
αλλά εάν έχετε ένα μεγάλο έργο, αυτό θα μπορούσε να πάρει πολύ βολικό.

338
00:22:01,240 --> 00:22:06,100
>> Αυτή είναι μία λύση στο πρόβλημα αυτό, καθιστώντας HTML πιο ισχυρό,

339
00:22:06,100 --> 00:22:10,820
και αυτό μας επιτρέπει να διατηρήσουμε JavaScript και HTML σε συγχρονισμό.

340
00:22:10,820 --> 00:22:13,220
Υπάρχουν και άλλοι πιθανοί τρόποι για να λυθεί αυτό το πρόβλημα,

341
00:22:13,220 --> 00:22:15,320
και όχι κάθε πλαίσιο το κάνει αυτό.

342
00:22:15,320 --> 00:22:17,720
Δεν είναι κάθε πλαίσιο εργάζεται προς αυτή την κατεύθυνση.

343
00:22:17,720 --> 00:22:19,490
Μερικά πλαίσια έχουν διαφορετικές προσεγγίσεις,

344
00:22:19,490 --> 00:22:23,310
και μπορείτε να διαπιστώσετε ότι μπορείτε να απολαύσετε την κωδικοποίηση σε ένα πλαίσιο πάνω στο άλλο.

345
00:22:23,310 --> 00:22:26,160
Ας δούμε ένα ακόμα.

346
00:22:26,160 --> 00:22:30,060
Αυτό είναι το-να κάνουμε λίστα κωδικοποιούνται σε ένα πλαίσιο που αποκαλείται Backbone.

347
00:22:30,060 --> 00:22:33,250
Πάω να περάσει μέσα από αυτό γρήγορα.

348
00:22:33,250 --> 00:22:38,300
Θα ξεκινήσω με την HTML, πριν πάμε εκεί.

349
00:22:38,300 --> 00:22:40,290
Ένα δευτερόλεπτο.

350
00:22:40,290 --> 00:22:43,950
Ξεκινώντας με την HTML, όπως θα παρατηρήσετε, HTML μας είναι πολύ παρόμοια

351
00:22:43,950 --> 00:22:50,000
σε ό, τι ήταν πριν, έτσι δεν είναι πάρα πολύ νέα σε αυτό το μέτωπο.

352
00:22:50,000 --> 00:22:55,410
Αλλά js αρχείο μας είναι λίγο διαφορετική.

353
00:22:55,410 --> 00:23:00,360
Είδος ραχοκοκαλιά της έχει αυτή την ιδέα, ή να βασίζεται στην ιδέα

354
00:23:00,360 --> 00:23:04,750
ότι πολλά από αυτά που κάνουμε, ας πούμε, τα έργα μας JavaScript

355
00:23:04,750 --> 00:23:09,110
είναι να σκεφτώ τα μοντέλα και τις συλλογές αυτών των μοντέλων.

356
00:23:09,110 --> 00:23:12,510
Αυτό θα μπορούσε να είναι, για παράδειγμα, μια φωτογραφία και συλλογές των φωτογραφιών,

357
00:23:12,510 --> 00:23:16,230
ή η ιδέα ενός φίλου και συλλογές φίλων.

358
00:23:16,230 --> 00:23:20,700
Και πολλές φορές όταν είμαστε προγραμματισμού JavaScript εφαρμογές

359
00:23:20,700 --> 00:23:25,340
θα ταξινομήσετε του αντιπροσωπεύει την ιδέα του να έχετε μια συλλογή των φίλων

360
00:23:25,340 --> 00:23:29,500
κατά κάποιο τρόπο σε JavaScript, και η σπονδυλική στήλη μας δίνει αυτό το στρώμα

361
00:23:29,500 --> 00:23:33,040
στην κορυφή των υφιστάμενων πινάκων και των αντικειμένων του JavaScript

362
00:23:33,040 --> 00:23:38,300
να κάνει πιο ισχυρά πράγματα με αυτό πιο εύκολα.

363
00:23:38,300 --> 00:23:41,870
>> Εδώ έχω ορίσει ένα to-do μοντέλο,

364
00:23:41,870 --> 00:23:44,630
και δεν έχετε να ανησυχείτε πάρα πολύ για τη σύνταξη,

365
00:23:44,630 --> 00:23:48,730
αλλά παρατηρήσετε ότι αυτό είναι μία από τις ιδιότητες του αυτό;

366
00:23:48,730 --> 00:23:53,190
Έχει ένα πεδίο ορισμού.

367
00:23:53,190 --> 00:23:56,640
Backbone μου επιτρέπει να καθορίσετε ήδη από το ρόπαλο

368
00:23:56,640 --> 00:24:00,190
κάθε νέο-να κάνουμε που έχω δημιουργήσει πρόκειται να έχει αυτές τις προεπιλογές.

369
00:24:00,190 --> 00:24:04,100
Τώρα μπορώ να προσαρμόσετε αυτό, αλλά να είναι σε θέση να καθορίσετε τις προεπιλογές

370
00:24:04,100 --> 00:24:07,220
είναι ωραίο, και αυτό είναι το είδος της βολικό, επειδή αυτό δεν είναι κάτι που είναι σαν

371
00:24:07,220 --> 00:24:10,430
συνυφασμένες με JavaScript, και τώρα δεν έχω ρητά

372
00:24:10,430 --> 00:24:12,430
λένε ότι οι Todos είναι ελλιπείς.

373
00:24:12,430 --> 00:24:19,190
Μπορώ να πω δεξιά από το ρόπαλο ότι todos πρόκειται να χαρακτηρίζεται ως ελλιπής.

374
00:24:19,190 --> 00:24:21,300
Ανακοίνωση τότε τι είναι αυτό;

375
00:24:21,300 --> 00:24:25,520
Τώρα έχω ένα-να κάνουμε λίστα, και αυτό είναι μια συλλογή.

376
00:24:25,520 --> 00:24:30,960
Ανακοίνωση για τον τομέα που σχετίζεται με την οποία λέει πως το μοντέλο todo.

377
00:24:30,960 --> 00:24:33,390
Αυτός είναι ο τρόπος μου να λέει Backbone ότι

378
00:24:33,390 --> 00:24:37,350
Πάω να σκεφτόμαστε μια συλλογή των εν λόγω ατομικών todos.

379
00:24:37,350 --> 00:24:42,140
Αυτή είναι ουσιαστικά η δομή του μοντέλου για το πρόγραμμά μου.

380
00:24:42,140 --> 00:24:44,980
Εδώ έχω αυτή την ιδέα της συλλογής,

381
00:24:44,980 --> 00:24:48,960
και ουσιαστικά τα στοιχεία που περιέχονται στην εν λόγω συλλογή είναι όλα πρόκειται να είναι αυτοί οι todos,

382
00:24:48,960 --> 00:24:51,910
και ότι είναι πολύ φυσικό σε αυτή την έννοια

383
00:24:51,910 --> 00:24:59,890
γιατί έχω todos, και τους έχω σε μια συλλογή.

384
00:24:59,890 --> 00:25:02,940
>> Ας δούμε λίγο περισσότερο από αυτό.

385
00:25:02,940 --> 00:25:05,900
Εδώ είναι μια άποψη Backbone.

386
00:25:05,900 --> 00:25:08,890
Το άλλο πράγμα που Backbone λέει είναι ότι

387
00:25:08,890 --> 00:25:14,660
πολλά από τα μοντέλα που σκέφτεστε ή ακόμα και συλλογές

388
00:25:14,660 --> 00:25:19,150
θα πρέπει να έχουν κάποιο τρόπο να εμφανίζεται.

389
00:25:19,150 --> 00:25:21,900
Πρέπει να το καθιστούν-να κάνουμε λίστα,

390
00:25:21,900 --> 00:25:25,460
και δεν θα ήταν ωραίο αν θα μπορούσε να προσφέρει για κάθε μοντέλο

391
00:25:25,460 --> 00:25:28,390
ή να συνδέσουν με κάθε μοντέλο αυτή την άποψη

392
00:25:28,390 --> 00:25:34,020
που μας επιτρέπει να υποθέτω τη σύνδεση των δύο μαζί;

393
00:25:34,020 --> 00:25:38,320
Ενώ πριν έπρεπε να χρησιμοποιήσουμε ένα for loop που θα τρέχει μέσα

394
00:25:38,320 --> 00:25:41,130
κάθε todo στη λίστα μας και στη συνέχεια να εκτυπώσετε εδώ

395
00:25:41,130 --> 00:25:44,650
μπορούμε να συνδέσουμε το ουσιαστικά με αυτό το μοντέλο.

396
00:25:44,650 --> 00:25:47,550
Αυτό είναι ένα-να κάνουμε προβολή.

397
00:25:47,550 --> 00:25:50,550
Αυτό συνδέεται με το Todo βρήκαμε νωρίτερα.

398
00:25:50,550 --> 00:25:54,940
Τώρα κάθε todo είναι εμφανίσιμα ή renderable

399
00:25:54,940 --> 00:25:56,960
από αυτό-να κάνουμε προβολή.

400
00:25:56,960 --> 00:25:59,440
Ανακοίνωση για ορισμένα από τα πεδία.

401
00:25:59,440 --> 00:26:05,880
Τι νομίζετε ότι αυτό tagName είναι, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Θυμηθείτε από πριν, όταν θέλαμε να καταστήσει ένα todo

403
00:26:09,790 --> 00:26:16,700
θα πρέπει να αντιστοιχίσετε ρητά Todos μας με αυτήν την ετικέτα li.

404
00:26:16,700 --> 00:26:21,080
Τώρα λέμε ότι όπου αυτό todo πρόκειται να ζήσει

405
00:26:21,080 --> 00:26:25,250
πρόκειται να είναι μέσα από μια ετικέτα li.

406
00:26:25,250 --> 00:26:31,440
Και τώρα είμαστε συνδέει επίσης τα γεγονότα με todos μας.

407
00:26:31,440 --> 00:26:34,320
>> Κάθε todo έχει αυτό ένα γεγονός.

408
00:26:34,320 --> 00:26:38,480
Αν κάνετε κλικ σε μεγάλο βαθμό το κουμπί εναλλαγής, αυτό είναι ό, τι λέω εκεί,

409
00:26:38,480 --> 00:26:43,080
στη συνέχεια να επισημάνετε ουσιαστικά το todo ως το αντίθετο από αυτό που ήταν πριν

410
00:26:43,080 --> 00:26:45,890
και στη συνέχεια να καθιστούν την εφαρμογή.

411
00:26:45,890 --> 00:26:47,810
Αυτό είναι το είδος παρόμοιο με τον κώδικα πριν.

412
00:26:47,810 --> 00:26:50,730
Να θυμάστε, όταν θα το φέρουν, είτε το αντίθετο ή-

413
00:26:50,730 --> 00:26:52,410
και στη συνέχεια εκ νέου-rendered.

414
00:26:52,410 --> 00:26:57,750
Να σημειωθεί όμως τώρα αυτό το γεγονός χρησιμοποιείται για να είναι κάτι που ήταν στην HTML.

415
00:26:57,750 --> 00:26:59,640
Θα καθόταν εκεί.

416
00:26:59,640 --> 00:27:01,410
Το κουμπί είχε με κλικ.

417
00:27:01,410 --> 00:27:05,310
Όταν κάνετε κλικ στο κουμπί, αυτό το είδος της κάνει τα πράγματα να

418
00:27:05,310 --> 00:27:07,210
που έχει συσταθεί ότι todo είναι ελλιπής.

419
00:27:07,210 --> 00:27:11,180
Εδώ έχουμε συνδέονται εκείνο το γεγονός της κάνοντας κλικ στην αντίστοιχη κουμπί εναλλαγής

420
00:27:11,180 --> 00:27:15,830
και την αναστροφή είτε πρόκειται για εντός ή εκτός με την άποψη αυτή.

421
00:27:15,830 --> 00:27:20,480
>> Αυτό είναι ένας ωραίος τρόπος για τη δημιουργία αυτής της εκδήλωσης, έτσι ώστε να είναι πολύ στενά συνδεδεμένη

422
00:27:20,480 --> 00:27:26,980
την άποψη αυτή, και να παρατηρήσετε έτσι μία ακόμη.

423
00:27:26,980 --> 00:27:31,050
Έχω αυτή τη μέθοδο render, και εμείς δεν πρέπει να περάσουν από τις λεπτομέρειες.

424
00:27:31,050 --> 00:27:33,650
Είναι είδος παρόμοιο με αυτό που είχαμε πριν,

425
00:27:33,650 --> 00:27:36,070
αλλά παρατηρήσετε δεν είμαι looping μέσω τίποτα.

426
00:27:36,070 --> 00:27:40,700
Δεν είμαι εκτύπωση πως η UL tag που είναι είδος λέγοντας Πάω να εκτυπώσετε όλα τα στοιχεία.

427
00:27:40,700 --> 00:27:46,610
Είμαι παρέχει τη λειτουργικότητα για να καταστεί αυτό το ένα-να κάνουμε στοιχείο.

428
00:27:46,610 --> 00:27:49,400
Αυτή είναι μια πολύ ισχυρή ιδέα, διότι ουσιαστικά

429
00:27:49,400 --> 00:27:53,600
-να κάνουμε λίστα μας αποτελείται από όλα αυτά todos, και αν μπορούμε ουσιαστικά καθορίσετε

430
00:27:53,600 --> 00:27:56,890
ο τρόπος για να καταστήσει ένα από αυτά todos

431
00:27:56,890 --> 00:28:04,230
τότε μπορούμε να έχουμε ισχυρή ραχοκοκαλιά μας per se καθιστούν όλα τα todos

432
00:28:04,230 --> 00:28:07,760
καλώντας τη μέθοδο του Render για τα επιμέρους todos.

433
00:28:07,760 --> 00:28:14,180
Αυτή είναι μια έννοια που είναι χρήσιμο εδώ.

434
00:28:14,180 --> 00:28:18,160
Τώρα είναι μια καλή ερώτηση για να ρωτήσω είναι πώς είναι αυτή η εφαρμογή να βάλει μαζί;

435
00:28:18,160 --> 00:28:21,200
Επειδή έχουμε τη δυνατότητα να καταστήσει ένα todo,

436
00:28:21,200 --> 00:28:23,860
αλλά πώς θα πάρετε την ιδέα των πολλαπλών todos;

437
00:28:23,860 --> 00:28:25,100
>> Ας ρίξουμε μια ματιά σε αυτό.

438
00:28:25,100 --> 00:28:27,100
Αυτό είναι το τελευταίο μέρος.

439
00:28:27,100 --> 00:28:29,740
Ανακοίνωση έχουμε ένα-να κάνουμε προβολή λίστας εδώ,

440
00:28:29,740 --> 00:28:34,440
και να παρατηρήσετε ότι είναι επίσης μια άποψη.

441
00:28:34,440 --> 00:28:36,970
Και για να πάει πάνω από ένα δυο πράγματα,

442
00:28:36,970 --> 00:28:45,280
Αυτή η μέθοδος αρχικοποίησης θα καλείται όταν δημιουργούμε για πρώτη φορά αυτό-να κάνουμε λίστα.

443
00:28:45,280 --> 00:28:52,630
Όπως μπορείτε να δείτε, είναι σαν τη δημιουργία του-να κάνουμε λίστα και συνδέοντάς το με την άποψη αυτή.

444
00:28:52,630 --> 00:28:57,860
Και τότε προστίθενται οι λειτουργίες εδώ τόσο βασικά, όταν προσθέτετε ένα στοιχείο-

445
00:28:57,860 --> 00:29:01,440
Αυτό είναι παρόμοιο με τη μέθοδο addItem είδαμε προηγουμένως

446
00:29:01,440 --> 00:29:07,430
Πάω να δημιουργήσετε ένα νέο αντικείμενο todo, και να παρατηρήσετε είμαι πραγματικά καλώντας

447
00:29:07,430 --> 00:29:13,080
Αυτή η νέα μέθοδος todo, έτσι αυτό παρέχεται από Backbone,

448
00:29:13,080 --> 00:29:16,010
και μπορώ να περάσει σε ακίνητα μου εδώ.

449
00:29:16,010 --> 00:29:23,710
Και τώρα κάθε todo που έχω δημιουργήσει με αυτό θα πάρει τη λειτουργικότητα που είδαμε πριν.

450
00:29:23,710 --> 00:29:28,140
Ανακοίνωση Είμαι εκκαθάριση από το πλαίσιο κειμένου πριν-μια μικρή μικρή λεπτομέρεια-

451
00:29:28,140 --> 00:29:32,900
και στη συνέχεια είμαι προσθέτοντας αυτή τη συλλογή.

452
00:29:32,900 --> 00:29:37,630
>> Αυτό φαίνεται σχεδόν περίεργο γιατί πριν ακριβώς έπρεπε να το κάνουμε αυτό todos.push,

453
00:29:37,630 --> 00:29:43,310
και στη συνέχεια είχαμε κάνει, και αυτό μπορεί να φαίνεται πιο περίπλοκη για το συγκεκριμένο έργο,

454
00:29:43,310 --> 00:29:46,980
και μπορείτε να διαπιστώσετε ότι Backbone ή ακόμα και γωνιακή ή οποιοδήποτε άλλο πλαίσιο

455
00:29:46,980 --> 00:29:50,790
δεν ταιριάζει ιδιαίτερα το έργο σας, αλλά νομίζω ότι είναι σημαντικό να σκεφτούμε

456
00:29:50,790 --> 00:29:54,100
τι σημαίνει αυτό σε μεγαλύτερη κλίμακα για τα μεγάλα έργα,

457
00:29:54,100 --> 00:29:56,610
γιατί αν είχαμε ένα μεγαλύτερο έργο όπου ήμασταν εκπροσωπούν

458
00:29:56,610 --> 00:30:00,860
κάποια πραγματικά σύνθετη συλλογή, κάτι βαθύτερο από ακριβώς ένα-να κάνουμε λίστα,

459
00:30:00,860 --> 00:30:04,490
ας πούμε μια λίστα φίλων ή κάτι τέτοιο, αυτό θα μπορούσε να έρθει σε πρακτικό

460
00:30:04,490 --> 00:30:09,620
γιατί θα μπορούσαμε να διοργανώσουμε τον κωδικό μας σε ένα πολύ βολικό τρόπο,

461
00:30:09,620 --> 00:30:12,550
με τρόπο που θα καταστήσει ευκολότερο για κάποιον άλλο

462
00:30:12,550 --> 00:30:16,820
ο οποίος ήθελε να πάρει ένα σχέδιο για την περαιτέρω ανάπτυξη.

463
00:30:16,820 --> 00:30:21,450
Μπορείτε να δείτε ότι αυτό παρέχει πολλές δομής.

464
00:30:21,450 --> 00:30:26,580
Και τότε είμαι καλώντας καθιστούν αυτή την addItem.

465
00:30:26,580 --> 00:30:31,050
Render, όπως μπορείτε να δείτε, και δεν έχετε να κατανοήσουν αυτή την πλήρη σύνταξη,

466
00:30:31,050 --> 00:30:37,790
αλλά βασικά για κάθε μοντέλο πρόκειται να καλέσετε το άτομο μέθοδο render.

467
00:30:37,790 --> 00:30:41,500
Αυτό είναι το είδος της όπου αυτό προέρχεται.

468
00:30:41,500 --> 00:30:44,140
Ας καθορίσετε τον τρόπο να δώσει τα μεμονωμένα todos,

469
00:30:44,140 --> 00:30:47,310
και στη συνέχεια ας κόλλα μαζί ως σύνολο.

470
00:30:47,310 --> 00:30:49,810
Αλλά αυτό παρέχει έναν τρόπο αφαίρεσης,

471
00:30:49,810 --> 00:30:55,470
γιατί θα μπορούσε να αλλάξει τον τρόπο που έχω αποφασίσει να δώσει τα μεμονωμένα todos,

472
00:30:55,470 --> 00:30:57,940
και δεν θα πρέπει να αλλάξουν οποιαδήποτε αυτού του κώδικα.

473
00:30:57,940 --> 00:31:00,700
Αυτό είναι το είδος της δροσερό.

474
00:31:00,700 --> 00:31:08,540
>> Μήπως κάποιος έχει απορίες σχετικά με JavaScript πλαισίων;

475
00:31:08,540 --> 00:31:14,310
[Φοιτητής ακούγεται ερώτημα]

476
00:31:14,310 --> 00:31:16,050
Ω, σίγουρα, αυτό είναι ένα μεγάλο ερώτημα.

477
00:31:16,050 --> 00:31:19,080
Το ερώτημα ήταν πώς θα περιλαμβάνουν τα πλαίσια;

478
00:31:19,080 --> 00:31:22,970
Τα περισσότερα πλαίσια JavaScript είναι βασικά ακριβώς αρχεία js

479
00:31:22,970 --> 00:31:25,740
που μπορείτε να συμπεριλάβετε στην αρχή του κώδικα σας.

480
00:31:25,740 --> 00:31:29,830
Ανακοίνωση στο τμήμα της κεφαλής του HTML μου έχω όλα αυτά τα tags script,

481
00:31:29,830 --> 00:31:34,250
και η τελική ετικέτα σενάριο είναι ο κώδικας που έχω γράψει.

482
00:31:34,250 --> 00:31:38,820
Και τότε τα 3 κωδικοί πλαίσιο είναι απλά και ετικέτες script.

483
00:31:38,820 --> 00:31:42,110
Είμαι τους ακόμη και από αυτό που ονομάζεται CDN,

484
00:31:42,110 --> 00:31:46,200
που μου επιτρέπει να το πάρει από κάποιον άλλο σε αυτό το σημείο

485
00:31:46,200 --> 00:31:57,930
αλλά κάθε πλαίσιο έχει αυτό-μπορείτε λίγο πολύ να βρείτε το περιεχόμενο

486
00:31:57,930 --> 00:32:03,540
για μια συγκεκριμένη βιβλιοθήκη JavaScript διατίθεται σε κάποια CDN ή κάτι τέτοιο,

487
00:32:03,540 --> 00:32:05,570
και στη συνέχεια μπορείτε να συμπεριλάβετε αυτές τις ετικέτες script.

488
00:32:05,570 --> 00:32:07,600
Μήπως αυτό έχει νόημα;

489
00:32:07,600 --> 00:32:09,500
Cool.

490
00:32:09,500 --> 00:32:11,730
>> Αυτά είναι 2 διαφορετικές προσεγγίσεις.

491
00:32:11,730 --> 00:32:14,640
Αυτοί δεν είναι οι μόνες προσεγγίσεις για την επίλυση αυτού του προβλήματος.

492
00:32:14,640 --> 00:32:17,080
Υπάρχουν πολλά διαφορετικά πράγματα που

493
00:32:17,080 --> 00:32:19,490
κάποιος θα μπορούσε να κάνει, και υπάρχουν πολλά πλαίσια εκεί έξω.

494
00:32:19,490 --> 00:32:23,300
Γωνιακό και Backbone δεν λένε όλη την ιστορία.

495
00:32:23,300 --> 00:32:26,370
Καλή τύχη με τα τελικά έργα σας, και σας ευχαριστώ πολύ.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]