1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Σεμινάριο: Jquery]

2
00:00:02,690 --> 00:00:04,790
[Vipul Shekhawat, Πανεπιστήμιο Χάρβαρντ]

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

4
00:00:08,000 --> 00:00:10,640
Εάν είστε μετά μαζί στο σπίτι, μπορείτε να έχετε πρόσβαση στην πραγματικότητα διαφάνειες μου σε απευθείας σύνδεση

5
00:00:10,640 --> 00:00:13,310
με τη μετάβαση σε αυτό το σύνδεσμο.

6
00:00:13,310 --> 00:00:18,650
Είναι TjjRWj, για bit.ly.

7
00:00:18,650 --> 00:00:20,700
Μπορείτε επίσης απλά να πάτε στο URL άμεσα,

8
00:00:20,700 --> 00:00:27,300
η οποία είναι cloud.cs50.net / ~ vshekhawat, που είναι το όνομά μου,

9
00:00:27,300 --> 00:00:32,409
και jquery.

10
00:00:32,409 --> 00:00:34,920
Θα ήθελα πολύ να σας ενθαρρύνω να ακολουθήσετε μαζί, αν είστε βλέποντας στο σπίτι,

11
00:00:34,920 --> 00:00:40,650
και αν είστε εδώ, επίσης, επειδή αυτό είναι μια πολύ διαδραστική παρουσίαση.

12
00:00:40,650 --> 00:00:43,160
>> Έτσι, σήμερα Πάω να μιλάμε για jQuery, και το πρώτο ερώτημα είναι,

13
00:00:43,160 --> 00:00:45,300
Τι είναι η jQuery;

14
00:00:45,300 --> 00:00:47,090
Φέτος, ξέρω ότι εσείς δεν καλύπτονται JavaScript

15
00:00:47,090 --> 00:00:51,080
σε όσο πιο αναλυτικά έχουμε τα τελευταία χρόνια.

16
00:00:51,080 --> 00:00:53,150
JavaScript είναι, πρώτα απ 'όλα, μόνο ένα client-side γλώσσα

17
00:00:53,150 --> 00:00:58,390
που χρησιμοποιείτε για να εκτελέσετε δέσμες ενεργειών και τον κωδικό στον υπολογιστή του κάθε χρήστη.

18
00:00:58,390 --> 00:01:00,660
Έτσι έχετε ένα διακομιστή που παρέχει ιστοσελίδες για τους ανθρώπους,

19
00:01:00,660 --> 00:01:02,600
αλλά ίσως να θέλετε να κάνετε πράγματα στον υπολογιστή τους,

20
00:01:02,600 --> 00:01:08,060
να ζητήσει από το μηχάνημά τους να στείλουν αιτήσεις στον server σας κάθε 30 δευτερόλεπτα ή κάτι τέτοιο.

21
00:01:08,060 --> 00:01:10,420
Μπορείτε να το κάνετε αυτό χρησιμοποιώντας JavaScript.

22
00:01:10,420 --> 00:01:13,190
JQuery παρέχει μόνο περισσότερη λειτουργικότητα στην κορυφή του JavaScript

23
00:01:13,190 --> 00:01:15,680
που κάνει επιπλέον πράγματα για σας.

24
00:01:15,680 --> 00:01:17,710
Αν κοιτάξετε τα περιεχόμενα στην κορυφή,

25
00:01:17,710 --> 00:01:21,410
που περιγράφει μερικά από τα πράγματα που είστε σε θέση να κάνει.

26
00:01:21,410 --> 00:01:23,500
Έτσι, συνολικά, το οποίο δημιουργήθηκε τον Ιανουάριο του 2006.

27
00:01:23,500 --> 00:01:26,560
Ήταν η πρώτη που σχεδιάστηκε από τον Αύγουστο του 2005.

28
00:01:26,560 --> 00:01:31,370
Είναι εδώ για ένα-δύο χρόνια, και αυτό είναι πραγματικά μέρος του νέου κινήματος Web 2.0

29
00:01:31,370 --> 00:01:34,330
που έκανε το Internet τόσο λαμπερό.

30
00:01:34,330 --> 00:01:37,630
Είναι το πιο ευρέως χρησιμοποιούμενο βιβλιοθήκη JavaScript.

31
00:01:37,630 --> 00:01:41,450
Πάνω από 19,6 εκατομμύρια ιστοσελίδες που το χρησιμοποιούν, και η χρήση του εξακολουθεί να αυξάνεται

32
00:01:41,450 --> 00:01:45,640
σύμφωνα με builtwith.com, οι οποίες, προφανώς, κατά το τελευταίο έτος,

33
00:01:45,640 --> 00:01:49,710
μόλις έχει συνεχώς αυξανόμενη αρκετά γραμμικά.

34
00:01:49,710 --> 00:01:52,870
Μεταξύ των κορυφαίων 10 εκατομμύρια sites, υπάρχει ακόμα -

35
00:01:52,870 --> 00:01:55,180
περίπου το 40% από αυτούς χρησιμοποιούν αυτή τη στιγμή.

36
00:01:55,180 --> 00:01:58,540
Facebook χρησιμοποιεί, πολλές άλλες ιστοσελίδες χρησιμοποιούν αυτή τη στιγμή.

37
00:01:58,540 --> 00:02:01,540
Μπορείτε να δείτε σε αυτά τα στατιστικά στοιχεία σχετικά με τη δική σας, αν θέλετε.

38
00:02:01,540 --> 00:02:05,820
Και θα μπορούσα να πω είναι legit επειδή έχει ένα ίδρυμα και 13 μέλη του διοικητικού συμβουλίου,

39
00:02:05,820 --> 00:02:11,910
μαζί με μια ομάδα 20 ανθρώπων που εργάζονται σε αυτό σε τακτική βάση.

40
00:02:11,910 --> 00:02:16,110
Γι 'αυτό είναι πολύ διαδεδομένη, έχει. URL org, είναι φανταχτερό,

41
00:02:16,110 --> 00:02:21,660
έχει spin-offs για άλλα πράγματα, γι 'αυτό είναι μια μεγάλη υπόθεση.

42
00:02:21,660 --> 00:02:24,510
>> Γιατί θα πρέπει να το χρησιμοποιήσετε; JQuery είναι πολύ ελαφρύ.

43
00:02:24,510 --> 00:02:27,270
Αυτό σημαίνει ότι δεν είναι ένα τεράστιο αρχείο. Μπορείτε να κατεβάσετε

44
00:02:27,270 --> 00:02:31,540
η minified αρχείο, το οποίο είναι χωρίς όλα το λευκό χώρο και τα σχόλια, και είναι μόνο 32 kB.

45
00:02:31,540 --> 00:02:33,600
Έτσι είναι εύκολο απλά να πετάξει επάνω ιστοσελίδα σας

46
00:02:33,600 --> 00:02:35,910
και μόνο για να αρχίσετε να το χρησιμοποιείτε.

47
00:02:35,910 --> 00:02:39,630
Είναι επίσης πολύ αποτελεσματικά γραμμένο, ώστε να μην καταλαμβάνουν πολύ -

48
00:02:39,630 --> 00:02:42,550
δεν επιβραδύνουν την ιστοσελίδα σας πολύ όταν το χρησιμοποιείτε.

49
00:02:42,550 --> 00:02:45,770
Αυτό σας επιτρέπει να εφαρμόσουν τα πράγματα που προηγουμένως ήταν ανέφικτη.

50
00:02:45,770 --> 00:02:47,790
Υπάρχουν ορισμένες πτυχές της λειτουργικότητας,

51
00:02:47,790 --> 00:02:51,780
όπως η δημιουργία animations, που κανονικά θα ήταν πολύ, πολύ δύσκολο να το κάνουμε.

52
00:02:51,780 --> 00:02:54,300
Αλλά σε jQuery στην πραγματικότητα είναι πολύ απλό.

53
00:02:54,300 --> 00:02:57,040
Και υπάρχουν μερικά πράγματα που είναι ενοχλητικό να το κάνουμε,

54
00:02:57,040 --> 00:02:59,610
δυνατόν JavaScript, όπως την αποστολή ενός αιτήματος POST,

55
00:02:59,610 --> 00:03:02,190
αλλά για να στείλετε ένα αίτημα σε ένα διακομιστή, πρέπει να γράψετε

56
00:03:02,190 --> 00:03:04,320
πέντε ή έξι ή επτά γραμμές κώδικα.

57
00:03:04,320 --> 00:03:07,200
Τώρα μπορείτε να το κάνετε μόνο σε μια ενιαία γραμμή κώδικα, σε μία κλήση.

58
00:03:07,200 --> 00:03:11,790
Που απλοποιεί πραγματικά πολλά από τα πράγματα που κάνεις.

59
00:03:11,790 --> 00:03:15,950
Και όλα τα μοντέρνα παιδιά το χρησιμοποιούν. Με αυτό, εννοώ εμένα.

60
00:03:15,950 --> 00:03:19,270
Στο τελικό σχέδιο μου το περασμένο έτος, το οποίο είναι news.whrb.org,

61
00:03:19,270 --> 00:03:22,530
η οποία είναι για το ραδιοφωνικό σταθμό, δημιούργησα αυτό το blog

62
00:03:22,530 --> 00:03:29,750
το οποίο φιλοξενεί όλες τις παραστάσεις που έχουμε κάνει και τα αρχεία MP3 για αυτούς.

63
00:03:29,750 --> 00:03:32,070
Μπορείτε να περιηγηθείτε μέσα από το παρελθόν δείχνει,

64
00:03:32,070 --> 00:03:34,130
και όλα γίνονται χρησιμοποιώντας jQuery. Μπορείτε να πείτε

65
00:03:34,130 --> 00:03:37,340
εξαιτίας όλων αυτών των animations, κατ 'ουσίαν.

66
00:03:37,340 --> 00:03:42,360
Έτσι, εάν έχετε - αν δημιουργείτε μια νέα θέση,

67
00:03:42,360 --> 00:03:45,980
θα δείτε αυτά τα μικρά slideDowns? Αυτό είναι όλα γίνονται χρησιμοποιώντας jQuery.

68
00:03:45,980 --> 00:03:49,140
Και αυτό fade - έτσι ώστε είδους πράγματα είναι όλα γίνονται χρησιμοποιώντας jQuery,

69
00:03:49,140 --> 00:03:52,720
και δεν χρειάζεται να φορτώσετε εκ νέου συνεχώς την σελίδα για να περιηγηθείτε στο site.

70
00:03:52,720 --> 00:03:57,220
Ένα άλλο δροσερό πράγμα που κάνει χρήση jQuery είναι αυτή η παρουσίαση.

71
00:03:57,220 --> 00:03:59,700
Είμαι χρησιμοποιώντας αυτή την ανοιχτή πράγμα πηγή που ονομάζεται scrolldeck,

72
00:03:59,700 --> 00:04:03,250
οποία κάποιος έγραψε πάνω από jQuery.

73
00:04:03,250 --> 00:04:04,870
Αν πραγματικά δούμε την πηγή, μπορείτε να δείτε ότι

74
00:04:04,870 --> 00:04:07,830
από όπου και αν χρησιμοποιείτε αυτό το σύμβολο του δολαρίου? σύμβολα του δολαρίου

75
00:04:07,830 --> 00:04:12,110
χρησιμοποιούνται σε jQuery για να δηλώσει ότι μια συνάρτηση είναι μια συνάρτηση jQuery.

76
00:04:12,110 --> 00:04:15,020
Έτσι, από όπου και αν ορίζει ένα περιτύλιγμα στην κορυφή της jQuery

77
00:04:15,020 --> 00:04:18,570
που σας επιτρέπει να κάνετε μια παρουσίαση, όπως αυτή,

78
00:04:18,570 --> 00:04:21,200
και μπορείτε να δείτε ότι εδώ θα είστε όπως το αρχικό αρχείο jQuery,

79
00:04:21,200 --> 00:04:24,120
το οποίο είναι αυτό που θα πρέπει να περιλαμβάνει, εάν θέλετε να χρησιμοποιήσετε jQuery

80
00:04:24,120 --> 00:04:30,450
στις δικές σας ιστοσελίδες.

81
00:04:30,450 --> 00:04:32,790
>> Αγγίζοντας σε αυτό, πώς να το εγκαταστήσετε;

82
00:04:32,790 --> 00:04:36,150
Μπορείτε απλά να πάτε στο jQuery.com και να κατεβάσετε το αρχείο,

83
00:04:36,150 --> 00:04:38,320
προσθέστε το σε ένα κατάλογο Ιστού και να συμπεριληφθεί.

84
00:04:38,320 --> 00:04:42,200
Έτσι, ακριβώς στην κορυφή, στην ετικέτα της κεφαλής της HTML αρχείο σας

85
00:04:42,200 --> 00:04:45,400
της κύριας HTML αρχείο σας, έχουν ακριβώς αυτή τη γραμμή κώδικα

86
00:04:45,400 --> 00:04:49,490
με τη σωστή έκδοση για το ποια έκδοση του jQuery που χρησιμοποιείτε.

87
00:04:49,490 --> 00:04:51,340
Μπορείτε να το κατεβάσετε πρόκειται να jQuery.com,

88
00:04:51,340 --> 00:04:55,130
κάντε κλικ στο "Download jQuery," και το έχεις. Αυτό είναι όλο.

89
00:04:55,130 --> 00:04:58,880
Και στην πραγματικότητα, μπορούμε να ρίξουμε μια ματιά στο τι μοιάζει.

90
00:04:58,880 --> 00:05:01,080
Αν κάνετε κλικ στο κατεβάστε το από εδώ, jQuery είναι αυτό.

91
00:05:01,080 --> 00:05:05,260
Είναι απλά ένα μεγάλο αρχείο JavaScript που κάνει όλη τη μαγεία πράγματα για σας.

92
00:05:05,260 --> 00:05:09,270
Αυτή είναι η minified έκδοση, η οποία δεν είναι αναγνώσιμο σε όλα.

93
00:05:09,270 --> 00:05:13,180
Μπορείτε επίσης να εξετάσουμε την έκδοση της ανάπτυξης, το οποίο είναι αναγνώσιμο

94
00:05:13,180 --> 00:05:15,370
αλλά εξακολουθεί να είναι πολύ, πολύ χρονοβόρα.

95
00:05:15,370 --> 00:05:17,980
Είναι πολλά πράγματα εκεί μέσα.

96
00:05:17,980 --> 00:05:20,240
Μπορείτε επίσης να συνδέσετε στην έκδοση φιλοξενείται Google για αυτό.

97
00:05:20,240 --> 00:05:23,820
Έτσι, αυτό θα σας επιτρέψει να στηριχθεί μόνο στο Google να προσφέρει.

98
00:05:23,820 --> 00:05:29,310
Παρέχουν κάθε εκδοχή του, διαθέσιμα ανά πάσα στιγμή.

99
00:05:29,310 --> 00:05:31,530
Έτσι, μπορείτε πιθανώς να βασίζονται στο Google για να το φιλοξενήσει για σας.

100
00:05:31,530 --> 00:05:33,270
Ή μπορείτε να συνδέσετε το δικό τελευταία έκδοση του jQuery.

101
00:05:33,270 --> 00:05:36,400
Έχουν μια διεύθυνση URL που είναι πάντα ενημερωμένο με την τελευταία έκδοση.

102
00:05:36,400 --> 00:05:40,850
Είναι jQuery-τελευταία, και υπάρχει ένα πρόβλημα με αυτό,

103
00:05:40,850 --> 00:05:44,350
το οποίο είναι ότι, εάν η ενημερωμένη jQuery και ορισμένες από τις προηγούμενες λειτουργικότητας

104
00:05:44,350 --> 00:05:47,250
είχαν γίνει υποβαθμισμένο ή ξεπερασμένες,

105
00:05:47,250 --> 00:05:49,620
δεν μπορεί - μπορεί να αρχίσει να μην πάρει υποστηρίζεται πια.

106
00:05:49,620 --> 00:05:52,940
Έτσι, αν γράψετε μια ιστοσελίδα χρησιμοποιώντας την έκδοση 1.8.2,

107
00:05:52,940 --> 00:05:55,000
από την έκδοση 2.7 χρόνο βγαίνει

108
00:05:55,000 --> 00:05:57,000
ορισμένες από τις λειτουργίες που έγραψε δεν λειτουργούν πια.

109
00:05:57,000 --> 00:05:59,930
Έτσι είναι καλύτερο απλά να κατεβάσετε το αρχείο 32 kB,

110
00:05:59,930 --> 00:06:04,100
βάλετε στην ιστοσελίδα σας, και αυτό θα λειτουργήσει για πάντα.

111
00:06:04,100 --> 00:06:07,450
>> Πάω να πάει μπροστά και να αρχίσουμε να μιλάμε για την πραγματική λειτουργικότητα του jQuery.

112
00:06:07,450 --> 00:06:13,090
Το πρώτο πράγμα είναι επιλογείς. Αυτό είναι ό, τι jQuery αρχικά σχεδιάστηκε για να προσφέρει.

113
00:06:13,090 --> 00:06:15,500
Και μπορείτε να κάνετε κλικ στο φάκελο για να δούμε

114
00:06:15,500 --> 00:06:18,690
η αναλυτική τεκμηρίωση για τους επιλογείς Πάω να καλύπτει.

115
00:06:18,690 --> 00:06:24,120
Η ιδέα πίσω από επιλογείς είναι ότι μπορείτε να επιλέξετε στοιχεία HTML σε μια σελίδα.

116
00:06:24,120 --> 00:06:28,790
Στοιχεία σε μια σελίδα έχουν ταυτότητες και τάξεις και άλλες πτυχές εντοπισμό τους.

117
00:06:28,790 --> 00:06:30,500
Υπάρχει επίσης - αλλά επιλέγουν να φτιάξουν σε διαφορετικές τάξεις.

118
00:06:30,500 --> 00:06:32,570
Μερικά από τη στιγμή όπου και αν ένθετα στο εσωτερικό του άλλου.

119
00:06:32,570 --> 00:06:38,120
JQuery σας επιτρέπει να δημιουργήσετε απλά ερωτήματα που ανακτούν στοιχεία από τη σελίδα.

120
00:06:38,120 --> 00:06:41,890
Στη συνέχεια, μπορείτε να χειριστείτε αυτά τα στοιχεία χρησιμοποιώντας jQuery λειτουργίες,

121
00:06:41,890 --> 00:06:43,990
το οποίο αποτελεί τμήμα χειραγώγηση θα φτάσουμε αργότερα.

122
00:06:43,990 --> 00:06:46,040
Μπορείτε να αλλάξετε το HTML, να αλλάξετε το CSS,

123
00:06:46,040 --> 00:06:50,500
μπορείτε επίσης να εμψυχώσει και να προσθέτουν λειτουργίες που ενεργοποιούν για ορισμένα γεγονότα.

124
00:06:50,500 --> 00:06:52,710
Έτσι, για παράδειγμα, αν κάτι δεν κάνει κλικ, θέλετε κάτι να συμβεί,

125
00:06:52,710 --> 00:06:55,210
μπορείτε να το κάνετε χρησιμοποιώντας jQuery, καθώς και.

126
00:06:55,210 --> 00:06:57,380
Και υπάρχει ένας τεράστιος αριθμός των τρόποι για να επιλέξετε τα στοιχεία.

127
00:06:57,380 --> 00:07:00,310
Οι περισσότεροι από αυτούς που έχω χρησιμοποιήσει ποτέ, αλλά υπάρχουν και οι βασικές,

128
00:07:00,310 --> 00:07:02,340
το οποίο είναι πολύ σημαντικό.

129
00:07:02,340 --> 00:07:05,750
Ο επιλογέας στοιχείο, για παράδειγμα, αν είστε επιλέγοντας μόνο τίποτα

130
00:07:05,750 --> 00:07:10,640
αυτό είναι ένα div - έχω πραγματικά τον κώδικα ανοικτό για αυτή την παρουσίαση διαφανειών.

131
00:07:10,640 --> 00:07:13,450
Έτσι, για παράδειγμα, εδώ είναι η πρώτη διαφάνεια.

132
00:07:13,450 --> 00:07:17,430
Εδώ έχουμε ένα div. Εάν επιλέξετε στην πραγματικότητα όλα τα divs στη σελίδα,

133
00:07:17,430 --> 00:07:22,300
αυτό ακριβώς θα μας δώσει μια σειρά από όλα τα divs που υπάρχουν σε αυτό το αρχείο.

134
00:07:22,300 --> 00:07:27,040
Το αναγνωριστικό επιλογέας σας επιτρέπει να επιλέξετε κάτι με μια συγκεκριμένη ταυτότητα.

135
00:07:27,040 --> 00:07:32,230
Έτσι, αν αυτό, για παράδειγμα, αυτό το πράγμα έχει το ID "τι"

136
00:07:32,230 --> 00:07:37,160
και αν το κάναμε αυτό με ό, τι # αντί για κάποιο αναγνωριστικό,

137
00:07:37,160 --> 00:07:42,920
θα επιστρέψει μόνο έναν πίνακα που έχει ένα μόνο στοιχείο και αυτό είναι το στοιχείο της σελίδας.

138
00:07:42,920 --> 00:07:45,490
Μπορούμε επίσης να συνδυάσουμε επιλογείς με αυτόν τον τρόπο από την κατοχή

139
00:07:45,490 --> 00:07:48,260
επιλέξετε μόνο τα πράγματα με τα αναγνωριστικά που είναι divs.

140
00:07:48,260 --> 00:07:51,810
Έτσι, ναι. Μόνο επιλέξτε divs που έχουν αυτό το ID.

141
00:07:51,810 --> 00:07:55,260
Για την κατηγορία μπορείτε να χρησιμοποιήσετε μόνο μια τελεία, είναι το ίδιο πράγμα με το CSS.

142
00:07:55,260 --> 00:07:57,500
Απόγονος λειτουργεί επίσης? Οπότε αν έχετε κάποια τάξη

143
00:07:57,500 --> 00:08:00,170
και έχει ένθετα στοιχεία μέσα σε αυτό - έτσι, για παράδειγμα,

144
00:08:00,170 --> 00:08:03,260
υπάρχει κάποια τάξη και να έχει μια ετικέτα άγκυρα να συνδεθεί με μια άλλη σελίδα,

145
00:08:03,260 --> 00:08:08,510
μπορείτε να χρησιμοποιήσετε αυτήν τη σύνταξη για να ανακτήσετε το σύνδεσμο.

146
00:08:08,510 --> 00:08:12,420
Μπορείτε επίσης να επιλέξετε πολλαπλά πράγματα ταυτόχρονα? Απλά να τους χωρίσει από κόμματα,

147
00:08:12,420 --> 00:08:17,360
χρησιμοποιήσετε οποιοδήποτε επιλογέα θέλετε, και θα επιλέξετε όλα αυτά ταυτόχρονα, σε ένα ενιαίο πίνακα.

148
00:08:17,360 --> 00:08:19,650
Και έπειτα υπάρχει και το όχι επιλογέα, ώστε να μπορείτε να επιλέξετε όλα τα divs

149
00:08:19,650 --> 00:08:24,210
που δεν έχουν κάποια συγκεκριμένη κατηγορία.

150
00:08:24,210 --> 00:08:28,790
Και αυτό είναι μόνο ένα χρήσιμο τρόπο για να πάρετε μια εισαγωγή για το πώς αυτή η επιλογή λειτουργεί.

151
00:08:28,790 --> 00:08:32,270
Θα σας δείξω μερικά συγκεκριμένα παραδείγματα σε ένα δευτερόλεπτο.

152
00:08:32,270 --> 00:08:35,480
>> Σύνθετη επιλογείς είναι - αυτά είναι μερικά μόνο παραδείγματα.

153
00:08:35,480 --> 00:08:38,840
Υπάρχουν δεκάδες από αυτά, αλλά αν θέλετε να επιλέξετε όλες τις ετικέτες εικόνα

154
00:08:38,840 --> 00:08:42,799
μέσα σε κάποιο στοιχείο, τότε μπορείτε απλά να κάνετε: image.

155
00:08:42,799 --> 00:08:45,340
Αν θέλετε να επιλέξετε ακόμη και τα στοιχεία, για παράδειγμα, εάν υπάρχουν 20 από αυτά,

156
00:08:45,340 --> 00:08:48,290
θέλετε να επιλέξετε 0, 2, 4, 6 και ούτω καθεξής,

157
00:08:48,290 --> 00:08:51,630
κάνεις: ακόμα, ή μπορείτε επίσης να κάνετε: περίεργο.

158
00:08:51,630 --> 00:08:55,470
Αυτά είναι ψευδο επιλογείς, πράγμα που σημαίνει ότι υπολογίζουν πραγματικά

159
00:08:55,470 --> 00:09:00,960
κάθε άλλο στοιχείο και όχι μόνο πηγαίνει και την επιλογή όλα αυτά.

160
00:09:00,960 --> 00:09:05,510
Μπορείτε επίσης - κάθε στοιχείο μπορεί επίσης να έχει συγκεκριμένα χαρακτηριστικά.

161
00:09:05,510 --> 00:09:10,580
Έτσι, για παράδειγμα, την τάξη = κέντρο είναι επίσης ένα χαρακτηριστικό.

162
00:09:10,580 --> 00:09:16,500
Για αυτήν την ετικέτα άγκυρα, href, hypertext αναφοράς, είναι ένα χαρακτηριστικό επίσης.

163
00:09:16,500 --> 00:09:21,150
Έτσι, μπορείτε να επιλέξετε κάτι που συνδέεται με μια συγκεκριμένη σελίδα ή απλά - είναι πολύ γενικό.

164
00:09:21,150 --> 00:09:25,410
Μπορείτε να επιλέξετε τίποτα με οποιοδήποτε χαρακτηριστικό που θα θέλατε.

165
00:09:25,410 --> 00:09:27,470
Και τότε, επίσης, χαρακτηριστικό γνώρισμα περιλαμβάνει.

166
00:09:27,470 --> 00:09:30,420
Αν, για παράδειγμα, ήθελε να επιλέξετε όλα τα στοιχεία εισόδου

167
00:09:30,420 --> 00:09:32,700
που έχουν τη λέξη "περάσει" με το όνομα τους,

168
00:09:32,700 --> 00:09:37,560
αν μια σελίδα έχει ένα μπλοκ κειμένου εισόδου

169
00:09:37,560 --> 00:09:41,050
Αυτό ονομάζεται "password", που θα ήταν ένας τρόπος που θα μπορούσατε να επιλέξετε αυτό.

170
00:09:41,050 --> 00:09:43,020
Και υπάρχουν πολλά περισσότερα. Μπορείτε να πάτε μπροστά και να δούμε την τεκμηρίωση

171
00:09:43,020 --> 00:09:46,950
και να δούμε συγκεκριμένα παραδείγματα για το πώς λειτουργεί.

172
00:09:46,950 --> 00:09:48,840
>> Το επόμενο πράγμα είναι DOM χειραγώγηση.

173
00:09:48,840 --> 00:09:52,500
Αφού επιλέξετε τα στοιχεία, εμείς θα θέλουμε να κάνουμε πραγματικότητα τα πράγματα με αυτούς.

174
00:09:52,500 --> 00:09:55,500
Μέχρι στιγμής δεν έχουμε κοίταξε καθόλου, αλλά αν δείτε την τεκμηρίωση,

175
00:09:55,500 --> 00:09:57,950
υπάρχει πραγματικά πολλά που θα μπορούσαμε να κάνουμε.

176
00:09:57,950 --> 00:10:02,900
Σε αυτό το σημείο, θα πάμε για να επιλέξετε τα στοιχεία για αυτήν την παρουσίαση

177
00:10:02,900 --> 00:10:04,890
και να τα διαχειριστούμε με jQuery.

178
00:10:04,890 --> 00:10:08,290
Επειδή αυτό υλοποιείται χρησιμοποιώντας jQuery, έχουμε πρόσβαση στη βιβλιοθήκη jQuery,

179
00:10:08,290 --> 00:10:13,580
και μπορούμε να χρησιμοποιήσουμε αυτές τις λειτουργίες στον κωδικό αυτό.

180
00:10:13,580 --> 00:10:16,200
Ένα χρήσιμο πράγμα που ίσως δεν γνωρίζουν είναι η κονσόλα.

181
00:10:16,200 --> 00:10:19,340
Και το Google Chrome είναι αυτό που είμαι με τη χρήση. Μπορείτε να πατήσετε alt εντολή J

182
00:10:19,340 --> 00:10:21,720
ή alt ελέγχου J για να ανοίξετε την κονσόλα.

183
00:10:21,720 --> 00:10:26,130
Στο Firefox Νομίζω εντολών, τη μετατόπιση K ή τον έλεγχο μετατόπιση Κ.

184
00:10:26,130 --> 00:10:28,880
Στο Safari θα πρέπει να πάτε να αλλάξετε κάποιες ρυθμίσεις.

185
00:10:28,880 --> 00:10:35,460
Υπάρχει μια σύνδεση, αν θέλετε να το κάνετε, αλλά σας συνιστώ να πάρει Chrome ή το Firefox.

186
00:10:35,460 --> 00:10:37,750
Ας ανοίξει την κονσόλα, είναι εδώ κάτω.

187
00:10:37,750 --> 00:10:41,170
Σας επιτρέπει να κάνετε ακριβώς ουσιαστικά τίποτα που θέλετε.

188
00:10:41,170 --> 00:10:45,100
Έτσι, μπορείτε απλά να πληκτρολογήσετε δημιουργήσει μια μεταβλητή που ονομάζεται x,

189
00:10:45,100 --> 00:10:49,200
x = 5, ας δούμε τι x + 2 είναι.

190
00:10:49,200 --> 00:10:57,670
Μπορείτε ακόμα να κάνετε κάτι σαν CS + Ας δούμε, x + 45, που θα είναι CS50.

191
00:10:57,670 --> 00:11:00,530
Μπορείτε να κάνετε ακριβώς κάποια τυπικά πράγματα JavaScript.

192
00:11:00,530 --> 00:11:02,730
Αλλά μπορείτε επίσης να κάνετε jQuery εδώ.

193
00:11:02,730 --> 00:11:06,200
>> Έτσι, ας ρίξουμε μια ματιά σε αυτό το πρώτο θέμα εδώ.

194
00:11:06,200 --> 00:11:09,500
Εμείς πάμε για να δημιουργήσετε μια μεταβλητή που ονομάζεται HTML, το οποίο είναι ένα string.

195
00:11:09,500 --> 00:11:15,890
Έχει μια ετικέτα παραγράφου σε αυτό, αυτό ονομάζεται κάποιο νέο κείμενο.

196
00:11:15,890 --> 00:11:19,420
Έχουμε λοιπόν αυτό το HTML, είναι κάποια νέα κειμένου, σε ετικέτες παραγράφου.

197
00:11:19,420 --> 00:11:21,800
Τώρα θέλουμε πραγματικά να το προσθέσετε στη σελίδα.

198
00:11:21,800 --> 00:11:28,310
Μπορώ να συσταθεί έτσι ώστε η HTML για την παράγραφο αυτή, ο τίτλος αυτός εδώ, είναι προσάρτησης ID.

199
00:11:28,310 --> 00:11:32,320
Αν επιλέξετε προσάρτησης ID και στη συνέχεια επισυνάπτει σε αυτό

200
00:11:32,320 --> 00:11:34,560
η HTML μεταβλητή που μόλις δημιουργήσατε,

201
00:11:34,560 --> 00:11:40,370
θα προσθέσω ότι HTML στο τέλος, ακριβώς μετά από αυτή την ετικέτα παραγράφου.

202
00:11:40,370 --> 00:11:43,730
Έτσι, αν το κάνουμε αυτό - έχουμε επιλέξει αυτή την παράγραφο,

203
00:11:43,730 --> 00:11:47,590
και το έχουμε ονομάσει τη λειτουργία προσάρτησης με την HTML μεταβλητή που μόλις προστέθηκαν,

204
00:11:47,590 --> 00:11:50,960
θα προσθέσει το νέο κείμενο στα δεξιά της σελίδας.

205
00:11:50,960 --> 00:11:54,970
Μπορούμε επίσης να προσθέσετε το πρόθεμα, το οποίο σημαίνει ότι θα πάει πριν, κατά την έναρξη του εν λόγω στοιχείου.

206
00:11:54,970 --> 00:11:58,290
Έτσι, δεν υπάρχει κάποιο νέο κείμενο στην αρχή και μετά.

207
00:11:58,290 --> 00:12:01,660
Μπορώ να πάω μπροστά και να ανανεώσετε για να απαλλαγούμε από αυτά τα πράγματα που έχω μόλις κάνει.

208
00:12:01,660 --> 00:12:05,280
Αλλά αυτό είναι ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε το βάλε και να προσαρτήσει τις μεθόδους

209
00:12:05,280 --> 00:12:08,910
να χειριστούν τα πράγματα στη σελίδα, προσθέστε λίγο HTML.

210
00:12:08,910 --> 00:12:11,080
>> Μπορείτε επίσης να αλλάξετε τις κατηγορίες.

211
00:12:11,080 --> 00:12:14,970
Επιστροφή σε αυτό το αρχείο στυλ, έχω δημιουργήσει αυτό για την κατηγορία νίκη

212
00:12:14,970 --> 00:12:19,990
που έχει το κείμενο κόκκινο χρώμα, λίγο χρώμα φόντου, και μια σκιά κειμένου.

213
00:12:19,990 --> 00:12:23,810
Φαίνεται φρικτή, αλλά μπορεί στην πραγματικότητα -

214
00:12:23,810 --> 00:12:26,410
παράγραφο αυτή αντιστοιχεί στο αναγνωριστικό κλάσης.

215
00:12:26,410 --> 00:12:29,860
Έτσι, μπορώ να προσθέσω την τάξη για τη νίκη.

216
00:12:29,860 --> 00:12:31,870
Μπορώ να εκτελέσει αυτό στην κονσόλα,

217
00:12:31,870 --> 00:12:35,480
και ότι θα προσθέσει αυτή την κατηγορία, και τώρα φαίνεται αποτρόπαιο, όπως αναμενόταν.

218
00:12:35,480 --> 00:12:39,680
Η CSS παίρνει αυτόματα εφαρμόζεται στις κατηγορίες που -

219
00:12:39,680 --> 00:12:42,680
αν υπάρχει CSS για μια κατηγορία, που γίνεται αυτόματα εφαρμόζεται

220
00:12:42,680 --> 00:12:44,680
αν αλλάξετε την κατηγορία ενός στοιχείου.

221
00:12:44,680 --> 00:12:49,230
Τότε μπορούμε να το αφαιρέσετε απλά χρησιμοποιώντας Remove Class.

222
00:12:49,230 --> 00:12:53,690
Έτσι, αν έχετε κάποιες προκαθορισμένες κατηγορίες, όπως κόκκινο ή τόνισε,

223
00:12:53,690 --> 00:12:55,990
και στη συνέχεια θέλετε να εφαρμόσετε αυτά σε στοιχεία,

224
00:12:55,990 --> 00:12:58,230
δεν χρειάζεται να κάνει όλη τη CSS styling κάθε φορά.

225
00:12:58,230 --> 00:13:01,510
Μπορείτε να προσθέσετε μόνο την τάξη σε ένα στοιχείο, και στη συνέχεια θα γίνει αυτόματα -

226
00:13:01,510 --> 00:13:05,580
αυτόματα θα φαίνονται κατάλληλες για την εν λόγω κατηγορία.

227
00:13:05,580 --> 00:13:07,900
Μπορούμε επίσης να αφαιρέσετε τα πράγματα? Έτσι Πάω να επιλέξετε όλα τα divs

228
00:13:07,900 --> 00:13:10,830
στη σελίδα και να τα αφαιρέσετε.

229
00:13:10,830 --> 00:13:13,990
Τι είναι αυτό πρόκειται να μοιάσει;

230
00:13:13,990 --> 00:13:16,170
Είναι πρόκειται να μοιάζουν με τίποτα, έτσι δεν υπάρχει πραγματικά τίποτα αριστερά.

231
00:13:16,170 --> 00:13:18,170
Η παρουσίασή μου έχει φύγει.

232
00:13:18,170 --> 00:13:21,290
Μπορώ να ανανεώσετε και να το φέρει πίσω, ευτυχώς,

233
00:13:21,290 --> 00:13:24,420
επειδή είναι ακριβώς τρέχει μια φορά,

234
00:13:24,420 --> 00:13:29,460
αλλά αυτό είναι ένα παράδειγμα της αφαίρεσης, αν θέλετε να καταστρέψει εντελώς ένα στοιχείο από τη σελίδα.

235
00:13:29,460 --> 00:13:33,180
>> Μπορείτε επίσης να αντικαταστήσετε, και θα πάω για να επιλέξετε όλες τις ετικέτες παράγραφο στη σελίδα

236
00:13:33,180 --> 00:13:36,850
και να πάει μέσα και αντικαταστήστε ό, τι κείμενο που έχουν μέσα τους

237
00:13:36,850 --> 00:13:39,690
μόνο με τη λέξη "δοκιμή".

238
00:13:39,690 --> 00:13:46,520
Αν το κάνετε αυτό, θα αντικαταστήσει κάθε παραγράφου της σελίδας με αυτή την εξέταση.

239
00:13:46,520 --> 00:13:49,150
Ναι. Είναι όλοι αντικατασταθεί με δοκιμή.

240
00:13:49,150 --> 00:13:53,270
Έτσι, αυτό είναι ένα παράδειγμα της πρόσβασης του κειμένου και αντικατάσταση αυτή.

241
00:13:53,270 --> 00:13:57,490
Μπορείτε επίσης να ανακτήσετε τις πληροφορίες, και αυτό είναι πραγματικά δροσερό για τα πλαίσια εισαγωγής.

242
00:13:57,490 --> 00:14:00,470
Εάν έχετε ένα πλαίσιο εισαγωγής που οι άνθρωποι πληκτρολογώντας πράγματα σε,

243
00:14:00,470 --> 00:14:03,880
οι άνθρωποι είναι πληκτρολογώντας πράγματα σε αυτό,

244
00:14:03,880 --> 00:14:09,030
Εδώ επιλέγουμε την είσοδο, κάθε ετικέτα εισόδου με έναν τύπο κειμένου.

245
00:14:09,030 --> 00:14:13,800
Στην περίπτωση αυτή, υπάρχει μόνο ένα κουτί σε όλη την παρουσίαση,

246
00:14:13,800 --> 00:14:17,260
έτσι θα επιλέξετε μόνο το πρώτο, και στη συνέχεια καλούμε τη συνάρτηση Val σε αυτό.

247
00:14:17,260 --> 00:14:19,570
Αυτό επιστρέφει την τιμή, καθώς και για ένα πλαίσιο εισόδου,

248
00:14:19,570 --> 00:14:24,330
η τιμή είναι ακριβώς ό, τι συμβαίνει να είναι μέσα σε αυτό.

249
00:14:24,330 --> 00:14:31,880
Έτσι, αν το κάνουμε αυτό, επιστρέφει ακριβώς τα πράγματα string.

250
00:14:31,880 --> 00:14:36,860
Και αν λέμε και πάλι μετά τη σύνταξη περισσότερα πράγματα, μετατρέπεται σε περισσότερα πράγματα.

251
00:14:36,860 --> 00:14:40,760
Αυτός είναι ένας πολύ καλός τρόπος για να αποκτήσετε πρόσβαση σε στοιχεία ενός πλαισίου εισαγωγής, και στη συνέχεια ελέγξτε,

252
00:14:40,760 --> 00:14:45,060
είναι αυτό μια έγκυρη διεύθυνση e-mail, αυτό είναι μια έγκυρη ημερομηνία, για παράδειγμα.

253
00:14:45,060 --> 00:14:49,600
Μπορείτε να ανακτήσετε μόνο τα πράγματα αμέσως καθώς οι άνθρωποι την πληκτρολόγηση,

254
00:14:49,600 --> 00:14:54,830
και στη συνέχεια ελέγξτε αν είναι έγκυρη, να το στείλετε πίσω σε ένα διακομιστή, κάντε ό, τι θέλετε με αυτό.

255
00:14:54,830 --> 00:14:57,720
Και αυτό είναι το πώς θα αποκτήσετε πρόσβαση σε ό, τι είναι μέσα σε αυτά τα πλαίσια.

256
00:14:57,720 --> 00:15:00,090
>> Μπορείτε επίσης να τροποποιήσετε CSS άμεσα, έτσι ώστε αντί της προσθήκης

257
00:15:00,090 --> 00:15:02,510
μια κατηγορία που έχει κάποιες προκαθορισμένες ιδιότητες,

258
00:15:02,510 --> 00:15:08,120
μπορείτε απλά να προσθέσετε ό, τι CSS που θέλετε με τίποτα.

259
00:15:08,120 --> 00:15:10,350
Επιλέξτε σώμα Οπότε ας, η οποία είναι ολόκληρη την παρουσίαση,

260
00:15:10,350 --> 00:15:14,370
και το χρώμα είναι η ιδιότητα που καθορίζει ποια είναι τα χρώματα του κειμένου είναι.

261
00:15:14,370 --> 00:15:19,420
Αν το αλλάξετε σε κόκκινο, όλο το κείμενο στη σελίδα θα γυρίσει στο κόκκινο.

262
00:15:19,420 --> 00:15:26,310
Μπορούμε να κάνουμε κάτι, όπως το μπλε χρώμα του φόντου,

263
00:15:26,310 --> 00:15:30,680
εκεί πάμε? είναι όμορφη.

264
00:15:30,680 --> 00:15:33,840
Μπορείτε να κάνετε ό, τι θέλετε με αυτό.

265
00:15:33,840 --> 00:15:39,250
Χρησιμοποιώντας την ιδιότητα CSS, μπορείτε πραγματικά να τροποποιήσετε τον τρόπο τίποτα εξετάζει ανά πάσα στιγμή.

266
00:15:39,250 --> 00:15:41,630
Το επόμενο πράγμα είναι αποτελέσματα.

267
00:15:41,630 --> 00:15:45,710
Επιδράσεις είναι βασικά το ίδιο πράγμα με την τροποποίηση του CSS,

268
00:15:45,710 --> 00:15:48,870
αλλά παρέχουν πραγματικά κάποια επιπλέον κίνηση σε αυτό.

269
00:15:48,870 --> 00:15:53,380
Οπότε αντί να δείχνει ή κρύβει κάτι ή την αλλαγή του χρώματος,

270
00:15:53,380 --> 00:15:56,130
μπορείτε πραγματικά να είναι animated.

271
00:15:56,130 --> 00:16:00,760
Εδώ είναι η τεκμηρίωση, αν θέλετε να ρίξετε μια ματιά στο εκτενή τεκμηρίωση για αυτό.

272
00:16:00,760 --> 00:16:04,760
Αλλά Πάω να καλύψει τα κυριότερα.

273
00:16:04,760 --> 00:16:12,030
Υπάρχουν την παράσταση και τις ιδιότητες απόκρυψης.

274
00:16:12,030 --> 00:16:14,510
Εμφάνιση / απόκρυψη ID αντιστοιχεί στην πραγματικότητα σε όλο αυτό το πλαίσιο,

275
00:16:14,510 --> 00:16:18,190
Έτσι, αν το κρύβω, απλά θα εξαφανιστεί.

276
00:16:18,190 --> 00:16:24,210
Και μπορώ να το δείξει και πάλι, αν θέλω να έρθει πίσω.

277
00:16:24,210 --> 00:16:26,340
Και είναι πίσω. Είναι στην πραγματικότητα δεν εξαφανίζονται,

278
00:16:26,340 --> 00:16:30,670
Δεν είχα αφαιρέσει πραγματικά από τη σελίδα, εγώ που μόνο την ιδιότητα CSS ορατότητας σε κρυφή

279
00:16:30,670 --> 00:16:34,030
έτσι δεν μπορείτε να το δείτε πια.

280
00:16:34,030 --> 00:16:39,250
Υπάρχει, επίσης, διαφάνεια προς τα επάνω και σπρώξτε προς τα κάτω? Που σας επιτρέπει να έχουν αυτό το αποτέλεσμα.

281
00:16:39,250 --> 00:16:47,050
Είναι διαφάνειες μέχρι να εξαφανιστεί, και μετά εξαφανίζεται

282
00:16:47,050 --> 00:16:53,210
μπορείτε να μετακινηθείτε προς τα κάτω για να έρθει πίσω. Και τώρα είναι πίσω.

283
00:16:53,210 --> 00:16:57,650
Υπάρχει, επίσης, αυτό το εφέ σβησίματος, το οποίο - fade ID αντιστοιχεί σε αυτό το πλαίσιο.

284
00:16:57,650 --> 00:17:01,200
Αν μου το fade out, τότε θα σιγά-σιγά εξαφανίζονται.

285
00:17:01,200 --> 00:17:04,490
Μπορώ να εξασθενίσει επίσης σε, και θα επανέλθω.

286
00:17:04,490 --> 00:17:08,930
Μπορείτε επίσης να κάνετε fade να, η οποία είναι ειδικά για το ξεθώριασμα λειτουργία.

287
00:17:08,930 --> 00:17:12,589
Μπορείτε να το έχετε εξασθενίσει σε οποιαδήποτε συγκεκριμένη αδιαφάνεια που θέλετε.

288
00:17:12,589 --> 00:17:16,869
Έτσι, αν το σβήνουν σιγά-σιγά να .5, αυτό θα γίνει το μισό ορατό.

289
00:17:16,869 --> 00:17:22,630
Μπορώ να το κάνει να πάει στο .1, και πίσω στο 1 ώστε να καταστεί πλήρως ορατά και πάλι.

290
00:17:22,630 --> 00:17:24,760
Αυτό είναι ακριβώς μια άλλη κίνηση που μπορείτε να κάνετε.

291
00:17:24,760 --> 00:17:26,750
>> Υπάρχουν επίσης οι εναλλαγής αποτελέσματα.

292
00:17:26,750 --> 00:17:33,410
Έτσι, Πάω να επιλέξετε την εναλλαγή ταυτότητας, το οποίο αντιστοιχεί σε αυτό το πλαίσιο,

293
00:17:33,410 --> 00:17:38,970
και σε αυτό το div μπορείτε να καλέσετε εναλλαγή? αν είναι ορατό θα γίνει αόρατο,

294
00:17:38,970 --> 00:17:42,320
αν είναι αόρατο θα γίνει ορατό και πάλι.

295
00:17:42,320 --> 00:17:44,440
Γι 'αυτό και ονομάζεται απλά αυτή λειτουργία εναλλαγής δύο φορές? Η πρώτη ήταν

296
00:17:44,440 --> 00:17:48,380
το ίδιο πράγμα με απόκρυψη, η δεύτερη κλήση ήταν το ίδιο πράγμα όπως μια επίδειξη.

297
00:17:48,380 --> 00:17:53,510
Και μπορείτε επίσης να κάνετε αυτό με ένα fade εναλλαγή,

298
00:17:53,510 --> 00:17:55,730
που κάνει το ίδιο πράγμα, εκτός του ότι στην πραγματικότητα σβήνει.

299
00:17:55,730 --> 00:17:59,410
Και ίδιο πράγμα με το slide εναλλαγή.

300
00:17:59,410 --> 00:18:01,460
Υπάρχουν αλυσοδεμένα επιπτώσεις, καθώς, το οποίο σημαίνει

301
00:18:01,460 --> 00:18:05,520
αν επιλέξετε ένα στοιχείο και απλά να καλέσει ένα σωρό μεθόδους animation σε αυτό,

302
00:18:05,520 --> 00:18:07,400
αν θέλετε να fade out, στη συνέχεια σπρώξτε προς τα κάτω,

303
00:18:07,400 --> 00:18:11,040
και στη συνέχεια να κρύψει και στη συνέχεια σβήνουν μέσα, αυτό θα τους κάνει σε μια σειρά.

304
00:18:11,040 --> 00:18:24,920
Έτσι εξαφανίστηκε, επέστρεψε - για κάποιο λόγο, οι απόκρυψη δεν συνέβη.

305
00:18:24,920 --> 00:18:30,030
Ας το δοκιμάσουμε. Ναι, γι 'αυτό έσβησε και στη συνέχεια γλίστρησε μακριά.

306
00:18:30,030 --> 00:18:32,230
Και υπάρχουν πολλά περισσότερα. Μπορείτε να χρησιμοποιήσετε τη συνάρτηση κίνησης

307
00:18:32,230 --> 00:18:35,370
να δημιουργήσετε το δικό σας κινούμενα σχέδια, το οποίο είναι αρκετά περίπλοκη,

308
00:18:35,370 --> 00:18:38,790
αλλά σας παρέχει απεριόριστη επεκτασιμότητα.

309
00:18:38,790 --> 00:18:40,630
Μπορείτε να κάνετε οποιοδήποτε είδος της κίνησης που θέλετε.

310
00:18:40,630 --> 00:18:44,230
Μπορείτε επίσης να χρησιμοποιήσετε την ουρά να περιμένω στην ουρά πολλών κινήσεων σε μια στιγμή.

311
00:18:44,230 --> 00:18:47,340
Έτσι, εάν θέλετε κάτι να πετάξει σε όλη τη σελίδα,

312
00:18:47,340 --> 00:18:49,860
slide από την πάνω δεξιά προς τα αριστερά κάτω, μπορείτε να το κάνετε αυτό,

313
00:18:49,860 --> 00:18:55,240
και μόλις ένα σωρό ενέργειες πηγαίνοντας ένα μετά το άλλο.

314
00:18:55,240 --> 00:18:57,490
>> Το επόμενο πράγμα που θα πάμε να μιλήσουμε για τα γεγονότα.

315
00:18:57,490 --> 00:19:02,090
Εκδηλώσεις που επιτρέπουν - μέχρι σήμερα, έχουμε μόλις πληκτρολογώντας τα πράγματα στην κονσόλα

316
00:19:02,090 --> 00:19:04,870
και αυτός είναι ένας τρόπος για να συμβεί αυτό,

317
00:19:04,870 --> 00:19:08,020
αλλά σε μια πραγματική σελίδα, είστε δεν πρόκειται να είναι σε θέση να

318
00:19:08,020 --> 00:19:10,020
κάνει τα πράγματα τύπο χρήστη στην κονσόλα.

319
00:19:10,020 --> 00:19:12,050
Θέλετε τα πράγματα να συμβούν αυτόματα.

320
00:19:12,050 --> 00:19:18,060
Γι 'αυτό, θα πρέπει να χρησιμοποιήσετε τα γεγονότα που ενεργοποιούν σε κάποιο συγκεκριμένο γεγονός συμβαίνει.

321
00:19:18,060 --> 00:19:21,340
Μπορείτε να ελέγξετε την τεκμηρίωση για τα πλήρη στοιχεία.

322
00:19:21,340 --> 00:19:24,030
Ας δούμε λοιπόν. Θέλουμε να αποκρύψετε ή να εμφανίσετε το πλαίσιο,

323
00:19:24,030 --> 00:19:29,340
αλλά τώρα αυτό το κουμπί δεν κάνει τίποτα, γιατί δεν το εφαρμόζουν ακόμη.

324
00:19:29,340 --> 00:19:35,420
Πάω να πάει στην πραγματική σελίδα HTML.

325
00:19:35,420 --> 00:19:38,560
Εδώ είναι η διαφάνεια. Υπάρχει ένα div για τη διαφάνεια.

326
00:19:38,560 --> 00:19:41,230
Έχει την κατηγορία των διαφανειών.

327
00:19:41,230 --> 00:19:46,890
Υπάρχει το κείμενο. Τώρα, υπάρχει αυτό το πλαίσιο και το κουμπί κουτί.

328
00:19:46,890 --> 00:19:52,900
Πώς θα μπορούμε πραγματικά να κάνουν αυτό εξαφανίζονται;

329
00:19:52,900 --> 00:19:58,250
Πρώτα απ 'όλα, ας γράψει μια λειτουργία που κάνει το ID box εξαφανιστεί.

330
00:19:58,250 --> 00:20:01,820
Αυτή είναι η σύνταξη για funtion, ας το ονομάσουμε hideTheBox.

331
00:20:01,820 --> 00:20:06,130
Δεν παίρνει κανένα επιχείρημα, γιατί δεν υπάρχουν επιχειρήματα που πρέπει να ληφθούν.

332
00:20:06,130 --> 00:20:08,950
Μπορούμε να επιλέξετε το αναγνωριστικό κουτί.

333
00:20:08,950 --> 00:20:15,020
Έτσι, χρησιμοποιώντας το jQuery επιλογή, μπορούμε να επιλέξουμε ID box,

334
00:20:15,020 --> 00:20:17,700
και στη συνέχεια απλά να εξαφανιστεί.

335
00:20:17,700 --> 00:20:20,690
Ας κάνει fade out.

336
00:20:20,690 --> 00:20:27,390
Αν τρέξαμε αυτή τη λειτουργία στην πραγματική κονσόλα,

337
00:20:27,390 --> 00:20:33,380
θα μπορούσαμε να ορίσουμε αυτή τη λειτουργία? μπορούμε να ονομάσουμε hideTheBox, και λειτουργεί.

338
00:20:33,380 --> 00:20:36,650
Αλλά θέλουμε να συμβεί όταν το κουμπί είναι πραγματικά πιέζεται.

339
00:20:36,650 --> 00:20:40,950
Για να γίνει αυτό, θα πρέπει να χρησιμοποιήσετε μια εκδήλωση.

340
00:20:40,950 --> 00:20:45,500
Για να συνδέσετε ένα συμβάν σε κάποιο συγκεκριμένο κουμπί ή κάποια συμβαίνει δράσης,

341
00:20:45,500 --> 00:20:50,040
πρέπει να επιλέξετε το στοιχείο ότι το γεγονός θα προκαλέσει -

342
00:20:50,040 --> 00:20:52,650
ή ότι θα προκαλέσει την εκδήλωση, συγγνώμη.

343
00:20:52,650 --> 00:20:57,220
>> Έτσι, πρώτα απ 'όλα, ας επιλέξουμε το αναγνωριστικό κουμπί box

344
00:20:57,220 --> 00:20:59,610
γιατί αυτό είναι το κουμπί, και τώρα, για το εν λόγω κουμπί,

345
00:20:59,610 --> 00:21:02,750
θέλουμε να δημιουργήσουμε μια κινούμενη εικόνα, όταν γίνεται κλικ.

346
00:21:02,750 --> 00:21:05,040
Έτσι υπάρχει αυτή η λειτουργία κλικ.

347
00:21:05,040 --> 00:21:08,470
Σας επιτρέπει να δεσμεύσει άλλη λειτουργία σε αυτό.

348
00:21:08,470 --> 00:21:12,320
Αυτή η συνάρτηση παίρνει μια άλλη λειτουργία ως επιχείρημα

349
00:21:12,320 --> 00:21:14,310
μπορούμε να περάσουμε στη λειτουργία hideTheBox,

350
00:21:14,310 --> 00:21:20,950
και όποτε πατηθεί αυτό το κουμπί, η λειτουργία θα εκτελέσει αυτόματα.

351
00:21:20,950 --> 00:21:24,850
Έτσι, αυτό θα λειτουργήσει εάν θα σώσει αυτό, θα ανανεώσετε,

352
00:21:24,850 --> 00:21:33,460
- από ένα δευτερόλεπτο, λυπάμαι.

353
00:21:33,460 --> 00:21:44,770
Επιτρέψτε μου να το διορθώσω αυτό πολύ γρήγορα.

354
00:21:44,770 --> 00:21:50,680
Εντάξει. Εκεί πάμε. Έτσι τώρα το πλαίσιο εξαφανίζεται όταν πατάμε το κουμπί.

355
00:21:50,680 --> 00:21:55,470
Μπορούμε επίσης να αλλάξετε αυτό ακριβώς fadeToggle,

356
00:21:55,470 --> 00:22:00,020
αλλάξετε μόνο για να αποκρύψετε ή να εμφανίσετε το πλαίσιο,

357
00:22:00,020 --> 00:22:03,850
και αυτό θα λειτουργήσει πάρα πολύ, αν ανανεώσετε.

358
00:22:03,850 --> 00:22:08,550
Μπορούμε να το κρύψει, μπορούμε να δείξουμε επίσης, και ότι θα συνεχίσει να εργάζεται.

359
00:22:08,550 --> 00:22:12,210
Ένα άλλο πράγμα που μπορούμε να κάνουμε είναι, εμείς στην πραγματικότητα, δεν χρειάζεται να ορίσετε αυτή τη λειτουργία hideTheBox

360
00:22:12,210 --> 00:22:15,050
πριν καλούμε τη συνάρτηση κλικ.

361
00:22:15,050 --> 00:22:17,640
Έτσι, αντί να καθορίζουν τη λειτουργία και καλώντας hideTheBox,

362
00:22:17,640 --> 00:22:20,310
είμαστε μόνο πρόκειται να την αποκαλούν, αν αυτό το πράγμα έχει πατηθεί.

363
00:22:20,310 --> 00:22:22,310
Έτσι μπορούμε να ορίσουμε ανώνυμα εδώ,

364
00:22:22,310 --> 00:22:25,070
το οποίο είναι ένα χαρακτηριστικό που έχει JavaScript.

365
00:22:25,070 --> 00:22:29,720
Μπορείτε να ορίσετε μια λειτουργία? Κανονικά, θα λέγαμε hideTheBox λειτουργία

366
00:22:29,720 --> 00:22:34,490
με επιχειρήματα, αλλά αντ 'αυτού, μπορούμε απλά να πούμε λειτουργήσει κανένα επιχείρημα,

367
00:22:34,490 --> 00:22:36,870
ξεκινήσει το άγκιστρο για να καθορίσει τη λειτουργία,

368
00:22:36,870 --> 00:22:40,780
κλείσει αυτό το στήριγμα σγουρά, και στη συνέχεια να ορίσετε τη λειτουργία του εδώ,

369
00:22:40,780 --> 00:22:45,130
εντός του πρώτου παρένθεση και το τελευταίο παρένθεση

370
00:22:45,130 --> 00:22:47,860
που αντιστοιχούν στα επιχειρήματα της λειτουργίας κλικ.

371
00:22:47,860 --> 00:22:53,320
Έτσι είμαστε περνώντας σε αυτή τη λειτουργία, μπορούμε να αντιγράψουμε αυτήν τη γραμμή κώδικα εδώ,

372
00:22:53,320 --> 00:22:55,450
και ότι θα κάνει ακριβώς το ίδιο πράγμα.

373
00:22:55,450 --> 00:22:57,290
Και τώρα, δεν έχουμε αυτό το τυχαίο λειτουργία fadeTheBox

374
00:22:57,290 --> 00:22:59,960
που κάθεται γύρω για κανέναν προφανή λόγο.

375
00:22:59,960 --> 00:23:02,070
Η λειτουργία ορίστηκε ανώνυμα, δεν έχει όνομα.

376
00:23:02,070 --> 00:23:08,060
Το μόνο που θα εκτελείται όταν κάνουμε κλικ στο κουμπί κουτί.

377
00:23:08,060 --> 00:23:12,180
Έτσι, δροσιστικό για μια ακόμη φορά, για μια ακόμη φορά, και μπορείτε να δείτε ότι εξακολουθεί να λειτουργεί.

378
00:23:12,180 --> 00:23:16,700
Και αυτό είναι το πώς να δημιουργήσετε γεγονότα.

379
00:23:16,700 --> 00:23:19,190
>> Υπάρχουν πολλές διαφορετικές εκδηλώσεις που μπορούμε να χρησιμοποιήσουμε.

380
00:23:19,190 --> 00:23:23,540
Πάω να στραφούν πίσω στην χρησιμοποιώντας την κονσόλα για να σας δείξει ακριβώς πώς αυτές οι εργασίες.

381
00:23:23,540 --> 00:23:28,210
Τα αναγνωριστικά για κάθε ένα από αυτά αντιστοιχούν στο κάθε κουτί.

382
00:23:28,210 --> 00:23:33,020
Έτσι, η θέση αυτή είναι κλικ ID, αυτό είναι το κλειδί ταυτότητας, και αυτό είναι το αναγνωριστικό του ποντικιού.

383
00:23:33,020 --> 00:23:36,120
Ένα ακόμα πράγμα είναι ότι υπάρχει αυτή η λειτουργία δράση? Αντί πληκτρολογώντας έξω κάθε φορά,

384
00:23:36,120 --> 00:23:41,610
Εγώ πραγματικά πήγε μπροστά και ορίζεται αυτή τη λειτουργία δράσης εδώ κάτω.

385
00:23:41,610 --> 00:23:46,860
Κάνει το ίδιο πράγμα με τη λειτουργία hideTheBox.

386
00:23:46,860 --> 00:23:51,340
Παίρνει αυτό το πλαίσιο και είτε να σβήνει ή να εξασθενίζει αυτό in

387
00:23:51,340 --> 00:23:54,110
Και γι 'αυτό είμαστε σε θέση να το χρησιμοποιούν εδώ.

388
00:23:54,110 --> 00:24:00,350
Έτσι, αν κάνουμε κλικ σε αυτό το ID κλικ, θέλουμε να κάνουμε το πλαίσιο εξαφανιστεί ή να επανεμφανίζονται.

389
00:24:00,350 --> 00:24:03,610
Είναι το ίδιο πράγμα με το κουμπί που είχαμε στην τελευταία διαφάνεια.

390
00:24:03,610 --> 00:24:07,450
Τώρα, μετά λέμε ότι, μπορούμε να κάνετε κλικ σε αυτό και το κουτί θα εξαφανιστούν,

391
00:24:07,450 --> 00:24:10,160
στη συνέχεια, κάντε κλικ πάνω του ξανά και το κουτί θα εμφανιστεί ξανά.

392
00:24:10,160 --> 00:24:12,480
Αυτό είναι αρκετά απλή. Κάντε διπλό κλικ κάνει το ίδιο πράγμα,

393
00:24:12,480 --> 00:24:15,660
εκτός του ότι απαιτεί ένα διπλό κλικ.

394
00:24:15,660 --> 00:24:19,030
Έτσι, αν κάνετε κλικ πάνω του μία φορά και κάντε κλικ σε αυτό και πάλι τίποτα δεν θα συμβεί,

395
00:24:19,030 --> 00:24:21,140
αλλά αν κάνετε διπλό κλικ γρήγορα, αυτό θα εξαφανιστεί.

396
00:24:21,140 --> 00:24:23,310
Αν κάνετε διπλό κλικ πάλι, θα επανέλθω.

397
00:24:23,310 --> 00:24:25,250
Έτσι ώστε να είναι αρκετά απλή.

398
00:24:25,250 --> 00:24:31,170
Είσοδος πληκτρολογίου είναι κάπως περίεργο? Δεν νομίζω ότι λειτουργεί πραγματικά σε αυτό το παράδειγμα

399
00:24:31,170 --> 00:24:37,670
επειδή το κλειδί κάτω, βασικά και πατήστε το πλήκτρο και άλλων βασικών δράσεων

400
00:24:37,670 --> 00:24:47,190
ενεργοποιήσετε No Matter What στοιχείο που την συνδέουν με.

401
00:24:47,190 --> 00:24:51,410
Για παράδειγμα, ακόμα και αν δεσμεύεται κλειδί κάτω από το σώμα ή κάτι άλλο εντελώς,

402
00:24:51,410 --> 00:24:55,950
τότε θα ενεργοποιήσει ακόμα δεν έχει σημασία - δεν είναι συγκεκριμένες.

403
00:24:55,950 --> 00:25:00,190
Δεν χρειάζεται να κάνετε κλικ σε αυτό και πατήστε ένα πλήκτρο για να κάνει τίποτα εξαφανιστούν.

404
00:25:00,190 --> 00:25:04,470
Θα πρέπει να ενεργοποιηθεί ανεξάρτητα από το τι στοιχείου είμαι σήμερα in

405
00:25:04,470 --> 00:25:06,880
Έτσι, αυτά δεν λειτουργούν πραγματικά σε αυτό το παράδειγμα

406
00:25:06,880 --> 00:25:13,180
γιατί δεν με αναγνωρίζει ως την είσοδο είσοδο στο div εισόδου πληκτρολογίου.

407
00:25:13,180 --> 00:25:15,740
>> Αλλά αν εξετάσουμε τις ενέργειες του ποντικιού,

408
00:25:15,740 --> 00:25:19,620
το πρώτο είναι αιωρούνται, και μπορεί να κάνει μερικά από αυτό που χρησιμοποιούν CSS.

409
00:25:19,620 --> 00:25:24,280
Εάν χρησιμοποιείτε CSS, μπορείτε να δημιουργήσετε, έτσι ώστε αν αιωρούνται πάνω από κάτι,

410
00:25:24,280 --> 00:25:28,940
τότε το στυλ αλλαγές του.

411
00:25:28,940 --> 00:25:32,170
Αλλά χρησιμοποιώντας jQuery μπορείτε να αλλάξετε το στυλ των άλλων, καθώς και.

412
00:25:32,170 --> 00:25:37,120
Έτσι, για παράδειγμα, θα πάμε να καλέσει τα κατάλληλα μέτρα αν αιωρείται πάνω από αυτό το div.

413
00:25:37,120 --> 00:25:39,660
Αυτό σημαίνει ότι αν έχουμε αιωρείται πάνω από αυτό, τότε το πλαίσιο θα εξαφανιστούν.

414
00:25:39,660 --> 00:25:42,430
Αν απομακρυνθούμε από αυτό, το πλαίσιο θα επανεμφανιστεί.

415
00:25:42,430 --> 00:25:45,090
Αν λέμε αυτό και να αιωρείται πάνω από αυτό, το κουτί δεν υποχωρήσει,

416
00:25:45,090 --> 00:25:47,050
και μόλις απομακρυνόμαστε, έρχεται πίσω.

417
00:25:47,050 --> 00:25:49,750
Αν καλέσετε τη συνάρτηση αυτή αιωρείται στην αναγνώριση του ποντικιού,

418
00:25:49,750 --> 00:25:54,380
που αντιστοιχεί σε αυτό το πλαίσιο, στη συνέχεια, αν αιωρείται πάνω από το κουτί,

419
00:25:54,380 --> 00:26:00,440
τότε το πλαίσιο θα είναι πράγματι εξαφανιστεί - είναι να είναι funky τώρα, αλλά -

420
00:26:00,440 --> 00:26:06,310
αν ξεφύγουμε από αυτό, θα επανεμφανιστεί. Αυτή τη στιγμή είναι πίσω για κάποιο λόγο.

421
00:26:06,310 --> 00:26:12,720
Το ποντίκι εισέλθουν και λειτουργίες κίνηση του ποντικιού είναι κάπως παρόμοια, αλλά ελαφρώς διαφορετική.

422
00:26:12,720 --> 00:26:16,470
Mouse εισάγετε Ενεργοποιείται μόνο όταν το ποντίκι μπαίνει στο κουτί, όπως αναμενόταν.

423
00:26:16,470 --> 00:26:19,210
Έτσι, αν προχωρήσουμε σε αυτό, θα εξαφανιστούν.

424
00:26:19,210 --> 00:26:23,210
Αλλά δεν θα εμφανιστεί ξανά όταν κινείστε μακριά? Θα πρέπει να μετακινηθείτε προς τα πίσω πάνω σ 'αυτό για να έρθει πίσω.

425
00:26:23,210 --> 00:26:25,590
Υπάρχει επίσης η λειτουργία κίνηση του ποντικιού, η οποία θα ενεργοποιήσει

426
00:26:25,590 --> 00:26:29,300
κάθε φορά που το ποντίκι είναι ακόμη παρούσα στο κουτί.

427
00:26:29,300 --> 00:26:32,430
Γι 'αυτό θα πρέπει ακριβώς να συνεχίσουμε να προχωράμε, το ξεθώριασμα μέσα και έξω.

428
00:26:32,430 --> 00:26:35,660
Και είναι πραγματικά υλοτομία - φαίνεται σαν να είναι απλά ξεθώριασμα μέσα και έξω,

429
00:26:35,660 --> 00:26:39,140
αλλά είναι καταγραφή στην πραγματικότητα πολύ περισσότερες δράσεις από αυτό,

430
00:26:39,140 --> 00:26:43,550
Έτσι, όταν απομακρύνεστε αυτό θα συνεχίσουμε, γιατί καταγράφεται σαν χιλιάδες από αυτούς.

431
00:26:43,550 --> 00:26:46,620
Ίσως όχι χίλια. Ίσως πέντε.

432
00:26:46,620 --> 00:26:50,200
Καταγράφει περισσότερο από αυτό.

433
00:26:50,200 --> 00:26:53,280
Το σημείο είναι, όλες οι ενέργειες του ποντικιού, υπάρχουν πολλά από αυτά.

434
00:26:53,280 --> 00:26:55,480
Μπορείτε να διαβάσετε σχετικά με τις άλλες, αλλά είναι όλα λίγο διαφορετικά,

435
00:26:55,480 --> 00:26:57,700
και μπορείτε να διαλέξετε οποιονδήποτε χρειάζεστε

436
00:26:57,700 --> 00:27:02,130
για οποιοδήποτε συγκεκριμένο σκοπό που προσπαθείτε να κάνετε.

437
00:27:02,130 --> 00:27:05,060
>> Το επόμενο πράγμα Πάω να μιλήσω είναι AJAX.

438
00:27:05,060 --> 00:27:09,340
AJAX, ξέρω ότι δεν καλύπτει JavaScript σε όσο βάθος το τρέχον έτος,

439
00:27:09,340 --> 00:27:11,770
έτσι είμαι πρόκειται να μιλήσω για AJAX σε γενικές γραμμές για ένα λεπτό.

440
00:27:11,770 --> 00:27:15,210
AJAX σημαίνει Asynchronous JavaScript και XML.

441
00:27:15,210 --> 00:27:19,030
Είναι, βασικά, για παράδειγμα, όταν είστε στο Facebook και σπρώχνει μια ειδοποίηση,

442
00:27:19,030 --> 00:27:23,060
αυτό συμβαίνει επειδή AJAX τρέχει στον web browser σας.

443
00:27:23,060 --> 00:27:25,800
Κάθε δύο δευτερόλεπτα web browser σας είναι πραγματικά

444
00:27:25,800 --> 00:27:29,420
Θα servers του Facebook, ζητώντας τους, έχετε κάτι νέο για μένα,

445
00:27:29,420 --> 00:27:31,980
και στη συνέχεια έρχεται πίσω σε σας.

446
00:27:31,980 --> 00:27:36,320
Αυτό σας επιτρέπει να στείλετε αιτήσεις σε ένα διακομιστή

447
00:27:36,320 --> 00:27:38,660
χωρίς να χρειάζεται να φορτώσει τη σελίδα.

448
00:27:38,660 --> 00:27:42,040
Έτσι, κατά κανόνα, εάν είστε χρησιμοποιώντας μόνο PHP και μια βάση δεδομένων,

449
00:27:42,040 --> 00:27:45,480
θα πρέπει να ανανεώσετε τη σελίδα για να μπορέσετε να πάρετε νέες πληροφορίες από το διακομιστή.

450
00:27:45,480 --> 00:27:48,770
Αλλά χρησιμοποιώντας AJAX, μπορείτε να τραβήξετε για το εν λόγω νέα στοιχεία συνεχώς,

451
00:27:48,770 --> 00:27:52,250
ή να τραβήξει γι 'αυτό, όταν κάνετε κλικ σε ένα κουμπί ή κάτι τέτοιο.

452
00:27:52,250 --> 00:27:56,140
Έτσι, αυτό μας επιτρέπει να στείλετε αιτήσεις χωρίς επαναφόρτωση της σελίδας,

453
00:27:56,140 --> 00:27:58,130
και μπορούμε να χρησιμοποιήσουμε είτε GET ή POST αιτήματα.

454
00:27:58,130 --> 00:28:05,370
>> GET αιτήματα είναι, για παράδειγμα, αν στο στο Google.com

455
00:28:05,370 --> 00:28:10,900
και να κάνουμε q = test. Αυτό τους δίνει ένα ερώτημα δοκιμή.

456
00:28:10,900 --> 00:28:15,890
Και αυτό είναι ένα GET αίτημα, γιατί είναι πέρασμα σε αυτές τις παραμέτρους στο URL ίδια.

457
00:28:15,890 --> 00:28:19,250
Η αίτηση POST είναι σαν να είστε αποστολή τους μέσω ταχυδρομείου.

458
00:28:19,250 --> 00:28:22,500
Είναι σαν να το βάλετε σε ένα έγγραφο και να το μεταφέρει μακριά για αυτούς,

459
00:28:22,500 --> 00:28:25,140
αλλά δεν δείτε πραγματικά τα περιεχόμενα. Δεν είναι ορατό στη διεύθυνση URL.

460
00:28:25,140 --> 00:28:31,040
Δεν μπορείτε να πληκτρολογήσετε άμεσα σε? Θα πρέπει να το στείλει σχεδόν κρυφά.

461
00:28:31,040 --> 00:28:33,880
Είναι σε μια θέση.

462
00:28:33,880 --> 00:28:38,660
Αλλά χρησιμοποιώντας jQuery, μπορείτε να κάνετε GET και POST αιτήματα

463
00:28:38,660 --> 00:28:42,740
πολύ πιο εύκολα από ό, τι κανονικά θα μπορούσε χρησιμοποιώντας απλά JavaScript.

464
00:28:42,740 --> 00:28:50,140
Μπορείτε να υποβάλετε ερωτήματα χρησιμοποιώντας APIs αιτήσεις GET, και μπορείτε επίσης να ελέγξετε για τις πληροφορίες σύνδεσης.

465
00:28:50,140 --> 00:28:54,400
Στην επόμενη σελίδα, που δημιουργήθηκε αυτό, το οποίο ρωτά, "Τι είναι για το γεύμα;"

466
00:28:54,400 --> 00:28:58,230
χρησιμοποιώντας το Harvard τροφίμων API, οπότε ας τραβήξει το επάνω.

467
00:28:58,230 --> 00:29:01,840
Αυτό είναι μόνο ένα παράδειγμα για το πώς μπορείτε να χρησιμοποιήσετε jQuery για να κάνει μια αίτηση GET σε ένα API

468
00:29:01,840 --> 00:29:04,200
και να πάρετε πληροφορίες πίσω από αυτό.

469
00:29:04,200 --> 00:29:07,090
Έτσι, θέλουμε να δούμε το μενού για σήμερα,

470
00:29:07,090 --> 00:29:10,560
και θέλουμε να δούμε τι είναι για το μεσημεριανό γεύμα.

471
00:29:10,560 --> 00:29:16,500
Εδώ είναι η διεύθυνση URL για να δημιουργήσετε μια αίτηση GET στο jQuery.

472
00:29:16,500 --> 00:29:18,600
χρησιμοποιείτε το $. πάρει λειτουργία.

473
00:29:18,600 --> 00:29:22,290
Το πρώτο επιχείρημα είναι η διεύθυνση URL, έτσι ακριβώς τι είστε επερώτηση.

474
00:29:22,290 --> 00:29:27,200
Στη συνέχεια, το επόμενο επιχείρημα είναι μια λειτουργία που εκτελείται όταν η αίτηση GET είναι πλήρης.

475
00:29:27,200 --> 00:29:29,980
Έτσι, μπορείτε να στείλετε από κάποια αίτηση στο διακομιστή, περιμένετε να έρθει πίσω.

476
00:29:29,980 --> 00:29:33,770
Όταν έρχεται πίσω, θα πάμε να λάβει κάποια μέτρα με τα δεδομένα που είναι πίσω από το διακομιστή.

477
00:29:33,770 --> 00:29:37,520
Ας πάμε μπροστά και κωδικοποίηση αυτή, καθώς και.

478
00:29:37,520 --> 00:29:42,110
Δεν είχα κωδικό αυτό, είτε, στο σκοπό.

479
00:29:42,110 --> 00:29:46,660
Εδώ είναι το Todo. Πρώτα απ 'όλα, ας χρησιμοποιήσουμε το γεγονός της δέσμευσης

480
00:29:46,660 --> 00:29:50,820
έτσι ώστε όταν πατηθεί αυτό το κουμπί, θα στείλει μακριά μια αίτηση GET.

481
00:29:50,820 --> 00:29:53,410
Και όταν η GET επιστρέφει αίτημα με ορισμένα στοιχεία,

482
00:29:53,410 --> 00:29:57,290
θα πάμε να το γράψετε σε αυτές τις πληροφορίες div ID γεύμα.

483
00:29:57,290 --> 00:30:02,860
Πρώτα απ 'όλα, ας επιλέξουμε το αναγνωριστικό κουμπί τροφίμων.

484
00:30:02,860 --> 00:30:07,320
Όταν κάποιος κάνει κλικ εκεί, θέλουμε να κάνουμε κάτι.

485
00:30:07,320 --> 00:30:11,930
Ας κάνουν ένα ανώνυμο fuction, όπως και πριν.

486
00:30:11,930 --> 00:30:15,550
Μπορεί να τυλίξτε τα άγκιστρα,

487
00:30:15,550 --> 00:30:18,530
και όταν πατηθεί αυτό το κουμπί, θέλουμε να στείλουμε μια αίτηση GET

488
00:30:18,530 --> 00:30:20,750
για να ελέγξει τι είναι για το μεσημεριανό γεύμα.

489
00:30:20,750 --> 00:30:24,970
Για να γίνει αυτό, μπορούμε απλά να πληκτρολογήσετε $. Πάρει.

490
00:30:24,970 --> 00:30:28,850
Αυτό είναι ένα jQuery λειτουργία, χρησιμοποιώντας το σύμβολο του δολαρίου.

491
00:30:28,850 --> 00:30:31,430
Παίρνει ένα ζευγάρι των επιχειρημάτων. Η πρώτη είναι η διεύθυνση URL,

492
00:30:31,430 --> 00:30:34,450
το δεύτερο είναι η λειτουργία επανάκλησης, η λειτουργία που λέγεται

493
00:30:34,450 --> 00:30:37,740
όταν η κλήση επιστρέφει στην πραγματικότητα.

494
00:30:37,740 --> 00:30:39,890
Ας οικοδομήσουμε απλά το URL πρώτα.

495
00:30:39,890 --> 00:30:44,650
Μπορούμε να το πάρετε από το API ότι ο Δαβίδ έγραψε επάνω.

496
00:30:44,650 --> 00:30:51,360
Πηγαίνοντας εδώ, μπορούμε να δούμε ότι είναι food.cs50.net/api/1.3/menus,

497
00:30:51,360 --> 00:30:54,140
και στη συνέχεια απλά να περάσει τα ονόματα των παραμέτρων που θα θέλατε.

498
00:30:54,140 --> 00:30:57,760
Έτσι, η παράμετρος 1 είναι η τιμή 1.

499
00:30:57,760 --> 00:31:00,910
Μοιάζει πρότυπο, την ημερομηνία έναρξης, προεπιλογές έως σήμερα

500
00:31:00,910 --> 00:31:03,110
αν δεν σημειώνεται τίποτα, και την ημερομηνία λήξης και προεπιλογές

501
00:31:03,910 --> 00:31:05,930
έως σήμερα, αν δεν σημειώνεται τίποτα.

502
00:31:05,930 --> 00:31:10,790
Αυτό είναι ό, τι θέλουμε. Θέλουμε να πάρετε μόνο τις πληροφορίες για σήμερα.

503
00:31:10,790 --> 00:31:12,950
>> Θέλουμε η μορφή να είναι σε JSON.

504
00:31:12,950 --> 00:31:15,570
Αυτό είναι μόνο αυθαίρετο? Μπορείτε να χρησιμοποιήσετε οποιαδήποτε μορφή που θέλετε.

505
00:31:15,570 --> 00:31:18,950
Μπορείτε να χρησιμοποιήσετε CSV, αλλά JSON είναι JavaScript Object Notation.

506
00:31:18,950 --> 00:31:24,150
Είναι πολύ εύκολο για JavaScript για να καταλάβετε τι σημαίνει αυτό,

507
00:31:24,150 --> 00:31:27,110
και μπορούμε να εκτυπώσετε πιο εύκολα με αυτόν τον τρόπο.

508
00:31:27,110 --> 00:31:30,490
Οπότε ας το ζητήσει JSON, και το μεσημεριανό γεύμα αίτημα ας.

509
00:31:30,490 --> 00:31:37,660
Έτσι γεύμα = γεύμα. Ακριβώς για να γράψω αυτό το URL, πάμε πίσω εδώ.

510
00:31:37,660 --> 00:31:41,290
Υπάρχει μενού. Η πρώτη παράμετρος είναι η έξοδος = JSON

511
00:31:41,290 --> 00:31:44,640
γιατί αυτό είναι που θέλουμε, και ο διαχωρισμός των παραμέτρων με ένα «και».

512
00:31:44,640 --> 00:31:48,940
Η δεύτερη παράμετρος είναι - δεν θυμάμαι.

513
00:31:48,940 --> 00:31:52,170
Γεύμα. Και θέλουμε μεσημεριανό γεύμα =.

514
00:31:52,170 --> 00:31:57,390
Μπορείτε να δοκιμάσετε αυτό το URL, πληκτρολογώντας στον browser σας και να πηγαίνει σε αυτό.

515
00:31:57,390 --> 00:32:03,120
Θα σας δώσει κάποιο αποτέλεσμα. Είναι απλά ένα σωρό πράγματα που είναι για το μεσημεριανό γεύμα.

516
00:32:03,120 --> 00:32:10,410
Είναι σε αυτό το άσχημο μορφή. Θέλουμε να το εκτυπώσετε στην σελίδα μας σε μια καλύτερη μορφή.

517
00:32:10,410 --> 00:32:12,580
Έτσι, η διεύθυνση URL είναι σωστή, τώρα απλά πρέπει να γράψει μια λειτουργία

518
00:32:12,580 --> 00:32:18,300
να καλέσει πίσω, όταν η αίτηση είναι επιτυχής.

519
00:32:18,300 --> 00:32:20,430
Αυτή η λειτουργία θα λάβει πράγματι ένα επιχείρημα. Θα είναι τα δεδομένα.

520
00:32:20,430 --> 00:32:25,650
Τα δεδομένα είναι ό, τι έρχεται πίσω από την αίτηση GET μετά την αίτηση GET γίνεται.

521
00:32:25,650 --> 00:32:28,860
Μπορούμε να κάνουμε τα άγκιστρα? Εδώ γράφουμε την ανώνυμη συνάρτηση

522
00:32:28,860 --> 00:32:33,900
που εκτελεί, με τα δεδομένα αυτά όταν παίρνουμε τις πληροφορίες πίσω.

523
00:32:33,900 --> 00:32:37,840
Έτσι, τα δεδομένα, όταν πληκτρολογούνται σε αυτό το URL,

524
00:32:37,840 --> 00:32:41,540
Αυτό είναι ό, τι τα δεδομένα που πρόκειται να μοιάσει. Είναι πρόκειται να είναι αυτό το τεράστιο string.

525
00:32:41,540 --> 00:32:48,610
Αλλά το καλό πράγμα είναι, JavaScript μπορεί να αναλύσει με τη χρήση του JSON.parse λειτουργία.

526
00:32:48,610 --> 00:32:54,950
Ας δημιουργήσουμε μια νέα μεταβλητή που ονομάζεται αναλύσει τα δεδομένα.

527
00:32:54,950 --> 00:32:57,060
Και να αναλύσει τα δεδομένα είναι μια σειρά από αντικείμενα.

528
00:32:57,060 --> 00:33:04,200
Κάθε αντικείμενο περιέχει πληροφορίες όπως - καλά, ας ρίξουμε μια ματιά.

529
00:33:04,200 --> 00:33:08,980
Έχει μια ημερομηνία, ένα γεύμα, κατηγορία, συνταγή, όλα αυτά τα άλλα πράγματα.

530
00:33:08,980 --> 00:33:10,860
Οπότε ας εκτυπώσετε το όνομα για κάθε μία.

531
00:33:10,860 --> 00:33:13,790
Ας επαναλάβει σε όλο το φάσμα των πράγματα που θα πάρετε πίσω από αυτό,

532
00:33:13,790 --> 00:33:17,570
και απλά να εκτυπώσετε το κάθε ένα - εκτυπώσετε το όνομα του καθενός.

533
00:33:17,570 --> 00:33:22,670
Αυτό είναι ένα για το βρόχο.

534
00:33:22,670 --> 00:33:26,030
>> JavaScript έχει αυτό το χρήσιμο σύνταξη, όπου μπορείτε να δημιουργήσετε μια μεταβλητή και θηλιά πάνω από έναν πίνακα,

535
00:33:26,030 --> 00:33:30,150
και var i είναι μόνο η iterator, έτσι ώστε αντί να έχουν να κάνουν var i = 0,

536
00:33:30,150 --> 00:33:40,290
Θα ήταν λιγότερο από το μήκος, i + +, μπορείτε απλά να κάνετε var i στο αναλυθεί τα δεδομένα.

537
00:33:40,290 --> 00:33:47,060
Σε αυτό το παράδειγμα, αναλυμένη δεδομένων (i) θα αντιστοιχεί στο τρέχον στοιχείο

538
00:33:47,060 --> 00:33:49,850
της συστοιχίας, το πραγματικό αντικείμενο.

539
00:33:49,850 --> 00:33:51,720
Και θέλουμε να πάρει το όνομα από αυτό.

540
00:33:51,720 --> 00:33:54,170
Οπότε ας κάνουμε το όνομα.

541
00:33:54,170 --> 00:33:57,000
Και το τελευταίο πράγμα είναι, θα πάμε να έχουν κάποια jQuery και πάλι.

542
00:33:57,000 --> 00:34:02,660
Στην πραγματικότητα το προσθέσετε στο div, αυτό div πληροφορίες γεύμα που είναι άδειο.

543
00:34:02,660 --> 00:34:05,430
Έτσι, ας επιλέξουμε αυτό.

544
00:34:05,430 --> 00:34:13,870
Θα χρησιμοποιήσουμε jQuery και επιλέξτε Πληροφορίες γεύμα ID div, ή το γεύμα ID πληροφορίες, συγγνώμη.

545
00:34:13,870 --> 00:34:16,580
Θέλουμε να επισυνάψει σε αυτό.

546
00:34:16,580 --> 00:34:21,030
Αν κάναμε δοκιμή, για παράδειγμα, θα ήταν απλώς να αντικαταστήσετε κάθε φορά.

547
00:34:21,030 --> 00:34:29,190
Έτσι μπορούμε να προσαρτήσει μόνο αυτό.

548
00:34:29,190 --> 00:34:31,889
Το τρέχον στοιχείο του πίνακα, θα πάρει το όνομα από αυτό,

549
00:34:31,889 --> 00:34:38,159
και θα το προσθέσετε στο τέλος της επικοινωνίας div ID γεύμα.

550
00:34:38,159 --> 00:34:40,120
Και τότε ακριβώς για να φανεί καθαρότερα,

551
00:34:40,120 --> 00:34:51,550
θα επισυνάπτει επίσης μια αλλαγή γραμμής, έτσι δεν είναι όλα σε μια γραμμή.

552
00:34:51,550 --> 00:34:55,280
Έτσι, αν όλα πάνε καλά, αυτό θα πρέπει να είναι καλό να -

553
00:34:55,280 --> 00:34:57,220
πρώτα απ 'όλα, όταν πατηθεί αυτό το κουμπί,

554
00:34:57,220 --> 00:35:00,070
θα στείλει μακριά μια αίτηση GET σε αυτό το URL.

555
00:35:00,070 --> 00:35:02,500
Όταν τα δεδομένα που έρχεται πίσω από αυτό, θα το αναλύσει,

556
00:35:02,500 --> 00:35:06,950
να το μετατρέψει σε JSON, βρόχο πάνω από το σύνολο της διάταξης που αντιπροσωπεύει τα δεδομένα,

557
00:35:06,950 --> 00:35:10,310
και στη συνέχεια να προσθέσετε το όνομα και μια αλλαγή γραμμής

558
00:35:10,310 --> 00:35:16,500
σε κάθε γραμμή σε αυτό το ID info γεύμα το οποίο στο παρελθόν ήταν άδειο.

559
00:35:16,500 --> 00:35:18,910
Έτσι, πηγαίνει πίσω σε αυτή τη σελίδα, θα ανανεώσουμε,

560
00:35:18,910 --> 00:35:23,690
κλικ, να μάθετε - δεν λειτουργεί. Αυτό είναι ατυχές.

561
00:35:23,690 --> 00:35:25,830
Και αυτό είναι όπου debugging μπαίνει

562
00:35:25,830 --> 00:35:30,070
Index.html, γραμμή 1.

563
00:35:30,070 --> 00:35:57,210
Ενδιαφέρον.

564
00:35:57,210 --> 00:35:59,720
Εντάξει, λοιπόν, αντί να ξοδεύουν το χρόνο τους κάνοντας αυτό, είμαι απλώς πρόκειται να

565
00:35:59,720 --> 00:36:07,070
τραβήξτε το κάνει αρχείο που έχω, η οποία είναι η ολοκληρωμένη έκδοση.

566
00:36:07,070 --> 00:36:13,710
Δεν είμαι σίγουρος ποια είναι η διαφορά, αλλά μπορούμε να ανοίξουμε ακριβώς αυτό επάνω αντ 'αυτού.

567
00:36:13,710 --> 00:36:19,740
Και πάμε στο AJAX, και αυτό πρέπει να λειτουργούν σωστά.

568
00:36:19,740 --> 00:36:21,730
Αυτό είναι ό, τι ήταν για το μεσημεριανό γεύμα σήμερα,

569
00:36:21,730 --> 00:36:24,870
σε καμία ιδιαίτερη διαταγή, με εισαγωγικά γύρω από αυτό, έτσι δεν είναι η ομορφότερη.

570
00:36:24,870 --> 00:36:27,090
Αλλά, προφανώς, αν το έκαναν αυτό για ένα τελικό σχέδιο,

571
00:36:27,090 --> 00:36:30,120
θα να φανεί καλύτερα.

572
00:36:30,120 --> 00:36:32,530
Αλλά αυτό είναι μόνο ένα απλό παράδειγμα για το πώς να κάνετε την αίτηση GET.

573
00:36:32,530 --> 00:36:34,580
Και αν δούμε τον πραγματικό κώδικα, υποθέτω, είμαι σίγουρος

574
00:36:34,580 --> 00:36:39,690
Είναι ακόμα λίγο πολύ το ίδιο.

575
00:36:39,690 --> 00:37:04,990
Ω, ξέχασα να το μετατρέψει σε μια σειρά, αυτό είναι όλο.

576
00:37:04,990 --> 00:37:07,920
Όχι, δεν είναι ακόμα λειτουργεί. Ανεξάρτητα, εδώ είναι η πραγματική ολοκλήρωση κώδικα

577
00:37:07,920 --> 00:37:10,300
για ό, τι αυτό θα πρέπει να μοιάζει,

578
00:37:10,300 --> 00:37:16,400
και να κάνει το ίδιο πράγμα με αυτό που μόλις εφαρμοστεί.

579
00:37:16,400 --> 00:37:22,760
Όταν κάνετε κλικ στο κουμπί, χρησιμοποιεί GET JSON για να αναλύσει τα δεδομένα αυτόματα.

580
00:37:22,760 --> 00:37:29,190
Παίρνει τα δεδομένα πίσω από αυτό και βρόχοι σε όλο το φάσμα

581
00:37:29,190 --> 00:37:32,770
και εκτυπώνει την - όποια και αν είναι για το μεσημεριανό γεύμα σήμερα, το όνομα του,

582
00:37:32,770 --> 00:37:38,020
και προσθέτει μια αλλαγή γραμμής μετά από κάθε γραμμή.

583
00:37:38,020 --> 00:37:41,100
Αυτό είναι το πώς μπορείτε να χρησιμοποιήσετε το GET λειτουργία.

584
00:37:41,100 --> 00:37:44,040
>> Μπορείτε επίσης να χρησιμοποιήσετε το Ταχυδρομείο, το οποίο δεν είχα χρόνο

585
00:37:44,040 --> 00:37:47,940
να γράψω ένα παράδειγμα γι 'αυτό, αλλά μπορούμε να δούμε την τεκμηρίωση.

586
00:37:47,940 --> 00:37:53,220
Αν κοιτάξετε jquery.post,

587
00:37:53,220 --> 00:37:55,510
μπορείτε να δείτε ότι είναι σχεδόν το ίδιο πράγμα.

588
00:37:55,510 --> 00:38:01,650
Έχετε μια διεύθυνση URL, αλλά αντί να διέρχεται παραμέτρων με τη χρήση -

589
00:38:01,650 --> 00:38:03,990
απλά να τους βάζοντας στη σειρά για τη διεύθυνση URL ίδια,

590
00:38:03,990 --> 00:38:06,300
θα πρέπει να περάσει στη μεταβλητή αυτή δεδομένων

591
00:38:06,300 --> 00:38:11,990
αυτό είναι βασικά ένας πίνακας, ένα λεξικό που χαρτογραφεί τις παραμέτρους για τις τιμές.

592
00:38:11,990 --> 00:38:17,690
Περνάτε ότι, και ότι τους στέλνει στην χρήση POST.

593
00:38:17,690 --> 00:38:20,790
Και τη στιγμή που έχετε αυτό, τότε μπορείτε να έχετε μια λειτουργία επιτυχία

594
00:38:20,790 --> 00:38:23,930
που εκτελεί όταν τα δεδομένα έρχεται πίσω.

595
00:38:23,930 --> 00:38:26,430
Διαφορετικά, είναι ακριβώς το ίδιο. Έτσι, χρησιμοποιώντας POST,

596
00:38:26,430 --> 00:38:29,970
ίσως να θέλετε να χρησιμοποιήσετε POST, για παράδειγμα, αν έχετε μια φόρμα εισαγωγής

597
00:38:29,970 --> 00:38:35,780
θα αφήσουμε τους ανθρώπους κωδικούς εισόδου σε αυτό, και να στείλει αυτούς τους κωδικούς off

598
00:38:35,780 --> 00:38:41,850
στο back-end script σας, για να ελέγξετε στη βάση δεδομένων αν ο χρήστης είναι έγκυρη ή όχι.

599
00:38:41,850 --> 00:38:46,700
Μπορείτε να το κάνετε αυτό που χρησιμοποιούν όλοι jQuery, αντί να χρειάζεται να ανανεώσετε τη σελίδα σε όλα.

600
00:38:46,700 --> 00:38:52,160
Αυτό είναι το πώς θα εφαρμοστεί στο blog που σας έδειξα νωρίτερα.

601
00:38:52,160 --> 00:38:59,530
Αν πάμε στην πύλη τέλος και να αποσυνδεθείτε, αποσυνδεθείτε,

602
00:38:59,530 --> 00:39:02,600
Αποσύνδεση δεν λειτουργεί.

603
00:39:02,600 --> 00:39:13,360
Λοιπόν, επιτρέψτε μου να ανοίξει ακριβώς επάνω σε ένα νέο παράθυρο.

604
00:39:13,360 --> 00:39:16,580
Εδώ υπάρχει ένας κωδικός πρόσβασης, και ήμουν έτοιμος να πληκτρολογήσετε κάτι τυχαίο.

605
00:39:16,580 --> 00:39:18,590
Δεν λειτουργεί, αλλά μπορείτε να δείτε ότι δεν

606
00:39:18,590 --> 00:39:20,840
πραγματικά να ανανεώσετε τη σελίδα σε όλα.

607
00:39:20,840 --> 00:39:24,610
Ο κώδικας, αν θέλετε να το δει κανείς,

608
00:39:24,610 --> 00:39:37,460
είναι όλες διαθέσιμες εδώ.

609
00:39:37,460 --> 00:39:45,680
Έτσι ο κώδικας που έγραψα πέρυσι κάποια στιγμή.

610
00:39:45,680 --> 00:39:47,790
Όπως μπορείτε να δείτε εδώ, θα στείλουμε μια αίτηση POST.

611
00:39:47,790 --> 00:39:50,400
Έχω ένα αρχείο που ονομάζεται login.php στο πίσω άκρο,

612
00:39:50,400 --> 00:39:53,860
η οποία ελέγχει αν ο κωδικός πρόσβασης είναι έγκυρο.

613
00:39:53,860 --> 00:39:56,000
Οι παράμετροι περνάμε με κωδικό πρόσβασης, αντιστοιχίζονται με

614
00:39:56,000 --> 00:40:00,030
η είσοδος που υπάρχει σε αυτό το πλαίσιο εισαγωγής σήμερα.

615
00:40:00,030 --> 00:40:04,110
Και όταν τα δεδομένα επανέρχεται, θα ελέγξετε.

616
00:40:04,110 --> 00:40:07,680
Εάν τα δεδομένα είναι ψευδής, τότε λέμε λανθασμένο κωδικό πρόσβασης, θα μετακινηθείτε προς τα κάτω,

617
00:40:07,680 --> 00:40:09,580
και απλά να εξαφανιστεί μετά από αυτό.

618
00:40:09,580 --> 00:40:12,320
Διαφορετικά, τοποθετήστε το διαχειριστή της σελίδας.

619
00:40:12,320 --> 00:40:15,080
Και αυτό ήταν όλα γίνονται με χρήση JSON.

620
00:40:15,080 --> 00:40:18,510
Σε αυτό πολλές γραμμές κώδικα, μπορείτε να περάσετε μόνο τα δεδομένα στο πίσω άκρο,

621
00:40:18,510 --> 00:40:21,020
ελέγξτε αν είναι σωστή, ελέγξτε αν έχετε συνδεθεί σωστά,

622
00:40:21,020 --> 00:40:24,200
και πραγματικά να απαντήσει σε αυτό, τον επαναπροσανατολισμό του πρόσωπο στη σωστή σελίδα

623
00:40:24,200 --> 00:40:29,760
ή να μην αφήσει τους να συνδεθείτε και λέγοντάς τους ότι είχαν έναν εσφαλμένο κωδικό πρόσβασης.

624
00:40:29,760 --> 00:40:33,040
Έτσι, αυτό είναι ένα παράδειγμα για το πώς θα μπορούσατε να χρησιμοποιήσετε jQuery POST

625
00:40:33,040 --> 00:40:37,010
να στείλετε μια αίτηση POST στην πλάτη τέλος σας,

626
00:40:37,010 --> 00:40:42,400
ελέγχοντας αν κάποιος είναι συνδεδεμένος σωστά.

627
00:40:42,400 --> 00:40:44,820
>> Εντάξει, έτσι ώστε να είναι όλα τα παραδείγματα που είχα, και όλα τα πράγματα που ήθελα να καλύψει.

628
00:40:44,820 --> 00:40:47,110
Αυτά είναι τα σημαντικότερα πράγματα που jQuery σας επιτρέπει να κάνετε:

629
00:40:47,110 --> 00:40:52,640
επιλέξτε τα στοιχεία, να τα τροποποιήσουν χρησιμοποιώντας DOM χειραγώγηση,

630
00:40:52,640 --> 00:40:56,340
μπορείτε να προσθέσετε εφέ, να ενεργοποιήσει τα πράγματα για ορισμένα γεγονότα,

631
00:40:56,340 --> 00:41:00,430
και επίσης να κάνουμε AJAX αιτήματα πολύ ομαλά και εύκολα.

632
00:41:00,430 --> 00:41:02,840
Σας ευχαριστώ για την παρουσία ή βλέποντας,

633
00:41:02,840 --> 00:41:06,230
και εάν έχετε οποιεσδήποτε ερωτήσεις, απλώς επιτρέψτε μου να ξέρω. Ναι;

634
00:41:06,230 --> 00:41:12,730
[Φοιτητής] Πίσω όταν έδειξε, είχατε JSON μετά την αίτηση POST σε εισαγωγικά,

635
00:41:12,730 --> 00:41:15,170
και αναρωτιόμουν τι θα έκανε.

636
00:41:15,170 --> 00:41:20,070
>> Ναι, το βλέπω. Το ερώτημα ήταν ότι, στο παράδειγμα που μόλις έδειξε,

637
00:41:20,070 --> 00:41:25,790
υπήρχε η JSON λέξη σε εισαγωγικά γύρω από το -

638
00:41:25,790 --> 00:41:31,690
Θα βγάλω ακριβώς επάνω πάλι - γύρω από την λειτουργία POST.

639
00:41:31,690 --> 00:41:43,320
Είμαι τραβώντας απλά μέχρι να δείξει.

640
00:41:43,320 --> 00:41:46,890
Τόσο εδώ είναι αυτό αίτηση POST, και υπάρχει αυτό το JSON σε εισαγωγικά.

641
00:41:46,890 --> 00:41:50,280
Αυτό ορίζει ακριβώς αυτό που περιμένουμε το αποτέλεσμα να είναι.

642
00:41:50,280 --> 00:41:54,070
Έτσι, αν περνάμε στο JSON, όπως η αναμενόμενη τύπο δεδομένων,

643
00:41:54,070 --> 00:41:56,070
δεν είναι μια απαίτηση, αλλά αν θέλουμε να περάσει στο,

644
00:41:56,070 --> 00:41:58,590
τότε τα δεδομένα αυτόματα θα αναλυθεί ως JSON.

645
00:41:58,590 --> 00:42:00,600
Γι 'αυτό και δεν χρειάζεται να καλέσετε τη λειτουργία μεταγλώττιση JSON σε αυτό,

646
00:42:00,600 --> 00:42:02,620
αυτό ακριβώς θα συμβεί αυτόματα.

647
00:42:02,620 --> 00:42:05,150
Και αν ρίξετε μια ματιά στην τεκμηρίωση για το POST,

648
00:42:05,150 --> 00:42:09,850
υπάρχει αυτή η μεταβλητή τύπου δεδομένων, το είδος των δεδομένων που αναμένονται από το διακομιστή.

649
00:42:09,850 --> 00:42:12,660
Είναι προεπιλογές σε μια έξυπνη εικασία που μπορεί να είναι λάθος,

650
00:42:12,660 --> 00:42:15,520
ώστε να μπορείτε να το αφήσετε κενό, αλλά είναι ακριβώς το είδος των δεδομένων

651
00:42:15,520 --> 00:42:21,680
στην κωδικοποίηση που χρησιμοποιείτε, είτε πρόκειται για JSON ή XML ή κάτι άλλο.

652
00:42:21,680 --> 00:42:25,280
>> Οποιεσδήποτε άλλες ερωτήσεις;

653
00:42:25,280 --> 00:42:27,300
Εντάξει. Αν έχετε οποιεσδήποτε άλλες ερωτήσεις, μη διστάσετε να μου στείλετε email

654
00:42:27,300 --> 00:42:30,830
σε vshekhawat@college.harvard.edu,

655
00:42:30,830 --> 00:42:34,860
και οι διαφάνειες και ο κώδικας θα πρέπει να είναι διαθέσιμα στο διαδίκτυο πολύ σύντομα.

656
00:42:34,860 --> 00:42:42,810
Καλή τύχη με τα τελικά έργα σας, ελπίζω να χρησιμοποιήσετε jQuery.

657
00:42:42,810 --> 00:42:46,810
[CS50.TV]