در این مطلب، ویدئو جاوا اسکریپت – سخنرانی 5 – برنامه نویسی وب CS50 با پایتون و جاوا اسکریپت 2020 با زیرنویس فارسی را برای دانلود قرار داده ام. شما میتوانید با پرداخت 15 هزار تومان ، این ویدیو به علاوه تمامی فیلم های سایت را دانلود کنید.اکثر فیلم های سایت به زبان انگلیسی می باشند. این ویدئو دارای زیرنویس فارسی ترجمه شده توسط هوش مصنوعی می باشد که میتوانید نمونه ای از آن را در قسمت پایانی این مطلب مشاهده کنید.
مدت زمان فیلم: 1:51:25
تصاویر این ویدئو:
قسمتی از زیرنویس این فیلم:
00:00:00,560 –> 00:00:13,960
[Music]
2
00:00:13,960 –> 00:00:16,020
شما
3
00:00:17,330 –> 00:00:19,490
خوب به همه خوش آمدید به
4
00:00:19,490 –> 00:00:20,960
برنامه نویسی وب با پایتون و جاوا اسکریپت
5
00:00:20,960 –> 00:00:22,939
و امروز ما توجه خود را به
6
00:00:22,939 –> 00:00:24,800
دومین زبان برنامه نویسی اصلی
7
00:00:24,800 –> 00:00:26,000
که تحت این کلاس
8
00:00:26,000 –> 00:00:28,340
به ویژه جاوا اسکریپت جستجو می کنند معطوف کرده ایم و
9
00:00:28,340 –> 00:00:29,570
درک می کنیم که چرا این
10
00:00:29,570 –> 00:00:31,609
جاوا اسکریپت است. در واقع مفید است، اجازه دهید به
11
00:00:31,609 –> 00:00:33,470
عقب برگردیم و این نمودار را بررسی کنیم که
12
00:00:33,470 –> 00:00:35,150
ارتباطات از طریق اینترنت به
13
00:00:35,150 –> 00:00:36,920
طور کلی به نظر می رسد، اغلب اوقات
14
00:00:36,920 –> 00:00:38,390
ما یک کاربر به نام
15
00:00:38,390 –> 00:00:40,610
مشتری داریم که از رایانه خود در مرورگر وب خود استفاده می
16
00:00:40,610 –> 00:00:42,260
کند، خواه کروم یا سافاری
17
00:00:42,260 –> 00:00:44,600
یا مرورگر وب دیگری باشد. یک
18
00:00:44,600 –> 00:00:47,809
درخواست HTTP یک درخواست وب را به
19
00:00:47,809 –> 00:00:50,059
نوعی وب سرور می فرستد که سرور
20
00:00:50,059 –> 00:00:52,309
آن درخواست را پردازش می کند و سپس
21
00:00:52,309 –> 00:00:54,050
نوعی پاسخ را که به مشتری بازمی گردد
22
00:00:54,050 –> 00:00:56,269
تا کنون تمام کدهایی را که
23
00:00:56,269 –> 00:00:58,250
ما کد برنامه وب پایتون را در حال اجرا در آن نوشته ایم برمی گرداند.
24
00:00:58,250 –> 00:01:00,289
25
00:01:00,289 –> 00:01:02,300
به عنوان مثال، یک برنامه وب جنگو همگی کدهایی هستند که
26
00:01:02,300 –> 00:01:04,580
روی نوعی کد سرور اجرا میشوند که به
27
00:01:04,580 –> 00:01:06,410
درخواستهایی که در حال انجام برخی از
28
00:01:06,410 –> 00:01:08,030
کامپیوترها هستند گوش میدهد. utation به منظور پردازش آن
29
00:01:08,030 –> 00:01:10,100
درخواست و سپس ایجاد نوعی
30
00:01:10,100 –> 00:01:12,289
پاسخ معمولاً در قالب یک
31
00:01:12,289 –> 00:01:14,660
الگوی HTML که سپس آن را به مشتری ارسال می کنیم
32
00:01:14,660 –> 00:01:16,789
که جاوا اسکریپت به
33
00:01:16,789 –> 00:01:18,800
ما امکان می دهد تا شروع به نوشتن
34
00:01:18,800 –> 00:01:21,380
کد سمت سرویس گیرنده جاوا اسکریپت کنیم. به
35
00:01:21,380 –> 00:01:22,819
ما این امکان را می دهد که کدی را بنویسیم که در واقع
36
00:01:22,819 –> 00:01:25,190
و در داخل مرورگر وب کاربران
37
00:01:25,190 –> 00:01:27,410
روی کلاینت اجرا می شود و این می تواند به دلایل مختلفی مفید باشد
38
00:01:27,410 –> 00:01:29,179
، یکی اگر محاسباتی وجود داشته باشد
39
00:01:29,179 –> 00:01:30,920
که می خواهیم انجام دهیم اما
40
00:01:30,920 –> 00:01:32,360
نیازی به بیرون رفتن و دسترسی نداریم.
41
00:01:32,360 –> 00:01:34,369
برای انجام این کار، ما میتوانیم
42
00:01:34,369 –> 00:01:36,709
محاسبات را به طور بالقوه سریعتر انجام دهیم، فقط با
43
00:01:36,709 –> 00:01:38,420
اجرای کد به طور انحصاری روی
44
00:01:38,420 –> 00:01:40,369
کلاینت، و علاوه بر آن، میتوانیم
45
00:01:40,369 –> 00:01:42,289
شروع به ساختن صفحات وب خود کنیم که
46
00:01:42,289 –> 00:01:44,119
جاوا اسکریپت تعاملی بسیار بیشتری
47
00:01:44,119 –> 00:01:45,920
به ما میدهد. توانایی
48
00:01:45,920 –> 00:01:48,140
دستکاری مستقیم Dom در جایی که دوباره
49
00:01:48,140 –> 00:01:50,929
Dom مدل شی سند است که درختی
50
00:01:50,929 –> 00:01:53,209
مانند سلسله مراتبی است که نمایانگر صفحه وب است
51
00:01:53,209 –> 00:01:54,709
که کاربر به طور اتفاقی به آن نگاه می کند
52
00:01:54,709 –> 00:01:57,050
، بنابراین جاوا اسکریپت ما را قادر به نوشتن
53
00:01:57,050 –> 00:01:58,759
کد آن مسیر می کند.
54
00:01:58,759 –> 00:02:00,470
محتوای صفحه وب را دستکاری می کند و خواهیم دید
55
00:02:00,470 –> 00:02:02,420
که چگونه می تواند به زودی بسیار قدرتمند شود،
56
00:02:02,420 –> 00:02:05,179
بنابراین چگونه می توانیم از جاوا اسکریپت در
57
00:02:05,179 –> 00:02:07,610
داخل یک صفحه وب استفاده کنیم تا مقداری کد
58
00:02:07,610 –> 00:02:09,500
اضافه کنیم تا منطق برنامه نویسی را به یک صفحه وب
59
00:02:09,500 –> 00:02:12,349
اضافه کنیم. ما قبلاً زبان HTML را
60
00:02:12,349 –> 00:02:13,580
دیدهایم که برای توصیف ساختار یک صفحه وب از آن استفاده میکنیم،
61
00:02:13,580 –> 00:02:14,629
62
00:02:14,629 –> 00:02:17,420
جایی که یک صفحه HTML فقط
63
00:02:17,420 –> 00:02:18,980
ساختار یک صفحه را توصیف میکند و از نظر
64
00:02:18,980 –> 00:02:21,260
تگهای تودرتو، آن تگهای head را
65
00:02:21,260 –> 00:02:23,150
در بالای صفحه داشتیم، تگهای بدنه که
66
00:02:23,150 –> 00:02:24,800
ساختار صفحه و
67
00:02:24,800 –> 00:02:26,090
سپس تگهای اضافی را که میتوان
68
00:02:26,090 –> 00:02:28,430
درون آنها قرار داد و به منظور افزودن
69
00:02:28,430 –> 00:02:30,380
جاوا اسکریپت به یک صفحه وب، در صورتی که
70
00:02:30,380 –> 00:02:31,190
ساده است، شامل
71
00:02:31,190 –> 00:02:33,440
برخی از تگهای اسکریپت که اغلب در
72
00:02:33,440 –> 00:02:36,980
داخل خود صفحه HTML قرار میگیرند، در هنگام
73
00:02:36,980 –> 00:02:38,780
استفاده از این اسکریپتها توضیح دهید. تگ هایی که ما به مرورگر می گوییم
74
00:02:38,780 –> 00:02:40,970
که هر چیزی در بین این
75
00:02:40,970 –> 00:02:42,920
تگ های اسکریپت باید در
76
00:02:42,920 –> 00:02:45,380
این مورد به عنوان کد جاوا اسکریپت تفسیر شود که
77
00:02:45,380 –> 00:02:48,290
مرورگر وب آن را اجرا می کند، بنابراین
78
00:02:48,290 –> 00:02:50,210
اولین برنامه ما برای مثال
79
00:02:50,210 –> 00:02:52,220
ممکن است مانند یک خط c باشد. ode در
80
00:02:52,220 –> 00:02:53,900
داخل اسکریپت چیزی شبیه به این را تگ می کند
81
00:02:53,900 –> 00:02:56,570
که به عنوان مثال alert نام
82
00:02:56,570 –> 00:02:58,040
یک تابع است که تابعی است که
83
00:02:58,040 –> 00:03:00,560
یک هشدار تولید می کند و سپس همانطور که با
84
00:03:00,560 –> 00:03:02,090
توابع در توابع پایتون در
85
00:03:02,090 –> 00:03:04,010
جاوا اسکریپت می تواند آرگومان ها را بگیرد، بنابراین در
86
00:03:04,010 –> 00:03:05,780
بین این پرانتز ها یک
87
00:03:05,780 –> 00:03:07,790
آرگومان داریم. چیزی شبیه به یک رشته hello
88
00:03:07,790 –> 00:03:09,350
world متنی که میخواهیم
89
00:03:09,350 –> 00:03:12,050
به کاربر نمایش دهیم، پس بیایید ادامه دهیم
90
00:03:12,050 –> 00:03:13,910
و این را امتحان کنیم و ببینیم چگونه
91
00:03:13,910 –> 00:03:15,620
میتوانیم از این کد برای نوشتن
92
00:03:15,620 –> 00:03:17,840
جاوا اسکریپتی استفاده کنیم که قرار است
93
00:03:17,840 –> 00:03:20,180
در مرورگر وب کاربر اجرا شود. ادامه میدهم
94
00:03:20,180 –> 00:03:22,280
و یک فایل جدید ایجاد
95
00:03:22,280 –> 00:03:26,410
میکنم که hello HTML نامیده میشود و در داخل
96
00:03:26,410 –> 00:03:30,290
آن، همان ساختار اولیه HTML را که
97
00:03:30,290 –> 00:03:31,790
قبلاً دیدهایم، درج میکنم، جایی که یک بخش head دارم
98
00:03:31,790 –> 00:03:33,800
که یک عنوان دارد و سپس یک بدنه
99
00:03:33,800 –> 00:03:36,400
که شاید برای مثال فقط سلام می کند
100
00:03:36,400 –> 00:03:39,620
و حالا کاری که من می خواهم انجام دهم این است که
101
00:03:39,620 –> 00:03:41,540
کمی جاوا اسکریپت را به این صفحه وب اضافه کنم،
102
00:03:41,540 –> 00:03:43,760
بنابراین در قسمت head
103
00:03:43,760 –> 00:03:46,340
صفحه وب من می روم و یک تگ اسکریپت اضافه می
104
00:03:46,340 –> 00:03:48,830
کنم که در آن هستیم. بین این تگ های اسکریپت
105
00:03:48,830 –> 00:03:51,560
در حال حاضر من می توانم کد کد جاوا اسکریپت را بنویسم
106
00:03:51,560 –> 00:03:52,430
که قرار است با جاوا اسکریپت نوشته شود که
107
00:03:52,430 –> 00:03:54,410
108
00:03:54,410 –> 00:03:56,810
وقتی کاربر واقعاً این صفحه را باز می کند در داخل مرورگر وب اجرا می شود
109
00:03:56,810 –> 00:03:58,640
و فعلاً فقط هشدار می دهم
110
00:03:58,640 –> 00:04:03,050
و سپس سلام دنیا
111
00:04:03,050 –> 00:04:04,850
در جاوا اسکریپت معلوم می شود که می توانید
112
00:04:04,850 –> 00:04:06,500
113
00:04:06,500 –> 00:04:08,060
برای نشان دادن رشته ها از گیومه های تک یا دو گیومه
114
00:04:08,060 –> 00:04:09,980
استفاده کنید و من معمولاً از علامت نقل قول تکی
115
00:04:09,980 –> 00:04:12,230
در اینجا فقط طبق قرارداد استفاده می کنم، بنابراین در اینجا
116
00:04:12,230 –> 00:04:13,459
من تابعی به نام هشدار را اجرا می
117
00:04:13,459 –> 00:04:14,690
کنم که
118
00:04:14,690 –> 00:04:16,250
هشداری شبیه به سلام جهان را به کاربر نشان می دهد.
119
00:04:16,250 –> 00:04:18,649
و این در داخل
120
00:04:18,649 –> 00:04:22,940
تگهای اسکریپت این صفحه HTML خواهد بود، بنابراین اگر
121
00:04:22,940 –> 00:04:25,040
بخواهم واقعاً صفحه را باز کنم،
122
00:04:25,040 –> 00:04:27,260
میتوانم hello dot HTML را باز کنم یا
123
00:04:27,260 –> 00:04:28,640
میتوانید آن را در داخل مرورگر وب خود ببینید،
124
00:04:28,640 –> 00:04:29,960
چه کروم یا چیز دیگری
125
00:04:29,960 –> 00:04:32,030
و اکنون در بالای صفحه چیزی
126
00:04:32,030 –> 00:04:33,590
که متوجه خواهید شد این است که من یک هشدار کمی دریافت میکنم،
127
00:04:33,590 –> 00:04:35,780
جایی که
128
00:04:35,780 –> 00:04:37,940
میگوید این صفحه میگوید سلام دنیا را میگوید و
129
00:04:37,940 –> 00:04:39,260
گزینهای به من میدهد که
130
00:04:39,260 –> 00:04:41,539
دکمهای را بپسندم، مثلاً مانند Hello I’d like و
131
00:04:41,539 –> 00:04:43,010
دکمه OK که می گوید بسیار خوب
132
00:04:43,010 –> 00:04:44,390
هشدار را رد کنید
133
00:04:44,390 –> 00:04:46,100
و این اولین مثال ما از
134
00:04:46,100 –> 00:04:47,330
جاوا اسکریپت است، ما تابعی به نام
135
00:04:47,330 –> 00:04:49,550
هشدار را در جاوا اسکریپت برای
136
00:04:49,550 –> 00:04:51,290
مرورگر وب خود داریم و مرورگر وب ما می داند که
137
00:04:51,290 –> 00:04:53,030
وقتی تابع هشدار را فراخوانی می کنیم
138
00:04:53,030 –> 00:04:54,890
مرورگر باید یک پیام هشدار نمایش دهد
139
00:04:54,890 –> 00:04:56,750
که کمی شبیه به آن به نظر می رسد
140
00:04:56,750 –> 00:04:58,640
و اگر روی دکمه ok کلیک کنم تا
141
00:04:58,640 –> 00:05:00,650
هشدار را رد کنم، سپس ادامه می دهیم و
142
00:05:00,650 –> 00:05:03,050
صفحه اصلی را که از
143
00:05:03,050 –> 00:05:06,050
ابتدا داشتم برمی گردانیم و بنابراین اکنون می
144
00:05:06,050 –> 00:05:08,030
توانیم تصور کنیم که با استفاده از این توانایی
145
00:05:08,030 –> 00:05:10,160
نمایش برنامهای هشدارها که
146
00:05:10,160 –> 00:05:12,140
میتوانیم ویژگیهای اضافی را نیز به برنامههای خود اضافه
147
00:05:12,140 –> 00:05:14,330
کنیم و یکی از حوزههای بزرگی
148
00:05:14,330 –> 00:05:15,710
که جاوا اسکریپت میتواند کاملاً
149
00:05:15,710 –> 00:05:18,140
قدرتمند باشد، برنامهنویسی نیست و
150
00:05:18,140 –> 00:05:19,670
آنچه برنامهنویسی رویداد
151
00:05:19,670 –> 00:05:21,590
محور است، فکر کردن به چیزهایی است که
152
00:05:21,590 –> 00:05:23,810
در آن اتفاق میافتد. وب از نظر رویدادهایی
153
00:05:23,810 –> 00:05:25,880
که اتفاق میافتند چه نمونههایی از
154
00:05:25,880 –> 00:05:27,890
رویدادها هستند مواردی مانند
155
00:05:27,890 –> 00:05:30,260
کلیک کاربر روی یک دکمه یا انتخاب
156
00:05:30,260 –> 00:05:31,910
چیزی از یک لیست کشویی یا
157
00:05:31,910 –> 00:05:33,860
کاربر
158
00:05:33,860 –> 00:05:35,690
هر کاری را که کاربر انجام میدهد در فهرست پیمایش میکند یا فرمی را ارسال میکند و
159
00:05:35,690 –> 00:05:37,400
معمولاً میتوان آن را یک رویداد در نظر گرفت و
160
00:05:37,400 –> 00:05:39,740
کاری که میتوانیم با جاوا اسکریپت انجام دهیم، اضافه کردن
161
00:05:39,740 –> 00:05:42,380
شنوندگان رویداد یا کنترلکنندههای رویداد است
162
00:05:42,380 –> 00:05:44,840
که میگویند زمانی که یک رویداد اتفاق میافتد، ادامه دهید
163
00:05:44,840 –> 00:05:47,120
و این بلوک خاص را اجرا کنید. از کد یا
164
00:05:47,120 –> 00:05:49,580
این تابع به عنوان مثال و با استفاده از آن
165
00:05:49,580 –> 00:05:51,380
میتوانیم به کد جاوا اسکریپت خود اجازه
166
00:05:51,380 –> 00:05:53,630
دهیم به نحوه
167
00:05:53,630 –> 00:05:55,670
تعامل کاربر با صفحه وب ما پاسخ
168
00:05:55,670 –> 00:05:57,350
دهد و بگوید وقتی کاربر روی دکمهای کلیک میکند
169
00:05:57,350 –> 00:05:59,230
من میخواهم این
170
00:05:59,230 –> 00:06:02,750
تابع خاص جاوا اسکریپت را برای آن اجرا کنم. به عنوان مثال، بیایید ادامه دهیم
171
00:06:02,750 –> 00:06:04,520
و امتحان کنیم، من ادامه می دهم
172
00:06:04,520 –> 00:06:06,740
و اکنون به جای گفتن
173
00:06:06,740 –> 00:06:09,380
هشدار سلام دنیا، اجازه دهید این هشدار را
174
00:06:09,380 –> 00:06:11,480
در داخل یک تابع قرار دهم و برای ایجاد یک
175
00:06:11,480 –> 00:06:13,550
تابع در جاوا اسکریپت، فقط از
176
00:06:13,550 –> 00:06:15,890
تابع کلمه کلیدی و به دنبال آن نام استفاده کنید.
177
00:06:15,890 –> 00:06:17,090
از تابع، من تابع
178
00:06:17,090 –> 00:06:18,920
hello را به عنوان مثال صدا می زنم و سپس در
179
00:06:18,920 –> 00:06:20,930
پرانتز، هر ورودی که
180
00:06:20,930 –> 00:06:22,670
تابع این تابع hello را
181
00:06:22,670 –> 00:06:24,110
می گیرد، هیچ ورودی نمی گیرد، بنابراین من فقط از یک
182
00:06:24,110 –> 00:06:27,200
مجموعه خالی pa استفاده می کنم. rentheses و سپس
183
00:06:27,200 –> 00:06:29,930
داخل بریسهای فرفری، من هر
184
00:06:29,930 –> 00:06:32,240
کدی را که میخواهم اجرا کنم در این تابع
185
00:06:32,240 –> 00:06:34,940
قرار میدهم، بنابراین کاری که اکنون اینجا انجام دادهام این است که
186
00:06:34,940 –> 00:06:37,340
یک تابع به نام hello ایجاد میکنم و سپس
187
00:06:37,340 –> 00:06:38,810
داخل بریسهای فرفری بدنه تابع را تعریف میکنیم.
188
00:06:38,810 –> 00:06:40,400
189
00:06:40,400 –> 00:06:42,740
وقتی تابع hello را اجرا میکنم چه کدی باید اجرا شود و عملکرد hello
190
00:06:42,740 –> 00:06:45,110
191
00:06:45,110 –> 00:06:46,700
باید یک هشدار نمایش دهد که در این
192
00:06:46,700 –> 00:06:49,700
مورد یک hello world را میگوید، بنابراین اکنون کاری
193
00:06:49,700 –> 00:06:52,580
که میخواهم انجام دهم این است که وقتی اتفاقی میافتد این تابع اجرا شود.
194
00:06:52,580 –> 00:06:55,160
برای
195
00:06:55,160 –> 00:06:57,950
مثال وقتی کاربر روی یک دکمه کلیک
196
00:06:57,950 –> 00:06:59,240
میکند، اولین کاری که
197
00:06:59,240 –> 00:07:01,640
باید انجام دهم این است که در واقع یک دکمه ایجاد کنم، بنابراین
198
00:07:01,640 –> 00:07:03,800
دکمهای اضافه کنید که فقط میگوید اینجا را کلیک کنید،
199
00:07:03,800 –> 00:07:07,460
به عنوان مثال، حالا اگر این
200
00:07:07,460 –> 00:07:11,240
صفحه را بازخوانی کنم، اکنون ببینید که من سلام دارم و
201
00:07:11,240 –> 00:07:12,470
این دکمه را هم دارم که می گوید
202
00:07:12,470 –> 00:07:14,930
اینجا کلیک کنید اما وقتی اینجا کلیک می کنم مثل اینکه هیچ
203
00:07:14,930 –> 00:07:16,160
اتفاقی نمی افتد روی دکمه اینجا کلیک می کنم
204
00:07:16,160 –> 00:07:17,390
اما چیزی تغییر نمی کند
205
00:07:17,390 –> 00:07:19,400
زیرا هنوز نگفته ام که
206
00:07:19,400 –> 00:07:21,950
وقتی کاربر انجام می دهد چه اتفاقی می افتد روی این دکمه کلیک کنید و به این
207
00:07:21,950 –> 00:07:24,110
ترتیب o راهی که میتوانیم این کار را انجام دهیم این
208
00:07:24,110 –> 00:07:27,050
است که یک ویژگی به این
209
00:07:27,050 –> 00:07:30,770
عنصر HTML به نام unclick اضافه کنیم، کاری که این
210
00:07:30,770 –> 00:07:33,020
کار انجام میدهد این است که یک کنترل
211
00:07:33,020 –> 00:07:34,760
کننده کلیک به این دکمه اضافه میکند و
212
00:07:34,760 –> 00:07:36,500
میگوید وقتی کاربر
213
00:07:36,500 –> 00:07:38,720
روی این دکمه کلیک میکند چه اتفاقی میافتد و من
214
00:07:38,720 –> 00:07:40,690
ویژگی onclick را برابر با
215
00:07:40,690 –> 00:07:43,850
اجرای تابع hello قرار می دهم و
216
00:07:43,850 –> 00:07:45,530
برای اجرای یک تابع در جاوا اسکریپت همانطور
217
00:07:45,530 –> 00:07:47,270
که یک تابع را با پایتون اجرا می کنید،
218
00:07:47,270 –> 00:07:49,340
از نام تابع و به دنبال آن
219
00:07:49,340 –> 00:07:51,080
مجموعه ای از پرانتز استفاده می کنید تا بگویید ادامه دهید و
220
00:07:51,080 –> 00:07:53,090
در واقع اجرای این تابع با استفاده از این
221
00:07:53,090 –> 00:07:55,010
پرانتز، تابع را
222
00:07:55,010 –> 00:07:56,630
کلمه دیگری برای اجرای تابع می نامد و این
223
00:07:56,630 –> 00:07:57,980
واقعیت که چیزی بین پرانتزها وجود ندارد به این
224
00:07:57,980 –> 00:07:59,450
معنی است که ما
225
00:07:59,450 –> 00:08:01,610
چیزی را به عنوان ورودی برای تابع hello ارائه نمی دهیم،
226
00:08:01,610 –> 00:08:03,170
اگرچه اگر تابع hello
227
00:08:03,170 –> 00:08:05,210
ورودی ها را دریافت می کرد، مطمئناً می توانستیم ورودی داشته باشیم. اضافه کنید که در
228
00:08:05,210 –> 00:08:08,630
بین پرانتزها، بنابراین حالا من
229
00:08:08,630 –> 00:08:10,520
دو تکه این صفحه را به هم گره زدم
230
00:08:10,520 –> 00:08:12,320
، یک دکمه دارم که می گوید اینجا را کلیک کنید و
231
00:08:12,320 –> 00:08:15,140
یک کنترل کننده onclick اضافه کردم که می
232
00:08:15,140 –> 00:08:16,580
گوید وقتی کلیک کنید ck روی دکمه
233
00:08:16,580 –> 00:08:19,190
باید تابع hello را اجرا کنید و سپس
234
00:08:19,190 –> 00:08:20,720
در بالا من تابع hello را تعریف کردم
235
00:08:20,720 –> 00:08:22,730
تا بگویم
236
00:08:22,730 –> 00:08:24,650
وقتی تابع فراخوانی شد عملکرد hello باید به خوبی انجام دهد، ما
237
00:08:24,650 –> 00:08:26,300
یک هشدار نمایش می دهیم که در این
238
00:08:26,300 –> 00:08:29,210
حالت می گوید hello world بنابراین اکنون
239
00:08:29,210 –> 00:08:32,929
باید بتوانیم صفحه را بازخوانی کنیم
240
00:08:32,929 –> 00:08:34,429
، حداقل در ابتدا همان چیزی را میبینیم
241
00:08:34,429 –> 00:08:35,780
که فقط سلام میگوید و دکمهای که
242
00:08:35,780 –> 00:08:38,630
به من میگوید اینجا را کلیک کنم، اما حالا اگر
243
00:08:38,630 –> 00:08:39,710
جلو بروم و روی دکمهای که میگوید
244
00:08:39,710 –> 00:08:42,200
اینجا را کلیک کنید خوب کلیک کنم هشداری را دریافت کنید
245
00:08:42,200 –> 00:08:44,450
که می گوید این صفحه می گوید hello world من
246
00:08:44,450 –> 00:08:46,580
می توانم ok را فشار دهم و این کنترل کننده رویداد
247
00:08:46,580 –> 00:08:47,810
همیشه کار می کند دوباره روی دکمه کلیک می
248
00:08:47,810 –> 00:08:49,820
کنم و برای بار دوم هشدار دریافت می کنم
249
00:08:49,820 –> 00:08:51,050
زیرا هر بار که روی دکمه کلیک
250
00:08:51,050 –> 00:08:52,760
می کنم تابع hello را صدا می کند.
251
00:08:52,760 –> 00:08:54,710
دوباره و زمانی که روی hello کلیک میکنم وقتی
252
00:08:54,710 –> 00:08:56,450
تابع hello اجرا میشود و
253
00:08:56,450 –> 00:09:00,110
این هشدار خاص را نمایش میدهد، بنابراین
254
00:09:00,110 –> 00:09:02,300
به نظر میرسد که اکنون به ما قدرت نسبتاً زیادی میدهد
255
00:09:02,300 –> 00:09:04,790
و مانند زبانهای دیگر
256
00:09:04,790 –> 00:09:06,650
زبانهای برنامهنویسی مانند Python یا
257
00:09:06,650 –> 00:09:07,820
زبانهای دیگر yo. شما ممکن است با
258
00:09:07,820 –> 00:09:10,040
جاوا اسکریپت کار کرده باشید همه این نوع
259
00:09:10,040 –> 00:09:11,620
ویژگیهای زبانی مشابه دارد تا
260
00:09:11,620 –> 00:09:13,450
کنون ما
261
00:09:13,450 –> 00:09:15,130
انواع دادههایی مانند رشته را دیدهایم، اما انواع دادههای دیگری
262
00:09:15,130 –> 00:09:16,780
نیز داریم که به زودی نگاهی به آنها خواهیم
263
00:09:16,780 –> 00:09:18,610
انداخت.
264
00:09:18,610 –> 00:09:20,380
در جاوا اسکریپت مانند تابع هشدار
265
00:09:20,380 –> 00:09:22,270
و سایر توابع که می توانیم
266
00:09:22,270 –> 00:09:23,890
برای خودمان بنویسیم توابعی مانند hello تعبیه شده اند،
267
00:09:23,890 –> 00:09:25,900
اما ما همچنین این توانایی
268
00:09:25,900 –> 00:09:28,720
را داریم که مواردی مانند متغیرها را در برنامه خود قرار دهیم،
269
00:09:28,720 –> 00:09:31,000
بنابراین آنچه ممکن است به
270
00:09:31,000 –> 00:09:31,330
نظر
271
00:09:31,330 –> 00:09:33,310
خوب باشد، ادامه می دهم و یک فایل جدید ایجاد کنید که
272
00:09:33,310 –> 00:09:37,150
با آن شمارنده HTML نامیده می شود و
273
00:09:37,150 –> 00:09:38,710
شمارنده مقداری از کدهای مشابه
274
00:09:38,710 –> 00:09:39,940
به hello را خواهد داشت، بنابراین من
275
00:09:39,940 –> 00:09:41,980
فعلاً آن را کپی می کنم، اما بخش اسکریپت را پاک می
276
00:09:41,980 –> 00:09:43,960
کنم و عنوان را از hello به
277
00:09:43,960 –> 00:09:48,490
counter تغییر دهید. و حالا در داخل از
278
00:09:48,490 –> 00:09:49,990
شر دکمه خلاص میشوم یا در واقع دکمه را نگه میدارم،
279
00:09:49,990 –> 00:09:52,180
اما به جای گفتن اینجا کلیک
280
00:09:52,180 –> 00:09:55,180
کنید، دکمه میگوید count
281
00:09:55,180 –> 00:09:56,320
من میخواهم برنامهای ایجاد کنم که فقط
282
00:09:56,320 –> 00:09:58,300
برای من از صفر تا یک دو حساب میکند. دو
283
00:09:58,300 –> 00:10:02,080
سه چهار به همین ترتیب و به همین ترتیب و اکنون
284
00:10:02,080 –> 00:10:04,300
برای انجام این کار برای اینکه بتوانم
285
00:10:04,300 –> 00:10:06,310
روشی برای شمارش مکرر صفر یک دو
286
00:10:06,310 –> 00:10:08,980
سه چهار پنج داشته باشم، به
287
00:10:08,980 –> 00:10:10,690
نوعی متغیر در داخل برنامه خود نیاز
288
00:10:10,690 –> 00:10:12,190
دارم که
289
00:10:12,190 –> 00:10:14,380
اطلاعات را ردیابی کند مانند عدد. که من در
290
00:10:14,380 –> 00:10:16,540
حال حاضر برای
291
00:10:16,540 –> 00:10:18,250
انجام این کار در جاوا اسکریپت می توانم
292
00:10:18,250 –> 00:10:21,610
چیزی بگویم اجازه دهید شمارنده برابر با صفر باشد
293
00:10:21,610 –> 00:10:24,010
این روشی است که در جاوا اسکریپت
294
00:10:24,010 –> 00:10:26,680
یک متغیر جدید تعریف می کنم، ابتدا می گویم let
295
00:10:26,680 –> 00:10:28,690
counter یعنی اجازه دهید یک
296
00:10:28,690 –> 00:10:30,820
متغیر جدید به نام وجود داشته باشد. شمارنده و من
297
00:10:30,820 –> 00:10:32,860
در ابتدا مقدار شمارنده را برابر
298
00:10:32,860 –> 00:10:35,830
با عدد صفر قرار می دهم و اکنون وقتی
299
00:10:35,830 –> 00:10:37,510
به جای اجرای تابع hello روی دکمه کلیک
300
00:10:37,510 –> 00:10:39,550
می کنم، می روم
301
00:10:39,550 –> 00:10:42,460
و تابع count را که هنوز وجود ندارد اجرا می کنم.
302
00:10:42,460 –> 00:10:44,500
اما اکنون آن را می نویسم،
303
00:10:44,500 –> 00:10:47,890
تابعی به نام count تعریف می کنم و
304
00:10:47,890 –> 00:10:50,560
تابع count قرار است انجام دهد این
305
00:10:50,560 –> 00:10:53,170
است که ابتدا مقدار شمارنده را افزایش می دهد
306
00:10:53,170 –> 00:10:54,820
و تعدادی از راه هایی که می توانم انجام
307
00:10:54,820 –> 00:10:56,530
دهم این است که شمارنده گفته من برابر است.
308
00:10:56,530 –> 00:10:59,800
شمارنده به اضافه یک برای گفتن برو جلو a nd
309
00:10:59,800 –> 00:11:01,060
مقدار شمارنده را به هر
310
00:11:01,060 –> 00:11:03,280
چیزی که شمارنده به اضافه یک باشد بازنشانی کنید و
311
00:11:03,280 –> 00:11:04,840
چند علامت کوتاه برای این کار وجود دارد، من
312
00:11:04,840 –> 00:11:07,000
می توانم به طور معادل بگویم شمارنده به علاوه
313
00:11:07,000 –> 00:11:09,220
برابر است با یک به شمارنده اضافه کنید
314
00:11:09,220 –> 00:11:12,040
یا در مورد اضافه کردن یک جاوا اسکریپت
315
00:11:12,040 –> 00:11:13,420
بسیار شبیه به زبان هایی مانند زبان c اگر
316
00:11:13,420 –> 00:11:15,130
قبلاً آنها را دیده اید و از نمادهایی
317
00:11:15,130 –> 00:11:17,440
مانند این شمارنده به اضافه پلاس پشتیبانی می کنید که فقط
318
00:11:17,440 –> 00:11:18,880
به این معنی است که مقدار شمارنده
319
00:11:18,880 –> 00:11:20,320
را بگیرید و آن را افزایش دهید 1 به آن
320
00:11:20,320 –> 00:11:22,660
اضافه کنید بنابراین من 1 را به مقدار شمارنده اضافه می
321
00:11:22,660 –> 00:11:25,300
کنم و سپس فقط یک نشان می دهم هشداری
322
00:11:25,300 –> 00:11:28,120
که مقدار فعلی
323
00:11:28,120 –> 00:11:31,360
شمارنده را دارد و بنابراین من
324
00:11:31,360 –> 00:11:32,890
مقدار شمارنده را افزایش دادهام و
325
00:11:32,890 –> 00:11:35,110
سپس هشداری را نشان میدهم که به من نشان میدهد
326
00:11:35,110 –> 00:11:37,089
چه چیزی در داخل شمارنده وجود دارد و
327
00:11:37,089 –> 00:11:41,529
بنابراین اکنون اگر من ادامه دهم و به hello
328
00:11:41,529 –> 00:11:43,750
dot HTML نروم اما برای مقابله با نقطه HTML به جای آن،
329
00:11:43,750 –> 00:11:46,839
اکنون می بینم که هنوز دکمه ای را می بینم که
330
00:11:46,839 –> 00:11:48,579
می گوید count و اگر روی آن دکمه کلیک
331
00:11:48,579 –> 00:11:51,190
کنم، هشداری دریافت می کنم که این بار می گوید یک،
332
00:11:51,190 –> 00:11:52,959
ما مقدار شمارنده را
333
00:11:52,959 –> 00:11:55,180
از صفر به یک افزایش می دهیم، اکنون هشدار می گوید 1.
334
00:11:55,180 –> 00:11:57,579
و من می توانم ok را فشار دهم اگر دوباره count را فشار
335
00:11:57,579 –> 00:12:00,790
دهم، شمارش به 2 میرود، ok را
336
00:12:00,790 –> 00:12:03,160
فشار میدهم، دوباره تعداد را فشار میدهم، به 3 میرود و هر
337
00:12:03,160 –> 00:12:04,660
بار که روی count کلیک میکنم
338
00:12:04,660 –> 00:12:06,880
، مقدار متغیر
339
00:12:06,880 –> 00:12:09,279
شمارنده در صفحه وب جاوا اسکریپت من افزایش مییابد
340
00:12:09,279 –> 00:12:11,140
و سپس یک عدد نمایش داده میشود. هشداری
341
00:12:11,140 –> 00:12:13,540
که قرار است حاوی مقدار
342
00:12:13,540 –> 00:12:14,350
آن متغیر باشد،
343
00:12:14,350 –> 00:12:16,570
بنابراین با استفاده از هشدارها اکنون
344
00:12:16,570 –> 00:12:18,010
میتوانیم دستکاری کنیم که در داخل یک
345
00:12:18,010 –> 00:12:19,390
توابع میتوانیم مقادیر
346
00:12:19,390 –> 00:12:21,250
متغیرها را دستکاری کنیم و سپس هشدارهایی را
347
00:12:21,250 –> 00:12:23,290
نشان دهیم که محتوای آن متغیر ism را نشان میدهد
348
00:12:23,290 –> 00:12:25,029
اما در نهایت زمانی که کاربران در حال تعامل هستند.
349
00:12:25,029 –> 00:12:26,860
در مورد صفحه،
350
00:12:26,860 –> 00:12:28,690
اگر تنها راهی که
351
00:12:28,690 –> 00:12:31,149
باید با کاربر تعامل داشته باشیم،
352
00:12:31,149 –> 00:12:32,860
نمایش این هشدارها باشد، بسیار
353
00:12:32,860 –> 00:12:34,300
آزاردهنده خواهد بود، به جز اینکه
354
00:12:34,300 –> 00:12:35,829
به جای چاپ آن در ترمینال
355
00:12:35,829 –> 00:12:37,810
، آن را از طریق یک هشدار چاپ می کنیم.
356
00:12:37,810 –> 00:12:39,730
بر روی صفحه نمایش ظاهر می شود آنچه در زمینه یک صفحه وب
357
00:12:39,730 –> 00:12:41,380
جالب تر و قدرتمندتر و بسیار
358
00:12:41,380 –> 00:12:42,940
مفیدتر خواهد بود این
359
00:12:42,940 –> 00:12:45,880
است که اگر بتوانیم وب سایت را به صورت برنامه ای به
360
00:12:45,880 –> 00:12:47,829
روز کنیم چیزی را تغییر دهیم. در
361
00:12:47,829 –> 00:12:49,450
صفحه وب، کاربر در واقع مشاهده میکند
362
00:12:49,450 –> 00:12:51,940
که محتوایی که اتفاقاً
363
00:12:51,940 –> 00:12:54,160
در صفحه وجود دارد تغییر میکند و معلوم میشود که جاوا اسکریپت
364
00:12:54,160 –> 00:12:55,630
ما را قادر میسازد این کار را نیز انجام دهیم،
365
00:12:55,630 –> 00:12:57,579
زیرا جاوا اسکریپت به ما اجازه میدهد تا مدل
366
00:12:57,579 –> 00:12:59,860
شی سند Dom را دستکاری
367
00:12:59,860 –> 00:13:01,810
کنیم که همه موارد را نشان میدهد.
368
00:13:01,810 –> 00:13:04,140
عناصری که اتفاقاً در آن صفحه هستند،
369
00:13:04,140 –> 00:13:07,149
بنابراین برای انجام این کار، بیایید جلو برویم و
370
00:13:07,149 –> 00:13:11,050
دوباره به hello HTML برگردیم، این
371
00:13:11,050 –> 00:13:13,180
صفحه وب paté بود که فقط سلام کرد و
372
00:13:13,180 –> 00:13:14,740
دکمهای را به من داد که اگر روی آن
373
00:13:14,740 –> 00:13:16,959
دکمه کلیک کنم، هشداری نشان میدهد که
374
00:13:16,959 –> 00:13:19,720
گفت سلام دنیا حالا کاری که من میخواهم انجام دهم این
375
00:13:19,720 –> 00:13:22,350
است که به جای اینکه تابع hello
376
00:13:22,350 –> 00:13:25,029
یک هشدار را نمایش دهد، میخواهم
377
00:13:25,029 –> 00:13:27,339
چیزی را در صفحه دستکاری کند و
378
00:13:27,339 –> 00:13:29,320
چه چیزی را میخواهم
379
00:13:29,320 –> 00:13:31,420
در بدنه صفحه به خوبی دستکاری کنم.
380
00:13:31,420 –> 00:13:33,220
این عنوان را داشته باشید این عنوان که فقط می گوید
381
00:13:33,220 –> 00:13:35,680
سلام به عنوان مثال که در داخل یک
382
00:13:35,680 –> 00:13:37,870
عنصر h1 است و کاری که ممکن است بخواهم انجام دهم این
383
00:13:37,870 –> 00:13:39,310
است که در واقع
384
00:13:39,310 –> 00:13:42,370
آن عنصر را تغییر دهم چگونه می توانم این کار را به خوبی انجام دهم،
385
00:13:42,370 –> 00:13:44,170
معلوم می شود که در جاوا اسکریپت ما
386
00:13:44,170 –> 00:13:47,080
به یک تابع c دسترسی داریم.
387
00:13:47,080 –> 00:13:50,590
انتخابگر پرس و جوی نقطهای سند و کاری که انتخابکننده پرس و جوی سند
388
00:13:50,590 –> 00:13:52,540
قرار است انجام دهد این است که
389
00:13:52,540 –> 00:13:54,700
به ما این امکان را میدهد
390
00:13:54,700 –> 00:13:57,910
که یک صفحه HTML را بررسی کنیم و یک عنصر را
391
00:13:57,910 –> 00:13:59,620
از آن صفحه استخراج کنیم تا بتوانیم
392
00:13:59,620 –> 00:14:02,860
آن عنصر HTML را با استفاده از کد جاوا اسکریپت
393
00:14:02,860 –> 00:14:05,500
و غیره دستکاری کنیم. اگر بخواهم مانند یک عنصر h1 انتخاب
394
00:14:05,500 –> 00:14:07,839
کنم، میتوانم بگویم انتخابگر پرس و جوی سند
395
00:14:07,839 –> 00:14:10,000
و سپس به عنوان آرگومان
396
00:14:10,000 –> 00:14:11,740
ورودی برای انتخابگر پرس و جوی ما،
397
00:14:11,740 –> 00:14:14,680
ادامه میدهم و میگویم که هر کدام به این معنی است
398
00:14:14,680 –> 00:14:17,680
که از صفحه بروید، یک عنصر h1 برای من پیدا کنید
399
00:14:17,680 –> 00:14:19,300
و انتخابگر پرس و جو است. فقط
400
00:14:19,300 –> 00:14:20,680
یک عنصر را برمی گرداند، بنابراین اگر آنها
401
00:14:20,680 –> 00:14:21,910
چندتایی هستند، اولین
402
00:14:21,910 –> 00:14:24,010
چیزی را که پیدا می کند برمی گرداند، اما در اینجا ما فقط یک
403
00:14:24,010 –> 00:14:26,020
عنصر h1 داریم، بنابراین مشکلی نیست، من می گویم
404
00:14:26,020 –> 00:14:28,810
این سند را نگاه کنید و در عنصر h1 پیدا کنید
405
00:14:28,810 –> 00:14:31,150
و زمانی که آیا میخواهم آن را
406
00:14:31,150 –> 00:14:32,890
دستکاری کنم و روشی که میخواهم آن را
407
00:14:32,890 –> 00:14:36,790
دستکاری کنم، با گفتن نقطه innerhtml
408
00:14:36,790 –> 00:14:41,250
برابر با اجازه دهید به عنوان مثال خداحافظی کنیم
409
00:14:41,250 –> 00:14:44,200
، خوب است، چه اتفاقی در اینجا میافتد، در
410
00:14:44,200 –> 00:14:46,000
ابتدا وقتی
411
00:14:46,000 –> 00:14:48,190
صفحه را بارگذاری میکنیم، یک h1 داریم. یک h بزرگ eading
412
00:14:48,190 –> 00:14:50,530
در بالا که فقط می گوید hello و حالا
413
00:14:50,530 –> 00:14:52,480
وقتی این تابع hello
414
00:14:52,480 –> 00:14:54,070
فراخوانی می شود که با کلیک روی این دکمه فراخوانی می شود
415
00:14:54,070 –> 00:14:55,600
زیرا یک ویژگی روی کلیک دارد
416
00:14:55,600 –> 00:14:58,000
که برابر با hello است که تابع hello را فراخوانی می
417
00:14:58,000 –> 00:15:00,010
کند که تابع hello قرار است
418
00:15:00,010 –> 00:15:01,600
چه کاری انجام دهد. آیا قرار است بگوییم
419
00:15:01,600 –> 00:15:04,839
انتخابگر پرس و جوی سند h1 عنصر h1 را برای من پیدا کنید
420
00:15:04,839 –> 00:15:08,380
که این عنصر
421
00:15:08,380 –> 00:15:10,510
را در اینجا برمی گرداند یک نمایش جاوا اسکریپت
422
00:15:10,510 –> 00:15:13,150
از این عنصر HTML که فقط یک h1 است
423
00:15:13,150 –> 00:15:16,360
که HTML داخل آن سلام می کند و
424
00:15:16,360 –> 00:15:19,390
اگر بخواهم آن HTML را تغییر دهم می توانم این کار
425
00:15:19,390 –> 00:15:21,600
را با تغییر خاصیت HTML داخلی
426
00:15:21,600 –> 00:15:25,030
فیل جاوا اسکریپت به
427
00:15:25,030 –> 00:15:26,890
منظور به روز رسانی ویژگی هر چیزی
428
00:15:26,890 –> 00:15:28,750
در جاوا اسکریپت انجام دهید، معمولاً از این
429
00:15:28,750 –> 00:15:30,910
علامت نقطه استفاده می کنیم.
430
00:15:30,910 –> 00:15:33,310
431
00:15:33,310 –> 00:15:35,529
432
00:15:35,529 –> 00:15:38,350
inner HTML به این معنی است که آن عنصر را بگیرید
433
00:15:38,350 –> 00:15:40,270
و به ویژگی HTML داخلی آن به
434
00:15:40,270 –> 00:15:42,400
برخی از ویژگی های آن شی دسترسی پیدا کنید
435
00:15:42,400 –> 00:15:44,529
و من می خواهم HTML داخلی آن را به روز کنم
436
00:15:44,529 –> 00:15:47,230
تا فقط در این مورد کلمه
437
00:15:47,230 –> 00:15:49,270
خداحافظی پس از b باشد. y یک علامت تعجب
438
00:15:49,270 –> 00:15:50,550
به عنوان مثال
439
00:15:50,550 –> 00:15:53,070
، اکنون آنچه می بینیم این است که وقتی
440
00:15:53,070 –> 00:15:55,500
این صفحه را اجرا می کنیم، وقتی این صفحه را باز می کنیم،
441
00:15:55,500 –> 00:15:59,430
با باز کردن hello HTML، من هنوز
442
00:15:59,430 –> 00:16:01,230
یک h1 را می بینم که می گوید سلام، من هنوز
443
00:16:01,230 –> 00:16:04,290
دکمه ای را می بینم که می گوید اینجا را کلیک کنید اما حالا وقتی
444
00:16:04,290 –> 00:16:05,850
روی دکمه کلیک کردم،
445
00:16:05,850 –> 00:16:08,519
اینجا کلیک کنید، می بینید که سلام به خداحافظی تغییر می
446
00:16:08,519 –> 00:16:09,029
کند،
447
00:16:09,029 –> 00:16:11,550
ما کد جاوا اسکریپت را اجرا کرده ایم که یک
448
00:16:11,550 –> 00:16:13,589
عنصر h1 را در صفحه پیدا می کند و هر بار که کلیک می کنم
449
00:16:13,589 –> 00:16:15,870
آن را به چیزی دیگر از آنچه در ابتدا بود دستکاری می کند.
450
00:16:15,870 –> 00:16:18,000
451
00:16:18,000 –> 00:16:20,550
در اینجا هیچ اتفاق دیگری نمی افتد زیرا هر
452
00:16:20,550 –> 00:16:22,350
بار که اینجا را کلیک می کنم
453
00:16:22,350 –> 00:16:24,510
همان h1 را پیدا می کند و HTML خود را به روز می کند
454
00:16:24,510 –> 00:16:27,420
و آن را از سلام به خداحافظ تغییر می
455
00:16:27,420 –> 00:16:29,670
دهد، بنابراین شاید چیزی که واقعاً دوست دارم در آن
456
00:16:29,670 –> 00:16:32,190
صورت توانایی تغییر به عقب و جلو برای
457
00:16:32,190 –> 00:16:34,019
تغییر وضعیت باشد. بین سلام و
458
00:16:34,019 –> 00:16:35,399
خداحافظی به جای اینکه
459
00:16:35,399 –> 00:16:37,680
هر بار که روی دکمه کلیک میکنم آن را از یک چیز به چیز دیگری تغییر دهم
460
00:16:37,680 –> 00:16:38,730
، میخواهم به
461
00:16:38,730 –> 00:16:40,980
طور متناوب به جلو و عقب تغییر کند و
462
00:16:40,980 –> 00:16:42,209
راههایی وجود دارد که میتوانید تصور کنید این کار را انجام دهید،
463
00:16:42,209 –> 00:16:44,279
اما یکی از راهها این است که برتری گرفتن ge
464
00:16:44,279 –> 00:16:46,290
از شرایط به همان شکلی
465
00:16:46,290 –> 00:16:47,820
که زبانی مانند پایتون دارای
466
00:16:47,820 –> 00:16:50,120
if و LS و
467
00:16:50,120 –> 00:16:53,160
جاوا اسکریپت else نیز دارای if و else if و
468
00:16:53,160 –> 00:16:55,459
469
00:16:55,459 –> 00:16:57,990
غیره است که به ما اجازه میدهد شرایطی را توصیف کنیم که فقط میتوانیم
470
00:16:57,990 –> 00:17:00,180
بلوکهای خاصی از کد را زمانی که یک بولی خاص اجرا کنیم.
471
00:17:00,180 –> 00:17:02,660
عبارت درست است برای مثال،
472
00:17:02,660 –> 00:17:05,250
بنابراین چه شکلی میشود خوب اجازه دهید
473
00:17:05,250 –> 00:17:07,290
جلو برویم و در داخل این تابع hello بگوییم،
474
00:17:07,290 –> 00:17:11,030
من میتوانم یک سوال بپرسم اگر
475
00:17:11,030 –> 00:17:15,150
انتخابگر پرس و جوی سند H ones داخلی
476
00:17:15,150 –> 00:17:22,650
HTML برابر است با hello well، سپس ادامه دهید
477
00:17:22,650 –> 00:17:26,480
و آن را روی Goodbye تنظیم کنید و غیره
478
00:17:26,480 –> 00:17:29,190
سپس ادامه دهید و HTML داخلی
479
00:17:29,190 –> 00:17:32,570
این عنصر h1 را بهروزرسانی کنید و به جای آن آن را روی hello تنظیم کنید،
480
00:17:32,570 –> 00:17:36,540
بنابراین این تابع hello چه
481
00:17:36,540 –> 00:17:37,890
کاری انجام میدهد، اکنون کمی
482
00:17:37,890 –> 00:17:38,760
پیچیدهتر
483
00:17:38,760 –> 00:17:40,860
است، اکنون شرایطی دارد که میگویم
484
00:17:40,860 –> 00:17:42,900
اگر کلمه کلیدی در پرانتز دنبال شود
485
00:17:42,900 –> 00:17:45,059
شرطی که
486
00:17:45,059 –> 00:17:46,500
میخواهم چیزی را که میخواهم ببینم بررسی
487
00:17:46,500 –> 00:17:48,570
کنم درست است یا نه و چیزی که من بررسی میکنم
488
00:17:48,570 –> 00:17:51,809
این است که اجازه دهید سند را
489
00:17:51,809 –> 00:17:54,150
انتخاب کنم query h1 را اجرا کنم که دوباره از
490
00:17:54,150 –> 00:17:56,940
طریق صفحه نگاه میکند، h1 t را برای من پیدا میکند. ag و
491
00:17:56,940 –> 00:17:59,040
492
00:17:59,040 –> 00:18:02,460
اگر به آن HTML داخلی نگاه کنم اگر مساوی hello است به آن عنصر
493
00:18:02,460 –> 00:18:04,350
برسم، میخواهم کاری انجام دهم و این
494
00:18:04,350 –> 00:18:04,980
495
00:18:04,980 –> 00:18:06,870
علامت تساوی سهگانه روش جاوا اسکریپت برای بررسی
496
00:18:06,870 –> 00:18:08,580
دقیق برابری بررسی است تا
497
00:18:08,580 –> 00:18:11,100
مطمئن شود دو مقدار برابر هستند و همچنین اینکه
498
00:18:11,100 –> 00:18:12,870
انواع آنها همان چیزی است که اگر
499
00:18:12,870 –> 00:18:14,820
این یک رشته است، باید یک رشته نیز باشد،
500
00:18:14,820 –> 00:18:16,650
در جاوا اسکریپت
501
00:18:16,650 –> 00:18:18,270
نیز روش ضعیف تری برای بررسی برابری است
502
00:18:18,270 –> 00:18:21,270
که فقط از دو علامت مساوی استفاده می کند و
503
00:18:21,270 –> 00:18:23,520
می خواهد مقادیر را بررسی کند.
504
00:18:23,520 –> 00:18:25,440
یکسان است اما
505
00:18:25,440 –> 00:18:27,930
کمی تفاوت در نوع ایجاد می کند، این دو چیز
506
00:18:27,930 –> 00:18:29,550
ممکن است انواع مختلفی داشته باشند، اما
507
00:18:29,550 –> 00:18:31,380
تا زمانی که اساساً مقدار یکسانی داشته
508
00:18:31,380 –> 00:18:32,910
باشند، علامت دو برابری
509
00:18:32,910 –> 00:18:35,610
معمولاً ممکن است صادق باشد، اگر می
510
00:18:35,610 –> 00:18:37,440
توانید از این علامت تساوی سه گانه استفاده کنید
511
00:18:37,440 –> 00:18:39,360
تا مطمئن شوید که نه
512
00:18:39,360 –> 00:18:40,650
تنها انواع یکسان هستند، بلکه
513
00:18:40,650 –> 00:18:42,480
مقادیر نیز یکسان هستند و
514
00:18:42,480 –> 00:18:43,710
علامت مساوی سه گانه هر دو مورد را بررسی می
515
00:18:43,710 –> 00:18:46,860
کند، بنابراین اگر من ادامه دهم و عنصر h1
516
00:18:46,860 –> 00:18:49,110
و درونی آن را پیدا کنم. HTML i کلمه
517
00:18:49,110 –> 00:18:52,110
hello را خوب بنویسید و سپس ادامه دهید و عنصر h1 را پیدا کنید
518
00:18:52,110 –> 00:18:53,900
و HTML داخلی آن را به روز کنید و
519
00:18:53,900 –> 00:18:57,060
آن را برابر با خداحافظی قرار دهید به عنوان مثال
520
00:18:57,060 –> 00:19:00,540
و در غیر این صورت ادامه دهید و همان عنصر h1 را پیدا کنید که
521
00:19:00,540 –> 00:19:03,120
HTML داخلی به روز شده است آن را برابر
522
00:19:03,120 –> 00:19:05,730
با hello قرار دهید و دوباره درست مانند توابعی
523
00:19:05,730 –> 00:19:07,260
که در آن وجود دارد. ما از این پرانتزها برای
524
00:19:07,260 –> 00:19:09,420
محصور کردن بدنه تابع استفاده می کنیم تا
525
00:19:09,420 –> 00:19:11,040
تمام خطوط کدی که در داخل
526
00:19:11,040 –> 00:19:13,020
تابع هستند جاوا اسکریپت همین کار
527
00:19:13,020 –> 00:19:15,000
را با داخل یک شرط انجام می دهد زمانی که
528
00:19:15,000 –> 00:19:16,950
می خواهیم بیان کنیم که این در داخل
529
00:19:16,950 –> 00:19:19,170
بدنه یک شرط if است. من میتوانم از پرانتزهای فرفری
530
00:19:19,170 –> 00:19:21,180
برای گفتن این خط کد در آن
531
00:19:21,180 –> 00:19:22,950
خط کد که در داخل
532
00:19:22,950 –> 00:19:25,020
عبارت if یا داخل
533
00:19:25,020 –> 00:19:27,990
عبارت else است استفاده کنم، بنابراین بیایید جلو برویم
534
00:19:27,990 –> 00:19:29,490
و این را امتحان کنیم اکنون میتوانم ادامه دهم و
535
00:19:29,490 –> 00:19:31,280
hello dot HTML را باز کنم و
536
00:19:31,280 –> 00:19:33,750
آن را تازه کنم در حال حاضر
537
00:19:33,750 –> 00:19:36,530
با دکمهای که میگوید اینجا را کلیک کنید میگوید سلام و حالا
538
00:19:36,530 –> 00:19:39,540
وقتی اینجا را کلیک میکنم hello به خداحافظی تغییر میکند
539
00:19:39,540 –> 00:19:41,730
و وقتی دوباره اینجا را کلیک میکنم
540
00:19:41,730 –> 00:19:44,040
خداحافظ به سلام برمیگردد و هر
541
00:19:44,040 –> 00:19:45,720
بار که روی دکمه کلیک میکنم
542
00:19:45,720 –> 00:19:47,100
شرطبندی جایگزین میشود. با سلام و خداحافظ،
543
00:19:47,100 –> 00:19:48,960
زیرا ما یا در
544
00:19:48,960 –> 00:19:51,450
عبارت if گرفتار می شویم یا در عبارت else گرفتار می شویم،
545
00:19:51,450 –> 00:19:54,150
اکنون چند جا وجود دارد
546
00:19:54,150 –> 00:19:55,380
که می توانید به این نگاه کنید و
547
00:19:55,380 –> 00:19:56,880
متوجه شوید که شاید
548
00:19:56,880 –> 00:19:58,830
این کد به اندازه ای که این کد به طور بالقوه می تواند کارآمد
549
00:19:58,830 –> 00:20:00,960
نباشد. و به یاد بیاورید که هر بار که
550
00:20:00,960 –> 00:20:03,600
انتخابگر پرس و جوی سند را اجرا می کنیم تا بگوییم ادامه دهید
551
00:20:03,600 –> 00:20:05,160
و سعی کنید یک عنصر HTML خاص را
552
00:20:05,160 –> 00:20:07,770
برای من
553
00:20:07,770 –> 00:20:09,690
پیدا کنید، در آن صفحه جستجو می کنیم و عنصر h1 را پیدا می کنیم
554
00:20:09,690 –> 00:20:11,400
و معلوم می شود که در
555
00:20:11,400 –> 00:20:13,860
حال حاضر سه فراخوان جداگانه داریم. انتخابگر پرس و جو
556
00:20:13,860 –> 00:20:15,390
حتی اگر تنها دو مورد از آنها
557
00:20:15,390 –> 00:20:16,860
روی هر نمونه مشخصی
558
00:20:16,860 –> 00:20:18,050
از تابع اجرا می شوند، اما
559
00:20:18,050 –> 00:20:20,090
یک انتخابگر پرس و جو را مستند می کنیم، سپس
560
00:20:20,090 –> 00:20:22,610
دوباره آن را در داخل عبارت if فراخوانی می کنیم،
561
00:20:22,610 –> 00:20:24,620
احتمالاً می توانیم طراحی این
562
00:20:24,620 –> 00:20:27,050
صفحه را با فاکتورگیری آن با نگاه کردن، بهبود بخشیم.
563
00:20:27,050 –> 00:20:29,270
یک بار برای عنصر h1 و سپس
564
00:20:29,270 –> 00:20:31,460
دستکاری و بررسی آن با استفاده از
565
00:20:31,460 –> 00:20:33,770
عنصری که پیدا کرده ایم و برای
566
00:20:33,770 –> 00:20:35,840
انجام این کار، می توانیم یک عنصر را در
567
00:20:35,840 –> 00:20:37,490
داخل یک متغیر ذخیره کنیم، به همان روشی که یک
568
00:20:37,490 –> 00:20:39,560
متغیر می تواند یک عدد مانند
569
00:20:39,560 –> 00:20:41,840
شمارنده یا رشتهای مانند hello world را
570
00:20:41,840 –> 00:20:44,240
ذخیره کنید، همچنین میتواند مقادیر دیگری مانند یک
571
00:20:44,240 –> 00:20:46,880
عنصر HTML را که از انتخابگر پرس و جوی Document Dog دریافت میکنیم ذخیره کند،
572
00:20:46,880 –> 00:20:49,010
بنابراین میتوانم بگویم
573
00:20:49,010 –> 00:20:53,420
چیزی مانند اجازه دهید عنوان ما عنوان
574
00:20:53,420 –> 00:20:55,640
میکنیم فقط نام یک متغیر است. برابر
575
00:20:55,640 –> 00:20:59,270
با انتخابگر پرس و جوی سند h1 برای
576
00:20:59,270 –> 00:21:01,580
مثال عنصر h1 را
577
00:21:01,580 –> 00:21:03,110
در متغیری به نام عنوان ذخیره کنید و
578
00:21:03,110 –> 00:21:05,900
اکنون به جای انتخابگر پرس و جو سند،
579
00:21:05,900 –> 00:21:07,940
هر کدام همیشه میتوانم بگویم که
580
00:21:07,940 –> 00:21:10,130
آیا عنوان داخلی HTML hello است،
581
00:21:10,130 –> 00:21:12,920
سپس عنوانها را در HTML داخلی تنظیم کنید.
582
00:21:12,920 –> 00:21:13,340
خداحافظ،
583
00:21:13,340 –> 00:21:15,830
در غیر این صورت، سرفصلهای HTML داخلی
584
00:21:15,830 –> 00:21:16,850
را روی hello تنظیم
585
00:21:16,850 –> 00:21:18,290
میکنم، بنابراین کارایی برنامه را بهبود بخشیدهام،
586
00:21:18,290 –> 00:21:20,210
اما تعداد
587
00:21:20,210 –> 00:21:21,650
کاراکترهای کدی را که مجبور به
588
00:21:21,650 –> 00:21:23,210
نوشتن آنها هستم نیز کاهش دادهام، اکنون خطوط من بسیار کوتاهتر
589
00:21:23,210 –> 00:21:25,040
شده و خواندن آنها کمی آسانتر است. این را
590
00:21:25,040 –> 00:21:27,320
به عنوان یک بهبود در طراحی در نظر می گیریم و به
591
00:21:27,320 –> 00:21:29,210
نظر می رسد که یک بهبود دیگر وجود دارد
592
00:21:29,210 –> 00:21:31,790
که می توانیم در اینجا نیز انجام دهیم که
593
00:21:31,790 –> 00:21:33,950
می توانیم متغیری مانند اجازه دهید چیزی
594
00:21:33,950 –> 00:21:35,900
برابر با چیز دیگری باشد، اما به نظر می رسد
595
00:21:35,900 –> 00:21:37,430
که JavaSc ript چند
596
00:21:37,430 –> 00:21:40,040
راه برای تعریف یک متغیر به ما می دهد و اگر
597
00:21:40,040 –> 00:21:41,990
می خواهیم متغیری ایجاد کنیم که
598
00:21:41,990 –> 00:21:44,420
مقدار آن هرگز تغییر
599
00:21:44,420 –> 00:21:46,250
نمی کند، هرگز
600
00:21:46,250 –> 00:21:48,590
نام متغیر را به چیز دیگری تخصیص نمی دهیم، به جای اینکه
601
00:21:48,590 –> 00:21:50,870
اجازه دهیم می توانیم آن را اعمال کنیم.
602
00:21:50,870 –> 00:21:53,900
با نامگذاری متغیر Const هرگز تغییر نخواهد کرد،
603
00:21:53,900 –> 00:21:56,780
بنابراین عنوان Const برابر است با انتخابگر پرس و جوی سند
604
00:21:56,780 –> 00:21:59,210
h1 به این معنی که من
605
00:21:59,210 –> 00:22:01,220
متغیری به نام سرفصل ایجاد می کنم و آن را برابر
606
00:22:01,220 –> 00:22:03,560
با نتیجه انتخابگر پرس و جوی سند
607
00:22:03,560 –> 00:22:07,040
h1 قرار می دهم و دیگر هرگز عنوان مساوی را تغییر نمی دهم
608
00:22:07,040 –> 00:22:08,660
. به من هرگز
609
00:22:08,660 –> 00:22:10,040
خط دیگری از کد نخواهم داشت که بگوید عنوان
610
00:22:10,040 –> 00:22:12,290
با چیز دیگری برابر است زیرا
611
00:22:12,290 –> 00:22:13,910
ثابت است و جاوا اسکریپت سپس
612
00:22:13,910 –> 00:22:15,560
اعمال می کند که این متغیر نباید
613
00:22:15,560 –> 00:22:17,630
تغییر کند و اگر من سعی کردم آن را تغییر دهم
614
00:22:17,630 –> 00:22:19,220
جاوا اسکریپت به من یک خطا می دهد و
615
00:22:19,220 –> 00:22:21,470
این فقط می تواند باشد. برای جلوگیری
616
00:22:21,470 –> 00:22:23,360
از رفتار ناخواسته احتمالی مفید است
617
00:22:23,360 –> 00:22:25,280
که اگر میدانید متغیری
618
00:22:25,280 –> 00:22:27,050
دارید هرگز تغییر نمیکند، اغلب
619
00:22:27,050 –> 00:22:29,990
برای برچسب زدن آن به عنوان یک پاسبان خوب طراحی شده است
620
00:22:29,990 –> 00:22:31,340
تا شما و سایر همکاران
621
00:22:31,340 –> 00:22:31,740
622
00:22:31,740 –> 00:22:33,750
افرادی که به کد شما نگاه میکنند، میدانند که هرگز
623
00:22:33,750 –> 00:22:36,990
مقداری نخواهد داشت که بعداً تغییر میکند، بنابراین در
624
00:22:36,990 –> 00:22:39,450
جایی که سلام میگوید، به همان صورت عمل میکند،
625
00:22:39,450 –> 00:22:41,370
اما من میتوانم آن را به عقب و
626
00:22:41,370 –> 00:22:44,190
جلو تغییر دهم و آن را به خداحافظی
627
00:22:44,190 –> 00:22:47,040
تغییر دهم و سپس آن را به دوباره تغییر دهم. سلام مجدد و بنابراین
628
00:22:47,040 –> 00:22:49,020
اکنون با استفاده از این توانایی این توانایی برای
629
00:22:49,020 –> 00:22:51,059
دستکاری سپیده دم می توانیم به
630
00:22:51,059 –> 00:22:53,040
برنامه شمارنده خود برگردیم و در واقع آن را
631
00:22:53,040 –> 00:22:55,530
بهبود بخشیم که در حال حاضر برنامه شمارنده
632
00:22:55,530 –> 00:22:58,320
من شمارش می کنم و هشداری را نشان می دهد
633
00:22:58,320 –> 00:23:00,120
که می گوید 1 من می شمارم و یک هشدار نمایش می
634
00:23:00,120 –> 00:23:02,220
دهد. که می گوید 2 من احتمالاً می توانم
635
00:23:02,220 –> 00:23:04,350
کمی بهتر از این کار کنم به
636
00:23:04,350 –> 00:23:06,330
جای اینکه یک هشدار در واقع
637
00:23:06,330 –> 00:23:09,210
Dom را به گونه ای دستکاری کنم که من
638
00:23:09,210 –> 00:23:11,190
دوست دارم این h1 به این بزرگی
639
00:23:11,190 –> 00:23:13,020
در بالای صفحه باشد به جای شروع
640
00:23:13,020 –> 00:23:15,179
کردن با گفتن hello let’s it
641
00:23:15,179 –> 00:23:18,270
با گفتن 0 شروع کنید برای مثال فقط
642
00:23:18,270 –> 00:23:21,000
مقداری اولیه برای شمارنده و حالا
643
00:23:21,000 –> 00:23:22,530
وقتی مقدار شمارنده را افزایش
644
00:23:22,530 –> 00:23:24,630
میدهم به جای نمایش هشداری که فقط
645
00:23:24,630 –> 00:23:26,309
مقدار شمارنده را در یک هشدار به من میگوید.
646
00:23:26,309 –> 00:23:28,890
647
00:23:28,890 –> 00:23:33,980
انتخابگر پرس و جو سند tead say h1 . innerhtml
648
00:23:33,980 –> 00:23:38,940
برابر است با شمارنده جایی که من می گویم
649
00:23:38,940 –> 00:23:41,400
عنصر h1 به روز شده را پیدا کنید
650
00:23:41,400 –> 00:23:43,740
innerhtml آن را برابر با
651
00:23:43,740 –> 00:23:46,500
هر مقدار متغیر شمارنده به گونه ای تنظیم کنید
652
00:23:46,500 –> 00:23:48,600
که اکنون اگر این صفحه را تازه کنم
653
00:23:48,600 –> 00:23:50,460
مقدار این h1 در ابتدا 0 است که
654
00:23:50,460 –> 00:23:52,260
مقدار اولیه است اما هر زمانی که روی
655
00:23:52,260 –> 00:23:54,510
count کلیک می کنم، محتویات آن عنصر h1 را به روز می
656
00:23:54,510 –> 00:23:56,520
کنیم و این بار
657
00:23:56,520 –> 00:23:59,730
آن را روی 1 2 3 4 تنظیم می کنیم و به همین ترتیب هر بار
658
00:23:59,730 –> 00:24:01,260
که دکمه شمارش را کلیک می کنم،
659
00:24:01,260 –> 00:24:02,910
مقدار متغیر را افزایش می دهیم و همچنین مقدار متغیر
660
00:24:02,910 –> 00:24:05,190
را دستکاری می کنیم. Dom در واقع
661
00:24:05,190 –> 00:24:08,730
برای ایجاد
662
00:24:08,730 –> 00:24:10,679
اثری که میخواهم در این صفحه واقعی ببینم، تغییراتی ایجاد میکند
663
00:24:10,679 –> 00:24:13,800
و میتوانیم منطق اضافی را
664
00:24:13,800 –> 00:24:15,540
به آن اضافه کنیم، شاید من
665
00:24:15,540 –> 00:24:17,580
گاهی اوقات هشدار میخواهم، اما
666
00:24:17,580 –> 00:24:19,500
هر بار که میخواهم هشدار نمیخواهم. میتوانستم
667
00:24:19,500 –> 00:24:20,970
یک شرط اضافه کنم میتوانم چیزی بگویم
668
00:24:20,970 –> 00:24:22,440
اگر فقط میخواهم
669
00:24:22,440 –> 00:24:24,660
هر بار که به مضرب 10 میشمارم یک هشدار نشان دهم
670
00:24:24,660 –> 00:24:26,730
مانند 10 و 20 و 30 و 40 و 50 و
671
00:24:26,730 –> 00:24:28,800
غیره، میتوانم شرطی اضافه کنم
672
00:24:28,800 –> 00:24:32,790
که بگوید اگر counter mod 10 و فقط مد
673
00:24:32,790 –> 00:24:34,890
وقتی بر 10 تقسیم می کنید، باقیمانده من را دریافت می کند،
674
00:24:34,890 –> 00:24:36,390
بنابراین اگر شمارنده را بگیرید، آن را بر 10 تقسیم کنید،
675
00:24:36,390 –> 00:24:39,330
اگر باقیمانده 0 باشد، وقتی من بر 10 تقسیم می کنم،
676
00:24:39,330 –> 00:24:41,309
به این معنی است که شمارنده
677
00:24:41,309 –> 00:24:43,530
مضرب 10 است و بنابراین من اکنون می توانم
678
00:24:43,530 –> 00:24:45,990
هشداری را نشان دهم که در آن می توانم annele را نشان دهم.
679
00:24:45,990 –> 00:24:48,059
که میگوید میخواهم چیزی بگویم
680
00:24:48,059 –> 00:24:50,520
که شمارنده اکنون 10 است یا
681
00:24:50,520 –> 00:24:52,710
شمارنده اکنون 20 است و برای انجام
682
00:24:52,710 –> 00:24:54,390
آن چیزی که واقعاً میخواهم انجام دهم این است
683
00:24:54,390 –> 00:24:58,020
که راهی برای وصل کردن یک متغیر
684
00:24:58,020 –> 00:25:00,960
به رشتهای در جاوا اسکریپت و
685
00:25:00,960 –> 00:25:02,550
پایتون داشته باشم. روشی که ما این کار را انجام میدادیم به این صورت
686
00:25:02,550 –> 00:25:04,860
است که شما f4 را اضافه میکنید و F را
687
00:25:04,860 –> 00:25:06,179
جلوی رشته ایجاد میکنید تا یک
688
00:25:06,179 –> 00:25:08,280
رشته قالببندی شده ایجاد کنید و سپس من
689
00:25:08,280 –> 00:25:10,800
میگفتم چیزی شبیه شمارش اکنون است و
690
00:25:10,800 –> 00:25:13,500
سپس از بریسهای فرفری استفاده میکنم تا بگویم ادامه دهید
691
00:25:13,500 –> 00:25:15,210
و چاپ کنید. مقدار شمارنده را مشخص کنید،
692
00:25:15,210 –> 00:25:17,309
بنابراین این رشته با فرمت f4 و به دنبال آن
693
00:25:17,309 –> 00:25:18,870
این رشته، همان روشی بود که در
694
00:25:18,870 –> 00:25:20,250
پایتون انجام میدادیم، به
695
00:25:20,250 –> 00:25:22,110
نظر میرسد جاوا اسکریپت همان کار را انجام میدهد
696
00:25:22,110 –> 00:25:24,120
فقط با نحو کمی متفاوت
697
00:25:24,120 –> 00:25:27,090
، به جای استفاده از F از F استفاده نمیکند.
698
00:25:27,090 –> 00:25:28,860
سهمیه منظم
699
00:25:28,860 –> 00:25:30,559
700
00:25:30,559 –> 00:25:33,330
جاوا اسکریپت از این بکتیک ها استفاده می کند
701
00:25:33,330 –> 00:25:35,400
که معمولاً بالای کلید tab
702
00:25:35,400 –> 00:25:38,700
در یک U.S استاندارد قرار دارند. صفحه کلید و
703
00:25:38,700 –> 00:25:40,410
این چیزی را ایجاد می کند که جاوا اسکریپت
704
00:25:40,410 –> 00:25:42,420
آن را تحت اللفظی قالب می نامد که در آن من می توانم
705
00:25:42,420 –> 00:25:43,800
مقدار یک متغیر را در
706
00:25:43,800 –> 00:25:46,380
جایی در داخل این الگو جایگزین
707
00:25:46,380 –> 00:25:48,390
کنم و سپس به منظور انجام
708
00:25:48,390 –> 00:25:50,670
جایگزینی در حالی که پایتون از
709
00:25:50,670 –> 00:25:52,650
پرانتزهای فرفری دوتایی برای گفتن مقدار plug in استفاده می کند.
710
00:25:52,650 –> 00:25:54,570
کانتر در اینجا جاوا اسکریپت
711
00:25:54,570 –> 00:25:56,190
کاری مشابه انجام می دهد، همچنین از بریس های دوبل فرفری استفاده می کند،
712
00:25:56,190 –> 00:25:57,870
اما باید یک
713
00:25:57,870 –> 00:25:59,550
علامت دلار در جلوی آن علامت دلار وجود داشته
714
00:25:59,550 –> 00:26:01,410
باشد و سپس بریس های دابل فرفری دلار،
715
00:26:01,410 –> 00:26:03,540
می توانیم جلو برویم و
716
00:26:03,540 –> 00:26:06,600
مقدار یک متغیر را در آنجا وصل کنیم تا این
717
00:26:06,600 –> 00:26:09,090
سپس یک الگوی تحت اللفظی است که در آن هر بار
718
00:26:09,090 –> 00:26:11,040
که به مضربی از ده
719
00:26:11,040 –> 00:26:12,600
میرسیم، هشداری را نشان میدهیم که میگوید
720
00:26:12,600 –> 00:26:15,420
شمارش اکنون است و سپس این پرانتز فرفری علامت دلاری به این
721
00:26:15,420 –> 00:26:17,700
معنی است که در واقع هر
722
00:26:17,700 –> 00:26:20,429
مقداری که مقدار شمارنده
723
00:26:20,429 –> 00:26:23,309
وجود دارد را وصل کنید. بنابراین اکنون اگر من جلوتر بروم و
724
00:26:23,309 –> 00:26:26,100
شمارنده رفرش را از صفر شروع کنم، می توانم 3
725
00:26:26,100 –> 00:26:28,980
4 5 6 7 8 9 بشمارم، اما وقتی به 10 رسیدم
726
00:26:28,980 –> 00:26:30,960
، هشداری دریافت می کنم که می گوید شمارش اکنون
727
00:26:30,960 –> 00:26:33,630
10 است و سپس به روز رسانی نتیجه را می بینم.
728
00:26:33,630 –> 00:26:36,210
در صفحه و به طوری که به معنای واقعی کلمه
729
00:26:36,210 –> 00:26:38,700
به ما اجازه می دهد تا متغیرها و
730
00:26:38,700 –> 00:26:40,770
رشته ها را ترکیب کنیم تا رشته های جدیدی تولید
731
00:26:40,770 –> 00:26:43,440
کنیم که قادر به نمایش داده ها در
732
00:26:43,440 –> 00:26:46,770
داخل آنها هستند، بنابراین اکنون چه پیشرفت هایی
733
00:26:46,770 –> 00:26:48,420
می توانیم شروع کنیم تا چه تغییراتی در
734
00:26:48,420 –> 00:26:49,770
این ایجاد کنیم. برای بهبود
735
00:26:49,770 –> 00:26:51,720
طراحی آن یک چیز به خصوص از
736
00:26:51,720 –> 00:26:53,550
آنجایی که برنامههای ما کمی
737
00:26:53,550 –> 00:26:54,809
738
00:26:54,809 –> 00:26:57,059
پیچیدهتر میشوند این است که ما اغلب
739
00:26:57,059 –> 00:27:00,330
نمیخواهیم کد جاوا اسکریپت خود را
740
00:27:00,330 –> 00:27:02,460
با محتویات HTML خود در
741
00:27:02,460 –> 00:27:04,470
اینجا مخلوط کنیم. دکمه روی کلیک برابر است
742
00:27:04,470 –> 00:27:06,330
، نام این تابع را بشمارید و
743
00:27:06,330 –> 00:27:08,370
به خصوص وقتی صفحه ما
744
00:27:08,370 –> 00:27:10,260
شروع به پیچیده تر شدن می کند،
745
00:27:10,260 –> 00:27:12,059
اگر
746
00:27:12,059 –> 00:27:13,890
دائما مجبور به حفظ
747
00:27:13,890 –> 00:27:15,360
کمی کد جاوا اسکریپت مانند برقراری
748
00:27:15,360 –> 00:27:17,429
تماس با یک عملکرد داخل HTML
749
00:27:17,429 –> 00:27:19,049
ما کمی بعد خواهیم دید
750
00:27:19,049 –> 00:27:20,580
که پارادایم های دیگری وجود دارند که در واقع این نوع چیزها را تشویق می کنند،
751
00:27:20,580 –> 00:27:22,740
اما در حال حاضر ممکن است
752
00:27:22,740 –> 00:27:24,630
شروع به طراحی کمی ضعیف کند
753
00:27:24,630 –> 00:27:26,580
اگر ما واقعی باشیم من دوست دارم تمام
754
00:27:26,580 –> 00:27:28,769
کدهای مربوط به جاوا اسکریپت خود را از تمام
755
00:27:28,769 –> 00:27:31,130
HTML ساختار کلی صفحه خود جدا کنیم
756
00:27:31,130 –> 00:27:33,539
و بنابراین راه هایی وجود دارد که می توانیم این کار را شروع کنیم،
757
00:27:33,539 –> 00:27:36,110
می توانم یک شنونده رویداد
758
00:27:36,110 –> 00:27:39,419
در داخل جاوا اسکریپت به آن اضافه کنم تا بتوانم چیزی شبیه به آن بگویم.
759
00:27:39,419 –> 00:27:43,529
760
00:27:43,529 –> 00:27:48,330
دکمه انتخابگر پرس و جوی نقطه سند و سپس می توانم بگویم نقطه
761
00:27:48,330 –> 00:27:53,610
روی کلیک برابر است با شمارش، بنابراین اینجا چه خبر
762
00:27:53,610 –> 00:27:55,590
است و من می توانم به جای این کار را انجام دهم.
763
00:27:55,590 –> 00:27:57,570
764
00:27:57,570 –> 00:28:00,419
765
00:28:00,419 –> 00:28:02,789
و به نظر می
766
00:28:02,789 –> 00:28:04,200
رسد اینجا فقط یک دکمه وجود دارد، بنابراین
767
00:28:04,200 –> 00:28:05,429
خوب است، اگرچه اگر تعداد بیشتری وجود داشت،
768
00:28:05,429 –> 00:28:06,750
ممکن است کمی دقیق تر
769
00:28:06,750 –> 00:28:09,659
باشم، اما وقتی آن دکمه را دریافت
770
00:28:09,659 –> 00:28:11,549
کردم، به ویژگی کلیک دسترسی پیدا می
771
00:28:11,549 –> 00:28:14,580
کنم و تنظیم می کنم آن را برابر با count
772
00:28:14,580 –> 00:28:17,279
و آنچه count count می کند نام
773
00:28:17,279 –> 00:28:19,440
یک تابع count است که خودش یک تابع است
774
00:28:19,440 –> 00:28:22,080
و بنابراین چیزی که من اینجا می گویم این است که می
775
00:28:22,080 –> 00:28:24,360
خواهم مقدار
776
00:28:24,360 –> 00:28:26,370
خاصیت onclick دکمه را برابر با شمارش count قرار دهم.
777
00:28:26,370 –> 00:28:27,899
تابعی که باید
778
00:28:27,899 –> 00:28:31,320
در زمانی اجرا شود روی دکمه e کلیک میشود و
779
00:28:31,320 –> 00:28:33,570
متوجه میشوید که من در واقع
780
00:28:33,570 –> 00:28:35,370
تابع it’s not count را فراخوانی نمیکنم و سپس
781
00:28:35,370 –> 00:28:37,049
پرانتزهایی که
782
00:28:37,049 –> 00:28:39,120
تابع count را اجرا میکنند و سپس مقدار بازگشتی آن را دریافت
783
00:28:39,120 –> 00:28:40,980
میکنند و از آن به عنوان مقدار
784
00:28:40,980 –> 00:28:43,409
onclick استفاده میکنم. فقط روی کلیک برابر تنظیم میکنم.
785
00:28:43,409 –> 00:28:45,929
به معنای واقعی کلمه به خود تابع شمارش
786
00:28:45,929 –> 00:28:47,279
بدون فراخوانی تابع
787
00:28:47,279 –> 00:28:49,769
و کاری که قرار است انجام دهد این
788
00:28:49,769 –> 00:28:51,389
است که وقتی دکمه روی آن کلیک میشود
789
00:28:51,389 –> 00:28:53,700
و تنها در این صورت باید
790
00:28:53,700 –> 00:28:55,799
این تابع شمارش را اجرا کنید و
791
00:28:55,799 –> 00:28:56,760
ما آن را اجرا نمیکنیم.
792
00:28:56,760 –> 00:29:00,000
تابع count تا زمانی که روی آن دکمه واقعاً
793
00:29:00,000 –> 00:29:02,010
کلیک شود و بنابراین در جاوا اسکریپت،
794
00:29:02,010 –> 00:29:04,679
توابع را می توان به عنوان مقادیر
795
00:29:04,679 –> 00:29:06,809
خاص خود در نظر گرفت، همانطور که می توانید یک متغیر
796
00:29:06,809 –> 00:29:08,669
برابر با یک رشته تنظیم کنید، همانطور که می توانید یک
797
00:29:08,669 –> 00:29:10,559
متغیر را برابر با یک عدد صحیح تنظیم کنید، همانطور که
798
00:29:10,559 –> 00:29:12,480
می توانید یک متغیر را تنظیم کنید. برابر با مانند یک
799
00:29:12,480 –> 00:29:14,160
عنصر HTML مانند نتیجه
800
00:29:14,160 –> 00:29:16,470
انتخابگر پرس و جو سند، همچنین می توانید یک
801
00:29:16,470 –> 00:29:18,990
متغیر برابر با تابعی
802
00:29:18,990 –> 00:29:21,060
مانند count تنظیم کنید و آن را به عنوان یک
803
00:29:21,060 –> 00:29:23,550
مقدار ارسال کنید، همانطور که با هر مقدار دیگری می توانید آن را به عنوان یک مقدار ارسال کنید.
804
00:29:23,550 –> 00:29:25,050
e و این پارادایم است که ما
805
00:29:25,050 –> 00:29:26,640
عموماً آن را برنامه نویسی تابعی
806
00:29:26,640 –> 00:29:29,400
می نامیم که در آن توابعی را به عنوان مقادیر
807
00:29:29,400 –> 00:29:30,780
چیزهای خاص خود داریم که می توانیم
808
00:29:30,780 –> 00:29:33,000
چیزهایی را تغییر دهیم که می توانیم آنها را تغییر دهیم همانطور که
809
00:29:33,000 –> 00:29:36,780
می توانیم هر مقدار دیگری داشته باشیم، بنابراین اکنون می توانم
810
00:29:36,780 –> 00:29:38,220
با ادامه دادن این برنامه را اجرا کنم.
811
00:29:38,220 –> 00:29:40,170
و صفحه را بازخوانی می کنم
812
00:29:40,170 –> 00:29:43,140
، آن را روی صفر بازخوانی می کنم، شمارش را فشار می دهم و بسیار خوب
813
00:29:43,140 –> 00:29:45,150
به نظر می رسد هیچ اتفاقی نمی افتد، هنوز
814
00:29:45,150 –> 00:29:47,460
صفر است، می خواهم در حال شمارش باشد اما
815
00:29:47,460 –> 00:29:49,500
به نظر نمی رسد که کار کند، پس چرا
816
00:29:49,500 –> 00:29:51,270
هر زمانی که در جاوا اسکریپت با مشکل مواجه شدید.
817
00:29:51,270 –> 00:29:52,500
در جایی که
818
00:29:52,500 –> 00:29:54,210
اغلب رفتاری را که میخواهید دریافت نمیکنید،
819
00:29:54,210 –> 00:29:55,710
نگاه کردن به کنسول جاوا اسکریپت میتواند مفید باشد،
820
00:29:55,710 –> 00:29:57,780
جایی که کنسول جاوا اسکریپت
821
00:29:57,780 –> 00:29:59,550
معادل پنجره ترمینال
822
00:29:59,550 –> 00:30:00,780
است و زمانی که
823
00:30:00,780 –> 00:30:02,610
برنامه جنگو خود را در پایتون اجرا میکنید که
824
00:30:02,610 –> 00:30:04,290
هر پیام خطایی را نمایش میدهد.
825
00:30:04,290 –> 00:30:06,300
کنسول جاوا اسکریپت هر یک
826
00:30:06,300 –> 00:30:08,130
از اطلاعات ثبت جاوا اسکریپت و
827
00:30:08,130 –> 00:30:10,980
پیامهای خطا را در کروم نشان
828
00:30:10,980 –> 00:30:12,870
میدهد، اگر ابتدا به سراغ آن بروم و به بررسی بروم و سپس کنسول را باز کنم، میتوانم به آن برسم.
829
00:30:12,870 –> 00:30:15,840
830
00:30:15,840 –> 00:30:18,420
تب e در اینجا و کاملاً خوب به نظر
831
00:30:18,420 –> 00:30:20,040
می رسد که در اینجا نوعی خطا داریم، این یک
832
00:30:20,040 –> 00:30:23,010
خطای نوع غیرمجاز است که می گوید ما نمی توانیم
833
00:30:23,010 –> 00:30:27,210
ویژگی را روی کلیک بدون
834
00:30:27,210 –> 00:30:30,120
نقطه HTML خط 18 تنظیم کنیم، بنابراین به طور کلی
835
00:30:30,120 –> 00:30:31,590
به شما می گوید که خطا از
836
00:30:31,590 –> 00:30:33,990
کجا می آید. مقابله با HTML در خط 18
837
00:30:33,990 –> 00:30:36,330
و به نظر می رسد مشکل اینجاست، اما من
838
00:30:36,330 –> 00:30:38,460
سعی می کنم به ویژگی on click
839
00:30:38,460 –> 00:30:41,400
no و no دسترسی داشته باشم روشی جاوا اسکریپت برای
840
00:30:41,400 –> 00:30:43,350
بیان چیزی که وجود ندارد مانند هیچ
841
00:30:43,350 –> 00:30:46,470
، بنابراین به نوعی سعی می کنم
842
00:30:46,470 –> 00:30:48,450
onclick را تنظیم کنم. ویژگی no well
843
00:30:48,450 –> 00:30:50,370
بیایید ببینیم در خط 18 چه خبر است و
844
00:30:50,370 –> 00:30:52,590
ببینیم آیا میتوانیم بفهمیم آنجا چه اتفاقی میافتد،
845
00:30:52,590 –> 00:30:53,280
846
00:30:53,280 –> 00:30:55,830
خوب اینجا خط 18 است که میگویم
847
00:30:55,830 –> 00:30:57,420
دکمه انتخابکننده پرس و جو نقطهای سند را
848
00:30:57,420 –> 00:30:59,910
تنظیم میکند که روی ویژگی کلیک برابر با
849
00:30:59,910 –> 00:31:02,280
شمارش است و اکنون آنچه به نظر میرسد
850
00:31:02,280 –> 00:31:04,230
مشکل اینجا خوب پیغام خطا این بود
851
00:31:04,230 –> 00:31:06,540
که من سعی می کردم
852
00:31:06,540 –> 00:31:09,150
ویژگی onclick no well را در اینجا تغییر دهم پس
853
00:31:09,150 –> 00:31:11,400
ویژگی onclick است، پس چرا این
854
00:31:11,400 –> 00:31:13,770
دکمه انتخاب پرس و جو سند برمی
855
00:31:13,770 –> 00:31:16,050
گردد یا خروجی بدون
856
00:31:16,050 –> 00:31:18,360
چاه به من می دهد. انتخابگر پرس و جوی نقطه سند
857
00:31:18,360 –> 00:31:20,400
اگر
858
00:31:20,400 –> 00:31:22,590
نتواند چیزی را پیدا کند اگر من تلاش کنم و
859
00:31:22,590 –> 00:31:24,480
دکمه ای را پیدا کنم اما نتواند دکمه ای را پیدا کند،
860
00:31:24,480 –> 00:31:26,160
کمی عجیب به نظر می رسد، پوچ برمی گردد،
861
00:31:26,160 –> 00:31:27,600
زیرا دکمه ای در پایین
862
00:31:27,600 –> 00:31:27,930
اینجا
863
00:31:27,930 –> 00:31:31,260
24 وجود دارد که من می خواهم مانند اینکه کد جاوا اسکریپت من
864
00:31:31,260 –> 00:31:33,210
بتواند زمانی که انتخابگر پرس و جو را اجرا می
865
00:31:33,210 –> 00:31:35,490
کند پیدا کند و سعی می کند دکمه را پیدا کند،
866
00:31:35,490 –> 00:31:37,290
زیرا معلوم می شود که این کمی
867
00:31:37,290 –> 00:31:38,580
از نحوه عملکرد مرورگر است،
868
00:31:38,580 –> 00:31:40,380
اما اگر مرورگر کد ما را
869
00:31:40,380 –> 00:31:42,240
از از بالا به پایین فقط آن را از
870
00:31:42,240 –> 00:31:44,460
خط یک به بعد بخوانید و سپس
871
00:31:44,460 –> 00:31:46,920
به خط 18 می رسد، جایی که گفتم
872
00:31:46,920 –> 00:31:48,780
دکمه انتخابگر پرس و جو سند روی کلیک برابر است با
873
00:31:48,780 –> 00:31:51,030
تعداد و سعی می کند
874
00:31:51,030 –> 00:31:53,430
دکمه ای را در خط 18 پیدا کند اما دکمه نشان داده نمی
875
00:31:53,430 –> 00:31:56,040
شود. در صفحه HTML من تا
876
00:31:56,040 –> 00:31:58,230
پایین تر از صفحه، بنابراین در این
877
00:31:58,230 –> 00:31:59,790
مرحله که به این خط از
878
00:31:59,790 –> 00:32:01,800
جاوا اسکریپت می رسیم جاوا اسکریپت به دنبال
879
00:32:01,800 –> 00:32:04,080
دکمه است اما Dom بدنه
880
00:32:04,080 –> 00:32:06,450
صفحه بارگیری کامل نشده است و
881
00:32:06,450 –> 00:32:08,640
محتوای Dom هنوز بارگذاری نشده است. هنوز بارگذاری شده است و در
882
00:32:08,640 –> 00:32:10,800
نتیجه ما هیچ هستیم نمیتوانیم این دکمه را پیدا کنیم،
883
00:32:10,800 –> 00:32:12,720
پس چگونه این مشکل را حل کنیم،
884
00:32:12,720 –> 00:32:14,400
چگونه آن را به دست بیاوریم تا در واقع بتوانیم
885
00:32:14,400 –> 00:32:16,590
دکمه را بخواهیم و در
886
00:32:16,590 –> 00:32:18,210
واقع دکمه را به خوبی دریافت کنیم، به نظر میرسد که
887
00:32:18,210 –> 00:32:19,560
چند استراتژی وجود دارد که میتوانیم از
888
00:32:19,560 –> 00:32:22,230
یکی استفاده کنیم. تگ اسکریپت را بردارید و ادامه دهید
889
00:32:22,230 –> 00:32:24,120
و فقط آن را به قسمت پایین
890
00:32:24,120 –> 00:32:26,070
بدنه منتقل کنید تا بعد از اینکه
891
00:32:26,070 –> 00:32:27,270
دکمه ای را که می گوید
892
00:32:27,270 –> 00:32:29,070
count را تعریف کردیم، سپس تگ اسکریپت را داریم که
893
00:32:29,070 –> 00:32:30,810
می گوید خوب برو جلو و حالا
894
00:32:30,810 –> 00:32:32,400
دکمه را پیدا کن و حالا ما قادر خواهیم بود
895
00:32:32,400 –> 00:32:34,560
آن را پیدا کنیم، به نظر می رسد راه دیگری است و شاید
896
00:32:34,560 –> 00:32:37,740
یک راه رایج تر این باشد که در عوض
897
00:32:37,740 –> 00:32:40,080
یک شنونده رویداد دیگر اضافه کنیم و
898
00:32:40,080 –> 00:32:41,700
یک شنونده رویداد را نه به دکمه،
899
00:32:41,700 –> 00:32:44,190
بلکه به کل سندی که
900
00:32:44,190 –> 00:32:46,020
سند یک متغیر است، اضافه می کنیم. در این
901
00:32:46,020 –> 00:32:47,610
جاوا اسکریپت تعبیه شده است که ما در صفحه وب به آن دسترسی داریم
902
00:32:47,610 –> 00:32:49,890
که فقط به کل این سند وب اشاره می کند،
903
00:32:49,890 –> 00:32:52,170
جایی که من قبلاً از
904
00:32:52,170 –> 00:32:54,330
انتخابگر پرس و جو سند برای
905
00:32:54,330 –> 00:32:55,920
جستجوی کل سند وب در تلاش برای یافتن یک
906
00:32:55,920 –> 00:32:57,960
دکمه یا تلاش برای یافتن برچسب h1 برای آن استفاده کرده ام.
907
00:32:57,960 –> 00:33:00,690
مثال اما من همچنین می توانم یک رویداد
908
00:33:00,690 –> 00:33:03,600
شنونده را به خود سند اضافه کنم
909
00:33:03,600 –> 00:33:05,880
و برای انجام این کار می توانم بگویم document dot
910
00:33:05,880 –> 00:33:10,260
add event listener و زمانی که با افزودن
911
00:33:10,260 –> 00:33:12,000
رویداد شنونده تماس می گیرم و می توانم این کار را روی هر
912
00:33:12,000 –> 00:33:13,950
عنصر HTML انجام دهم نه فقط سند بلکه
913
00:33:13,950 –> 00:33:15,660
می توانم این تابع را اجرا کنم. روی یک دکمه یا
914
00:33:15,660 –> 00:33:17,430
روی یک عنصر h1 یا هر عنصر دیگر HTML
915
00:33:17,430 –> 00:33:19,380
اضافه کردن رویداد شنونده
916
00:33:19,380 –> 00:33:21,900
معمولاً دو آرگومان می گیرد که
917
00:33:21,900 –> 00:33:24,420
اولی این است که رویدادی را که می خواهم برای رویداد گوش دهم
918
00:33:24,420 –> 00:33:26,250
می تواند چیزی شبیه کلیک کردن باشد
919
00:33:26,250 –> 00:33:28,110
وقتی روی سند کلیک می کنم ممکن است
920
00:33:28,110 –> 00:33:30,690
چیزی شبیه به آن باشد. به عنوان مثال، وقتی در صفحه ای اسکرول می کنم،
921
00:33:30,690 –> 00:33:32,640
اما رویدادی که
922
00:33:32,640 –> 00:33:34,080
قرار است به آن گوش دهم، یک
923
00:33:34,080 –> 00:33:36,810
رویداد خاص به نام محتوای Dom بارگیری می شود
924
00:33:36,810 –> 00:33:40,620
و رویداد بارگیری محتوای Dom رویدادی است
925
00:33:40,620 –> 00:33:41,820
926
00:33:41,820 –> 00:33:44,370
که با Dom سند، استخدام یا راه اندازی می شود.
927
00:33:44,370 –> 00:33:45,930
مدل شی
928
00:33:45,930 –> 00:33:48,210
ساختار صفحه بارگیری انجام می شود زمانی که تمام
929
00:33:48,210 –> 00:33:49,410
عناصر صفحه بارگیری می شوند
930
00:33:49,410 –> 00:33:51,840
و محتوای Dom بارگیری شده است و سپس
931
00:33:51,840 –> 00:33:54,390
اگر یک شنونده رویداد را به آن ضمیمه کنم، می
932
00:33:54,390 –> 00:33:56,190
دانید هر کدی را که می خواهم اجرا کنید. برای
933
00:33:56,190 –> 00:33:58,620
اجرا که فقط باید پس از بارگیری کامل Dom اجرا شود، پس از
934
00:33:58,620 –> 00:34:00,780
بارگیری تمام
935
00:34:00,780 –> 00:34:03,660
محتوای صفحه و
936
00:34:03,660 –> 00:34:06,060
آرگومان دوم برای شنونده رویداد این است
937
00:34:06,060 –> 00:34:09,389
که وقتی رویداد
938
00:34:09,389 –> 00:34:10,920
واقعاً اتفاق می افتد زمانی که محتوای Dom
939
00:34:10,920 –> 00:34:13,110
بارگیری شده اتفاق می افتد چه عملکردی باید اجرا شود.
940
00:34:13,110 –> 00:34:15,120
اگر نام تابعی را داشتم که میخواستم آن را ارسال کنم، میتوانستم به نام تابعی ارسال کنم،
941
00:34:15,120 –> 00:34:16,980
942
00:34:16,980 –> 00:34:19,440
اما جاوا اسکریپت به من اجازه
943
00:34:19,440 –> 00:34:22,290
میدهد که مستقیماً یک تابع را در اینجا
944
00:34:22,290 –> 00:34:24,719
در آرگومان بنویسم تا شنونده رویداد اضافه کنم،
945
00:34:24,719 –> 00:34:27,210
فقط میتوانم تابع را بگویم و سپس مجموعه ای از
946
00:34:27,210 –> 00:34:28,560
پرانتز به این معنی است که تابع
947
00:34:28,560 –> 00:34:30,900
هیچ ورودی نمی گیرد و سپس در پرانتزهای فرفری
948
00:34:30,900 –> 00:34:33,449
می توانم بدنه تابع را
949
00:34:33,449 –> 00:34:37,290
دقیقاً در اینجا به عنوان آرگومان دوم برای افزودن
950
00:34:37,290 –> 00:34:38,850
شنونده رویداد اضافه کنم و این
951
00:34:38,850 –> 00:34:40,260
کمی دستور پیچیده برای جمع کردن ذهن شما است.
952
00:34:40,260 –> 00:34:41,250
اگر قبلاً آن را ندیدهاید،
953
00:34:41,250 –> 00:34:43,110
اما راه بزرگ برای فکر کردن به آن این
954
00:34:43,110 –> 00:34:45,150
است که اضافه کردن رویداد شنونده دو
955
00:34:45,150 –> 00:34:47,550
آرگومان را میگیرد، یکی رویداد،
956
00:34:47,550 –> 00:34:49,679
دوم تابع است، بنابراین اینجا اول رویداد
957
00:34:49,679 –> 00:34:51,750
Dom بارگیری شده است و ثانیه
958
00:34:51,750 –> 00:34:54,480
آرگومان ond یک تابع است و من
959
00:34:54,480 –> 00:34:55,860
تابع را مانند قبل اعلام می کنم، فقط با استفاده از
960
00:34:55,860 –> 00:34:57,780
تابع، نامی به تابع نداده ام،
961
00:34:57,780 –> 00:34:59,910
زیرا به طور دقیق
962
00:34:59,910 –> 00:35:00,960
، به نام نیازی ندارد،
963
00:35:00,960 –> 00:35:02,220
من هرگز به این
964
00:35:02,220 –> 00:35:04,080
تابع با نام اشاره نمی کنم، بنابراین آنچه را میتوانیم
965
00:35:04,080 –> 00:35:06,210
یک تابع ناشناس بنامیم، تابعی است
966
00:35:06,210 –> 00:35:08,790
که نامی ندارد، اما من همچنان
967
00:35:08,790 –> 00:35:10,530
آن را به عنوان آرگومان به تابع شنونده رویداد افزوده میدهم،
968
00:35:10,530 –> 00:35:13,260
زیرا میخواهم
969
00:35:13,260 –> 00:35:15,420
پس از بارگیری Dom، کد را در داخل تابع اجرا
970
00:35:15,420 –> 00:35:17,640
کنم و بنابراین در داخل تابع
971
00:35:17,640 –> 00:35:19,590
پرانتزهای فرفری محتوای آن
972
00:35:19,590 –> 00:35:21,450
تابع محتوای کدی است که باید
973
00:35:21,450 –> 00:35:23,340
در زمان بارگیری Dom اجرا شود و
974
00:35:23,340 –> 00:35:25,260
سپس در انتها دوباره فقط از این
975
00:35:25,260 –> 00:35:27,180
پرانتز انتهایی استفاده کردم که در آن
976
00:35:27,180 –> 00:35:28,800
پرانتز انتهایی با این پرانتز ردیف میشود،
977
00:35:28,800 –> 00:35:31,350
در اینجا
978
00:35:31,350 –> 00:35:33,870
همه موارد را در بر میگیرد. آرگومان هایی برای اضافه کردن شنونده رویداد
979
00:35:33,870 –> 00:35:35,310
که در آن اولی محتوای Dom
980
00:35:35,310 –> 00:35:37,770
بارگیری شده است و دومی کل این
981
00:35:37,770 –> 00:35:40,170
تابع است که ممکن است چندین خط را در بر بگیرد،
982
00:35:40,170 –> 00:35:42,120
بنابراین در جاوا اسکریپت تقریباً این نحو را خواهید دید،
983
00:35:42,120 –> 00:35:45,270
اما اکنون آنچه را که می خواهم
984
00:35:45,270 –> 00:35:47,400
do این است که شنونده رویداد را به
985
00:35:47,400 –> 00:35:49,590
دکمه اضافه کنم من می توانم به جلو و فقط برای مکان بروم
986
00:35:49,590 –> 00:35:52,170
و آن را اینجا قرار دهم و معلوم شد که اگر
987
00:35:52,170 –> 00:35:52,740
می خواستم به
988
00:35:52,740 –> 00:35:54,540
جای گفتن نقطه روی کلیک برابر با
989
00:35:54,540 –> 00:35:55,710
تعداد، می توانید
990
00:35:55,710 –> 00:35:57,119
از همان نحو افزودن
991
00:35:57,119 –> 00:35:58,380
رویدادlistener استفاده کنید که می توانم بگویم در
992
00:35:58,380 –> 00:36:02,190
رویداد listener کلیک کنید و سپس شمارش کنید به
993
00:36:02,190 –> 00:36:04,950
این معنی که زمانی که رویداد کلیک اتفاق می افتد، ادامه دهید
994
00:36:04,950 –> 00:36:06,690
و تابع شمارش را اجرا کنید، اما می
995
00:36:06,690 –> 00:36:08,400
توانید به طور معادل این را کوتاه کنید و فقط
996
00:36:08,400 –> 00:36:11,040
بگویید نقطه روی کلیک برابر است با تعداد و
997
00:36:11,040 –> 00:36:13,650
این کار به همان اندازه کار می کند، بنابراین اکنون آنچه
998
00:36:13,650 –> 00:36:15,839
در اینجا می گوییم این است که صبر کنید تا
999
00:36:15,839 –> 00:36:17,400
بارگذاری Dom انجام شود صبر کنید تا تمام
1000
00:36:17,400 –> 00:36:19,650
محتوای صفحه بارگیری شود و سپس
1001
00:36:19,650 –> 00:36:21,690
ادامه دهید و این تابع را اجرا کنید و کاری
1002
00:36:21,690 –> 00:36:23,369
که قرار است انجام دهد این است
1003
00:36:23,369 –> 00:36:25,440
که کنترل کننده رویداد را به این
1004
00:36:25,440 –> 00:36:27,540
دکمه اضافه می کند و کار می کند. چون اکنون
1005
00:36:27,540 –> 00:36:29,369
میتوانیم دکمه را پیدا کنیم، زیرا
1006
00:36:29,369 –> 00:36:31,410
اکنون تمام محتوای Dom
1007
00:36:31,410 –> 00:36:34,560
بارگذاری شده است، بنابراین اگر به Refresh
1008
00:36:34,560 –> 00:36:36,660
counter dot HTML برگردم، متوجه خواهید شد که
1009
00:36:36,660 –> 00:36:38,609
خطای جاوا اسکریپت برطرف میشود، به نظر نمیرسد آن
1010
00:36:38,609 –> 00:36:41,190
را داشته باشم. خطا دیگر و اکنون اگر
1011
00:36:41,190 –> 00:36:43,020
count را فشار دهم میتوانستم
1012
00:36:43,020 –> 00:36:46,740
افزایش تعداد را نیز مانند قبل ببینم و بنابراین
1013
00:36:46,740 –> 00:36:48,869
این پیشرفتی است نسبت به آنچه
1014
00:36:48,869 –> 00:36:50,900
قبلاً داشتم و اکنون میتوانم
1015
00:36:50,900 –> 00:36:53,910
کد جاوا اسکریپت خود را
1016
00:36:53,910 –> 00:36:56,369
از بقیه کدهایم جدا کنم. همانطور
1017
00:36:56,369 –> 00:36:58,650
که در مورد CSS که در آن ما
1018
00:36:58,650 –> 00:37:00,390
توانستیم CSS را که در ابتدا
1019
00:37:00,390 –> 00:37:02,430
در سر صفحه ما قرار داشت برداریم و آن را به
1020
00:37:02,430 –> 00:37:04,109
یک فایل جداگانه منتقل کنیم، می توانید همین
1021
00:37:04,109 –> 00:37:05,730
کار را با جاوا اسکریپت نیز انجام دهید و این می
1022
00:37:05,730 –> 00:37:07,140
تواند مفید باشد. چند
1023
00:37:07,140 –> 00:37:08,760
نفر روی فایلهای مختلف کار میکنند که میخواهید یک
1024
00:37:08,760 –> 00:37:10,800
نفر روی HTML کار کند و شخص
1025
00:37:10,800 –> 00:37:12,869
دیگری روی جاوا اسکریپت کار کند،
1026
00:37:12,869 –> 00:37:15,000
اگر انتظار دارید یکی از این
1027
00:37:15,000 –> 00:37:16,200
موارد بیشتر
1028
00:37:16,200 –> 00:37:17,520
از دیگری تغییر کند، میتواند مفید باشد، بنابراین ممکن
1029
00:37:17,520 –> 00:37:19,200
است نیازی به بارگیری نباشد. دیگری هر چند وقت یکبار
1030
00:37:19,200 –> 00:37:21,480
بنابراین می تواند ارزش بیشتری برای جدا کردن
1031
00:37:21,480 –> 00:37:23,790
کد HTML از جاوا اسکریپت ما داشته باشد
1032
00:37:23,790 –> 00:37:25,830
و با انتقال جاوا اسکریپت خود به یک
1033
00:37:25,830 –> 00:37:28,020
فایل جداگانه و بنابراین برای انجام این کار
1034
00:37:28,020 –> 00:37:31,109
می توانم یک فایل جدید ایجاد کنم که
1035
00:37:31,109 –> 00:37:33,930
فقط شمارنده j نامیده می شود. /s که باهم خواهد شد
1036
00:37:33,930 –> 00:37:37,170
تمام جاوا اسکریپت را برای فایل HTML شمارنده من
1037
00:37:37,170 –> 00:37:39,960
ذخیره کنید، بنابراین برای انجام آن چیزی که می
1038
00:37:39,960 –> 00:37:42,390
توانم بگویم این است که بیایید جلو برویم و همه
1039
00:37:42,390 –> 00:37:44,790
این کد جاوا اسکریپت را کپی کنیم و آن
1040
00:37:44,790 –> 00:37:46,859
را از این صفحه برش دهیم و من آن را در
1041
00:37:46,859 –> 00:37:48,690
شمارنده j/ پیست کنم. مقداری از آن تورفتگی را حذف کنید،
1042
00:37:48,690 –> 00:37:53,010
بنابراین اکنون فایلی به نام
1043
00:37:53,010 –> 00:37:55,320
counter das دارم که فقط شامل
1044
00:37:55,320 –> 00:37:57,690
تمام جاوا اسکریپتی است که میخواهم در
1045
00:37:57,690 –> 00:38:01,740
صفحه HTML نقطه شمارنده خود اجرا کنم و اکنون به جای
1046
00:38:01,740 –> 00:38:03,510
اینکه جاوا اسکریپت واقعی را
1047
00:38:03,510 –> 00:38:06,390
بین این تگهای اسکریپت قرار دهم، آنچه میتوانم
1048
00:38:06,390 –> 00:38:10,109
بگویم اسکریپت است. SRC SRC ابتدا
1049
00:38:10,109 –> 00:38:14,700
برابر با یک شمارنده Jas است، به عنوان مثال، اگر من
1050
00:38:14,700 –> 00:38:17,579
پیشروی کنم و شمارنده Jas را ارجاع دهم و از
1051
00:38:17,579 –> 00:38:20,190
آن جاوا اسکریپت در سر صفحه
1052
00:38:20,190 –> 00:38:22,049
در اینجا استفاده کنم و سپس
1053
00:38:22,049 –> 00:38:23,910
دقیقاً به همان روشی کار می کند که من هنوز هم می توانم
1054
00:38:23,910 –> 00:38:25,829
به اندازه من بشمارم. دوست دارم
1055
00:38:25,829 –> 00:38:27,150
هر بار که شمارش به مضرب ده میرسد هشداری دریافت
1056
00:38:27,150 –> 00:38:29,430
میکنم، اما HTML من اکنون
1057
00:38:29,430 –> 00:38:31,079
کمی سادهتر است، فقط بدنه
1058
00:38:31,079 –> 00:38:33,180
آن فقط h1 در دکمه است و سپس
1059
00:38:33,180 –> 00:38:36,270
تمام جاوا اسکریپت من اکنون در یک
1060
00:38:36,270 –> 00:38:39,000
فایل جداگانه قرار دارد. که به من اجازه انجام این کار را می
1061
00:38:39,000 –> 00:38:41,280
دهد که به من اجازه می دهد تا k کد HTML من و
1062
00:38:41,280 –> 00:38:42,599
کد جاوا اسکریپت من از یکدیگر جدا هستند
1063
00:38:42,599 –> 00:38:44,520
و
1064
00:38:44,520 –> 00:38:46,680
اگر من
1065
00:38:46,680 –> 00:38:49,200
کد جاوا اسکریپت مشترکی داشته باشم که توسط
1066
00:38:49,200 –> 00:38:51,720
چندین صفحه مختلف
1067
00:38:51,720 –> 00:38:53,880
HTML استفاده می شود چندین صفحه HTML می توانند همه یک منبع جاوا اسکریپت را شامل شوند، می تواند به چند دلیل ارزشمند
1068
00:38:53,880 –> 00:38:55,950
باشد. به جای اینکه نیاز به
1069
00:38:55,950 –> 00:38:56,640
تکرار خودم
1070
00:38:56,640 –> 00:38:58,619
از جاوا اسکریپت یکسان در چندین
1071
00:38:58,619 –> 00:39:00,660
صفحه مختلف داشته باشم، فقط می توانم از
1072
00:39:00,660 –> 00:39:02,460
جاوا اسکریپت یکسان در همه آنها استفاده کنم و
1073
00:39:02,460 –> 00:39:04,440
این نیز مفید خواهد بود زیرا بعداً شروع
1074
00:39:04,440 –> 00:39:05,910
به بررسی برخی از کتابخانه های جاوا اسکریپت می کنیم
1075
00:39:05,910 –> 00:39:07,710
که جاوا اسکریپت نوشته شده
1076
00:39:07,710 –> 00:39:09,960
توسط دیگران است. افرادی که فقط می توانیم
1077
00:39:09,960 –> 00:39:11,819
جاوا اسکریپت دیگران را در
1078
00:39:11,819 –> 00:39:14,309
صفحات وب خود اضافه کنیم فقط با افزودن یک برچسب اسکریپت
1079
00:39:14,309 –> 00:39:16,049
در بالای صفحه خود که
1080
00:39:16,049 –> 00:39:17,490
منبع خاصی را مشخص می کند که ممکن است قبلاً
1081
00:39:17,490 –> 00:39:19,650
با بوت استرپ تعامل داشته باشید که
1082
00:39:19,650 –> 00:39:21,660
کد جاوا اسکریپت خود را دارد و می توانید
1083
00:39:21,660 –> 00:39:23,789
بوت استرپ جاوا اسکریپت را فقط با استفاده از آن اضافه کنید. شامل
1084
00:39:23,789 –> 00:39:26,520
یک تگ اسکریپت در بالای صفحه HTML ما
1085
00:39:26,520 –> 00:39:28,920
به منظور گفتن ادامه دادن و گنجاندن
1086
00:39:28,920 –> 00:39:32,750
تمام آن جاوا اسکریپت در صفحه ما نیز هست.
1087
00:39:32,750 –> 00:39:35,430
اکنون چه کار دیگری می توانیم انجام دهیم
1088
00:39:35,430 –> 00:39:37,289
که این توانایی را داریم که
1089
00:39:37,289 –> 00:39:39,270
عناصر Dom را لایک کنیم و در واقع محتوای آنها را به
1090
00:39:39,270 –> 00:39:41,430
خوبی دستکاری کنیم. یکی از کارهایی که می توانیم انجام دهیم این است
1091
00:39:41,430 –> 00:39:43,740
که صفحات خود را کمی
1092
00:39:43,740 –> 00:39:45,359
تعاملی تر کنیم و در واقع به
1093
00:39:45,359 –> 00:39:47,789
آنچه کاربران انجام می دهند پاسخ دهند. صفحه ای که
1094
00:39:47,789 –> 00:39:50,039
آیا کاربر چیزی را در آن تایپ می کند یا شاید
1095
00:39:50,039 –> 00:39:52,170
فرمی را پر می کند، بنابراین بیایید ادامه دهیم
1096
00:39:52,170 –> 00:39:53,760
و نمونه ای از آن را امتحان کنیم که
1097
00:39:53,760 –> 00:39:55,260
در آن کاربر ممکن است فرمی را پر کند
1098
00:39:55,260 –> 00:39:57,270
و ما می خواهیم کد ما به
1099
00:39:57,270 –> 00:39:59,369
نحوی به آنچه که هست پاسخ دهد. که آنها تایپ میکنند،
1100
00:39:59,369 –> 00:40:01,380
من ادامه میدهم و به
1101
00:40:01,380 –> 00:40:05,789
hello dot HTML برمیگردم و اکنون در داخل
1102
00:40:05,789 –> 00:40:07,859
بدنه صفحه، در بالای صفحه سلام
1103
00:40:07,859 –> 00:40:09,779
کردهام، من اینجا هستم بهجای دکمه،
1104
00:40:09,779 –> 00:40:13,319
میخواهم فرمی از این HTML داشته باشم. فرم
1105
00:40:13,319 –> 00:40:14,609
شبیه فرمهای HTML است که قبلاً دیدهایم
1106
00:40:14,609 –> 00:40:17,190
، دارای یک فیلد ورودی است که
1107
00:40:17,190 –> 00:40:19,140
ویژگی فوکوس خودکار را به آن اضافه میکند، به این معنی
1108
00:40:19,140 –> 00:40:20,430
1109
00:40:20,430 –> 00:40:22,319
که وقتی صفحه را باز میکنم، این فیلد ورودی را فوکوس میکند، زیرا ممکن است بخواهم
1110
00:40:22,319 –> 00:40:22,619
1111
00:40:22,619 –> 00:40:25,230
کاربر فوراً شروع به تایپ کند.
1112
00:40:25,230 –> 00:40:27,289
من به این فیلد ورودی یک شناسه
1113
00:40:27,289 –> 00:40:31,019
نام می دهم به عنوان مثال و سپس یک مکان نگهدار
1114
00:40:31,019 –> 00:40:36,930
از نام capital n که نوع آن متن است، بنابراین
1115
00:40:36,930 –> 00:40:38,220
من اینجا چه کار کرده ام، یک فیلد ورودی ایجاد کرده ام که
1116
00:40:38,220 –> 00:40:39,690
در آن کاربر می تواند
1117
00:40:39,690 –> 00:40:41,730
در متنی تایپ کند، مکان نگهدار چیزی که
1118
00:40:41,730 –> 00:40:43,710
کاربر می بیند در آن فیلد ورودی در ابتدا پر شده است.
1119
00:40:43,710 –> 00:40:45,990
بزرگ و نام باشد و به
1120
00:40:45,990 –> 00:40:47,400
آنها بگوید که باید نام خود را
1121
00:40:47,400 –> 00:40:49,859
در اینجا تایپ کنند و من به این فیلد ورودی
1122
00:40:49,859 –> 00:40:53,490
یک شناسه یک شناسه منحصر به فرد داده ام تا
1123
00:40:53,490 –> 00:40:56,220
بعداً بتوانم به این فیلد ورودی خاص ارجاع داده و پیدا
1124
00:40:56,220 –> 00:40:59,160
کنم و سپس
1125
00:40:59,160 –> 00:41:02,190
نوع ورودی برابر با ارسال به روشی دارم.
1126
00:41:02,190 –> 00:41:06,599
اکنون باید این فرم را نیز ارسال کنم و بنابراین
1127
00:41:06,599 –> 00:41:09,769
اگر این صفحه را بارگیری کنم، HTML را بارگیری کنید hello dot
1128
00:41:09,769 –> 00:41:12,869
اینجا چیزی است که می بینم hello فیلدی است که
1129
00:41:12,869 –> 00:41:14,519
می توانم نام خود را تایپ کنم، نام مکان نگهدار
1130
00:41:14,519 –> 00:41:16,170
در آنجا برای من نشان داده می شود و سپس دکمه ای
1131
00:41:16,170 –> 00:41:20,039
که می توانم این را ارسال کنم. فرم و اکنون
1132
00:41:20,039 –> 00:41:21,720
کاری که من می خواهم در داخل
1133
00:41:21,720 –> 00:41:23,789
جاوا اسکریپت انجام دهم این است که به جای این
1134
00:41:23,789 –> 00:41:25,499
تابع hello کاری که می خواهم انجام دهم این است
1135
00:41:25,499 –> 00:41:28,019
که وقتی بارگذاری Dom تمام شد ابتدا مقداری جاوا اسکریپت را اجرا
1136
00:41:28,019 –> 00:41:29,670
می کنم و بنابراین از آن استفاده خواهم
1137
00:41:29,670 –> 00:41:30,960
کرد. همان خط قبل از اینکه شما می خواهید
1138
00:41:30,960 –> 00:41:32,640
ببینید و خیلی کم می گوییم
1139
00:41:32,640 –> 00:41:35,489
سند اضافه کردن رویداد شنونده محتوای Dom
1140
00:41:35,489 –> 00:41:38,309
بارگیری شده است و سپس این تابع به این معنی
1141
00:41:38,309 –> 00:41:40,349
است که وقتی
1142
00:41:40,349 –> 00:41:42,480
Dom بارگیری شد، این کد را اجرا کنید و کدی که من می خواهم اجرا کنم
1143
00:41:42,480 –> 00:41:47,039
این است که بگویم هنگام ارسال فرمی که
1144
00:41:47,039 –> 00:41:48,569
میخواهم هنگام ارسال فرم، اتفاقی بیفتد،
1145
00:41:48,569 –> 00:41:50,099
شاید میخواهم هشداری را نشان
1146
00:41:50,099 –> 00:41:52,170
دهم که اگر برایان را تایپ کنم، سلام برایان را میگوید
1147
00:41:52,170 –> 00:41:53,640
یا اگر دیوید را تایپ کردهام،
1148
00:41:53,640 –> 00:41:55,890
به عنوان مثال سلام دیوید را میگوید، پس چند تا انجام دهم.
1149
00:41:55,890 –> 00:41:58,380
خوب چگونه می توانم فرمی را دریافت کنم
1150
00:41:58,380 –> 00:41:59,880
که اولین سوال است هر زمان که می
1151
00:41:59,880 –> 00:42:02,039
خواهید در یک عنصر یک عنصر خاص
1152
00:42:02,039 –> 00:42:04,499
در صفحه HTML بپرسید، معمولاً کاری که ما می خواهیم
1153
00:42:04,499 –> 00:42:07,680
انجام دهیم این است که انتخابگر پرس و جو نقطه ای را سند
1154
00:42:07,680 –> 00:42:10,049
بزنم تا بگوییم عنصری را که یک فرم است به من بده
1155
00:42:10,049 –> 00:42:11,670
و فقط یک فرم در صفحه وجود دارد،
1156
00:42:11,670 –> 00:42:13,109
بنابراین لازم نیست نگران ابهام
1157
00:42:13,109 –> 00:42:15,230
باشم، فقط می گویم آن فرم را برای من دریافت کنید و
1158
00:42:15,230 –> 00:42:19,349
سپس می توانم وقتی فرم را ارسال می کنید، نقطه را بگویم که
1159
00:42:19,349 –> 00:42:22,079
چه کدی باید اجرا شود و
1160
00:42:22,079 –> 00:42:23,910
آیا نامی داشتم از یک تابع مانند یک
1161
00:42:23,910 –> 00:42:26,130
تابع f من فقط می توانم مانند اجرای
1162
00:42:26,130 –> 00:42:28,279
تابع f در هنگام ارسال فرم بگویم
1163
00:42:28,279 –> 00:42:31,410
اما به طور متناوب، به
1164
00:42:31,410 –> 00:42:32,910
جای ارائه نام یک تابع، میتوانم خود
1165
00:42:32,910 –> 00:42:34,980
تابع را نیز ارائه
1166
00:42:34,980 –> 00:42:35,750
1167
00:42:35,750 –> 00:42:38,990
کنم، میتوانم تابع بگویم و سپس در بین
1168
00:42:38,990 –> 00:42:42,140
این پرانتزها میتوانم با ارائه این تابع ناشناس دقیقاً مشخص کنم
1169
00:42:42,140 –> 00:42:44,810
که چه کدی باید هنگام ارسال فرم اجرا شود.
1170
00:42:44,810 –> 00:42:46,550
1171
00:42:46,550 –> 00:42:48,890
در عوض از این
1172
00:42:48,890 –> 00:42:51,830
تابع ناشناس به عنوان مقدار
1173
00:42:51,830 –> 00:42:54,830
خاصیت ارسالی این فرم استفاده کنید و بنابراین اکنون کاری که
1174
00:42:54,830 –> 00:42:56,930
من می خواهم انجام دهم این است که به
1175
00:42:56,930 –> 00:42:59,180
هر چیزی که کاربر در فیلد ورودی تایپ کرده
1176
00:42:59,180 –> 00:43:01,220
است، هر نامی که کاربر اتفاق می افتد
1177
00:43:01,220 –> 00:43:03,320
دسترسی داشته باشم و بنابراین می توانم فیلد ورودی را
1178
00:43:03,320 –> 00:43:06,710
توسط یک ورودی انتخابگر پرس و جوی نقطه سند دریافت کنید
1179
00:43:06,710 –> 00:43:09,200
و این بار این کار کار می کند، اما ما
1180
00:43:09,200 –> 00:43:10,520
می خواهیم کمی مراقب باشیم
1181
00:43:10,520 –> 00:43:12,170
زیرا در این صفحه چندین
1182
00:43:12,170 –> 00:43:13,700
عنصر ورودی مختلف به عنوان عنصر ورودی
1183
00:43:13,700 –> 00:43:15,710
برای تایپ نام وجود دارد. و
1184
00:43:15,710 –> 00:43:18,860
یک عنصر ورودی دوم در اینجا برای اینکه
1185
00:43:18,860 –> 00:43:20,570
به من بگوید دکمه ای را به من بدهید که می توانم
1186
00:43:20,570 –> 00:43:22,940
این فرم خاص HTML را ارسال کنم و بنابراین آنچه که
1187
00:43:22,940 –> 00:43:25,070
احتمالاً می خواهم انجام دهم این است که کمی
1188
00:43:25,070 –> 00:43:27,380
دقیق تر باشد و تبدیل شود
1189
00:43:27,380 –> 00:43:29,480
در داخل انتخابگر پرس و جو میتوانم از
1190
00:43:29,480 –> 00:43:31,910
تمام راههای استاندارد در CSS استفاده کنم که
1191
00:43:31,910 –> 00:43:34,520
میتوانیم برای یک عنصر خاص انتخاب کنیم، بنابراین
1192
00:43:34,520 –> 00:43:36,920
اگر یادتان باشد در CSS ما
1193
00:43:36,920 –> 00:43:39,320
توانایی اجرای CSS را داشتیم و فقط
1194
00:43:39,320 –> 00:43:41,870
میتوانیم بگوییم تمام h1 را سبک کنید یا میتوانیم بگوییم. همه
1195
00:43:41,870 –> 00:43:43,610
چیزها را با این شناسه خاص یا با
1196
00:43:43,610 –> 00:43:45,800
این کلاس خاص استایل دهید و سند
1197
00:43:45,800 –> 00:43:47,810
انتخابگر پرس و جو ما به همان صورت کار می کند که
1198
00:43:47,810 –> 00:43:50,210
می توانم انتخابگر پرس و جوی سند را بگویم و
1199
00:43:50,210 –> 00:43:53,120
در یک تگ بنویسم تا بگویم عنصر h1 را برای من به ارمغان بیاور
1200
00:43:53,120 –> 00:43:55,010
یا دکمه را دریافت کنم یا من را دریافت کنم.
1201
00:43:55,010 –> 00:43:57,110
فرم، اما اگر چندین
1202
00:43:57,110 –> 00:43:58,550
عنصر h1 وجود داشته باشد، چند دکمه و
1203
00:43:58,550 –> 00:44:00,320
چند فرم وجود دارد، می توانم بیشتر
1204
00:44:00,320 –> 00:44:00,830
از آن صحبت کنم
1205
00:44:00,830 –> 00:44:04,220
اگر مثلاً یک عنصر دارای شناسه باشد، در
1206
00:44:04,220 –> 00:44:06,260
این صورت می توانم بگویم انتخابگر پرس و جو سند
1207
00:44:06,260 –> 00:44:08,780
و سپس در گیومه
1208
00:44:08,780 –> 00:44:11,600
علامت هش و سپس
1209
00:44:11,600 –> 00:44:13,130
1210
00:44:13,130 –> 00:44:15,350
1211
00:44:15,350 –> 00:44:18,530
اگر میخواهم
1212
00:44:18,530 –> 00:44:20,990
مجموعهای از سبکها را فقط به یک
1213
00:44:20,990 –> 00:44:24,170
عنصر که فقط یک شناسه دارد و به همین ترتیب دو شناسه دارد
1214
00:44:24,170 –> 00:44:26,480
اعمال کنم، دوباره با استفاده از همان نحوی که CSS استفاده میکند، دوباره عنصر را با آن شناسه خاص دریافت کنید. ector
1215
00:44:26,480 –> 00:44:29,090
و سپس از نقطه به دنبال نام
1216
00:44:29,090 –> 00:44:30,890
یک کلاس استفاده کنید اگر
1217
00:44:30,890 –> 00:44:33,020
کلاس خاصی از عناصر وجود دارد و من می
1218
00:44:33,020 –> 00:44:35,390
خواهم فقط یکی از آن ها را دریافت
1219
00:44:35,390 –> 00:44:37,550
کنم و بگویم عنصری را دریافت کنید که این کلاس خاص را
1220
00:44:37,550 –> 00:44:39,890
دارد تا آن را نیز دستکاری کنم.
1221
00:44:39,890 –> 00:44:41,780
همان نوع نحوی
1222
00:44:41,780 –> 00:44:44,120
که میتوانیم در CSS برای ارجاع
1223
00:44:44,120 –> 00:44:47,000
و دریافت یک عنصر HTML خاص استفاده کنیم،
1224
00:44:47,000 –> 00:44:48,980
میتوانیم همین کار را در اینجا با پرس و جوی سند انجام دهیم،
1225
00:44:48,980 –> 00:44:49,640
بنابراین
1226
00:44:49,640 –> 00:44:52,700
سعی کنیم یک
1227
00:44:52,700 –> 00:44:54,710
عنصر خاص را بر اساس نام برچسب آن بر اساس آن دریافت
1228
00:44:54,710 –> 00:44:57,200
کنیم. شناسه یا بر اساس کلاس آن و
1229
00:44:57,200 –> 00:44:59,150
به همین دلیل بود که در داخل صفحه HTML
1230
00:44:59,150 –> 00:45:02,900
برای ورودی خود،
1231
00:45:02,900 –> 00:45:05,869
ایده ای از نام به ورودی دادم، می خواستم
1232
00:45:05,869 –> 00:45:08,119
راهی برای ارجاع منحصر به فرد به آن داشته باشم و می توانم به طور منحصر به فرد به آن
1233
00:45:08,119 –> 00:45:10,400
ارجاع دهم نه با ورودی بلکه
1234
00:45:10,400 –> 00:45:13,460
با نام پوند، جایی که می توانم بگویم
1235
00:45:13,460 –> 00:45:16,640
عنصری را که دارای شناسه نام است و
1236
00:45:16,640 –> 00:45:17,869
آن عنصری است که می
1237
00:45:17,869 –> 00:45:20,259
خواهم از داخل کد جاوا اسکریپت خود استخراج کنم به
1238
00:45:20,259 –> 00:45:22,910
محض داشتن آن عنصر HTML، چیزی را که
1239
00:45:22,910 –> 00:45:24,380
می خواهم به عنوان چیزی است که کاربر در واقع در آن
1240
00:45:24,380 –> 00:45:27,019
تایپ کرده است، دریافت کنید. آن فیلد ورودی و معلوم
1241
00:45:27,019 –> 00:45:28,430
میشود که اگر یک فیلد ورودی در
1242
00:45:28,430 –> 00:45:30,739
HTML داشته باشید، میتوانم
1243
00:45:30,739 –> 00:45:33,559
با دسترسی به مقدار آن به آنچه کاربر تایپ کرده است دسترسی پیدا کنم،
1244
00:45:33,559 –> 00:45:35,660
مقدار خاصیت خاصی است که
1245
00:45:35,660 –> 00:45:37,910
به آنچه کاربر در واقع تایپ کرده است اشاره دارد،
1246
00:45:37,910 –> 00:45:42,049
بنابراین میتوانم بگویم نقطه مقدار را ادامه می دهم
1247
00:45:42,049 –> 00:45:43,579
و آن را در یک
1248
00:45:43,579 –> 00:45:45,170
متغیر ذخیره می کنم، بنابراین می توانم چیزی مانند
1249
00:45:45,170 –> 00:45:47,779
let name برابر با هر چیزی که کاربر تایپ کرده است
1250
00:45:47,779 –> 00:45:49,970
بگویم، اما اگر قرار نیست نام را
1251
00:45:49,970 –> 00:45:51,470
به چیز دیگری در این
1252
00:45:51,470 –> 00:45:53,119
تابع در داخل این اختصاص دهم. تابع من
1253
00:45:53,119 –> 00:45:54,619
واقعاً یک بار نام را دریافت می
1254
00:45:54,619 –> 00:45:56,059
کنم و آن را در داخل
1255
00:45:56,059 –> 00:45:58,519
تابع تغییر نمی دهم بنابراین می توانم
1256
00:45:58,519 –> 00:46:00,230
به جای آن از یک پاسبان استفاده کنم که بهتر است
1257
00:46:00,230 –> 00:46:02,029
بگویم یک متغیر ثابت به
1258
00:46:02,029 –> 00:46:04,130
نام نام دارم که برابر با پرس و جو سند است.
1259
00:46:04,130 –> 00:46:06,200
انتخابگر عنصری را که ایدههایش
1260
00:46:06,200 –> 00:46:10,009
نام دارد و به مقدار آن دسترسی پیدا
1261
00:46:10,009 –> 00:46:12,049
میکنم، اکنون میتوانم هشداری را نمایش دهم.
1262
00:46:12,049 –> 00:46:15,920
1263
00:46:15,920 –> 00:46:18,529
1264
00:46:18,529 –> 00:46:20,420
1265
00:46:20,420 –> 00:46:23,380
تعجب poi
1266
00:46:23,380 –> 00:46:25,910
بنابراین من نام را از فرم استخراج کرده ام.
1267
00:46:25,910 –> 00:46:27,769
فیلد ورودی را برای من تایپ
1268
00:46:27,769 –> 00:46:29,749
می کنند و به مقدار آن دسترسی پیدا می کنند و
1269
00:46:29,749 –> 00:46:32,089
سپس هشداری را نمایش می دهم
1270
00:46:32,089 –> 00:46:35,150
که به عنوان مثال به آن شخص سلام می کند
1271
00:46:35,150 –> 00:46:39,799
و بنابراین اکنون برای صفحه را بازخوانی کنید
1272
00:46:39,799 –> 00:46:43,190
من به نام من تایپ می کنم و ارسال را فشار می دهم هشداری دریافت می کنم
1273
00:46:43,190 –> 00:46:44,690
که می گوید سلام برایان
1274
00:46:44,690 –> 00:46:48,049
فشار دهید خوب می توانم دوباره امتحانش کنم می توانم
1275
00:46:48,049 –> 00:46:49,789
چیزی مانند دیوید را تایپ کنم ارسال را فشار دهید
1276
00:46:49,789 –> 00:46:52,599
و اکنون صفحه می گوید سلام دیوید
1277
00:46:52,599 –> 00:46:54,890
پس دوباره اینجا بودیم قادر به ترکیب
1278
00:46:54,890 –> 00:46:57,589
شنوندگان رویدادها و توابع و انتخابگر پرس و جو
1279
00:46:57,589 –> 00:47:00,200
برای خواندن
1280
00:47:00,200 –> 00:47:01,940
اطلاعات از صفحه به منظور
1281
00:47:01,940 –> 00:47:02,960
گفتن
1282
00:47:02,960 –> 00:47:05,300
این عنصر خاص HTML برای من یک عنصر HTML را پیدا کنید
1283
00:47:05,300 –> 00:47:07,670
و مانند آنچه
1284
00:47:07,670 –> 00:47:09,320
کاربر در آن تایپ کرده است به ویژگی مقدار نقطه ای
1285
00:47:09,320 –> 00:47:11,060
که دریافت می کند دسترسی داشته باشید. آنچه کاربر
1286
00:47:11,060 –> 00:47:13,010
در یک فیلد ورودی تایپ کرده است و ما توانسته ایم آن
1287
00:47:13,010 –> 00:47:14,630
را با
1288
00:47:14,630 –> 00:47:16,100
شنوندگان رویداد و هشدارهایی ترکیب کنیم که می توانند
1289
00:47:16,100 –> 00:47:18,770
به صورت پویا به زمانی که
1290
00:47:18,770 –> 00:47:20,600
کاربر فرم را ارسال می کند یا زمانی که کل
1291
00:47:20,600 –> 00:47:22,760
محتوای صفحه به ترتیب بارگذاری می شود پاسخ
1292
00:47:22,760 –> 00:47:24,260
دهند. به حرفه ای
1293
00:47:24,260 –> 00:47:27,560
همچنین افکتهای جالبی ایجاد میکنیم، اما به نظر میرسد که ما میتوانیم
1294
00:47:27,560 –> 00:47:30,290
کارهایی بیش از تغییر مانند HTML
1295
00:47:30,290 –> 00:47:32,540
موجود در یک عنصر انجام دهیم،
1296
00:47:32,540 –> 00:47:35,030
میتوانیم CSS را نیز تغییر دهیم و همچنین
1297
00:47:35,030 –> 00:47:37,160
ویژگیهای سبک یک عنصر خاص
1298
00:47:37,160 –> 00:47:39,650
را نیز تغییر دهیم، بنابراین اجازه دهید به جلو برویم و یک
1299
00:47:39,650 –> 00:47:42,050
به عنوان مثال، من ادامه میدهم و
1300
00:47:42,050 –> 00:47:44,900
یک فایل جدید ایجاد میکنم، سپس رنگها را HTML مینامم
1301
00:47:44,900 –> 00:47:46,970
و داخل رنگها را
1302
00:47:46,970 –> 00:47:50,780
همان کد استاندارد HTML boilerplate را وارد
1303
00:47:50,780 –> 00:47:52,310
میکنم که اغلب با یک بخش head با
1304
00:47:52,310 –> 00:47:55,490
یک عنوان و یک بخش بدنه شروع میکنیم. در
1305
00:47:55,490 –> 00:47:57,710
داخل بدنه این صفحه، من قصد دارم عنوانی
1306
00:47:57,710 –> 00:48:01,070
1307
00:48:01,070 –> 00:48:03,320
را نشان دهم که به عنوان مثال فقط سلام میگوید و شاید به آن یک
1308
00:48:03,320 –> 00:48:05,450
شناسه بدهم تا بتوانم آن را با نام ارجاع دهم،
1309
00:48:05,450 –> 00:48:08,660
شاید شناسه hello داشته باشد و سپس من
1310
00:48:08,660 –> 00:48:11,600
سه دکمه دارم، یک دکمه به نام
1311
00:48:11,600 –> 00:48:15,200
خواندن یک دکمه به نام آبی و سپس
1312
00:48:15,200 –> 00:48:18,710
دکمه ای به نام سبز دارم، به عنوان مثال،
1313
00:48:18,710 –> 00:48:22,340
حالا اگر رنگ ها را باز کنم نقطه HTML اینجا
1314
00:48:22,340 –> 00:48:24,470
چیزی است که می بینم، یک عنوان بزرگ می بینم که می گوید
1315
00:48:24,470 –> 00:48:26,540
سلام و سپس سه دکمه را می بینم. قرمز
1316
00:48:26,540 –> 00:48:27,950
آبی و سبز اما البته در حال حاضر
1317
00:48:27,950 –> 00:48:30,440
این bu ttons در واقع هیچ کاری انجام نمی دهند
1318
00:48:30,440 –> 00:48:32,450
چگونه می توانم دکمه ها را دریافت کنم تا کاری را به خوبی انجام دهند
1319
00:48:32,450 –> 00:48:34,460
، جایی که جاوا اسکریپت وارد می
1320
00:48:34,460 –> 00:48:36,440
شود، یک تگ اسکریپت به
1321
00:48:36,440 –> 00:48:38,810
بالای صفحه خود اضافه می کنم و فقط می خواهم این
1322
00:48:38,810 –> 00:48:40,490
جاوا اسکریپت را زمانی که Dom تمام شد اجرا کنم. در حال بارگیری،
1323
00:48:40,490 –> 00:48:42,680
بنابراین دوباره از همان نحو قبلی استفاده
1324
00:48:42,680 –> 00:48:45,910
میکنیم
1325
00:48:45,910 –> 00:48:49,820
1326
00:48:49,820 –> 00:48:52,010
1327
00:48:52,010 –> 00:48:54,260
1328
00:48:54,260 –> 00:48:56,060
1329
00:48:56,060 –> 00:48:58,070
. d خیلی دوست
1330
00:48:58,070 –> 00:49:00,260
دارم این سه دکمه
1331
00:49:00,260 –> 00:49:01,550
را انجام دهم و بگویم وقتی روی هر یک از آنها کلیک میکنید
1332
00:49:01,550 –> 00:49:02,810
کاری متفاوت انجام دهید مانند تغییر
1333
00:49:02,810 –> 00:49:05,480
رنگ یک عنصر HTML خاص
1334
00:49:05,480 –> 00:49:07,100
و برای انجام این کار من به روشی برای
1335
00:49:07,100 –> 00:49:09,110
ارجاع منحصر به فرد این دکمهها نیاز دارم تا
1336
00:49:09,110 –> 00:49:10,280
این کار را انجام دهید، من قصد دارم به همه آنها شناسه بدهم.
1337
00:49:10,280 –> 00:49:12,890
این دکمه یک شناسه قرمز
1338
00:49:12,890 –> 00:49:14,870
خواهد داشت. این
1339
00:49:14,870 –> 00:49:16,580
دکمه یک شناسه آبی خواهد داشت.
1340
00:49:16,580 –> 00:49:18,320
1341
00:49:18,320 –> 00:49:20,750
1342
00:49:20,750 –> 00:49:24,290
بعداً می توانم داوری کنم
1343
00:49:24,290 –> 00:49:26,390
1344
00:49:26,390 –> 00:49:27,470
1345
00:49:27,470 –> 00:49:30,890
خوب اجازه دهید بگویم انتخابگر پرس و جوی سند نقطه
1346
00:49:30,890 –> 00:49:35,600
هش خوانده شده تا بگویم
1347
00:49:35,600 –> 00:49:39,290
عنصری را که شناسه آن خوانده شده است را دریافت کنید و وقتی روی شما کلیک کردید،
1348
00:49:39,290 –> 00:49:41,870
کلیک کنید، ادامه دهید و
1349
00:49:41,870 –> 00:49:43,430
این را اجرا کنید. تابع
1350
00:49:43,430 –> 00:49:45,500
چه کاری باید عملکرد را به خوبی انجام دهد من
1351
00:49:45,500 –> 00:49:48,020
می خواهم این عنصر h1 را بگیرم و رنگ آن را
1352
00:49:48,020 –> 00:49:50,540
به قرمز تغییر دهم می خواهم رنگ فونت را به قرمز تغییر
1353
00:49:50,540 –> 00:49:52,640
1354
00:49:52,640 –> 00:49:54,440
دهم و در جاوا اسکریپت نظری را برای خودم می گذارم همانطور که شما می توانید
1355
00:49:54,440 –> 00:49:55,850
یک نظر فقط یک سند بگذارید. کاری
1356
00:49:55,850 –> 00:49:57,680
که شما انجام می دهید این است که از این دو اسلش
1357
00:49:57,680 –> 00:49:59,630
1358
00:49:59,630 –> 00:50:01,340
1359
00:50:01,340 –> 00:50:03,410
1360
00:50:03,410 –> 00:50:05,120
استفاده می کنید.
1361
00:50:05,120 –> 00:50:06,590
1362
00:50:06,590 –> 00:50:08,150
ببینید چه چیزی را در
1363
00:50:08,150 –> 00:50:10,880
اینجا در صفحه توصیف می کنید و اکنون کاری که
1364
00:50:10,880 –> 00:50:13,400
من می خواهم انجام دهم این است که انتخابگر پرس و جو سند
1365
00:50:13,400 –> 00:50:17,270
hello عنصر HTML را
1366
00:50:17,270 –> 00:50:19,790
که شناسه آن hello است را برای من دریافت کنید و ادامه
1367
00:50:19,790 –> 00:50:23,510
دهید و ویژگی سبک آن را تغییر دهید و اکنون در
1368
00:50:23,510 –> 00:50:26,060
داخل این سبک شی من می توانم هر یک از آنها را تغییر
1369
00:50:26,060 –> 00:50:28,190
دهم ویژگی های سبک CSS برای
1370
00:50:28,190 –> 00:50:31,070
مثال، یکی از آنها چیزی شبیه رنگ است، بنابراین من می توانم
1371
00:50:31,070 –> 00:50:33,530
ویژگی رنگ را به روز کنم و آن را
1372
00:50:33,530 –> 00:50:37,940
برابر با قرمز قرار دهم، بنابراین در اینجا اکنون می گویم وقتی
1373
00:50:37,940 –> 00:50:40,430
روی دکمه قرمز کلیک می کنید،
1374
00:50:40,430 –> 00:50:42,590
این تابع را اجرا کنید و تابع چیست.
1375
00:50:42,590 –> 00:50:45,020
انجام دهید این است که عنصر hello را
1376
00:50:45,020 –> 00:50:47,690
بهروزرسانی کنید به سبک چه بخشی از استایل
1377
00:50:47,690 –> 00:50:48,860
رنگ
1378
00:50:48,860 –> 00:50:51,230
آن را بهروزرسانی کنیم، باید
1379
00:50:51,230 –> 00:50:54,020
آن را به رنگ قرمز بهروزرسانی کنیم و من
1380
00:50:54,020 –> 00:50:55,520
همین کار را برای دو دکمه دیگر
1381
00:50:55,520 –> 00:50:57,080
نیز انجام میدهم و کدهای تقریباً مشابهی دارد. من
1382
00:50:57,080 –> 00:50:59,780
فقط میخواهم کپی پیست را در اینجا کپی
1383
00:50:59,780 –> 00:51:01,070
کنم، یک مورد برای تغییر
1384
00:51:01,070 –> 00:51:03,050
رنگ به آبی دارم وقتی روی دکمه آبی
1385
00:51:03,050 –> 00:51:04,580
کلیک میکنم، باید رنگ را به آبی تغییر دهید
1386
00:51:04,580 –> 00:51:07,100
و سپس یک بار دیگر این کار را انجام میدهیم
1387
00:51:07,100 –> 00:51:09,920
که رنگ فونت را تغییر میدهیم. سبز می شود وقتی
1388
00:51:09,920 –> 00:51:11,360
روی دکمه سبز کلیک می کنید
1389
00:51:11,360 –> 00:51:15,590
باید رنگ را به سبز تغییر دهید پس حالا وقتی
1390
00:51:15,590 –> 00:51:18,110
رنگ ها را تازه می کنم wml در حال حاضر سلام
1391
00:51:18,110 –> 00:51:19,700
به طور پیش فرض فقط به رنگ سیاه و سفید
1392
00:51:19,700 –> 00:51:22,790
رنگ فونت استاندارد برای HTML است. من روی قرمز کلیک می کنم سلام
1393
00:51:22,790 –> 00:51:24,440
به قرمز تغییر می کند و روی آبی کلیک می کنم تغییر می کند.
1394
00:51:24,440 –> 00:51:26,750
به آبی رنگ سبز را کلیک می کنم به
1395
00:51:26,750 –> 00:51:28,220
رنگ سبز تغییر می کند، بنابراین بسته به اینکه روی چه دکمه ای
1396
00:51:28,220 –> 00:51:30,470
کلیک می کنم، شنونده رویدادی را فعال
1397
00:51:30,470 –> 00:51:32,720
می کند و می گوید زمانی که
1398
00:51:32,720 –> 00:51:34,520
دکمه کلیک می شود، این تابع را اجرا کنید و کاری
1399
00:51:34,520 –> 00:51:36,920
که تابع انجام می دهد این است که عنصر h1 را
1400
00:51:36,920 –> 00:51:38,890
می گیرد، عنصری که شناسه آن hello است
1401
00:51:38,890 –> 00:51:41,599
، سبک آن را تغییر می دهد و سبک خود را به روز می کند.
1402
00:51:41,599 –> 00:51:43,730
خاصیت رنگ چیزی شبیه قرمز یا
1403
00:51:43,730 –> 00:51:46,400
آبی یا سبز باشد و این نشان میدهد که ما میتوانیم
1404
00:51:46,400 –> 00:51:47,300
1405
00:51:47,300 –> 00:51:49,220
علاوه بر این، استایل را تغییر دهیم و فقط
1406
00:51:49,220 –> 00:51:52,819
محتوای خود صفحه را تغییر دهیم، اما معلوم
1407
00:51:52,819 –> 00:51:54,290
شد که همانطور که به من نگاه کردید
1408
00:51:54,290 –> 00:51:55,609
که آن کد را مینویسم که چیزی باید به
1409
00:51:55,609 –> 00:51:57,980
شما میخورد. طراحی بهینه نیست، پس
1410
00:51:57,980 –> 00:51:59,630
به طور کلی هر زمان که متوجه می شوید
1411
00:51:59,630 –> 00:52:01,280
دوباره و دوباره
1412
00:52:01,280 –> 00:52:02,839
و دوباره همان کد را می نویسید، به خصوص اگر کپی
1413
00:52:02,839 –> 00:52:04,730
پیست شما به طور کلی نشانه بدی
1414
00:52:04,730 –> 00:52:06,770
است، معمولاً نشانه آن است
1415
00:52:06,770 –> 00:52:10,130
که راه بهتری برای تغییر تلاش
1416
00:52:10,130 –> 00:52:11,750
برای پیاده سازی وجود دارد. رفتاری که من
1417
00:52:11,750 –> 00:52:13,460
سعی می کنم ایجاد کنم و معلوم می شود که
1418
00:52:13,460 –> 00:52:14,660
وجود دارد و راه های زیادی وجود دارد
1419
00:52:14,660 –> 00:52:17,569
که می توانید این کار را در اینجا انجام دهید این است
1420
00:52:17,569 –> 00:52:19,099
که من ممکن است بخواهم آن را تقویت کنم این
1421
00:52:19,099 –> 00:52:21,710
سه شنونده رویداد را دقیقاً مانند یک
1422
00:52:21,710 –> 00:52:23,930
تابع واحد قرار دهید که قرار است
1423
00:52:23,930 –> 00:52:26,480
رنگ را به هر چیزی که
1424
00:52:26,480 –> 00:52:28,280
دکمه می گوید تغییر دهد، رنگ باید به آن تغییر
1425
00:52:28,280 –> 00:52:31,220
کند، اما یک مشکل اینجاست که اگر
1426
00:52:31,220 –> 00:52:33,020
فقط یک شنونده رویداد را به
1427
00:52:33,020 –> 00:52:35,540
هر سه دکمه متصل کنم.
1428
00:52:35,540 –> 00:52:38,000
وقتی روی دکمه کلیک می کنم برای من مشخص نمی شود که
1429
00:52:38,000 –> 00:52:39,410
چگونه دکمه می داند که
1430
00:52:39,410 –> 00:52:42,020
باید متن را به چه رنگی تغییر دهیم و
1431
00:52:42,020 –> 00:52:44,839
به همین دلیل می توانیم برخی از
1432
00:52:44,839 –> 00:52:47,119
ویژگی های خاص اضافی را به یک
1433
00:52:47,119 –> 00:52:49,339
عنصر HTML خاص اضافه کنیم که به آنها
1434
00:52:49,339 –> 00:52:52,250
ویژگی های داده می گویند. یک ویژگی داده
1435
00:52:52,250 –> 00:52:55,250
روشی است که من می گویم که می
1436
00:52:55,250 –> 00:52:57,589
خواهم برخی از داده ها را با این h2 خاص مرتبط کنم.
1437
00:52:57,589 –> 00:53:00,230
چه عنصر HTML در اینجا هستیم.
1438
00:53:00,230 –> 00:53:05,240
1439
00:53:05,240 –> 00:53:08,900
1440
00:53:08,900 –> 00:53:11,089
داده ها
1441
00:53:11,089 –> 00:53:12,920
با یک خط تیره و سپس می توانم
1442
00:53:12,920 –> 00:53:14,839
هر نامی را که می خواهم برای
1443
00:53:14,839 –> 00:53:16,310
برخی اطلاعاتی که می خواهم
1444
00:53:16,310 –> 00:53:19,099
در مورد عنصر HTML ذخیره کنم مشخص کنم و در
1445
00:53:19,099 –> 00:53:21,200
اینجا اطلاعاتی که می خواهم ذخیره کنم این است که
1446
00:53:21,200 –> 00:53:23,540
می خواهم ذخیره اطلاعات در مورد رنگی که
1447
00:53:23,540 –> 00:53:25,430
باید متن را با
1448
00:53:25,430 –> 00:53:26,990
کلیک روی دکمه به چه رنگی تغییر دهید و بنابراین آنچه که
1449
00:53:26,990 –> 00:53:28,940
اکنون میخواهیم انجام دهیم این
1450
00:53:28,940 –> 00:53:30,890
است که بگوییم اگر به
1451
00:53:30,890 –> 00:53:33,710
این عنصر دسترسی داشته باشم این دکمه میتوانم به دادههای آن دسترسی داشته باشم.
1452
00:53:33,710 –> 00:53:36,980
ویژگی رنگ برای اینکه بدانیم آیا
1453
00:53:36,980 –> 00:53:38,990
باید متن را
1454
00:53:38,990 –> 00:53:41,300
با افزودن این ویژگی های داده
1455
00:53:41,300 –> 00:53:43,380
به این عناصر HTML به قرمز یا آبی یا سبز تغییر دهیم
1456
00:53:43,380 –> 00:53:45,630
و بنابراین اکنون چیزی که من می خواهم راهی برای
1457
00:53:45,630 –> 00:53:47,819
دریافت همه این دکمه ها است که اکنون
1458
00:53:47,819 –> 00:53:50,940
همانطور که به یاد می آورید انتخابگر پرس و جو سند
1459
00:53:50,940 –> 00:53:54,000
را دریافت می کند. عنصر فقط
1460
00:53:54,000 –> 00:53:55,859
برای من یک عنصر
1461
00:53:55,859 –> 00:53:57,930
دریافت می کند و اگر بخواهم چندین عنصر را دریافت کنم اولین عنصری را دریافت می کند
1462
00:53:57,930 –> 00:54:00,059
که
1463
00:54:00,059 –> 00:54:01,829
می توانم در عوض انجام دهم چیزی شبیه به
1464
00:54:01,829 –> 00:54:06,299
انتخاب نقطه پرس و جو سند است.
1465
00:54:06,299 –> 00:54:07,799
1466
00:54:07,799 –> 00:54:09,720
کاری که انتخابگر پرس و جو انجام می دهد، اما
1467
00:54:09,720 –> 00:54:11,190
به جای اینکه انتخابگر پرس و جو یک
1468
00:54:11,190 –> 00:54:12,809
عنصر واحد را برگرداند که با چیزی که
1469
00:54:12,809 –> 00:54:15,269
برای انتخابگر پرس و جو به نظر می رسد مطابقت دارد
1470
00:54:15,269 –> 00:54:17,849
، آرایه ای از همه
1471
00:54:17,849 –> 00:54:19,920
عناصری که با پرس و جوی خاص من مطابقت دارند را به من برمی گرداند
1472
00:54:19,920 –> 00:54:21,900
. o اگر بخواهم نه فقط
1473
00:54:21,900 –> 00:54:23,819
اولین دکمه ای را که پیدا کردم، بلکه همه
1474
00:54:23,819 –> 00:54:26,009
دکمه هایی را که پیدا کردم انتخاب کنم، می توانم اینجا بگویم query
1475
00:54:26,009 –> 00:54:28,410
selector all for button و این
1476
00:54:28,410 –> 00:54:29,970
آرایه جاوا اسکریپت را به من باز می گرداند که
1477
00:54:29,970 –> 00:54:32,490
معادل لیستی است که
1478
00:54:32,490 –> 00:54:35,130
همه آن دکمه ها را نشان می دهد و ما واقعاً میتوانیم
1479
00:54:35,130 –> 00:54:37,109
با نگاه کردن به
1480
00:54:37,109 –> 00:54:39,839
چیزهای داخل کنسول جاوا
1481
00:54:39,839 –> 00:54:43,200
1482
00:54:43,200 –> 00:54:46,559
1483
00:54:46,559 –> 00:54:48,450
1484
00:54:48,450 –> 00:54:50,369
اسکریپت آزمایش کنیم که
1485
00:54:50,369 –> 00:54:53,069
چگونه به نظر میرسد. در واقع کد جاوا اسکریپت را
1486
00:54:53,069 –> 00:54:55,980
اینجا نیز بنویسم تا بتوانم چیزی مانند
1487
00:54:55,980 –> 00:55:01,109
دکمه انتخاب پرس و جوی سند
1488
00:55:01,109 –> 00:55:03,240
بگویم خوب است وقتی سعی میکنم
1489
00:55:03,240 –> 00:55:05,039
دکمهای را در این
1490
00:55:05,039 –> 00:55:08,250
صفحه خاص انتخاب کنم چه اتفاقی میافتد و چیزی که
1491
00:55:08,250 –> 00:55:10,049
دریافت میکنم درست است.
1492
00:55:10,049 –> 00:55:12,779
دکمه ای که داده های آن – رنگ برابر با
1493
00:55:12,779 –> 00:55:14,279
قرمز است، این همان چیزی است که من انتظار دارم انتخاب کننده پرس و جو
1494
00:55:14,279 –> 00:55:16,079
فقط یک عنصر
1495
00:55:16,079 –> 00:55:17,220
را برای من پیدا
1496
00:55:17,220 –> 00:55:20,279
می کند و اولین عنصر را برای من پیدا می کند و به همین ترتیب
1497
00:55:20,279 –> 00:55:20,910
می توانم به جای پرس و جو بگویم همه چیز درست است.
1498
00:55:20,910 –> 00:55:23,190
انتخابگر بیایید پرس و جو را
1499
00:55:23,190 –> 00:55:26,069
انتخاب کنیم و آنچه را که من برمی گردم یک
1500
00:55:26,069 –> 00:55:27,450
لیست گره است که می توانید
1501
00:55:27,450 –> 00:55:29,250
آن را شبیه به یک آرایه یا لیستی در پایتون
1502
00:55:29,250 –> 00:55:31,740
در نظر بگیرید که دارای سه دکمه در آن دکمه 0
1503
00:55:31,740 –> 00:55:35,009
1 و 2 است و دقیقاً مانند یک لیست در
1504
00:55:35,009 –> 00:55:36,539
پایتون همانطور که میتوانید
1505
00:55:36,539 –> 00:55:38,970
آرایهها و آرایههای پایتون را در جاوا اسکریپت به اشیاء
1506
00:55:38,970 –> 00:55:40,769
ایندکس کنید، همچنین میتوان ایندکس کرد، اما
1507
00:55:40,769 –> 00:55:42,630
اگر چیزی شبیه Eames ثابت
1508
00:55:42,630 –> 00:55:47,819
برابر با هری رون و هرمیون ب