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
این سال، من می دانم که شما بچه ها ها بر اجازه اند جاوا اسکریپت را پوشش داده نمی شوند

15
00:00:47,090 --> 00:00:51,080
در به عنوان بیشترین مقدار جزییات به عنوان ما را در سال های گذشته داشته است.

16
00:00:51,080 --> 00:00:53,150
جاوا اسکریپت را است، اول از همه، دیگر فقط یک زبان-سمت سرویس گیرنده

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
شما می توانید انجام دهید که با استفاده از جاوا اسکریپت را.

22
00:01:10,420 --> 00:01:13,190
از jQuery فقط فراهم می کند قابلیت های بیشتر در در بالای از جاوا اسکریپت

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
آن را به در اطراف برای یک زن و شوهر سال بوده است، و آن را واقعا بخشی از جنبش جدید وب 2.0 است

29
00:01:31,370 --> 00:01:34,330
است که ساخته شده به اینترنت به طوری زرق و برق دار است شده است.

30
00:01:34,330 --> 00:01:37,630
این ترین به طور گسترده ای مورد استفاده قرار می گیرند کتابخانه جاوا اسکریپت را است.

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 میلیون سایت های بالا، هنوز هم وجود دارد -

35
00:01:52,870 --> 00:01:55,180
در در اطراف 40٪ از آنها در حال حاضر آن را با استفاده از.

36
00:01:55,180 --> 00:01:58,540
فیس بوک به از آن استفاده می کند، مقدار زیادی از وب سایت های دیگر در حال حاضر آن را استفاده کنید.

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
فایل minified، است که بدون تمام فضای سفید ها و نظرات، و آن را تنها 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
ممکن است در جاوا اسکریپت را، مانند فرستادن یک درخواست 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
که واقعا ساده یک تعداد زیادی از stuff است که شما در در حال انجام است.

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
و شما می توانید ببینید که در در در اینجا آنها در حال از جمله فایل جی کوئری اصلی،

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
این فقط یک فایل جاوا اسکریپت را بزرگ است که می کند تمام چیزهای سحر و جادو را برای شما است.

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
شما همچنین می توانید به نسخه به میزبانی شده گوگل از آن را لینک کنید.

97
00:05:20,240 --> 00:05:23,820
به طوری که به دنبال شما این به شما اجازه می دهد را به فقط در گوگل تکیه می کنند به آن را ارائه شده.

98
00:05:23,820 --> 00:05:29,310
آنها را فراهم هر نسخه از آن را، در دسترس در تمام زمانها است.

99
00:05:29,310 --> 00:05:31,530
بنابراین شما احتمالا می تواند بر روی گوگل تکیه می کنند به آن را را برای شما میزبان.

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
پس از آن بهتر است به فقط KB با فایل 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
المان ها بر روی یک صفحه دارای ID های ها و کلاس ها و دیگر جنبه های شناسایی به آنها.

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
انتخابگر ID به شما اجازه می دهد تا شما به هر چیزی با یک ID داده شده گرفته را انتخاب کنید.

135
00:07:27,040 --> 00:07:32,230
بنابراین در صورتی که این، برای عنوان مثال، این چیزی که دارای شناسه "چه،"

136
00:07:32,230 --> 00:07:37,160
و اگر ما این کار را با # آنچه که به جای از برخی از ID انجام داد،

137
00:07:37,160 --> 00:07:42,920
آن را فقط خواهد یک آرایه است که دارای یک عنصر تک و که این است که عنصر صفحه of the page است بازگشت.

138
00:07:42,920 --> 00:07:45,490
ما همچنین می توانیم انتخابگرهای ترکیب این راه را با داشتن

139
00:07:45,490 --> 00:07:48,260
تنها چیزهایی را با ID های که 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
نزولی (descendant) همچنین با این نسخهها کار؛ به طوری اگر شما باید برخی از کلاس

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
در درون برخی از عنصر، پس از آن شما فقط را انجام دهید: تصویر.

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
برای این برچسب لنگر، و یک عکاس هنگام عکسبرداری، در ابرمتن (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
است که "رمز عبور،" است که می شود، یکی از راه های شما می توانید از را انتخاب کنید که نامیده می شود شده است.

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
و گوگل کروم همان چیزی است که من با استفاده از است. شما می توانید دگرساز فرمان J را فشار دهید

182
00:10:19,340 --> 00:10:21,720
یا alt کنترل J به باز کردن کنسول.

183
00:10:21,720 --> 00:10:26,130
در به محتوای اصلی پرش به فرم جستوجو من فکر می کنم آن را فرمان از SHIFT K و یا کنترل از SHIFT K.

184
00:10:26,130 --> 00:10:28,880
در Safari شما باید به رفتن برخی از تنظیمات را تغییر دهید.

185
00:10:28,880 --> 00:10:35,460
یک لینک اگر شما می خواهم به آن را انجام دهد. وجود دارد، اما من توصیه می می کنم از گرفتن Chrome یا به محتوای اصلی پرش به فرم جستوجو.

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
شما فقط می توانید انجام دهید برخی چیزهای جاوا اسکریپت معمولی است.

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
اگر ما را انتخاب کنید افزودنپرونده 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
و ما همچنین می توانیم در آن prepend، است که بدان معنی است از آن خواهد شد قبل از بروید، در آغاز از که عنصر.

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
سپس ما فقط می توانید آن را از این موضوع حذف می را با استفاده از کلاس حذف می باشند.

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
ما همچنین می تواند کارها را های را حذف کنید؛ در بنابراین من قصد دارم برای را انتخاب کنید تمام 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
بنابراین اگر ما این کار، آن را فقط چیزهای رشته را بر می گرداند.

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
نمایش / پنهان سازی 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
نیز این اثر را محو شدن، که وجود دارد - 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
بنابراین اگر شما آن را محو شدن به آرامی به .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
و همچنین شما می می توانید این کار را انجام دهند با یک ضامن محو شدن،

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
در این نحو برای نشات میگیرد است، اجازه دهید است فقط آن را hideTheBox تماس بگیرید.

331
00:20:01,820 --> 00:20:06,130
آن را از هیچ آرگومان قبول کنند نیست، چرا که هیچ از استدلالهایی به شود گرفته شده وجود دارد.

332
00:20:06,130 --> 00:20:08,950
ما می توانیم ID جعبه را انتخاب کنید.

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
برای bind کردن یک رویداد به برخی از دکمه های خاص و یا برخی از عمل اتفاق می افتد،

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
>> بنابراین اول از همه، اجازه دهید جعبه ID دکمه را انتخاب کنید

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
که یکی از ویژگی های جاوا اسکریپت می باشد.

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 کلیدی است، و این یکی 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، من می دانم که ما جاوا اسکریپت را در عمق زیاد این سال را پوشش نمی دهد،

439
00:27:09,340 --> 00:27:11,770
بنابراین من فقط رفتن به صحبت در مورد آژاکس به طور کلی برای یک دقیقه.

440
00:27:11,770 --> 00:27:15,210
آژاکس مخفف جاوا اسکریپت و XML آسنکرون.

441
00:27:15,210 --> 00:27:19,030
اساسا، برای مثال، هنگامی که شما در فیس بوک هستید و آن را به شما اطلاع رسانی هل می دهد،

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
رفتن به سرورهای فیس بوک، درخواست آنها را، آیا شما چیز جدیدی برای من،

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
بنابراین به طور معمول، اگر شما فقط با استفاده از پی اچ پی و پایگاه داده،

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
>> دریافت درخواست، به عنوان مثال، اگر شما به 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
اما با استفاده از جی کوئری، شما می توانید درخواست GET و POST

463
00:28:38,660 --> 00:28:42,740
خیلی راحت تر از شما به طور معمول می تواند تنها با استفاده از جاوا اسکریپت ساده است.

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
TODO است. اول از همه، اجازه دهید به استفاده از اتصال رویداد

480
00:29:46,660 --> 00:29:50,820
به طوری که زمانی که این دکمه فشار داده شده است، ما به یک درخواست GET.

481
00:29:50,820 --> 00:29:53,410
و زمانی که دریافت می گرداند درخواست با برخی از داده ها،

482
00:29:53,410 --> 00:29:57,290
ما در حال رفتن به آن را به این غذا اطلاعات DIV ID بنویسید.

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
اجازه دهید فقط آن را یک 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
دوم اینکه callback function، تابع که به نام

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 جاوا اسکریپت شیء نشانه گذاری است.

506
00:31:18,950 --> 00:31:24,150
این بسیار آسان برای به جاوا اسکریپت برای درک آنچه در آن معنی،

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
شما می توانید این آدرس را با تایپ کردن آن را به مرورگر شما و رفتن به آن را تست کنید.

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
>> جاوا اسکریپت این نحو مفید که در آن شما می توانید یک متغیر و حلقه بیش از یک آرایه ایجاد کنید،

535
00:33:26,030 --> 00:33:30,150
و var i است فقط تکرارکننده است، بنابراین به جای داشتن به انجام VAR = 0،

536
00:33:30,150 --> 00:33:40,290
من کمتر از طول بود، من + +، شما فقط می توانید انجام دهید VAR من در داده های تجزیه.

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 این غذا اطلاعات است که در حال حاضر خالی است اضافه کنید.

543
00:34:02,660 --> 00:34:05,430
بنابراین انتخاب کنید که اجازه دهید.

544
00:34:05,430 --> 00:34:13,870
ما اطلاعات jQuery و انتخاب غذا 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
و ما آن را به پایان غذا اطلاعات 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.

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
میکنید، خط 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
هنگامی که شما بر روی دکمه کلیک کنید، آن را با استفاده از 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
به طوری که به عنوان مثال از اینکه چگونه شما می توانید از POST از jQuery استفاده

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
و همچنین درخواست آژاکس انجام دهد بسیار یکپارچه و به آسانی.

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
و اگر شما را نگاهی به مستندات برای ارسال،

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]