1
00:00:00,000 --> 00:00:02,690
[Powered by Google Translate] [Семінар: JQUERY]

2
00:00:02,690 --> 00:00:04,790
[Vipul Шехават, Гарвардскі універсітэт]

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 з'яўляецца, у першую чаргу, як раз на баку кліента мове

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
спытаеце іх машыну для адпраўкі запытаў на сервер кожныя 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
якая зроблена ў Інтэрнэт, таму бліскучымі.

30
00:01:34,330 --> 00:01:37,630
Гэта найбольш шырока выкарыстоўваецца JavaScript бібліятэкі.

31
00:01:37,630 --> 00:01:41,450
За 19600000 сайты выкарыстоўваюць яго, і выкарыстанне па-ранейшаму расце

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
Сярод топ-10000000 сайтаў, ёсць яшчэ -

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
А вы маглі б сказаць, што гэта законна, таму што мае падставу і 13 членаў савета дырэктараў,

39
00:02:05,820 --> 00:02:11,910
разам з камандай з 20 чалавек, якія працуюць на яго на рэгулярнай аснове.

40
00:02:11,910 --> 00:02:16,110
Так што гэта вельмі шырока выкарыстоўваецца, яна мае. Орг URL, гэта фантазія,

41
00:02:16,110 --> 00:02:21,660
ён мае спін-оф за іншыя рэчы, так што гэта вялікая справа.

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
паменшаная файламі, якая без усялякіх прабел і каментары, і гэта толькі 32 КБ.

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
як стварэнне анімацыі, які звычайна быў бы вельмі, вельмі цяжка зрабіць.

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
якая з'яўляецца для радыёстанцыі, я стварыў гэты блог

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
З-за ўсіх гэтых анімацыі, па сутнасці.

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
І гэта знікаць - так што такія рэчы ўсё гэта робіцца выкарыстаннем JQuery,

69
00:03:49,140 --> 00:03:52,720
і вам не прыйдзецца ўвесь час перазагрузіце старонку перамяшчацца па сайце.

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
Націсніце кнопку "Спампаваць 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
Гэта паменшаная версія, якая не чытае наогул.

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 Кб,

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
Тут мы маем спраў. Калі мы на самай справе выбраць усе дзівы на старонцы,

133
00:07:17,430 --> 00:07:22,300
гэта будзе проста даць нам масіў усіх дзівы, якія існуюць у гэтым файле.

134
00:07:22,300 --> 00:07:27,040
ID селектар дазваляе выбраць усё што заўгодна з дадзеным ID.

135
00:07:27,040 --> 00:07:32,230
Так што, калі гэта, напрыклад, гэтая рэч мае ID "што"

136
00:07:32,230 --> 00:07:37,160
і калі б мы зрабілі гэта з #, што замест некаторых ID,

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
выбраць толькі рэчы з ідэнтыфікатарамі, якія дзівы.

140
00:07:48,260 --> 00:07:51,810
Так што так. Толькі выберыце дзівы, якія маюць гэты 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
А тут яшчэ і ня селектарам, так што вы можаце выбраць усе дзівы

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
на працягу некаторага элемента, то вы проста робіце: малюнка.

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, гіпертэкставай спасылкі, з'яўляецца атрыбутам таксама.

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
гэта называецца "пароль", што б быць адным з спосабаў вы можаце выбраць, што.

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 я думаю, што гэта каманда зруху Да або кіраванне пераключэннем К.

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
Такім чынам, вы можаце проста ўвесці ў ствараем зменную з імем х,

189
00:10:45,100 --> 00:10:49,200
х = 5, давайце паглядзім, што х + 2.

190
00:10:49,200 --> 00:10:57,670
Вы нават можаце зрабіць нешта накшталт CS + Паглядзім, х + 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, які з'яўляецца радком.

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
Калі мы выбіраем даданне ідэнтыфікатар, а затым дадаць да яго

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
Але гэта прыклад таго, як можна выкарыстоўваць Prepend і дадаць метады

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
гэтым пункце, адпавядае класу ID.

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 стыляў кожны раз.

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
Мы таксама можам выдаліць рэчы, так што я збіраюся, каб выбраць усе дзівы

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
Так што, калі мы зробім гэта, ён проста вяртае радок матэрыял.

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
гэта адрас электроннай пошты, гэта з'яўляецца дапушчальнай датай, напрыклад.

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
Вы можаце фактычна зрабіць яго аніміраваным.

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
Паказаць / схаваць нумар сапраўды адпавядае гэтаму цэлую скрынку,

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
Там таксама гэта эфект згасання, якое - знікаюць ID адпавядае гэтай рамкі.

284
00:16:57,650 --> 00:17:01,200
Калі я знікаць да яе, то яна будзе паступова знікаць.

285
00:17:01,200 --> 00:17:04,490
Я магу таксама знікаюць яго, і ён вернецца.

286
00:17:04,490 --> 00:17:08,930
Вы таксама можаце зрабіць, каб знікаць, які спецыфічны для функцыя фейдера.

287
00:17:08,930 --> 00:17:12,589
Вы можаце мець яго знікаць з якім-небудзь канкрэтным непразрыстасць, што вы хочаце.

288
00:17:12,589 --> 00:17:16,869
Так што калі вы знікаюць так павольна 0,5, гэта стане палову бачнай.

289
00:17:16,869 --> 00:17:22,630
Я магу зрабіць гэта пайсці ў 0,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
Так што я збіраюся, каб выбраць пераключэнне ID, які адпавядае гэтай рамкі,

293
00:17:33,410 --> 00:17:38,970
і на гэтай DIV вы можаце патэлефанаваць Toggle; калі гэта мабыць ён стане нябачным,

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
І вы таксама можаце зрабіць гэта з дапамогай пераключэння знікаюць,

298
00:17:53,510 --> 00:17:55,730
якая робіць тое ж самае, за выключэннем таго, фактычна знікае.

299
00:17:55,730 --> 00:17:59,410
І тое ж самае з горкай пераключэння.

300
00:17:59,410 --> 00:18:01,460
Ёсць прыкаваны эфекты, а таксама, што азначае,

301
00:18:01,460 --> 00:18:05,520
Пры выбары элемента і проста патэлефанаваць куча анімацыі яго метады,

302
00:18:05,520 --> 00:18:07,400
Калі вы хацелі, каб знікаць, а затым ссуньце ўніз,

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
слайд з верхняга правага ў ніжні левы, вы можаце зрабіць гэта,

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 знікаюць.

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,

334
00:20:15,020 --> 00:20:17,700
а потым проста прымусіць яго знікнуць.

335
00:20:17,700 --> 00:20:20,690
Давайце зробім гэта паступова знікаюць.

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
>> Такім чынам, перш за ўсё, давайце абярэм поле Код кнопкі

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, на гэты раз ідэнтыфікатарам ключа, і гэты мыш 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
Ён атрымлівае гэтую скрынку і альбо паступова змяняецца яно знікае або яго цалі

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
ня активируете незалежна ад таго, які элемент вы звязаць яго з.

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
Было б быць актываваныя незалежна ад таго, элемент, які я ў цяперашні час знаходжуся цалі

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
Так, напрыклад, мы збіраемся называць дзеянні, калі мы навядзем курсор мышы гэтай гл.

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
Калі мы назавем гэтую функцыю пры навядзенні мышы на ID,

418
00:25:49,750 --> 00:25:54,380
што адпавядае гэтай рамкі, то, калі мы навядзем курсор мышы скрынкі,

419
00:25:54,380 --> 00:26:00,440
Затым бокс будзе на самой справе знікаюць - гэта быццё фанк прама зараз, але -

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
Мыш ўвесці толькі актывізуецца, калі мыш ўваходзіць у скрынку, як і чакалася.

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 працуе на вашым вэб-браўзэры.

443
00:27:23,060 --> 00:27:25,800
Кожныя некалькі секунд ваш браўзэр на самай справе

444
00:27:25,800 --> 00:27:29,420
збіраюцца серверы Facebook, пытаўся ў iх, у вас ёсць што-небудзь новае для мяне,

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
і мы можам выкарыстоўваць або атрымаць або падайце запытаў.

454
00:27:58,130 --> 00:28:05,370
>> GET запыты, напрыклад, калі вам у Google.com

455
00:28:05,370 --> 00:28:10,900
і рабіць Q = тэст. Гэта дае ім запыту тэст.

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
Вы можаце запытаць выкарыстаннем API, атрымліваем запыты, і вы таксама можаце праверыць інфармацыю для ўваходу.

465
00:28:50,140 --> 00:28:54,400
На наступным старонцы, я стварыў гэты, які пытаецца: "Што ў нас на абед?"

466
00:28:54,400 --> 00:28:58,230
выкарыстаннем Гарвардскага ежу 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
Вось што трэба будзе зрабіць. Перш за ўсё, давайце выкарыстоўваць прывязку падзеі

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
мы збіраемся запісаць яго ў гэтую ID DIV інфармацыя ежы.

483
00:29:57,290 --> 00:30:02,860
Перш за ўсё, давайце абярэм ID ежу кнопкі.

484
00:30:02,860 --> 00:30:07,320
Калі яна націснутая, мы хочам, каб нешта зрабіць.

485
00:30:07,320 --> 00:30:11,930
Давайце проста зрабіць яго ананімным фікцыя, як і раней.

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.

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, увёўшы яго ў адрасны радок браўзэра і ісці ў яго.

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
гэта тое, што дадзеныя збіраецца выглядаць. Гэта збіраецца быць гэтая велізарная радок.

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 і я проста итератора, каб замест таго, каб рабіць Var = 0,

536
00:33:30,150 --> 00:33:40,290
Я быў менш, чым даўжыня, я + +, вы можаце проста зрабіць уаг я ў аналізаваных дадзеных.

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 і вызначце ежы інфармацыя DIV ID або 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
і мы дадамо яго ў канцы ID DIV інфармацыя ежы.

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 ежы інфармацыю, якая раней была пустой.

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
І вось тут прыходзіць цалі адладкі

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
Вы дазваляеце людзям паролі уваходу ў яго, і адправіць гэтыя паролі ад

598
00:38:35,780 --> 00:38:41,850
да серверным сцэнарам, каб праверыць у базе дадзеных, што ці можа карыстач з'яўляецца сапраўдным ці не.

599
00:38:41,850 --> 00:38:46,700
Вы можаце зрабіць гэта ўсё з выкарыстаннем JQuery замест таго, каб абнавіць старонку наогул.

600
00:38:46,700 --> 00:38:52,160
Вось як я рэалізаваў у сваім блогу, што я паказаў вам раней.

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
Я проста пацягніце яго ўверх, зноў - вакол паста функцыі.

639
00:41:31,690 --> 00:41:43,320
Я проста пацягнуўшы яго ўверх, каб паказаць.

640
00:41:43,320 --> 00:41:46,890
Такім чынам, вось гэты пост запыт, і ёсць гэтая 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
І калі вы паглядзіце на дакументацыю па пошце,

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
Добра. Калі ў Вас ёсць якія-небудзь пытанні, не саромейцеся, пішыце мне

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]