در این مطلب، ویدئو 64 – فرم های جدید پویا در یک فرم مجموعه جنگو از طریق جاوا اسکریپت – سری آموزشی Python & Django 3.2 با زیرنویس فارسی را برای دانلود قرار داده ام. شما میتوانید با پرداخت 15 هزار تومان ، این ویدیو به علاوه تمامی فیلم های سایت را دانلود کنید.اکثر فیلم های سایت به زبان انگلیسی می باشند. این ویدئو دارای زیرنویس فارسی ترجمه شده توسط هوش مصنوعی می باشد که میتوانید نمونه ای از آن را در قسمت پایانی این مطلب مشاهده کنید.
مدت زمان فیلم: 00:28:26
تصاویر این ویدئو:
قسمتی از زیرنویس این فیلم:
00:00:00,000 –> 00:00:01,199
در حال حاضر ما می خواهیم جلو برویم و
2
00:00:01,199 –> 00:00:04,319
عناصر فرم جدید را به صورت پویا در یک
3
00:00:04,319 –> 00:00:07,520
فرم جنگو که از طریق جاوا اسکریپت تنظیم شده است اضافه
4
00:00:07,520 –> 00:00:09,120
کنیم، اکنون قبلاً این را دیده ایم و
5
00:00:09,120 –> 00:00:12,080
در داخل ادمین در خطوط داخلی قرار دارد،
6
00:00:12,080 –> 00:00:13,759
بنابراین در درون خطی می توانم در واقع
7
00:00:13,759 –> 00:00:16,560
به عنوان اضافه کنم بسیاری از عناصر فرم همانطور که
8
00:00:16,560 –> 00:00:19,359
اکنون می خواهم در واقع اضافه کردن یک فرم html جدید
9
00:00:19,359 –> 00:00:21,359
نیست، بلکه در واقع فقط ورودی ها و
10
00:00:21,359 –> 00:00:23,920
برخی داده ها را در مورد آن ورودی ها اضافه می کند، بنابراین این
11
00:00:23,920 –> 00:00:25,840
همان کاری است که اکنون می خواهیم انجام دهیم
12
00:00:25,840 –> 00:00:27,599
قبل از اینکه خیلی جلوتر بروم آنچه که می
13
00:00:27,599 –> 00:00:30,000
گویم یکی از راه هاست. شما میتوانید تعداد بیشتری از
14
00:00:30,000 –> 00:00:32,640
آن عناصر فرم را اضافه کنید، با بهروزرسانی این
15
00:00:32,640 –> 00:00:35,040
فراخوانی بسیار مشابه، اگر دقیقاً
16
00:00:35,040 –> 00:00:36,880
کاری نیست که ادمین انجام میدهد، اگر بگویم اضافی
17
00:00:36,880 –> 00:00:39,760
برابر با دو است و به هر بهروزرسانیکننده دستور غذا نگاه کنم، در
18
00:00:39,760 –> 00:00:42,640
واقع میتوانم آن
19
00:00:42,640 –> 00:00:44,640
دو عنصر خالی را اینجا و آنها را ببینم. خوب هستند،
20
00:00:44,640 –> 00:00:46,160
اما در واقع مسیری نیست که ما
21
00:00:46,160 –> 00:00:48,000
می خواهیم برویم، ما می خواهیم به صورت پویا
22
00:00:48,000 –> 00:00:50,000
آن ها را اضافه کنیم، بنابراین آنها را
23
00:00:50,000 –> 00:00:52,239
صفر می گذارم و یک اشکال دیگر وجود دارد که
24
00:00:52,239 –> 00:00:54,480
باید برطرف کنم و آن اضافه کردن به این
25
00:00:54,480 –> 00:00:56,239
دستور کودک در اینجا است، بنابراین من می خواهم به جلو بروید
26
00:00:56,239 –> 00:00:58,480
و آن را انجام دهید همین جا برای اطمینان از
27
00:00:58,480 –> 00:01:01,039
اینکه همه عناصر فرم
28
00:01:01,039 –> 00:01:03,600
ذخیره می شوند، بنابراین همه شما می دانید
29
00:01:03,600 –> 00:01:06,080
که مجموعه پرس و جوی مواد اصلی دستور پخت
30
00:01:06,080 –> 00:01:07,840
باحال ذخیره می شود
31
00:01:07,840 –> 00:01:10,159
و بنابراین اکنون کاری که می خواهم انجام دهم این است که
32
00:01:10,159 –> 00:01:12,799
به خود الگو برگردم
33
00:01:12,799 –> 00:01:14,400
و چیزی وجود دارد که من می توانید در
34
00:01:14,400 –> 00:01:15,920
اینجا اضافه کنید که همه چیز را واقعاً
35
00:01:15,920 –> 00:01:18,159
خوب می کند، بنابراین خارج از این برای
36
00:01:18,159 –> 00:01:20,159
فرم در فرم که
37
00:01:20,159 –> 00:01:21,200
درست زیر آن تنظیم شده است، من ادامه می
38
00:01:21,200 –> 00:01:22,640
دهم و div را انجام می دهم
39
00:01:22,640 –> 00:01:24,640
و ما می خواهیم در اینجا فرم
40
00:01:24,640 –> 00:01:26,560
مجموعه نقطه را به صورت خالی قرار
41
00:01:26,560 –> 00:01:27,600
42
00:01:27,600 –> 00:01:29,119
دهیم. دوباره آن را ذخیره
43
00:01:29,119 –> 00:01:31,040
میکنیم و اکنون میخواهیم اینجا را تازهسازی
44
00:01:31,040 –> 00:01:34,560
کنیم، این یک فرم خالی است، بنابراین اگر نودل پاستا
45
00:01:34,560 –> 00:01:35,759
46
00:01:35,759 –> 00:01:37,360
و یک
47
00:01:37,360 –> 00:01:39,600
پوند را انجام دهم و ذخیره را
48
00:01:39,600 –> 00:01:41,200
خوب بزنم، چه اتفاقی نمیافتد
49
00:01:41,200 –> 00:01:44,159
، در واقع هیچکدام از
50
00:01:44,159 –> 00:01:46,240
آن دادهها را ذخیره نمیکند، وارد قسمت نمیشود.
51
00:01:46,240 –> 00:01:48,720
به این دلیل که این فرم در
52
00:01:48,720 –> 00:01:51,840
واقع راهی برای کپی کردن
53
00:01:51,840 –> 00:01:54,079
آن عنصر فرم است به عبارت دیگر می توانم
54
00:01:54,079 –> 00:01:55,840
وارد اینجا شده و به آن شناسه بدهم، بیایید ادامه دهیم
55
00:01:55,840 –> 00:01:58,159
و این فرم خالی را فراخوانی کنیم و همچنین
56
00:01:58,159 –> 00:02:00,799
به آن یک کلاس از کلاس پنهان را بدهم.
57
00:02:00,799 –> 00:02:02,719
من میروم
58
00:02:02,719 –> 00:02:04,640
و اینجا را اضافه
59
00:02:04,640 –> 00:02:07,040
میکنم و ما فقط به آن یک صفحه نمایش می دهم
60
00:02:07,040 –> 00:02:08,560
هیچ مشکلی ندارد
61
00:02:08,560 –> 00:02:09,360
62
00:02:09,360 –> 00:02:10,720
و حالا
63
00:02:10,720 –> 00:02:14,239
اگر این را دوباره اجرا کنم، آن فرم دیگر
64
00:02:14,239 –> 00:02:15,920
برای کاربر نمایش داده نمی شود،
65
00:02:15,920 –> 00:02:18,400
اما طبیعتاً
66
00:02:18,400 –> 00:02:19,680
67
00:02:19,680 –> 00:02:22,560
در عنصر من در داخل اینجا قرار می گیرد،
68
00:02:22,560 –> 00:02:23,360
خوب است،
69
00:02:23,360 –> 00:02:25,120
بنابراین در ابتدا فقط آن کلاس هیچ را ترک می کنم.
70
00:02:25,120 –> 00:02:27,360
71
00:02:27,360 –> 00:02:28,560
درست پیش رفته است،
72
00:02:28,560 –> 00:02:30,400
بنابراین ما همچنان می توانیم آن را ببینیم و می توانیم
73
00:02:30,400 –> 00:02:33,280
تا آنجایی که می خواهیم با آن تعامل داشته باشیم،
74
00:02:33,280 –> 00:02:34,959
بنابراین چیز بعدی این است که در واقع
75
00:02:34,959 –> 00:02:38,080
یک دکمه ایجاد کنیم که قرار است
76
00:02:38,080 –> 00:02:41,200
سایر کلاس ها را تغییر دهد، بنابراین بیایید برویم
77
00:02:41,200 –> 00:02:44,400
و این کار را انجام دهیم تا شناسه دکمه برابر با
78
00:02:44,400 –> 00:02:46,480
اضافه کردن بیشتر
79
00:02:46,480 –> 00:02:48,800
به آن یک نوع دکمه فقط به سادگی اضافه کنید
80
00:02:48,800 –> 00:02:50,959
و سپس ما می گوییم بیشتر اضافه کنید بسیار
81
00:02:50,959 –> 00:02:51,760
خوب،
82
00:02:51,760 –> 00:02:53,599
بنابراین هر زمان که دکمه هایی را در یک
83
00:02:53,599 –> 00:02:56,959
فرم قرار می دهید گاهی اوقات به طور پیش فرض با مشکلاتی مواجه می شوید،
84
00:02:56,959 –> 00:02:58,959
به عبارت دیگر بیایید
85
00:02:58,959 –> 00:03:00,879
این صفحه را بازخوانی کنیم اگر اضافه کردن را فشار دادم
86
00:03:00,879 –> 00:03:02,159
، مطمئناً ممکن است که به
87
00:03:02,159 –> 00:03:04,480
طور تصادفی فرم را ارسال می کند، بنابراین اگر من
88
00:03:04,480 –> 00:03:06,239
abc را انجام دهم و افزودن بیشتر را بزنم
89
00:03:06,239 –> 00:03:08,480
که ممکن است اکنون اتفاق بیفتد، در این مورد این
90
00:03:08,480 –> 00:03:10,480
اتفاق نمی افتد زیرا خوب
91
00:03:10,480 –> 00:03:12,319
من نوع ارسال را ندادم، فقط
92
00:03:12,319 –> 00:03:14,480
نوع دکمه را دادم، بنابراین مهم است که
93
00:03:14,480 –> 00:03:17,040
اضافه کنید در نوع o دکمه f
94
00:03:17,040 –> 00:03:20,159
بسیار خوب است، بنابراین اکنون ما در واقع مبنایی
95
00:03:20,159 –> 00:03:23,040
برای اضافه کردن فرم های اضافی به
96
00:03:23,040 –> 00:03:25,280
فرم های خالی واقعی داریم، اما
97
00:03:25,280 –> 00:03:27,120
چندین مرحله طول می کشد تا به آنجا برسیم و
98
00:03:27,120 –> 00:03:29,440
همه چیز از طریق جاوا اسکریپت انجام می شود، بنابراین
99
00:03:29,440 –> 00:03:30,959
اگر هرگز این کار را نکرده اید باید با من در این مورد تحمل کنید.
100
00:03:30,959 –> 00:03:32,959
قبلاً از جاوا اسکریپت استفاده می کردم
101
00:03:32,959 –> 00:03:34,400
اما تفاوت چندانی با
102
00:03:34,400 –> 00:03:36,560
پایتون ندارد، برخی از ویژگی های نحوی خاصی وجود دارد
103
00:03:36,560 –> 00:03:38,239
که آن را کمی متفاوت می کند، اما در
104
00:03:38,239 –> 00:03:40,959
کل در این مورد بسیار شبیه به پایتون
105
00:03:40,959 –> 00:03:42,239
است،
106
00:03:42,239 –> 00:03:44,239
بنابراین اولین کاری که می خواهم انجام دهم این است
107
00:03:44,239 –> 00:03:46,080
که می خواهم به این فکر کنم که چگونه
108
00:03:46,080 –> 00:03:48,720
این فرم را به خوبی اضافه میکنم، فرم
109
00:03:48,720 –> 00:03:50,879
به من پاسخ میدهد با کلیک
110
00:03:50,879 –> 00:03:52,959
راست روی افزودن بیشتر، بنابراین اگر روی افزودن بیشتر کلیک
111
00:03:52,959 –> 00:03:55,760
کنم، باید فرمهای بیشتری را به اندازه کافی ساده اضافه کنم،
112
00:03:55,760 –> 00:03:58,319
بنابراین به این معنی است که باید
113
00:03:58,319 –> 00:04:01,360
گوش کنم یا برخی را پیوست کنم. نوعی رویداد به
114
00:04:01,360 –> 00:04:04,000
زمانی که روی این دکمه کلیک میشود وقتی میگویم
115
00:04:04,000 –> 00:04:06,400
رویداد، منظورم به معنای واقعی کلمه
116
00:04:06,400 –> 00:04:08,400
فشردن یک دکمه یا فشار دادن این دکمه خاص
117
00:04:08,400 –> 00:04:10,000
118
00:04:10,000 –> 00:04:12,480
یا فشار دادن این عنصر html است،
119
00:04:12,480 –> 00:04:16,079
میخواهم این عنصر html را
120
00:04:16,079 –> 00:04:18,639
از طریق ریگ کد کپی کنم. ht و بنابراین بیایید ادامه دهیم
121
00:04:18,639 –> 00:04:19,918
و این کار را انجام دهیم
122
00:04:19,918 –> 00:04:22,479
اکنون در پایتون احتمالاً می دانید که
123
00:04:22,479 –> 00:04:24,560
چیزی مانند add more btn به این صورت
124
00:04:24,560 –> 00:04:26,320
اعلام می شود بنابراین این
125
00:04:26,320 –> 00:04:28,720
متغیر admore btn
126
00:04:28,720 –> 00:04:32,639
در داخل جاوا اسکریپت خواهد بود که ما از const
127
00:04:32,639 –> 00:04:33,680
let
128
00:04:33,680 –> 00:04:36,639
یا var در جلوی آن استفاده می کنیم. متغیر بنابراین
129
00:04:36,639 –> 00:04:38,639
const به این معنی است که یک ثابت است و
130
00:04:38,639 –> 00:04:41,120
هرگز تغییر نخواهد کرد و بنابراین در این مورد
131
00:04:41,120 –> 00:04:43,120
قطعاً ثابت خواهد بود.
132
00:04:43,120 –> 00:04:44,880
133
00:04:44,880 –> 00:04:46,960
134
00:04:46,960 –> 00:04:48,560
135
00:04:48,560 –> 00:04:51,199
در صورتی که
136
00:04:51,199 –> 00:04:54,080
اکنون میتوانیم بخواهیم این عنصر را بگیریم، عوامل
137
00:04:54,080 –> 00:04:56,320
شناسایی زیادی
138
00:04:56,320 –> 00:04:58,479
برای این عنصر وجود ندارد به غیر از این،
139
00:04:58,479 –> 00:05:00,560
در اینجا مطمئناً این یک دکمه است،
140
00:05:00,560 –> 00:05:01,759
اما یک سری چیزهای دیگر وجود دارد که
141
00:05:01,759 –> 00:05:03,280
دکمهها هستند و مطمئناً این یک نوع
142
00:05:03,280 –> 00:05:04,720
دکمه است، اما چیزهای دیگری وجود دارد که
143
00:05:04,720 –> 00:05:05,840
یک دکمه داشته باشیم
144
00:05:05,840 –> 00:05:07,520
و بنابراین کاری که میخواهیم انجام دهیم این است که
145
00:05:07,520 –> 00:05:10,320
میخواهیم جلو برویم و این را با شناسهاش بگیریم، اکنون
146
00:05:10,320 –> 00:05:12,720
میخواهیم این عنصر را با شناسه جستجو
147
00:05:12,720 –> 00:05:14,479
کنیم تا این کار را انجام دهیم، دستوری به نام
148
00:05:14,479 –> 00:05:17,440
document.getel وجود دارد. ement
149
00:05:17,440 –> 00:05:19,280
by id
150
00:05:19,280 –> 00:05:21,440
و سپس شما به معنای واقعی کلمه
151
00:05:21,440 –> 00:05:23,280
آن شناسه را کپی و جایگذاری می کنید
152
00:05:23,280 –> 00:05:25,919
و بنابراین به این صورت است که ما در واقع می توانیم
153
00:05:25,919 –> 00:05:28,320
این عنصر را در داخل جاوا اسکریپت
154
00:05:28,320 –> 00:05:31,039
بگیریم که درست است و از این رو من
155
00:05:31,039 –> 00:05:34,240
در واقع می توانم چیزی را که شنونده رویداد نامیده می شود اضافه
156
00:05:34,240 –> 00:05:36,160
157
00:05:36,160 –> 00:05:38,320
کنم و انواع مختلفی وجود دارد شنونده رویدادی
158
00:05:38,320 –> 00:05:41,120
که ما از آن استفاده می کنیم فقط کافیست کلیک کنید
159
00:05:41,120 –> 00:05:42,720
و سپس در اینجا می خواهیم
160
00:05:42,720 –> 00:05:43,919
نوعی از تابع okay را فراخوانی کنیم
161
00:05:43,919 –> 00:05:44,800
162
00:05:44,800 –> 00:05:48,479
بنابراین یک تابع در جاوا اسکریپت بنابراین در پایتون
163
00:05:48,479 –> 00:05:50,800
توابع خود را به این صورت تعریف می کنیم
164
00:05:50,800 –> 00:05:53,520
که می دانید چیزی مانند افزودن فرم
165
00:05:53,520 –> 00:05:55,600
جدید برخی از آرگومانها را وارد کنید
166
00:05:55,600 –> 00:05:57,840
و سپس میدانید که مقداری
167
00:05:57,840 –> 00:06:00,880
مقدار را برمیگرداند یا چیزی شبیه به آن را خوب انجام میدهد،
168
00:06:00,880 –> 00:06:02,880
بنابراین جاوا اسکریپت تفاوت زیادی
169
00:06:02,880 –> 00:06:04,720
با این ندارد، اما به جای def
170
00:06:04,720 –> 00:06:06,880
شما فقط تابع را انجام میدهید
171
00:06:06,880 –> 00:06:08,400
و سپس به جای دو
172
00:06:08,400 –> 00:06:11,520
نقطه در اینجا از curly استفاده میکنید. براکت ها
173
00:06:11,520 –> 00:06:13,199
و ما در این مورد نیازی به دستور بازگشتی نداریم،
174
00:06:13,199 –> 00:06:16,160
اما شما همچنین می توانید مقادیر را
175
00:06:16,160 –> 00:06:18,400
در یک تابع جاوا اسکریپت برگردانید،
176
00:06:18,400 –> 00:06:20,720
بنابراین این فقط یک
177
00:06:20,720 –> 00:06:23,280
تابع قدیمی جاوا اسکریپت است و بنابراین از آنجایی
178
00:06:23,280 –> 00:06:25,600
که یک تابع با نام i است. در واقع می توانید
179
00:06:25,600 –> 00:06:27,120
آن را به اینجا منتقل کنید
180
00:06:27,120 –> 00:06:28,639
اکنون توابعی وجود دارند که
181
00:06:28,639 –> 00:06:30,800
نامی ندارند که در واقع می توانید
182
00:06:30,800 –> 00:06:32,639
کاری شبیه به این
183
00:06:32,639 –> 00:06:34,720
184
00:06:34,720 –> 00:06:36,639
185
00:06:36,639 –> 00:06:38,319
186
00:06:38,319 –> 00:06:39,759
انجام دهید. به زمان،
187
00:06:39,759 –> 00:06:41,840
اما در حال حاضر من فقط از تابع نام
188
00:06:41,840 –> 00:06:42,880
استفاده می کنم
189
00:06:42,880 –> 00:06:44,960
و ما به اینجا می رویم، بنابراین ما این
190
00:06:44,960 –> 00:06:47,360
دکمه افزودن بیشتر را با شنونده رویداد
191
00:06:47,360 –> 00:06:50,240
و تابعی به نام افزودن فرم جدید داریم
192
00:06:50,240 –> 00:06:52,000
و بنابراین کاری که می خواهم در اینجا انجام دهم این است که i’m
193
00:06:52,000 –> 00:06:53,599
فقط میروم و آرگومان من را تایپ میکنم،
194
00:06:53,599 –> 00:06:55,120
بنابراین من فقط آرگها را
195
00:06:55,120 –> 00:06:57,840
اینجا در پایتون میگویم، میرویم
196
00:06:57,840 –> 00:07:00,319
هر چه آن rs هستند را چاپ کنیم تا بفهمیم چه
197
00:07:00,319 –> 00:07:02,240
آرگومانهایی بهطور پیشفرض به این تابع
198
00:07:02,240 –> 00:07:04,880
بر اساس این شنونده رویداد کلیک میشوند.
199
00:07:04,880 –> 00:07:06,000
200
00:07:06,000 –> 00:07:08,080
و بنابراین من
201
00:07:08,080 –> 00:07:10,080
در جاوا اسکریپت شما هستم و نمی توانید از چاپ استفاده کنید،
202
00:07:10,080 –> 00:07:13,039
البته باید از لاگ کنسول درست استفاده کنید،
203
00:07:13,039 –> 00:07:13,840
بنابراین
204
00:07:13,840 –> 00:07:15,759
console.log همان چیزی است که در پایتون چاپ می شود، بسیار
205
00:07:15,759 –> 00:07:20,000
خوب و نظرات به جای هشتگ اسلش هستند،
206
00:07:20,000 –> 00:07:21,440
207
00:07:21,440 –> 00:07:23,360
شما همه این موارد کوچک را می دانید چیزهایی که در
208
00:07:23,360 –> 00:07:25,360
نهایت باعث ایجاد آن می شوند
209
00:07:25,360 –> 00:07:27,759
تغییر بین زبان ها ناامید کننده است، اما وقتی
210
00:07:27,759 –> 00:07:29,199
همه این کارها را انجام دادیم، خواهید دید که چرا
211
00:07:29,199 –> 00:07:31,440
واقعاً خوب است، خوب، پس حالا که
212
00:07:31,440 –> 00:07:33,120
ما این کار را انجام دادیم، بیایید ادامه دهیم و
213
00:07:33,120 –> 00:07:35,039
اینجا را بازخوانی کنیم، اکنون
214
00:07:35,039 –> 00:07:37,520
روی این دکمه افزودن بیشتر کلیک می کنم. بارها
215
00:07:37,520 –> 00:07:39,599
به یاد داشته باشید که گفتم ورود به سیستم کنسول
216
00:07:39,599 –> 00:07:41,039
خوب یکی از چیزهایی که
217
00:07:41,039 –> 00:07:43,440
در اینجا خواهید دید کنسول است، این
218
00:07:43,440 –> 00:07:44,960
کنسول جاوا اسکریپت است البته اگر
219
00:07:44,960 –> 00:07:46,960
نمی بینید که می توانید به مشاهده بروید
220
00:07:46,960 –> 00:07:48,240
221
00:07:48,240 –> 00:07:51,039
و کنسول توسعه دهنده و جاوا اسکریپت روی آن um کلیک کنید
222
00:07:51,039 –> 00:07:53,199
. این مورد واقعاً آن
223
00:07:53,199 –> 00:07:54,879
را برای من خاموش کرد، اما اگر واقعاً
224
00:07:54,879 –> 00:07:56,319
دوباره به
225
00:07:56,319 –> 00:07:57,680
آن نگاه کنم، آن را دوباره بالا میآورم و کنسول من آنجاست
226
00:07:57,680 –> 00:07:58,720
227
00:07:58,720 –> 00:08:00,800
و بنابراین من همه این موارد
228
00:08:00,800 –> 00:08:02,080
را در اینجا
229
00:08:02,080 –> 00:08:04,080
آوردهام، اینها همه آن رویدادها هستند، بنابراین اگر من
230
00:08:04,080 –> 00:08:05,919
تازه کردن دوباره
231
00:08:05,919 –> 00:08:08,080
ضربه بزنید افزودن بیشتر را بزنید، حالا یکسری رویدادها را نشان می دهد،
232
00:08:08,080 –> 00:08:11,120
اگر ذخیره را بزنم، در
233
00:08:11,120 –> 00:08:13,120
واقع نباید آن رویدادها را درست نشان دهد،
234
00:08:13,120 –> 00:08:15,759
ذخیره را فشار می دهم، چیزی نشان نمی دهد، در واقع صفحه را
235
00:08:15,759 –> 00:08:17,840
دوباره برای من بارگذاری کرد، من
236
00:08:17,840 –> 00:08:19,840
سعی کردم موارد بیشتری را اضافه کنم. ذخیره را فشار دهید
237
00:08:19,840 –> 00:08:21,280
به معنای واقعی کلمه صفحه را دوباره بارگذاری می کند زیرا من ذخیره می کنم
238
00:08:21,280 –> 00:08:23,120
تمام دادهها همانطور که میگوید دادهها
239
00:08:23,120 –> 00:08:24,240
ذخیره شدهاند،
240
00:08:24,240 –> 00:08:26,000
اما اتفاقی که با این شنونده رویداد میافتد این
241
00:08:26,000 –> 00:08:29,120
است که من فقط میتوانم یک فرم جدید اضافه کنم یا
242
00:08:29,120 –> 00:08:31,840
حداقل این رویداد را فراخوانی میکنم،
243
00:08:31,840 –> 00:08:33,440
بنابراین این آرگومان در واقع
244
00:08:33,440 –> 00:08:34,320
245
00:08:34,320 –> 00:08:36,640
شنونده رویداد افزودن رویداد نامیده میشود.
246
00:08:36,640 –> 00:08:39,519
اتفاق می افتد
247
00:08:39,519 –> 00:08:42,399
که در واقع آن رویداد را به خود این
248
00:08:42,399 –> 00:08:43,919
فرم می دهد
249
00:08:43,919 –> 00:08:45,839
و بنابراین تمام کاری که من در اینجا انجام می دهم این است که یک
250
00:08:45,839 –> 00:08:48,080
شرط به نام if event اضافه کنم،
251
00:08:48,080 –> 00:08:51,360
سپس رویداد dot prevent پیش فرض را انجام می دهیم بسیار
252
00:08:51,360 –> 00:08:53,040
253
00:08:53,040 –> 00:08:55,200
خوب که
254
00:08:55,200 –> 00:08:57,680
اکنون این رویداد.preventdefault به این معنی است که
255
00:08:57,680 –> 00:09:00,240
اگر به طور تصادفی تماس گرفتید این ارسال
256
00:09:00,240 –> 00:09:04,000
اجازه نمی دهد که اکنون ارسال شود
257
00:09:04,000 –> 00:09:05,120
، چیزهای زیادی وجود دارد که
258
00:09:05,120 –> 00:09:06,560
می توانیم در مورد آنها صحبت کنیم، من در
259
00:09:06,560 –> 00:09:08,480
حال حاضر در مورد آن چیزها صحبت نمی کنم،
260
00:09:08,480 –> 00:09:12,080
اما به طور کلی اکنون دیگر
261
00:09:12,080 –> 00:09:13,279
گزارش کنسول را نخواهیم دید
262
00:09:13,279 –> 00:09:15,680
و صفحه نباید رفرش کنید مثل
263
00:09:15,680 –> 00:09:17,440
وقتی که ذخیره را فشار میدهم و متوجه خواهید شد
264
00:09:17,440 –> 00:09:20,640
که با یک سوسو زدن کوچک در اینجا،
265
00:09:20,640 –> 00:09:22,800
بله خوب است،
266
00:09:22,800 –> 00:09:25,600
بنابراین ما پایه دو
267
00:09:25,600 –> 00:09:26,560
عنصر جامد را داریم
268
00:09:26,560 –> 00:09:29,040
که مرحله بعدی در اینجا است، بنابراین پس
269
00:09:29,040 –> 00:09:33,200
از کلیک روی آن، اکنون یک فرم خالی جدید
270
00:09:33,200 –> 00:09:36,560
به ما اضافه کنید. یا در عوض عنصر فرم را به
271
00:09:36,560 –> 00:09:37,839
272
00:09:37,839 –> 00:09:40,399
فرم html خودمان
273
00:09:40,399 –> 00:09:42,080
بگوییم این چیزی است که می خواهیم انجام دهیم،
274
00:09:42,080 –> 00:09:45,680
پس چگونه این کار را به خوبی انجام دهیم،
275
00:09:45,680 –> 00:09:47,920
یک مثال از فرم amg
276
00:09:47,920 –> 00:09:49,440
در اینجا داریم،
277
00:09:49,440 –> 00:09:53,200
بنابراین من می توانم یک ثابت جدید در اینجا داشته باشم و
278
00:09:53,200 –> 00:09:54,480
بگویم
279
00:09:54,480 –> 00:09:56,640
عنصر فرم خالی و اکنون خواهد بود.
280
00:09:56,640 –> 00:09:58,720
document.getelement
281
00:09:58,720 –> 00:10:02,720
توسط id دوباره به این دلیل که ما در اینجا یک شناسه داریم
282
00:10:02,720 –> 00:10:06,240
و من میتوانم آن عنصر را
283
00:10:06,240 –> 00:10:07,680
باحال بگیرم،
284
00:10:07,680 –> 00:10:09,360
بنابراین در این مورد، کاری که من واقعاً
285
00:10:09,360 –> 00:10:12,959
انجام میدهم این است که اکنون این عنصر
286
00:10:12,959 –> 00:10:15,760
را در خود تابع بیاورم،
287
00:10:15,760 –> 00:10:17,360
یکی از چیزهایی که امیدواریم
288
00:10:17,360 –> 00:10:19,279
تعجب کنید این است که این سند به چه
289
00:10:19,279 –> 00:10:20,880
چیزی اشاره می کند
290
00:10:20,880 –> 00:10:23,760
و در واقع به صفحه رندر نهایی
291
00:10:23,760 –> 00:10:25,279
292
00:10:25,279 –> 00:10:27,279
که اینجا است اشاره دارد، بنابراین توجه کنید که می گوید doctype
293
00:10:27,279 –> 00:10:29,839
html این به کل این صفحه
294
00:10:29,839 –> 00:10:32,399
در اینجا اشاره دارد، بنابراین هر چیزی که در تئوری
295
00:10:32,399 –> 00:10:35,040
هر چیزی که در کل این صفحه باشد
296
00:10:35,040 –> 00:10:37,200
، جاوا اسکریپت باید بتواند آن را بگیرد.
297
00:10:37,200 –> 00:10:40,800
با استفاده از document.getelementbyid
298
00:10:40,800 –> 00:10:43,760
یا عنصر git توسط چیز دیگری نیز،
299
00:10:43,760 –> 00:10:46,480
بنابراین اغلب اوقات اینطور نیست،
300
00:10:46,480 –> 00:10:48,480
اما برای کارهایی که در اینجا انجام داده ایم
301
00:10:48,480 –> 00:10:49,839
، کارهای پیشرفته زیادی انجام
302
00:10:49,839 –> 00:10:51,440
نداده ایم، مطمئناً همینطور است.
303
00:10:51,440 –> 00:10:54,160
بنابراین این در واقع آن فرم را برای من می گیرد
304
00:10:54,160 –> 00:10:55,839
و کاری که من می توانم انجام دهم این است که می توانم
305
00:10:55,839 –> 00:10:59,040
این فرم را شبیه سازی کنم یا کل آن div را
306
00:10:59,040 –> 00:11:00,880
با انجام dot
307
00:11:00,880 –> 00:11:02,320
clone
308
00:11:02,320 –> 00:11:05,440
node و ارسال true در اینجا کپی کنم،
309
00:11:05,440 –> 00:11:07,839
بنابراین این یک کپی از فرم اصلی خواهد بود
310
00:11:07,839 –> 00:11:09,040
311
00:11:09,040 –> 00:11:11,680
و چیزی که من می خواهم اکنون باید این کار را انجام دهم
312
00:11:11,680 –> 00:11:14,720
اگر
313
00:11:14,720 –> 00:11:16,640
کلاسی در آنجا وجود دارد، میخواهم کلاس را حذف کنم، بنابراین میخواهم
314
00:11:16,640 –> 00:11:19,040
آن عنصر را اساساً بازنشانی کنم
315
00:11:19,040 –> 00:11:20,640
و ادامه میدهیم و
316
00:11:20,640 –> 00:11:23,519
خود عنصر فرم خالی را ثابت واقعی میگیریم
317
00:11:23,519 –> 00:11:25,600
و سپس در آنجا وجود دارد. دسته
318
00:11:25,600 –> 00:11:27,920
ای از متدهای نمونه که می توانیم
319
00:11:27,920 –> 00:11:31,920
چیزی مانند ویژگی set
320
00:11:31,920 –> 00:11:34,480
و ویژگی واقعی html را که می خواهیم تنظیم کنیم اجرا کنیم
321
00:11:34,480 –> 00:11:35,600
،
322
00:11:35,600 –> 00:11:38,320
بنابراین در این مورد می گوییم class و من
323
00:11:38,320 –> 00:11:40,880
می خواهم آن را برابر با هی همان
324
00:11:40,880 –> 00:11:42,800
کلاسی که در اینجا داریم تنظیم کنم. فقط
325
00:11:42,800 –> 00:11:46,560
به سادگی یک فرم مانند آن را تشکیل می دهد،
326
00:11:46,560 –> 00:11:47,760
327
00:11:47,760 –> 00:11:49,680
بنابراین اکنون آن ویژگی را تنظیم می کند،
328
00:11:49,680 –> 00:11:51,760
بنابراین در تئوری
329
00:11:51,760 –> 00:11:53,680
باید کلاسی را که در اینجا است حذف کند
330
00:11:53,680 –> 00:11:55,600
و این
331
00:11:55,600 –> 00:11:57,600
همان چیزی است که من می خواهم انجام دهم این است که در واقع می خواهم
332
00:11:57,600 –> 00:11:59,360
این فرم را در جایی اضافه کنم،
333
00:11:59,360 –> 00:12:01,120
جایی که می خواهم اضافه کنم.
334
00:12:01,120 –> 00:12:03,360
خوب احتمالاً در پایان حلقه for
335
00:12:03,360 –> 00:12:05,519
از فرم های اجزای فعلی من یا
336
00:12:05,519 –> 00:12:07,839
حداقل درست قبل از این دکمه در اینجا
337
00:12:07,839 –> 00:12:09,200
من در واقع آن را به انتهای
338
00:12:09,200 –> 00:12:11,440
لیست فرم فعلی خود اضافه می کنم، بنابراین کاری که می
339
00:12:11,440 –> 00:12:14,399
خواهم در اینجا انجام دهم این است که بگویم کلاس برابر با
340
00:12:14,399 –> 00:12:17,920
شاید فرم مواد
341
00:12:18,000 –> 00:12:20,320
تشکیل دهنده باشد. لیست
342
00:12:20,320 –> 00:12:22,720
یا فقط مواد تشکیل دهنده
343
00:12:22,720 –> 00:12:24,480
خیلی مهم نیست که شما در نهایت این را چه می
344
00:12:24,480 –> 00:12:25,760
نامید،
345
00:12:25,760 –> 00:12:27,920
بنابراین توجه کنید که من از کلاس استفاده می کنم، می توانم از
346
00:12:27,920 –> 00:12:30,000
کلاس یا شناسه استفاده
347
00:12:30,000 –> 00:12:31,760
کنم، فعلاً می خواهم از id
348
00:12:31,760 –> 00:12:33,680
استفاده کنم تا همه چیز ساده شود، اما من ادامه میدهیم
349
00:12:33,680 –> 00:12:36,399
350
00:12:36,399 –> 00:12:38,560
و شناسه آن را میگیرم و دوباره یک ثابت جدید اضافه
351
00:12:38,560 –> 00:12:40,480
352
00:12:40,480 –> 00:12:42,320
میکنم، بنابراین این ثابت را بالای
353
00:12:42,320 –> 00:12:43,920
عنصر فرم خالی قرار میدهم و ما این را میخواهیم
354
00:12:43,920 –> 00:12:45,120
355
00:12:45,120 –> 00:12:47,279
356
00:12:47,279 –> 00:12:49,600
هدف کپی فرم خود را میشناسیم و
357
00:12:49,600 –> 00:12:52,399
358
00:12:52,399 –> 00:12:55,120
دوباره با شناسه document.getelement.com
359
00:12:55,120 –> 00:12:57,760
می شود و در این
360
00:12:57,760 –> 00:12:59,440
مورد البته ما آن را شبیه سازی نمی کنیم، من نمی
361
00:12:59,440 –> 00:13:02,079
خواهم این هدف را کپی کنم، در عوض
362
00:13:02,079 –> 00:13:04,959
کاری که می خواهم انجام دهم این است که فقط
363
00:13:04,959 –> 00:13:07,440
نسخه تکراری جدید را اضافه کنم.
364
00:13:07,440 –> 00:13:08,639
365
00:13:08,639 –> 00:13:11,200
خیلی خوب است، امیدوارم
366
00:13:11,200 –> 00:13:13,040
هنوز آنقدر سخت نباشد،
367
00:13:13,040 –> 00:13:15,680
بنابراین ما اینجا را تازه می کنیم
368
00:13:15,680 –> 00:13:17,680
و اگر به موارد منفی برسم ole من هیچ خطایی ندارم
369
00:13:17,680 –> 00:13:18,800
370
00:13:18,800 –> 00:13:20,639
اگر چیزی
371
00:13:20,639 –> 00:13:23,360
شبیه به این را ببینم، در اینجا می گویم که اگر
372
00:13:23,360 –> 00:13:24,800
چیزی شبیه به این را ببینم، این به این معنی است که من
373
00:13:24,800 –> 00:13:27,440
خطاهایی دارم و باید اغلب آنها را برطرف کنم،
374
00:13:27,440 –> 00:13:29,120
در واقع می توانید ببینید که چه
375
00:13:29,120 –> 00:13:31,600
خطاهایی در داخل آن کنسول
376
00:13:31,600 –> 00:13:32,480
377
00:13:32,480 –> 00:13:34,320
وجود دارد. در این مورد فقط نشان دادن آن حرف های
378
00:13:34,320 –> 00:13:35,839
بیهوده است،
379
00:13:35,839 –> 00:13:37,360
بنابراین بیایید به جلو برویم و به عقب برگردیم و از
380
00:13:37,360 –> 00:13:39,760
شر این حرف های بیهوده خلاص شویم و بیایید جلوتر برویم
381
00:13:39,760 –> 00:13:41,839
و فرم جدید خود را در اینجا امتحان کنیم،
382
00:13:41,839 –> 00:13:44,160
تازه کردن اینجاست و من اضافه کردن بیشتر اضافه کردن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر اضافه کردن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن بیشتر افزودن
383
00:13:44,160 –> 00:13:45,040
بیشتر
384
00:13:45,040 –> 00:13:46,160
افزودن بیشتر
385
00:13:46,160 –> 00:13:48,480
اضافه کردن بنابراین
386
00:13:48,480 –> 00:13:49,680
من میروم و
387
00:13:49,680 –> 00:13:51,360
عنصر هر یک از اینها را بررسی میکنم
388
00:13:51,360 –> 00:13:53,440
و چیزی که باید به آن توجه کنم این است که نام کلاس