-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathbasic7.html
More file actions
548 lines (389 loc) · 26.5 KB
/
Copy pathbasic7.html
File metadata and controls
548 lines (389 loc) · 26.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="أساسيات لغة ترميز النص الفائق اتش.تي.إم.إل | أساسيات اتش.تي.إم.إل"/>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="./styles/basic7.css">
<link rel="icon" type="image/x-icon" href="../favicon.png">
<title>HTMLVerse | الأساسيات</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a class="red" href="./index.html#7">X</a>
<h1>أساسيات اتش.تي.إم.إل</h1>
</header>
<main>
<!-- BASIC 7 -->
<div class="box">
<div class="sub-title">
<h2>٧. أساسيات اتش.تي.إم.إل</h2>
<span class="hint">نظري</span>
<p>في هذه الدروس، سوف تتعلم عن أساسيات اتش.تي.إم.إل HTML fundamentals مثل عنصر "ديڢ" <code class="br">div</code>، وسمات "اي.دي" <code class="br">id</code> و"كلاس" <code class="br">class</code>، ونموذج اتش.تي.إم.إل HTML boilerplate، وكيانات اتش.تي.إم.إل HTML entities، والمزيد.</p>
</div>
<section id="1">
<h3>أ. ما هي عناصر "ديڢ" Div Elements ومتى يجب عليك استخدامها؟</h3>
<p>يتم استخدام عنصر "ديڢ" <code class="br">div</code> كحاوية <em>container</em> لتجميع العناصر الأخرى.</p>
<h4>هذا مثال لعنصر "ديڢ" <code class="br">div</code> :</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<div>
<p>مثال لعنصر الفقرة.</p>
</div>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview">
<div>
<p>مثال لعنصر الفقرة.</p>
</div>
</div>
<p>ستستخدم عنصر "ديڢ" <code class="br">div</code> بشكل أساسي لتجميع عناصر اتش.تي.إم.إل <em>HTML elements</em> التي تشترك في مجموعة من أنماط "سي.اس.اس" CSS. ستتعلم المزيد عن "سي.اس.اس" CSS في الدروس وورش العمل المستقبلية.</p>
<p>على الرغم من أن عنصر "ديڢ" <code class="br">div</code> شائع الاستخدام في قواعد البيانات البرمجية، إلا أنه يجب الحذر من الإفراط في استخدامه. في بعض الأحيان، يكون استخدام عنصر آخر أنسب.</p>
<p>على سبيل المثال، إذا كنت تريد تقسيم المحتوى الخاص بك إلى أقسام <strong>sections</strong>، فسيكون عنصر القسم <code class="br">section</code> أكثر ملاءمة من عنصر "ديڢ" <code class="br">div</code>.</p>
<h4>إليك مثال عملي يحتوي على أكثر من قسم <code class="br">section</code> :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<section>
<h2>عنوان القسم الأول</h2>
<p>هذا هو المحتوى الخاص بالقسم الأول.</p>
</section>
<section>
<h2>عنوان القسم الثاني</h2>
<p>هذا هو المحتوى الخاص بالقسم الثاني.</p>
</section>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<section>
<h2>عنوان القسم الأول</h2>
<p>هذا هو المحتوى الخاص بالقسم الأول.</p>
</section>
<section>
<h2>عنوان القسم الثاني</h2>
<p>هذا هو المحتوى الخاص بالقسم الثاني.</p>
</section>
</div>
<p>لعنصر القسم <code class="br">section</code> معنى دلالي <em>semantic meaning</em> مقارنةً بعنصر "ديڢ" <code class="br">div</code> الذي ليس له معنى دلالي <em>not semantic</em>. الدلالات <strong>Semantics</strong> هي معاني الكلمات أو العبارات في اللغة. في لغة اتش.تي.إم.إل HTML، العناصر لها معناها الدلالي الخاص بها أيضًا. هذا يعني أنه عند استخدام عنصر قسم <code class="br">section</code>، سيستوعب المتصفح browser معناه الدلالي semantic meaning ويفهم كيفية التعامل معه كقسم <em>as a section</em> - سواءً على أجهزة الكمبيوتر <em>desktops</em> أو الهواتف المحمولة <em>mobiles</em>، وما إلى ذلك.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ما المعنى الدلالي لعنصر "ديڢ" <code class="br">div</code> ؟</h5>
<p>١. يمثل عنصر "ديڢ" <code class="br">div</code> حاوية container للمحتوى التمهيدي أو مجموعة من الروابط الملاحية navigational links. ❌</p>
<p>٢. يحدد عنصر "ديڢ" <code class="br">div</code> تذييلًا <code class="br">footer</code> للمستند أو القسم <code class="br">section</code>. ❌</p>
<p>٣. يحدد "ديڢ" <code class="br">div</code> محتوى الصفحة الرئيسية ويجب أن يكون فريدًا unique. ❌</p>
<p><mark>٤. عنصر "ديڢ" <code class="br">div</code> ليس له معنى دلالي not semantic. ✅</mark></p>
<br>
<h5>أي مما يلي هو بناء الجملة الصحيح لعنصر "ديڢ" <code class="br">div</code>؟</h5>
<p>١. <divEl/> المحتوى يذهب هنا <divEl> ❌</p>
<p><mark>٢. <div/> المحتوى يذهب هنا <div> ✅</mark></p>
<p>٣. <divElement/> المحتوى يذهب هنا <divElement> ❌</p>
<p>٤. <divGroup/> المحتوى يذهب هنا <divGroup> ❌</p>
<br>
<h5>أي من عناصر اتش.تي.إم.إل HTML التالية يستخدم عادة لتجميع المحتوى في أقسام sections مميزة؟</h5>
<p><mark>١. <code class="br">section</code> ✅</mark></p>
<p>٢. aside ❌</p>
<p>٣. nav ❌</p>
<p>٤. h1 ❌</p>
</div>
</section>
<section id="2">
<h3>ب. ما هي المعرفات IDs والفئات Classes، ومتى يجب عليك استخدامها؟</h3>
<p>تضيف سمة "اي.دي" <code class="br">id</code> معرفًا فريدًا إلى عنصر اتش.تي.إم.إل HTML.</p>
<h4>فيما يلي مثال لعنصر <code class="br">h1</code> مع معرف العنوان id of title:</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<h1 id="title">صفحة مراجعة الفيلم</h1>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<h1>صفحة مراجعة الفيلم</h1>
</div>
<p>يمكنك الرجوع إلى مُعرِّف العنوان <strong>id of title</strong> داخل "جافاسكريبت" JavaScript أو "سي.اس.اس" CSS.</p>
<h4>إليك مثال "سي.اس.اس" CSS يُشير إلى مُعرِّف العنوان لتغيير لون <code class="br">color</code> النص إلى الأحمر <code class="br">red</code>:</h4>
<h4>الكود :</h4>
<h4>اتش.تي.إم.إل (HTML):</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>مثال لصفحة المراجعة</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1 id="title">صفحة مراجعة الفيلم</h1>
</body>
</html>
</code></pre>
</div>
<h4>سي.اس.اس CSS :</h4>
<div class="sourcecode-css">
<pre><span>code <br></span><code>
#title {
color: red;
}
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<h1 id="title-basic7">صفحة مراجعة الفيلم</h1>
</div>
<p>يُشير رمز التجزئة <code class="br">#</code> الموجود أمام العنوان إلى رغبتك في استهداف مُعرّف <code class="br">id</code> بهذه القيمة. يجب عدم استخدام أسماء المُعرّفات <em>IDs</em> أكثر من مرة، ويجب أن تكون فريدة <em>unique</em> دائمًا. تجدر الإشارة أيضًا إلى أنه لا يمكن أن تحتوي قيم المُعرّفات <strong>id values</strong> على مسافات spaces.</p>
<h4>فيما يلي مثال لتطبيق الكلمات "ماين" <code class="br">main</code> و"هيادينغ" <code class="br">heading</code> على قيمة سمة "اي.دي" <code class="br">id</code> :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<h1 id="main heading">"ماين هيادينغ"</h1>
</code></pre>
</div>
<p>سوف ترى المتصفحات <em>Browsers</em> هذه المساحة space كجزء من المعرف <code class="br">id</code> مما سيؤدي إلى مشكلات غير مرغوب فيها عندما يتعلق الأمر بالتصميم والكتابة النصية. يجب أن تحتوي قيم سمة المعرف <code class="br">id</code> فقط على أحرف <strong>letters</strong> وأرقام <strong>digits</strong> وشرطات سفلية <strong>underscores</strong> وشرطات <strong>dashes</strong>.</p>
<p>على النقيض من سمة "اي.دي" <code class="br">id</code>، لا يلزم أن تكون قيمة سمة "كلاس" <code class="br">class</code> فريدة ويمكن أن تحتوي على مسافات spaces.</p>
<h4>فيما يلي مثال لتطبيق فئة <code class="br">class</code> تسمى "بوكس" box على عنصر "ديڢ" <code class="br">div</code> :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<div class="box"></div>
</code></pre>
</div>
<p>إذا أردتَ إضافة أسماء فئات <code class="br">class</code> متعددة إلى عنصر، يمكنكَ ذلك بفصل الأسماء بمسافة space.</p>
<h4> إليكَ مثال مُحدّث لتطبيق فئات متعددة <code class="br">class</code> على عنصر "ديڢ" <code class="br">div</code> :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<div class="box red-box"></div>
</code></pre>
</div>
<h4>فيما يلي مثال آخر لتطبيق فئات classes متعددة على عناصر "ديڢ" <code class="br">div</code> متعددة.</h4>
<h4>الكود :</h4>
<h4>اتش.تي.إم.إل (HTML):</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>مثال لصفحة المراجعة</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div class="box red-box"></div>
<div class="box blue-box"></div>
<div class="box red-box"></div>
<div class="box blue-box"></div>
</body>
</html>
</code></pre>
</div>
<h4>سي.اس.اس (CSS):</h4>
<div class="sourcecode-css">
<pre><span>code <br></span><code>
.box {
width: 100px;
height: 100px;
}
.red-box {
background-color: red;
}
.blue-box {
background-color: blue;
}
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<div class="box-basic7 red-box-basic7"></div>
<div class="box-basic7 blue-box-basic7"></div>
<div class="box-basic7 red-box-basic7"></div>
<div class="box-basic7 blue-box-basic7"></div>
</div>
<p>باختصار، متى يُنصح باستخدام مُعرِّف <code class="br">id</code> بدلاً من فئة <code class="br">class</code>؟ يُفضَّل استخدام الفئات classes عند تطبيق مجموعة من الأنماط <em>styles</em> على عناصر متعددة. إذا كنت ترغب في استهداف عنصر مُحدَّد، يُفضَّل استخدام المُعرِّف <code class="br">id</code> لأن قيم <strong>value</strong> هذه العناصر يجب أن تكون فريدة <strong>unique</strong>.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>متى يجب عليك استخدام معرف <code class="br">id</code> بدلاً من فئة <code class="br">class</code>؟</h5>
<p>١. استخدم فئة <code class="br">class</code> عندما تريد معرفًا فريدًا ينطبق فقط على عنصر واحد. ❌</p>
<p><mark>٢. استخدم معرفًا <code class="br">id</code> عندما تحتاج إلى معرف فريد لعنصر معين، واستخدم فئة <code class="br">class</code> عندما تريد تطبيق الأنماط أو السلوك على عناصر متعددة. ✅</mark></p>
<p>٣. استخدم معرفًا <code class="br">id</code> عندما تريد تصميم عناصر متعددة بشكل متسق عبر أجزاء مختلفة من صفحتك على الويب. ❌</p>
<p>٤. استخدم معرفًا <code class="br">id</code> عندما تريد تطبيق أنماط styles يمكن تجاوزها بسهولة بواسطة أنماط أخرى في "سي.اس.اس" CSS الخاص بك. ❌</p>
<br>
<h5>ماذا يحدث إذا استخدمت نفس المعرف <code class="br">id</code> أكثر من مرة في اتش.تي.إم.إل HTML الخاص بك؟</h5>
<p><mark>١. قد يؤدي ذلك إلى نتائج غير مرغوب فيها ومشكلات عند محاولة تطبيق الأنماط أو استهداف عنصر في "جاڢاسكريبت" JavaScript. ✅</mark></p>
<p>٢. سيتعطل البرنامج. ❌</p>
<p>٣. لن يحدث شيء. ❌</p>
<p>٤. ستظهر رسالة تنبيه alert منبثقة في نافذة المتصفح window. ❌</p>
<br>
<h5>أي مما يلي ليس قيمة صحيحة لسمة المعرف <code class="br">id</code> ؟</h5>
<p>١. "id="heading ❌</p>
<p>٢. "id="main-heading ❌</p>
<p>٣. "id="main ❌</p>
<p><mark>٤. "id="main heading ✅</mark></p>
</div>
</section>
<section id="3">
<h3>ج. ما هي كيانات اتش.تي.إم.إل HTML Entities، وما هي بعض الأمثلة الشائعة؟</h3>
<p>كيان اتش.إم.إل HTML، أو مرجع الحرف <em>character reference</em>، هو مجموعة من الأحرف المستخدمة لتمثيل حرف محجوز <strong>reserved character</strong> في اتش.إم.إل HTML.</p>
<p>لنفترض أنك تريد عرض النص "هذا عنصر <code class="br"></img></code>" على الشاشة. إذا استخدمت الكود الحالي في المحرر، فلن تظهر النتيجة المطلوبة. حتى لو أضفت سمتي "اس.ار.سي" <code class="br">src</code> و"التْ" <code class="br">alt</code> إلى المثال، فستظهر صورة في منتصف الفقرة. هذه ليست النتيجة المطلوبة.</p>
<h4>المثال :</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<p> <img/> هذا عنصر </p>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<div>
<p>هذا عنصر <img/></p>
</div>
</div>
<p>عندما يرى مُحلِّل اتش.تي.إم.إل <strong>HTML parser</strong> رمز "أقل من" <code class="br">></code> متبوعًا باسم وسم اتش.تي.إم.إل <em>HTML tag</em>، يُفسِّر ذلك على أنه عنصر اتش.تي.إم.إل HTML. ولهذا السبب، لا تحصل على النتيجة المطلوبة "هذا عنصر <code class="br"></img></code>" على الشاشة.</p>
<p>لإصلاح هذه المشكلة، يمكنك استخدام كيانات اتش.تي.إم.إل <strong>HTML entities</strong>.</p>
<h4>إليك مثال مُحدّث باستخدام كيانات اتش.تي.إم.إل HTML entities الصحيحة لرمزي "أصغر من" <code class="br"><</code> و"أكبر من" <code class="br">></code>. الآن، سترى عنصر <code class="br"></img></code> على الشاشة.</h4>
<h4>المثال :</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<p> &lt;img/&gt; هذا عنصر </p>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<div>
<p>هذا عنصر <img/><img/></p>
</div>
</div>
<p>تُعرف هذه الأنواع من مراجع الأحرف <em>character references</em> بمراجع الأحرف المُسمّاة <strong>Named character references</strong>. تبدأ المراجع المُسمّاة بعلامة العطف <strong>(&)</strong> وتنتهي بفاصلة منقوطة <strong>(;)</strong>. باستخدام مرجع حرف مُسمّى <em>named character reference</em>، لن يخلط مُحلل اتش.تي.إم.إل <em>HTML parser</em> بينه وبين عنصر اتش.تي.إم.إل <em>HTML element</em> فعلي.</p>
<p>نوع آخر من مراجع الأحرف <em>character references</em> هو المرجع الرقمي العشري <strong>The decimal numeric reference</strong>. يبدأ هذا المرجع بعلامة <strong>(&)</strong> ورمز <strong>(#)</strong>، متبوعًا برقم عشري واحد أو أكثر، متبوعًا بفاصلة منقوطة <strong>(;)</strong>.</p>
<h4>فيما يلي مثال لاستخدام المرجع الرقمي العشري للرمز <code class="br"><</code>.</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
&#60;
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<div>
<
</div>
</div>
<p>آخر نوع من المراجع الرقمية هو المراجع السداسية عشرية <strong>The hexadecimal numeric reference</strong>. يبدأ هذا المرجع بعلامة <strong>(&)</strong> ورمز <strong>(#)</strong> وحرف <strong>(x)</strong>. ثم يتبعه رقم سداسي عشري واحد أو أكثر من أرقام "اس.كـي" <em>ASCII hex digits</em>، وينتهي بفاصلة منقوطة <strong>(;)</strong>.</p>
<h4>فيما يلي مثال لاستخدام المرجع الرقمي السداسي عشر the hexadecimal numeric reference للرمز <code class="br"><</code>.</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
&#x3C;
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<div>
<
</div>
</div>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ما هو كيان اتش.تي.إم.إل "مرجع الحرف" character reference ؟</h5>
<p>١. مجموعة من خطوط جوجل Google fonts. ❌</p>
<p>٢. مجموعة من الصور والتعليقات التوضيحية. ❌</p>
<p>٣. مجموعة من الأحرف تُستخدم لتمثيل أكواد "جاڢاسكريبت" JavaScript. ❌</p>
<p><mark>٤. مجموعة من الأحرف تُستخدم لتمثيل حرف محجوز في اتش.تي.إل.إل HTML. ✅</mark></p>
<br>
<h5>ما هي أنواع مراجع الحرف character references الثلاثة؟</h5>
<p>١. مراجع أحرف رقمية مسماة Named، رومانية Roman وسادسة عشرية Hexadecimal numeric. ❌</p>
<p>٢. مراجع الأحرف الثمانية Octal، المسماة Named والثنائية Binary. ❌</p>
<p><mark>٣. مراجع أحرف مُسمّاة Named، عشرية Decimal numeric وسداسية عشرية Hexadecimal numeric. ✅</mark></p>
<p>٤. مراجع أحرف غير متماثلة Asymmetric، عشرية Decimal numeric وسداسية عشرية Hexadecimal numeric. ❌</p>
<br>
<h5>أيٌّ مما يلي هو الصيغة الصحيحة لمرجع حرف مُسمّى named character reference ؟</h5>
<div class="help-code">
<p><mark>✅ &amp; .١</mark></p>
<p>❌ ;amp; .٢</p>
<p>❌ &amp>> .٣</p>
<p>❌ &amp;& .٤</p>
</div>
</div>
</section>
<section id="4">
<h3>د. ما هو دور عنصر "سكريبت" Script في اتش.تي.إم.إل HTML، وكيف يمكن استخدامه للارتباط بملفات "الجافاسكريبت" JavaScript الخارجية؟</h3>
<p>يُستخدم عنصر النص البرمجي"سكريبت" <code class="br">script</code> لتضمين شيفرة <em>embed</em> قابلة للتنفيذ. يستخدمه معظم المطورين <em>developers</em> لتنفيذ شيفرة "جاڢاسكريبت" JavaScript. يُستخدم "الجافاسكريبت" JavaScript لإضافة المزيد من التفاعل إلى صفحات الويب <em>web pages</em>. من الأمثلة الشائعة على استخدام "جافاسكريبت" JavaScript الألعاب التفاعلية <em>interactive games</em>، وشرائح الصور <em>image sliders</em>، والنماذج الديناميكية <em>dynamic forms</em> التي تتحقق من صحة مدخلات المستخدم في الوقت الحقيقي <em>in real-time</em>.</p>
<h4>فيما يلي مثال لاستخدام عنصر النص البرمجي "سكريبت" <code class="br">script</code> في مستند اتش.تي.إم.إل HTML :</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<body>
<script>
alert("مرحبا بك في عالم اتش.تي.إم.إل");
</script>
</body>
</code></pre>
</div>
<h4>معاينة :</h4>
<div class="preview" role="presentation">
<p>💡 انقر على الزر أدناه لتشغيل "الجافاسكريبت" <strong>JavaScript</strong>:</p>
<div class="container-basic7">
<button id="runScriptBtn">تشغيل البرنامج النصي "سكريبت" <code class="br">script</code></button>
</div>
</div>
<p>على الرغم من أنه يمكنك من الناحية الفنية كتابة كل كود "جاڢاسكريبت" JavaScript الخاص بك داخل علامات البرنامج النصي "سكريبت" <code class="br">script</code>، إلا أنه من الأفضل بدلاً من ذلك الارتباط بملف "جاڢاسكريبت" خارجي <em>external JavaScript file</em>.</p>
<h4>فيما يلي مثال لاستخدام عنصر البرنامج النصي "سكريبت" (script) للارتباط بملف "جاڢاسكريبت" خارجي (link to an external JavaScript file):</h4>
<h4>الكود :</h4>
<div class="sourcecode">
<pre><span>code <br></span><code>
<script src="path-to-javascript-file.js"></script>
</code></pre>
</div>
<p>تُستخدم سمة "اس.ار.سي" <code class="br">src</code> هنا لتحديد موقع ملف "جاڢاسكريبت" الخارجي <em>external JavaScript file</em>. "اس.ار.سي" <code class="br">src</code> تعني "المصدر" <em>source</em>. لا يُنصح بوضع جميع أكواد "الجاڢاسكريبت" JavaScript داخل مستند اتش.تي.إم.إل <em>HTML document</em> نظرًا لفصل الاهتمامات. فصل الاهتمامات هو مبدأ تصميمي <strong>design principle</strong>، حيث تُقسّم برامجك إلى أقسام منفصلة، بحيث يُعالج كل قسم اهتمامًا منفصلًا. في هذه الحالة، نريد فصل شيفرة "الجاڢاسكريبت" <em>JavaScript code</em> عن شيفرة اتش.تي.إم.إل <em>HTML code</em>.</p>
<!-- Questions أسئلة-->
<div class="questions">
<h4>أسئلة :</h4>
<h5>ما هي الخاصية المستخدمة للارتباط بملف "جاڢاسكريبت" خارجي external JavaScript file ؟</h5>
<p>١. سمة "ديڢ" <code class="br">div</code> ❌</p>
<p>٢. سمة "ديفر" defer ❌</p>
<p>٣. سمة "اسينك" async ❌</p>
<p><mark>٤. سمة "اس.ار.سي" <code class="br">src</code> ✅</mark></p>
<br>
<h5>ما هو فصل الاهتمامات؟</h5>
<p>١. يتعلق الأمر بضمان أن يكون لكل فرد في الفريق مسؤولياته الخاصة الواضحة. ❌</p>
<p><mark>٢. مبدأ تصميمي design principe يقضي بفصل برامجك إلى أقسام منفصلة، بحيث يتناول كل قسم منها مشكلةً منفصلة. ✅</mark></p>
<p>٣. عملية دمج جميع جوانب البرنامج في وحدة واحدة لتبسيط العمل ❌</p>
<p>٤. يتضمن هذا المبدأ تقسيم المهام بين أعضاء الفريق دون مراعاة تداخلها أو تأثيرها على بعضها البعض. ❌</p>
<br>
<h5>أي مما يلي هو الصيغة الصحيحة للربط بملف "جاڢاسكريپت" خارجي external JavaScript file ؟</h5>
<div class="help-code">
<p>❌ <script div="path-to-javascript-file.js"></script> .١</p>
<p>❌ <script alt="path-to-javascript-file.js"></script> .٢</p>
<p><mark>✅ <script src="path-to-javascript-file.js"></script> .٣</mark></p>
<p>❌ <script defer="path-to-javascript-file.js"></script> .٤</p>
</div>
</div>
</section>
</div>
<!-- Pages -->
<div class="page-nav">
<a class="prev" href="./basic6.html">→ السابق</a>
<a class="next" href="./basic8.html">التالي ←</a>
</div>
</main>
<script>
const btn = document.getElementById('runScriptBtn');
btn.addEventListener('click', () => {
alert("مرحبا بك في عالم اتش.تي.إم.إل");
});
</script>
</body>
</html>